diff --git a/frontend/packages/@depmap/api/src/legacyPortalAPI/index.ts b/frontend/packages/@depmap/api/src/legacyPortalAPI/index.ts
index f34ba2a9d..058e3b6e8 100644
--- a/frontend/packages/@depmap/api/src/legacyPortalAPI/index.ts
+++ b/frontend/packages/@depmap/api/src/legacyPortalAPI/index.ts
@@ -7,6 +7,7 @@ import * as data_page from "./resources/data_page";
 import * as download from "./resources/download";
 import * as entity_summary from "./resources/entity_summary";
 import * as genetea from "./resources/genetea";
+import * as experimental_genetea from "./resources/experimental_genetea";
 import * as interactive from "./resources/interactive";
 import * as tda from "./resources/tda";
 import * as misc from "./resources/misc";
@@ -24,6 +25,7 @@ export const legacyPortalAPI = {
   ...interactive,
   ...tda,
   ...misc,
+  ...experimental_genetea,
 };
 
 type Api = typeof legacyPortalAPI;
diff --git a/frontend/packages/@depmap/api/src/legacyPortalAPI/resources/experimental_genetea.ts b/frontend/packages/@depmap/api/src/legacyPortalAPI/resources/experimental_genetea.ts
new file mode 100644
index 000000000..fb892c15b
--- /dev/null
+++ b/frontend/packages/@depmap/api/src/legacyPortalAPI/resources/experimental_genetea.ts
@@ -0,0 +1,277 @@
+import qs from "qs";
+import { enabledFeatures } from "@depmap/globals";
+import { getJson } from "../client";
+import { GeneTeaEnrichedTerms } from "@depmap/types/src/experimental_genetea";
+
+// ❌ ❌ ❌  WARNING: THIS IS EXPERIMENTAL AND WILL LIKELY CHANGE ❌ ❌ ❌
+// DO NOT USE THIS FOR ANYTHING OTHER THAN THE NEW GENETEA TEA PARTY PAGE!!!!!
+
+// Do not use in production! For local development only.
+const toCorsProxyUrl = (geneTeaUrl: string, params: object) => {
+  const query = qs.stringify(params, { arrayFormat: "repeat" });
+  const url = `https://cds.team/${geneTeaUrl}/?${query}`;
+  return "https://corsproxy.io/?" + encodeURIComponent(url);
+};
+
+export async function fetchGeneTeaEnrichmentExperimental(
+  plotSelections: string[] | null,
+  genes: string[],
+  doGroupTerms: boolean,
+  sortBy: "Significance" | "Effect Size",
+  maxFDR: number,
+  maxTopTerms: number | null,
+  maxMatchingOverall: number | null,
+  minMatchingQuery: number
+  // effectSizeThreshold: number,
+): Promise<GeneTeaEnrichedTerms> {
+  if (!enabledFeatures.gene_tea) {
+    throw new Error("GeneTea is not supported in this environment!");
+  }
+
+  const geneTeaUrl = "genetea-api/enriched-terms-v2";
+
+  let params: any = {
+    gene_list: genes,
+    group_terms: doGroupTerms,
+    include_plotting_payload: "true",
+    sort_by: sortBy,
+    max_fdr: maxFDR,
+    min_genes: minMatchingQuery || -1,
+    max_n_genes: maxMatchingOverall,
+    n: plotSelections?.length === 0 ? maxTopTerms || -1 : -1,
+  };
+
+  if (plotSelections) {
+    params = { ...params, plot_selections: plotSelections };
+  }
+  console.log("For Sanity Checking", params);
+
+  interface RawResponse {
+    // TODO: Give the user feedback when some genes are invalid.
+    valid_genes: string[];
+    invalid_genes: string[];
+    total_n_enriched_terms: number;
+    total_n_term_groups: number;
+    enriched_terms: {
+      Term: string[];
+      "Matching Genes in List": string[];
+      "n Matching Genes Overall": number[];
+      "n Matching Genes in List": number[];
+      "p-val": number[];
+      FDR: number[];
+      Stopword: boolean[];
+      Synonyms: (string | null)[];
+      "Total Info": number[];
+      "Effect Size": number[];
+      "Term Group": string[];
+      "-log10 FDR": number[];
+      "Clipped Term": string[];
+      "Clipped Synonyms": (string | null)[];
+      "Clipped Matching Genes in List": string[];
+    };
+    plotting_payload: {
+      groupby: "Term" | "Term Group";
+      term_cluster: {
+        Term: string[] | null[];
+        "Term Group": string[] | null[];
+        Cluster: number[];
+        Order: number[];
+      };
+      gene_cluster: {
+        Gene: string[];
+        Cluster: number[];
+        Order: number[];
+      };
+      term_to_entity: any; // TODO update this type
+      frequent_terms: {
+        Term: string[];
+        "Matching Genes in List": string[];
+        "n Matching Genes Overall": number[];
+        "n Matching Genes in List": number[];
+        "p-val": number[];
+        FDR: number[];
+        Stopword: boolean[];
+        Synonyms: (string | null)[];
+        "Total Info": number[];
+        "Effect Size": number[];
+      };
+      all_enriched_terms: {
+        Term: string[];
+        "Matching Genes in List": string[];
+        "n Matching Genes Overall": number[];
+        "n Matching Genes in List": number[];
+        "p-val": number[];
+        FDR: number[];
+        Stopword: boolean[];
+        Synonyms: (string | null)[];
+        "Total Info": number[];
+        "Effect Size": number[];
+        "Term Group": string[];
+      };
+    };
+  }
+
+  const body =
+    process.env.NODE_ENV === "development"
+      ? await getJson<RawResponse>(
+          toCorsProxyUrl(geneTeaUrl, params),
+          undefined,
+          { credentials: "omit" }
+        )
+      : await getJson<RawResponse>(`/../../${geneTeaUrl}/`, params);
+
+  // `enriched_terms` can be null when there are no relevant terms. We'll
+  // return a wrapper object to distinguish this from some kind of error.
+  if (body.enriched_terms === null) {
+    return {
+      groupby: "Term",
+      validGenes: [],
+      invalidGenes: [],
+      enrichedTerms: null,
+      totalNEnrichedTerms: 0,
+      totalNTermGroups: 0,
+      termCluster: null,
+      geneCluster: null,
+      termToEntity: null,
+      frequentTerms: null,
+      allEnrichedTerms: null,
+    };
+  }
+
+  const plottingPayload = body.plotting_payload;
+  const allEt = plottingPayload.all_enriched_terms;
+  const et = body.enriched_terms;
+  const enrichedTerms = {
+    term: et.Term,
+    fdr: et.FDR,
+    totalEnrichedTerms: body.total_n_enriched_terms,
+    totalTermGroups: body.total_n_term_groups,
+    synonyms: et.Synonyms.map((list) => list?.split(";") || []),
+    matchingGenesInList: et["Matching Genes in List"],
+    nMatchingGenesInList: et["n Matching Genes in List"],
+    nMatchingGenesOverall: et["n Matching Genes Overall"],
+    termGroup: et["Term Group"],
+    effectSize: et["Effect Size"],
+    pVal: et["p-val"],
+    stopword: et.Stopword,
+    totalInfo: et["Total Info"],
+    negLogFDR: et["-log10 FDR"],
+    clippedTerm: et["Clipped Term"],
+    clippedSynonyms: et["Clipped Synonyms"].map(
+      (list) => list?.split(";") || []
+    ),
+    clippedMatchingGenesInList: et["Clipped Matching Genes in List"],
+  };
+  const allEnrichedTerms = {
+    term: allEt.Term,
+    fdr: allEt.FDR,
+    synonyms: allEt.Synonyms.map((list) => list?.split(";") || []),
+    matchingGenesInList: allEt["Matching Genes in List"],
+    nMatchingGenesInList: allEt["n Matching Genes in List"],
+    nMatchingGenesOverall: allEt["n Matching Genes Overall"],
+    termGroup: allEt["Term Group"],
+    effectSize: allEt["Effect Size"],
+    pVal: allEt["p-val"],
+    stopword: allEt.Stopword,
+    totalInfo: et["Total Info"],
+  };
+
+  const termClusterTermOrGroup = doGroupTerms
+    ? plottingPayload.term_cluster["Term Group"]
+    : plottingPayload.term_cluster.Term;
+
+  const termCluster = {
+    termOrTermGroup: termClusterTermOrGroup as string[],
+    cluster: plottingPayload.term_cluster.Cluster,
+    order: plottingPayload.term_cluster.Order,
+  };
+
+  const geneCluster = {
+    gene: plottingPayload.gene_cluster.Gene,
+    cluster: plottingPayload.gene_cluster.Cluster,
+    order: plottingPayload.gene_cluster.Order,
+  };
+
+  const termToEntity = {
+    termOrTermGroup: doGroupTerms
+      ? (plottingPayload.term_to_entity["Term Group"] as string[])
+      : (plottingPayload.term_to_entity.Term as string[]),
+    gene: plottingPayload.term_to_entity.Gene,
+    count: plottingPayload.term_to_entity.Count,
+    nTerms: plottingPayload.term_to_entity["n Terms"],
+    fraction: plottingPayload.term_to_entity.Fraction,
+  };
+
+  const frequentTerms = {
+    term: plottingPayload.frequent_terms.Term,
+    matchingGenesInList:
+      plottingPayload.frequent_terms["Matching Genes in List"],
+    nMatchingGenesOverall:
+      plottingPayload.frequent_terms["n Matching Genes Overall"],
+    nMatchingGenesInList:
+      plottingPayload.frequent_terms["n Matching Genes in List"],
+    pVal: plottingPayload.frequent_terms["p-val"],
+    fdr: plottingPayload.frequent_terms.FDR,
+    stopword: plottingPayload.frequent_terms.Stopword,
+    synonyms: plottingPayload.frequent_terms.Synonyms.map(
+      (list) => list?.split(";") || []
+    ),
+    totalInfo: plottingPayload.frequent_terms["Total Info"],
+    effectSize: plottingPayload.frequent_terms["Effect Size"],
+  };
+
+  return {
+    validGenes: body.valid_genes,
+    invalidGenes: body.invalid_genes,
+    totalNEnrichedTerms: body.total_n_enriched_terms,
+    totalNTermGroups: body.total_n_term_groups,
+    groupby: plottingPayload.groupby,
+    enrichedTerms,
+    termCluster,
+    geneCluster,
+    termToEntity,
+    frequentTerms,
+    allEnrichedTerms,
+  };
+}
+
+export async function fetchGeneTeaTermContextExperimental(
+  term: string,
+  genes: string[]
+): Promise<Record<string, string>> {
+  if (!enabledFeatures.gene_tea) {
+    throw new Error("GeneTea is not supported in this environment!");
+  }
+
+  const geneTeaUrl = "genetea-api/context";
+
+  const params = {
+    term,
+    gene_list: genes,
+    html: true,
+  };
+
+  type RawResponse =
+    | {
+        valid_genes: string[];
+        invalid_genes: string[];
+        remapped_genes: Record<string, string>;
+        context: Record<string, string>;
+      }
+    | { message: string }; // error message
+
+  const body =
+    process.env.NODE_ENV === "development"
+      ? await getJson<RawResponse>(
+          toCorsProxyUrl(geneTeaUrl, params),
+          undefined,
+          { credentials: "omit" }
+        )
+      : await getJson<RawResponse>(`/../../${geneTeaUrl}/`, params);
+
+  if ("message" in body) {
+    throw new Error(body.message);
+  }
+
+  return body.context;
+}
diff --git a/frontend/packages/@depmap/types/src/experimental_genetea.ts b/frontend/packages/@depmap/types/src/experimental_genetea.ts
new file mode 100644
index 000000000..6e722fccd
--- /dev/null
+++ b/frontend/packages/@depmap/types/src/experimental_genetea.ts
@@ -0,0 +1,83 @@
+export interface GeneTeaTableRow {
+  term: string;
+  termGroup: string;
+  synonyms: string;
+  matchingGenesInList: string;
+  nMatchingGenesOverall: number;
+  nMatchingGenesInList: number;
+  fdr: number;
+  effectSize: number;
+}
+
+type GeneSymbol = string;
+type FractionMatching = number | null;
+type TermOrTermGroup = string;
+
+export interface HeatmapFormattedData {
+  x: GeneSymbol[];
+  y: TermOrTermGroup[];
+  z: FractionMatching[];
+  customdata: string[]; // For hover text
+}
+
+export interface BarChartFormattedData {
+  x: number[];
+  y: TermOrTermGroup[];
+  customdata: string[]; // For hover text
+}
+
+export interface TermCluster {
+  termOrTermGroup: string[];
+  cluster: number[];
+  order: number[];
+}
+
+export interface GeneCluster {
+  gene: string[];
+  cluster: number[];
+  order: number[];
+}
+
+export interface TermToEntity {
+  termOrTermGroup: string[];
+  gene: string[];
+  count: number[];
+  nTerms: number[];
+  fraction: number[];
+}
+
+export interface FrequentTerms {
+  term: string[];
+  matchingGenesInList: string[];
+  nMatchingGenesOverall: number[];
+  nMatchingGenesInList: number[];
+  pVal: number[];
+  fdr: number[];
+  stopword: boolean[];
+  synonyms: string[][];
+  totalInfo: number[];
+  effectSize: number[];
+}
+
+export interface AllEnrichedTerms extends FrequentTerms {
+  termGroup: string[];
+}
+
+export interface EnrichedTerms extends AllEnrichedTerms {
+  negLogFDR: number[];
+  clippedTerm: string[];
+}
+
+export interface GeneTeaEnrichedTerms {
+  validGenes: string[];
+  invalidGenes: string[];
+  totalNEnrichedTerms: number;
+  totalNTermGroups: number;
+  groupby: "Term" | "Term Group";
+  enrichedTerms: EnrichedTerms | null;
+  termCluster: TermCluster | null;
+  geneCluster: GeneCluster | null;
+  termToEntity: TermToEntity | null;
+  frequentTerms: FrequentTerms | null;
+  allEnrichedTerms: AllEnrichedTerms | null;
+}
diff --git a/frontend/packages/@depmap/wide-table/src/WideTable.tsx b/frontend/packages/@depmap/wide-table/src/WideTable.tsx
index 302138e56..9af7c167d 100644
--- a/frontend/packages/@depmap/wide-table/src/WideTable.tsx
+++ b/frontend/packages/@depmap/wide-table/src/WideTable.tsx
@@ -82,9 +82,11 @@ export interface WideTableColumns {
 export interface WideTableProps {
   /**
    * array of objects, all data for the table (will be what ends up downloaded if
-   * allowDownloadFromTableData is set to true and the user clicks "download table")
+   * allowDownloadFromTableData is set to true, prefferedTableDataForDownload is undefined
+   *  and the user clicks "download table")
    */
   data: any[];
+  prefferedTableDataForDownload?: any[]; // If set, use this for the download table instead of "data"
   columns: Array<WideTableColumns & Partial<Column>>; // refer to the react-table docs for structure
   invisibleColumns?: Array<number>;
 
@@ -864,7 +866,8 @@ class WideTable extends React.Component<WideTableProps, WideTableState> {
     const dropdownColumnHideShowMenu = this.renderShowHideMenu();
     let downloadButton = null;
     let numberOfRows = null;
-    const dataToDownload = this.props.data;
+    const dataToDownload =
+      this.props.prefferedTableDataForDownload || this.props.data;
     if (this.props.downloadURL) {
       downloadButton = (
         <Button
@@ -906,7 +909,7 @@ class WideTable extends React.Component<WideTableProps, WideTableState> {
       );
 
       const getData = () => {
-        return this.props.data;
+        return this.props.prefferedTableDataForDownload || this.props.data;
       };
 
       downloadButton = (
diff --git a/frontend/packages/portal-frontend/src/apps/geneTea.tsx b/frontend/packages/portal-frontend/src/apps/geneTea.tsx
new file mode 100644
index 000000000..d2dd3a9f9
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/apps/geneTea.tsx
@@ -0,0 +1,22 @@
+import "src/public-path";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ErrorBoundary from "src/common/components/ErrorBoundary";
+import "react-bootstrap-typeahead/css/Typeahead.css";
+import "src/common/styles/typeahead_fix.scss";
+import GeneTea from "src/geneTea/components/GeneTea";
+import { GeneTeaContextProvider } from "src/geneTea/context/GeneTeaContext";
+
+const container = document.getElementById("react-gene-tea");
+
+const App = () => {
+  return (
+    <ErrorBoundary>
+      <GeneTeaContextProvider>
+        <GeneTea />
+      </GeneTeaContextProvider>
+    </ErrorBoundary>
+  );
+};
+
+ReactDOM.render(<App />, container);
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/GeneTea.tsx b/frontend/packages/portal-frontend/src/geneTea/components/GeneTea.tsx
new file mode 100644
index 000000000..3469b9260
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/GeneTea.tsx
@@ -0,0 +1,86 @@
+import React, { useEffect } from "react";
+import GeneTeaMainContent from "./GeneTeaMainContent";
+import { TabsWithHistory } from "src/common/components/tabs/TabsWithHistory";
+import { Tab, TabList, TabPanel, TabPanels } from "src/common/components/tabs";
+import "react-bootstrap-typeahead/css/Typeahead.css";
+import "src/common/styles/typeahead_fix.scss";
+import styles from "../styles/GeneTea.scss";
+import SearchOptionsContainer from "./SearchOptionsContainer";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+import { breadboxAPI } from "@depmap/api";
+import { fetchMetadata } from "../utils";
+
+function GeneTea() {
+  const { handleSetAllAvailableGenes } = useGeneTeaContext();
+  useEffect(() => {
+    (async () => {
+      const geneMetadata = await fetchMetadata<any>(
+        "gene",
+        null,
+        ["label"],
+        breadboxAPI,
+        "id"
+      );
+
+      handleSetAllAvailableGenes(new Set(Object.values(geneMetadata.label)));
+    })();
+  }, [handleSetAllAvailableGenes]);
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <h1>
+          Tea Party{" "}
+          <span style={{ fontSize: "14px", color: "#b00020" }}>
+            (Under Development)
+          </span>
+        </h1>
+        <p>
+          GeneTEA (Gene-Term Enrichment Analysis) is a model that takes in
+          free-text gene descriptions and incorporates several natural language
+          processing methods to learn a sparse gene-by-term embedding, which can
+          be treated as a de novo gene set database.
+        </p>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.geneTeaTabLayout}>
+          <div className={styles.geneTeaFilters}>
+            <SearchOptionsContainer />
+          </div>
+          <div className={styles.geneTeaTabsWrapper}>
+            <TabsWithHistory
+              className={styles.Tabs}
+              onChange={() => {
+                /* add something later */
+              }}
+              onSetInitialIndex={() => {
+                /* add something later */
+              }}
+              isManual
+              isLazy
+            >
+              <TabList className={styles.TabList}>
+                <Tab id="top-tea-terms" className={styles.Tab}>
+                  Top Tea Terms
+                </Tab>
+                <Tab id="all-matching-terms" className={styles.Tab}>
+                  All Matching Terms
+                </Tab>
+              </TabList>
+              <TabPanels className={styles.TabPanels}>
+                <TabPanel className={styles.TabPanel}>
+                  <GeneTeaMainContent tab="top-tea-terms" />
+                </TabPanel>
+                <TabPanel className={styles.TabPanel}>
+                  <GeneTeaMainContent tab="all-matching-terms" />
+                </TabPanel>
+              </TabPanels>
+            </TabsWithHistory>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default GeneTea;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaMainContent.tsx b/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaMainContent.tsx
new file mode 100644
index 000000000..fc885e0e0
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaMainContent.tsx
@@ -0,0 +1,206 @@
+import React, { useMemo, useState } from "react";
+import styles from "../styles/GeneTea.scss";
+import GeneTeaTable from "./GeneTeaTable";
+import PlotSelections from "./PlotSelections";
+import PlotSection from "./PlotSection";
+import ExtendedPlotType from "src/plot/models/ExtendedPlotType";
+import { groupStringsByCondition, tableColumns } from "../utils";
+import useData from "../hooks/useData";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+
+interface GeneTeaMainContentProps {
+  tab: "top-tea-terms" | "all-matching-terms";
+}
+
+function GeneTeaMainContent({ tab }: GeneTeaMainContentProps) {
+  const {
+    geneSymbolSelections,
+    doGroupTerms,
+    doClusterGenes,
+    doClusterTerms,
+    sortBy,
+    maxTopTerms,
+    maxFDR,
+    maxMatchingOverall,
+    minMatchingQuery,
+    effectSizeThreshold,
+    selectedTableRows,
+    selectedPlotGenes,
+    handleSetValidGeneSymbols,
+    handleSetInValidGeneSymbols,
+    handleSetSelectedTableRows,
+    handleClickSavePlotSelectionAsContext,
+    handleClearPlotSelection,
+    handleSetIsLoading,
+    isLoading,
+    error,
+    handleSetError,
+    handleSetErrorMessage,
+  } = useGeneTeaContext();
+
+  const plotSelections = useMemo(
+    () => (selectedTableRows.size > 0 ? selectedTableRows : new Set([])),
+    [selectedTableRows]
+  );
+
+  // HACK: GeneTEA returns an error if any searchTerm is less
+  // than 2 characters long. Instead of erroring completely,
+  // we want to treat these search terms the same as any other invalid
+  //  term (i.e. ["SOX10", "KRAS", "NRAS", "NOT_A_GENE"] will still
+  // return a response with invalid_genes = ["NOT_A_GENE"], so ["SOX10", "KRAS", "NRAS", "A"]
+  // will still return a response with invalid_genes = ["A"]). Separate
+  // our definitely invalid less than 2 characters out from the possiblyValidTerms
+  // before sending a request to GeneTEA.
+  const [specialCaseInvalidGenes, possiblyValidGenes] = useMemo(
+    () =>
+      groupStringsByCondition(
+        Array.from(geneSymbolSelections),
+        (term) => term.length < 2
+      ),
+    [geneSymbolSelections]
+  );
+
+  const { rawData, heatmapData, barChartData, heatmapXAxisLabel } = useData(
+    plotSelections,
+    specialCaseInvalidGenes,
+    possiblyValidGenes,
+    doGroupTerms,
+    doClusterGenes,
+    doClusterTerms,
+    sortBy,
+    maxFDR,
+    maxTopTerms,
+    maxMatchingOverall,
+    minMatchingQuery,
+    effectSizeThreshold,
+    handleSetInValidGeneSymbols,
+    handleSetValidGeneSymbols,
+    handleSetIsLoading,
+    handleSetError,
+    handleSetErrorMessage
+  );
+
+  const [plotElement, setPlotElement] = useState<ExtendedPlotType | null>(null);
+
+  // Get the table data and prefferedTableDataForDownload. Combined in this useMemo so we don't
+  // have to iterate through allEnrichedTerms twice. The only difference is that the tableData is
+  // rounded, while the prefferedTableDataForDownload is NOT rounded.
+  const roundedAndUnroundedTableData = useMemo(() => {
+    // TODO give these a real type
+    const roundedData: any = [];
+    const unroundedData: any = [];
+    if (rawData?.allEnrichedTerms) {
+      rawData.allEnrichedTerms.term.forEach((term, index) => {
+        roundedData.push({
+          term,
+          termGroup: rawData.allEnrichedTerms!.termGroup[index],
+          synonyms: rawData.allEnrichedTerms!.synonyms[index].join(";"),
+          matchingGenesInList: rawData.allEnrichedTerms!.matchingGenesInList[
+            index
+          ],
+          nMatchingGenesOverall: rawData.allEnrichedTerms!
+            .nMatchingGenesOverall[index],
+          nMatchingGenesInList: rawData.allEnrichedTerms!.nMatchingGenesInList[
+            index
+          ],
+          fdr: rawData.allEnrichedTerms!.fdr[index].toExponential(5),
+          effectSize: rawData.allEnrichedTerms!.effectSize[index].toFixed(4),
+        });
+        unroundedData.push({
+          term,
+          termGroup: rawData.allEnrichedTerms!.termGroup[index],
+          synonyms: rawData.allEnrichedTerms!.synonyms[index].join(";"),
+          matchingGenesInList: rawData.allEnrichedTerms!.matchingGenesInList[
+            index
+          ],
+          nMatchingGenesOverall: rawData.allEnrichedTerms!
+            .nMatchingGenesOverall[index],
+          nMatchingGenesInList: rawData.allEnrichedTerms!.nMatchingGenesInList[
+            index
+          ],
+          fdr: rawData.allEnrichedTerms!.fdr[index].toExponential(),
+          effectSize: rawData.allEnrichedTerms!.effectSize[index],
+        });
+      });
+    }
+    return { roundedData, unroundedData };
+  }, [rawData]);
+
+  if (tab === "all-matching-terms") {
+    return (
+      <div style={{ padding: "25px" }}>
+        <h2>Coming soon!</h2>
+      </div>
+    );
+  }
+  // Default: Top Tea Terms main content
+  return (
+    <div className={styles.mainContentContainer}>
+      <div className={styles.mainContentHeader}>
+        <h3 className={styles.mainContentHeaderTitle}>
+          Top {maxTopTerms} Tea {doGroupTerms ? "Term Groups" : "Terms"}
+        </h3>
+      </div>
+      {!isLoading && error ? (
+        <div className={styles.errorMessage}>Error loading plot data.</div>
+      ) : (
+        <div>
+          <div className={styles.mainContentGrid}>
+            <div className={styles.plotArea}>
+              <PlotSection
+                isLoading={isLoading}
+                plotElement={plotElement}
+                heatmapFormattedData={heatmapData}
+                barChartData={barChartData}
+                handleSetPlotElement={setPlotElement}
+                heatmapXAxisLabel={heatmapXAxisLabel}
+              />
+            </div>
+            <div className={styles.selectionsArea}>
+              <PlotSelections
+                isPlotDataVisible={!isLoading && heatmapData.z.length > 0}
+                selectedIds={new Set(selectedPlotGenes)}
+                selectedLabels={new Set(selectedPlotGenes)}
+                onClickSaveSelectionAsContext={
+                  handleClickSavePlotSelectionAsContext
+                }
+                onClickClearSelection={handleClearPlotSelection}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+      <hr className={styles.mainContentHr} />
+      <div className={styles.mainContentTableHeader}>
+        <h3 className={styles.mainContentTableHeaderTitle}>
+          Enrichment Term Table
+        </h3>
+        <p>Terms selected in the plot will appear checked in this table.</p>
+      </div>
+
+      {rawData && rawData.allEnrichedTerms && rawData.enrichedTerms && (
+        <GeneTeaTable
+          error={error}
+          isLoading={isLoading}
+          tableData={roundedAndUnroundedTableData.roundedData}
+          prefferedTableDataForDownload={
+            roundedAndUnroundedTableData.unroundedData
+          }
+          tableColumns={tableColumns}
+          columnOrdering={tableColumns.map((col) => col.accessor)}
+          defaultCols={tableColumns.map((col) => col.accessor)}
+          selectedTableRows={
+            selectedTableRows.size > 0
+              ? selectedTableRows
+              : new Set(rawData.enrichedTerms?.term)
+          }
+          handleChangeSelection={(selections: string[]) =>
+            handleSetSelectedTableRows(new Set(selections))
+          }
+        />
+      )}
+    </div>
+  );
+}
+
+export default GeneTeaMainContent;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaTable.tsx b/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaTable.tsx
new file mode 100644
index 000000000..b5b6b0f37
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/GeneTeaTable.tsx
@@ -0,0 +1,64 @@
+import styles from "../styles/GeneTea.scss";
+import React from "react";
+import WideTable from "@depmap/wide-table";
+import PlotSpinner from "src/plot/components/PlotSpinner";
+
+interface GeneTeaTableProps {
+  error: boolean;
+  isLoading: boolean;
+  tableData: any;
+  prefferedTableDataForDownload: any;
+  tableColumns: any[];
+  columnOrdering: string[];
+  defaultCols: string[];
+  selectedTableRows: Set<string>;
+  handleChangeSelection: (selections: string[]) => void;
+}
+
+const GeneTeaTable: React.FC<GeneTeaTableProps> = ({
+  error,
+  isLoading,
+  tableData,
+  prefferedTableDataForDownload,
+  tableColumns,
+  columnOrdering,
+  defaultCols,
+  selectedTableRows,
+  handleChangeSelection,
+}) => {
+  let tableContent;
+  if (error) {
+    tableContent = (
+      <div className={styles.errorMessage}>Error loading table data.</div>
+    );
+  } else if (isLoading) {
+    tableContent = (
+      <div className={styles.tableSpinnerContainer}>
+        <PlotSpinner />
+      </div>
+    );
+  } else {
+    tableContent = (
+      <div>
+        <WideTable
+          idProp="term"
+          rowHeight={28}
+          data={tableData || []}
+          prefferedTableDataForDownload={prefferedTableDataForDownload || []}
+          fixedHeight={500}
+          columns={tableColumns}
+          columnOrdering={columnOrdering}
+          defaultColumnsToShow={defaultCols}
+          selectedTableLabels={selectedTableRows}
+          onChangeSelections={handleChangeSelection}
+          hideSelectAllCheckbox
+          allowDownloadFromTableDataWithMenu
+          allowDownloadFromTableDataWithMenuFileName="gene-tea-data.csv"
+        />
+      </div>
+    );
+  }
+  return <>{tableContent}</>;
+};
+
+export default GeneTeaTable;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/LoadFromGeneContextSection.tsx b/frontend/packages/portal-frontend/src/geneTea/components/LoadFromGeneContextSection.tsx
new file mode 100644
index 000000000..fdb1e6494
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/LoadFromGeneContextSection.tsx
@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from "react";
+import {
+  ContextSelector,
+  deprecatedDataExplorerAPI,
+  getDimensionTypeLabel,
+  pluralize,
+} from "@depmap/data-explorer-2";
+import { DepMap } from "@depmap/globals";
+import { DataExplorerContext } from "@depmap/types";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+
+const LoadFromGeneContextSection: React.FC = () => {
+  const {
+    handleSetGeneSymbolSelections,
+    handleSetValidGeneSymbols,
+    handleSetInValidGeneSymbols,
+    allAvailableGenes,
+    geneSymbolSelections,
+  } = useGeneTeaContext();
+
+  const indexType = "gene";
+
+  const [value, setValue] = useState<DataExplorerContext | null>(null);
+
+  const [stats, setStats] = useState<{
+    total: number;
+    notFound: number;
+    hiddenByFilters: number;
+  } | null>(null);
+
+  const numberedEntities = (n: number) => {
+    const entity = getDimensionTypeLabel(indexType);
+    const entities = pluralize(entity);
+
+    return [n.toLocaleString(), n === 1 ? entity : entities].join(" ");
+  };
+
+  const handleChange = async (nextContext: DataExplorerContext | null) => {
+    // If the context is changing, the gene list sent to GeneTEA is changing. Clear out the Valid
+    // and Invalid gene sets in preparation to receive a new valid/invalid list from the GeneTEA api.
+    handleSetValidGeneSymbols(new Set([]));
+    handleSetInValidGeneSymbols(new Set([]));
+    setValue(nextContext);
+
+    if (!nextContext) {
+      setStats(null);
+      handleSetGeneSymbolSelections([]);
+
+      return;
+    }
+
+    const labels = await deprecatedDataExplorerAPI.evaluateLegacyContext(
+      nextContext
+    );
+    const contextLabels = new Set(labels);
+
+    handleSetGeneSymbolSelections(contextLabels);
+
+    const found = [...allAvailableGenes].filter((label) => {
+      return contextLabels.has(label);
+    }).length;
+
+    const notFound = contextLabels.size - found;
+
+    setStats({
+      total: contextLabels.size,
+      notFound,
+      hiddenByFilters: 0,
+    });
+  };
+
+  useEffect(() => {
+    if (geneSymbolSelections.size === 0 && value !== null) {
+      setValue(null);
+      setStats(null);
+    }
+  }, [geneSymbolSelections, value]);
+
+  return (
+    <div>
+      <ContextSelector
+        show
+        enable
+        value={value}
+        onChange={handleChange}
+        onClickCreateContext={() => {
+          DepMap.saveNewContext(
+            { context_type: indexType },
+            null,
+            handleChange
+          );
+        }}
+        context_type={indexType}
+        onClickSaveAsContext={() => {}}
+        includeAllInOptions={false}
+      />
+      {stats && (
+        <div style={{ marginTop: 15 }}>
+          <div>
+            This context contains a total of {numberedEntities(stats.total)}.
+          </div>
+          <br />
+          {Boolean(stats.notFound) && (
+            <div>
+              {numberedEntities(stats.notFound)}{" "}
+              {stats.notFound === 1 ? "is" : "are"} not found in the selected
+              dataset(s).
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LoadFromGeneContextSection;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/MultiSelectTextArea.tsx b/frontend/packages/portal-frontend/src/geneTea/components/MultiSelectTextArea.tsx
new file mode 100644
index 000000000..c7977f3b3
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/MultiSelectTextArea.tsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "react-bootstrap";
+import styles from "../styles/MultiSelectTextArea.scss";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+import { MAX_GENES_ALLOWED } from "../types";
+
+// TODO move to utils
+function removeLineBreaks(text: string): string {
+  // The regular expression /(\r\n|\n|\r)/g matches all occurrences of:
+  // - \r\n (carriage return followed by newline, common on Windows)
+  // - \n (newline, common on Unix/Linux/macOS)
+  // - \r (carriage return, less common but still possible)
+  // The 'g' flag ensures that all occurrences are replaced, not just the first one.
+  return text.replace(/(\r\n|\n|\r)/g, "");
+}
+
+const MultiSelectTextarea: React.FC = () => {
+  const {
+    geneSymbolSelections,
+    handleSetGeneSymbolSelections,
+    validGeneSymbols,
+    handleSetValidGeneSymbols,
+    inValidGeneSymbols,
+    handleSetInValidGeneSymbols,
+    selectedPlotGenes,
+    handleSetPlotSelectedGenes,
+    handleClearPlotSelection,
+    handleClearSelectedTableRows,
+    handleSetError,
+    error,
+    errorMessage,
+  } = useGeneTeaContext();
+
+  const [inputValue, setInputValue] = useState("");
+
+  const handleInputChange = (e: any) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleKeyDown = (e: any) => {
+    if (e.key === "Enter" && inputValue.trim() !== "") {
+      e.preventDefault(); // Prevent newline in textarea
+
+      const newItems = removeLineBreaks(inputValue)
+        .split(/[, ]+/)
+        .filter((item) => item.trim() !== "");
+      handleSetGeneSymbolSelections(
+        (prevChips: Set<string>) => new Set([...prevChips, ...newItems])
+      ); // Add only unique items
+      setInputValue(""); // Clear input
+    } else if (e.key === "Enter" && inputValue.trim() === "") {
+      e.preventDefault();
+    }
+  };
+
+  const handleRemoveChip = (chipToRemove: string) => {
+    handleSetGeneSymbolSelections((prevChips: Set<string>) => {
+      const newGeneSymbolSelections = new Set(
+        [...prevChips].filter((chip) => chip !== chipToRemove)
+      );
+      return newGeneSymbolSelections;
+    });
+
+    // Update Plot Selections panel in case a selected plot gene is no longer valid.
+    if (selectedPlotGenes.has(chipToRemove)) {
+      const newSelections = [...selectedPlotGenes].filter(
+        (geneSymbol) => geneSymbol !== chipToRemove
+      );
+      handleSetPlotSelectedGenes(new Set(newSelections), false);
+    }
+  };
+
+  const targetRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    // Scroll to the element once the component mounts or the `items` change.
+    if (targetRef.current) {
+      targetRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [inputValue]); // Re-run the effect if the items array changes.
+
+  return (
+    <div className={styles.multiSelectTextareaContainer}>
+      <h4 className={styles.sectionTitle}>Enter Gene Symbols</h4>
+      {geneSymbolSelections.size < 3 && (
+        <h5 className={styles.sectionSubTitle}>
+          Please enter between 3 and 1000 gene symbols.
+        </h5>
+      )}
+      <div
+        className={styles.multiSelectTextareaBorder}
+        style={{
+          border:
+            geneSymbolSelections.size > MAX_GENES_ALLOWED
+              ? "2px solid #b00020"
+              : "1px solid #ccc",
+        }}
+      >
+        <div className={styles.chipList}>
+          {[...geneSymbolSelections].map((chip, index) => {
+            let chipClass = styles.chip;
+            if (inValidGeneSymbols && inValidGeneSymbols.has(chip)) {
+              chipClass += " " + styles.chipInvalid;
+            } else if (validGeneSymbols && validGeneSymbols.has(chip)) {
+              chipClass += " " + styles.chipValid;
+            }
+            return (
+              <span className={chipClass} key={index}>
+                {chip}
+                <button
+                  type="button"
+                  className={styles.chipRemoveButton}
+                  onClick={() => handleRemoveChip(chip)}
+                >
+                  x
+                </button>
+              </span>
+            );
+          })}
+        </div>
+        <textarea
+          ref={targetRef}
+          className={styles.multiSelectTextarea}
+          style={{
+            border: "none",
+            resize: "none",
+            width: "100%",
+            height: "100%",
+            scrollMargin: 80,
+          }}
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            geneSymbolSelections.size === 0
+              ? "Enter gene symbols, separated by commas or spaces, then press Enter"
+              : undefined
+          }
+          rows={2}
+        />
+      </div>
+      {geneSymbolSelections.size <= MAX_GENES_ALLOWED &&
+        validGeneSymbols.size > 0 && (
+          <div className={styles.validGenesLegend}>
+            <span className={styles.validGenesSwatch} />
+            <span>= valid genes ({validGeneSymbols.size})</span>
+          </div>
+        )}
+      {geneSymbolSelections.size <= MAX_GENES_ALLOWED &&
+        inValidGeneSymbols.size > 0 && (
+          <div className={styles.invalidGenesLegend}>
+            <span className={styles.invalidGenesSwatch} />
+            <span>= invalid genes ({inValidGeneSymbols.size})</span>
+          </div>
+        )}
+      {geneSymbolSelections.size > MAX_GENES_ALLOWED && error && (
+        <div className={styles.tooManySymbols}>
+          <span className="glyphicon glyphicon-exclamation-sign" />{" "}
+          {errorMessage}
+        </div>
+      )}
+      <div className={styles.buttonRow}>
+        <Button
+          className={styles.selectGenesButton}
+          disabled={inputValue.length === 0}
+          onClick={() => {
+            const newItems = removeLineBreaks(inputValue)
+              .split(/[, ]+/)
+              .filter((item) => item.trim() !== "");
+            handleSetGeneSymbolSelections(
+              (prevChips: Set<string>) => new Set([...prevChips, ...newItems])
+            ); // Add only unique items
+            setInputValue(""); // Clear input
+          }}
+        >
+          Select
+        </Button>
+        <Button
+          className={styles.clearInputButton}
+          disabled={inputValue.length === 0 && geneSymbolSelections.size === 0}
+          onClick={() => {
+            handleSetGeneSymbolSelections(() => new Set<string>([]));
+            handleSetValidGeneSymbols(new Set());
+            handleSetInValidGeneSymbols(new Set());
+            handleClearPlotSelection();
+            handleClearSelectedTableRows();
+            setInputValue(""); // Clear input
+            handleSetError(false);
+          }}
+        >
+          Clear
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MultiSelectTextarea;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/NumberInput.tsx b/frontend/packages/portal-frontend/src/geneTea/components/NumberInput.tsx
new file mode 100644
index 000000000..7bf0f2394
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/NumberInput.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import styles from "../styles/NumberInput.scss";
+
+interface NumberInputProps {
+  name: string;
+  label: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  value: number | undefined;
+  setValue: (val: number) => void;
+  width?: string | number;
+  defaultValue?: number;
+}
+
+const NumberInput: React.FC<NumberInputProps> = ({
+  name,
+  label,
+  min = 0,
+  max = undefined,
+  step = 1,
+  value,
+  setValue,
+  width = "50%",
+  defaultValue = min,
+}) => (
+  <div className={styles.NumberInput}>
+    <label htmlFor={name} className={styles.inputLabel}>
+      {label}
+    </label>
+    <input
+      id={name}
+      type="number"
+      name={name}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      style={{ width, textAlign: "left", paddingLeft: 4 }}
+      onChange={(e) => {
+        const val = e.target.value;
+        if (val === "" || val === null) return;
+        const numVal = Number(val);
+        // If step is integer, floor; otherwise, allow decimals
+        const isIntStep = Number.isInteger(step);
+        let finalVal = isIntStep ? Math.floor(numVal) : numVal;
+        if (min !== undefined) finalVal = Math.max(min, finalVal);
+        if (max !== undefined) finalVal = Math.min(max, finalVal);
+        setValue(finalVal);
+      }}
+      onBlur={(e) => {
+        if (e.target.value === "" || e.target.value === null) {
+          setValue(defaultValue);
+        }
+      }}
+    />
+  </div>
+);
+
+export default NumberInput;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/PlotOptionsPanel.tsx b/frontend/packages/portal-frontend/src/geneTea/components/PlotOptionsPanel.tsx
new file mode 100644
index 000000000..80e17fc0d
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/PlotOptionsPanel.tsx
@@ -0,0 +1,59 @@
+import React, { useRef } from "react";
+import ToggleSwitch from "@depmap/common-components/src/components/ToggleSwitch";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+
+const PlotOptionsPanel: React.FC = () => {
+  const ref = useRef<HTMLTableElement>(null);
+
+  const {
+    doClusterTerms,
+    handleSetDoClusterTerms,
+    doClusterGenes,
+    handleSetDoClusterGenes,
+    doGroupTerms,
+    handleSetDoGroupTerms,
+  } = useGeneTeaContext();
+
+  return (
+    <div ref={ref} style={{ backgroundColor: "#ffffff" }}>
+      <p style={{ fontWeight: 600, marginBottom: 18 }}>
+        Use toggles to group and cluster.
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
+        <ToggleSwitch
+          value={doClusterTerms}
+          onChange={handleSetDoClusterTerms}
+          options={[
+            { label: "", value: false },
+            { label: "", value: true },
+          ]}
+        />
+        <span style={{ marginLeft: 12 }}>Use term clustering.</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
+        <ToggleSwitch
+          value={doClusterGenes}
+          onChange={handleSetDoClusterGenes}
+          options={[
+            { label: "", value: false },
+            { label: "", value: true },
+          ]}
+        />
+        <span style={{ marginLeft: 12 }}>Use gene clustering.</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <ToggleSwitch
+          value={doGroupTerms}
+          onChange={handleSetDoGroupTerms}
+          options={[
+            { label: "", value: false },
+            { label: "", value: true },
+          ]}
+        />
+        <span style={{ marginLeft: 12 }}>Group terms when possible.</span>
+      </div>
+    </div>
+  );
+};
+
+export default PlotOptionsPanel;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/PlotSection.tsx b/frontend/packages/portal-frontend/src/geneTea/components/PlotSection.tsx
new file mode 100644
index 000000000..4409c2236
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/PlotSection.tsx
@@ -0,0 +1,145 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React, { useMemo } from "react";
+import PlotControls, {
+  PlotToolOptions,
+} from "src/plot/components/PlotControls";
+import PlotSpinner from "src/plot/components/PlotSpinner";
+import ExtendedPlotType from "src/plot/models/ExtendedPlotType";
+import styles from "../styles/GeneTea.scss";
+import {
+  BarChartFormattedData,
+  HeatmapFormattedData,
+} from "@depmap/types/src/experimental_genetea";
+import HeatmapBarChart from "../plots/HeatmapBarChart";
+import { getSelectedColumns } from "../utils";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+
+interface PlotSectionProps {
+  isLoading: boolean;
+  plotElement: ExtendedPlotType | null;
+  heatmapFormattedData: HeatmapFormattedData | null;
+  heatmapXAxisLabel: string;
+  barChartData: BarChartFormattedData | null;
+  handleSetPlotElement: (element: ExtendedPlotType | null) => void;
+}
+
+function PlotSection({
+  heatmapXAxisLabel,
+  isLoading,
+  heatmapFormattedData,
+  barChartData,
+  handleSetPlotElement,
+  plotElement,
+}: PlotSectionProps) {
+  const {
+    selectedPlotGenes,
+    handleSetPlotSelectedGenes,
+    handleClickSavePlotSelectionAsContext,
+    handleClearPlotSelection,
+    maxTopTerms,
+    doGroupTerms,
+  } = useGeneTeaContext();
+
+  const handleSelectColumnRange = (
+    start: number,
+    end: number,
+    shiftKey: boolean
+  ) => {
+    const newlySelected = new Set<string>();
+    for (let i = start; i <= end; i += 1) {
+      if (heatmapFormattedData && heatmapFormattedData.x[i]) {
+        newlySelected.add(heatmapFormattedData.x[i]!);
+      }
+    }
+    handleSetPlotSelectedGenes(newlySelected, shiftKey);
+  };
+
+  const selectedColumns = useMemo(
+    () =>
+      heatmapFormattedData
+        ? getSelectedColumns(heatmapFormattedData, selectedPlotGenes)
+        : new Set([]),
+    [selectedPlotGenes, heatmapFormattedData]
+  );
+
+  const handleSearch = (selection: {
+    label: string;
+    value: number;
+    stringId?: string;
+  }) => {
+    if (selection.stringId) {
+      // The shiftKey parameter is false because you cannot hold down the shift key and search to add
+      // to your selection.
+      const shiftKey = false;
+      handleSetPlotSelectedGenes(new Set([selection.stringId]), shiftKey);
+    }
+  };
+
+  return (
+    <div className={styles.PlotSection}>
+      <div className={styles.sectionHeader}>
+        {plotElement && (
+          <PlotControls
+            plot={plotElement}
+            enabledTools={[
+              PlotToolOptions.ZoomToSelection,
+              PlotToolOptions.MakeContext,
+              PlotToolOptions.Download,
+              PlotToolOptions.Search,
+            ]}
+            onSearch={handleSearch}
+            searchOptions={
+              heatmapFormattedData?.x.map((gene: string, index: number) => {
+                const option = {
+                  label: gene,
+                  value: index,
+                  stringId: gene,
+                };
+                return option;
+              }) || null
+            }
+            searchPlaceholder="Search for a gene"
+            downloadImageOptions={{
+              filename: `genetea-heatmap-bar-plot`,
+              width: 800,
+              height: 600,
+            }}
+            onDownload={() => {}}
+            onMakeContext={handleClickSavePlotSelectionAsContext}
+            zoomToSelectedSelections={selectedColumns}
+            altContainerStyle={{ backgroundColor: "#7B8CB2" }}
+            hideCSVDownload
+          />
+        )}
+      </div>
+      <div className={styles.plotArea}>
+        {isLoading && (
+          <div className={styles.plotSpinnerContainer}>
+            <PlotSpinner height="100%" />
+          </div>
+        )}
+        {heatmapFormattedData && barChartData && !isLoading && (
+          <div className={styles.heatmapContainer}>
+            <HeatmapBarChart
+              plotTitle={`Top ${maxTopTerms} Enriched ${
+                doGroupTerms ? "Term Groups" : "Terms"
+              } from GeneTEA`}
+              barChartXAxisTitle="-log10(FDR)"
+              heatmapData={heatmapFormattedData}
+              barChartData={barChartData}
+              onLoad={handleSetPlotElement}
+              heatmapXAxisTitle={heatmapXAxisLabel}
+              legendTitle={""}
+              hovertemplate="%{customdata}<extra></extra>"
+              onClearSelection={() => handleClearPlotSelection()}
+              onSelectColumnRange={handleSelectColumnRange}
+              selectedColumns={selectedColumns}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(PlotSection);
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/PlotSelections.tsx b/frontend/packages/portal-frontend/src/geneTea/components/PlotSelections.tsx
new file mode 100644
index 000000000..4eab6da24
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/PlotSelections.tsx
@@ -0,0 +1,92 @@
+import React, { useRef } from "react";
+import { Button } from "react-bootstrap";
+import styles from "@depmap/data-explorer-2/src/components/DataExplorerPage/styles/DataExplorer2.scss";
+import LabelsVirtualList from "@depmap/data-explorer-2/src/components/DataExplorerPage/components/plot/PlotSelections/LabelsVirtualList";
+import geneTeaStyles from "../styles/GeneTea.scss";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+
+interface PlotSelectionsProps {
+  isPlotDataVisible: boolean;
+  selectedIds: Set<string> | null;
+  selectedLabels: Set<string> | null;
+  onClickSaveSelectionAsContext: () => void;
+  onClickClearSelection?: () => void;
+}
+
+function PlotSelections({
+  isPlotDataVisible,
+  selectedIds,
+  selectedLabels,
+  onClickSaveSelectionAsContext,
+  onClickClearSelection = undefined,
+}: PlotSelectionsProps) {
+  const { handleSetSelectionFromContext } = useGeneTeaContext();
+
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  const maxHeightOfList = 368;
+
+  return (
+    <div className={geneTeaStyles.PlotSelections}>
+      <div className={geneTeaStyles.headerDiv}>Plot Selections</div>
+      <div className={geneTeaStyles.mainContent}>
+        <div className={styles.plotInstructions}>
+          <div>Select genes to populate list</div>
+          {onClickClearSelection && selectedLabels && selectedLabels.size > 0 && (
+            <div>
+              <button
+                className={styles.setSelectionButton}
+                type="button"
+                onClick={onClickClearSelection}
+              >
+                clear {selectedLabels.size.toLocaleString()} selected{" "}
+                {selectedLabels.size === 1 ? "point" : "points"}
+              </button>
+            </div>
+          )}
+          {handleSetSelectionFromContext &&
+            selectedLabels &&
+            selectedLabels.size === 0 &&
+            isPlotDataVisible && (
+              <div>
+                or{" "}
+                <button
+                  type="button"
+                  className={styles.setSelectionButton}
+                  onClick={handleSetSelectionFromContext}
+                >
+                  set selection from a context
+                </button>
+              </div>
+            )}
+        </div>
+        <div className={styles.plotSelectionsContent}>
+          <div ref={listRef}>
+            <LabelsVirtualList
+              ids={selectedIds ? Array.from(selectedIds) : []}
+              labels={selectedLabels ? Array.from(selectedLabels) : []}
+              maxHeight={maxHeightOfList}
+              index_type={"gene"}
+              slice_type={"random fill in val"}
+              plot_type={"random fill in val"}
+            />
+          </div>
+          <div className={styles.plotSelectionsButtons}>
+            <Button
+              type="button"
+              disabled={
+                (selectedLabels && selectedLabels.size < 1) ||
+                !onClickSaveSelectionAsContext
+              }
+              onClick={onClickSaveSelectionAsContext}
+            >
+              Save as Context +
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PlotSelections;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/SearchOptionsContainer.tsx b/frontend/packages/portal-frontend/src/geneTea/components/SearchOptionsContainer.tsx
new file mode 100644
index 000000000..c7dc46dbd
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/SearchOptionsContainer.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import styles from "../styles/GeneTea.scss";
+import { Tab, Tabs } from "react-bootstrap";
+import SectionStack, {
+  StackableSection,
+} from "./collapsibleOptions/SectionStack";
+import PlotOptionsPanel from "./PlotOptionsPanel";
+import TermOptionsPanel from "./TermOptionsPanel";
+import MultiSelectTextArea from "./MultiSelectTextArea";
+import LoadFromGeneContextSection from "./LoadFromGeneContextSection";
+
+function SearchOptionsContainer() {
+  return (
+    <div className={styles.SearchOptionsContainer}>
+      <Tabs className={styles.Tabs} id={"gene-tea-filter-tabs"}>
+        <Tab eventKey={"List"} title={"List"} className={styles.Tab}>
+          <MultiSelectTextArea />
+          <div
+            style={{
+              marginLeft: "25px",
+              marginRight: "25px",
+              marginBottom: "25px",
+            }}
+          >
+            <h4 className={styles.sectionTitle}>Load Gene Context</h4>
+            <LoadFromGeneContextSection />
+          </div>
+          <SectionStack>
+            <StackableSection title="Plot Options" minHeight={132}>
+              <PlotOptionsPanel />
+            </StackableSection>
+            <StackableSection title="Term Options" minHeight={132}>
+              <TermOptionsPanel />
+            </StackableSection>
+          </SectionStack>
+        </Tab>
+        {/* NOTE: Temporarily commented out until this feature is fully specced out<Tab
+          eventKey={"Continuous"}
+          title={"Continuous (Alpha)"}
+          className={styles.Tab}
+        >
+          <h2>Coming soon!</h2>
+        </Tab> */}
+      </Tabs>
+    </div>
+  );
+}
+
+export default SearchOptionsContainer;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/TermOptionsPanel.tsx b/frontend/packages/portal-frontend/src/geneTea/components/TermOptionsPanel.tsx
new file mode 100644
index 000000000..c43bbefac
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/TermOptionsPanel.tsx
@@ -0,0 +1,176 @@
+import React, { useRef, useState } from "react";
+import styles from "../styles/MultiSelectTextArea.scss";
+import { Button } from "react-bootstrap";
+
+import NumberInput from "./NumberInput";
+import { useGeneTeaContext } from "../context/GeneTeaContext";
+import { SortOption } from "../types";
+
+const DEFAULTS = {
+  sortBy: "Effect Size",
+  maxTopTerms: 10,
+  maxFDR: 0.05,
+  effectSizeThreshold: 0.1,
+  minMatchingQuery: 2,
+  maxMatchingOverall: 5373,
+};
+
+const TermOptionsPanel: React.FC = () => {
+  const ref = useRef<HTMLTableElement>(null);
+
+  const {
+    sortBy,
+    handleSetSortBy,
+    maxTopTerms,
+    handleSetMaxTopTerms,
+    maxFDR,
+    handleSetMaxFDR,
+    effectSizeThreshold,
+    handleSetEffectSizeThreshold,
+    minMatchingQuery,
+    handleSetMinMatchingQuery,
+    maxMatchingOverall,
+    handleSetMaxMatchingOverall,
+  } = useGeneTeaContext();
+
+  // Local state for staged changes
+  const [localSortBy, setLocalSortBy] = useState<string>(sortBy);
+  const [localMaxTopTerms, setLocalMaxTopTerms] = useState<number>(
+    maxTopTerms ?? DEFAULTS.maxTopTerms
+  );
+  const [localMaxFDR, setLocalMaxFDR] = useState<number>(maxFDR);
+  const [
+    localEffectSizeThreshold,
+    setLocalEffectSizeThreshold,
+  ] = useState<number>(effectSizeThreshold);
+  const [localMinMatchingQuery, setLocalMinMatchingQuery] = useState<number>(
+    minMatchingQuery || DEFAULTS.minMatchingQuery
+  );
+  const [
+    localMaxMatchingOverall,
+    setLocalMaxMatchingOverall,
+  ] = useState<number>(maxMatchingOverall || DEFAULTS.maxMatchingOverall);
+
+  return (
+    <div ref={ref} style={{ backgroundColor: "#ffffff" }}>
+      <p style={{ fontWeight: 600, marginBottom: 12 }}>
+        Sort order for selecting top terms
+      </p>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <input
+            type="radio"
+            name="sortBy"
+            value="Effect Size"
+            checked={localSortBy === "Effect Size"}
+            onChange={() => setLocalSortBy("Effect Size")}
+          />
+          Effect Size &gt; FDR
+        </label>
+        <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <input
+            type="radio"
+            name="sortBy"
+            value="Significance"
+            checked={localSortBy === "Significance"}
+            onChange={() => setLocalSortBy("Significance")}
+          />
+          FDR &gt; Effect Size
+        </label>
+        <NumberInput
+          name="maxTopTerms"
+          label="Max. Top Terms/Term Groups"
+          min={3}
+          max={1000}
+          step={1}
+          value={localMaxTopTerms}
+          setValue={setLocalMaxTopTerms}
+          defaultValue={DEFAULTS.maxTopTerms}
+        />
+        <NumberInput
+          name="maxFDR"
+          label="FDR Threshold"
+          min={0}
+          value={localMaxFDR}
+          setValue={setLocalMaxFDR}
+          defaultValue={DEFAULTS.maxFDR}
+          step={0.01}
+        />
+        {/* TODO: Fix. Temporarily hiding. I don't think the api supports this filter yet.
+        <NumberInput
+          name="effectSizeThreshold"
+          label="Effect Size Threshold"
+          min={0}
+          value={localEffectSizeThreshold}
+          setValue={setLocalEffectSizeThreshold}
+          defaultValue={DEFAULTS.effectSizeThreshold}
+          step={0.01}
+        /> */}
+        <NumberInput
+          name="minMatchingQuery"
+          label="Min. Matching Query"
+          min={0}
+          value={localMinMatchingQuery}
+          setValue={setLocalMinMatchingQuery}
+          defaultValue={DEFAULTS.minMatchingQuery}
+          step={1}
+        />
+        <NumberInput
+          name="maxMatchingOverall"
+          label="Max. Matching Overall"
+          min={0}
+          value={localMaxMatchingOverall}
+          setValue={setLocalMaxMatchingOverall}
+          defaultValue={DEFAULTS.maxMatchingOverall}
+          step={1}
+        />
+        <div
+          className={styles.buttonRow}
+          style={{
+            marginTop: 8,
+            paddingTop: 0,
+            paddingBottom: 0,
+            background: "none",
+          }}
+        >
+          <Button
+            className={styles.selectGenesButton}
+            onClick={() => {
+              handleSetSortBy(localSortBy as any);
+              handleSetMaxTopTerms(localMaxTopTerms);
+              handleSetMaxFDR(localMaxFDR);
+              handleSetMaxMatchingOverall(localMaxMatchingOverall);
+              handleSetMinMatchingQuery(localMinMatchingQuery);
+              handleSetEffectSizeThreshold(localEffectSizeThreshold);
+            }}
+            style={{ marginBottom: 0 }}
+          >
+            Apply
+          </Button>
+          <Button
+            className={styles.clearInputButton}
+            onClick={() => {
+              setLocalSortBy(DEFAULTS.sortBy);
+              setLocalMaxFDR(DEFAULTS.maxFDR);
+              setLocalMaxTopTerms(DEFAULTS.maxTopTerms);
+              setLocalMaxMatchingOverall(DEFAULTS.maxMatchingOverall);
+              setLocalMinMatchingQuery(DEFAULTS.minMatchingQuery);
+              setLocalEffectSizeThreshold(DEFAULTS.effectSizeThreshold);
+              handleSetSortBy(DEFAULTS.sortBy as SortOption);
+              handleSetMaxTopTerms(DEFAULTS.maxTopTerms);
+              handleSetMaxFDR(DEFAULTS.maxFDR);
+              handleSetMaxMatchingOverall(DEFAULTS.maxMatchingOverall);
+              handleSetMinMatchingQuery(DEFAULTS.minMatchingQuery);
+              handleSetEffectSizeThreshold(DEFAULTS.effectSizeThreshold);
+            }}
+            style={{ marginBottom: 0 }}
+          >
+            Reset
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermOptionsPanel;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/Section.tsx b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/Section.tsx
new file mode 100644
index 000000000..4f01ca280
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/Section.tsx
@@ -0,0 +1,55 @@
+import React, { useState, ReactNode } from "react";
+import cx from "classnames";
+import styles from "./styles.scss";
+
+interface Props {
+  title: string;
+  className?: string;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  innerRef?: React.LegacyRef<HTMLDivElement>;
+}
+
+function Section({
+  title,
+  children,
+  className = undefined,
+  defaultOpen = true,
+  onOpen = () => {},
+  onClose = () => {},
+  innerRef = null,
+}: Props) {
+  const [open, setOpen] = useState<boolean>(defaultOpen);
+
+  return (
+    <div
+      className={cx(styles.Section, className)}
+      ref={innerRef}
+      data-open={open || undefined}
+    >
+      <label className={styles.sectionTitle}>
+        <span>{title}</span>
+        <button
+          type="button"
+          onClick={() => {
+            const nextOpen = !open;
+            setOpen(nextOpen);
+
+            if (nextOpen) {
+              onOpen();
+            } else {
+              onClose();
+            }
+          }}
+        >
+          {open ? "—" : "+"}
+        </button>
+      </label>
+      {open && <div className={styles.sectionContent}>{children}</div>}
+    </div>
+  );
+}
+
+export default Section;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/SectionStack.tsx b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/SectionStack.tsx
new file mode 100644
index 000000000..87b6cd8ab
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/SectionStack.tsx
@@ -0,0 +1,175 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import Section from "./Section";
+import styles from "./styles.scss";
+
+export const SectionStackContext = React.createContext({
+  sectionHeights: [0, 0, 0] as number[],
+});
+
+interface StackableSectionProps extends React.ComponentProps<typeof Section> {
+  minHeight: number;
+}
+
+interface SectionInfo {
+  minHeight: number;
+  contentHeight: number;
+  open: boolean;
+}
+
+interface InternalProps extends StackableSectionProps {
+  onRender: (info: SectionInfo) => void;
+}
+
+export const StackableSection = (props: StackableSectionProps) => {
+  const {
+    defaultOpen,
+    onRender,
+    onOpen,
+    onClose,
+    minHeight,
+  } = props as InternalProps;
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen ?? true);
+
+  useLayoutEffect(() => {
+    let contentHeight = 0;
+
+    if (ref.current) {
+      const content = ref.current.lastChild as HTMLElement;
+      contentHeight = content.offsetHeight;
+
+      const overflowDiv = ref.current.querySelector("[data-overflow]");
+
+      if (overflowDiv) {
+        contentHeight -= overflowDiv.clientHeight;
+        contentHeight += overflowDiv.scrollHeight;
+      }
+    }
+
+    onRender({ contentHeight, minHeight, open: isOpen });
+  }, [onRender, isOpen, minHeight]);
+
+  return (
+    <Section
+      innerRef={ref}
+      onOpen={() => {
+        setIsOpen(true);
+        if (onOpen) {
+          onOpen();
+        }
+      }}
+      onClose={() => {
+        setIsOpen(false);
+        if (onClose) {
+          onClose();
+        }
+      }}
+      {...props}
+    />
+  );
+};
+
+const SECTION_TITLE_HEIGHT = 45;
+
+function SectionStack({
+  children,
+}: {
+  children: (React.ReactElement<StackableSectionProps> | null)[];
+}) {
+  const _children = children.filter(Boolean);
+
+  const [needsLayout, setNeedsLayout] = useState(false);
+  const [sectionHeights, setSectionHeights] = useState(_children.map(() => 0));
+  const sections = useRef<SectionInfo[]>(
+    _children.map(() => ({} as SectionInfo))
+  );
+
+  useEffect(() => {
+    const onResize = () => setNeedsLayout(true);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const handleRender = useCallback(
+    (index: number, nextSection: SectionInfo) => {
+      const section = sections.current[index];
+      const almostEqual = (a: number, b: number) => Math.abs(a - b) < 2;
+
+      if (
+        !section ||
+        section.open !== nextSection.open ||
+        section.minHeight !== nextSection.minHeight ||
+        !almostEqual(section.contentHeight, nextSection.contentHeight)
+      ) {
+        sections.current[index] = nextSection;
+        setNeedsLayout(true);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!needsLayout) {
+      return;
+    }
+
+    setNeedsLayout(false);
+
+    setSectionHeights((prevHeights) => {
+      const n = prevHeights.length;
+      const heights: number[] = [];
+      let budget = window.innerHeight - 94 - SECTION_TITLE_HEIGHT * n;
+
+      for (let i = 0; i < n; i += 1) {
+        const section = sections.current[i];
+        const { open, minHeight, contentHeight } = section;
+
+        if (open) {
+          const height = Math.min(minHeight, contentHeight);
+          heights[i] = height;
+          budget -= height;
+        } else {
+          heights[i] = 0;
+        }
+      }
+
+      for (let i = 0; i < n; i += 1) {
+        const section = sections.current[i];
+        const { open, minHeight, contentHeight } = section;
+
+        if (budget > 0 && open && contentHeight > minHeight) {
+          const delta = Math.min(budget, contentHeight - minHeight);
+          heights[i] += delta;
+          budget -= delta;
+        }
+      }
+
+      return heights;
+    });
+  }, [needsLayout]);
+
+  return (
+    <SectionStackContext.Provider value={{ sectionHeights }}>
+      <div id="section-stack" className={styles.SectionStack}>
+        {React.Children.map(_children, (child, index) => {
+          if (!React.isValidElement(child)) {
+            return child;
+          }
+
+          return React.cloneElement(child, {
+            onRender: (section) => handleRender(index, section),
+          } as Partial<InternalProps>);
+        })}
+      </div>
+    </SectionStackContext.Provider>
+  );
+}
+
+export default SectionStack;
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/styles.scss b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/styles.scss
new file mode 100644
index 000000000..1ce9a8b61
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/collapsibleOptions/styles.scss
@@ -0,0 +1,59 @@
+.Section {
+  width: 100%;
+  border-right: 2px solid #f6fafb;
+  background-color: #fff;
+
+  .sectionContent {
+    padding: 16px;
+    overflow: hidden;
+    width: 100%;
+  }
+}
+
+.SectionStack {
+  width: 100%;
+  max-width: 100%;
+  max-height: calc(100vh - 90px);
+  overflow: auto;
+
+  .Section {
+    width: 100%;
+  }
+}
+
+.sectionTitle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  margin: 0;
+  color: #222;
+  background-color: #fff;
+  font-family: "Lato", "Arial", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  font-style: bold;
+  line-height: 100%;
+  cursor: pointer;
+  border-top: 2px solid #4479b2;
+  border-bottom: 0.5px solid #888888;
+  border-left: none;
+  border-right: none;
+
+  &.sectionTitleClosed {
+    border-bottom: 2px solid #4479b2;
+  }
+  &.sectionTitleOpen {
+    border-bottom: 0.5px solid #888888;
+  }
+
+  button {
+    line-height: 10px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    font-weight: 700;
+    color: #4479b2;
+    cursor: pointer;
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/components/promptForSelectionFromContext.tsx b/frontend/packages/portal-frontend/src/geneTea/components/promptForSelectionFromContext.tsx
new file mode 100644
index 000000000..116e96669
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/components/promptForSelectionFromContext.tsx
@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import {
+  promptForValue,
+  PromptComponentProps,
+} from "@depmap/common-components";
+import {
+  ContextSelector,
+  deprecatedDataExplorerAPI,
+  getDimensionTypeLabel,
+  pluralize,
+} from "@depmap/data-explorer-2";
+import { DepMap } from "@depmap/globals";
+import { DataExplorerContext } from "@depmap/types";
+
+export default async function promptForSelectionFromContext(
+  allPossibleLabels: Set<string>,
+  indexType: "depmap_model" | "gene"
+) {
+  const context = await promptForValue({
+    title: "Set selection from context",
+    defaultValue: null,
+    PromptComponent: ({
+      value,
+      onChange,
+      updateAcceptText,
+    }: PromptComponentProps<DataExplorerContext | null>) => {
+      const [stats, setStats] = useState<{
+        total: number;
+        notFound: number;
+        hiddenByFilters: number;
+      } | null>(null);
+
+      const numberedEntities = (n: number) => {
+        const entity = getDimensionTypeLabel(indexType);
+        const entities = pluralize(entity);
+
+        return [n.toLocaleString(), n === 1 ? entity : entities].join(" ");
+      };
+
+      const handleChange = async (nextContext: DataExplorerContext | null) => {
+        onChange(nextContext);
+
+        if (!nextContext) {
+          setStats(null);
+          updateAcceptText("OK");
+          return;
+        }
+
+        const labels = await deprecatedDataExplorerAPI.evaluateLegacyContext(
+          nextContext
+        );
+        const contextLabels = new Set(labels);
+
+        const found = [...allPossibleLabels].filter((label) => {
+          return contextLabels.has(label);
+        }).length;
+
+        const notFound = contextLabels.size - found;
+
+        setStats({
+          total: contextLabels.size,
+          notFound,
+          hiddenByFilters: 0,
+        });
+
+        const selectionLength = contextLabels.size - notFound;
+
+        if (selectionLength === 0) {
+          updateAcceptText("OK");
+        } else {
+          updateAcceptText(`Select ${numberedEntities(selectionLength)}`);
+        }
+      };
+
+      return (
+        <div>
+          <ContextSelector
+            show
+            enable
+            value={value}
+            onChange={handleChange}
+            onClickCreateContext={() => {
+              DepMap.saveNewContext(
+                { context_type: indexType },
+                null,
+                handleChange
+              );
+            }}
+            label="Choose a context"
+            context_type={indexType}
+            onClickSaveAsContext={() => {}}
+            includeAllInOptions={false}
+          />
+          {stats && (
+            <div style={{ marginTop: 15 }}>
+              <div>
+                This context contains a total of {numberedEntities(stats.total)}
+                .
+              </div>
+              <br />
+              {Boolean(stats.notFound) && (
+                <div>
+                  {numberedEntities(stats.notFound)}{" "}
+                  {stats.notFound === 1 ? "is" : "are"} not found in the
+                  selected dataset(s).
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    },
+  });
+
+  if (!context) {
+    return null;
+  }
+
+  const labels = await deprecatedDataExplorerAPI.evaluateLegacyContext(context);
+  const contextLabels = new Set(labels);
+  const matchingLabels = [...allPossibleLabels].filter((label) => {
+    return allPossibleLabels.has(label) && contextLabels.has(label);
+  });
+
+  return matchingLabels.length ? new Set(matchingLabels) : null;
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/context/GeneTeaContext.tsx b/frontend/packages/portal-frontend/src/geneTea/context/GeneTeaContext.tsx
new file mode 100644
index 000000000..4b312f714
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/context/GeneTeaContext.tsx
@@ -0,0 +1,344 @@
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { SortOption } from "../types";
+import promptForSelectionFromContext from "../components/promptForSelectionFromContext";
+import { defaultContextName } from "@depmap/data-explorer-2/src/components/DataExplorerPage/utils";
+import { saveNewContext } from "src";
+import { DataExplorerContext } from "@depmap/types";
+
+export interface GeneTeaContextType {
+  effectSizeThreshold: number;
+  handleSetEffectSizeThreshold: (v: any) => void;
+  minMatchingQuery: number;
+  handleSetMinMatchingQuery: (v: any) => void;
+  maxMatchingOverall: number | null;
+  handleSetMaxMatchingOverall: (v: any) => void;
+  maxTopTerms: number | null;
+  handleSetMaxTopTerms: (v: any) => void;
+  maxFDR: number;
+  handleSetMaxFDR: (v: number) => void;
+  doGroupTerms: boolean;
+  handleSetDoGroupTerms: (v: boolean) => void;
+  doClusterGenes: boolean;
+  handleSetDoClusterGenes: (v: boolean) => void;
+  doClusterTerms: boolean;
+  handleSetDoClusterTerms: (v: boolean) => void;
+  sortBy: SortOption;
+  handleSetSortBy: (v: SortOption) => void;
+  selectedTableRows: Set<string>;
+  handleSetSelectedTableRows: (v: Set<string>) => void;
+  geneSymbolSelections: Set<string>;
+  handleSetGeneSymbolSelections: (v: any) => void;
+  validGeneSymbols: Set<string>;
+  handleSetValidGeneSymbols: (v: Set<string>) => void;
+  inValidGeneSymbols: Set<string>;
+  handleSetInValidGeneSymbols: (v: Set<string>) => void;
+  allAvailableGenes: Set<string>;
+  handleSetAllAvailableGenes: (v: Set<string>) => void;
+  handleSetSelectionFromContext: () => Promise<void>;
+  handleClearSelectedTableRows: () => void;
+  selectedPlotGenes: Set<string>;
+  handleSetPlotSelectedGenes: (
+    selections: Set<string>,
+    shiftKey: boolean
+  ) => void;
+  handleClickSavePlotSelectionAsContext: () => void;
+  handleClearPlotSelection: () => void;
+  isLoading: boolean;
+  handleSetIsLoading: (v: boolean) => void;
+  error: boolean;
+  handleSetError: (v: boolean) => void;
+  errorMessage: string;
+  handleSetErrorMessage: (v: string) => void;
+}
+
+export const GeneTeaContext = createContext<GeneTeaContextType | undefined>(
+  undefined
+);
+
+interface GeneTeaContextProviderProps {
+  children: ReactNode;
+}
+
+export function GeneTeaContextProvider({
+  children,
+}: GeneTeaContextProviderProps) {
+  const [error, setError] = useState(false);
+  const handleSetError = useCallback((v: boolean) => setError(v), []);
+
+  const [errorMessage, setErrorMessage] = useState<string>(
+    "There was an error fetching data."
+  );
+  const handleSetErrorMessage = useCallback(
+    (v: string) => setErrorMessage(v),
+    []
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSetIsLoading = useCallback((v: boolean) => setIsLoading(v), []);
+
+  const [selectedTableRows, setSelectedTableRows] = useState<Set<string>>(
+    new Set()
+  );
+  const handleSetSelectedTableRows = useCallback(
+    (v: Set<string>) => setSelectedTableRows(v),
+    []
+  );
+  const handleClearSelectedTableRows = useCallback(
+    () => setSelectedTableRows(new Set([])),
+    []
+  );
+
+  const [doGroupTerms, setDoGroupTerms] = useState<boolean>(true);
+  const handleSetDoGroupTerms = useCallback(
+    (v: boolean) => setDoGroupTerms(v),
+    []
+  );
+
+  const [doClusterGenes, setDoClusterGenes] = useState<boolean>(true);
+  const handleSetDoClusterGenes = useCallback(
+    (v: boolean) => setDoClusterGenes(v),
+    []
+  );
+
+  const [doClusterTerms, setDoClusterTerms] = useState<boolean>(true);
+  const handleSetDoClusterTerms = useCallback(
+    (v: boolean) => setDoClusterTerms(v),
+    []
+  );
+
+  const [sortBy, setSortBy] = useState<SortOption>("Effect Size");
+  const handleSetSortBy = useCallback((v: SortOption) => setSortBy(v), []);
+
+  const [geneSymbolSelections, setGeneSymbolSelections] = useState<Set<string>>(
+    new Set(["CAD", "UMPS", "ADSL", "DHODH"])
+  );
+  const handleSetGeneSymbolSelections = useCallback(
+    (v: any) => {
+      setGeneSymbolSelections((prevVal: Set<string>) => {
+        const nextState = typeof v === "function" ? v(prevVal) : v;
+
+        if (prevVal !== nextState) {
+          // Invalidate the table selections if the user searches on a different list
+          // of gene symbols.
+          handleClearSelectedTableRows();
+        }
+        return nextState;
+      });
+    },
+    [handleClearSelectedTableRows]
+  );
+
+  const [validGeneSymbols, setValidGeneSymbols] = useState<Set<string>>(
+    new Set([])
+  );
+  const handleSetValidGeneSymbols = useCallback(
+    (v: Set<string>) => setValidGeneSymbols(v),
+    []
+  );
+
+  const [inValidGeneSymbols, setInValidGeneSymbols] = useState<Set<string>>(
+    new Set([])
+  );
+  const handleSetInValidGeneSymbols = useCallback(
+    (v: Set<string>) => setInValidGeneSymbols(v),
+    []
+  );
+
+  const [allAvailableGenes, setAllAvailableGenes] = useState<Set<string>>(
+    new Set([])
+  );
+  const handleSetAllAvailableGenes = useCallback(
+    (v: Set<string>) => setAllAvailableGenes(v),
+    []
+  );
+
+  const [effectSizeThreshold, setEffectSizeThreshold] = useState<number>(0.1);
+  const handleSetEffectSizeThreshold = useCallback(
+    (v: any) => {
+      setEffectSizeThreshold((prevVal: number) => {
+        const nextState = typeof v === "function" ? v(prevVal) : v;
+
+        if (prevVal !== nextState) {
+          // Invalidate the table selections if the user searches on a different list
+          // of gene symbols.
+          handleClearSelectedTableRows();
+        }
+        return nextState;
+      });
+    },
+    [handleClearSelectedTableRows]
+  );
+
+  const [minMatchingQuery, setMinMatchingQuery] = useState<number>(2);
+  const handleSetMinMatchingQuery = useCallback(
+    (v: any) => {
+      setMinMatchingQuery((prevVal: number) => {
+        const nextState = typeof v === "function" ? v(prevVal) : v;
+
+        if (prevVal !== nextState) {
+          // Invalidate the table selections if the user searches on a different list
+          // of gene symbols.
+          handleClearSelectedTableRows();
+        }
+        return nextState;
+      });
+    },
+    [handleClearSelectedTableRows]
+  );
+
+  const [maxMatchingOverall, setMaxMatchingOverall] = useState<number | null>(
+    5357
+  );
+  const handleSetMaxMatchingOverall = useCallback(
+    (v: any) => {
+      setMaxMatchingOverall((prevVal: number | null) => {
+        const nextState = typeof v === "function" ? v(prevVal) : v;
+
+        if (prevVal !== nextState) {
+          // Invalidate the table selections if the user searches on a different list
+          // of gene symbols.
+          handleClearSelectedTableRows();
+        }
+        return nextState;
+      });
+    },
+    [handleClearSelectedTableRows]
+  );
+
+  const [maxTopTerms, setMaxTopTerms] = useState<number | null>(10);
+  const handleSetMaxTopTerms = useCallback(
+    (v: any) => {
+      setMaxTopTerms((prevVal: number | null) => {
+        const nextState = typeof v === "function" ? v(prevVal) : v;
+
+        if (prevVal !== nextState) {
+          // Invalidate the table selections if the user searches on a different list
+          // of gene symbols.
+          handleClearSelectedTableRows();
+        }
+        return nextState;
+      });
+    },
+    [handleClearSelectedTableRows]
+  );
+
+  const [maxFDR, setMaxFDR] = useState<number>(0.05);
+  const handleSetMaxFDR = useCallback((v: number) => setMaxFDR(v), []);
+
+  const handleSetSelectionFromContext = useCallback(async () => {
+    const labels = await promptForSelectionFromContext(
+      allAvailableGenes,
+      "gene"
+    );
+    if (labels === null) {
+      return;
+    }
+
+    setGeneSymbolSelections(labels);
+  }, [allAvailableGenes]);
+
+  const [selectedPlotGenes, setSelectedPlotGenes] = useState<Set<string>>(
+    new Set([])
+  );
+
+  const handleSetPlotSelectedGenes = useCallback(
+    (selections: Set<string>, shiftKey: boolean) => {
+      setSelectedPlotGenes((prev) => {
+        const next: Set<string> = shiftKey ? new Set(prev) : new Set();
+
+        selections.forEach((id) => {
+          if (next.has(id)) {
+            next.delete(id);
+          } else {
+            next.add(id);
+          }
+        });
+
+        return next;
+      });
+    },
+    []
+  );
+
+  const handleClickSavePlotSelectionAsContext = useCallback(() => {
+    if (selectedPlotGenes.size > 0) {
+      const labels = [...selectedPlotGenes];
+      const context = {
+        name: defaultContextName(selectedPlotGenes.size),
+        context_type: "gene",
+        expr: { in: [{ var: "entity_label" }, labels] },
+      };
+      saveNewContext(context as DataExplorerContext);
+    }
+  }, [selectedPlotGenes]);
+
+  const handleClearPlotSelection = useCallback(
+    () => setSelectedPlotGenes(new Set([])),
+    []
+  );
+
+  return (
+    <GeneTeaContext.Provider
+      value={{
+        effectSizeThreshold,
+        handleSetEffectSizeThreshold,
+        minMatchingQuery,
+        handleSetMinMatchingQuery,
+        maxMatchingOverall,
+        handleSetMaxMatchingOverall,
+        maxTopTerms,
+        handleSetMaxTopTerms,
+        maxFDR,
+        handleSetMaxFDR,
+        doGroupTerms,
+        handleSetDoGroupTerms,
+        doClusterGenes,
+        handleSetDoClusterGenes,
+        doClusterTerms,
+        handleSetDoClusterTerms,
+        sortBy,
+        handleSetSortBy,
+        selectedTableRows,
+        handleSetSelectedTableRows,
+        geneSymbolSelections,
+        handleSetGeneSymbolSelections,
+        validGeneSymbols,
+        handleSetValidGeneSymbols,
+        inValidGeneSymbols,
+        handleSetInValidGeneSymbols,
+        allAvailableGenes,
+        handleSetAllAvailableGenes,
+        handleSetSelectionFromContext,
+        handleClearSelectedTableRows,
+        selectedPlotGenes,
+        handleSetPlotSelectedGenes,
+        handleClickSavePlotSelectionAsContext,
+        handleClearPlotSelection,
+        isLoading,
+        handleSetIsLoading,
+        error,
+        handleSetError,
+        errorMessage,
+        handleSetErrorMessage,
+      }}
+    >
+      {children}
+    </GeneTeaContext.Provider>
+  );
+}
+
+export function useGeneTeaContext() {
+  const ctx = useContext(GeneTeaContext);
+  if (!ctx) {
+    throw new Error(
+      "useGeneTeaContext must be used within GeneTeaContext.Provider"
+    );
+  }
+  return ctx;
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/hooks/useData.ts b/frontend/packages/portal-frontend/src/geneTea/hooks/useData.ts
new file mode 100644
index 000000000..71334af6d
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/hooks/useData.ts
@@ -0,0 +1,399 @@
+import { cached, legacyPortalAPI } from "@depmap/api";
+import { GeneTeaEnrichedTerms } from "@depmap/types/src/experimental_genetea";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { MAX_GENES_ALLOWED, SortOption } from "../types";
+
+// TODO: picked these numbers at random. Figure out what they should actually be.
+const MIN_SELECTION = 3;
+// TODO: Only keep MAX_SELECTION or MAX_GENES_ALLOWED since they're the same thing.
+const MAX_SELECTION = MAX_GENES_ALLOWED; // TODO: The API will error at a certain number. Make sure this doesn't exceed that number.
+
+function useData(
+  plotSelections: Set<string>,
+  specialCaseInvalidGenes: Set<string>,
+  possiblyValidGenes: Set<string>,
+  doGroupTerms: boolean,
+  doClusterGenes: boolean,
+  doClusterTerms: boolean,
+  sortBy: SortOption,
+  maxFDR: number,
+  maxTopTerms: number | null,
+  maxMatchingOverall: number | null,
+  minMatchingQuery: number,
+  effectSizeThreshold: number, // TODO - not doing this anymore? It is not an option in the GeneTEA API
+  handleSetInValidGeneSymbols: (v: Set<string>) => void,
+  handleSetValidGeneSymbols: (v: any) => void,
+  handleSetIsLoading: (v: boolean) => void,
+  handleSetError: (v: boolean) => void,
+  handleSetErrorMessage: (v: string) => void
+) {
+  const [data, setData] = useState<GeneTeaEnrichedTerms | null>(null);
+
+  const latestPromise = useRef<Promise<GeneTeaEnrichedTerms> | null>(null);
+
+  useEffect(() => {
+    const allSymbols = new Set([
+      ...possiblyValidGenes,
+      ...specialCaseInvalidGenes,
+    ]);
+
+    if (allSymbols.size > MAX_GENES_ALLOWED) {
+      handleSetError(true);
+      // TODO: Type the possible error messages.
+      handleSetErrorMessage(
+        `Error: Attempted to select ${allSymbols.size} genes. Gene symbol list cannot exceed 1000 genes.`
+      );
+      return;
+    }
+
+    handleSetError(false);
+
+    if (
+      possiblyValidGenes &&
+      possiblyValidGenes.size >= MIN_SELECTION &&
+      possiblyValidGenes.size <= MAX_SELECTION
+    ) {
+      handleSetIsLoading(true);
+
+      const promise = cached(
+        legacyPortalAPI
+      ).fetchGeneTeaEnrichmentExperimental(
+        Array.from(plotSelections),
+        Array.from(possiblyValidGenes),
+        doGroupTerms,
+        sortBy,
+        maxFDR,
+        maxTopTerms,
+        maxMatchingOverall,
+        minMatchingQuery
+        // effectSizeThreshold
+      );
+
+      latestPromise.current = promise;
+      promise
+        .then((fetchedData) => {
+          if (promise === latestPromise.current) {
+            setData(fetchedData);
+            const invalidGenes = [
+              ...specialCaseInvalidGenes,
+              ...fetchedData.invalidGenes,
+            ];
+
+            handleSetInValidGeneSymbols(new Set(invalidGenes));
+            handleSetValidGeneSymbols(new Set(fetchedData.validGenes));
+          }
+        })
+        .catch((e) => {
+          if (promise === latestPromise.current) {
+            window.console.error(e);
+            handleSetError(true);
+            handleSetIsLoading(false);
+          }
+        })
+        .finally(() => {
+          if (promise === latestPromise.current) {
+            handleSetIsLoading(false);
+          }
+        });
+    } else {
+      setData(null);
+      handleSetInValidGeneSymbols(new Set([]));
+      handleSetValidGeneSymbols(new Set([]));
+      handleSetIsLoading(false);
+    }
+  }, [
+    plotSelections,
+    possiblyValidGenes,
+    doGroupTerms,
+    doClusterGenes,
+    doClusterTerms,
+    sortBy,
+    maxFDR,
+    maxTopTerms,
+    maxMatchingOverall,
+    minMatchingQuery,
+    effectSizeThreshold,
+    handleSetIsLoading,
+    handleSetInValidGeneSymbols,
+    handleSetValidGeneSymbols,
+    handleSetErrorMessage,
+    handleSetError,
+    specialCaseInvalidGenes,
+  ]);
+
+  // If doClusterGenes is true, the GeneTEA api will return a specific order in which
+  // we must display the genes (x axis).
+  const xOrder = useMemo(() => {
+    if (data && data.geneCluster) {
+      const geneCluster = data.geneCluster;
+      if (doClusterGenes) {
+        return geneCluster.gene
+          .map((gene, idx) => ({ gene, order: geneCluster.order[idx] }))
+          .sort((a, b) => a.order - b.order)
+          .map((item) => item.gene);
+      }
+      return [...possiblyValidGenes].filter((gene) =>
+        data.validGenes.includes(gene)
+      );
+    }
+    return null;
+  }, [data, doClusterGenes, possiblyValidGenes]);
+
+  // Keep track of the yOrder, which will determine whether we're clustering terms, and will then
+  // order the y values by "Term" or "Term Group" depending on the value of data.groupby. data.groupby is
+  // is part of the GeneTEA api response and is either "Term" or "Term Group". The api determines the
+  // groupby value using the param we define called doGroupTerms.
+  const yOrder = useMemo(() => {
+    if (data && data.enrichedTerms) {
+      if (doClusterTerms && data.termCluster) {
+        const termCluster = data.termCluster;
+        const order = termCluster.termOrTermGroup
+          .map((termOrTermGroup, idx) => ({
+            termOrTermGroup,
+            order: termCluster.order[idx],
+          }))
+          .sort((a, b) => a.order - b.order)
+          .map((item) => item.termOrTermGroup);
+        return [...order].reverse();
+      }
+
+      const orderByVals =
+        data.groupby === "Term"
+          ? data.enrichedTerms!.term
+          : data.enrichedTerms!.termGroup;
+      const uniqueOrderByVals = Array.from(new Set(orderByVals));
+      return [...uniqueOrderByVals].reverse();
+    }
+    return null;
+  }, [data, doClusterTerms]);
+
+  // zOrder: values of data.termToEntity.fraction ordered by xOrder and yOrder
+  const zOrder = useMemo(() => {
+    if (data && data.termToEntity) {
+      const termToEntity = data.termToEntity;
+      const x =
+        xOrder && Array.isArray(xOrder) && xOrder.length > 0
+          ? xOrder
+          : termToEntity.gene;
+      const y =
+        yOrder && Array.isArray(yOrder) && yOrder.length > 0
+          ? yOrder
+          : termToEntity.termOrTermGroup;
+      return y.flatMap((term) =>
+        x.map((gene) => {
+          const idx = termToEntity.gene.findIndex(
+            (g, i) => g === gene && termToEntity.termOrTermGroup[i] === term
+          );
+          return idx !== -1 ? termToEntity.fraction[idx] : 0;
+        })
+      );
+    }
+    return [];
+  }, [data, xOrder, yOrder]);
+
+  const heatmapData = useMemo(() => {
+    if (data && data.termToEntity) {
+      const xOrderArr =
+        xOrder && Array.isArray(xOrder) && xOrder.length > 0
+          ? xOrder
+          : data.termToEntity.gene;
+      const yOrderArr =
+        yOrder && Array.isArray(yOrder) && yOrder.length > 0
+          ? yOrder
+          : data.termToEntity.termOrTermGroup;
+      const zVals =
+        zOrder && zOrder.length > 0 ? zOrder : data.termToEntity.fraction;
+      const termToEntity = data.termToEntity;
+
+      // Build a lookup map from (gene, term) to index
+      const lookup = new Map<string, number>();
+      for (let i = 0; i < termToEntity.gene.length; ++i) {
+        lookup.set(
+          `${termToEntity.gene[i]}|${termToEntity.termOrTermGroup[i]}`,
+          i
+        );
+      }
+
+      // Build flat x and y arrays matching zVals order, and customdata using the lookup
+      const pairs = yOrderArr.flatMap((term) =>
+        xOrderArr.map((gene) => [gene, term] as [string, string])
+      );
+      const filteredPairs = pairs.filter(([gene]) =>
+        termToEntity.gene.includes(gene)
+      );
+
+      const x = filteredPairs.map(([gene]) => gene);
+      const y = filteredPairs.map(([, term]) => term);
+
+      const customdata = filteredPairs.map(([gene, term]) => {
+        const idx = lookup.get(`${gene}|${term}`);
+        return idx !== undefined
+          ? `<b>Gene: </b>${gene}<br><b>${data.groupby}: </b>${term}<br><b>Matches: </b>${termToEntity.nTerms[idx]}`
+          : "";
+      });
+
+      return {
+        x,
+        y,
+        z: zVals,
+        customdata,
+      };
+    }
+    return {
+      x: [],
+      y: [],
+      z: [],
+      customdata: [],
+    };
+  }, [data, xOrder, yOrder, zOrder]);
+
+  // The barchart is a bit "weird" because it needs to share the y-axis with the Heatmap, but
+  // when the Heatmap y-axis is Term Groups, we want to preserve per-Term data in the bar chart via
+  // bar stacking.
+  const barChartData = useMemo(() => {
+    if (data && data.enrichedTerms) {
+      const xSource = data.enrichedTerms.negLogFDR;
+      const ySource =
+        data.groupby === "Term Group"
+          ? data.enrichedTerms.termGroup
+          : data.enrichedTerms.term;
+
+      // Make sure the bar chart maintains the same yOrder as defined for the Heatmap above.
+      const orderedY = Array.from(new Set(heatmapData.y));
+
+      // If we are displaying term groups rather than term, ySource values for the bar chart is not equal to
+      // y of the heatmap, but both sets of y values must be ordered to match the same y-axis.
+      // Concretely, ySource might have y-values: ["Term Group B", "Term Group B", "Term Group A"]
+      // Which if ordering by term maps to: ["Term1 from Group B", "Term 2 from Group B", "Term 1 from Group A"]
+      // while the heatmap (here we called this orderedY) has values: ["Term Group A", "Term Group B"].
+      //
+      // The Heatmap defines the order. So sortedYSource becomes: ["Term Group A", "Term Group B", "Term Group B"]
+      // sortedXSource becomes: ["Value for Term1 in Group A", "Value for Term 1 in Group B", "Value for Term 2 in Group B"].
+      //
+      // This lets us use a y-axis that is term groups while plotting a stacked bar chart of term data for each group.
+      const combinedXY = [...ySource].map((item, index) => ({
+        yVal: item,
+        xVal: xSource[index],
+        sortKey: orderedY.indexOf(item),
+        origIndex: index,
+      }));
+      const sortedCombinedXY = [...combinedXY].sort(
+        (a, b) => a.sortKey - b.sortKey
+      );
+
+      const sortedYSource = sortedCombinedXY.map((val) => {
+        return { val: val.yVal, origIndex: val.origIndex };
+      });
+
+      const calculateStackedXValues = (
+        xValues: number[],
+        yValues: string[]
+      ): number[] => {
+        if (xValues.length !== yValues.length) {
+          throw new Error("xValues and yValues must be of the same length.");
+        }
+
+        const combinedData: any = xValues.map((x, index) => ({
+          x,
+          y: yValues[index],
+        }));
+
+        // 1. Group data by y-value
+        const groupedData = combinedData.reduce((acc: any, current: any) => {
+          (acc[current.y] = acc[current.y] || []).push(current.x);
+          return acc;
+        }, {} as Record<string, number[]>);
+
+        const newXValues: number[] = [];
+
+        // 2. Process each group to sort and calculate new x-values
+        Object.keys(groupedData).forEach((y) => {
+          const valuesForY = groupedData[y];
+
+          // Sort the x-values for the current y-group from smallest to largest
+          valuesForY.sort((a: any, b: any) => a - b);
+
+          let previousX = 0;
+
+          // 3. Iterate to calculate new values
+          for (const x of valuesForY) {
+            // Instead of graphing literal x values, we want the stacked sections to be the difference between its own -log10(FDR)
+            // value and the value that was graphed before it such that the total size of the bar is equal to the highest magnitude
+            // -log10(FDR) of this particular Term Group.
+            const newX = x - previousX;
+            newXValues.push(newX);
+            previousX = x; // Store the original x as the 'previously added x' for the next iteration
+          }
+        });
+
+        return newXValues;
+      };
+
+      const sortedXSource =
+        data.groupby === "Term Group"
+          ? sortedCombinedXY.map((val) => val.xVal)
+          : xSource;
+
+      const customdata = sortedYSource.map((termOrTermGroup, i) => {
+        const term =
+          data.groupby === "Term Group"
+            ? data.enrichedTerms!.term[termOrTermGroup.origIndex]
+            : termOrTermGroup.val;
+        const termGroup = data.enrichedTerms!.termGroup[
+          termOrTermGroup.origIndex
+        ];
+        const fdr = data.enrichedTerms!.fdr[termOrTermGroup.origIndex];
+        const effectSize = data.enrichedTerms!.effectSize[
+          termOrTermGroup.origIndex
+        ];
+        const nMatchingGenesOverall = data.enrichedTerms!.nMatchingGenesOverall[
+          termOrTermGroup.origIndex
+        ];
+
+        return term !== undefined
+          ? `<b>${term}</b><br>${termGroup}<br><br>-log10(FDR):  ${sortedXSource[
+              i
+            ].toFixed(4)}  <br>FDR:  ${fdr.toExponential(
+              5
+            )}  <br>Effect Size:  ${effectSize.toFixed(
+              4
+            )}  <br>n Matching Genes Overall:  ${nMatchingGenesOverall}`
+          : "";
+      });
+
+      const sortedYSourceVals = sortedYSource.map((val) => val.val);
+
+      const transformX = calculateStackedXValues(
+        sortedXSource,
+        sortedYSourceVals
+      );
+
+      return {
+        x: transformX,
+        y: sortedYSourceVals,
+        customdata,
+      };
+    }
+    return { x: [], y: [], customdata: [] };
+  }, [data, heatmapData.y]);
+
+  const heatmapXAxisLabel = useMemo(() => {
+    if (data && data.termToEntity) {
+      return `Matching Genes in List n=(${
+        new Set(data.termToEntity.gene).size
+      })`;
+    }
+
+    return "";
+  }, [data]);
+
+  return {
+    specialCaseInvalidGenes,
+    rawData: data,
+    heatmapData,
+    barChartData,
+    heatmapXAxisLabel,
+  };
+}
+
+export default useData;
diff --git a/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.scss b/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.scss
new file mode 100644
index 000000000..8adf3500f
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.scss
@@ -0,0 +1,6 @@
+// We use css to hide Plotly's toolbar (instead of configuring it not to have
+// one) so we can still dispatch clicks on its buttons (the only way to trigger
+// a zoom).
+.HeatmapBarChart :global .modebar {
+  display: none;
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.tsx b/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.tsx
new file mode 100644
index 000000000..197ffdf64
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/plots/HeatmapBarChart.tsx
@@ -0,0 +1,416 @@
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type {
+  Data as PlotlyData,
+  Layout,
+  PlotlyHTMLElement,
+  ColorScale,
+  Datum,
+} from "plotly.js";
+import PlotlyLoader, { PlotlyType } from "src/plot/components/PlotlyLoader";
+import customizeDragLayer from "src/doseViabilityPrototype/components/PrototypeBrushableHeatmap/customizeDragLayer";
+import {
+  BarChartFormattedData,
+  HeatmapFormattedData,
+} from "@depmap/types/src/experimental_genetea";
+import ExtendedPlotType from "src/plot/models/ExtendedPlotType";
+import { getLayout } from "./layouts";
+import { generateTickLabels } from "../utils";
+import styles from "./HeatmapBarChart.scss";
+import debounce from "lodash.debounce";
+import usePlotResizer from "src/compound/heatmapTab/doseViabilityHeatmap/hooks/usePlotResizer";
+
+const viridisRColorscale = [
+  ["0", "#D3D3D3"],
+  ["0.001", "rgb(253, 231, 37)"],
+  ["0.111", "rgb(180, 222, 44)"],
+  ["0.222", "rgb(109, 205, 89)"],
+  ["0.333", "rgb(53, 183, 121)"],
+  ["0.444", "rgb(31, 158, 137)"],
+  ["0.556", "rgb(38, 130, 142)"],
+  ["0.667", "rgb(49, 104, 142)"],
+  ["0.778", "rgb(62, 74, 137)"],
+  ["0.889", "rgb(72, 40, 120)"],
+  ["1.0", "rgb(68, 1, 84)"],
+];
+interface Props {
+  plotTitle: string;
+  heatmapXAxisTitle: string;
+  heatmapData: HeatmapFormattedData;
+  barChartXAxisTitle: string;
+  barChartData: BarChartFormattedData;
+  legendTitle: string;
+  selectedColumns: Set<number>;
+  onSelectColumnRange: (start: number, end: number, shiftKey: boolean) => void;
+  onClearSelection: () => void;
+  onLoad: (plot: ExtendedPlotType) => void;
+  hovertemplate?: string | string[];
+  // Optionally set a min/max for the color scale. If left undefined, these
+  // will default to the min and max of values contained in `data.z`
+  zmin?: number;
+  zmax?: number;
+}
+
+function HeatmapBarChart({
+  plotTitle,
+  heatmapXAxisTitle,
+  heatmapData,
+  barChartXAxisTitle,
+  barChartData,
+  legendTitle,
+  selectedColumns,
+  onSelectColumnRange,
+  onClearSelection,
+  onLoad,
+  hovertemplate = undefined,
+  zmin = undefined,
+  zmax = undefined,
+  Plotly,
+}: Props & { Plotly: PlotlyType }) {
+  const ref = useRef<ExtendedPlotType>(null);
+  usePlotResizer(Plotly, ref);
+
+  const updateLayoutOnScreenSizeChange = useCallback(
+    (plot: ExtendedPlotType) => {
+      if (plot && plot.layout) {
+        Plotly.relayout(plot, {
+          ...plot.layout,
+          grid:
+            window.innerWidth < 1250
+              ? { rows: 2, columns: 1, pattern: "independent" }
+              : { rows: 1, columns: 2, pattern: "independent" },
+          xaxis: {
+            ...plot.layout.xaxis,
+            domain: window.innerWidth < 1250 ? [0, 1] : [0, 0.7],
+          },
+          xaxis2: {
+            ...plot.layout.xaxis2,
+            domain: window.innerWidth < 1250 ? [0, 1] : [0.73, 1],
+          },
+          yaxis2: {
+            ...plot.layout.yaxis2,
+            visible: window.innerWidth < 1250,
+          },
+        });
+      }
+    },
+    [Plotly]
+  );
+
+  useEffect(() => {
+    if (onLoad && ref.current) {
+      onLoad(ref.current);
+    }
+  }, [onLoad]);
+
+  const initialRange: [number, number] = useMemo(() => {
+    return [0, heatmapData.x.length - 1];
+  }, [heatmapData]);
+
+  const [selectedRange, setSelectedRange] = useState(initialRange);
+  const [hoveredColumns, setHoveredColumns] = useState<number[]>([]);
+
+  const [
+    showFullXAxisTickLabels,
+    setShowFullAxisTickLabels,
+  ] = useState<boolean>(false);
+
+  const getShowXAxisTickLabels = useCallback(() => {
+    if (ref.current) {
+      const dataToPiixels = (ref.current as any)._fullLayout.xaxis.l2p;
+
+      const pixelWidth = dataToPiixels(1) - dataToPiixels(0);
+
+      return pixelWidth > 20;
+    }
+
+    return false;
+    // eslint-disable-next-line
+  }, [selectedRange, selectedColumns]);
+
+  const xAxisTickLabels = useMemo(() => {
+    const showTickLabels = getShowXAxisTickLabels();
+    setShowFullAxisTickLabels(showTickLabels);
+    return generateTickLabels(
+      heatmapData.x.map(String),
+      selectedColumns,
+      showFullXAxisTickLabels
+    );
+  }, [
+    heatmapData.x,
+    selectedColumns,
+    getShowXAxisTickLabels,
+    showFullXAxisTickLabels,
+  ]);
+
+  useEffect(() => {
+    const plot = ref.current as ExtendedPlotType;
+    let range: [number, number] = [
+      0 - 0.5,
+      [...new Set(heatmapData.x)].length - 0.5,
+    ];
+    if (
+      plot &&
+      plot.layout &&
+      plot.layout.xaxis &&
+      Array.isArray(plot.layout.xaxis.range) &&
+      plot.layout.xaxis.range.length === 2
+    ) {
+      range = plot.layout.xaxis.range as [number, number];
+    }
+
+    const plotlyHeatmapData: PlotlyData = {
+      type: "heatmap",
+      ...heatmapData,
+      colorscale: viridisRColorscale as ColorScale,
+      zmin: 0,
+      zmax: 1,
+      xaxis: "x",
+      yaxis: "y",
+      hovertemplate,
+      xgap: 0.35,
+      ygap: 0.35,
+
+      colorbar: {
+        x: -0.25,
+        y: -0.45,
+        len: 0.25,
+        thickness: 10,
+        ypad: 0,
+        xanchor: "left",
+        // These features are undocumented and won't type check properly.
+        ...({
+          orientation: "h",
+          title: {
+            text: "Fraction Mapping",
+            side: "bottom",
+          },
+        } as object),
+      },
+    };
+
+    const plotlyBarChartData: PlotlyData = {
+      ...barChartData,
+      type: "bar",
+      xaxis: "x2",
+      yaxis: "y2",
+      hovertemplate,
+      orientation: "h",
+      marker: {
+        color: "#777b7e",
+        line: {
+          color: "white",
+          width: 1, // Set the line width for the divider
+        },
+      },
+    };
+
+    const layout: Partial<Layout> = getLayout(
+      heatmapData,
+      heatmapXAxisTitle,
+      barChartXAxisTitle,
+      xAxisTickLabels,
+      new Set(hoveredColumns),
+      selectedColumns,
+      range,
+      window.innerWidth < 1220
+    );
+
+    Plotly.react(plot, [plotlyHeatmapData, plotlyBarChartData], layout);
+
+    // Keep track of added listeners so we can easily remove them.
+    const listeners: [string, (e: object) => void][] = [];
+
+    const on = (eventName: string, callback: (e: object) => void) => {
+      plot.on(
+        eventName as Parameters<PlotlyHTMLElement["on"]>[0],
+        callback as Parameters<PlotlyHTMLElement["on"]>[1]
+      );
+      listeners.push([eventName, callback]);
+    };
+
+    const getButton = (attr: string, val: string) =>
+      plot.querySelector(
+        `.modebar-btn[data-attr="${attr}"][data-val="${val}"]`
+      ) as HTMLAnchorElement;
+
+    const zoom = (val: "in" | "out" | "reset") => {
+      getButton("zoom", val).click();
+      const showTickLabels = getShowXAxisTickLabels();
+      setShowFullAxisTickLabels(showTickLabels);
+      // This redraw fixes a very strange bug where setting the drag mode to
+      // select (or lasso) with a filter also applied causes all of the points
+      // to disappear.
+      Plotly.redraw(plot);
+    };
+
+    plot.zoomIn = () => setTimeout(zoom, 0, "in");
+    plot.zoomOut = () => setTimeout(zoom, 0, "out");
+
+    plot.resetZoom = () => {
+      const nextLayout = { ...plot.layout };
+      (plot.layout.shapes as any) = undefined;
+      zoom("reset");
+      Plotly.react(plot, plot.data, nextLayout, plot.config);
+    };
+
+    on("plotly_afterplot", () => {
+      customizeDragLayer({
+        plot,
+        onMouseOut: () => setHoveredColumns([]),
+        onChangeInProgressSelection: (start, end) => {
+          const inProgressRange = [];
+          for (let i = start; i <= end; i += 1) {
+            inProgressRange.push(i);
+          }
+          setHoveredColumns(inProgressRange);
+        },
+        onSelectColumnRange: (start, end, shiftKey) => {
+          onSelectColumnRange(start, end, shiftKey);
+        },
+        onClearSelection,
+      });
+    });
+
+    on("plotly_hover", (e: any) => {
+      setHoveredColumns([e.points[0].pointIndex[1]]);
+    });
+
+    // https://github.com/plotly/plotly.js/blob/55dda47/src/lib/prepare_regl.js
+    on("plotly_webglcontextlost", () => {
+      // Fixes a bug where points disappear after the browser has been left
+      // idle for some time.
+      Plotly.redraw(plot);
+    });
+
+    // Used for PlotControls.tsx to zoom to the highest resolution possible
+    // the keeps all selected columns in the visible window.
+    plot.zoomToSelection = (selections: Set<number>) => {
+      if (!plot) return;
+
+      if (selections.size > 0 && plot && plot.layout && plot.layout.xaxis) {
+        const minSelected = Math.min(...selections);
+        const maxSelected = Math.max(...selections);
+        const minRange = Math.max(0, minSelected);
+        const maxRange = Math.min(
+          [...new Set(heatmapData.x)].length,
+          maxSelected
+        );
+        const newRange = [minRange - 0.5, maxRange + 0.5];
+        setSelectedRange(newRange as [number, number]);
+
+        // Use Plotly.react to update the range and force a re-render
+        Plotly.relayout(plot, {
+          "xaxis.autorange": false,
+          "xaxis.range": newRange as [Datum, Datum],
+          ...({
+            "xaxis2.fixedrange": true,
+            "yaxis2.fixedrange": true,
+          } as object),
+        });
+
+        const showTickLabels = getShowXAxisTickLabels();
+        setShowFullAxisTickLabels(showTickLabels);
+      }
+    };
+
+    // When the window is greater than 1250 in width, the Heatmap and barchart can fit
+    // side-by-side. When the window is smaller than 1250, we need to adjust the grid
+    // property in the Layout trace to display the barchart subplot underneath the Heatmap.
+    window.addEventListener(
+      "resize",
+      debounce(() => {
+        updateLayoutOnScreenSizeChange(plot);
+      }, 200)
+    );
+
+    // Add a downloadImage method to the plot for PNG and SVG export using Plotly's toImage utility
+    plot.downloadImage = (options) => {
+      const { filename, width, format } = options;
+      if (!plot || !plot.data || !plot.layout) return;
+      Plotly.toImage(plot, { format, width, height: options.height })
+        .then((dataUrl) => {
+          const a = document.createElement("a");
+          a.href = dataUrl;
+          a.download = filename + "." + format;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+        })
+        .catch(() => {
+          if (format === "svg") {
+            const svgNode = plot.querySelector("svg");
+            if (!svgNode) return;
+            const serializer = new XMLSerializer();
+            const svgString = serializer.serializeToString(svgNode);
+            const blob = new Blob([svgString], { type: "image/svg+xml" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = filename + ".svg";
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+          }
+        });
+    };
+
+    return () => {
+      listeners.forEach(([eventName, callback]) =>
+        plot.removeListener(eventName, callback)
+      );
+    };
+  }, [
+    heatmapData,
+    barChartXAxisTitle,
+    getShowXAxisTickLabels,
+    onSelectColumnRange,
+    selectedColumns,
+    legendTitle,
+    selectedRange,
+    hoveredColumns,
+    onClearSelection,
+    hovertemplate,
+    zmin,
+    zmax,
+    xAxisTickLabels,
+    barChartData,
+    heatmapXAxisTitle,
+    updateLayoutOnScreenSizeChange,
+    Plotly,
+  ]);
+
+  return (
+    <>
+      <h3 style={{ textAlign: "center" }}>{plotTitle}</h3>
+      <div className={styles.HeatmapBarChart} ref={ref} />
+    </>
+  );
+}
+
+export default function LazyHeatmapBarChart({
+  heatmapData,
+  barChartData,
+  ...otherProps
+}: Props) {
+  return (
+    <PlotlyLoader version="module">
+      {(Plotly) =>
+        heatmapData ? (
+          <HeatmapBarChart
+            heatmapData={heatmapData}
+            barChartData={barChartData}
+            Plotly={Plotly}
+            {...otherProps}
+          />
+        ) : null
+      }
+    </PlotlyLoader>
+  );
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/plots/layouts.ts b/frontend/packages/portal-frontend/src/geneTea/plots/layouts.ts
new file mode 100644
index 000000000..f621d99a0
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/plots/layouts.ts
@@ -0,0 +1,114 @@
+import { Layout } from "plotly.js";
+
+export const getLayout = (
+  data: any,
+  heatmapXAxisTitle: string,
+  barcChartXAxisTitle: string,
+  heatmapXAxisTickLabels: string[],
+  hoveredColumns: Set<number>,
+  selectedColumns: Set<number>,
+  range: any,
+  useStackedLayout: boolean = false
+): Partial<Layout> => {
+  const yLength = [...new Set(data.y)].length;
+
+  // Parts of the layout that are different for screen sizes less than 1250
+  const gridRows = useStackedLayout ? 2 : 1;
+  const gridColumns = useStackedLayout ? 1 : 2;
+  const margin = useStackedLayout ? { t: 25, b: 25 } : { t: 25, b: 25 };
+  const xDomain = useStackedLayout ? [0, 1] : [0, 0.7];
+  const x2Domain = useStackedLayout ? [0, 1] : [0.73, 1];
+  const showY2Axis = useStackedLayout;
+
+  return {
+    autosize: true,
+    grid: { rows: gridRows, columns: gridColumns, pattern: "independent" },
+    height: 600,
+    margin,
+    hovermode: "closest",
+    hoverlabel: { namelength: -1 },
+    dragmode: false,
+    xaxis: {
+      anchor: "x",
+      automargin: true,
+      domain: xDomain,
+
+      showgrid: false,
+      title: {
+        text: heatmapXAxisTitle,
+      },
+      side: "bottom",
+
+      tickvals: heatmapXAxisTickLabels.map((label, i) =>
+        label ? data.x[i] : ""
+      ),
+      ticktext: heatmapXAxisTickLabels,
+      tickmode: "array",
+      tickangle: -25,
+      tickfont: { size: 10 },
+
+      rangeslider: {
+        thickness: 0.03,
+        visible: data.z.length > 0,
+        borderwidth: 1,
+        range: [0 - 0.5, [...new Set(data.x)].length - 0.5],
+      },
+      range,
+    },
+
+    yaxis: {
+      anchor: "y",
+      showgrid: false,
+      fixedrange: true,
+      tickfont: { size: 10 },
+      automargin: true,
+    },
+    yaxis2: {
+      anchor: "y2",
+      fixedrange: true,
+      tickfont: { size: 10 },
+      visible: showY2Axis,
+    },
+    xaxis2: { domain: x2Domain, fixedrange: true, title: barcChartXAxisTitle },
+
+    shapes: [
+      // Outline
+      [...selectedColumns].map((colIndex) => ({
+        type: "path" as const,
+        line: { width: 2, color: "black" },
+        path: (() => {
+          const x0 = colIndex - 0.5;
+          const x1 = colIndex + 0.5;
+          const y0 = -0.5;
+          const y1 = yLength - 0.5;
+          const shouldDrawLeft = !selectedColumns.has(colIndex - 1);
+          const shouldDrawRight = !selectedColumns.has(colIndex + 1);
+          const segments = [];
+          if (shouldDrawLeft) {
+            segments.push(`M ${x0} ${y0}`);
+            segments.push(`L ${x0} ${y1}`);
+          }
+          segments.push(`M ${x0} ${y1}`);
+          segments.push(`L ${x1} ${y1}`);
+          segments.push(`M ${x1} ${y0}`);
+          segments.push(`L ${x0} ${y0}`);
+          if (shouldDrawRight) {
+            segments.push(`M ${x1} ${y1}`);
+            segments.push(`L ${x1} ${y0}`);
+          }
+          return segments.join(" ");
+        })(),
+      })),
+      // Fill
+      [...new Set([...hoveredColumns, ...selectedColumns])].map((colIndex) => ({
+        type: "rect" as const,
+        x0: colIndex - 0.5,
+        x1: colIndex + 0.5,
+        y0: -0.5,
+        y1: yLength - 0.5,
+        line: { width: 0 },
+        fillcolor: "rgba(0, 0, 0, 0.15)",
+      })),
+    ].flat(),
+  };
+};
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/GeneTea.scss b/frontend/packages/portal-frontend/src/geneTea/styles/GeneTea.scss
new file mode 100644
index 000000000..96b1e170a
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/GeneTea.scss
@@ -0,0 +1,54 @@
+@import "./Tabs.scss";
+@import "./GeneTeaTabLayout.scss";
+@import "./PlotSection.scss";
+@import "./PlotSelections.scss";
+
+.header {
+  padding-left: 20px;
+  margin-bottom: 18px;
+  margin-top: 30px;
+  max-width: 150ch;
+
+  h1 {
+    color: #333333;
+    font-size: 32px;
+    font-weight: bold;
+    margin: 0 0 9px 0;
+  }
+
+  & > p {
+    font-size: 16px;
+  }
+}
+
+.main {
+  width: 100%;
+}
+
+.errorMessage {
+  padding: 24px;
+  text-align: center;
+  color: #b00020;
+  font-weight: 600;
+}
+
+.tableSpinnerContainer {
+  padding: 24px;
+  text-align: center;
+}
+
+.plotSelectionsContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  button {
+    font-size: 13px;
+
+    :global .glyphicon {
+      position: relative;
+      top: 2px;
+      left: 4px;
+    }
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/GeneTeaTabLayout.scss b/frontend/packages/portal-frontend/src/geneTea/styles/GeneTeaTabLayout.scss
new file mode 100644
index 000000000..a656d1aad
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/GeneTeaTabLayout.scss
@@ -0,0 +1,90 @@
+.geneTeaTabLayout {
+  display: grid;
+  grid-template-columns: 2fr 10fr;
+  grid-template-areas: "filters filters main main main main main main main main main main";
+  min-height: 100vh;
+
+  @media (max-width: 1200px) {
+    grid-template-areas: "filters main";
+    grid-template-columns: 1fr 10fr;
+    grid-template-rows: auto auto;
+  }
+
+  .geneTeaFilters {
+    background-color: rgba(123, 140, 178, 0.1);
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+    min-width: 260px;
+    flex: 0 0 300px;
+    align-self: flex-start;
+    height: 100%;
+    margin-top: 30px;
+    border-top: 1px solid black;
+  }
+
+  .geneTeaTabLayout {
+    .mainContentContainer {
+      grid-area: main;
+      margin-left: 0;
+      width: 100%;
+      margin-right: 0;
+      padding-bottom: 16px;
+
+      .mainContentHeader {
+        margin-top: 20px;
+        margin-bottom: 20px;
+
+        .mainContentHeaderTitle,
+        .mainContentTableHeaderTitle {
+          font-family: "Lato", "Arial", sans-serif;
+          font-size: 20px;
+          font-weight: 700;
+          font-style: bold;
+          line-height: 100%;
+        }
+
+        p {
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  .mainContentGrid {
+    display: grid;
+    grid-template-columns: 9fr 1fr;
+    grid-template-areas: "plot plot plot plot plot plot plot plot plot selections";
+    gap: 1rem;
+
+    .plotArea {
+      grid-area: "plot";
+    }
+
+    .selectionsArea {
+      grid-area: "selections";
+    }
+
+    @media (max-width: 1250px) {
+      grid-template-areas:
+        "selections"
+        "plot";
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
+    }
+  }
+
+  .mainContentHr {
+    border-top: 1px solid #b8b8b8;
+    margin-top: 30px;
+  }
+
+  .mainContentCellLines {
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    p {
+      max-width: 780px;
+    }
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/MultiSelectTextArea.scss b/frontend/packages/portal-frontend/src/geneTea/styles/MultiSelectTextArea.scss
new file mode 100644
index 000000000..192b5076c
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/MultiSelectTextArea.scss
@@ -0,0 +1,159 @@
+.multiSelectTextareaContainer {
+  background-color: #fff;
+  margin-left: 25px;
+  margin-right: 25px;
+
+  .sectionTitle {
+    background-color: rgba(123, 140, 178, 0.1);
+    margin: 0;
+    padding-top: 25px;
+    padding-bottom: 5px;
+  }
+
+  .sectionSubTitle {
+    background-color: rgba(123, 140, 178, 0.1);
+    margin: 0;
+    padding-bottom: 10px;
+    color: gray;
+  }
+
+  .invalidGenesLegend {
+    padding: 10px 0 0 0;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    background-color: rgba(123, 140, 178, 0.1);
+  }
+  .invalidGenesSwatch {
+    width: 18px;
+    height: 18px;
+    background: #f8bcbc;
+    display: inline-block;
+    margin-right: 8px;
+    border-radius: 3px;
+  }
+  .validGenesLegend {
+    padding: 10px 0 0 0;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    background-color: rgba(123, 140, 178, 0.1);
+  }
+  .validGenesSwatch {
+    width: 18px;
+    height: 18px;
+    background: #b6e7b0;
+    display: inline-block;
+    margin-right: 8px;
+    border-radius: 3px;
+  }
+
+  .tooManySymbols {
+    color: #b00020;
+    font-size: 13px;
+    background-color: rgba(123, 140, 178, 0.1);
+  }
+
+  .multiSelectTextareaBorder {
+    position: relative;
+    // border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 5px;
+    background-color: #fff;
+
+    height: 220px;
+    overflow-y: auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    .chipList {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      background-color: #fff;
+
+      .chip {
+        background: #e0e0e0;
+        padding: 3px 8px;
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+
+        &.chipValid {
+          background: #b6e7b0 !important;
+          color: #1a4d1a !important;
+        }
+        &.chipInvalid {
+          background: #f8bcbc !important;
+          color: #a10000 !important;
+        }
+
+        .chipRemoveButton {
+          margin-left: 5px;
+          background: none;
+          border: none;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.buttonRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: rgba(123, 140, 178, 0.1);
+
+  .selectGenesButton {
+    width: 91px;
+    height: 30px;
+    color: #ffffff;
+    background-color: #4479b2;
+    border: 1px solid #4479b2;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    font-family: "Lato", "Arial", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    font-style: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .selectGenesButton:hover {
+    background-color: #2864a5;
+    border-color: #2864a5;
+  }
+
+  .clearInputButton {
+    width: 91px;
+    height: 30px;
+    color: #4479b2;
+    background-color: #ffffff;
+    border: 1px solid #4479b2;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    font-family: "Lato", "Arial", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    font-style: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .clearInputButton:hover {
+    background-color: #e6f0fa;
+  }
+}
+
+textarea:focus {
+  outline: none;
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/NumberInput.scss b/frontend/packages/portal-frontend/src/geneTea/styles/NumberInput.scss
new file mode 100644
index 000000000..ead2e3df9
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/NumberInput.scss
@@ -0,0 +1,12 @@
+.NumberInput {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4;
+
+  .inputLabel {
+    font-weight: 400;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/PlotSection.scss b/frontend/packages/portal-frontend/src/geneTea/styles/PlotSection.scss
new file mode 100644
index 000000000..f208a8bce
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/PlotSection.scss
@@ -0,0 +1,48 @@
+.PlotSection {
+  margin-left: 0px;
+  margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: visible;
+  border: 1px solid #b8b8b8;
+
+  @media (max-width: 950px) {
+    margin-right: 0px;
+  }
+
+  .sectionHeader {
+    margin-bottom: 20px;
+  }
+
+  .plotArea {
+    position: relative;
+    width: 98%;
+    height: 100%;
+    margin: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+
+    > * {
+      width: 96%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+
+  .plotSpinnerContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    z-index: 2;
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/PlotSelections.scss b/frontend/packages/portal-frontend/src/geneTea/styles/PlotSelections.scss
new file mode 100644
index 000000000..6cd5ea1e7
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/PlotSelections.scss
@@ -0,0 +1,18 @@
+.PlotSelections {
+  border: 1px solid #b8b8b8;
+
+  .headerDiv {
+    color: #ffffff;
+    background-color: #7b8cb2;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 15px;
+    font-size: 16px;
+    font-weight: 700;
+    font-family: Lato;
+  }
+
+  .mainContent {
+    margin: 15px;
+  }
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/styles/Tabs.scss b/frontend/packages/portal-frontend/src/geneTea/styles/Tabs.scss
new file mode 100644
index 000000000..98c7b8aff
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/styles/Tabs.scss
@@ -0,0 +1,64 @@
+.Tab {
+  color: #333333 !important;
+  font-weight: normal !important;
+  font-size: 16px !important;
+}
+
+.Tab[aria-selected="true"] {
+  font-weight: bold !important;
+  color: #405587 !important;
+  margin-bottom: 1px;
+  background-size: 100% 3px !important;
+  background-image: linear-gradient(#405587, #405587) !important;
+}
+
+.Tab:focus {
+  outline: none;
+}
+
+.pseudoLink {
+  all: unset;
+  cursor: pointer;
+  color: #337ab7;
+  text-decoration: underline;
+  cursor: pointer;
+  padding-left: 3px;
+  padding-right: 3px;
+
+  &:hover,
+  &:focus {
+    color: #23527c;
+  }
+
+  &:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 3px;
+  }
+}
+
+.Tab:focus-visible {
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
+}
+
+.Tab:disabled {
+  color: #808080;
+  cursor: not-allowed;
+}
+
+.TabList {
+  display: flex;
+  border-bottom: 1px solid #000000;
+
+  .vertical & {
+    flex-direction: column;
+    max-width: 200px;
+    min-width: 200px;
+  }
+}
+
+.geneTeaTabsWrapper .TabPanels {
+  display: block;
+  width: 100%;
+  padding-left: 25px;
+  padding-right: 30px;
+}
diff --git a/frontend/packages/portal-frontend/src/geneTea/types.ts b/frontend/packages/portal-frontend/src/geneTea/types.ts
new file mode 100644
index 000000000..3e286541d
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/types.ts
@@ -0,0 +1,2 @@
+export type SortOption = "Significance" | "Effect Size";
+export const MAX_GENES_ALLOWED = 1000;
diff --git a/frontend/packages/portal-frontend/src/geneTea/utils.ts b/frontend/packages/portal-frontend/src/geneTea/utils.ts
new file mode 100644
index 000000000..dd0d82fbf
--- /dev/null
+++ b/frontend/packages/portal-frontend/src/geneTea/utils.ts
@@ -0,0 +1,144 @@
+import { breadboxAPI, cached } from "@depmap/api";
+import { HeatmapFormattedData } from "@depmap/types/src/experimental_genetea";
+
+export const tableColumns = [
+  { accessor: "term", Header: "Term", minWidth: 100 },
+  {
+    accessor: "termGroup",
+    Header: "Term Group",
+    minWidth: 180,
+  },
+  {
+    accessor: "fdr",
+    Header: "FDR",
+    minWidth: 80,
+  },
+  {
+    accessor: "effectSize",
+    Header: "Effect Size",
+    minWidth: 80,
+  },
+  {
+    accessor: "matchingGenesInList",
+    Header: "Matching Query",
+    minWidth: 100,
+  },
+  {
+    accessor: "nMatchingGenesInList",
+    Header: "n Matching Query",
+  },
+  {
+    accessor: "nMatchingGenesOverall",
+    Header: "n Matching Overall",
+  },
+  {
+    accessor: "synonyms",
+    Header: "Synonyms",
+    minWidth: 200,
+  },
+];
+
+export function groupStringsByCondition(
+  strings: string[],
+  condition: (str: string) => boolean
+): [Set<string>, Set<string>] {
+  return strings.reduce(
+    (lists: [Set<string>, Set<string>], currentString: string) => {
+      if (condition(currentString)) {
+        lists[0].add(currentString); // Add to the first set if condition is true
+      } else {
+        lists[1].add(currentString); // Add to the second set if condition is false
+      }
+      return lists;
+    },
+    [new Set([]), new Set([])] // Initialize with two empty string sets
+  );
+}
+
+// TODO: move this and the fetchMetadata used by Dose Curves
+// and the Heatmap into a shared frontend module!!!
+export async function fetchMetadata<T>(
+  typeName: string,
+  indices: string[] | null,
+  columns: string[] | null,
+  bbapi: typeof breadboxAPI,
+  identifier: "label" | "id" = "id"
+) {
+  const dimType = await cached(bbapi).getDimensionType(typeName);
+  if (!dimType?.metadata_dataset_id) {
+    throw new Error(`No metadata for ${typeName}`);
+  }
+
+  let args;
+  if (indices && indices.length > 0) {
+    args = { indices, identifier, columns };
+  } else {
+    args = { indices: null, identifier: null, columns };
+  }
+  return cached(bbapi).getTabularDatasetData(
+    dimType.metadata_dataset_id,
+    args
+  ) as Promise<T>;
+}
+
+export function generateTickLabels(
+  columnNames: string[],
+  selectedColumnIndices: Set<number>,
+  showFullXAxisTickLabels: boolean
+): string[] {
+  // Initialize output array with empty strings
+  const tickvals: string[] = new Array(columnNames.length).fill("");
+
+  if (selectedColumnIndices.size === 0) {
+    return tickvals;
+  }
+
+  // Convert Set to sorted array for easier processing
+  const sortedIndices = Array.from(selectedColumnIndices).sort((a, b) => a - b);
+
+  // Find contiguous subsets
+  const contiguousSubsets: number[][] = [];
+  let currentSubset: number[] = [sortedIndices[0]];
+
+  for (let i = 1; i < sortedIndices.length; i++) {
+    if (sortedIndices[i] === sortedIndices[i - 1] + 1) {
+      // Contiguous - add to current subset
+      currentSubset.push(sortedIndices[i]);
+    } else {
+      // Not contiguous - start new subset
+      contiguousSubsets.push(currentSubset);
+      currentSubset = [sortedIndices[i]];
+    }
+  }
+  // Don't forget the last subset
+  contiguousSubsets.push(currentSubset);
+
+  // For each subset, find middle index and place subset size there
+  contiguousSubsets.forEach((subset) => {
+    if (subset.length === 1 || showFullXAxisTickLabels) {
+      subset.forEach((j) => {
+        tickvals[j] = columnNames[j];
+      });
+    } else {
+      const middleIndex = Math.floor((subset.length - 1) / 2);
+      const actualColumnIndex = subset[middleIndex];
+      tickvals[actualColumnIndex] = `(${subset.length.toString()})`;
+    }
+  });
+
+  return tickvals;
+}
+
+export function getSelectedColumns(
+  heatmapData: HeatmapFormattedData,
+  selectedGenes: Set<string>
+) {
+  const uniqueXs = new Set(heatmapData.x);
+  const out = new Set<number>();
+  [...uniqueXs].forEach((x: string, index: number) => {
+    if (x !== null && selectedGenes.has(x)) {
+      out.add(index);
+    }
+  });
+  return out;
+}
diff --git a/frontend/packages/portal-frontend/webpack.common.js b/frontend/packages/portal-frontend/webpack.common.js
index 1a68a28c3..68be914e8 100644
--- a/frontend/packages/portal-frontend/webpack.common.js
+++ b/frontend/packages/portal-frontend/webpack.common.js
@@ -28,6 +28,7 @@ module.exports = {
     peddepPage: "./src/apps/peddepPage.tsx",
     anchorScreenDashboard: "./src/apps/anchorScreenDashboard.tsx",
     doseViabilityPrototype: "./src/apps/doseViabilityPrototype.tsx",
+    geneTea: "./src/apps/geneTea.tsx",
   },
 
   plugins: [
diff --git a/portal-backend/depmap/app.py b/portal-backend/depmap/app.py
index 2f374701f..313643584 100644
--- a/portal-backend/depmap/app.py
+++ b/portal-backend/depmap/app.py
@@ -86,6 +86,7 @@
 from depmap.theme import include_theme_snippet
 from depmap.context_explorer.views import blueprint as context_explorer_blueprint
 from depmap.data_page.views import blueprint as data_page_blueprint
+from depmap.gene_tea.views import blueprint as gene_tea_blueprint
 from flask_hunter_profile.flask_blueprint import (
     flask_hunter_profile as flask_hunter_profile_blueprint,
 )
@@ -337,6 +338,7 @@ def register_blueprints(app: Flask):
     app.register_blueprint(data_page_blueprint)
     app.register_blueprint(flask_hunter_profile_blueprint)
     app.register_blueprint(anchor_screen_dashboard_blueprint)
+    app.register_blueprint(gene_tea_blueprint)
 
     saved_handlers = app.handle_exception, app.handle_user_exception
     app.register_blueprint(api_blueprint)
diff --git a/portal-backend/depmap/gene_tea/__init__.py b/portal-backend/depmap/gene_tea/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/portal-backend/depmap/gene_tea/views.py b/portal-backend/depmap/gene_tea/views.py
new file mode 100644
index 000000000..9e0b2f8bd
--- /dev/null
+++ b/portal-backend/depmap/gene_tea/views.py
@@ -0,0 +1,19 @@
+from flask import (
+    Blueprint,
+    render_template,
+    abort,
+    current_app,
+)
+
+
+# TODO: Do we want the route to be gene_tea or genetea?
+blueprint = Blueprint(
+    "gene_tea", __name__, url_prefix="/gene_tea", static_folder="../static"
+)
+
+
+@blueprint.route("/")
+def view_gene_tea():
+    if not current_app.config["ENABLED_FEATURES"].gene_tea_portal_page:
+        abort(404)
+    return render_template("gene_tea/index.html")
diff --git a/portal-backend/depmap/settings/settings.py b/portal-backend/depmap/settings/settings.py
index 85afd7a39..b3d6754c1 100755
--- a/portal-backend/depmap/settings/settings.py
+++ b/portal-backend/depmap/settings/settings.py
@@ -194,6 +194,14 @@ def target_discovery_app(self):
     def gene_tea(self):
         return self.is_prerelease_env()
 
+    # NOTE: This feature flag is separated out from the above
+    # "gene_tea" feature flag. "gene_tea" refers to the data
+    # explorer integration of gene_tea; whereas, gene_tea_portal_page
+    # refers to the portal gene tea tool page.
+    @property
+    def gene_tea_portal_page(self):
+        return self.is_skyros()
+
     @property
     def anchor_screen_dashboard(self):
         return self.is_dmc_like()
diff --git a/portal-backend/depmap/templates/gene_tea/index.html b/portal-backend/depmap/templates/gene_tea/index.html
new file mode 100644
index 000000000..1e853742f
--- /dev/null
+++ b/portal-backend/depmap/templates/gene_tea/index.html
@@ -0,0 +1,22 @@
+{% extends "full_page.html" %}
+
+{% block page_title %}
+  GeneTEA - Tea Party
+{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{{ ASSET_URL }}" />
+{% endblock %}
+
+{% block meta_description %} GeneTEA tool {% endblock %}
+
+{% block content %}
+    <div class='full-screen-div'>
+        {% include "nav_footer/nav.html" %}
+        <div id="react-gene-tea"></div>
+    </div>
+{% endblock %}
+
+{% block js %}
+    <script src="{{ webpack_url('geneTea.js') }}"></script>
+{% endblock %}
diff --git a/portal-backend/depmap/templates/nav_footer/common_nav_elements.html b/portal-backend/depmap/templates/nav_footer/common_nav_elements.html
index dfb5eb9e2..3987a83f3 100644
--- a/portal-backend/depmap/templates/nav_footer/common_nav_elements.html
+++ b/portal-backend/depmap/templates/nav_footer/common_nav_elements.html
@@ -45,6 +45,9 @@
             {% if config.ENABLED_FEATURES.compound_dashboard_app %}
               <li><a href="{{ url_for('compound_dashboard.view_compound_dashboard') }}">Compound Dashboard <i class="alpha-tag"><b>Alpha</b></i></a></li>
             {% endif %}
+            {% if false %}
+              <li><a href="{{ url_for('gene_tea.view_gene_tea') }}">Tea Party <i class="alpha-tag"><b>Alpha</b></i></a></li>
+            {% endif %}
             {% if config.ENABLED_FEATURES.anchor_screen_dashboard %}
               <li><a href="{{ url_for('anchor_screen_dashboard.view_anchor_screen_dashboard') }}">Anchor Screen Dashboard <i class="alpha-tag"><b>Alpha</b></i></a></li>
             {% endif %}