Repository: InfuseAI/piperider (language: python)

Issue:
[Feature] simple breadcrumb nav 2
<!--  Thanks for sending a pull request!  Here are some check items for you: -->

**PR checklist**

- [ X] Ensure you have added or ran the appropriate tests for your PR.
- [ X] DCO signed

**What type of PR is this?**
Feature
**What this PR does / why we need it**:
Add a simple global breadcrumb for page-level usage (also for library UI)

**Special notes for your reviewer**:
https://www.loom.com/share/37aea0ac81ba4ea9870d68662b2165b2

The breadcrumb logic is very simple. But I think will serve our usage fairly easily (when routing gets more complex in cloud, we can revisit the logic)

```
 * A breadcrumb UI that will use browser location to render breadcrumbs based on the route-params manually provided.
 * FULL_URL1: `/tables/ACTION`
 * BREADCRUMB: `['/', '/tables/ACTION']
 *
 * FULL_URL2: `/tables/ACTION/columns/FOO`
 * BREADCRUMB: `['/', '/tables/ACTION', '/tables/ACTION/columns/FOO']
 ```

**Does this PR introduce a user-facing change?**: yes
<!--
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->
Add breadcrumb to all report pages, allowing for inter-navigation


Discussion / hints:

Fix patch:
diff --git a/static_report/src/App.tsx b/static_report/src/App.tsx
index 3e8729c81..0aeba4fae 100644
--- a/static_report/src/App.tsx
+++ b/static_report/src/App.tsx
@@ -1,16 +1,17 @@
+import * as Sentry from '@sentry/browser';
 import { Suspense, lazy } from 'react';
-import { Switch, Route, Router, BaseLocationHook, type Params } from 'wouter';
+import { Switch, Route, Router, BaseLocationHook } from 'wouter';
+import { BrowserTracing } from '@sentry/tracing';
 
 import { Loading } from './components/shared/Loading';
 import { NotFound } from './components/shared/NotFound';
+import { SRTablesListPage } from './pages/SRTablesListPage';
+import { CRTablesListPage } from './pages/CRTablesListPage';
 import { useHashLocation } from './hooks/useHashLcocation';
-import { SRTablesListPage } from './components/SingleReport/SRTablesListPage';
-import { CRTablesListPage } from './components/ComparisonReport/CRTablesListPage';
-import { SRColumnDetailsPage } from './pages/SRColumnDetailsPage';
-import { CRColumnDetailsPage } from './pages/CRColumnDetailsPage';
-
-import * as Sentry from '@sentry/browser';
-import { BrowserTracing } from '@sentry/tracing';
+import {
+  COLUMN_DETAILS_ROUTE_PATH,
+  TABLE_DETAILS_ROUTE_PATH,
+} from './utils/routes';
 
 const sentryDns = window.PIPERIDER_METADATA.sentry_dns;
 if (sentryDns) {
@@ -31,12 +32,10 @@ if (sentryDns) {
   Sentry.setTag('piperider.version', appVersion);
 }
 
-const SingleReport = lazy(
-  () => import('./components/SingleReport/SingleReport'),
-);
-const ComparisonReport = lazy(
-  () => import('./components/ComparisonReport/ComparisonReport'),
-);
+const SRTableDetailsPage = lazy(() => import('./pages/SRTableDetailsPage'));
+const CRTableDetailsPage = lazy(() => import('./pages/CRTableDetailsPage'));
+const SRColumnDetailsPage = lazy(() => import('./pages/SRColumnDetailsPage'));
+const CRColumnDetailsPage = lazy(() => import('./pages/CRColumnDetailsPage'));
 
 function AppSingle() {
   return (
@@ -50,17 +49,23 @@ function AppSingle() {
             )}
           />
 
-          <Route path="/tables/:reportName">
-            {(params: Params<{ reportName: string }>) => (
-              <SingleReport
-                name={decodeURIComponent(params.reportName)}
+          <Route path={TABLE_DETAILS_ROUTE_PATH}>
+            {({ tableName }) => (
+              <SRTableDetailsPage
+                tableName={decodeURIComponent(tableName)}
                 data={window.PIPERIDER_SINGLE_REPORT_DATA}
               />
             )}
           </Route>
 
-          <Route path="/tables/:reportName/columns/:columnName">
-            <SRColumnDetailsPage data={window.PIPERIDER_SINGLE_REPORT_DATA} />
+          <Route path={COLUMN_DETAILS_ROUTE_PATH}>
+            {({ tableName, columnName }) => (
+              <SRColumnDetailsPage
+                tableName={decodeURIComponent(tableName)}
+                columnName={decodeURIComponent(columnName)}
+                data={window.PIPERIDER_SINGLE_REPORT_DATA}
+              />
+            )}
           </Route>
 
           <Route>
@@ -86,18 +91,23 @@ function AppComparison() {
             )}
           />
 
-          <Route path="/tables/:reportName">
-            {(params: Params<{ reportName: string }>) => (
-              <ComparisonReport
-                name={decodeURIComponent(params.reportName)}
+          <Route path={TABLE_DETAILS_ROUTE_PATH}>
+            {({ tableName }) => (
+              <CRTableDetailsPage
+                tableName={decodeURIComponent(tableName)}
                 data={window.PIPERIDER_COMPARISON_REPORT_DATA}
               />
             )}
           </Route>
-          <Route path="/tables/:reportName/columns/:columnName">
-            <CRColumnDetailsPage
-              data={window.PIPERIDER_COMPARISON_REPORT_DATA}
-            />
+
+          <Route path={COLUMN_DETAILS_ROUTE_PATH}>
+            {({ tableName, columnName }) => (
+              <CRColumnDetailsPage
+                tableName={decodeURIComponent(tableName)}
+                columnName={decodeURIComponent(columnName)}
+                data={window.PIPERIDER_COMPARISON_REPORT_DATA}
+              />
+            )}
           </Route>
           <Route>
             <NotFound />
diff --git a/static_report/src/components/ComparisonReport/CRColumnDetailsRow.tsx b/static_report/src/components/ComparisonReport/CRColumnDetailsRow.tsx
deleted file mode 100644
index cc201e799..000000000
--- a/static_report/src/components/ComparisonReport/CRColumnDetailsRow.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import { Link, useLocation } from 'wouter';
-import { ColumnSchema } from '../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../types';
-import { checkColumnCategorical } from '../../utils/transformers';
-import { ColumnTypeHeader } from '../shared/Columns/ColumnTypeHeader';
-import { NO_VALUE } from '../shared/Columns/constants';
-import { MetricsInfo } from '../shared/Columns/ColumnMetrics/MetricsInfo';
-import { CRGeneralStats } from '../shared/Columns/ColumnMetrics/CRGeneralStats';
-import { CRSummaryStats } from '../shared/Columns/ColumnMetrics/CRSummaryStats';
-
-type Props = {
-  baseColumn?: ColumnSchema;
-  targetColumn?: ColumnSchema;
-};
-export const CRColumnDetailsRow = ({ baseColumn, targetColumn }: Props) => {
-  const fallback = baseColumn || targetColumn;
-  const isCategorical = checkColumnCategorical(baseColumn);
-  const [currentLocation] = useLocation();
-
-  zReport(ZColSchema.safeParse(baseColumn));
-  zReport(ZColSchema.safeParse(targetColumn));
-
-  return (
-    <Flex
-      direction="column"
-      minH="250px"
-      border={'1px solid darkgray'}
-      rounded={'2xl'}
-    >
-      {fallback && (
-        <ColumnTypeHeader
-          columnDatum={fallback}
-          bg={'blue.800'}
-          color={'white'}
-        />
-      )}
-      <Box m={4}>
-        <MetricsInfo
-          name=""
-          firstSlot={'Base'}
-          secondSlot={'Target'}
-          width={'100%'}
-          fontWeight={'bold'}
-          mb={3}
-        />
-
-        <Box mb={3}>
-          <CRGeneralStats
-            baseColumnDatum={baseColumn}
-            targetColumnDatum={targetColumn}
-          />
-        </Box>
-
-        <Box mb={3}>
-          <CRSummaryStats
-            baseColumnDatum={baseColumn}
-            targetColumnDatum={targetColumn}
-          />
-        </Box>
-
-        {isCategorical && (
-          <Box>
-            <MetricsInfo
-              name="Most Common"
-              metakey="topk"
-              width={'100%'}
-              firstSlot={baseColumn?.topk?.values[0] ?? NO_VALUE}
-              secondSlot={targetColumn?.topk?.values[0] ?? NO_VALUE}
-            />
-          </Box>
-        )}
-      </Box>
-      {fallback && (
-        <Flex justifyContent={'center'} p={3} h={'100%'} alignItems={'end'}>
-          <Link href={`${currentLocation}/columns/${fallback.name}`}>
-            <Text as={'a'} color="blue.400">
-              Details
-            </Text>
-          </Link>
-        </Flex>
-      )}
-    </Flex>
-  );
-};
diff --git a/static_report/src/components/ComparisonReport/CRProfilingDetails.tsx b/static_report/src/components/ComparisonReport/CRProfilingDetails.tsx
deleted file mode 100644
index 055e177f4..000000000
--- a/static_report/src/components/ComparisonReport/CRProfilingDetails.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Flex, Grid } from '@chakra-ui/react';
-import { ColumnSchema } from '../../sdlc/single-report-schema';
-import { SaferTableSchema, zReport, ZTableSchema } from '../../types';
-import { getDataChart } from '../../utils/charts';
-import { transformAsNestedBaseTargetRecord } from '../../utils/transformers';
-import { ColumnCardDataVisualContainer } from '../shared/Columns/ColumnCard/ColumnCardDataVisualContainer';
-import { CRColumnDetailsRow } from './CRColumnDetailsRow';
-
-type CRProfilingDetailsProps = {
-  baseTable?: SaferTableSchema;
-  targetTable?: SaferTableSchema;
-};
-export function CRProfilingDetails({
-  baseTable,
-  targetTable,
-}: CRProfilingDetailsProps) {
-  zReport(ZTableSchema.safeParse(baseTable));
-  zReport(ZTableSchema.safeParse(targetTable));
-
-  const transformedData = transformAsNestedBaseTargetRecord<
-    SaferTableSchema['columns'],
-    ColumnSchema
-  >(baseTable?.columns, targetTable?.columns);
-
-  return (
-    <>
-      {Object.entries(transformedData).map(([key, value]) => {
-        return (
-          <CRProfilingColumn
-            key={key}
-            name={key}
-            base={value?.base}
-            target={value?.target}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-/**
- * Optional values due to column-drift across runs
- * Renders combined single chart when type is string or datetime
- * Otherwise, renders two charts per histogram
- */
-type CRProfilingColumnProps = {
-  name: string;
-  base?: ColumnSchema;
-  target?: ColumnSchema;
-};
-function CRProfilingColumn({ name, base, target }: CRProfilingColumnProps) {
-  return (
-    <Flex key={name} direction="column">
-      <Grid my={8} templateColumns="1fr 2fr" gap={12} overflowX={'hidden'}>
-        <CRColumnDetailsRow baseColumn={base} targetColumn={target} />
-
-        <Flex my={4} alignItems={'center'}>
-          <ColumnCardDataVisualContainer height={350}>
-            {getDataChart(base)}
-          </ColumnCardDataVisualContainer>
-          <ColumnCardDataVisualContainer height={350}>
-            {getDataChart(target, base)}
-          </ColumnCardDataVisualContainer>
-        </Flex>
-      </Grid>
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnItem.tsx b/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnItem.tsx
deleted file mode 100644
index f8679ffbd..000000000
--- a/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnItem.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Flex, Grid, Text, GridItem, Box, Icon } from '@chakra-ui/react';
-import { FiArrowRight, FiChevronRight } from 'react-icons/fi';
-
-import {
-  CRBaseTableAssertionsSummary,
-  CRTargetTableAssertionsSummary,
-} from './CRTableListAssertions';
-import { ColumnName } from '../../shared/TableList/ColumnName';
-import type {
-  AssertionTest,
-  ColumnSchema,
-} from '../../../sdlc/single-report-schema';
-import { HistogramChart } from '../../shared/Charts/HistogramChart';
-import { Link } from 'wouter';
-
-function getAssertions(assertions: AssertionTest[]) {
-  const total = assertions.length;
-  const failed = assertions.reduce((acc, test) => {
-    if (test.status === 'failed') {
-      acc++;
-    }
-    return acc;
-  }, 0);
-  const passed = total - failed;
-
-  return {
-    total,
-    passed,
-    failed,
-  };
-}
-
-interface Props {
-  name: string;
-  tableName: string;
-  icon: any;
-  baseColAssertions: AssertionTest[];
-  targetColAssertions: AssertionTest[];
-  columnDatum: {
-    base?: ColumnSchema;
-    target?: ColumnSchema;
-  };
-}
-export function CRTableListColumnItem({
-  name,
-  icon,
-  tableName,
-  baseColAssertions,
-  targetColAssertions,
-  columnDatum,
-}: Props) {
-  const baseAssertions = getAssertions(baseColAssertions);
-  const targetAssertions = getAssertions(targetColAssertions);
-
-  return (
-    <Link href={`/tables/${tableName}/columns/${name}`}>
-      <Grid
-        key={name}
-        templateColumns="205px 2.3fr 1.5fr 2rem"
-        alignItems="center"
-        p={3}
-        _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
-        data-cy="cr-table-list-column-item"
-      >
-        <GridItem>
-          <ColumnName name={name} icon={icon} />
-        </GridItem>
-
-        <GridItem>
-          <Flex gap={4} width="calc(100% - 50px)" height="80px">
-            <Box width="50%">
-              {columnDatum?.base ? (
-                <HistogramChart hideAxis data={columnDatum.base} />
-              ) : (
-                <NoData />
-              )}
-            </Box>
-            <Box width="50%">
-              {columnDatum?.target ? (
-                <HistogramChart hideAxis data={columnDatum.target} />
-              ) : (
-                <NoData />
-              )}
-            </Box>
-          </Flex>
-        </GridItem>
-
-        <GridItem>
-          {baseAssertions.total > 0 && targetAssertions.total > 0 ? (
-            <Flex gap={2} color="gray.500" alignItems="center">
-              <CRBaseTableAssertionsSummary {...baseAssertions} />
-              <Icon as={FiArrowRight} />
-              <CRTargetTableAssertionsSummary
-                {...targetAssertions}
-                baseAssertionsFailed={baseAssertions.failed}
-                assertionsDiff={targetAssertions.total - baseAssertions.total}
-              />
-            </Flex>
-          ) : (
-            <Text color="gray.500">No assertions</Text>
-          )}
-        </GridItem>
-
-        <GridItem>
-          <Flex alignItems="center">
-            <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
-          </Flex>
-        </GridItem>
-      </Grid>
-    </Link>
-  );
-}
-
-function NoData() {
-  return (
-    <Text mt={7} color="gray.500">
-      No data available
-    </Text>
-  );
-}
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnList.tsx b/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnList.tsx
deleted file mode 100644
index fe50902d8..000000000
--- a/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnList.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { CRTableListColumnItem } from './CRTableListColumnItem';
-import {
-  getIconForColumnType,
-  transformAsNestedBaseTargetRecord,
-} from '../../../utils/transformers';
-import type { ColumnSchema } from '../../../sdlc/single-report-schema';
-import { SaferTableSchema } from '../../../types';
-import { Text } from '@chakra-ui/react';
-
-export function CRTableListColumnList({
-  baseTableDatum,
-  targetTableDatum,
-}: {
-  baseTableDatum?: SaferTableSchema;
-  targetTableDatum?: SaferTableSchema;
-}) {
-  const transformedData = transformAsNestedBaseTargetRecord<
-    SaferTableSchema['columns'],
-    ColumnSchema
-  >(baseTableDatum?.columns, targetTableDatum?.columns);
-  const currentTableName = baseTableDatum?.name || targetTableDatum?.name;
-  const columns = Object.keys(targetTableDatum?.columns || {}).map(
-    (colName) => {
-      const { icon: colIcon } = getIconForColumnType(
-        targetTableDatum
-          ? targetTableDatum?.columns[colName]
-          : baseTableDatum?.columns[colName],
-      );
-
-      const mergedBaseColAssertions = [
-        ...(baseTableDatum?.piperider_assertion_result?.columns[colName] || []),
-        ...(baseTableDatum?.dbt_assertion_result?.columns[colName] || []),
-      ];
-
-      const mergedTargetColAssertions = [
-        ...(targetTableDatum?.piperider_assertion_result?.columns[colName] ||
-          []),
-        ...(targetTableDatum?.dbt_assertion_result?.columns[colName] || []),
-      ];
-
-      return {
-        colName,
-        colIcon,
-        mergedBaseColAssertions,
-        mergedTargetColAssertions,
-      };
-    },
-  );
-
-  if (columns.length === 0) {
-    return (
-      <Text textAlign="center" py={5}>
-        No columns
-      </Text>
-    );
-  }
-
-  return (
-    <>
-      {columns.map(
-        ({
-          colName,
-          colIcon,
-          mergedBaseColAssertions,
-          mergedTargetColAssertions,
-        }) => (
-          <CRTableListColumnItem
-            key={colName}
-            name={colName}
-            tableName={currentTableName ?? ''}
-            columnDatum={transformedData[colName]}
-            icon={colIcon}
-            baseColAssertions={mergedBaseColAssertions}
-            targetColAssertions={mergedTargetColAssertions}
-          />
-        ),
-      )}
-    </>
-  );
-}
diff --git a/static_report/src/components/ComparisonReport/CRTableList/index.tsx b/static_report/src/components/ComparisonReport/CRTableList/index.tsx
deleted file mode 100644
index ee6e8584e..000000000
--- a/static_report/src/components/ComparisonReport/CRTableList/index.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import {
-  Flex,
-  Grid,
-  Text,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  GridItem,
-  Center,
-  Stack,
-  Icon,
-  Tooltip,
-} from '@chakra-ui/react';
-import { FiAlertCircle, FiChevronRight, FiGrid } from 'react-icons/fi';
-import { Link } from 'wouter';
-import { nanoid } from 'nanoid';
-
-import { CRTableSchemaDetails } from './CRTableSchemaDetails';
-import { CRTableListAssertions } from './CRTableListAssertions';
-import { CRTableListColumnsSummary } from './CRTableListColumnsSummary';
-import { CRTableListRowsSummary } from './CRTableListRowsSummary';
-import { CRTableListColumnList } from './CRTableListColumnList';
-import { transformAsNestedBaseTargetRecord } from '../../../utils/transformers';
-import {
-  ComparisonReportSchema,
-  zReport,
-  ZSingleSchema,
-  ZComparisonTableSchema,
-  SaferSRSchema,
-  SaferTableSchema,
-} from '../../../types';
-import type { TableActionBarView } from '../../shared/TableActionBar';
-
-function getDisplayNameByBaseOrTargetField({
-  baseField,
-  targetField,
-}: {
-  baseField?: string;
-  targetField?: string;
-}) {
-  if (!targetField) {
-    return baseField;
-  }
-
-  return targetField;
-}
-
-export function CRTableList({
-  data,
-  view,
-}: {
-  data: ComparisonReportSchema;
-  view: TableActionBarView;
-}) {
-  const { base, input: target } = data;
-  const tables = transformAsNestedBaseTargetRecord<
-    SaferSRSchema['tables'],
-    SaferTableSchema
-  >(base.tables, target.tables);
-
-  zReport(ZSingleSchema.safeParse(base));
-  zReport(ZSingleSchema.safeParse(target));
-
-  return (
-    <Flex direction="column" width="900px" minHeight="650px">
-      <Grid templateColumns="218px 2fr 1.5fr" px={4} my={6}>
-        <Text width="100px">Name</Text>
-        <Text width="">Summary</Text>
-        <Text>Assertions</Text>
-      </Grid>
-
-      <Accordion allowToggle>
-        {Object.keys(tables).map((key) => {
-          const table = tables[key];
-          ZComparisonTableSchema(false).safeParse(table);
-
-          const columnName = getDisplayNameByBaseOrTargetField({
-            baseField: table?.base?.name,
-            targetField: table?.target?.name,
-          });
-          const description = getDisplayNameByBaseOrTargetField({
-            baseField: table?.base?.description,
-            targetField: table?.target?.description,
-          });
-
-          return (
-            <Flex key={nanoid()}>
-              <AccordionItem>
-                {({ isExpanded }) => (
-                  <>
-                    <AccordionButton
-                      bgColor="white"
-                      borderRadius="md"
-                      data-cy="cr-table-overview-btn"
-                    >
-                      <Flex
-                        direction="column"
-                        gap={4}
-                        py="10px"
-                        maxH={isExpanded ? '135px' : '90px'}
-                      >
-                        <Grid
-                          templateColumns="218px 2fr 1.5fr 2.8rem"
-                          justifyItems="flex-start"
-                          width="calc(900px - 30px)"
-                        >
-                          <GridItem>
-                            <Center>
-                              <Icon as={FiGrid} color="piperider.500" />
-                              <Text mx={1}>{columnName}</Text>
-
-                              {!isExpanded && (
-                                <Tooltip
-                                  shouldWrapChildren
-                                  placement="right-end"
-                                  label={description}
-                                >
-                                  <Icon as={FiAlertCircle} ml={1} />
-                                </Tooltip>
-                              )}
-                            </Center>
-                          </GridItem>
-                          <GridItem>
-                            <Flex gap={10} color="gray.500">
-                              <Text>Rows</Text>
-                              <CRTableListRowsSummary
-                                baseCount={table?.base?.row_count}
-                                targetCount={table?.target?.row_count}
-                              />
-                            </Flex>
-                          </GridItem>
-                          <GridItem>
-                            <CRTableListAssertions
-                              data={data}
-                              reportName={key}
-                            />
-                          </GridItem>
-                          <GridItem>
-                            {isExpanded && (
-                              <Link key={nanoid()} href={`/tables/${key}`}>
-                                <Flex
-                                  as="a"
-                                  data-cy="cr-navigate-report-detail"
-                                >
-                                  <Icon
-                                    as={FiChevronRight}
-                                    color="piperider.500"
-                                    boxSize={6}
-                                  />
-                                </Flex>
-                              </Link>
-                            )}
-                          </GridItem>
-                        </Grid>
-                        <Grid
-                          templateColumns="218px 1fr"
-                          justifyItems="flex-start"
-                          width="calc(900px - 30px)"
-                        >
-                          <GridItem>
-                            <Flex />
-                          </GridItem>
-                          <GridItem>
-                            {isExpanded ? (
-                              <Text
-                                color="gray.500"
-                                noOfLines={3}
-                                textAlign="left"
-                              >
-                                <Text as="span">Description</Text>{' '}
-                                <Text as="span" ml={4} title={description}>
-                                  {description}
-                                </Text>
-                              </Text>
-                            ) : (
-                              <Flex
-                                mr="30px"
-                                color="gray.500"
-                                maxWidth="650px"
-                                gap={1}
-                              >
-                                <Text as="span" mr={4}>
-                                  Columns
-                                </Text>
-                                <CRTableListColumnsSummary
-                                  baseCount={table?.base?.col_count}
-                                  targetCount={table?.target?.col_count}
-                                />
-                              </Flex>
-                            )}
-                          </GridItem>
-                        </Grid>
-                      </Flex>
-                    </AccordionButton>
-
-                    <AccordionPanel bgColor="white">
-                      {view === 'summary' ? (
-                        <Stack gap={6}>
-                          <CRTableListColumnList
-                            baseTableDatum={table?.base}
-                            targetTableDatum={table?.target}
-                          />
-                        </Stack>
-                      ) : (
-                        <CRTableSchemaDetails
-                          visibleDetail
-                          baseTableDatum={table?.base}
-                          targetTableDatum={table?.target}
-                        />
-                      )}
-                    </AccordionPanel>
-                  </>
-                )}
-              </AccordionItem>
-            </Flex>
-          );
-        })}
-      </Accordion>
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/ComparisonReport/CRTablesListPage.tsx b/static_report/src/components/ComparisonReport/CRTablesListPage.tsx
deleted file mode 100644
index 8d44fc1c4..000000000
--- a/static_report/src/components/ComparisonReport/CRTablesListPage.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useLocalStorage } from 'usehooks-ts';
-
-import { Main } from '../shared/Main';
-import {
-  TableActionBar,
-  type TableActionBarView,
-} from '../shared/TableActionBar';
-
-import { formatReportTime } from '../../utils/formatters';
-
-import { CRTableList } from './CRTableList';
-import { useDocumentTitle } from '../../hooks/useDocumentTitle';
-import { CR_LIST_VIEW } from '../../utils/localStorageKeys';
-import { type ComparisonReportSchema } from '../../types';
-
-type Props = { data: ComparisonReportSchema };
-
-export function CRTablesListPage({ data }: Props) {
-  const { base, input: target } = data;
-
-  const [view, setView] = useLocalStorage<TableActionBarView>(
-    CR_LIST_VIEW,
-    'summary',
-  );
-
-  useDocumentTitle('Report List');
-
-  return (
-    <Main
-      isSingleReport={false}
-      time={`${formatReportTime(base.created_at)} -> ${formatReportTime(
-        target.created_at,
-      )}`}
-    >
-      <TableActionBar
-        sourceName={data.input.datasource.name}
-        sourceType={data.input.datasource.type}
-        currentView={view}
-        toggleView={(nextView) => {
-          setView(nextView);
-        }}
-      />
-
-      <CRTableList data={data} view={view} />
-    </Main>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRProfilingDetails.tsx b/static_report/src/components/SingleReport/SRProfilingDetails.tsx
deleted file mode 100644
index b330ae13a..000000000
--- a/static_report/src/components/SingleReport/SRProfilingDetails.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import type { TableSchema } from '../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../types';
-import { ColumnCard } from '../shared/Columns/ColumnCard';
-import { nanoid } from 'nanoid';
-
-interface Props {
-  data: TableSchema['columns'];
-}
-export function SRProfilingDetails({ data }: Props) {
-  return (
-    <Flex direction="row" flexWrap={'wrap'} gap={4}>
-      {Object.keys(data).map((key) => {
-        const column = data[key];
-        zReport(ZColSchema.safeParse(column));
-
-        return <ColumnCard key={nanoid()} columnDatum={column} />;
-      })}
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableList/SRTableListAssertionsSummary.tsx b/static_report/src/components/SingleReport/SRTableList/SRTableListAssertionsSummary.tsx
deleted file mode 100644
index b0a4b6976..000000000
--- a/static_report/src/components/SingleReport/SRTableList/SRTableListAssertionsSummary.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Flex, Text, Icon } from '@chakra-ui/react';
-import { FiCheck, FiX } from 'react-icons/fi';
-
-import { type AssertionTest } from '../../../sdlc/single-report-schema';
-
-export function SRTableListAssertionsSummary({
-  assertions,
-}: {
-  assertions: AssertionTest[];
-}) {
-  const total = assertions.length;
-  const failed = assertions.reduce((acc, test) => {
-    if (test.status === 'failed') {
-      acc++;
-    }
-    return acc;
-  }, 0);
-  const isPassed = failed === 0;
-
-  return (
-    <Flex gap={2} alignItems="center">
-      <Flex
-        alignItems="center"
-        borderRadius="md"
-        bgColor={isPassed ? '#DEFFEB' : '#FFE8F0'}
-        color={isPassed ? '#1F7600' : '#F60059'}
-        py={0.5}
-        px={1.5}
-      >
-        <Icon as={isPassed ? FiCheck : FiX} boxSize={4} />
-        <Text as="span">{isPassed ? 'All' : failed}</Text>
-      </Flex>
-      <Text as="span" color="gray.500">
-        of
-      </Text>
-      <Text as="span">{total}</Text>
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableList/SRTableListColumnItem.tsx b/static_report/src/components/SingleReport/SRTableList/SRTableListColumnItem.tsx
deleted file mode 100644
index 61a83e560..000000000
--- a/static_report/src/components/SingleReport/SRTableList/SRTableListColumnItem.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
-
-import { ColumnName } from '../../shared/TableList/ColumnName';
-import { SRTableListAssertionsSummary } from './SRTableListAssertionsSummary';
-import { HistogramChart } from '../../shared/Charts/HistogramChart';
-import type {
-  AssertionTest,
-  ColumnSchema,
-} from '../../../sdlc/single-report-schema';
-import { Link } from 'wouter';
-import { FiChevronRight } from 'react-icons/fi';
-
-export function SRTableListColumnItem({
-  name,
-  icon,
-  columnDatum,
-  colAssertions,
-  tableName,
-}: {
-  name: string;
-  columnDatum: ColumnSchema;
-  tableName: string;
-  icon: any;
-  colAssertions: AssertionTest[] | undefined;
-}) {
-  return (
-    <Link href={`/tables/${tableName}/columns/${name}`}>
-      <Grid
-        p={3}
-        key={name}
-        templateColumns="207px 2.5fr 1fr 2rem"
-        alignItems="center"
-        _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
-        data-cy="sr-table-list-column-item"
-      >
-        <GridItem>
-          <ColumnName name={name} icon={icon} />
-        </GridItem>
-
-        <GridItem>
-          <Flex width="calc(100% - 50px)" height="80px">
-            <HistogramChart hideAxis data={columnDatum} />
-          </Flex>
-        </GridItem>
-
-        <GridItem>
-          {!colAssertions ? (
-            <Text color="gray.500">No assertions</Text>
-          ) : (
-            <SRTableListAssertionsSummary assertions={colAssertions} />
-          )}
-        </GridItem>
-
-        <GridItem>
-          <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
-        </GridItem>
-      </Grid>
-    </Link>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableList/SRTableListColumnList.tsx b/static_report/src/components/SingleReport/SRTableList/SRTableListColumnList.tsx
deleted file mode 100644
index 5401b11bb..000000000
--- a/static_report/src/components/SingleReport/SRTableList/SRTableListColumnList.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { TableSchema } from '../../../sdlc/single-report-schema';
-import { getIconForColumnType } from '../../../utils/transformers';
-import { SRTableListColumnItem } from './SRTableListColumnItem';
-
-export function SRTableListColumnList({ table }: { table: TableSchema }) {
-  const columns = Object.keys(table.columns).map((colName) => {
-    const { icon: colIcon } = getIconForColumnType(table.columns[colName]);
-    const columnDatum = table.columns[colName];
-    const mergedColAssertions = [
-      ...(table.piperider_assertion_result?.columns[colName] || []),
-      ...(table.dbt_assertion_result?.columns[colName] || []),
-    ];
-
-    return {
-      colName,
-      colIcon,
-      columnDatum,
-      mergedColAssertions,
-    };
-  });
-
-  return (
-    <>
-      {columns.map(({ colName, colIcon, mergedColAssertions }) => (
-        <SRTableListColumnItem
-          key={colName}
-          name={colName}
-          columnDatum={table.columns[colName]}
-          colAssertions={mergedColAssertions}
-          tableName={table.name}
-          icon={colIcon}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableList/SRTableListSchemaDetail.tsx b/static_report/src/components/SingleReport/SRTableList/SRTableListSchemaDetail.tsx
deleted file mode 100644
index 9279daadb..000000000
--- a/static_report/src/components/SingleReport/SRTableList/SRTableListSchemaDetail.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  Text,
-  TableContainer,
-  Table,
-  Thead,
-  Tbody,
-  Td,
-  Tr,
-  Th,
-  Icon,
-} from '@chakra-ui/react';
-import { nanoid } from 'nanoid';
-import { FiChevronRight } from 'react-icons/fi';
-import { Link } from 'wouter';
-
-import { type TableSchema } from '../../../sdlc/single-report-schema';
-
-export function SRTableListSchemaDetail({ table }: { table: TableSchema }) {
-  return (
-    <TableContainer width="100%" maxWidth="calc(900px - 30px)">
-      <Table variant="simple">
-        <Thead>
-          <Tr>
-            <Th>Column</Th>
-            <Th>Type</Th>
-            <Th width="5%" />
-          </Tr>
-        </Thead>
-        <Tbody>
-          {Object.keys(table.columns).map((colName) => (
-            <Link
-              key={nanoid(10)}
-              href={`/tables/${table.name}/columns/${colName}`}
-            >
-              <Tr
-                _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
-                data-cy="sr-table-list-schema-item"
-              >
-                <Td whiteSpace="normal">
-                  <Text
-                    as="span"
-                    noOfLines={1}
-                    maxWidth="250px"
-                    title={table.columns[colName]?.name}
-                  >
-                    {table.columns[colName]?.name}
-                  </Text>
-                </Td>
-                <Td>{table.columns[colName]?.schema_type}</Td>
-                <Td>
-                  <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
-                </Td>
-              </Tr>
-            </Link>
-          ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableList/index.tsx b/static_report/src/components/SingleReport/SRTableList/index.tsx
deleted file mode 100644
index c47818574..000000000
--- a/static_report/src/components/SingleReport/SRTableList/index.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import {
-  Flex,
-  Grid,
-  Text,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionPanel,
-  GridItem,
-  Center,
-  Stack,
-  Icon,
-  Tooltip,
-} from '@chakra-ui/react';
-import { FiAlertCircle, FiCheck, FiChevronRight, FiGrid } from 'react-icons/fi';
-import { nanoid } from 'nanoid';
-import { Link } from 'wouter';
-
-import { SRTableListSchemaDetail } from './SRTableListSchemaDetail';
-import { SRTableListColumnLabel } from './SRTableListColumnLabel';
-import { SRTableListColumnList } from './SRTableListColumnList';
-import { zReport, ZTableSchema } from '../../../types';
-import { getReportAggregateAssertions } from '../../../utils/assertion';
-import { formatColumnValueWith, formatNumber } from '../../../utils/formatters';
-import { getIconForColumnType } from '../../../utils/transformers';
-import { type SingleReportSchema } from '../../../sdlc/single-report-schema';
-import { singleReportSchemaSchema } from '../../../sdlc/single-report-schema.z';
-import { type TableActionBarView } from '../../shared/TableActionBar';
-
-export function SRTableList({
-  data,
-  view,
-}: {
-  data: SingleReportSchema;
-  view: TableActionBarView;
-}) {
-  const { id, created_at, datasource, tables } = data;
-
-  zReport(
-    singleReportSchemaSchema
-      .pick({ id: true, created_at: true, datasource: true })
-      .safeParse({ id, created_at, datasource }),
-  );
-
-  return (
-    <Flex direction="column" width="900px" minHeight="650px">
-      <Grid templateColumns="1fr 2fr 1fr" px={4} my={6}>
-        <Text width="100px">Name</Text>
-        <Text width="">Summary</Text>
-        <Text>Assertions</Text>
-      </Grid>
-
-      <Accordion allowToggle>
-        {Object.keys(tables).map((key) => {
-          const table = tables[key];
-
-          zReport(ZTableSchema.safeParse(table));
-
-          const assertions = getReportAggregateAssertions(
-            table.piperider_assertion_result,
-            table.dbt_assertion_result,
-          );
-          const totalAssertions = assertions.passed + assertions.failed;
-          const hasFailed = assertions.failed > 0;
-
-          const columns = Object.keys(table.columns).map((key) => key);
-
-          return (
-            <Flex key={nanoid()}>
-              <AccordionItem>
-                {({ isExpanded }) => (
-                  <>
-                    <AccordionButton
-                      bgColor="white"
-                      borderRadius="md"
-                      data-cy="sr-table-overview-btn"
-                    >
-                      <Flex
-                        direction="column"
-                        gap={4}
-                        py="10px"
-                        maxHeight={isExpanded ? '135px' : '90px'}
-                      >
-                        <Grid
-                          templateColumns="1fr 2fr 1fr"
-                          justifyItems="flex-start"
-                          width="calc(900px - 30px)"
-                        >
-                          <GridItem>
-                            <Center>
-                              <Icon as={FiGrid} color="piperider.500" />
-                              <Text mx={1}>{table.name}</Text>
-
-                              {!isExpanded && (
-                                <Tooltip
-                                  label={table.description}
-                                  placement="right-end"
-                                  shouldWrapChildren
-                                >
-                                  <Icon as={FiAlertCircle} ml={1} />
-                                </Tooltip>
-                              )}
-                            </Center>
-                          </GridItem>
-                          <GridItem>
-                            <Flex gap={10} color="gray.500">
-                              <Text>Rows</Text>
-                              <Text>
-                                {formatColumnValueWith(
-                                  table.row_count,
-                                  formatNumber,
-                                )}
-                              </Text>
-                            </Flex>
-                          </GridItem>
-                          <GridItem>
-                            <Flex gap={1} alignItems="center">
-                              {hasFailed ? (
-                                <Text as="span" color="#F60059">
-                                  {assertions.failed} fails
-                                </Text>
-                              ) : (
-                                <Center
-                                  bgColor="#DEFFEB"
-                                  py={0.5}
-                                  px={1}
-                                  borderRadius="md"
-                                  color="#1F7600"
-                                >
-                                  <Icon as={FiCheck} boxSize={4} />
-                                  All
-                                </Center>
-                              )}
-                              <Text as="span" color="gray.500">
-                                /
-                              </Text>
-                              <Text as="span" mr={3}>
-                                {totalAssertions === 0
-                                  ? 'none'
-                                  : `${totalAssertions} assertions`}
-                              </Text>
-                              {isExpanded && (
-                                <Link key={table.name} href={`/tables/${key}`}>
-                                  <Flex
-                                    as="a"
-                                    data-cy="sr-navigate-report-detail"
-                                  >
-                                    <Icon
-                                      as={FiChevronRight}
-                                      color="piperider.500"
-                                      boxSize={6}
-                                    />
-                                  </Flex>
-                                </Link>
-                              )}
-                            </Flex>
-                          </GridItem>
-                        </Grid>
-                        <Grid
-                          templateColumns="218px 1fr"
-                          justifyItems="flex-start"
-                          width="calc(900px - 30px)"
-                        >
-                          <GridItem>
-                            <Flex />
-                          </GridItem>
-                          <GridItem>
-                            {isExpanded ? (
-                              <Text
-                                color="gray.500"
-                                noOfLines={3}
-                                textAlign="left"
-                              >
-                                <Text as="span">Description</Text>{' '}
-                                <Text
-                                  as="span"
-                                  ml={4}
-                                  title={table.description}
-                                >
-                                  {table.description}
-                                </Text>
-                              </Text>
-                            ) : (
-                              <Flex mr="30px" color="gray.500" maxWidth="650px">
-                                <Text
-                                  as="span"
-                                  minWidth="95px"
-                                  maxWidth="205px"
-                                  textAlign="left"
-                                >
-                                  {table.col_count} Columns
-                                </Text>
-                                <Flex
-                                  __css={{
-                                    display: 'flex',
-                                    gap: 3,
-                                    alignItems: 'center',
-                                    maxWidth: '100%',
-                                    overflowX: 'scroll',
-                                    scrollbarWidth: 'none',
-                                    '&::-webkit-scrollbar': {
-                                      display: 'none',
-                                    },
-                                  }}
-                                >
-                                  {columns.map((name) => (
-                                    <SRTableListColumnLabel
-                                      key={name}
-                                      name={name}
-                                      icon={
-                                        getIconForColumnType(
-                                          table.columns[name],
-                                        ).icon
-                                      }
-                                    />
-                                  ))}
-                                </Flex>
-                              </Flex>
-                            )}
-                          </GridItem>
-                        </Grid>
-                      </Flex>
-                    </AccordionButton>
-
-                    <AccordionPanel bgColor="white">
-                      {view === 'summary' ? (
-                        <Stack gap={6}>
-                          <SRTableListColumnList table={table} />
-                        </Stack>
-                      ) : (
-                        <SRTableListSchemaDetail table={table} />
-                      )}
-                    </AccordionPanel>
-                  </>
-                )}
-              </AccordionItem>
-            </Flex>
-          );
-        })}
-      </Accordion>
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTableOverview.tsx b/static_report/src/components/SingleReport/SRTableOverview.tsx
deleted file mode 100644
index cefeebb93..000000000
--- a/static_report/src/components/SingleReport/SRTableOverview.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Flex, Heading, Text, Icon } from '@chakra-ui/react';
-import { FiGrid } from 'react-icons/fi';
-
-import { TableSchema } from '../../sdlc/single-report-schema';
-import { zReport, ZTableSchema } from '../../types';
-
-type Props = { table: TableSchema };
-
-export function SRTableOverview({ table }: Props) {
-  zReport(ZTableSchema.safeParse(table));
-
-  return (
-    <Flex direction="column" gap={1} mb={8}>
-      <Text color="gray.500">Table</Text>
-      <Heading fontSize={24}>
-        <Flex alignItems="center">
-          <Icon as={FiGrid} mr={1} />
-          {table.name}
-        </Flex>
-      </Heading>
-      <Text fontSize="sm">{table.description}</Text>
-    </Flex>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTablesListPage.tsx b/static_report/src/components/SingleReport/SRTablesListPage.tsx
deleted file mode 100644
index 218f842c0..000000000
--- a/static_report/src/components/SingleReport/SRTablesListPage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useLocalStorage } from 'usehooks-ts';
-
-import { Main } from '../shared/Main';
-import { SRTableList } from './SRTableList';
-import {
-  TableActionBar,
-  type TableActionBarView,
-} from '../shared/TableActionBar';
-import { formatReportTime } from '../../utils/formatters';
-import { useDocumentTitle } from '../../hooks/useDocumentTitle';
-import { SR_LIST_VIEW } from '../../utils/localStorageKeys';
-import { type SingleReportSchema } from '../../sdlc/single-report-schema';
-
-type Props = { data: SingleReportSchema };
-
-export function SRTablesListPage({ data }: Props) {
-  const { created_at, datasource } = data;
-
-  const [view, setView] = useLocalStorage<TableActionBarView>(
-    SR_LIST_VIEW,
-    'summary',
-  );
-
-  useDocumentTitle('Report List');
-
-  return (
-    <Main isSingleReport time={formatReportTime(created_at)}>
-      <TableActionBar
-        sourceName={datasource.name}
-        sourceType={datasource.type}
-        currentView={view}
-        toggleView={(nextView) => {
-          setView(nextView);
-        }}
-      />
-
-      <SRTableList data={data} view={view} />
-    </Main>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SRTooltip.tsx b/static_report/src/components/SingleReport/SRTooltip.tsx
deleted file mode 100644
index 33cac657f..000000000
--- a/static_report/src/components/SingleReport/SRTooltip.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Text, Tooltip } from '@chakra-ui/react';
-import React from 'react';
-
-type Props = { label?: string; prefix: string } & {
-  children: React.ReactNode;
-  [k: string]: any;
-};
-export function SRTooltip({ label = '', prefix, children, ...props }: Props) {
-  const match = label.match(`${prefix}(?<src>\\w+)$`);
-  const richLabel = match?.groups?.src ? (
-    <Text>
-      {label.slice(0, match.index)}
-      <Text as="i" color="gray.400">
-        {`${prefix}${match.groups.src}`}
-      </Text>
-    </Text>
-  ) : (
-    label
-  );
-
-  return (
-    <Tooltip label={richLabel} {...props} closeOnEsc={true}>
-      {children}
-    </Tooltip>
-  );
-}
diff --git a/static_report/src/components/SingleReport/SingleReport.tsx b/static_report/src/components/SingleReport/SingleReport.tsx
deleted file mode 100644
index 35f2e4b63..000000000
--- a/static_report/src/components/SingleReport/SingleReport.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Flex,
-  Heading,
-} from '@chakra-ui/react';
-import { Link } from 'wouter';
-import { FiDatabase, FiGrid } from 'react-icons/fi';
-import { useState } from 'react';
-
-import { Main } from '../shared/Main';
-import { CollapseContent } from '../shared/CollapseContent';
-
-import { useDocumentTitle } from '../../hooks/useDocumentTitle';
-import { SingleReportSchema } from '../../sdlc/single-report-schema';
-import { SRProfilingDetails } from './SRProfilingDetails';
-import { SRAssertionDetails } from './SRAssertionDetails';
-import { SRTableOverview } from './SRTableOverview';
-import { dataSourceSchema } from '../../sdlc/single-report-schema.z';
-import { ZTableSchema, zReport } from '../../types';
-import { formatReportTime } from '../../utils/formatters';
-interface Props {
-  data: SingleReportSchema;
-  name: string;
-}
-
-export default function SingleReport({ data, name }: Props) {
-  const { datasource, tables } = data;
-  const table = tables[name];
-  const [assertionsVisible, setAssertionsVisible] = useState(false);
-  const [columnsVisible, setColumnsVisible] = useState(false);
-
-  const isAssertionsEmpty =
-    (table.piperider_assertion_result?.tests || []).length === 0 &&
-    Object.keys(table.piperider_assertion_result?.columns || {}).length === 0 &&
-    (table.dbt_assertion_result?.tests || []).length === 0 &&
-    Object.keys(table.dbt_assertion_result?.columns || {}).length === 0;
-
-  zReport(ZTableSchema.safeParse(table));
-  zReport(dataSourceSchema.safeParse(datasource));
-
-  useDocumentTitle(name);
-
-  if (!data) {
-    return (
-      <Main isSingleReport time="-">
-        <Flex justifyContent="center" alignItems="center" minHeight="100vh">
-          No profile data found.
-        </Flex>
-      </Main>
-    );
-  }
-
-  return (
-    <Main isSingleReport time={formatReportTime(data.created_at)}>
-      <Flex direction="column" width="100%">
-        <Flex mx="5%" mt={4}>
-          <Breadcrumb fontSize="lg">
-            <BreadcrumbItem>
-              <Link href="/">
-                <BreadcrumbLink href="/" data-cy="sr-report-breadcrumb-back">
-                  <Flex alignItems="center" gap={1}>
-                    <FiDatabase /> {datasource.name}
-                  </Flex>
-                </BreadcrumbLink>
-              </Link>
-            </BreadcrumbItem>
-
-            <BreadcrumbItem isCurrentPage>
-              <BreadcrumbLink href="#">
-                <Flex alignItems="center" gap={1}>
-                  <FiGrid /> {table.name}
-                </Flex>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </Breadcrumb>
-        </Flex>
-
-        <Flex
-          border="1px solid"
-          borderColor="gray.300"
-          bg="white"
-          borderRadius="md"
-          p={6}
-          mt={3}
-          mx="5%"
-          direction="column"
-          gap={4}
-        >
-          <SRTableOverview table={table} />
-
-          <Heading size="md">Assertions</Heading>
-          <CollapseContent
-            in={assertionsVisible}
-            startingHeight={isAssertionsEmpty ? 50 : 250}
-            collapseable={!isAssertionsEmpty}
-            onVisible={() => setAssertionsVisible((visible) => !visible)}
-          >
-            <SRAssertionDetails
-              assertions={{
-                piperider: table.piperider_assertion_result,
-                dbt: table?.dbt_assertion_result,
-              }}
-            />
-          </CollapseContent>
-
-          <Heading size="md" mt={4}>
-            Columns
-          </Heading>
-          <CollapseContent
-            in={columnsVisible}
-            startingHeight={Object.keys(table.columns).length === 0 ? 50 : 350}
-            collapseable={Object.keys(table.columns).length > 0}
-            onVisible={() => setColumnsVisible((visible) => !visible)}
-          >
-            <SRProfilingDetails data={table.columns} />
-          </CollapseContent>
-        </Flex>
-      </Flex>
-    </Main>
-  );
-}
diff --git a/static_report/src/components/shared/Assertions/AssertionLabel.tsx b/static_report/src/components/shared/Assertions/AssertionLabel.tsx
new file mode 100644
index 000000000..e8a8e6885
--- /dev/null
+++ b/static_report/src/components/shared/Assertions/AssertionLabel.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text, Icon } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { FiCheck, FiX } from 'react-icons/fi';
+
+import { formatColumnValueWith, formatNumber } from '../../../utils/formatters';
+import type { Comparable } from '../../../types';
+
+export interface AssertionLabelProps extends Comparable {
+  total: number;
+  failed: number;
+  icon?: ReactNode;
+  comparisonDelta?: ReactNode;
+  children?: ReactNode;
+}
+
+export function AssertionLabel({
+  total,
+  failed,
+  ...props
+}: AssertionLabelProps) {
+  const isPassed = failed === 0;
+
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <Flex gap={2}>
+        <Flex
+          alignItems="center"
+          borderRadius="md"
+          bgColor={isPassed ? '#DEFFEB' : '#FFE8F0'}
+          color={isPassed ? '#1F7600' : '#F60059'}
+          py={0.5}
+          px={1.5}
+        >
+          {!props?.singleOnly && props?.icon ? (
+            props.icon
+          ) : (
+            <Icon as={isPassed ? FiCheck : FiX} boxSize={4} />
+          )}
+          <Text as="span">{isPassed ? 'All' : failed}</Text>
+        </Flex>
+
+        <Text as="span" color="gray.500">
+          of
+        </Text>
+
+        {!props?.singleOnly && props?.comparisonDelta ? (
+          props.comparisonDelta
+        ) : (
+          <Text as="span">{formatColumnValueWith(total, formatNumber)}</Text>
+        )}
+      </Flex>
+
+      {props?.children}
+    </Flex>
+  );
+}
diff --git a/static_report/src/components/shared/Assertions/AssertionsLabelIcon.tsx b/static_report/src/components/shared/Assertions/AssertionsLabelIcon.tsx
new file mode 100644
index 000000000..cda14ce88
--- /dev/null
+++ b/static_report/src/components/shared/Assertions/AssertionsLabelIcon.tsx
@@ -0,0 +1,20 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+import { FiArrowUpCircle, FiArrowDownCircle } from 'react-icons/fi';
+
+export interface AssertionsLabelIconProps extends IconProps {
+  delta: number;
+}
+
+export function AssertionsLabelIcon({
+  delta,
+  ...props
+}: AssertionsLabelIconProps) {
+  return (
+    <Icon
+      as={delta > 0 ? FiArrowUpCircle : FiArrowDownCircle}
+      color="black"
+      boxSize={5}
+      {...props}
+    />
+  );
+}
diff --git a/static_report/src/components/shared/Assertions/index.ts b/static_report/src/components/shared/Assertions/index.ts
new file mode 100644
index 000000000..892071e3c
--- /dev/null
+++ b/static_report/src/components/shared/Assertions/index.ts
@@ -0,0 +1,2 @@
+export * from './AssertionLabel';
+export * from './AssertionsLabelIcon';
diff --git a/static_report/src/components/shared/BreadcrumbNav.tsx b/static_report/src/components/shared/BreadcrumbNav.tsx
new file mode 100644
index 000000000..739a86ae0
--- /dev/null
+++ b/static_report/src/components/shared/BreadcrumbNav.tsx
@@ -0,0 +1,83 @@
+import { ChevronRightIcon } from '@chakra-ui/icons';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  FlexProps,
+} from '@chakra-ui/react';
+import { Link, useLocation } from 'wouter';
+import { breadcrumbHeight } from '../../utils/layout';
+
+interface BreadcrumbMetaItem {
+  path: string;
+  label: string;
+}
+interface Props {
+  routePathToMatch: string;
+  height?: number;
+}
+/**
+ * A breadcrumb UI that will use browser location to render breadcrumbs based on the route-params manually provided.
+ * FULL_URL1: `/tables/ACTION`
+ * BREADCRUMB: `['/', '/tables/ACTION']
+ *
+ * FULL_URL2: `/tables/ACTION/columns/FOO`
+ * BREADCRUMB: `['/', '/tables/ACTION', '/tables/ACTION/columns/FOO']
+ *
+ * FUTURE?: or by config provision (custom route logic)?
+ */
+export function BreadcrumbNav({
+  routePathToMatch,
+  height = breadcrumbHeight,
+  ...props
+}: Props & FlexProps) {
+  const [location] = useLocation();
+
+  //check if matching params are in location parts,
+  const urlSegments = location.split('/');
+
+  const matcherSegments = routePathToMatch.split('/');
+
+  // routable paths by alternate ordering between path_name and path_param (posts/:id)
+
+  const breadcrumbList = urlSegments.reduce<BreadcrumbMetaItem[]>(
+    (prev, curr, index) => {
+      const matcherItem = matcherSegments[index] || '';
+      const isCurrentParam = matcherItem.includes(':');
+      if (isCurrentParam) {
+        // get breadcrumbUrl (from root to param)
+        const breadcrumbUrl = urlSegments.slice(0, index + 1).join('/');
+        return [...prev, { path: breadcrumbUrl, label: curr }];
+      }
+      return prev; // else keep going
+    },
+    [{ path: '/', label: 'Home' }],
+  );
+
+  return (
+    <Flex alignItems={'center'} h={`${height}px`} px={3} {...props}>
+      <Breadcrumb
+        fontSize="lg"
+        separator={<ChevronRightIcon color="gray.500" boxSize={6} />}
+      >
+        {breadcrumbList.map(({ label, path }, i) => {
+          return (
+            <BreadcrumbItem key={i} isCurrentPage={location === path}>
+              <BreadcrumbLink
+                data-cy="breadcrumb-link"
+                to={path}
+                as={Link}
+                cursor={'pointer'}
+                display={'flex'}
+                alignItems={'center'}
+              >
+                {decodeURIComponent(label)}
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          );
+        })}
+      </Breadcrumb>
+    </Flex>
+  );
+}
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnCardDataVisualContainer.tsx b/static_report/src/components/shared/Charts/ChartContainer.tsx
similarity index 97%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnCardDataVisualContainer.tsx
rename to static_report/src/components/shared/Charts/ChartContainer.tsx
index 78f1e016e..39cbdf4f3 100644
--- a/static_report/src/components/shared/Columns/ColumnCard/ColumnCardDataVisualContainer.tsx
+++ b/static_report/src/components/shared/Charts/ChartContainer.tsx
@@ -23,7 +23,7 @@ type Props = {
   allowModalPopup?: boolean;
   height?: number;
 };
-export function ColumnCardDataVisualContainer({
+export function ChartContainer({
   title,
   children,
   allowModalPopup,
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnCardBodyContainer.tsx b/static_report/src/components/shared/Columns/ColumnCard/ColumnCardBodyContainer.tsx
deleted file mode 100644
index 6c0416bba..000000000
--- a/static_report/src/components/shared/Columns/ColumnCard/ColumnCardBodyContainer.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-
-type Props = {
-  children: ReactNode;
-};
-export const ColumnCardBodyContainer: React.FC<Props> = ({ children }) => {
-  return (
-    <Flex
-      p={2}
-      bg={'white'}
-      height={'100%'}
-      direction="column"
-      borderBottomRadius={'inherit'}
-    >
-      {children}
-    </Flex>
-  );
-};
diff --git a/static_report/src/components/shared/Columns/ColumnCard/index.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnHighlightsCard.tsx
similarity index 70%
rename from static_report/src/components/shared/Columns/ColumnCard/index.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnHighlightsCard.tsx
index f216179e9..a2341f8d9 100644
--- a/static_report/src/components/shared/Columns/ColumnCard/index.tsx
+++ b/static_report/src/components/shared/Columns/ColumnCards/ColumnHighlightsCard.tsx
@@ -1,14 +1,12 @@
 import { Flex, Text } from '@chakra-ui/react';
-import { Link, useLocation } from 'wouter';
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema } from '../../../../types';
+import { Selectable, ZColSchema } from '../../../../types';
 import { getDataChart } from '../../../../utils/charts';
 import {
   checkColumnCategorical,
   getChartKindByColumnType,
 } from '../../../../utils/transformers';
-import { ColumnCardBodyContainer } from './ColumnCardBodyContainer';
-import { ColumnCardDataVisualContainer } from './ColumnCardDataVisualContainer';
+import { ChartContainer } from '../../Charts/ChartContainer';
 import { ColumnTypeHeader } from '../ColumnTypeHeader';
 import { ColumnTypeDetailBoolean } from './ColumnTypeDetail/ColumnTypeDetailBoolean';
 import { ColumnTypeDetailCategorical } from './ColumnTypeDetail/ColumnTypeDetailCategorical';
@@ -17,13 +15,16 @@ import { ColumnTypeDetailNumeric } from './ColumnTypeDetail/ColumnTypeDetailNume
 import { ColumnTypeDetailOther } from './ColumnTypeDetail/ColumnTypeDetailOther';
 import { ColumnTypeDetailText } from './ColumnTypeDetail/ColumnTypeDetailText';
 
-interface Props {
+interface Props extends Selectable {
   columnDatum: ColumnSchema;
 }
-export function ColumnCard({ columnDatum }: Props) {
+/**
+ * A Column Card that shows the main highlights of the column data
+ * Includes: Main Chart (single); Highlight Metrics; Detail link
+ */
+export function ColumnHighlightsCard({ columnDatum, onSelect }: Props) {
   ZColSchema.parse(columnDatum);
-  const { name: title } = columnDatum;
-  const [parentLocation] = useLocation();
+  const { name: columnName } = columnDatum;
 
   return (
     <Flex
@@ -40,28 +41,37 @@ export function ColumnCard({ columnDatum }: Props) {
         bg={'blue.800'}
         color={'white'}
       />
-      <ColumnCardDataVisualContainer
-        title={title}
+      <ChartContainer
+        title={columnName}
         allowModalPopup={Boolean(getChartKindByColumnType(columnDatum))}
       >
         {getDataChart(columnDatum)}
-      </ColumnCardDataVisualContainer>
-      <ColumnCardBodyContainer>
+      </ChartContainer>
+      <Flex
+        p={2}
+        bg={'white'}
+        height={'100%'}
+        direction="column"
+        borderBottomRadius={'inherit'}
+      >
         <>
           {_getColumnBodyContentUI(columnDatum)}
-          <Flex justifyContent={'center'} py={2} h={'100%'} alignItems={'end'}>
-            <Link href={`${parentLocation}/columns/${title}`}>
-              <Text
-                as={'a'}
-                color="blue.400"
-                data-cy="column-card-details-link"
-              >
-                Details
-              </Text>
-            </Link>
+          <Flex
+            justifyContent={'center'}
+            py={2}
+            h={'100%'}
+            alignItems={'end'}
+            _hover={{ bgColor: 'blackAlpha.50' }}
+            cursor={'pointer'}
+            onClick={() => onSelect({ columnName })}
+            data-cy="column-card-details-link"
+          >
+            <Text as={'a'} color="blue.400">
+              Details
+            </Text>
           </Flex>
         </>
-      </ColumnCardBodyContainer>
+      </Flex>
     </Flex>
   );
 }
diff --git a/static_report/src/components/shared/Columns/ColumnCards/ColumnStatsCard.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnStatsCard.tsx
new file mode 100644
index 000000000..f44917690
--- /dev/null
+++ b/static_report/src/components/shared/Columns/ColumnCards/ColumnStatsCard.tsx
@@ -0,0 +1,100 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { ColumnSchema } from '../../../../sdlc/single-report-schema';
+import { Comparable, Selectable, ZColSchema, zReport } from '../../../../types';
+import { checkColumnCategorical } from '../../../../utils/transformers';
+import { ColumnTypeHeader } from '../ColumnTypeHeader';
+import { NO_VALUE } from '../constants';
+import { MetricsInfo } from '../ColumnMetrics/MetricsInfo';
+import { GeneralStats } from '../ColumnMetrics/GeneralStats';
+import { SummaryStats } from '../ColumnMetrics/SummaryStats';
+
+interface Props extends Selectable, Comparable {
+  baseColumn?: ColumnSchema;
+  targetColumn?: ColumnSchema;
+}
+/**
+ * Column Card that displays pure metric stats
+ */
+export const ColumnStatsCard = ({
+  baseColumn,
+  targetColumn,
+  singleOnly,
+  onSelect,
+}: Props) => {
+  const fallback = baseColumn || targetColumn;
+  const isCategorical = checkColumnCategorical(baseColumn);
+
+  zReport(ZColSchema.safeParse(baseColumn));
+  zReport(ZColSchema.safeParse(targetColumn));
+
+  return (
+    <Flex
+      direction="column"
+      minH="250px"
+      border={'1px solid darkgray'}
+      rounded={'2xl'}
+    >
+      {fallback && (
+        <ColumnTypeHeader
+          columnDatum={fallback}
+          bg={'blue.800'}
+          color={'white'}
+        />
+      )}
+      <Box m={4}>
+        {!singleOnly && (
+          <MetricsInfo
+            name=""
+            firstSlot={'Base'}
+            secondSlot={'Target'}
+            width={'100%'}
+            fontWeight={'bold'}
+            mb={3}
+          />
+        )}
+
+        <Box mb={3}>
+          <GeneralStats
+            baseColumnDatum={baseColumn}
+            targetColumnDatum={targetColumn}
+            singleOnly={singleOnly}
+          />
+        </Box>
+
+        <Box mb={3}>
+          <SummaryStats
+            baseColumnDatum={baseColumn}
+            targetColumnDatum={targetColumn}
+            singleOnly={singleOnly}
+          />
+        </Box>
+
+        {isCategorical && (
+          <Box>
+            <MetricsInfo
+              name="Most Common"
+              metakey="topk"
+              width={'100%'}
+              firstSlot={baseColumn?.topk?.values[0] ?? NO_VALUE}
+              secondSlot={targetColumn?.topk?.values[0] ?? NO_VALUE}
+            />
+          </Box>
+        )}
+      </Box>
+      {fallback && (
+        <Flex
+          justifyContent={'center'}
+          p={3}
+          h={'100%'}
+          alignItems={'end'}
+          cursor={'pointer'}
+          onClick={() => onSelect({ columnName: fallback.name })}
+        >
+          <Text as={'a'} color="blue.400">
+            Details
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailBoolean.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailBoolean.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailBoolean.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailBoolean.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailCategorical.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailCategorical.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailCategorical.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailCategorical.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailDatetime.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailDatetime.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailDatetime.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailDatetime.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailNumeric.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailNumeric.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailNumeric.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailNumeric.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailOther.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailOther.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailOther.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailOther.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailText.tsx b/static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailText.tsx
similarity index 100%
rename from static_report/src/components/shared/Columns/ColumnCard/ColumnTypeDetail/ColumnTypeDetailText.tsx
rename to static_report/src/components/shared/Columns/ColumnCards/ColumnTypeDetail/ColumnTypeDetailText.tsx
diff --git a/static_report/src/components/shared/Columns/ColumnDetailMasterList/ColumnDetailListItem.tsx b/static_report/src/components/shared/Columns/ColumnDetailMasterList/ColumnDetailListItem.tsx
index 3e90ca99e..7856180c1 100644
--- a/static_report/src/components/shared/Columns/ColumnDetailMasterList/ColumnDetailListItem.tsx
+++ b/static_report/src/components/shared/Columns/ColumnDetailMasterList/ColumnDetailListItem.tsx
@@ -8,6 +8,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
+import { Comparable } from '../../../../types';
 import {
   formatColumnValueWith,
   formatIntervalMinMax,
@@ -18,19 +19,21 @@ import {
 } from '../../../../utils/transformers';
 import { NO_VALUE } from '../constants';
 
-interface Props {
+interface Props extends Comparable {
   baseColumnDatum?: ColumnSchema;
   targetColumnDatum?: ColumnSchema;
   onSelect: (arg: string) => void;
   isActive: boolean;
-  hasSplitView?: boolean;
 }
+/**
+ * A list item showing a base column detail's name, valid% progress bar(s) depending on split-view
+ */
 export function ColumnDetailListItem({
   baseColumnDatum,
   targetColumnDatum,
   onSelect,
   isActive,
-  hasSplitView,
+  singleOnly,
   ...props
 }: Props & FlexProps) {
   const { icon, backgroundColor } = getIconForColumnType(baseColumnDatum);
@@ -75,7 +78,7 @@ export function ColumnDetailListItem({
           </Text>
         </Flex>
         <Box width={'100%'}>
-          {hasSplitView && (
+          {!singleOnly && (
             <Text fontSize={'sm'} color={'gray.600'} fontWeight={'semibold'}>
               Base
             </Text>
@@ -91,7 +94,7 @@ export function ColumnDetailListItem({
               Valid
             </Text>
           </Flex>
-          {hasSplitView && (
+          {!singleOnly && (
             <Box mt={3}>
               <Text fontSize={'sm'} color={'gray.600'} fontWeight={'semibold'}>
                 Target
diff --git a/static_report/src/components/shared/Columns/ColumnDetailMasterList/index.tsx b/static_report/src/components/shared/Columns/ColumnDetailMasterList/index.tsx
index 1dd0c2312..51bea1554 100644
--- a/static_report/src/components/shared/Columns/ColumnDetailMasterList/index.tsx
+++ b/static_report/src/components/shared/Columns/ColumnDetailMasterList/index.tsx
@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, SearchIcon } from '@chakra-ui/icons';
+import { SearchIcon } from '@chakra-ui/icons';
 import {
   Flex,
   InputGroup,
@@ -10,22 +10,20 @@ import {
   Box,
 } from '@chakra-ui/react';
 import { useState } from 'react';
-import { Link, useLocation } from 'wouter';
 
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { SaferTableSchema, Selectable } from '../../../../types';
+import { Comparable, SaferTableSchema, Selectable } from '../../../../types';
 import { transformAsNestedBaseTargetRecord } from '../../../../utils/transformers';
 import { ColumnDetailListItem } from './ColumnDetailListItem';
 
 type ProfilerGenericTypes = ColumnSchema['type'];
-interface Props extends Selectable {
+interface Props extends Selectable, Comparable {
   baseDataColumns?: SaferTableSchema['columns'];
   targetDataColumns?: SaferTableSchema['columns'];
   currentReport: string;
   currentColumn: string;
-  hasSplitView?: boolean;
 }
-// FUTURE FIXME: show Table list as well ?? (Accordion)
+// FUTURE TODO: show Table list as well ?? (Accordion)
 /**
  * A master list UI for showing a top-level, navigable, filterable, list of columns. Belongs in the profiling column details page to view in-depth metrics and visualizations
  */
@@ -34,11 +32,10 @@ export function ColumnDetailsMasterList({
   targetDataColumns,
   currentReport,
   currentColumn,
-  hasSplitView,
+  singleOnly,
   onSelect,
 }: Props) {
   const [filterString, setFilterString] = useState<string>('');
-  const [location] = useLocation();
   const [filterState, setFilterState] = useState<
     Map<ProfilerGenericTypes | undefined, boolean>
   >(
@@ -59,8 +56,6 @@ export function ColumnDetailsMasterList({
   const combinedColumnEntries = Object.entries(combinedColumnRecord);
 
   const quickFilters = Array.from(filterState.keys());
-  //FIXME: Temporary implementation!
-  const parentRoute = location.slice(0, location.indexOf('/columns'));
 
   return (
     <Flex direction={'column'} position={'relative'}>
@@ -75,14 +70,6 @@ export function ColumnDetailsMasterList({
         borderBottom={'1px solid lightgray'}
       >
         <Flex justify={'space-between'} alignItems={'center'} mb={3}>
-          <Box cursor={'pointer'}>
-            <Link href={parentRoute}>
-              <Flex alignItems={'center'}>
-                <ChevronLeftIcon boxSize={6} mr={1} />
-                <Text>Return to Table Overview</Text>
-              </Flex>
-            </Link>
-          </Box>
           <Text as={'h3'} fontWeight={'bold'} textAlign={'right'}>
             Columns ({combinedColumnEntries.length})
           </Text>
@@ -152,10 +139,10 @@ export function ColumnDetailsMasterList({
               isActive={base?.name === currentColumn}
               baseColumnDatum={base}
               targetColumnDatum={target}
-              onSelect={(name) => {
-                onSelect({ tableName: currentReport, columnName: name });
+              onSelect={(columnName) => {
+                onSelect({ tableName: currentReport, columnName });
               }}
-              hasSplitView={hasSplitView}
+              singleOnly={singleOnly}
               p={3}
             />
           ))}
diff --git a/static_report/src/components/shared/Columns/ColumnMetrics/CRGeneralStats.tsx b/static_report/src/components/shared/Columns/ColumnMetrics/GeneralStats.tsx
similarity index 59%
rename from static_report/src/components/shared/Columns/ColumnMetrics/CRGeneralStats.tsx
rename to static_report/src/components/shared/Columns/ColumnMetrics/GeneralStats.tsx
index c6c1c59f9..d689224f6 100644
--- a/static_report/src/components/shared/Columns/ColumnMetrics/CRGeneralStats.tsx
+++ b/static_report/src/components/shared/Columns/ColumnMetrics/GeneralStats.tsx
@@ -1,42 +1,58 @@
 import { FlexProps } from '@chakra-ui/react';
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../../../types';
+import { Comparable, ZColSchema, zReport } from '../../../../types';
 import {
   MetricNameMetakeyList,
   transformCRMetricsInfoList,
+  transformSRMetricsInfoList,
 } from '../../../../utils/transformers';
 import { MetricsInfo } from './MetricsInfo';
 
-type Props = {
+interface Props extends Comparable {
   baseColumnDatum?: ColumnSchema;
   targetColumnDatum?: ColumnSchema;
-};
-export function CRGeneralStats({
+}
+/**
+ * Shows metric stats for Totals, Valids, Invalids, Missing(nulls)
+ */
+export function GeneralStats({
   baseColumnDatum,
   targetColumnDatum,
+  singleOnly,
   ...props
 }: Props & FlexProps) {
   zReport(ZColSchema.safeParse(baseColumnDatum));
   zReport(ZColSchema.safeParse(targetColumnDatum));
+
   const metakeyEntries: MetricNameMetakeyList = [
     ['valids', 'Valid'],
     ['invalids', 'Invalid'],
     ['nulls', 'Missing'],
   ];
-  const totalMetricsList = transformCRMetricsInfoList(
-    [['total', 'Total']],
-    baseColumnDatum,
-    targetColumnDatum,
-    'count',
-  );
-  const metricsList = transformCRMetricsInfoList(
-    metakeyEntries,
-    baseColumnDatum,
-    targetColumnDatum,
-  );
+  // metric info list defaults to display as percentage
+  const metricsList = singleOnly
+    ? transformSRMetricsInfoList(metakeyEntries, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        metakeyEntries,
+        baseColumnDatum,
+        targetColumnDatum,
+      );
+
+  // Total displays differently if has base/target
+  const totalMetaKeyEntry: MetricNameMetakeyList = [['total', 'Total']];
+
+  const totalMetricsList = singleOnly
+    ? transformSRMetricsInfoList(totalMetaKeyEntry, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        totalMetaKeyEntry,
+        baseColumnDatum,
+        targetColumnDatum,
+        'count',
+      );
 
   return (
     <>
+      {/* Total - (1): % + n (2): n + n */}
       {totalMetricsList.map(
         ({ firstSlot, secondSlot, metakey, name, tooltipValues }, index) => (
           <MetricsInfo
@@ -51,6 +67,7 @@ export function CRGeneralStats({
           />
         ),
       )}
+      {/* Others - (1): % + n (2): % + % */}
       {metricsList.map(
         ({ firstSlot, secondSlot, metakey, name, tooltipValues }, index) => (
           <MetricsInfo
diff --git a/static_report/src/components/shared/Columns/ColumnMetrics/SRGeneralStats.tsx b/static_report/src/components/shared/Columns/ColumnMetrics/SRGeneralStats.tsx
deleted file mode 100644
index 8e88cb8e3..000000000
--- a/static_report/src/components/shared/Columns/ColumnMetrics/SRGeneralStats.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { FlexProps } from '@chakra-ui/react';
-import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../../../types';
-import { transformSRMetricsInfoList } from '../../../../utils/transformers';
-import { MetricMetaKeys, MetricsInfo } from './MetricsInfo';
-
-type Props = {
-  columnDatum?: ColumnSchema;
-};
-export function SRGeneralStats({ columnDatum, ...props }: Props & FlexProps) {
-  zReport(ZColSchema.safeParse(columnDatum));
-  const metakeyEntries: [MetricMetaKeys, string][] = [
-    ['total', 'Total'],
-    ['valids', 'Valid'],
-    ['invalids', 'Invalid'],
-    ['nulls', 'Missing'],
-  ];
-  const metricsList = transformSRMetricsInfoList(metakeyEntries, columnDatum);
-  return (
-    <>
-      {metricsList.map(
-        ({ firstSlot, secondSlot, metakey, name, tooltipValues }, index) => (
-          <MetricsInfo
-            key={index}
-            name={name}
-            metakey={metakey}
-            firstSlot={firstSlot}
-            secondSlot={secondSlot}
-            tooltipValues={tooltipValues}
-            {...props}
-          />
-        ),
-      )}
-    </>
-  );
-}
diff --git a/static_report/src/components/shared/Columns/ColumnMetrics/SRSummaryStats.tsx b/static_report/src/components/shared/Columns/ColumnMetrics/SRSummaryStats.tsx
deleted file mode 100644
index 8633dabc4..000000000
--- a/static_report/src/components/shared/Columns/ColumnMetrics/SRSummaryStats.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { FlexProps, Flex } from '@chakra-ui/react';
-import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../../../types';
-import {
-  containsAvgSDSummary,
-  containsDistinctDuplicateSummary,
-  containsMinMaxSummary,
-  transformSRMetricsInfoList,
-} from '../../../../utils/transformers';
-import { NO_VALUE, TEXTLENGTH } from '../constants';
-import { MetricMetaKeys, MetricsInfo } from './MetricsInfo';
-
-type Props = {
-  columnDatum?: ColumnSchema;
-};
-
-export function SRSummaryStats({ columnDatum, ...props }: Props & FlexProps) {
-  zReport(ZColSchema.safeParse(columnDatum));
-  const subtitle = columnDatum?.type === 'string' ? ` (${TEXTLENGTH})` : '';
-
-  const avgSDMetakeyList: [MetricMetaKeys, string][] = [
-    ['avg', `Average`],
-    ['stddev', `SD`],
-  ];
-  const avgSDMetricsList = transformSRMetricsInfoList(
-    avgSDMetakeyList,
-    columnDatum,
-  );
-  const minMaxMetakeyList: [MetricMetaKeys, string][] = [
-    ['min', `Min`],
-    ['max', `Max`],
-  ];
-  const minMaxMetricsList = transformSRMetricsInfoList(
-    minMaxMetakeyList,
-    columnDatum,
-  );
-  const distinctDuplicateMetakeyList: [MetricMetaKeys, string][] = [
-    ['distinct', `Distincts`],
-    ['duplicates', `Duplicates`],
-  ];
-  const distinctDuplicateMetricsList = transformSRMetricsInfoList(
-    distinctDuplicateMetakeyList,
-    columnDatum,
-  );
-  const { type } = columnDatum || {};
-  return (
-    <>
-      {containsAvgSDSummary(type) && (
-        <Flex direction="column">
-          {avgSDMetricsList &&
-            avgSDMetricsList.map(
-              ({ name, metakey, secondSlot, tooltipValues }, index) => (
-                <MetricsInfo
-                  key={index}
-                  name={name}
-                  subtitle={subtitle}
-                  metakey={metakey}
-                  firstSlot={NO_VALUE}
-                  secondSlot={secondSlot}
-                  tooltipValues={tooltipValues}
-                  {...props}
-                />
-              ),
-            )}
-        </Flex>
-      )}
-      {containsMinMaxSummary(type) && (
-        <Flex direction="column">
-          {minMaxMetricsList &&
-            minMaxMetricsList.map(
-              ({ name, metakey, secondSlot, tooltipValues }, index) => (
-                <MetricsInfo
-                  key={index}
-                  name={name}
-                  subtitle={subtitle}
-                  metakey={metakey}
-                  firstSlot={NO_VALUE}
-                  secondSlot={secondSlot}
-                  tooltipValues={tooltipValues}
-                  {...props}
-                />
-              ),
-            )}
-        </Flex>
-      )}
-      {containsDistinctDuplicateSummary(type) && (
-        <Flex direction="column">
-          {distinctDuplicateMetricsList &&
-            distinctDuplicateMetricsList.map(
-              (
-                { name, metakey, firstSlot, secondSlot, tooltipValues },
-                index,
-              ) => (
-                <MetricsInfo
-                  key={index}
-                  name={name}
-                  metakey={metakey}
-                  firstSlot={firstSlot}
-                  secondSlot={secondSlot}
-                  tooltipValues={tooltipValues}
-                  {...props}
-                />
-              ),
-            )}
-        </Flex>
-      )}
-    </>
-  );
-}
diff --git a/static_report/src/components/shared/Columns/ColumnMetrics/CRSummaryStats.tsx b/static_report/src/components/shared/Columns/ColumnMetrics/SummaryStats.tsx
similarity index 72%
rename from static_report/src/components/shared/Columns/ColumnMetrics/CRSummaryStats.tsx
rename to static_report/src/components/shared/Columns/ColumnMetrics/SummaryStats.tsx
index 5eedf3f4b..9ab524a52 100644
--- a/static_report/src/components/shared/Columns/ColumnMetrics/CRSummaryStats.tsx
+++ b/static_report/src/components/shared/Columns/ColumnMetrics/SummaryStats.tsx
@@ -1,58 +1,71 @@
 import { FlexProps, Flex } from '@chakra-ui/react';
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../../../types';
+import { Comparable, ZColSchema, zReport } from '../../../../types';
 import {
   containsAvgSDSummary,
   containsDistinctDuplicateSummary,
   containsMinMaxSummary,
   MetricNameMetakeyList,
   transformCRMetricsInfoList,
+  transformSRMetricsInfoList,
 } from '../../../../utils/transformers';
-import { TEXTLENGTH } from '../constants';
+import { NO_VALUE, TEXTLENGTH } from '../constants';
 import { MetricsInfo } from './MetricsInfo';
 
-type Props = {
+interface Props extends Comparable {
   baseColumnDatum?: ColumnSchema;
   targetColumnDatum?: ColumnSchema;
-};
-
-export function CRSummaryStats({
+}
+/**
+ * Shows metric stats for Avg, Stddev, Min/Max, Distinct, Duplicates
+ */
+export function SummaryStats({
   baseColumnDatum,
   targetColumnDatum,
+  singleOnly,
   ...props
 }: Props & FlexProps) {
   zReport(ZColSchema.safeParse(baseColumnDatum));
   const subtitle = baseColumnDatum?.type === 'string' ? ` (${TEXTLENGTH})` : '';
 
+  // Each list below are separated to render differently
   const avgSDMetakeyList: MetricNameMetakeyList = [
     ['avg', `Average`],
     ['stddev', `SD`],
   ];
-  const avgSDMetricsList = transformCRMetricsInfoList(
-    avgSDMetakeyList,
-    baseColumnDatum,
-    targetColumnDatum,
-    'count',
-  );
+  const avgSDMetricsList = singleOnly
+    ? transformSRMetricsInfoList(avgSDMetakeyList, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        avgSDMetakeyList,
+        baseColumnDatum,
+        targetColumnDatum,
+        'count',
+      );
+
   const minMaxMetakeyList: MetricNameMetakeyList = [
     ['min', `Min`],
     ['max', `Max`],
   ];
-  const minMaxMetricsList = transformCRMetricsInfoList(
-    minMaxMetakeyList,
-    baseColumnDatum,
-    targetColumnDatum,
-    'count',
-  );
+  const minMaxMetricsList = singleOnly
+    ? transformSRMetricsInfoList(minMaxMetakeyList, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        minMaxMetakeyList,
+        baseColumnDatum,
+        targetColumnDatum,
+        'count',
+      );
+
   const distinctDuplicateMetakeyList: MetricNameMetakeyList = [
     ['distinct', `Distincts`],
     ['duplicates', `Duplicates`],
   ];
-  const distinctDuplicateMetricsList = transformCRMetricsInfoList(
-    distinctDuplicateMetakeyList,
-    baseColumnDatum,
-    targetColumnDatum,
-  );
+  const distinctDuplicateMetricsList = singleOnly
+    ? transformSRMetricsInfoList(distinctDuplicateMetakeyList, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        distinctDuplicateMetakeyList,
+        baseColumnDatum,
+        targetColumnDatum,
+      );
 
   return (
     <>
@@ -70,7 +83,7 @@ export function CRSummaryStats({
                   name={name}
                   subtitle={subtitle}
                   metakey={metakey}
-                  firstSlot={firstSlot}
+                  firstSlot={singleOnly ? NO_VALUE : firstSlot}
                   secondSlot={secondSlot}
                   tooltipValues={tooltipValues}
                   width={'100%'}
@@ -94,7 +107,7 @@ export function CRSummaryStats({
                   name={name}
                   subtitle={subtitle}
                   metakey={metakey}
-                  firstSlot={firstSlot}
+                  firstSlot={singleOnly ? NO_VALUE : firstSlot}
                   secondSlot={secondSlot}
                   tooltipValues={tooltipValues}
                   width={'100%'}
diff --git a/static_report/src/components/shared/Columns/ColumnMetrics/SRTextNumberStats.tsx b/static_report/src/components/shared/Columns/ColumnMetrics/TypedStats.tsx
similarity index 56%
rename from static_report/src/components/shared/Columns/ColumnMetrics/SRTextNumberStats.tsx
rename to static_report/src/components/shared/Columns/ColumnMetrics/TypedStats.tsx
index a004d5769..65a6c7e57 100644
--- a/static_report/src/components/shared/Columns/ColumnMetrics/SRTextNumberStats.tsx
+++ b/static_report/src/components/shared/Columns/ColumnMetrics/TypedStats.tsx
@@ -1,40 +1,57 @@
 import { FlexProps } from '@chakra-ui/react';
 import { ColumnSchema } from '../../../../sdlc/single-report-schema';
-import { ZColSchema, zReport } from '../../../../types';
+import { Comparable, ZColSchema, zReport } from '../../../../types';
 import {
   containsColumnQuantile,
+  MetricNameMetakeyList,
+  transformCRMetricsInfoList,
   transformSRMetricsInfoList,
 } from '../../../../utils/transformers';
-import { MetricMetaKeys, MetricsInfo } from './MetricsInfo';
+import { MetricsInfo } from './MetricsInfo';
 
-type Props = { columnDatum?: ColumnSchema };
-export function SRTextNumberStats({
-  columnDatum,
+interface Props extends Comparable {
+  baseColumnDatum?: ColumnSchema;
+  targetColumnDatum?: ColumnSchema;
+}
+/**
+ * Shows metric stats for column.type: positives/zero/negatives, (non)zero-lengths
+ */
+export function TypedStats({
+  baseColumnDatum,
+  targetColumnDatum,
+  singleOnly,
   ...props
 }: Props & FlexProps) {
-  zReport(ZColSchema.safeParse(columnDatum));
+  zReport(ZColSchema.safeParse(baseColumnDatum));
+  zReport(ZColSchema.safeParse(targetColumnDatum));
 
-  const numeralMetakeyList: [MetricMetaKeys, string][] = [
+  const numeralMetakeyList: MetricNameMetakeyList = [
     ['positives', 'Positives'],
     ['zeros', 'Zeros'],
     ['negatives', 'Negatives'],
   ];
-  const numeralMetricsList = transformSRMetricsInfoList(
-    numeralMetakeyList,
-    columnDatum,
-  );
-  const textMetakeyList: [MetricMetaKeys, string][] = [
+  const numeralMetricsList = singleOnly
+    ? transformSRMetricsInfoList(numeralMetakeyList, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        numeralMetakeyList,
+        baseColumnDatum,
+        targetColumnDatum,
+      );
+  const textMetakeyList: MetricNameMetakeyList = [
     ['non_zero_length', 'Non-zero Length'],
     ['zero_length', 'Zero Length'],
   ];
-  const textMetricsList = transformSRMetricsInfoList(
-    textMetakeyList,
-    columnDatum,
-  );
+  const textMetricsList = singleOnly
+    ? transformSRMetricsInfoList(textMetakeyList, baseColumnDatum)
+    : transformCRMetricsInfoList(
+        textMetakeyList,
+        baseColumnDatum,
+        targetColumnDatum,
+      );
 
   return (
     <>
-      {containsColumnQuantile(columnDatum?.type) && (
+      {containsColumnQuantile(baseColumnDatum?.type) && (
         <>
           {numeralMetricsList &&
             numeralMetricsList.map(
@@ -55,7 +72,7 @@ export function SRTextNumberStats({
             )}
         </>
       )}
-      {columnDatum?.type === 'string' && (
+      {baseColumnDatum?.type === 'string' && (
         <>
           {textMetricsList &&
             textMetricsList.map(
diff --git a/static_report/src/components/shared/Columns/ColumnTypeHeader.tsx b/static_report/src/components/shared/Columns/ColumnTypeHeader.tsx
index 558d2619d..4742c570d 100644
--- a/static_report/src/components/shared/Columns/ColumnTypeHeader.tsx
+++ b/static_report/src/components/shared/Columns/ColumnTypeHeader.tsx
@@ -1,13 +1,17 @@
 import { InfoIcon } from '@chakra-ui/icons';
+
 import { Flex, FlexProps, Icon, Text, Tooltip } from '@chakra-ui/react';
-import { ColumnSchema } from '../../../sdlc/single-report-schema';
 import { getIconForColumnType } from '../../../utils/transformers';
-import { SRTooltip } from '../../SingleReport/SRTooltip';
+import type { ColumnSchema } from '../../../sdlc/single-report-schema';
+
+interface Props extends FlexProps {
+  columnDatum?: ColumnSchema;
+}
 
-type Props = { columnDatum?: ColumnSchema };
-export function ColumnTypeHeader({ columnDatum, ...props }: Props & FlexProps) {
+export function ColumnTypeHeader({ columnDatum, ...props }: Props) {
   const { description, name, schema_type } = columnDatum || {};
   const { backgroundColor, icon } = getIconForColumnType(columnDatum);
+
   return (
     <Flex
       py={2}
@@ -43,9 +47,37 @@ export function ColumnTypeHeader({ columnDatum, ...props }: Props & FlexProps) {
           {name}
         </Text>
       </Flex>
-      <SRTooltip label={description} prefix={' - via '}>
+      <SourceTooltip label={description} prefix={' - via '}>
         <InfoIcon color="gray.400" boxSize={'20px'} mr={3} />
-      </SRTooltip>
+      </SourceTooltip>
     </Flex>
   );
 }
+
+function SourceTooltip({
+  label = '',
+  prefix,
+  children,
+  ...props
+}: { label?: string; prefix: string } & {
+  children: React.ReactNode;
+  [k: string]: any;
+}) {
+  const match = label.match(`${prefix}(?<src>\\w+)$`);
+  const richLabel = match?.groups?.src ? (
+    <Text>
+      {label.slice(0, match.index)}
+      <Text as="i" color="gray.400">
+        {`${prefix}${match.groups.src}`}
+      </Text>
+    </Text>
+  ) : (
+    label
+  );
+
+  return (
+    <Tooltip label={richLabel} {...props} closeOnEsc={true}>
+      {children}
+    </Tooltip>
+  );
+}
diff --git a/static_report/src/components/ComparisonReport/CRModal/CRModal.tsx b/static_report/src/components/shared/Modals/CRModal/CRModal.tsx
similarity index 91%
rename from static_report/src/components/ComparisonReport/CRModal/CRModal.tsx
rename to static_report/src/components/shared/Modals/CRModal/CRModal.tsx
index 1560a3995..615983f35 100644
--- a/static_report/src/components/ComparisonReport/CRModal/CRModal.tsx
+++ b/static_report/src/components/shared/Modals/CRModal/CRModal.tsx
@@ -10,9 +10,9 @@ import {
   ModalFooter,
   type UseDisclosureReturn,
 } from '@chakra-ui/react';
-import { AssertionTest } from '../../../sdlc/single-report-schema';
+import { AssertionTest } from '../../../../sdlc/single-report-schema';
 
-import { CRTargetData } from '../../../types';
+import { CRTargetData } from '../../../../types';
 import { DbtTable } from './CRModalDbtTable';
 import { PipeRiderTable } from './CRModalPiperiderTable';
 
diff --git a/static_report/src/components/ComparisonReport/CRModal/CRModalDbtTable.tsx b/static_report/src/components/shared/Modals/CRModal/CRModalDbtTable.tsx
similarity index 88%
rename from static_report/src/components/ComparisonReport/CRModal/CRModalDbtTable.tsx
rename to static_report/src/components/shared/Modals/CRModal/CRModalDbtTable.tsx
index 38ac038ca..e38f436f3 100644
--- a/static_report/src/components/ComparisonReport/CRModal/CRModalDbtTable.tsx
+++ b/static_report/src/components/shared/Modals/CRModal/CRModalDbtTable.tsx
@@ -7,8 +7,8 @@ import {
   Tbody,
   Td,
 } from '@chakra-ui/react';
-import { NO_VALUE } from '../../shared/Columns/constants';
-import { AssertionStatus } from '../../shared/AssertionStatus';
+import { NO_VALUE } from '../../Columns/constants';
+import { AssertionStatus } from '../../AssertionStatus';
 import { CRModalData } from './CRModal';
 
 type Props = { data?: CRModalData };
diff --git a/static_report/src/components/ComparisonReport/CRModal/CRModalPiperiderTable.tsx b/static_report/src/components/shared/Modals/CRModal/CRModalPiperiderTable.tsx
similarity index 89%
rename from static_report/src/components/ComparisonReport/CRModal/CRModalPiperiderTable.tsx
rename to static_report/src/components/shared/Modals/CRModal/CRModalPiperiderTable.tsx
index 3236035ae..135937599 100644
--- a/static_report/src/components/ComparisonReport/CRModal/CRModalPiperiderTable.tsx
+++ b/static_report/src/components/shared/Modals/CRModal/CRModalPiperiderTable.tsx
@@ -7,8 +7,8 @@ import {
   Tbody,
   Td,
 } from '@chakra-ui/react';
-import { formatTestExpectedOrActual } from '../../../utils/formatters';
-import { AssertionStatus } from '../../shared/AssertionStatus';
+import { formatTestExpectedOrActual } from '../../../../utils/formatters';
+import { AssertionStatus } from '../../AssertionStatus';
 import { CRModalData } from './CRModal';
 
 type Props = { data?: CRModalData };
diff --git a/static_report/src/components/shared/Navbar.tsx b/static_report/src/components/shared/Navbar.tsx
index ec69c745c..1db2d0a93 100644
--- a/static_report/src/components/shared/Navbar.tsx
+++ b/static_report/src/components/shared/Navbar.tsx
@@ -1,5 +1,6 @@
-import { Flex, Icon, Image, Text, Link } from '@chakra-ui/react';
+import { Flex, Icon, Image, Text, Link as CharakaLink } from '@chakra-ui/react';
 import { FiSquare, FiColumns } from 'react-icons/fi';
+import { Link } from 'wouter';
 
 type Props = {
   time: string;
@@ -9,9 +10,11 @@ type Props = {
 export function Navbar({ time, isSingleReport }: Props) {
   return (
     <Flex alignItems="center" px={6} bg="white" boxShadow="md">
-      <Link href="/">
-        <Image src="logo/logo.svg" height="64px" alt="PipeRider" />
-      </Link>
+      <CharakaLink as={Link} to="/">
+        <a href="/">
+          <Image src="logo/logo.svg" height="64px" alt="PipeRider" />
+        </a>
+      </CharakaLink>
 
       <Flex
         justifyContent="center"
diff --git a/static_report/src/components/shared/NoData.tsx b/static_report/src/components/shared/NoData.tsx
new file mode 100644
index 000000000..a50c80ee8
--- /dev/null
+++ b/static_report/src/components/shared/NoData.tsx
@@ -0,0 +1,15 @@
+import { Text, TextProps } from '@chakra-ui/react';
+
+interface Props extends TextProps {
+  text?: string;
+}
+
+const DEFAULT_TEXT = 'No data available';
+
+export function NoData({ text = DEFAULT_TEXT, ...props }: Props) {
+  return (
+    <Text mt={7} color="gray.500" {...props}>
+      {text}
+    </Text>
+  );
+}
diff --git a/static_report/src/components/shared/TableActionBar.tsx b/static_report/src/components/shared/Tables/TableActionBar.tsx
similarity index 95%
rename from static_report/src/components/shared/TableActionBar.tsx
rename to static_report/src/components/shared/Tables/TableActionBar.tsx
index ca133a0a0..187d40664 100644
--- a/static_report/src/components/shared/TableActionBar.tsx
+++ b/static_report/src/components/shared/Tables/TableActionBar.tsx
@@ -6,6 +6,7 @@ import {
   ButtonGroup,
   Tooltip,
 } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 import {
   FiDatabase,
   FiCreditCard,
@@ -20,6 +21,7 @@ type Props = {
   toggleView: (view: TableActionBarView) => void;
   sourceName: string;
   sourceType: string;
+  children?: ReactNode;
 };
 
 export function TableActionBar({
@@ -27,6 +29,7 @@ export function TableActionBar({
   toggleView,
   sourceName,
   sourceType,
+  children,
 }: Props) {
   return (
     <Flex
@@ -48,6 +51,7 @@ export function TableActionBar({
         >
           <Icon as={FiAlertCircle} />
         </Tooltip>
+        {children}
       </Flex>
 
       <ButtonGroup
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableListAssertions.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListAssertions.tsx
similarity index 57%
rename from static_report/src/components/ComparisonReport/CRTableList/CRTableListAssertions.tsx
rename to static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListAssertions.tsx
index 839f383a3..3950a78d2 100644
--- a/static_report/src/components/ComparisonReport/CRTableList/CRTableListAssertions.tsx
+++ b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListAssertions.tsx
@@ -9,9 +9,13 @@ import {
 import isString from 'lodash/isString';
 import partial from 'lodash/partial';
 
-import { getComparisonAssertions } from '../../../utils/assertion';
-import { formatColumnValueWith, formatNumber } from '../../../utils/formatters';
-import type { ComparisonReportSchema } from '../../../types';
+import { AssertionLabel, AssertionsLabelIcon } from '../../../Assertions';
+import { getComparisonAssertions } from '../../../../../utils/assertion';
+import type { ComparisonReportSchema } from '../../../../../types';
+import {
+  formatColumnValueWith,
+  formatNumber,
+} from '../../../../../utils/formatters';
 
 const getAssertionValue = partial((value: string | number) =>
   isString(value) ? 0 : value,
@@ -19,19 +23,19 @@ const getAssertionValue = partial((value: string | number) =>
 
 export function CRTableListAssertions({
   data,
-  reportName,
+  tableName,
 }: {
   data: ComparisonReportSchema;
-  reportName: string;
+  tableName: string;
 }) {
   const [baseOverview, targetOverview] = getComparisonAssertions({
     data,
-    reportName,
+    tableName,
     type: 'piperider',
   });
   const [dbtBaseOverview, dbtTargetOverview] = getComparisonAssertions({
     data,
-    reportName,
+    tableName,
     type: 'dbt',
   });
 
@@ -68,10 +72,10 @@ export function CRTableListAssertions({
         <CRTargetTableAssertion
           total={targetOverviewAssertions}
           failed={targetFailed}
-          failedDifference={targetFailed - baseFailed}
+          failedDelta={targetFailed - baseFailed}
         />
         <Text as="span">/</Text>
-        <CRTargetTableAssertionsDifference
+        <CRTargetTableAssertionsDelta
           baseAssertions={baseOverviewAssertions}
           targetAssertions={targetOverviewAssertions}
         />
@@ -113,11 +117,11 @@ export function CRBaseTableAssertion({
 export function CRTargetTableAssertion({
   total,
   failed,
-  failedDifference,
+  failedDelta,
 }: {
   total: number;
   failed: number;
-  failedDifference: number;
+  failedDelta: number;
 }) {
   if (total === 0) {
     return (
@@ -127,27 +131,18 @@ export function CRTargetTableAssertion({
     );
   }
 
-  if (failedDifference < 0) {
+  if (failedDelta !== 0) {
     return (
       <Center gap={1} color="#F60059">
-        <Icon as={FiArrowDownCircle} boxSize={4} />
+        <AssertionsLabelIcon delta={failedDelta} />
         <Text as="span">
-          {formatColumnValueWith(Math.abs(failedDifference), formatNumber)}
-        </Text>
-      </Center>
-    );
-  } else if (failedDifference > 0) {
-    return (
-      <Center gap={1} color="#F60059">
-        <Icon as={FiArrowUpCircle} boxSize={4} />
-        <Text as="span">
-          {formatColumnValueWith(failedDifference, formatNumber)}
+          {formatColumnValueWith(Math.abs(failedDelta), formatNumber)}
         </Text>
       </Center>
     );
   }
 
-  // When `failedDifference = 0`, check `failed` number if is `0` then rendering `total`
+  // When `failedDelta = 0`, check `failed` number if is `0` then rendering `total`
   return (
     <Text as="span">
       {failed === 0
@@ -157,15 +152,15 @@ export function CRTargetTableAssertion({
   );
 }
 
-export function CRTargetTableAssertionsDifference({
+export function CRTargetTableAssertionsDelta({
   baseAssertions,
   targetAssertions,
 }: {
   baseAssertions: number;
   targetAssertions: number;
 }) {
-  const difference = targetAssertions - baseAssertions;
-  const isGreaterThanZero = difference > 0;
+  const delta = targetAssertions - baseAssertions;
+  const isGreaterThanZero = delta > 0;
 
   if (targetAssertions === 0) {
     return <Text as="span">none</Text>;
@@ -173,13 +168,7 @@ export function CRTargetTableAssertionsDifference({
 
   return (
     <Center gap={1}>
-      {difference !== 0 ? (
-        <Icon
-          as={isGreaterThanZero ? FiArrowUpCircle : FiArrowDownCircle}
-          color="black"
-          boxSize={4}
-        />
-      ) : null}
+      {delta !== 0 ? <AssertionsLabelIcon delta={delta} /> : null}
       <Text as="span" color={isGreaterThanZero ? 'black' : 'inherit'}>
         {formatColumnValueWith(targetAssertions, formatNumber)}
       </Text>
@@ -194,39 +183,19 @@ export function CRBaseTableAssertionsSummary({
   total: number;
   failed: number;
 }) {
-  const isPassed = failed === 0;
-
-  return (
-    <Flex gap={1} alignItems="center">
-      <Flex
-        alignItems="center"
-        borderRadius="md"
-        bgColor={isPassed ? '#DEFFEB' : '#FFE8F0'}
-        color={isPassed ? '#1F7600' : '#F60059'}
-        py={0.5}
-        px={1.5}
-      >
-        <Icon as={isPassed ? FiCheck : FiX} boxSize={4} />
-        <Text as="span">{isPassed ? 'All' : failed}</Text>
-      </Flex>
-      <Text as="span" color="gray.500">
-        of
-      </Text>
-      <Text as="span">{formatColumnValueWith(total, formatNumber)}</Text>
-    </Flex>
-  );
+  return <AssertionLabel singleOnly={false} total={total} failed={failed} />;
 }
 
 export function CRTargetTableAssertionsSummary({
   total,
   failed,
   baseAssertionsFailed,
-  assertionsDiff,
+  delta,
 }: {
   total: number;
   failed: number;
   baseAssertionsFailed: number;
-  assertionsDiff: number;
+  delta: number;
 }) {
   const isFailedEqual = failed === baseAssertionsFailed;
   const isMoreFailed = failed - baseAssertionsFailed > 0;
@@ -235,9 +204,7 @@ export function CRTargetTableAssertionsSummary({
   if (total === 0) {
     return (
       <Center>
-        {assertionsDiff !== 0 && (
-          <Icon as={FiArrowDownCircle} color="black" boxSize={5} />
-        )}
+        {delta !== 0 && <AssertionsLabelIcon delta={delta} />}
         <Text as="span" color="black">
           none
         </Text>
@@ -246,45 +213,54 @@ export function CRTargetTableAssertionsSummary({
   }
 
   return (
-    <Flex gap={1} alignItems="center">
-      <Flex
-        alignItems="center"
-        borderRadius="md"
-        bgColor={isPassed ? '#DEFFEB' : '#FFE8F0'}
-        color={isPassed ? '#1F7600' : '#F60059'}
-        py={0.5}
-        px={1.5}
-        gap={1}
-      >
-        <Icon
-          boxSize={5}
-          as={
-            isPassed
-              ? FiCheck
-              : isFailedEqual
-              ? FiX
-              : isMoreFailed
-              ? FiArrowUpCircle
-              : FiArrowDownCircle
-          }
+    <AssertionLabel
+      singleOnly={false}
+      total={total}
+      failed={failed}
+      comparisonDelta={<ComparisonDelta delta={delta} total={total} />}
+      icon={
+        <ComparisonLabelIcon
+          isPassed={isPassed}
+          isFailedEqual={isFailedEqual}
+          isMoreFailed={isMoreFailed}
         />
-        <Text as="span">{isPassed ? 'All' : failed}</Text>
-      </Flex>
-      <Text as="span" color="gray.500">
-        of
+      }
+    />
+  );
+}
+
+function ComparisonLabelIcon({
+  isPassed,
+  isFailedEqual,
+  isMoreFailed,
+}: {
+  isPassed: boolean;
+  isFailedEqual: boolean;
+  isMoreFailed: boolean;
+}) {
+  return (
+    <Icon
+      boxSize={5}
+      as={
+        isPassed
+          ? FiCheck
+          : isFailedEqual
+          ? FiX
+          : isMoreFailed
+          ? FiArrowUpCircle
+          : FiArrowDownCircle
+      }
+    />
+  );
+}
+
+function ComparisonDelta({ delta, total }: { delta: number; total: number }) {
+  return (
+    <Center gap={1}>
+      {delta !== 0 && <AssertionsLabelIcon delta={delta} />}
+      <Text as="span" color={delta > 0 ? 'black' : 'inherit'}>
+        {formatColumnValueWith(total, formatNumber)}
       </Text>
-      <Center gap={1}>
-        {assertionsDiff !== 0 && (
-          <Icon
-            as={assertionsDiff > 0 ? FiArrowUpCircle : FiArrowDownCircle}
-            color="black"
-            boxSize={5}
-          />
-        )}
-        <Text as="span" color={assertionsDiff > 0 ? 'black' : 'inherit'}>
-          {formatColumnValueWith(total, formatNumber)}
-        </Text>
-      </Center>
-    </Flex>
+    </Center>
   );
 }
diff --git a/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListColumnList.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListColumnList.tsx
new file mode 100644
index 000000000..d483e0a01
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListColumnList.tsx
@@ -0,0 +1,141 @@
+import {
+  getIconForColumnType,
+  transformAsNestedBaseTargetRecord,
+} from '../../../../../utils/transformers';
+import type { ColumnSchema } from '../../../../../sdlc/single-report-schema';
+import { SaferTableSchema, Selectable } from '../../../../../types';
+import { Box, Flex, Grid, GridItem, Icon, Text } from '@chakra-ui/react';
+import { getAssertions } from '../../../../../utils/assertion';
+import { FiArrowRight, FiChevronRight } from 'react-icons/fi';
+import { HistogramChart } from '../../../Charts/HistogramChart';
+import { ColumnName } from '../ColumnName';
+import {
+  CRBaseTableAssertionsSummary,
+  CRTargetTableAssertionsSummary,
+} from './CRTableListAssertions';
+import { NoData } from '../../../NoData';
+
+interface Props extends Selectable {
+  baseTableDatum?: SaferTableSchema;
+  targetTableDatum?: SaferTableSchema;
+}
+export function CRTableListColumnList({
+  baseTableDatum,
+  targetTableDatum,
+  onSelect,
+}: Props) {
+  const transformedData = transformAsNestedBaseTargetRecord<
+    SaferTableSchema['columns'],
+    ColumnSchema
+  >(baseTableDatum?.columns, targetTableDatum?.columns);
+  const tableName = baseTableDatum?.name || targetTableDatum?.name;
+  const columns = Object.keys(targetTableDatum?.columns || {}).map(
+    (colName) => {
+      const { icon: colIcon } = getIconForColumnType(
+        targetTableDatum
+          ? targetTableDatum?.columns[colName]
+          : baseTableDatum?.columns[colName],
+      );
+
+      const mergedBaseColAssertions = [
+        ...(baseTableDatum?.piperider_assertion_result?.columns[colName] || []),
+        ...(baseTableDatum?.dbt_assertion_result?.columns[colName] || []),
+      ];
+
+      const mergedTargetColAssertions = [
+        ...(targetTableDatum?.piperider_assertion_result?.columns[colName] ||
+          []),
+        ...(targetTableDatum?.dbt_assertion_result?.columns[colName] || []),
+      ];
+
+      return {
+        colName,
+        colIcon,
+        mergedBaseColAssertions,
+        mergedTargetColAssertions,
+      };
+    },
+  );
+
+  if (columns.length === 0) {
+    return (
+      <Text textAlign="center" py={5}>
+        No columns
+      </Text>
+    );
+  }
+
+  return (
+    <>
+      {columns.map(
+        ({
+          colName,
+          colIcon,
+          mergedBaseColAssertions,
+          mergedTargetColAssertions,
+        }) => {
+          const baseAssertions = getAssertions(mergedBaseColAssertions);
+          const targetAssertions = getAssertions(mergedTargetColAssertions);
+          const colDatum = transformedData[colName];
+
+          return (
+            <Grid
+              p={3}
+              key={colName}
+              alignItems="center"
+              templateColumns="205px 2.3fr 1.5fr 2rem"
+              _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
+              onClick={() => onSelect({ tableName, columnName: colName })}
+              data-cy="cr-table-list-column-item"
+            >
+              <GridItem>
+                <ColumnName name={colName} icon={colIcon} />
+              </GridItem>
+
+              <GridItem>
+                <Flex gap={4} width="calc(100% - 50px)" height="80px">
+                  <Box width="50%">
+                    {colDatum?.base ? (
+                      <HistogramChart hideAxis data={colDatum.base} />
+                    ) : (
+                      <NoData />
+                    )}
+                  </Box>
+                  <Box width="50%">
+                    {colDatum?.target ? (
+                      <HistogramChart hideAxis data={colDatum.target} />
+                    ) : (
+                      <NoData />
+                    )}
+                  </Box>
+                </Flex>
+              </GridItem>
+
+              <GridItem>
+                {baseAssertions.total > 0 && targetAssertions.total > 0 ? (
+                  <Flex gap={2} color="gray.500" alignItems="center">
+                    <CRBaseTableAssertionsSummary {...baseAssertions} />
+                    <Icon as={FiArrowRight} />
+                    <CRTargetTableAssertionsSummary
+                      {...targetAssertions}
+                      baseAssertionsFailed={baseAssertions.failed}
+                      delta={targetAssertions.total - baseAssertions.total}
+                    />
+                  </Flex>
+                ) : (
+                  <Text color="gray.500">No assertions</Text>
+                )}
+              </GridItem>
+
+              <GridItem>
+                <Flex alignItems="center">
+                  <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
+                </Flex>
+              </GridItem>
+            </Grid>
+          );
+        },
+      )}
+    </>
+  );
+}
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnsSummary.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListColumnsSummary.tsx
similarity index 100%
rename from static_report/src/components/ComparisonReport/CRTableList/CRTableListColumnsSummary.tsx
rename to static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListColumnsSummary.tsx
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableListRowsSummary.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListDeltaSummary.tsx
similarity index 95%
rename from static_report/src/components/ComparisonReport/CRTableList/CRTableListRowsSummary.tsx
rename to static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListDeltaSummary.tsx
index 4ed1add44..bc92dcb24 100644
--- a/static_report/src/components/ComparisonReport/CRTableList/CRTableListRowsSummary.tsx
+++ b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableListDeltaSummary.tsx
@@ -5,7 +5,7 @@ import {
   FiArrowRight,
 } from 'react-icons/fi';
 
-export function CRTableListRowsSummary({
+export function CRTableListDeltaSummary({
   baseCount = 0,
   targetCount = 0,
 }: {
diff --git a/static_report/src/components/ComparisonReport/CRTableList/CRTableSchemaDetails.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableSchemaDetails.tsx
similarity index 93%
rename from static_report/src/components/ComparisonReport/CRTableList/CRTableSchemaDetails.tsx
rename to static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableSchemaDetails.tsx
index 02fb2ab2b..f7404d06e 100644
--- a/static_report/src/components/ComparisonReport/CRTableList/CRTableSchemaDetails.tsx
+++ b/static_report/src/components/shared/Tables/TableList/CRTableListItem/CRTableSchemaDetails.tsx
@@ -13,15 +13,15 @@ import {
 import { FiChevronRight } from 'react-icons/fi';
 import { nanoid } from 'nanoid';
 
-import { ColumnSchema } from '../../../sdlc/single-report-schema';
+import { ColumnSchema } from '../../../../../sdlc/single-report-schema';
 import {
   ComparsionSource,
   SaferTableSchema,
+  Selectable,
   zReport,
   ZTableSchema,
-} from '../../../types';
-import { NO_VALUE } from '../../shared/Columns/constants';
-import { useLocation } from 'wouter';
+} from '../../../../../types';
+import { NO_VALUE } from '../../../Columns/constants';
 
 type EnrichedColumnData = {
   added: number;
@@ -50,20 +50,20 @@ const getEnrichedColumnsFor = (
       }))
     : [];
 
-type Props = {
+interface Props extends Selectable {
   baseTableDatum?: SaferTableSchema;
   targetTableDatum?: SaferTableSchema;
   visibleDetail?: boolean;
-};
+}
 export function CRTableSchemaDetails({
   baseTableDatum,
   targetTableDatum,
   visibleDetail = false,
+  onSelect,
 }: Props) {
   zReport(ZTableSchema.safeParse(baseTableDatum));
   zReport(ZTableSchema.safeParse(targetTableDatum));
-  // eslint-disable-next-line
-  const [_, setLocation] = useLocation();
+
   const fallbackTable = baseTableDatum || targetTableDatum;
   const baseColEntries = getEnrichedColumnsFor(baseTableDatum?.columns, 'base');
   const targetColEntries = getEnrichedColumnsFor(
@@ -128,7 +128,7 @@ export function CRTableSchemaDetails({
     deltaDeleted,
   );
   // Combine columns on a per-row basis, now that the columns lengths are equalized/matched
-  const combinedSchemaRowItem = equalizedBaseColumns.map((base, index) => {
+  const combinedSchemaRowList = equalizedBaseColumns.map((base, index) => {
     return {
       base,
       target: equalizedTargetColumns[index],
@@ -164,7 +164,7 @@ export function CRTableSchemaDetails({
               </Tr>
             </Thead>
             <Tbody>
-              {combinedSchemaRowItem.map(
+              {combinedSchemaRowList.map(
                 ({ base: baseColumn, target: targetColumn }) => {
                   const fallbackColumn = baseColumn || targetColumn;
                   return (
@@ -172,9 +172,10 @@ export function CRTableSchemaDetails({
                       key={nanoid(10)}
                       onClick={() =>
                         visibleDetail &&
-                        setLocation(
-                          `/tables/${fallbackTable?.name}/columns/${fallbackColumn?.name}`,
-                        )
+                        onSelect({
+                          tableName: fallbackTable?.name,
+                          columnName: fallbackColumn?.name,
+                        })
                       }
                       _hover={{
                         bg: 'blackAlpha.50',
diff --git a/static_report/src/components/shared/Tables/TableList/CRTableListItem/index.tsx b/static_report/src/components/shared/Tables/TableList/CRTableListItem/index.tsx
new file mode 100644
index 000000000..2d003b9ea
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/CRTableListItem/index.tsx
@@ -0,0 +1,101 @@
+import { Flex, Grid, Text, GridItem, Icon } from '@chakra-ui/react';
+import { FiChevronRight } from 'react-icons/fi';
+import { ReactNode } from 'react';
+
+import {
+  TableListItem,
+  TableItemName,
+  TableItemDescription,
+} from '../TableListItem';
+import { CRTableListColumnsSummary } from './CRTableListColumnsSummary';
+import { CRTableListDeltaSummary } from './CRTableListDeltaSummary';
+
+import type { SaferTableSchema } from '../../../../../types';
+
+interface Props {
+  isExpanded: boolean;
+  baseTableDatum?: SaferTableSchema;
+  targetTableDatum?: SaferTableSchema;
+  onSelect: () => void;
+  children: ReactNode; //e.g. CRTableListAssertions
+}
+
+export function CRTableListItem({
+  isExpanded,
+  baseTableDatum,
+  targetTableDatum,
+  onSelect,
+  children,
+}: Props) {
+  const columnName = baseTableDatum?.name || targetTableDatum?.name;
+  const description =
+    baseTableDatum?.description || targetTableDatum?.description;
+
+  return (
+    <TableListItem isExpanded={isExpanded} data-cy="cr-table-overview-btn">
+      <Grid
+        templateColumns="218px 2fr 1.5fr"
+        justifyItems="flex-start"
+        width="calc(900px - 30px)"
+      >
+        <GridItem>
+          <TableItemName
+            name={columnName || ''}
+            description={description}
+            descriptionIconVisible={isExpanded}
+          />
+        </GridItem>
+        <GridItem>
+          <Flex gap={10} color="gray.500">
+            <Text>Rows</Text>
+            <CRTableListDeltaSummary
+              baseCount={baseTableDatum?.row_count}
+              targetCount={targetTableDatum?.row_count}
+            />
+          </Flex>
+        </GridItem>
+        <GridItem>
+          <Flex gap={2}>
+            {children}
+            {isExpanded && (
+              <Flex
+                as="a"
+                data-cy="cr-navigate-report-detail"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onSelect();
+                }}
+              >
+                <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
+              </Flex>
+            )}
+          </Flex>
+        </GridItem>
+      </Grid>
+      <Grid
+        templateColumns="218px 1fr"
+        justifyItems="flex-start"
+        width="calc(900px - 30px)"
+      >
+        <GridItem>
+          <Flex />
+        </GridItem>
+        <GridItem>
+          {isExpanded ? (
+            <TableItemDescription description={description || ''} />
+          ) : (
+            <Flex mr="30px" color="gray.500" maxWidth="650px" gap={1}>
+              <Text as="span" mr={4}>
+                Columns
+              </Text>
+              <CRTableListColumnsSummary
+                baseCount={baseTableDatum?.col_count}
+                targetCount={targetTableDatum?.col_count}
+              />
+            </Flex>
+          )}
+        </GridItem>
+      </Grid>
+    </TableListItem>
+  );
+}
diff --git a/static_report/src/components/shared/TableList/ColumnName.tsx b/static_report/src/components/shared/Tables/TableList/ColumnName.tsx
similarity index 100%
rename from static_report/src/components/shared/TableList/ColumnName.tsx
rename to static_report/src/components/shared/Tables/TableList/ColumnName.tsx
diff --git a/static_report/src/components/SingleReport/SRTableList/SRTableListColumnLabel.tsx b/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListColumnLabel.tsx
similarity index 100%
rename from static_report/src/components/SingleReport/SRTableList/SRTableListColumnLabel.tsx
rename to static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListColumnLabel.tsx
diff --git a/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListColumnList.tsx b/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListColumnList.tsx
new file mode 100644
index 000000000..c8c8f127e
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListColumnList.tsx
@@ -0,0 +1,78 @@
+import { Grid, GridItem, Flex, Text } from '@chakra-ui/react';
+
+import { HistogramChart } from '../../../Charts/HistogramChart';
+import { ColumnName } from '../ColumnName';
+import { AssertionLabel } from '../../../Assertions';
+
+import { getIconForColumnType } from '../../../../../utils/transformers';
+import type { TableSchema } from '../../../../../sdlc/single-report-schema';
+import type { Selectable } from '../../../../../types';
+import { getAssertions } from '../../../../../utils/assertion';
+
+interface Props extends Selectable {
+  table: TableSchema;
+}
+
+export function SRTableListColumnList({ table, onSelect }: Props) {
+  const columns = getTableColumns(table);
+
+  return (
+    <>
+      {columns.map(({ colName, colIcon, mergedColAssertions }) => {
+        const columnDatum = table.columns[colName];
+
+        return (
+          <Grid
+            p={3}
+            key={colName}
+            alignItems="center"
+            templateColumns="207px 2.5fr 1.2fr"
+            _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
+            onClick={() =>
+              onSelect({ tableName: table.name, columnName: columnDatum.name })
+            }
+            data-cy="sr-table-list-column-item"
+          >
+            <GridItem>
+              <ColumnName name={colName} icon={colIcon} />
+            </GridItem>
+
+            <GridItem>
+              <Flex width="calc(100% - 50px)" height="80px">
+                <HistogramChart hideAxis data={columnDatum} />
+              </Flex>
+            </GridItem>
+
+            <GridItem>
+              {!mergedColAssertions ? (
+                <Text color="gray.500">No assertions</Text>
+              ) : (
+                <AssertionLabel {...getAssertions(mergedColAssertions)} />
+              )}
+            </GridItem>
+          </Grid>
+        );
+      })}
+    </>
+  );
+}
+
+function getTableColumns(table: TableSchema) {
+  const columns = Object.keys(table.columns).map((colName) => {
+    const { icon: colIcon } = getIconForColumnType(table.columns[colName]);
+    const columnDatum = table.columns[colName];
+    const mergedColAssertions = [
+      ...(table.piperider_assertion_result?.columns[colName] || []),
+      ...(table.dbt_assertion_result?.columns[colName] || []),
+    ];
+
+    return {
+      colName,
+      colIcon,
+      columnDatum,
+      mergedColAssertions,
+    };
+  });
+
+  return columns;
+}
diff --git a/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListSchemaDetail.tsx b/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListSchemaDetail.tsx
new file mode 100644
index 000000000..387df06a0
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/SRTableListItem/SRTableListSchemaDetail.tsx
@@ -0,0 +1,63 @@
+import {
+  TableContainer,
+  Table,
+  Thead,
+  Tbody,
+  Td,
+  Tr,
+  Th,
+  Icon,
+  Text,
+} from '@chakra-ui/react';
+import { nanoid } from 'nanoid';
+import { FiChevronRight } from 'react-icons/fi';
+
+import type { TableSchema } from '../../../../../sdlc/single-report-schema';
+import type { Selectable } from '../../../../../types';
+
+interface Props extends Selectable {
+  table: TableSchema;
+}
+
+export function SRTableListSchemaDetail({ table, onSelect }: Props) {
+  return (
+    <TableContainer width="100%" maxWidth="calc(900px - 30px)">
+      <Table variant="simple">
+        <Thead>
+          <Tr>
+            <Th>Column</Th>
+            <Th>Type</Th>
+            <Th width="5%" />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {Object.keys(table.columns).map((colName) => (
+            <Tr
+              key={nanoid(10)}
+              onClick={() =>
+                onSelect({ tableName: table.name, columnName: colName })
+              }
+              _hover={{ bgColor: 'gray.50', cursor: 'pointer' }}
+              data-cy="sr-table-list-schema-item"
+            >
+              <Td whiteSpace="normal">
+                <Text
+                  as="span"
+                  noOfLines={1}
+                  maxWidth="250px"
+                  title={table.columns[colName]?.name}
+                >
+                  {table.columns[colName]?.name}
+                </Text>
+              </Td>
+              <Td>{table.columns[colName]?.schema_type}</Td>
+              <Td>
+                <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/static_report/src/components/shared/Tables/TableList/SRTableListItem/index.tsx b/static_report/src/components/shared/Tables/TableList/SRTableListItem/index.tsx
new file mode 100644
index 000000000..f406bf584
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/SRTableListItem/index.tsx
@@ -0,0 +1,121 @@
+import { Flex, Grid, Text, GridItem, Icon } from '@chakra-ui/react';
+import { FiChevronRight } from 'react-icons/fi';
+
+import {
+  TableListItem,
+  TableItemName,
+  TableItemDescription,
+} from '../TableListItem';
+import { NoData } from '../../../NoData';
+import { SRTableListColumnLabel } from './SRTableListColumnLabel';
+
+import { getReportAggregateAssertions } from '../../../../../utils/assertion';
+import {
+  formatColumnValueWith,
+  formatNumber,
+} from '../../../../../utils/formatters';
+import { getIconForColumnType } from '../../../../../utils/transformers';
+import type { SaferTableSchema, Selectable } from '../../../../../types';
+import { AssertionLabel } from '../../../Assertions/AssertionLabel';
+
+interface Props extends Selectable {
+  isExpanded: boolean;
+  tableDatum?: SaferTableSchema;
+}
+
+export function SRTableListItem({
+  isExpanded,
+  tableDatum: table,
+  onSelect,
+}: Props) {
+  const columns = Object.keys(table?.columns || {}).map((key) => key);
+  const { failed, total } = getReportAggregateAssertions(
+    table?.piperider_assertion_result,
+    table?.dbt_assertion_result,
+  );
+
+  if (!table) {
+    return <NoData />;
+  }
+
+  return (
+    <TableListItem isExpanded={isExpanded} data-cy="sr-table-overview-btn">
+      <Grid templateColumns="1fr 2fr 1fr" width="calc(900px - 30px)">
+        <GridItem>
+          <TableItemName
+            name={table.name}
+            description={table.description}
+            descriptionIconVisible={isExpanded}
+          />
+        </GridItem>
+
+        <GridItem>
+          <Flex gap={10} color="gray.500">
+            <Text>Rows</Text>
+            <Text>{formatColumnValueWith(table.row_count, formatNumber)}</Text>
+          </Flex>
+        </GridItem>
+
+        <GridItem>
+          <AssertionLabel total={total} failed={failed}>
+            {isExpanded && (
+              <Flex
+                as="a"
+                data-cy="sr-navigate-report-detail"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onSelect({ tableName: table?.name });
+                }}
+              >
+                <Icon as={FiChevronRight} color="piperider.500" boxSize={6} />
+              </Flex>
+            )}
+          </AssertionLabel>
+        </GridItem>
+      </Grid>
+
+      <Grid
+        templateColumns="218px 1fr"
+        justifyItems="flex-start"
+        width="calc(900px - 30px)"
+      >
+        <GridItem>
+          <Flex />
+        </GridItem>
+        <GridItem>
+          {isExpanded ? (
+            <TableItemDescription description={table.description || ''} />
+          ) : (
+            <Flex mr="30px" color="gray.500" maxWidth="650px">
+              <Text as="span" minWidth="95px" maxWidth="205px" textAlign="left">
+                {table.col_count} Columns
+              </Text>
+              <Flex
+                __css={{
+                  display: 'flex',
+                  gap: 3,
+                  alignItems: 'center',
+                  maxWidth: '100%',
+                  overflowX: 'scroll',
+                  scrollbarWidth: 'none',
+                  '&::-webkit-scrollbar': {
+                    display: 'none',
+                  },
+                }}
+              >
+                {columns.length > 0 &&
+                  columns.map((name) => (
+                    <SRTableListColumnLabel
+                      key={name}
+                      name={name}
+                      icon={getIconForColumnType(table.columns[name]).icon}
+                    />
+                  ))}
+              </Flex>
+            </Flex>
+          )}
+        </GridItem>
+      </Grid>
+    </TableListItem>
+  );
+}
diff --git a/static_report/src/components/shared/Tables/TableList/TableListItem.tsx b/static_report/src/components/shared/Tables/TableList/TableListItem.tsx
new file mode 100644
index 000000000..f5393105e
--- /dev/null
+++ b/static_report/src/components/shared/Tables/TableList/TableListItem.tsx
@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import {
+  AccordionButton,
+  AccordionButtonProps,
+  Flex,
+  Icon,
+  Tooltip,
+  Text,
+} from '@chakra-ui/react';
+import { FiAlertCircle, FiGrid } from 'react-icons/fi';
+
+export interface TableListItemProps extends AccordionButtonProps {
+  isExpanded: boolean;
+  children: ReactNode;
+}
+
+export function TableListItem({
+  isExpanded,
+  children,
+  ...props
+}: TableListItemProps) {
+  return (
+    <AccordionButton bgColor="white" borderRadius="md" {...props}>
+      <Flex
+        direction="column"
+        gap={4}
+        py="10px"
+        maxH={isExpanded ? '135px' : '90px'}
+      >
+        {children}
+      </Flex>
+    </AccordionButton>
+  );
+}
+
+export type TableItemNameProps = {
+  name: string;
+  description?: string;
+  descriptionIconVisible: boolean;
+};
+
+export function TableItemName({
+  name,
+  description,
+  descriptionIconVisible,
+}: TableItemNameProps) {
+  return (
+    <Flex alignItems="center" justifyContent="flex-start">
+      <Icon as={FiGrid} color="piperider.500" />
+      <Text mx={1}>{name}</Text>
+
+      {!descriptionIconVisible && (
+        <Tooltip label={description} placement="right-end" shouldWrapChildren>
+          <Icon as={FiAlertCircle} ml={1} />
+        </Tooltip>
+      )}
+    </Flex>
+  );
+}
+
+export function TableItemDescription({ description }: { description: string }) {
+  return (
+    <Text color="gray.500" noOfLines={3} textAlign="left">
+      <Text as="span">Description</Text>{' '}
+      <Text as="span" ml={4} title={description}>
+        {description}
+      </Text>
+    </Text>
+  );
+}
diff --git a/static_report/src/components/ComparisonReport/CRTableOverview.tsx b/static_report/src/components/shared/Tables/TableOverview.tsx
similarity index 66%
rename from static_report/src/components/ComparisonReport/CRTableOverview.tsx
rename to static_report/src/components/shared/Tables/TableOverview.tsx
index efbd3599a..c63ec21a1 100644
--- a/static_report/src/components/ComparisonReport/CRTableOverview.tsx
+++ b/static_report/src/components/shared/Tables/TableOverview.tsx
@@ -1,27 +1,29 @@
 import { Text, Heading, Flex, Icon } from '@chakra-ui/react';
 import { FiGrid } from 'react-icons/fi';
 
-import { SaferTableSchema, zReport, ZTableSchema } from '../../types';
+import { SaferTableSchema, zReport, ZTableSchema } from '../../../types';
 
 type Props = {
   baseTable?: SaferTableSchema;
   targetTable?: SaferTableSchema;
 };
 
-export function CRTableOverview({ baseTable, targetTable }: Props) {
+export function TableOverview({ baseTable, targetTable }: Props) {
   zReport(ZTableSchema.safeParse(baseTable));
   zReport(ZTableSchema.safeParse(targetTable));
 
+  const fallback = baseTable || targetTable;
+
   return (
     <Flex gap={1} direction={'column'} mb={8}>
       <Text color="gray.500">Table</Text>
       <Heading fontSize={24}>
         <Flex alignItems="center">
           <Icon as={FiGrid} mr={1} />
-          {targetTable?.name}
+          {fallback?.name}
         </Flex>
       </Heading>
-      <Text fontSize="sm">{targetTable?.description}</Text>
+      <Text fontSize="sm">{fallback?.description}</Text>
     </Flex>
   );
 }
diff --git a/static_report/src/components/ComparisonReport/CRAssertionDetails.tsx b/static_report/src/components/shared/Widgets/CRAssertionDetailsWidget.tsx
similarity index 95%
rename from static_report/src/components/ComparisonReport/CRAssertionDetails.tsx
rename to static_report/src/components/shared/Widgets/CRAssertionDetailsWidget.tsx
index ecc89d5a4..10f36ed11 100644
--- a/static_report/src/components/ComparisonReport/CRAssertionDetails.tsx
+++ b/static_report/src/components/shared/Widgets/CRAssertionDetailsWidget.tsx
@@ -12,9 +12,9 @@ import {
 import groupBy from 'lodash/groupBy';
 import { nanoid } from 'nanoid';
 
-import { CRAssertionTests } from '../../types';
-import { AssertionStatus } from '../shared/AssertionStatus';
-import type { CRModalData } from './CRModal/CRModal';
+import { CRAssertionTests } from '../../../types';
+import { AssertionStatus } from '../AssertionStatus';
+import type { CRModalData } from '../Modals/CRModal/CRModal';
 
 type AssertionRow = {
   name: string;
@@ -63,7 +63,7 @@ function groupedAssertions(
   });
 }
 
-export function CRAssertionDetails({ assertions, ...props }: Props) {
+export function CRAssertionDetailsWidget({ assertions, ...props }: Props) {
   const { piperider, dbt } = assertions;
 
   // group by "level", "column", "name"
diff --git a/static_report/src/components/shared/Widgets/CRColumnSummaryListWidget.tsx b/static_report/src/components/shared/Widgets/CRColumnSummaryListWidget.tsx
new file mode 100644
index 000000000..cbeef04fe
--- /dev/null
+++ b/static_report/src/components/shared/Widgets/CRColumnSummaryListWidget.tsx
@@ -0,0 +1,65 @@
+import { Flex, Grid } from '@chakra-ui/react';
+import { ColumnSchema } from '../../../sdlc/single-report-schema';
+import {
+  SaferTableSchema,
+  Selectable,
+  zReport,
+  ZTableSchema,
+} from '../../../types';
+import { getDataChart } from '../../../utils/charts';
+import { transformAsNestedBaseTargetRecord } from '../../../utils/transformers';
+import { ChartContainer } from '../Charts/ChartContainer';
+import { ColumnStatsCard } from '../Columns/ColumnCards/ColumnStatsCard';
+
+interface CRProfilingDetailsProps extends Selectable {
+  baseTable?: SaferTableSchema;
+  targetTable?: SaferTableSchema;
+}
+export function CRColumnSummaryListWidget({
+  baseTable,
+  targetTable,
+  onSelect,
+}: CRProfilingDetailsProps) {
+  zReport(ZTableSchema.safeParse(baseTable));
+  zReport(ZTableSchema.safeParse(targetTable));
+
+  const transformedData = transformAsNestedBaseTargetRecord<
+    SaferTableSchema['columns'],
+    ColumnSchema
+  >(baseTable?.columns, targetTable?.columns);
+  const tableName = baseTable?.name || targetTable?.name;
+
+  return (
+    <>
+      {Object.entries(transformedData).map(([key, { base, target }]) => {
+        return (
+          <Flex key={key} direction="column">
+            <Grid
+              my={8}
+              templateColumns="1fr 2fr"
+              gap={12}
+              overflowX={'hidden'}
+            >
+              <ColumnStatsCard
+                baseColumn={base}
+                targetColumn={target}
+                onSelect={({ columnName }) =>
+                  onSelect({ columnName, tableName })
+                }
+              />
+
+              <Flex my={4} alignItems={'center'}>
+                <ChartContainer height={350}>
+                  {getDataChart(base)}
+                </ChartContainer>
+                <ChartContainer height={350}>
+                  {getDataChart(target, base)}
+                </ChartContainer>
+              </Flex>
+            </Grid>
+          </Flex>
+        );
+      })}
+    </>
+  );
+}
diff --git a/static_report/src/components/shared/Widgets/ChartTabsWidget.tsx b/static_report/src/components/shared/Widgets/ChartTabsWidget.tsx
index de6556162..dc0c63e66 100644
--- a/static_report/src/components/shared/Widgets/ChartTabsWidget.tsx
+++ b/static_report/src/components/shared/Widgets/ChartTabsWidget.tsx
@@ -13,7 +13,7 @@ import { isNumber } from 'lodash';
 import { ColumnSchema } from '../../../sdlc/single-report-schema';
 import { getDataChart, renderChartUnavailableMsg } from '../../../utils/charts';
 import { ChartKind } from '../../../utils/transformers';
-import { ColumnCardDataVisualContainer } from '../Columns/ColumnCard/ColumnCardDataVisualContainer';
+import { ChartContainer } from '../Charts/ChartContainer';
 import { TEXTLENGTH } from '../Columns/constants';
 
 interface Props {
@@ -148,30 +148,27 @@ function _renderGridSplitView(
     <Grid templateColumns={hasSplitView ? '1fr 1fr' : '1fr'}>
       <GridItem minWidth={0}>
         {
-          <ColumnCardDataVisualContainer p={0} title={baseColumnDatum?.name}>
+          <ChartContainer p={0} title={baseColumnDatum?.name}>
             {getDataChart(
               baseColumnDatum,
               targetColumnDatum,
               chartKind,
               hasAnimation,
             )}
-          </ColumnCardDataVisualContainer>
+          </ChartContainer>
         }
       </GridItem>
       {hasSplitView && (
         <GridItem minWidth={0}>
           {targetColumnDatum !== null && (
-            <ColumnCardDataVisualContainer
-              p={0}
-              title={targetColumnDatum?.name}
-            >
+            <ChartContainer p={0} title={targetColumnDatum?.name}>
               {getDataChart(
                 targetColumnDatum,
                 baseColumnDatum,
                 chartKind,
                 hasAnimation,
               )}
-            </ColumnCardDataVisualContainer>
+            </ChartContainer>
           )}
         </GridItem>
       )}
diff --git a/static_report/src/components/shared/Widgets/DataCompositionWidget.tsx b/static_report/src/components/shared/Widgets/DataCompositionWidget.tsx
index 384b1265e..944bde554 100644
--- a/static_report/src/components/shared/Widgets/DataCompositionWidget.tsx
+++ b/static_report/src/components/shared/Widgets/DataCompositionWidget.tsx
@@ -1,5 +1,6 @@
 import { Divider, Text, Box } from '@chakra-ui/react';
 import { ColumnSchema } from '../../../sdlc/single-report-schema';
+import { Comparable } from '../../../types';
 import { renderChartUnavailableMsg } from '../../../utils/charts';
 import { formatTitleCase } from '../../../utils/formatters';
 import {
@@ -7,14 +8,18 @@ import {
   transformCompositionAsFlatStackInput,
 } from '../../../utils/transformers';
 import { FlatStackedBarChart } from '../Charts/FlatStackedBarChart';
-import { SRGeneralStats } from '../Columns/ColumnMetrics/SRGeneralStats';
-import { SRTextNumberStats } from '../Columns/ColumnMetrics/SRTextNumberStats';
+import { GeneralStats } from '../Columns/ColumnMetrics/GeneralStats';
+import { TypedStats } from '../Columns/ColumnMetrics/TypedStats';
 
-interface Props {
+interface Props extends Comparable {
   hasAnimation?: boolean;
   columnDatum?: ColumnSchema;
 }
-export function DataCompositionWidget({ columnDatum, hasAnimation }: Props) {
+export function DataCompositionWidget({
+  columnDatum,
+  hasAnimation,
+  singleOnly,
+}: Props) {
   const { type } = columnDatum || {};
   const showGenericTypeComp = containsAvgSDSummary(type);
   const dataCompInput = transformCompositionAsFlatStackInput(
@@ -39,7 +44,11 @@ export function DataCompositionWidget({ columnDatum, hasAnimation }: Props) {
             />
           </Box>
           <Box mt={6}>
-            <SRGeneralStats columnDatum={columnDatum} width={'100%'} />
+            <GeneralStats
+              baseColumnDatum={columnDatum}
+              singleOnly
+              width={'100%'}
+            />
           </Box>
         </Box>
 
@@ -54,7 +63,11 @@ export function DataCompositionWidget({ columnDatum, hasAnimation }: Props) {
               />
             </Box>
             <Box mt={6}>
-              <SRTextNumberStats columnDatum={columnDatum} width={'100%'} />
+              <TypedStats
+                baseColumnDatum={columnDatum}
+                singleOnly
+                width={'100%'}
+              />
             </Box>
           </Box>
         )}
diff --git a/static_report/src/components/shared/Widgets/DataSummaryWidget.tsx b/static_report/src/components/shared/Widgets/DataSummaryWidget.tsx
index f966eb2d9..d8601e697 100644
--- a/static_report/src/components/shared/Widgets/DataSummaryWidget.tsx
+++ b/static_report/src/components/shared/Widgets/DataSummaryWidget.tsx
@@ -3,7 +3,7 @@ import { ColumnSchema } from '../../../sdlc/single-report-schema';
 import { renderChartUnavailableMsg } from '../../../utils/charts';
 import { formatTitleCase } from '../../../utils/formatters';
 import { NO_VALUE } from '../Columns/constants';
-import { SRSummaryStats } from '../Columns/ColumnMetrics/SRSummaryStats';
+import { SummaryStats } from '../Columns/ColumnMetrics/SummaryStats';
 
 interface Props {
   columnDatum?: ColumnSchema;
@@ -20,7 +20,7 @@ export function DataSummaryWidget({ columnDatum }: Props) {
           {formatTitleCase(columnDatum?.type || NO_VALUE)} Statistics
         </Text>
         <Divider my={3} />
-        <SRSummaryStats columnDatum={columnDatum} width={'100%'} />
+        <SummaryStats baseColumnDatum={columnDatum} singleOnly width={'100%'} />
       </Box>
     );
   }
diff --git a/static_report/src/components/SingleReport/SRAssertionDetails.tsx b/static_report/src/components/shared/Widgets/SRAssertionDetailsWidget.tsx
similarity index 90%
rename from static_report/src/components/SingleReport/SRAssertionDetails.tsx
rename to static_report/src/components/shared/Widgets/SRAssertionDetailsWidget.tsx
index f8f19047c..ec68c9d53 100644
--- a/static_report/src/components/SingleReport/SRAssertionDetails.tsx
+++ b/static_report/src/components/shared/Widgets/SRAssertionDetailsWidget.tsx
@@ -9,11 +9,13 @@ import {
   Td,
   Text,
 } from '@chakra-ui/react';
+import { nanoid } from 'nanoid';
 
-import { AssertionStatus } from '../shared/AssertionStatus';
-import { formatTestExpectedOrActual } from '../../utils/formatters';
-import type { AssertionValue } from '../../types';
-import type { AssertionTest } from '../../sdlc/single-report-schema';
+import { AssertionStatus } from '../AssertionStatus';
+import { formatTestExpectedOrActual } from '../../../utils/formatters';
+
+import type { AssertionValue } from '../../../types';
+import type { AssertionTest } from '../../../sdlc/single-report-schema';
 
 type AssertionWithSource = AssertionTest & { source?: 'PipeRider' | 'dbt' };
 
@@ -29,7 +31,7 @@ type Props = {
   };
 };
 
-export function SRAssertionDetails({ assertions }: Props) {
+export function SRAssertionDetailsWidget({ assertions }: Props) {
   const { passedAssertions, failedAssertions } = mergeAssertions(
     assertions?.piperider,
     assertions?.dbt,
@@ -73,7 +75,7 @@ export function SRAssertionDetails({ assertions }: Props) {
             ))}
 
             {passedAssertions.map((assertion) => (
-              <Tr key={assertion.name}>
+              <Tr key={nanoid()}>
                 <Td>{assertion.name}</Td>
                 <Td>
                   <AssertionStatus status={assertion.status} />
@@ -121,10 +123,9 @@ function mergeAssertions(piperider?: AssertionValue, dbt?: AssertionValue) {
 
   const { passed: pprColAssertionPassed, failed: pprColAssertionFailed } =
     Object.keys(piperider?.columns || {})
-      .map((colName) =>
+      .flatMap((colName) =>
         (piperider?.columns[colName] || []).map((assertion) => assertion),
       )
-      .flat()
       .reduce<AssertStatusCounts>(
         (acc, assertion) =>
           extractAssertionWithSource('PipeRider', assertion, acc),
@@ -143,10 +144,9 @@ function mergeAssertions(piperider?: AssertionValue, dbt?: AssertionValue) {
 
   const { passed: dbtColAssertionPassed, failed: dbtColAssertionFailed } =
     Object.keys(dbt?.columns || {})
-      .map((colName) =>
+      .flatMap((colName) =>
         (dbt?.columns[colName] || []).map((assertion) => assertion),
       )
-      .flat()
       .reduce<AssertStatusCounts>(
         (acc, assertion) => extractAssertionWithSource('dbt', assertion, acc),
         { passed: [], failed: [] },
diff --git a/static_report/src/pages/CRColumnDetailsPage.tsx b/static_report/src/pages/CRColumnDetailsPage.tsx
index 970ca25b4..b8b306653 100644
--- a/static_report/src/pages/CRColumnDetailsPage.tsx
+++ b/static_report/src/pages/CRColumnDetailsPage.tsx
@@ -1,49 +1,56 @@
 import { Flex, Grid, GridItem, Text } from '@chakra-ui/react';
-import { useLocation, useRoute } from 'wouter';
+import { useLocation } from 'wouter';
+import { useState } from 'react';
+
 import { ColumnTypeHeader } from '../components/shared/Columns/ColumnTypeHeader';
 import { Main } from '../components/shared/Main';
-import { formatReportTime } from '../utils/formatters';
 import { DataCompositionWidget } from '../components/shared/Widgets/DataCompositionWidget';
 import { ChartTabsWidget } from '../components/shared/Widgets/ChartTabsWidget';
-import { ComparisonReportSchema } from '../types';
 import { ColumnDetailsMasterList } from '../components/shared/Columns/ColumnDetailMasterList';
 import { mainContentAreaHeight } from '../utils/layout';
 import { DataSummaryWidget } from '../components/shared/Widgets/DataSummaryWidget';
 import { QuantilesWidget } from '../components/shared/Widgets/QuantilesWidget';
+
+import { formatReportTime } from '../utils/formatters';
 import {
   containsColumnQuantile,
   containsDataSummary,
 } from '../utils/transformers';
-import { useState } from 'react';
+
+import type { ComparisonReportSchema } from '../types';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+import { COLUMN_DETAILS_ROUTE_PATH } from '../utils/routes';
+import { NoData } from '../components/shared/NoData';
 interface Props {
   data: ComparisonReportSchema;
+  columnName: string;
+  tableName: string;
 }
-export function CRColumnDetailsPage({
+
+export default function CRColumnDetailsPage({
   data: {
     base: { tables: baseTables, created_at: baseTime },
     input: { tables: targetTables, created_at: targetTime },
   },
+  columnName,
+  tableName,
 }: Props) {
-  const [, params] = useRoute('/tables/:reportName/columns/:columnName');
   const [, setLocation] = useLocation();
   const [tabIndex, setTabIndex] = useState<number>(0);
 
   const time = `${formatReportTime(baseTime)} -> ${formatReportTime(
     targetTime,
   )}`;
-  if (!params?.columnName) {
+  if (!columnName || !tableName) {
     return (
       <Main isSingleReport={false} time={time}>
-        <Flex justifyContent="center" alignItems="center" minHeight="100vh">
-          No profile column data found.
-        </Flex>
+        <NoData text="No profile data found." />
       </Main>
     );
   }
 
-  const { reportName, columnName } = params;
   const decodedColName = decodeURIComponent(columnName);
-  const decodedTableName = decodeURIComponent(reportName);
+  const decodedTableName = decodeURIComponent(tableName);
 
   const baseDataColumns = baseTables[decodedTableName]?.columns || {};
   const targetDataColumns = targetTables[decodedTableName]?.columns || {};
@@ -60,6 +67,9 @@ export function CRColumnDetailsPage({
   return (
     <Main isSingleReport={false} time={time} maxHeight={mainContentAreaHeight}>
       <Grid width={'inherit'} templateColumns={'1fr 2fr'}>
+        <GridItem colSpan={3}>
+          <BreadcrumbNav routePathToMatch={COLUMN_DETAILS_ROUTE_PATH} />
+        </GridItem>
         {/* Master Area */}
         <GridItem overflowY={'scroll'} maxHeight={mainContentAreaHeight}>
           <ColumnDetailsMasterList
@@ -67,7 +77,6 @@ export function CRColumnDetailsPage({
             targetDataColumns={targetDataColumns}
             currentReport={decodedTableName}
             currentColumn={decodedColName}
-            hasSplitView
             onSelect={({ tableName, columnName }) => {
               setTabIndex(0); //reset tabs
               setLocation(`/tables/${tableName}/columns/${columnName}`);
diff --git a/static_report/src/components/ComparisonReport/ComparisonReport.tsx b/static_report/src/pages/CRTableDetailsPage.tsx
similarity index 62%
rename from static_report/src/components/ComparisonReport/ComparisonReport.tsx
rename to static_report/src/pages/CRTableDetailsPage.tsx
index 85cc193e5..298728ad8 100644
--- a/static_report/src/components/ComparisonReport/ComparisonReport.tsx
+++ b/static_report/src/pages/CRTableDetailsPage.tsx
@@ -1,59 +1,67 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Flex,
-  Heading,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { Link } from 'wouter';
+import { Flex, Heading, useDisclosure } from '@chakra-ui/react';
+import { useLocation } from 'wouter';
 import { useState } from 'react';
-import { FiDatabase, FiGrid } from 'react-icons/fi';
 
-import { Main } from '../shared/Main';
-import { getComparisonAssertions } from '../../utils/assertion';
+import { Main } from '../components/shared/Main';
+import { getComparisonAssertions } from '../utils/assertion';
 
-import { useDocumentTitle } from '../../hooks/useDocumentTitle';
-import { CRModal, TestDetail } from './CRModal/CRModal';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+import {
+  CRModal,
+  TestDetail,
+} from '../components/shared/Modals/CRModal/CRModal';
 import {
   ComparisonReportSchema,
   ZComparisonSchema,
   zReport,
   ZTableSchema,
-} from '../../types';
-import { CRProfilingDetails } from './CRProfilingDetails';
-import { CRTableOverview } from './CRTableOverview';
-import { formatReportTime } from '../../utils/formatters';
-import { CollapseContent } from '../shared/CollapseContent';
-import { CRAssertionDetails } from './CRAssertionDetails';
+} from '../types';
+import { CRColumnSummaryListWidget } from '../components/shared/Widgets/CRColumnSummaryListWidget';
+import { TableOverview } from '../components/shared/Tables/TableOverview';
+import { formatReportTime } from '../utils/formatters';
+import { CollapseContent } from '../components/shared/CollapseContent';
+import { CRAssertionDetailsWidget } from '../components/shared/Widgets/CRAssertionDetailsWidget';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+import { TABLE_DETAILS_ROUTE_PATH } from '../utils/routes';
+import { NoData } from '../components/shared/NoData';
 
 type Props = {
   data: ComparisonReportSchema;
-  name: string;
+  tableName: string;
 };
-export default function ComparisonReport({ data, name: reportName }: Props) {
+export default function CRTableDetailsPage({ data, tableName }: Props) {
   const [testDetail, setTestDetail] = useState<TestDetail | null>(null);
   const modal = useDisclosure();
   const [assertionsVisible, setAssertionsVisible] = useState(false);
   const [columnsVisible, setColumnsVisible] = useState(false);
+  const [, setLocation] = useLocation();
+  useDocumentTitle(tableName);
+
+  if (!data || !tableName) {
+    return (
+      <Main isSingleReport time="-">
+        <NoData text="No profile data found." />
+      </Main>
+    );
+  }
 
   const { base, input: target } = data;
   zReport(ZComparisonSchema(true).safeParse(data));
 
-  const baseTable = base.tables[reportName];
-  const targetTable = target.tables[reportName];
+  const baseTable = base.tables[tableName];
+  const targetTable = target.tables[tableName];
 
   zReport(ZTableSchema.safeParse(baseTable));
   zReport(ZTableSchema.safeParse(targetTable));
 
   const [baseOverview, targetOverview] = getComparisonAssertions({
     data,
-    reportName,
+    tableName,
     type: 'piperider',
   });
   const [dbtBaseOverview, dbtTargetOverview] = getComparisonAssertions({
     data,
-    reportName,
+    tableName,
     type: 'dbt',
   });
 
@@ -68,8 +76,6 @@ export default function ComparisonReport({ data, name: reportName }: Props) {
   const isAssertionsEmpty =
     piperiderAssertions.length === 0 && dbtAssertions.length === 0;
 
-  useDocumentTitle(reportName);
-
   return (
     <Main
       isSingleReport={false}
@@ -78,28 +84,7 @@ export default function ComparisonReport({ data, name: reportName }: Props) {
       )}`}
     >
       <Flex direction="column" width="inherit">
-        <Flex mx="5%" mt={4}>
-          <Breadcrumb fontSize="lg">
-            <BreadcrumbItem>
-              <Link href="/">
-                <BreadcrumbLink href="/" data-cy="cr-report-breadcrumb-back">
-                  <Flex alignItems="center" gap={1}>
-                    <FiDatabase /> Tables
-                  </Flex>
-                </BreadcrumbLink>
-              </Link>
-            </BreadcrumbItem>
-
-            <BreadcrumbItem isCurrentPage>
-              <BreadcrumbLink href="#">
-                <Flex alignItems="center" gap={1}>
-                  <FiGrid />
-                  {reportName}
-                </Flex>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </Breadcrumb>
-        </Flex>
+        <BreadcrumbNav routePathToMatch={TABLE_DETAILS_ROUTE_PATH} />
 
         <Flex
           border="1px solid"
@@ -111,7 +96,7 @@ export default function ComparisonReport({ data, name: reportName }: Props) {
           mx="5%"
           direction="column"
         >
-          <CRTableOverview baseTable={baseTable} targetTable={targetTable} />
+          <TableOverview baseTable={baseTable} targetTable={targetTable} />
 
           <Heading size="md">Assertions</Heading>
           <CollapseContent
@@ -120,7 +105,7 @@ export default function ComparisonReport({ data, name: reportName }: Props) {
             collapseable={!isAssertionsEmpty}
             onVisible={() => setAssertionsVisible((visible) => !visible)}
           >
-            <CRAssertionDetails
+            <CRAssertionDetailsWidget
               assertions={{
                 piperider: piperiderAssertions,
                 dbt: dbtAssertions,
@@ -146,9 +131,12 @@ export default function ComparisonReport({ data, name: reportName }: Props) {
             collapseable={baseTable !== undefined || targetTable !== undefined}
             onVisible={() => setColumnsVisible((visible) => !visible)}
           >
-            <CRProfilingDetails
+            <CRColumnSummaryListWidget
               baseTable={baseTable}
               targetTable={targetTable}
+              onSelect={({ tableName, columnName }) =>
+                setLocation(`/tables/${tableName}/columns/${columnName}`)
+              }
             />
           </CollapseContent>
         </Flex>
diff --git a/static_report/src/pages/CRTablesListPage.tsx b/static_report/src/pages/CRTablesListPage.tsx
new file mode 100644
index 000000000..7bbfa6435
--- /dev/null
+++ b/static_report/src/pages/CRTablesListPage.tsx
@@ -0,0 +1,144 @@
+import { useLocalStorage } from 'usehooks-ts';
+
+import { Main } from '../components/shared/Main';
+import {
+  TableActionBar,
+  type TableActionBarView,
+} from '../components/shared/Tables/TableActionBar';
+
+import { formatReportTime } from '../utils/formatters';
+
+import { CRTableListItem } from '../components/shared/Tables/TableList/CRTableListItem';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+import { CR_LIST_VIEW } from '../utils/localStorageKeys';
+import {
+  SaferSRSchema,
+  SaferTableSchema,
+  ZComparisonTableSchema,
+  zReport,
+  ZSingleSchema,
+  type ComparisonReportSchema,
+} from '../types';
+import { transformAsNestedBaseTargetRecord } from '../utils/transformers';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  Divider,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
+import { nanoid } from 'nanoid';
+import { useLocation } from 'wouter';
+
+import { CRTableListColumnList } from '../components/shared/Tables/TableList/CRTableListItem/CRTableListColumnList';
+import { CRTableSchemaDetails } from '../components/shared/Tables/TableList/CRTableListItem/CRTableSchemaDetails';
+import { CRTableListAssertions } from '../components/shared/Tables/TableList/CRTableListItem/CRTableListAssertions';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+
+type Props = { data: ComparisonReportSchema };
+
+export function CRTablesListPage({ data }: Props) {
+  const [view, setView] = useLocalStorage<TableActionBarView>(
+    CR_LIST_VIEW,
+    'summary',
+  );
+  const [, setLocation] = useLocation();
+  const { base, input: target } = data;
+  const tables = transformAsNestedBaseTargetRecord<
+    SaferSRSchema['tables'],
+    SaferTableSchema
+  >(base.tables, target.tables);
+
+  zReport(ZSingleSchema.safeParse(base));
+  zReport(ZSingleSchema.safeParse(target));
+
+  useDocumentTitle('Report List');
+
+  return (
+    <Main
+      isSingleReport={false}
+      time={`${formatReportTime(base.created_at)} -> ${formatReportTime(
+        target.created_at,
+      )}`}
+    >
+      <TableActionBar
+        sourceName={data.input.datasource.name}
+        sourceType={data.input.datasource.type}
+        currentView={view}
+        toggleView={(nextView) => {
+          setView(nextView);
+        }}
+      >
+        <>
+          <Divider orientation="vertical" mx={3} />
+          <BreadcrumbNav routePathToMatch="/" />
+        </>
+      </TableActionBar>
+
+      <Flex direction="column" width="900px" minHeight="650px">
+        <Grid templateColumns="218px 2fr 1.5fr" px={4} my={6}>
+          <Text width="100px">Name</Text>
+          <Text width="">Summary</Text>
+          <Text>Assertions</Text>
+        </Grid>
+        <Accordion allowToggle>
+          {Object.keys(tables).map((key) => {
+            const table = tables[key];
+            ZComparisonTableSchema(false).safeParse(table);
+
+            return (
+              <Flex key={nanoid()}>
+                <AccordionItem>
+                  {({ isExpanded }) => (
+                    <>
+                      {/* Accordion Parent */}
+                      <CRTableListItem
+                        isExpanded={isExpanded}
+                        baseTableDatum={table.base}
+                        targetTableDatum={table.target}
+                        onSelect={() => setLocation(`/tables/${key}`)}
+                      >
+                        <CRTableListAssertions data={data} tableName={key} />
+                      </CRTableListItem>
+
+                      {/* Accordion Children Types */}
+                      <AccordionPanel bgColor="white">
+                        {view === 'summary' ? (
+                          <Stack gap={6}>
+                            <CRTableListColumnList
+                              baseTableDatum={table?.base}
+                              targetTableDatum={table?.target}
+                              onSelect={({ tableName, columnName }) =>
+                                setLocation(
+                                  `/tables/${tableName}/columns/${columnName}`,
+                                )
+                              }
+                            />
+                          </Stack>
+                        ) : (
+                          <CRTableSchemaDetails
+                            visibleDetail
+                            baseTableDatum={table?.base}
+                            targetTableDatum={table?.target}
+                            onSelect={({ tableName, columnName }) =>
+                              setLocation(
+                                `/tables/${tableName}/columns/${columnName}`,
+                              )
+                            }
+                          />
+                        )}
+                      </AccordionPanel>
+                    </>
+                  )}
+                </AccordionItem>
+              </Flex>
+            );
+          })}
+        </Accordion>
+      </Flex>
+    </Main>
+  );
+}
diff --git a/static_report/src/pages/SRColumnDetailsPage.tsx b/static_report/src/pages/SRColumnDetailsPage.tsx
index 7eaf0cecf..eebee8749 100644
--- a/static_report/src/pages/SRColumnDetailsPage.tsx
+++ b/static_report/src/pages/SRColumnDetailsPage.tsx
@@ -1,43 +1,49 @@
-import { Divider, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
-import { useLocation, useRoute } from 'wouter';
+import { Grid, GridItem } from '@chakra-ui/react';
+import { useLocation } from 'wouter';
 import { useState } from 'react';
 import { ColumnTypeHeader } from '../components/shared/Columns/ColumnTypeHeader';
 import { Main } from '../components/shared/Main';
-import { SingleReportSchema } from '../sdlc/single-report-schema';
-import { formatReportTime, formatTitleCase } from '../utils/formatters';
 import { DataCompositionWidget } from '../components/shared/Widgets/DataCompositionWidget';
 import { ChartTabsWidget } from '../components/shared/Widgets/ChartTabsWidget';
 import { mainContentAreaHeight } from '../utils/layout';
+import { QuantilesWidget } from '../components/shared/Widgets/QuantilesWidget';
+import { ColumnDetailsMasterList } from '../components/shared/Columns/ColumnDetailMasterList';
+
 import {
   containsColumnQuantile,
   containsDataSummary,
 } from '../utils/transformers';
-import { QuantilesWidget } from '../components/shared/Widgets/QuantilesWidget';
-import { ColumnDetailsMasterList } from '../components/shared/Columns/ColumnDetailMasterList';
-import { SRSummaryStats } from '../components/shared/Columns/ColumnMetrics/SRSummaryStats';
+import { formatReportTime } from '../utils/formatters';
+
+import type { SingleReportSchema } from '../sdlc/single-report-schema';
+import { DataSummaryWidget } from '../components/shared/Widgets/DataSummaryWidget';
+import { NoData } from '../components/shared/NoData';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+import { COLUMN_DETAILS_ROUTE_PATH } from '../utils/routes';
 interface Props {
   data: SingleReportSchema;
+  columnName: string;
+  tableName: string;
 }
-export function SRColumnDetailsPage({ data: { tables, created_at } }: Props) {
-  // eslint-disable-next-line
-  const [_, params] = useRoute('/tables/:reportName/columns/:columnName');
+export default function SRColumnDetailsPage({
+  data: { tables, created_at },
+  columnName,
+  tableName,
+}: Props) {
   const [, setLocation] = useLocation();
   const [tabIndex, setTabIndex] = useState<number>(0);
   const time = formatReportTime(created_at);
 
-  if (!params?.columnName) {
+  if (!columnName || !tableName) {
     return (
       <Main isSingleReport time={time}>
-        <Flex justifyContent="center" alignItems="center" minHeight="100vh">
-          No profile column data found.
-        </Flex>
+        <NoData text="No profile data found." />
       </Main>
     );
   }
 
-  const { reportName, columnName } = params;
   const decodedColName = decodeURIComponent(columnName);
-  const decodedTableName = decodeURIComponent(reportName);
+  const decodedTableName = decodeURIComponent(tableName);
 
   const dataColumns = tables[decodedTableName].columns;
   const columnDatum = dataColumns[decodedColName];
@@ -49,6 +55,9 @@ export function SRColumnDetailsPage({ data: { tables, created_at } }: Props) {
   return (
     <Main isSingleReport time={time} maxHeight={mainContentAreaHeight}>
       <Grid width={'inherit'} templateColumns={'1fr 2fr'}>
+        <GridItem colSpan={3}>
+          <BreadcrumbNav routePathToMatch={COLUMN_DETAILS_ROUTE_PATH} />
+        </GridItem>
         {/* Master Area */}
         <GridItem overflowY={'scroll'} maxHeight={mainContentAreaHeight}>
           <ColumnDetailsMasterList
@@ -59,6 +68,7 @@ export function SRColumnDetailsPage({ data: { tables, created_at } }: Props) {
               setTabIndex(0); //resets tabs
               setLocation(`/tables/${tableName}/columns/${columnName}`);
             }}
+            singleOnly
           />
         </GridItem>
 
@@ -101,9 +111,7 @@ export function SRColumnDetailsPage({ data: { tables, created_at } }: Props) {
           >
             {containsDataSummary(type) && (
               <>
-                <Text fontSize={'xl'}>{formatTitleCase(type)} Statistics</Text>
-                <Divider my={3} />
-                <SRSummaryStats columnDatum={columnDatum} width={'100%'} />
+                <DataSummaryWidget columnDatum={columnDatum} />
               </>
             )}
           </GridItem>
diff --git a/static_report/src/pages/SRTableDetailsPage.tsx b/static_report/src/pages/SRTableDetailsPage.tsx
new file mode 100644
index 000000000..b1d8ce898
--- /dev/null
+++ b/static_report/src/pages/SRTableDetailsPage.tsx
@@ -0,0 +1,123 @@
+import { Flex, Heading } from '@chakra-ui/react';
+import { useLocation } from 'wouter';
+import { useState } from 'react';
+import { nanoid } from 'nanoid';
+
+import { Main } from '../components/shared/Main';
+import { ColumnHighlightsCard } from '../components/shared/Columns/ColumnCards/ColumnHighlightsCard';
+import { CollapseContent } from '../components/shared/CollapseContent';
+import { SRAssertionDetailsWidget } from '../components/shared/Widgets/SRAssertionDetailsWidget';
+
+import { dataSourceSchema } from '../sdlc/single-report-schema.z';
+import { formatReportTime } from '../utils/formatters';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+import { ZTableSchema, zReport, ZColSchema } from '../types';
+import type {
+  SingleReportSchema,
+  TableSchema,
+} from '../sdlc/single-report-schema';
+import { TableOverview } from '../components/shared/Tables/TableOverview';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+import { TABLE_DETAILS_ROUTE_PATH } from '../utils/routes';
+import { NoData } from '../components/shared/NoData';
+
+interface Props {
+  data: SingleReportSchema;
+  tableName: string;
+}
+
+export default function SRTableDetailsPage({ data, tableName }: Props) {
+  const [, setLocation] = useLocation();
+  const [assertionsVisible, setAssertionsVisible] = useState(false);
+  const [columnsVisible, setColumnsVisible] = useState(false);
+
+  const { datasource, tables } = data;
+  const table = tables[tableName];
+  const isAssertionsEmpty = checkAssertionsIsEmpty(table);
+
+  zReport(ZTableSchema.safeParse(table));
+  zReport(dataSourceSchema.safeParse(datasource));
+
+  useDocumentTitle(tableName);
+
+  if (!data || !tableName) {
+    return (
+      <Main isSingleReport time="-">
+        <NoData text="No profile data found." />
+      </Main>
+    );
+  }
+
+  return (
+    <Main isSingleReport time={formatReportTime(data.created_at)}>
+      <Flex direction="column" width="100%">
+        <BreadcrumbNav routePathToMatch={TABLE_DETAILS_ROUTE_PATH} />
+
+        <Flex
+          border="1px solid"
+          borderColor="gray.300"
+          bg="white"
+          borderRadius="md"
+          p={6}
+          mt={3}
+          mx="5%"
+          direction="column"
+          gap={4}
+        >
+          <TableOverview baseTable={table} />
+
+          <Heading size="md">Assertions</Heading>
+          <CollapseContent
+            in={assertionsVisible}
+            startingHeight={isAssertionsEmpty ? 50 : 250}
+            collapseable={!isAssertionsEmpty}
+            onVisible={() => setAssertionsVisible((visible) => !visible)}
+          >
+            <SRAssertionDetailsWidget
+              assertions={{
+                piperider: table.piperider_assertion_result,
+                dbt: table?.dbt_assertion_result,
+              }}
+            />
+          </CollapseContent>
+
+          <Heading size="md" mt={4}>
+            Columns
+          </Heading>
+          <CollapseContent
+            in={columnsVisible}
+            startingHeight={Object.keys(table.columns).length === 0 ? 50 : 350}
+            collapseable={Object.keys(table.columns).length > 0}
+            onVisible={() => setColumnsVisible((visible) => !visible)}
+          >
+            <Flex direction="row" flexWrap={'wrap'} gap={4}>
+              {Object.keys(table.columns).map((key) => {
+                const column = table.columns[key];
+                zReport(ZColSchema.safeParse(column));
+
+                return (
+                  <ColumnHighlightsCard
+                    key={nanoid()}
+                    columnDatum={column}
+                    onSelect={({ columnName }) =>
+                      setLocation(`/tables/${table.name}/columns/${columnName}`)
+                    }
+                  />
+                );
+              })}
+            </Flex>
+          </CollapseContent>
+        </Flex>
+      </Flex>
+    </Main>
+  );
+}
+
+function checkAssertionsIsEmpty(table: TableSchema) {
+  return (
+    (table.piperider_assertion_result?.tests || []).length === 0 &&
+    Object.keys(table.piperider_assertion_result?.columns || {}).length === 0 &&
+    (table.dbt_assertion_result?.tests || []).length === 0 &&
+    Object.keys(table.dbt_assertion_result?.columns || {}).length === 0
+  );
+}
diff --git a/static_report/src/pages/SRTablesListPage.tsx b/static_report/src/pages/SRTablesListPage.tsx
new file mode 100644
index 000000000..978b6797d
--- /dev/null
+++ b/static_report/src/pages/SRTablesListPage.tsx
@@ -0,0 +1,120 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  Divider,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
+import { nanoid } from 'nanoid';
+import { useLocalStorage } from 'usehooks-ts';
+import { useLocation } from 'wouter';
+
+import { Main } from '../components/shared/Main';
+import {
+  TableActionBar,
+  type TableActionBarView,
+} from '../components/shared/Tables/TableActionBar';
+import { formatReportTime } from '../utils/formatters';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+import { SR_LIST_VIEW } from '../utils/localStorageKeys';
+import { type SingleReportSchema } from '../sdlc/single-report-schema';
+
+import { zReport, ZTableSchema } from '../types';
+import { SRTableListColumnList } from '../components/shared/Tables/TableList/SRTableListItem/SRTableListColumnList';
+import { SRTableListSchemaDetail } from '../components/shared/Tables/TableList/SRTableListItem/SRTableListSchemaDetail';
+import { SRTableListItem } from '../components/shared/Tables/TableList/SRTableListItem';
+import { BreadcrumbNav } from '../components/shared/BreadcrumbNav';
+
+type Props = { data: SingleReportSchema };
+
+export function SRTablesListPage({ data }: Props) {
+  const { created_at, datasource, tables } = data;
+
+  const [, setLocation] = useLocation();
+  const [view, setView] = useLocalStorage<TableActionBarView>(
+    SR_LIST_VIEW,
+    'summary',
+  );
+
+  useDocumentTitle('Report List');
+
+  return (
+    <Main isSingleReport time={formatReportTime(created_at)}>
+      <TableActionBar
+        sourceName={datasource.name}
+        sourceType={datasource.type}
+        currentView={view}
+        toggleView={(nextView) => {
+          setView(nextView);
+        }}
+      >
+        <>
+          <Divider orientation="vertical" mx={3} />
+          <BreadcrumbNav routePathToMatch="/" />
+        </>
+      </TableActionBar>
+
+      <Flex direction="column" width="900px" minHeight="650px">
+        <Grid templateColumns="1fr 2fr 1fr" px={4} my={6}>
+          <Text width="100px">Name</Text>
+          <Text width="">Summary</Text>
+          <Text>Assertions</Text>
+        </Grid>
+        <Accordion allowToggle>
+          {Object.keys(tables).map((key) => {
+            const table = tables[key];
+
+            zReport(ZTableSchema.safeParse(table));
+
+            return (
+              <Flex key={nanoid()}>
+                <AccordionItem>
+                  {({ isExpanded }) => (
+                    <>
+                      {/* Accordion Parent */}
+                      <SRTableListItem
+                        isExpanded={isExpanded}
+                        tableDatum={table}
+                        onSelect={({ tableName }) =>
+                          setLocation(`/tables/${tableName}`)
+                        }
+                      />
+
+                      {/* Accordion Children Types */}
+                      <AccordionPanel bgColor="white">
+                        {view === 'summary' ? (
+                          <Stack gap={6}>
+                            <SRTableListColumnList
+                              table={table}
+                              onSelect={({ tableName, columnName }) =>
+                                setLocation(
+                                  `/tables/${tableName}/columns/${columnName}`,
+                                )
+                              }
+                            />
+                          </Stack>
+                        ) : (
+                          <SRTableListSchemaDetail
+                            table={table}
+                            onSelect={({ tableName, columnName }) =>
+                              setLocation(
+                                `/tables/${tableName}/columns/${columnName}`,
+                              )
+                            }
+                          />
+                        )}
+                      </AccordionPanel>
+                    </>
+                  )}
+                </AccordionItem>
+              </Flex>
+            );
+          })}
+        </Accordion>
+      </Flex>
+    </Main>
+  );
+}
diff --git a/static_report/src/types/index.ts b/static_report/src/types/index.ts
index 3887aa58f..e0a3cfd16 100644
--- a/static_report/src/types/index.ts
+++ b/static_report/src/types/index.ts
@@ -97,3 +97,7 @@ export type Selectable = {
     columnName?: string;
   }) => void;
 };
+
+export type Comparable = {
+  singleOnly?: boolean;
+};
diff --git a/static_report/src/utils/assertion.ts b/static_report/src/utils/assertion.ts
index 428d04594..5081156c0 100644
--- a/static_report/src/utils/assertion.ts
+++ b/static_report/src/utils/assertion.ts
@@ -1,4 +1,5 @@
 import { NO_VALUE } from '../components/shared/Columns/constants';
+import { AssertionTest } from '../sdlc/single-report-schema';
 import {
   dbtAssertionResultSchema,
   pipeRiderAssertionResultSchema,
@@ -12,6 +13,23 @@ import {
   SaferTableSchema,
 } from '../types';
 
+export function getAssertions(assertions: AssertionTest[]) {
+  const total = assertions.length;
+  const failed = assertions.reduce((acc, test) => {
+    if (test.status === 'failed') {
+      acc++;
+    }
+    return acc;
+  }, 0);
+  const passed = total - failed;
+
+  return {
+    total,
+    passed,
+    failed,
+  };
+}
+
 /**
  * Get the report assertions by giving piperider and dbt assertions.
  */
@@ -59,6 +77,7 @@ export function getReportAggregateAssertions(
   return {
     passed,
     failed,
+    total: passed + failed,
   };
 }
 
@@ -105,12 +124,12 @@ export function getSingleAssertionStatusCounts(
 
 export type ComparisonAssertions = {
   data: ComparisonReportSchema;
-  reportName: string;
+  tableName: string;
   type: 'piperider' | 'dbt';
 };
 export function getComparisonAssertions({
   data,
-  reportName,
+  tableName,
   type,
 }: ComparisonAssertions) {
   const targets = {
@@ -118,10 +137,10 @@ export function getComparisonAssertions({
     dbt: 'dbt_assertion_result',
   };
 
-  const baseTables = { type: 'base', tables: data.base.tables[reportName] };
+  const baseTables = { type: 'base', tables: data.base.tables[tableName] };
   const targetTables = {
     type: 'target',
-    tables: data.input.tables[reportName], //legacy 'input' key
+    tables: data.input.tables[tableName], //legacy 'input' key
   };
 
   //Warning: targetTables.tables can be undefined when mismatched
diff --git a/static_report/src/utils/layout.ts b/static_report/src/utils/layout.ts
index 72d002f34..6f7f58aa2 100644
--- a/static_report/src/utils/layout.ts
+++ b/static_report/src/utils/layout.ts
@@ -1,2 +1,5 @@
 export const topNavAndFooterHeightOffset = 65;
-export const mainContentAreaHeight = `calc(100vh - ${topNavAndFooterHeightOffset}px)`;
+export const breadcrumbHeight = 36;
+export const mainContentAreaHeight = `calc(100vh - ${
+  topNavAndFooterHeightOffset + breadcrumbHeight
+}px)`;
diff --git a/static_report/src/utils/routes.ts b/static_report/src/utils/routes.ts
new file mode 100644
index 000000000..d84b501b9
--- /dev/null
+++ b/static_report/src/utils/routes.ts
@@ -0,0 +1,3 @@
+export const TABLE_DETAILS_ROUTE_PATH = '/tables/:tableName';
+export const COLUMN_DETAILS_ROUTE_PATH =
+  '/tables/:tableName/columns/:columnName';


Test patch:
diff --git a/static_report/cypress/e2e/comparison-report.cy.ts b/static_report/cypress/e2e/comparison-report.cy.ts
index dff7efc58..85e23971e 100644
--- a/static_report/cypress/e2e/comparison-report.cy.ts
+++ b/static_report/cypress/e2e/comparison-report.cy.ts
@@ -40,7 +40,8 @@ describe('Comparison Report [table-list-page, table-detail-page]', () => {
       .should('exist');
     navigateBtn.click();
 
-    const backLink = cy.get('[data-cy="cr-report-breadcrumb-back"]');
+    cy.wait(500);
+    const backLink = cy.get('[data-cy="breadcrumb-link"]').first();
     backLink.click();
   });
 
diff --git a/static_report/cypress/e2e/single-report.cy.ts b/static_report/cypress/e2e/single-report.cy.ts
index 73ddbe7e1..0e2e9fdbb 100644
--- a/static_report/cypress/e2e/single-report.cy.ts
+++ b/static_report/cypress/e2e/single-report.cy.ts
@@ -40,7 +40,8 @@ describe('Single Report [table-list-page, table-detail-page]', () => {
       .should('exist');
     navigateBtn.click();
 
-    const backLink = cy.get('[data-cy="sr-report-breadcrumb-back"]');
+    cy.wait(500);
+    const backLink = cy.get('[data-cy="breadcrumb-link"]').first();
     backLink.click();
   });