diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip
index 88b9834..c59b8b2 100644
Binary files a/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip and b/data/quantile/quantile_data_2018-2022_ref-2022_q10.csv.zip differ
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip
index f654e74..d5f73bb 100644
Binary files a/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip and b/data/quantile/quantile_data_2018-2022_ref-2022_q3.csv.zip differ
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip
index 47a8046..0c7a37e 100644
Binary files a/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip and b/data/quantile/quantile_data_2018-2022_ref-2022_q4.csv.zip differ
diff --git a/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip b/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip
index 51dd662..7eeb227 100644
Binary files a/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip and b/data/quantile/quantile_data_2018-2022_ref-2022_q5.csv.zip differ
diff --git a/src/pages/mapPage.js b/src/pages/mapPage.js
index 06618c0..8dbae34 100644
--- a/src/pages/mapPage.js
+++ b/src/pages/mapPage.js
@@ -6,7 +6,7 @@ import choices from "https://cdn.jsdelivr.net/npm/choices.js@10.2.0/+esm";
 
 import { EpiTrackerData } from "../utils/EpiTrackerData.js"
 import { State } from '../utils/State.js';
-import { addPopperTooltip, addTippys, colorRampLegendPivot, createOptionSorter, scaleGradient, popup, plotDataTable, createDropdownButton } from '../utils/helper.js';
+import { addPopperTooltip, addTippys, colorRampLegendPivot, createOptionSorter, scaleGradient, popup, plotDataTable, createDropdownButton, minorPopup } from '../utils/helper.js';
 import { hookCheckbox, hookSelectChoices } from '../utils/input2.js';
 import { createChoroplethPlot } from '../plots/mapPlots.js';
 import { toggleLoading } from '../utils/download.js';
@@ -301,18 +301,19 @@ class MapApplication {
   }
 
   addColorSettingsPopup() {
-    const colorSettingsTooltip = addPopperTooltip(this.elems.innerDashboard);
 
-    let tooltipShown = false;
-    this.elems.buttonColorSettings.addEventListener("click", () => {
-      this.elems.colorSettings.style.display = "flex";
-      if (tooltipShown) {
-        colorSettingsTooltip.hide();
-      } else {
-        colorSettingsTooltip.show(this.elems.buttonColorSettings, this.elems.colorSettings);
-      }
-      tooltipShown = !tooltipShown;
-    })
+    // const colorSettingsTooltip = addPopperTooltip(this.elems.innerDashboard);
+
+    // let tooltipShown = false;
+    // this.elems.buttonColorSettings.addEventListener("click", () => {
+    //   this.elems.colorSettings.style.display = "flex";
+    //   if (tooltipShown) {
+    //     colorSettingsTooltip.hide();
+    //   } else {
+    //     colorSettingsTooltip.show(this.elems.buttonColorSettings, this.elems.colorSettings);
+    //   }
+    //   tooltipShown = !tooltipShown;
+    // })
 
     // Add color scheme gradients
     this.state.schemeOptions = Object.entries(formatName("colorSchemes")).map(
@@ -327,11 +328,6 @@ class MapApplication {
         return { value: k, label: div.outerHTML };
       });
 
-    this.elems.buttonColorSettingsClose.addEventListener("click", () => {
-      tooltipShown = false;
-      colorSettingsTooltip.hide()
-    });
-
     const outlierCutoffRange = document.getElementById("outlier-cutoff-range");
     const outlierCutoffRangeText = document.getElementById(
       "outlier-cutoff-range-text"
@@ -342,6 +338,9 @@ class MapApplication {
     });
     outlierCutoffRange.value = this.state.outlierCutoff;
     outlierCutoffRangeText.innerText = "±" + this.state.outlierCutoff + "σ";
+
+    minorPopup(this.elems.innerDashboard, this.elems.buttonColorSettings, this.elems.colorSettings, "Color Settings");
+
   }
 
   async createMapTooltip() {
diff --git a/src/pages/quantilePage.js b/src/pages/quantilePage.js
index ae06491..db56a68 100644
--- a/src/pages/quantilePage.js
+++ b/src/pages/quantilePage.js
@@ -8,7 +8,7 @@ import { start } from "../../main.js";
 import { EpiTrackerData } from "../utils/EpiTrackerData.js";
 import { State } from "../utils/State.js";
 import { checkableLegend } from "../utils/checkableLegend.js";
-import { downloadElementAsImage } from "../utils/download.js";
+import {  downloadElementAsImage } from "../utils/download.js";
 import {
   createDropdownDownloadButton,
   createOptionSorter,
@@ -17,13 +17,19 @@ import {
   grayOutSexSelectionBasedOnCause,
   CAUSE_SEX_MAP,
   plotDataTable,
-  addPopperTooltip
+  addPopperTooltip,
+  minorPopup,
+  addTippys,
+  popup,
+  createDropdownButton,
+  downloadDataWithPopup
 } from "../utils/helper.js";
 import { hookSelectChoices, hookCheckbox } from "../utils/input2.js";
 import { plotQuantileScatter } from "../plots/quantilePlots.js";
 import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.8.5/+esm";
 import { quantileTableColumns } from "../utils/tableDefinitions.js";
 import { formatName } from "../utils/nameFormat.js";
+import { COLORS } from "../utils/color.js";
 
 Tabulator.registerModule([FrozenColumnsModule, SortModule]);
 
@@ -42,11 +48,12 @@ const QUANTILE_NUMBERS = ["4", "5", "10"];
 const NUMERIC_MEASURES = [
   "age_adjusted_rate",
   "crude_rate",
-  "age_adjusted_rate_ratio (ref=low)",
-  "age_adjusted_rate_ratio (ref=high)",
-  "crude_rate_ratio(ref=low)",
-  "crude_rate_ratio (ref=high)",
+  "age_adjusted_rate_ratio_ref-low",
+  "age_adjusted_rate_ratio_ref-high",
+  "crude_rate_ratio_ref-low",
+  "crude_rate_ratio_ref-high",
 ];
+const TABLE_FIELDS = []
 
 // The default state, shown if no URL params.
 const INITIAL_STATE = {
@@ -65,6 +72,7 @@ const INITIAL_STATE = {
 
 let state, dataManager;
 let elements, choices, staticData;
+let currentData;
 
 export function init() {
   toggleLoading(true);
@@ -77,7 +85,7 @@ export function init() {
   staticData = {};
 
   initializeState();
-  addDownloadButton();
+
   const selectSexElement = document.getElementById("select-select-sex");
   if (selectSexElement) {
     elements.selectChoicesListSex =
@@ -87,16 +95,39 @@ export function init() {
   elements.selectRace = document.getElementById("select-select-race");
   elements.graphNavLink = document.getElementById("graph-nav-link");
   elements.tableNavLink = document.getElementById("table-nav-link");
+  elements.dashboardContainer = document.getElementById("dashboard-container");
   elements.graphContainer = document.getElementById("plot-container");
+  elements.quantileContainer = document.getElementById("quantile-container");
   elements.plotContainer = document.getElementById("plot-quantiles");
   elements.tableContainer = document.getElementById("table-container");
   elements.plotLegend = document.getElementById("plot-legend");
-  elements.tableNavLink.addEventListener("click", () => changeView("table"));
-  elements.graphNavLink.addEventListener("click", () => changeView("plot"));
+  elements.legendContainer = document.getElementById("legend-container");
+  elements.settingsDropdown = document.getElementById("settings-dropdown");
+  // elements.tableNavLink.addEventListener("click", () => changeView("table"));
+  // elements.graphNavLink.addEventListener("click", () => changeView("plot"));
   elements.groupDownloadButton = document.querySelector(
     "#group-download-container button"
   );
-  elements.graphTitle = document.getElementById("plot-title");
+  elements.title = document.getElementById("title");
+  elements.buttonSettings = document.getElementById("button-options");
+  elements.buttonTable = document.getElementById("button-table");
+  elements.buttonDownloadData = document.getElementById("button-download-data");
+  elements.buttonDownloadImage = document.getElementById("button-download-image");
+  elements.imageTemplate = document.getElementById("img-template");
+  elements.imageTitle = document.getElementById("img-title");
+  elements.imageLegend = document.getElementById("img-legend");
+  elements.imagePlot = document.getElementById("img-plot");
+  elements.imageSource = document.getElementById("img-source");
+
+  addControlsLogic();
+  addTippys();
+
+  // TODO: Remove
+  const content = document.createElement("div");
+  content.style.height = "100%";
+  content.style.width = "100%";
+  content.style.backgroundColor = "pink";
+
 
   Promise.all([
     d3.json("../data/quantile/quantile_details.json"),
@@ -207,7 +238,7 @@ function initializeState() {
     { id: "#select-select-race", propertyName: "race" },
     { id: "#select-select-sex", propertyName: "sex" },
     { id: "#select-select-cause", propertyName: "cause", searchable: true, format: causeFormat },
-    { id: "#select-select-year", propertyName: "year", forceEnd: "2018-2022" },
+    // { id: "#select-select-year", propertyName: "year", forceEnd: "2018-2022" },
     { id: "#select-measure", propertyName: "measure" },
     {
       id: "#select-quantile-field",
@@ -239,7 +270,7 @@ function initializeState() {
   hookCheckbox("#check-start-zero", state, "startZero");
 
   state.subscribe("query", queryUpdated);
-  state.subscribe("plotConfig", plotConfigUpdated);
+  state.subscribe("plotConfig", (d) => plotConfigUpdated(d));
 }
 
 // =================================
@@ -284,16 +315,24 @@ function initialDataLoad(mortalityData, quantileDetails) {
   state.trigger("query");
 
   let resizeTimeout;
+  let previousSize = [-1,-1];
   const resizeObserver = new ResizeObserver(() => {
+    const rect = elements.quantileContainer.getBoundingClientRect();    
+
     if (resizeTimeout) {
       clearTimeout(resizeTimeout);
     }
 
-    resizeTimeout = setTimeout(() => {
-      state.trigger("plotConfig");
-    }, 25);
+    if (rect.width != previousSize[0] || rect.height != previousSize[1]) {
+      elements.plotContainer.innerHTML = '';
+      resizeTimeout = setTimeout(() => {
+        state.trigger("plotConfig");
+      }, 50);
+      previousSize = [rect.width, rect.height]
+
+    }
   });
-  resizeObserver.observe(elements.plotContainer);
+  resizeObserver.observe(elements.quantileContainer);
 
   setInputsEnabled();
 }
@@ -404,7 +443,14 @@ async function queryUpdated(query) {
 
   updateLegend(data, query);
 }
-function plotConfigUpdated(plotConfig) {
+function plotConfigUpdated(plotConfig, plotContainer=null, legendContainer=null) {
+  if (!plotContainer) {
+    plotContainer = elements.plotContainer;
+  }
+  if (!legendContainer) {
+    legendContainer = elements.legendContainer;
+  }
+
   const measureDetails =  formatName("quantile_fields", plotConfig.query.quantileField, "all");
 
   const xTickFormat = (_, i) => {
@@ -426,6 +472,7 @@ function plotConfigUpdated(plotConfig) {
       legendCheckSet.has(d[plotConfig.query.compareColor])
     );
   }
+  currentData = data;
   // if (plotConfig.query.compareFacet == "race" && plotConfig.query.compareColor == "none") {
   //   const legendCheckSet = new Set(plotConfig.legendCheckValues);
   //   data = plotConfig.mortalityData.filter((d) =>
@@ -433,10 +480,20 @@ function plotConfigUpdated(plotConfig) {
   //   );
   // }
 
-  const colorFunction =
-    plotConfig.query.compareColor != "none"
-      ? (d) => d[plotConfig.query.compareColor]
-      : null;
+  const colorFunction = (row) => {
+    if (plotConfig.query.compareColor == "race") {
+      return COLORS.race[row.race];
+    } else if (plotConfig.query.compareColor == "sex") {
+      return COLORS.sex[row.sex];
+    } else {
+      return COLORS.base;
+    }
+  }
+
+  // const colorFunction =
+  //   plotConfig.query.compareColor != "none"
+  //     ? (d) => d[plotConfig.query.compareColor]
+  //     : null;
 
   let colorDomainValues = null;
   if (colorFunction) {
@@ -452,118 +509,87 @@ function plotConfigUpdated(plotConfig) {
   const colorTickFormat =
     plotConfig.query.compareColor == "race" ? formatRace : (d) => d;
 
-  const legendContainer = document.getElementById("setting-legend");
-
-  if (!state.onSettingsClick) {
-    const topbarElement = document.getElementById("topbar-cnt");
-    const settingsTooltip = addPopperTooltip(topbarElement);
-    const settingsElement = document.getElementById(
-      "settings-dropdown"
-    );
-    const settingsClose = document.getElementById("settings-close");
-
-    let tooltipShown = false;
-    state.onSettingsClick = (settingsButton) => {
-      settingsElement.style.display = "flex";
-      if (tooltipShown) {
-        settingsTooltip.hide();
-      } else {
-        settingsTooltip.show(settingsButton, settingsElement);
-      }
-      tooltipShown = !tooltipShown;
-    };
-
-    settingsClose.addEventListener("click", () => {
-      tooltipShown = !tooltipShown;
-      settingsTooltip.hide();
-    });
-  }
+  // if (!state.onSettingsClick) {
+  //   const topbarElement = document.getElementById("ex-settings-card");
+  //   const settingsTooltip = addPopperTooltip(topbarElement);
+  //   const settingsElement = document.getElementById(
+  //     "settings-dropdown"
+  //   );
+  //   const settingsClose = document.getElementById("settings-close");
+
+  //   let tooltipShown = false;
+  //   state.onSettingsClick = (settingsButton) => {
+  //     settingsElement.style.display = "flex";
+  //     if (tooltipShown) {
+  //       settingsTooltip.hide();
+  //     } else {
+  //       settingsTooltip.show(settingsButton, settingsElement);
+  //     }
+  //     tooltipShown = !tooltipShown;
+  //   };
+
+  //   settingsClose.addEventListener("click", () => {
+  //     tooltipShown = !tooltipShown;
+  //     settingsTooltip.hide();
+  //   });
+  // }
 
   if (state.mortalityData.length == 0) {
-    elements.plotContainer.innerHTML =
-      "<i> There is no data for this selection. </i>";
-    elements.tableContainer.innerHTML =
+    plotContainer.innerHTML =
       "<i> There is no data for this selection. </i>";
   } else {
-    const isActiveTable = elements.tableNavLink.classList.contains("active");
-
-    if (isActiveTable) {
-      plotTable();
-    } else {
-      plotQuantileScatter(elements.plotContainer, legendContainer, data, {
-        valueField: plotConfig.measure,
-        facet:
-          plotConfig.query.compareFacet != "none"
-            ? plotConfig.query.compareFacet
-            : null,
-        intervalFields: [
-          plotConfig.measure + "_low",
-          plotConfig.measure + "_high",
-        ],
-        color: colorFunction,
-        drawLines: state.showLines,
-        yStartZero: state.startZero,
-        xLabel: `${measureDetails.measure} (${
-          measureDetails.unit === "Proportion"
-            ? "Percentage"
-            : measureDetails.unit
-        })`,
-        yLabel: formatName("measures", plotConfig.measure),
-        facetLabel:  formatName("fields", state.compareFacet),
-        xTickFormat: xTickFormat,
-        quantileFieldUnit: quantileFieldUnit(),
-        tooltipFields: [
-          plotConfig.query.compareFacet,
-          plotConfig.query.compareColor,
-        ].filter((d) => d != "none"),
-        colorDomain: colorDomainValues,
-        facetTickFormat,
-        colorTickFormat,
-        onSettingsClick: state.onSettingsClick,
-      });
-    }
+    console.log(data, plotConfig.measure)
+    plotQuantileScatter(plotContainer, legendContainer, data, {
+      valueField: plotConfig.measure,
+      facet:
+        plotConfig.query.compareFacet != "none"
+          ? plotConfig.query.compareFacet
+          : null,
+      intervalFields: [
+        plotConfig.measure + "_low",
+        plotConfig.measure + "_high",
+      ],
+      color: colorFunction,
+      drawLines: state.showLines,
+      yStartZero: state.startZero,
+      xLabel: `${measureDetails.name} (${
+        measureDetails.unit === "Proportion"
+          ? "Percentage"
+          : measureDetails.unit
+      })`,
+      yLabel: formatName("measures", plotConfig.measure),
+      facetLabel:  formatName("fields", state.compareFacet),
+      xTickFormat: xTickFormat,
+      quantileFieldUnit: quantileFieldUnit(),
+      tooltipFields: [
+        plotConfig.query.compareFacet,
+        plotConfig.query.compareColor,
+      ].filter((d) => d != "none"),
+      colorDomain: colorDomainValues,
+      facetTickFormat,
+      colorTickFormat,
+      onSettingsClick: state.onSettingsClick,
+    });
   }
 
-  updateGraphTitle();
+  updateTitle();
   toggleLoading(false);
 }
 
+
+
 // =================================
 // Other inputs
 // =================================
 
-function updateLegend(data, query) {
-  const legendContainer = document.getElementById("plot-legend");
-  legendContainer.innerHTML = ``;
-
-  // if (query.compareFacet == "race" && query.compareColor == "none") {
-  //   const facetDomainValues = [
-  //     ...new Set(data.map((d) => d[query.compareFacet])),
-  //   ].sort();
-  //   const checkedValueSet = new Set(state.legendCheckValues);
-  //   let selectedValues = facetDomainValues.filter((d) =>
-  //     checkedValueSet.has(d)
-  //   );
-  //   if (selectedValues.length == 0) selectedValues = facetDomainValues;
-
-  //   const formatRace = (d) => formatName("race", d, "formatted");
-  //   const tickFormat =
-  //     query.compareFacet == "race" ? formatRace : (d) => d;
-  //   const legend = checkableLegend(
-  //     facetDomainValues,
-  //     Array(10).fill("#695ACD"),
-  //     selectedValues,
-  //     tickFormat,
-  //     true
-  //   );
-  //   legendContainer.appendChild(legend);
+function updateLegend(data, query, legendContainer=null) {
+  if (!legendContainer) {
+    legendContainer = document.getElementById("plot-legend");
+    elements.legendContainer.style.display = query.compareColor == "none" ? "none" : "flex";
+  }
 
-  //   legend.addEventListener("change", () => {
-  //     state.legendCheckValues = legend.getValues();
-  //   });
+  legendContainer.innerHTML = ``;
 
-  //   state.legendCheckValues = legend.getValues();
-  // }
   
   if (query.compareColor != "none") {
     const colorDomainValues = [
@@ -575,12 +601,21 @@ function updateLegend(data, query) {
     );
     if (selectedValues.length == 0) selectedValues = colorDomainValues;
 
-    const formatRace = (d) => formatName("race", d, "formatted");
+    const formatRace = (d) => formatName("race", d, "half_short");
     const colorTickFormat =
       query.compareColor == "race" ? formatRace : (d) => d;
+    const colors = colorDomainValues.map(value => {
+      if (query.compareColor == "race") {
+        return COLORS.race[value];
+      } else if (query.compareColor == "sex") {
+        return COLORS.sex[value];
+      } else {
+        return COLORS.base;
+      }
+    })
     const legend = checkableLegend(
       colorDomainValues,
-      d3.schemeTableau10,
+      colors,
       selectedValues,
       colorTickFormat,
       true
@@ -595,62 +630,87 @@ function updateLegend(data, query) {
   }
 }
 
-function changeView(view) {
-  toggleLoading(true);
-
-  if (view == "plot") {
-    elements.tableNavLink.classList.remove("active");
-    elements.graphNavLink.classList.add("active");
-    elements.graphContainer.style.display = "flex";
-    elements.tableContainer.style.display = "none";
-    elements.plotLegend.style.display = "block";
-
-    state.trigger("plotConfig"); // Trigger a redraw so sizing is correct.
-  } else if (view == "table") {
-    elements.graphNavLink.classList.remove("active");
-    elements.tableNavLink.classList.add("active");
-    elements.graphContainer.style.display = "none";
-    elements.tableContainer.style.display = "block";
-    elements.plotLegend.style.display = "none";
-
-    if (state.mortalityData.length > 0) {
-      plotTable();
-    }
-  }
-
-  toggleLoading(false);
-}
 
 // =================================
 // Helper functions
 // =================================
 
-function addDownloadButton() {
-  const baseFilename = "epitracker_quantile";
 
-  const groupDownloadContainer = document.getElementById("download-container");
-  const downloadButton = createDropdownDownloadButton(false, [
-    {
-      label: "Download data (CSV)",
-      listener: () =>
-        downloadMortalityData(state.mortalityData, baseFilename, "csv"),
-    },
-    {
-      label: "Download data (TSV)",
-      listener: () =>
-        downloadMortalityData(state.mortalityData, baseFilename, "tsv"),
-    },
-    {
-      label: "Download data (JSON)",
-      listener: () =>
-        downloadMortalityData(state.mortalityData, baseFilename, "json"),
-    },
-    { label: "Download plot (PNG)", listener: downloadGraph },
-    { label: "Download plot (SVG)", listener: downloadGraphSVG },
+// Add all the various control logic
+function addControlsLogic() {
+  // Add plot settings topbar popup
+  minorPopup(elements.dashboardContainer, elements.buttonSettings, elements.settingsDropdown, "Plot Settings");
+
+  // Create table popup
+  elements.buttonTable.addEventListener("click", () => {
+    const content = document.createElement("div");
+    content.className = "table-popup-content";
+
+    const tableTopbar = document.createElement("div");
+    tableTopbar.classList.add("table-topbar");
+     
+    const tableTitle = document.createElement("div");
+    tableTitle.classList.add("table-title");
+    tableTitle.innerText = elements.title.innerText;
+    tableTopbar.appendChild(tableTitle);
+
+    const downloadButton = document.createElement("div");
+    downloadButton.className = "settings-button fa-solid fa-download";
+    tableTopbar.appendChild(downloadButton);
+    content.appendChild(tableTopbar);
+
+    // Create a dropdown for data download (JSON/CSV)
+    createDropdownButton(downloadButton, [
+      { text: "Download JSON", callback: () => eventButtonDownloadData("json") },
+      { text: "Download CSV", callback: () => eventButtonDownloadData("csv") },
+      { text: "Download TSV", callback: () => eventButtonDownloadData("tsv") }
+    ]);
+
+    const tableContainer = document.createElement("div");
+    tableContainer.classList.add("table-container");
+    content.appendChild(tableContainer);
+
+    const fields = ["race", "sex", "cause", "quantile_field", "quantile", "quantile_range"]
+      .map(d => ({field: d, title: formatName("fields", d)}));
+    const measureFields = NUMERIC_MEASURES
+      .map(d => ({field: d, title: formatName("measures", d)}))
+
+    const contentRender = (width, height) => {
+      plotDataTable(currentData, tableContainer, {
+        columns: [...fields, ...measureFields]
+      });
+      return content
+    }
+  
+    popup(elements.dashboardContainer, contentRender, {
+      title: "Data Table", 
+      fillScreen: true,
+    });
+  })
+
+  // Create a dropdown for data download (JSON/CSV)
+  createDropdownButton(elements.buttonDownloadData, [
+    { text: "Download JSON", callback: () => eventButtonDownloadData("json") },
+    { text: "Download CSV", callback: () => eventButtonDownloadData("csv") },
+    { text: "Download TSV", callback: () => eventButtonDownloadData("tsv") }
+  ]);
+
+  createDropdownButton(elements.buttonDownloadImage, [
+    { text: "Download PNG", callback: () => eventButtonDownloadImage("png") },
+    { text: "Download SVG", callback: () =>eventButtonDownloadImage("svg") },
   ]);
-  groupDownloadContainer.appendChild(downloadButton);
+
+}
+
+function eventButtonDownloadData(format) {
+  downloadDataWithPopup(elements.dashboardContainer,currentData, "epitracker_quantile_data", format);
 }
 
+function eventButtonDownloadImage(format) {
+  downloadGraph(format)
+}
+
+
 function downloadGraphSVG() {
   const sourceElement = document.getElementById('plot-source')
   if (sourceElement) {
@@ -669,35 +729,13 @@ function downloadGraphSVG() {
   });
 }
 
-function downloadGraph() {
-  const temporaryContainer = elements.graphContainer.cloneNode(true);
-  const temporaryLegend = elements.plotLegend.cloneNode(true);
-  const temporaryTitle = elements.graphTitle.cloneNode(true);
 
-  const sourceSvgElement = elements.graphContainer.getElementsByTagName('svg')[0]
-  const sourceSvgElementHeight = sourceSvgElement.getBBox().height
-
-  const svgElement = temporaryContainer.getElementsByTagName('svg')[0]
-  svgElement.style.height = `${sourceSvgElementHeight}px`;
-
-  const legendChecks = temporaryLegend.querySelectorAll(".legend-check");
-  legendChecks.forEach((check) => {
-    if (!check.hasAttribute("checked")) {
-      check.style.display = "none";
-    }
-  });
-
-  const checkPaths = temporaryLegend.querySelectorAll(".legend-check path");
-  checkPaths.forEach((path) => (path.style.visibility = "hidden"));
-
-  const wrapperElement = document.createElement("div");
-  wrapperElement.appendChild(temporaryLegend);
-  wrapperElement.appendChild(temporaryTitle);
-  wrapperElement.appendChild(temporaryContainer);
-  const sourceDiv = document.createElement('div')
-  sourceDiv.innerText = 'the source...'
-  wrapperElement.appendChild(sourceDiv);
-  return downloadElementAsImage(wrapperElement, "epitracker-quantile-plot");
+function downloadGraph(format) {
+  elements.imageTitle.innerText = elements.title.innerText;
+  updateLegend(state.mortalityData, state.query, elements.imageLegend);
+  plotConfigUpdated(state.plotConfig, elements.imagePlot, elements.imageLegend);
+  downloadElementAsImage(elements.imageTemplate, "epitracker-quantile-plot", format);
+  // downloadElementAsImage(elements.imageTemplate, "epitracker-quantile-plot");
 }
 
 /**
@@ -750,7 +788,7 @@ function setInputsEnabled(enabled) {
     "select-select-race",
     "select-select-sex",
     "select-select-cause",
-    "select-select-year",
+    // "select-select-year",
     "select-measure",
   ]) {
     const element = document.getElementById(input);
@@ -766,73 +804,83 @@ function setInputsEnabled(enabled) {
   }
 }
 
-function plotTable() {
-  const pin = [
-    "cause",
-    "race",
-    "sex",
-    "quantile_field",
-    "quantile",
-    "quantile_range",
-  ].map((d) => ({ field: d, frozen: true }));
-  plotDataTable(state.mortalityData, elements.tableContainer, {
-    colDefinitions: pin,
-    columns: quantileTableColumns,
-  });
-}
 
 function toggleLoading(loading, soft = false) {
-  if (loading) {
-    document.getElementById("plot-container").style.opacity = soft
-      ? "0.5"
-      : "0";
-    document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0";
-    document.getElementById("loader-container").style.visibility = "visible";
-    document.getElementById("table-container").style.visibility = "hidden";
-  } else {
-    document.getElementById("plot-container").style.opacity = "1";
-    document.getElementById("plot-title").style.opacity = "1";
-    document.getElementById("loader-container").style.visibility = "hidden";
-    document.getElementById("table-container").style.visibility = "visible";
-  }
+  // TODO: Reimplement
+  // if (loading) {
+  //   document.getElementById("plot-container").style.opacity = soft
+  //     ? "0.5"
+  //     : "0";
+  //   document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0";
+  //   document.getElementById("loader-container").style.visibility = "visible";
+  //   document.getElementById("table-container").style.visibility = "hidden";
+  // } else {
+  //   document.getElementById("plot-container").style.opacity = "1";
+  //   document.getElementById("plot-title").style.opacity = "1";
+  //   document.getElementById("loader-container").style.visibility = "hidden";
+  //   document.getElementById("table-container").style.visibility = "visible";
+  // }
 }
-function updateGraphTitle() {
-  let compareString = [state.compareColor, state.compareFacet]
-    .filter((d) => d != "none")
-    .map((d) => formatName("fields", d).toLowerCase())
-    .join(" and ");
-  if (compareString != "") {
-    //compareString = "</br> Stratified by " + compareString;
+function updateTitle() {
+
+  const quantileNames = {"3": "tertile", "4": "quartile", "5": "quintile", "10": "decile"};
+
+  let title = `US ${formatName( "measures", state.measure, "verbose").toLowerCase()} by ${quantileNames[state.quantileNumber]} of county-level ${ formatName("quantile_fields", state.quantileField).toLowerCase()}`;
+  
+  let filterElements = [
+    state.year,
+    state.cause == "All" ? null : state.cause,
+    state.race == "All" ? null : state.race,
+    state.sex == "All" ? null : state.sex,
+  ].filter(d => d).map(d => d.toLowerCase());
+
+  if (filterElements.length > 0) {
+    title += `, ${filterElements.join(", ")}`;
+    
+
+  elements.title.innerText = title;
+
   }
-  const compareSet = new Set([state.compareColor, state.compareFacet]);
-  const selects = [
-    { name: "Year", value: state.year },
-    { name: "Cause of death", value: formatCauseName(state.cause) },
-    {
-      name: formatName("fields", "sex"),
-      value: state.sex,
-      exclude: compareSet.has("sex"),
-    },
-    {
-      name: formatName("fields", "race"),
-      value: state.race,
-      exclude: compareSet.has("race"),
-    },
-  ];
-  const selectsString = selects
-    .filter((d) => !d.exclude)
-    .map((d) => `${d.name}: ${d.value}`)
-    .join("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp");
-
-  const quantileMeasure = formatName("quantile_fields", state.quantileField); 
-  let measureName = formatName("measures", state.measure).toLowerCase(); 
-  measureName = measureName[0].toUpperCase() + measureName.slice(1);
-  const isNoneCompares = state.compareColor === 'none' && state.compareFacet === 'none'
-  const title = `${measureName} by ${compareString} and octile of US county characteristic: ${quantileMeasure} </br> ${selectsString}`;
-  const noneTitle = `${measureName} by quantile of US county characteristic: ${quantileMeasure} </br> ${selectsString}`;
-  elements.graphTitle.innerHTML = isNoneCompares ? noneTitle : title;
+  // TODO: Reimplement 
+
+  // let compareString = [state.compareColor, state.compareFacet]
+  //   .filter((d) => d != "none")
+  //   .map((d) => formatName("fields", d).toLowerCase())
+  //   .join(" and ");
+  // if (compareString != "") {
+  //   //compareString = "</br> Stratified by " + compareString;
+  // }
+  // const compareSet = new Set([state.compareColor, state.compareFacet]);
+  // const selects = [
+  //   { name: "Year", value: state.year },
+  //   { name: "Cause of death", value: formatCauseName(state.cause) },
+  //   {
+  //     name: formatName("fields", "sex"),
+  //     value: state.sex,
+  //     exclude: compareSet.has("sex"),
+  //   },
+  //   {
+  //     name: formatName("fields", "race"),
+  //     value: state.race,
+  //     exclude: compareSet.has("race"),
+  //   },
+  // ];
+  // const selectsString = selects
+  //   .filter((d) => !d.exclude)
+  //   .map((d) => `${d.name}: ${d.value}`)
+  //   .join("&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp");
+
+  // const quantileMeasure = formatName("quantile_fields", state.quantileField); 
+  // let measureName = formatName("measures", state.measure).toLowerCase(); 
+  // measureName = measureName[0].toUpperCase() + measureName.slice(1);
+  // const isNoneCompares = state.compareColor === 'none' && state.compareFacet === 'none'
+  // const title = `${measureName} by ${compareString} and octile of US county characteristic: ${quantileMeasure} </br> ${selectsString}`;
+  // const noneTitle = `${measureName} by quantile of US county characteristic: ${quantileMeasure} </br> ${selectsString}`;
+  // elements.graphTitle.innerHTML = isNoneCompares ? noneTitle : title;
 }
 
+
+
 function getAgeAdjustedRateData(data, row, key) {
   const dataSortedByQuantile = data
     .filter((i) => i[key].toLowerCase() === row[key].toLowerCase())
@@ -842,16 +890,16 @@ function getAgeAdjustedRateData(data, row, key) {
   const firstIndex = 0;
 
   if (dataSortedByQuantile.length) {
-    row["age_adjusted_rate_ratio (ref=low)"] = +parseFloat(
+    row["age_adjusted_rate_ratio_ref-low"] = +parseFloat(
       row.age_adjusted_rate / dataSortedByQuantile[firstIndex].age_adjusted_rate
     ).toFixed(2);
-    row["age_adjusted_rate_ratio (ref=high)"] = +parseFloat(
+    row["age_adjusted_rate_ratio_ref-high"] = +parseFloat(
       row.age_adjusted_rate / dataSortedByQuantile[lastIndex].age_adjusted_rate
     ).toFixed(2);
-    row["crude_rate_ratio(ref=low)"] = +parseFloat(
+    row["crude_rate_ratio_ref-low"] = +parseFloat(
       row.crude_rate / dataSortedByQuantile[firstIndex].crude_rate
     ).toFixed(2);
-    row["crude_rate_ratio (ref=high)"] = +parseFloat(
+    row["crude_rate_ratio_ref-high"] = +parseFloat(
       row.crude_rate / dataSortedByQuantile[lastIndex].crude_rate
     ).toFixed(2);
   }
diff --git a/src/plots/quantilePlots.js b/src/plots/quantilePlots.js
index 49e1d14..967bb3a 100644
--- a/src/plots/quantilePlots.js
+++ b/src/plots/quantilePlots.js
@@ -30,8 +30,10 @@ export function plotQuantileScatter(container, settingLegend, data, options={})
 
   options.yLabel = options.yLabel != null ? options.yLabel : options.valueField
 
+  container.innerHTML = `` 
+
   //const containerWidth = container.getBoundingClientRect().width
-  const height = Math.max(options.minHeight, container.getBoundingClientRect().height*.95) // The .95 multiplier is needed 
+  const height = Math.max(options.minHeight, container.getBoundingClientRect().height*.98) // The multiplier is needed 
                                                                                            // to prevent the SVG from resizing 
                                                                                            // the flex box incorrectly.
                                                                                            
@@ -119,20 +121,19 @@ export function plotQuantileScatter(container, settingLegend, data, options={})
   const plot = Plot.plot(plotOptions)
   plot.style.minWidth = '900px'
 
-  container.innerHTML = `` 
   container.appendChild(plot) 
 
   addInteractivity(container, plot, data, options.valueField, options.tooltipFields, options.nameMappings)
 
   plot.removeAttribute("viewBox")
 
-  const settingsButton = document.createElement("i");
-  settingsButton.className = "fa-solid fa-gear";
+  // const settingsButton = document.createElement("i");
+  // settingsButton.className = "fa-solid fa-gear";
 
-  settingsButton.addEventListener("click", () => options.onSettingsClick(settingsButton))
+  // settingsButton.addEventListener("click", () => options.onSettingsClick(settingsButton))
 
-  settingLegend.innerHTML = ``;
-  settingLegend.appendChild(settingsButton);
+  // settingLegend.innerHTML = ``;
+  // settingLegend.appendChild(settingsButton);
 
 
   return {plot}
@@ -160,7 +161,7 @@ function addInteractivity(container, plot, plotData, measure, tooltipFields) {
         const fieldLabel = formatName("fields", field)
         return text += `<div style="display: flex; justify-content: space-between;"><b style="margin-right: 10px">${fieldLabel}</b>${row[field]}</div>`})
 
-      const measureLabel = formatName("measures", measure)
+      const measureLabel = formatName("measures", measure, "short")
       text += `<div style="display: flex; justify-content: space-between;"><b style="margin-right: 10px">${measureLabel}</b>${row[measure]}</div>`
       tooltip.show(element, text)
     }
diff --git a/src/utils/checkableLegend.js b/src/utils/checkableLegend.js
index 41f8338..0abf54b 100644
--- a/src/utils/checkableLegend.js
+++ b/src/utils/checkableLegend.js
@@ -111,7 +111,7 @@ function legendCheck(color, label, checked=true, size=25) {
   labelElement.style.fontSize = "0.8em"
   labelElement.style.pointerEvents = "none"
   labelElement.style.userSelect = "none"
-  labelElement.style.maxWidth = "100px"
+  labelElement.style.maxWidth = "140px"
   labelElement.style.textAlign = "center"
   labelElement.style.flex = "1"
   
diff --git a/src/utils/color.js b/src/utils/color.js
index 328c2b8..c314546 100644
--- a/src/utils/color.js
+++ b/src/utils/color.js
@@ -23,5 +23,6 @@ export const COLORS = {
     "15-24": "#950b30",
     "5-14": "#950b30",
     "0-4": "#950b30"
-  }
+  },
+  base: "#950b30",
 }
\ No newline at end of file
diff --git a/src/utils/download.js b/src/utils/download.js
index 9e6d97c..cfe2256 100644
--- a/src/utils/download.js
+++ b/src/utils/download.js
@@ -1,5 +1,6 @@
 import {json2other} from "./../shared.js";
 import html2canvas from 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/+esm'
+import domToImage from 'https://cdn.jsdelivr.net/npm/dom-to-image@2.6.0/+esm'
 
 export function toggleLoading(spinnerId, downloadId, isShow) {
   const spinner = document.getElementById(spinnerId)
@@ -15,37 +16,74 @@ export function toggleLoading(spinnerId, downloadId, isShow) {
   }
 }
 
-export function downloadElementAsImage(element, fileName, removeAfter=true) {
-  const temporaryDiv = document.createElement("div")
-  temporaryDiv.style.position = "fixed"
-  temporaryDiv.style.left = "-10000px"
-  temporaryDiv.style.right = "-10000px"
-  temporaryDiv.style.width = "fit-content"
-
-  temporaryDiv.appendChild(element)
-  document.body.appendChild(temporaryDiv)
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      html2canvas(element).then(function(canvas) {
-        downloadImage(canvas, fileName)
-        if (removeAfter) {
-          temporaryDiv.remove()
-        }
-        resolve()
-      });
-    }, 10)
-  })
-}
+// export function downloadElementAsImage(element, fileName, removeAfter=true) {
+//   const temporaryDiv = document.createElement("div")
+//   temporaryDiv.style.position = "fixed"
+//   temporaryDiv.style.left = "-10000px"
+//   temporaryDiv.style.right = "-10000px"
+//   temporaryDiv.style.width = "fit-content"
+
+//   temporaryDiv.appendChild(element)
+//   document.body.appendChild(temporaryDiv)
+
+//   return new Promise((resolve) => {
+//     setTimeout(() => {
+//       html2canvas(element, {pixelRatio: 4}).then(function(canvas) {
+//         downloadImage(canvas, fileName)
+//         if (removeAfter) {
+//           temporaryDiv.remove()
+//         }
+//         resolve()
+//       });
+//     }, 10)
+//   })
+// }
 
   
 function downloadImage(image, fileName) {
-  var dataUrl = image.toDataURL();
-  var link = document.createElement("a");
-  link.href = dataUrl;
+  // var dataUrl = image.toDataURL();
+  // var link = document.createElement("a");
+  // link.href = dataUrl;
+  // link.download = `${fileName}.png`;
+  // link.click();
+  const imageURL = URL.createObjectURL(image);
+  const link = document.createElement('a');
+  link.href = imageURL;
   link.download = `${fileName}.png`;
+  document.body.appendChild(link);
   link.click();
-  
+  document.body.removeChild(link);
+  URL.revokeObjectURL(imageURL);
+}
+
+export function downloadElementAsImage(element, filename, format="png") {
+  const scale = 2
+
+  const toImage = format == "png" ? domToImage.toPng : domToImage.toSvg;
+
+  toImage(element, { 
+    width: element.clientWidth * scale,
+    height: element.clientHeight * scale,
+    style: {
+     transform: 'scale('+scale+')',
+     transformOrigin: 'top left'
+   }}).then((dataUrl) => {
+    fetch(dataUrl)
+      .then(res => res.blob())
+      .then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${filename}.${format}`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      });
+    // var img = new Image();
+    // img.src = dataUrl;
+    // downloadImage(img, filename);
+    // document.body.appendChild(img);
+  })
 }
 
 export function downloadGraph(graphId, fileName) {
diff --git a/src/utils/helper.js b/src/utils/helper.js
index 213947a..c7e74df 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -53,78 +53,22 @@ export function plotDataTable(data, container, options={}) {
     columns = [],
   } = options 
 
-  // const colDefMap = d3.index(colDefinitions, d => d.field)
   columns.forEach(col => {
     if (!col.title) col.title = col.field
   })
 
   const table = document.createElement("div")
+  table.style.height = "100%"
+  table.style.width = "100%"
   container.innerHTML = ``;
-  container.appendChild(table)
+  container.appendChild(table);
+
 
   const tabulator = new Tabulator(table, {
-    height: Math.min(data.length*48 + 100, container.getBoundingClientRect().height), 
     data,
     columns,
-    // columns: [
-    //   { field: "state_fips", title: "state_fips"},
-    //   { field: "race", title: "race"}
-    // ]
-    //autoColumns: true,
-    // autoColumnsDefinitions: (columns) =>
-    //      columns.map((d) => {
-    //       const def = { ...d, frozen: pin.has(d.field) ? true : false, maxWidth: 200 }
-    //       console.log(def)
-    //       return def
-    //     }),
   })
 
-
-  // tabulator.on("tableBuilt", () => {
-  //   console.log("move")
-  //   tabulator.moveColumn("state", "state_fips", true)
-
-  //   // container.innerHTML = ``;
-  //   // container.appendChild(table)
-  // })
-  
-  // tabulator.on("tableBuilt", () => {
-
-
-  //   let definitions = [...tabulator.getColumnDefinitions()]
-
-  //   const definitionIndex = d3.index(definitions, d => d.field)
-
-  //   const newDefinitions = [] 
-  //   for (const field of order) {
-  //     newDefinitions.push(definitionIndex.get(field))
-  //     definitions = definitions.filter(d => d.field != field)
-  //   }
-  //   for (let definition of definitions) {
-      
-  //     newDefinitions.push(definition)
-  //   }  
-
-  //   for (let definition of newDefinitions) {
-  //     const userDefinition = colDefMap.get(definition.field)
-  //     if (userDefinition) {
-  //       for (const [k,v] of Object.entries(userDefinition)) {
-  //         definition[k] = v
-  //       }
-  //     }
-     
-  //   }
-
-
-  //   console.log("New definitions", newDefinitions)
-
-  //   tabulator.setColumns(newDefinitions)
-  
-  // })
- 
-  //definitions.sort
-
-
 }
 
 export function grayOutSexSelectionBasedOnCause(query, elements) {
@@ -818,6 +762,28 @@ export function sortCompare(a, b, key) {
   return 0;
 }
 
+export function downloadDataWithPopup(container, data, filename, contentType) {
+  const contentContainer = document.createElement("div");
+  contentContainer.className = "download-popup-content";
+
+  const text = document.createElement("div");
+  text.innerText = "Preparing download (this may take a moment)";
+  contentContainer.appendChild(text);
+
+  const spinner = document.createElement("div");
+  spinner.className = "spinner-border text-primary";
+  contentContainer.appendChild(spinner);
+
+  const {close} = popup(container, contentContainer, {
+    closable: false,
+  });
+
+  // downloadStringAsFile(content, filename, contentType);
+  downloadMortalityData(data, filename, contentType);
+  close();
+
+}
+
 export function downloadStringAsFile(content, filename, contentType) {
   const blob = new Blob([content], { type: contentType });
   const url = window.URL.createObjectURL(blob);
@@ -1069,24 +1035,84 @@ export function createNestedDropdown(buttonElement, items) {
 
 }
 
+// Popup attached to an element 
+export function minorPopup(container, button, content, title) {
+  const popupTemplate = /*html*/ `
+    <div class="popup-topbar">
+      <div class="popup-title">${title}</div>
+      <div class="popup-buttons">
+        <i class="fas fa-times highlightable-button"></i>
+      </div>
+    </div>
+    <div class="popup-content">
+  `;
+
+  const tooltip = addPopperTooltip(container);
+
+  let popup = document.createElement("div");
+  popup.className = "popup-minor";
+  popup.innerHTML = popupTemplate;
+  // popupContainer.appendChild(popup);
+
+  const popupContent = popup.querySelector(".popup-content");
+  popupContent.innerHTML = "";
+  popupContent.appendChild(content);
+
+  let tooltipShown = false;
+  popup.querySelector(".popup-buttons .fa-times").addEventListener("click", () => {
+    tooltipShown = false;
+    tooltip.hide();
+  })
+
+  button.addEventListener("click", () => {
+    content.style.display = "flex";
+    if (tooltipShown) {
+      tooltip.hide();
+    } else {
+      tooltip.show(button, popup);
+    }
+    tooltipShown = !tooltipShown;
+  });
+
+
+  // container.appendChild(popupContainer);
+}
+
+
+// For screen filling, central pop-ups
+const openPopups = new Set();
 export function popup(container, content, options) {
   options = {
     stopEvents: true,
+    fillScreen: false,
+    closable: true,
     ...options,
   };
 
   container.classList.add("unfocused");
-  document.body.style.overflow = 'hidden'
+  document.body.style.overflow = 'hidden';
 
-  const popupTemplate = /*html*/ `
+  let popupTemplate = "";
+  if (options.closable || options.title) {
+    popupTemplate += /*html*/`
     <div class="popup-topbar">
       <div class="popup-title">${options.title}</div>
       <div class="popup-buttons">
         <i class="fas fa-times highlightable-button"></i>
       </div>
-    </div>
-    <div class="popup-content">
-  `;
+    </div>`
+  }
+  popupTemplate += /*html*/`<div class="popup-content">`;
+
+  // const popupTemplate = /*html*/ `
+  //   <div class="popup-topbar">
+  //     <div class="popup-title">${options.title}</div>
+  //     <div class="popup-buttons">
+  //       <i class="fas fa-times highlightable-button"></i>
+  //     </div>
+  //   </div>
+  //   <div class="popup-content">
+  // `;
 
   if (typeof content == "string") {
     const contentDiv = document.createElement("div");
@@ -1094,55 +1120,85 @@ export function popup(container, content, options) {
     content = contentDiv;
   }
 
-  let popupContainer = document.createElement("div");
-  popupContainer.className = "popup-container";
-  if (options.backdrop) {
-    options.backdrop = backdrop();
-    popupContainer.appendChild(options.backdrop)
-  }
+  openPopups.add(content);
+
+  // let popupContainer = document.createElement("div");
+  // popupContainer.className = "popup-container";
+
+  // if (options.backdrop) {
+  //   options.backdrop = backdrop();
+  //   popupContainer.appendChild(options.backdrop)
+  // }
 
   let popup = document.createElement("div");
   popup.className = "popup";
   popup.innerHTML = popupTemplate;
-  popupContainer.appendChild(popup);
+  container.appendChild(popup);
+
+  if (options.fillScreen) {
+    popup.classList.add("popup-fill");
+  }
 
   const popupContent = popup.querySelector(".popup-content");
   popupContent.innerHTML = "";
-  popupContent.appendChild(content);
+  if (content instanceof Element) {
+    popupContent.appendChild(content);
+  }
 
   if (options.stopEvents && options.backdrop) {
     options.backdrop.style.pointerEvents = "none";
   }
-  container.appendChild(popupContainer);
+  // container.appendChild(popupContainer);
 
-  const resizeObserver = new ResizeObserver(() => {
-    content.style.maxHeight =
-      container.getBoundingClientRect().height - 100 + "px";
-  });
-  resizeObserver.observe(container);
+  // const resizeObserver = new ResizeObserver(() => {
+  //   // content.style.maxHeight = container.getBoundingClientRect().height - 100 + "px";
+  // });
+  // resizeObserver.observe(container);
 
   function close() {
-    if (options.backdrop) {
-      options.backdrop.remove()
-      options.backdrop = true
-    }
-    if (options.stopEvents && options.backdrop) {
-      options.backdrop.style.pointerEvents = "auto";
+    // if (options.backdrop) {
+    //   options.backdrop.remove()
+    //   options.backdrop = true
+    // }
+    // if (options.stopEvents && options.backdrop) {
+    //   options.backdrop.style.pointerEvents = "auto";
+    // }
+    
+    popup.remove();
+    openPopups.delete(content);
+    if (openPopups.size == 0) {
+      container.classList.remove("unfocused");
     }
-    popupContainer.remove();
-    container.classList.remove("unfocused");
-    document.body.style.overflow = 'auto'
+    // document.body.style.overflow = 'auto';
   }
 
-  function backdrop() {
-    const element = document.createElement('div')
-    element.classList.add('backdrop');
-    return element
+  if (options.closable) {
+    popup.querySelector(".fa-times").addEventListener("click", () => {
+      close();
+    });
   }
 
-  popup.querySelector(".fa-times").addEventListener("click", () => {
-    close();
-  });
+  if (typeof content == "function") {
+    
+    let timeout = null;
+    let previousSize = [-1, -1];
+    const resizeObserver = new ResizeObserver(() => {
+      const bbox = popupContent.getBoundingClientRect();
+
+      if (bbox.width != previousSize[0] || bbox.height != previousSize[1]) {
+
+        popupContent.innerHTML = "";
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          previousSize = [bbox.width, bbox.height];
+          popupContent.appendChild(content(bbox.width, bbox.height));
+        }, 200);
+      }
+     
+    });
+    resizeObserver.observe(popup);
+  }
+ 
 
   return { close };
 }
\ No newline at end of file
diff --git a/src/utils/nameFormat.js b/src/utils/nameFormat.js
index cc1a2e0..6d090bc 100644
--- a/src/utils/nameFormat.js
+++ b/src/utils/nameFormat.js
@@ -5,21 +5,27 @@ const names = {
     "sex": "Sex",
     "county": "County",
     "state": "State",
-    "age_group": "Age Group"
+    "age_group": "Age Group",
+    "quantile": "Quantile",
+    "quantile_field": "County Characteristic",
+    "quantile_range": "Quantile Range",
+    "cause": "Cause",
   },
   "measures": {
     "age_adjusted_rate": { 
       "name": "Age-Adjusted Mortality Rate (per 100,000)",
-      "short": "AA Rate"
+      "short": "AA Rate",
+      "verbose":  "Age-Adjusted Cancer Mortality Rate (per 100,000)",
     },
     "crude_rate": {
       "name": "Crude Mortality Rate (per 100,000)",
-      "short": "Crude Rate"
+      "short": "Crude Rate",
+      "verbose":  "Crude Cancer Mortality Rate (per 100,000)",
     },
-    "age_adjusted_rate_ratio (ref=low)": "Age-Adjusted Rate Ratio (Ref=Low)",
-    "age_adjusted_rate_ratio (ref=high)": "Age-Adjusted Rate Ratio (Ref=High)",
-    "crude_rate_ratio(ref=low)": "Crude Rate Ratio (Ref=Low)",
-    "crude_rate_ratio (ref=high)": "Crude Rate Ratio (Ref=High)",
+    "age_adjusted_rate_ratio_ref-low": "Age-Adjusted Rate Ratio (Ref=Low)",
+    "age_adjusted_rate_ratio_ref-high": "Age-Adjusted Rate Ratio (Ref=High)",
+    "crude_rate_ratio_ref-low": "Crude Rate Ratio (Ref=Low)",
+    "crude_rate_ratio_ref-high": "Crude Rate Ratio (Ref=High)",
     "deaths": "Deaths",
     "population": "Population"
   },
@@ -275,523 +281,523 @@ const names = {
   },
   "quantile_fields": {
     "premature_death": {
-      "measure": "Premature death",
+      "name": "Premature death",
       "description": "Years of potential life lost before age 75 per 100,000 population (age-adjusted).",
       "unit": "Year"
     },
     "poor_or_fair_health": {
-      "measure": "Poor or fair health",
+      "name": "Poor or fair health",
       "description": "Percentage of adults reporting fair or poor health (age-adjusted).",
       "unit": "Proportion"
     },
     "poor_physical_health_days": {
-      "measure": "Poor physical health days",
+      "name": "Poor physical health days",
       "description": "Average number of physically unhealthy days reported in past 30 days (age-adjusted).",
       "unit": "Days"
     },
     "poor_mental_health_days": {
-      "measure": "Poor mental health days",
+      "name": "Poor mental health days",
       "description": "Average number of mentally unhealthy days reported in past 30 days (age-adjusted).",
       "unit": "Days"
     },
     "low_birthweight": {
-      "measure": "Low birthweight",
+      "name": "Low birthweight",
       "description": "Percentage of live births with low birthweight (&lt; 2,500 grams).",
       "unit": "Proportion"
     },
     "adult_smoking": {
-      "measure": "Adult smoking",
+      "name": "Adult smoking",
       "description": "Percentage of adults who are current smokers.",
       "unit": "Proportion"
     },
     "adult_obesity": {
-      "measure": "Adult obesity",
+      "name": "Adult obesity",
       "description": "Percentage of the adult population (age 20 and older) that reports a body mass index (BMI) greater than or equal to 30 kg/m2.",
       "unit": "Proportion"
     },
     "food_environment_index": {
-      "measure": "Food environment index",
+      "name": "Food environment index",
       "description": "Index of factors that contribute to a healthy food environment, from 0 (worst) to 10 (best).",
       "unit": "Food Environment Index (0-10)"
     },
     "physical_inactivity": {
-      "measure": "Physical inactivity",
+      "name": "Physical inactivity",
       "description": "Percentage of adults age 20 and over reporting no leisure-time physical activity.",
       "unit": "Proportion"
     },
     "access_to_exercise_opportunities": {
-      "measure": "Access to exercise opportunities",
+      "name": "Access to exercise opportunities",
       "description": "Percentage of population with adequate access to locations for physical activity.",
       "unit": "Proportion"
     },
     "excessive_drinking": {
-      "measure": "Excessive drinking",
+      "name": "Excessive drinking",
       "description": "Percentage of adults reporting binge or heavy drinking.",
       "unit": "Proportion"
     },
     "alcohol_impaired_driving_deaths": {
-      "measure": "Alcohol-impaired driving deaths",
+      "name": "Alcohol-impaired driving deaths",
       "description": "Percentage of driving deaths with alcohol involvement.",
       "unit": "Proportion"
     },
     "sexually_transmitted_infections": {
-      "measure": "Sexually transmitted infections",
+      "name": "Sexually transmitted infections",
       "description": "Number of newly diagnosed chlamydia cases per 100,000 population.",
       "unit": "per 100,000"
     },
     "teen_births": {
-      "measure": "Teen births",
+      "name": "Teen births",
       "description": "Number of births per 1,000 female population ages 15-19.",
       "unit": "per 1,000"
     },
     "uninsured": {
-      "measure": "Uninsured",
+      "name": "Uninsured",
       "description": "Percentage of population under age 65 without health insurance.",
       "unit": "Proportion"
     },
     "primary_care_physicians": {
-      "measure": "Primary care physicians",
+      "name": "Primary care physicians",
       "description": "Number of primary care physicians per 100,000 population",
       "unit": "Rate per 100,000"
     },
     "dentists": {
-      "measure": "Dentists",
+      "name": "Dentists",
       "description": "Number of dentists per 100,000 population",
       "unit": "per 100,000"
     },
     "mental_health_providers": {
-      "measure": "Mental health providers",
+      "name": "Mental health providers",
       "description": "Number of mental health care providers per 100,000 population",
       "unit": "per 100,000"
     },
     "preventable_hospital_stays": {
-      "measure": "Preventable hospital stays",
+      "name": "Preventable hospital stays",
       "description": "Rate of hospital stays for ambulatory-care sensitive conditions per 100,000 Medicare enrollees.",
       "unit": "per 100,000"
     },
     "diabetes_monitoring": {
-      "measure": "Diabetes monitoring"
+      "name": "Diabetes monitoring"
     },
     "mammography_screening": {
-      "measure": "Mammography screening",
+      "name": "Mammography screening",
       "description": "Percentage of female Medicare enrollees ages 65-74 that received an annual mammography screening.",
       "unit": "Proportion"
     },
     "high_school_completion": {
-      "measure": "High school graduation",
+      "name": "High school graduation",
       "description": "Percentage of ninth-grade cohort that graduates in four years.",
       "unit": "Proportion"
     },
     "some_college": {
-      "measure": "Some college",
+      "name": "Some college",
       "description": "Percentage of adults ages 25-44 with some post-secondary education.",
       "unit": "Proportion"
     },
     "unemployment": {
-      "measure": "Unemployment",
+      "name": "Unemployment",
       "description": "Percentage of population ages 16 and older unemployed but seeking work.",
       "unit": "Proportion"
     },
     "children_in_poverty": {
-      "measure": "Children in poverty",
+      "name": "Children in poverty",
       "description": "Percentage of people under age 18 in poverty.",
       "unit": "Proportion"
     },
     "income_inequality": {
-      "measure": "Income inequality",
+      "name": "Income inequality",
       "description": "Ratio of household income at the 80th percentile to income at the 20th percentile.",
       "unit": "Ratio (80th/20th)"
     },
     "children_in_single_parent_households": {
-      "measure": "Children in single-parent households",
+      "name": "Children in single-parent households",
       "description": "Percentage of children that live in a household headed by single parent.",
       "unit": "Proportion"
     },
     "social_associations": {
-      "measure": "Social associations",
+      "name": "Social associations",
       "description": "Number of membership associations per 10,000 population.",
       "unit": "per 100,000"
     },
     "violent_crime": {
-      "measure": "Violent crime",
+      "name": "Violent crime",
       "description": "Number of reported violent crime offenses per 100,000 population.",
       "unit": "per 100,000"
     },
     "injury_deaths": {
-      "measure": "Injury deaths",
+      "name": "Injury deaths",
       "description": "Number of deaths due to injury per 100,000 population.",
       "unit": "per 100,000"
     },
     "air_pollution_particulate_matter": {
-      "measure": "Air pollution - particulate matter",
+      "name": "Air pollution - particulate matter",
       "description": "Average daily density of fine particulate matter in micrograms per cubic meter (PM2.5).",
       "unit": "PM2.5 Concentration (µg/m³)"
     },
     "drinking_water_violations": {
-      "measure": "Drinking water violations",
+      "name": "Drinking water violations",
       "description": "Indicator of the presence of health-related drinking water violations. 0=No, 1=Yes",
       "unit": "Violation Indicator (0/1)"
     },
     "severe_housing_problems": {
-      "measure": "Severe housing problems",
+      "name": "Severe housing problems",
       "description": "Percentage of households with at least 1 of 4 housing problems: overcrowding, high housing costs, lack of kitchen facilities, or lack of plumbing facilities.",
       "unit": "Proportion"
     },
     "driving_alone_to_work": {
-      "measure": "Driving alone to work",
+      "name": "Driving alone to work",
       "description": "Percentage of the workforce that drives alone to work.",
       "unit": "Proportion"
     },
     "long_commute_driving_alone": {
-      "measure": "Long commute - driving alone",
+      "name": "Long commute - driving alone",
       "description": "Among workers who commute in their car alone, the percentage that commute more than 30 minutes.",
       "unit": "Proportion"
     },
     "premature_age_adjusted_mortality": {
-      "measure": "Premature age-adjusted mortality",
+      "name": "Premature age-adjusted mortality",
       "description": "Number of deaths among residents under age 75 per 100,000 population (age-adjusted).",
       "unit": "per 100,000"
     },
     "child_mortality": {
-      "measure": "Child mortality",
+      "name": "Child mortality",
       "description": "Number of deaths among children under age 18 per 100,000 population."
     },
     "infant_mortality": {
-      "measure": "Infant mortality",
+      "name": "Infant mortality",
       "description": "Number of all infant deaths (within 1 year), per 1,000 live births."
     },
     "frequent_physical_distress": {
-      "measure": "Frequent physical distress",
+      "name": "Frequent physical distress",
       "description": "Percentage of adults reporting 14 or more days of poor physical health per month.",
       "unit": "Proportion"
     },
     "frequent_mental_distress": {
-      "measure": "Frequent mental distress",
+      "name": "Frequent mental distress",
       "description": "Percentage of adults reporting 14 or more days of poor mental health per month.",
       "unit": "Proportion"
     },
     "diabetes_prevalence": {
-      "measure": "Diabetes prevalence",
+      "name": "Diabetes prevalence",
       "description": "Percentage of adults aged 20 and above with diagnosed diabetes.",
       "unit": "Proportion"
     },
     "hiv_prevalence": {
-      "measure": "HIV prevalence",
+      "name": "HIV prevalence",
       "description": "Number of people aged 13 years and older living with a diagnosis of human immunodeficiency virus (HIV) infection per 100,000 population."
     },
     "food_insecurity": {
-      "measure": "Food insecurity",
+      "name": "Food insecurity",
       "description": "Percentage of population who lack adequate access to food.",
       "unit": "Proportion"
     },
     "limited_access_to_healthy_foods": {
-      "measure": "Limited access to healthy foods",
+      "name": "Limited access to healthy foods",
       "description": "Percentage of population who are low-income and do not live close to a grocery store.",
       "unit": "Proportion"
     },
     "drug_overdose_deaths": {
-      "measure": "Drug overdose deaths",
+      "name": "Drug overdose deaths",
       "description": "Number of drug poisoning deaths per 100,000 population."
     },
     "drug_overdose_deaths_modeled": {
-      "measure": "Drug overdose deaths - modeled"
+      "name": "Drug overdose deaths - modeled"
     },
     "motor_vehicle_crash_deaths": {
-      "measure": "Motor vehicle crash deaths",
+      "name": "Motor vehicle crash deaths",
       "description": "Number of motor vehicle crash deaths per 100,000 population."
     },
     "insufficient_sleep": {
-      "measure": "Insufficient sleep",
+      "name": "Insufficient sleep",
       "description": "Percentage of adults who report fewer than 7 hours of sleep on average.",
       "unit": "Proportion"
     },
     "uninsured_adults": {
-      "measure": "Uninsured adults",
+      "name": "Uninsured adults",
       "description": "Percentage of adults under age 65 without health insurance.",
       "unit": "uninsured_adults"
     },
     "uninsured_children": {
-      "measure": "Uninsured children",
+      "name": "Uninsured children",
       "description": "Percentage of children under age 19 without health insurance.",
       "unit": "uninsured_adults"
     },
     "health_care_costs": {
-      "measure": "Health care costs"
+      "name": "Health care costs"
     },
     "other_primary_care_providers": {
-      "measure": "Other primary care providers",
+      "name": "Other primary care providers",
       "description": "Number of other primary care providers per 100,000 population",
       "unit": "per 100,000"
     },
     "disconnected_youth": {
-      "measure": "Disconnected youth",
+      "name": "Disconnected youth",
       "description": "Percentage of teens and young adults ages 16-19 who are neither working nor in school."
     },
     "median_household_income": {
-      "measure": "Median household income",
+      "name": "Median household income",
       "description": "The income where half of households in a county earn more and half of households earn less.",
       "unit": "(USD)"
     },
     "children_eligible_for_free_or_reduced_price_lunch": {
-      "measure": "Children eligible for free or reduced price lunch raw value",
+      "name": "Children eligible for free or reduced price lunch raw value",
       "description": "Percentage of children enrolled in public schools that are eligible for free or reduced price lunch.",
       "unit": "Proportion"
     },
     "residential_segregation_black_white": {
-      "measure": "Residential segregation - Black/White",
+      "name": "Residential segregation - Black/White",
       "description": "Index of dissimilarity where higher values indicate greater residential segregation between Black and White county residents."
     },
     "residential_segregation_non_white_white": {
-      "measure": "Residential segregation - non-White/White",
+      "name": "Residential segregation - non-White/White",
       "description": "Index of dissimilarity where higher values indicate greater residential segregation between non-White and White county residents."
     },
     "homicides": {
-      "measure": "Homicides",
+      "name": "Homicides",
       "description": "Number of deaths due to homicide per 100,000 population."
     },
     "firearm_fatalities": {
-      "measure": "Firearm fatalities",
+      "name": "Firearm fatalities",
       "description": "Number of deaths due to firearms per 100,000 population."
     },
     "population": {
-      "measure": "Population",
+      "name": "Population",
       "description": "Resident population.",
       "unit": "(in thousands)"
     },
     "percent_below_18_years_of_age": {
-      "measure": "% below 18 years of age",
+      "name": "% below 18 years of age",
       "description": "Percentage of population below 18 years of age.",
       "unit": "Proportion"
     },
     "percent_65_and_older": {
-      "measure": "% 65 and older",
+      "name": "% 65 and older",
       "description": "Percentage of population ages 65 and older.",
       "unit": "Proportion"
     },
     "percent_non_hispanic_african_american": {
-      "measure": "% Non-Hispanic African American"
+      "name": "% Non-Hispanic African American"
     },
     "percent_american_indian_and_alaskan_native": {
-      "measure": "% American Indian and Alaskan Native"
+      "name": "% American Indian and Alaskan Native"
     },
     "percent_asian": {
-      "measure": "% Asian",
+      "name": "% Asian",
       "description": "Percentage of population that is Asian.",
       "unit": "Proportion"
     },
     "percent_native_hawaiian_other_pacific_islander": {
-      "measure": "% Native Hawaiian/Other Pacific Islander",
+      "name": "% Native Hawaiian/Other Pacific Islander",
       "description": "Percentage of population that is Native Hawaiian or Other Pacific Islander.",
       "unit": "Proportion"
     },
     "percent_hispanic": {
-      "measure": "% Hispanic",
+      "name": "% Hispanic",
       "description": "Percentage of population that is Hispanic.",
       "unit": "Proportion"
     },
     "percent_non_hispanic_white": {
-      "measure": "% Non-Hispanic White",
+      "name": "% Non-Hispanic White",
       "description": "Percentage of population that is non-Hispanic White.",
       "unit": "Proportion"
     },
     "percent_not_proficient_in_english": {
-      "measure": "% not proficient in English",
+      "name": "% not proficient in English",
       "description": "Percentage of population that is not proficient in English.",
       "unit": "Proportion"
     },
     "percent_females": {
-      "measure": "% Females",
+      "name": "% Females",
       "description": "Percentage of population that is female.",
       "unit": "Proportion"
     },
     "percent_rural": {
-      "measure": "% Rural",
+      "name": "% Rural",
       "description": "Percentage of population living in a rural area.",
       "unit": "Proportion"
     },
     "communicable_disease": {
-      "measure": "Communicable disease",
+      "name": "Communicable disease",
       "description": "Number of new cases of reportable diseases and conditions per 100,000 population."
     },
     "self_inflicted_injury_hospitalizations": {
-      "measure": "Self-inflicted injury hospitalizations",
+      "name": "Self-inflicted injury hospitalizations",
       "description": "Hospitalizations due to self-inflicted injuries per 100,000 population."
     },
     "cancer_incidence": {
-      "measure": "Cancer incidence",
+      "name": "Cancer incidence",
       "description": "Number of new cancer diagnoses per 100,000 population (age-adjusted)."
     },
     "smoking_during_pregnancy": {
-      "measure": "Smoking during pregnancy",
+      "name": "Smoking during pregnancy",
       "description": "Percentage of births where mother reports smoking during pregnancy."
     },
     "drug_arrests": {
-      "measure": "Drug arrests"
+      "name": "Drug arrests"
     },
     "motor_vehicle_crash_occupancy_rate": {
-      "measure": "Motor vehicle crash occupancy rate",
+      "name": "Motor vehicle crash occupancy rate",
       "description": "Motor vehicle crash occupancy rate per 1,000 population."
     },
     "on_road_motor_vehicle_crash_related_er_visits": {
-      "measure": "On-road motor vehicle crash-related ER visits raw value",
+      "name": "On-road motor vehicle crash-related ER visits raw value",
       "description": "On-road motor vehicle crash-related emergency room visits per 100,000 population."
     },
     "off_road_motor_vehicle_crash_related_er_visits": {
-      "measure": "Off-road motor vehicle crash-related ER visits"
+      "name": "Off-road motor vehicle crash-related ER visits"
     },
     "no_recent_dental_visit": {
-      "measure": "No recent dental visit"
+      "name": "No recent dental visit"
     },
     "did_not_get_needed_health_care": {
-      "measure": "Did not get needed health care"
+      "name": "Did not get needed health care"
     },
     "childhood_immunizations": {
-      "measure": "Childhood immunizations",
+      "name": "Childhood immunizations",
       "description": "Percentage of children aged 19 to 35 months who received the recommended doses of DTaP, polio, MMR, Hib, hepatitis B, varicella, and Pneumococcal conjugate."
     },
     "reading_proficiency": {
-      "measure": "Reading proficiency",
+      "name": "Reading proficiency",
       "description": "Percentage of fourth grade students proficient or advanced in reading."
     },
     "w_2_enrollment": {
-      "measure": "W-2 enrollment",
+      "name": "W-2 enrollment",
       "description": "Count of individuals enrolled in W-2 (Wisconsin Works) on the last working day of the month."
     },
     "poverty": {
-      "measure": "Poverty",
+      "name": "Poverty",
       "description": "Percentage of population living below the Federal Poverty Line."
     },
     "older_adults_living_alone": {
-      "measure": "Older adults living alone",
+      "name": "Older adults living alone",
       "description": "Percentage of adults 65 years and older who live alone."
     },
     "hate_crimes": {
-      "measure": "Hate crimes"
+      "name": "Hate crimes"
     },
     "child_abuse": {
-      "measure": "Child abuse",
+      "name": "Child abuse",
       "description": "Child abuse rate per 1,000 population."
     },
     "injury_hospitalizations": {
-      "measure": "Injury hospitalizations",
+      "name": "Injury hospitalizations",
       "description": "Hospitalizations due to injuries per 100,000 population (age-adjusted)."
     },
     "fall_fatalities_65_plus": {
-      "measure": "Fall fatalities 65+",
+      "name": "Fall fatalities 65+",
       "description": "Number of injury deaths due to falls among those 65 years of age and over per 100,000 population."
     },
     "year_structure_built": {
-      "measure": "Year structure built",
+      "name": "Year structure built",
       "description": "Percentage of housing units built prior to 1950."
     },
     "male_population_0_17": {
-      "measure": "Male population 0-17",
+      "name": "Male population 0-17",
       "description": "Number of males ages 0-17."
     },
     "male_population_18_44": {
-      "measure": "Male population 18-44",
+      "name": "Male population 18-44",
       "description": "Number of males ages 18-44."
     },
     "male_population_45_64": {
-      "measure": "Male population 45-64",
+      "name": "Male population 45-64",
       "description": "Number of males ages 45-64."
     },
     "male_population_65_plus": {
-      "measure": "Male population 65+",
+      "name": "Male population 65+",
       "description": "Number of males ages 65 and older."
     },
     "total_male_population": {
-      "measure": "Total male population",
+      "name": "Total male population",
       "description": "Total number of males."
     },
     "female_population_0_17": {
-      "measure": "Female population 0-17",
+      "name": "Female population 0-17",
       "description": "Number of females ages 0-17."
     },
     "female_population_18_44": {
-      "measure": "Female population 18-44",
+      "name": "Female population 18-44",
       "description": "Number of females ages 18-44."
     },
     "female_population_45_64": {
-      "measure": "Female population 45-64",
+      "name": "Female population 45-64",
       "description": "Number of females ages 45-64."
     },
     "female_population_65_plus": {
-      "measure": "Female population 65+",
+      "name": "Female population 65+",
       "description": "Number of females ages 65 and older."
     },
     "total_female_population": {
-      "measure": "Total female population",
+      "name": "Total female population",
       "description": "Total number of females."
     },
     "population_growth": {
-      "measure": "Population growth",
+      "name": "Population growth",
       "description": "Percentage change in population since the last decennial US Census."
     },
     "flu_vaccinations": {
-      "measure": "Flu vaccinations",
+      "name": "Flu vaccinations",
       "description": "Percentage of fee-for-service (FFS) Medicare enrollees that had an annual flu vaccination.",
       "unit": "Proportion"
     },
     "life_expectancy": {
-      "measure": "Life expectancy",
+      "name": "Life expectancy",
       "description": "Average number of years a person can expect to live.",
       "unit": "(years)"
     },
     "homeownership": {
-      "measure": "Homeownership",
+      "name": "Homeownership",
       "description": "Percentage of occupied housing units that are owned.",
       "unit": "Proportion"
     },
     "severe_housing_cost_burden": {
-      "measure": "Severe housing cost burden",
+      "name": "Severe housing cost burden",
       "description": "Percentage of households that spend 50% or more of their household income on housing.",
       "unit": "Proportion"
     },
     "coronary_heart_disease_hospitalizations": {
-      "measure": "Coronary heart disease hospitalizations",
+      "name": "Coronary heart disease hospitalizations",
       "description": "Coronary heart disease hospitalization rate per 1,000 population."
     },
     "cerebrovascular_disease_hospitalizations": {
-      "measure": "Cerebrovascular disease hospitalizations",
+      "name": "Cerebrovascular disease hospitalizations",
       "description": "Cerebrovascular disease hospitalization rate per 1,000 population."
     },
     "opioid_hospital_visits": {
-      "measure": "Opioid hospital visits",
+      "name": "Opioid hospital visits",
       "description": "Rate of opioid-related hospital visits per 100,000 population."
     },
     "alcohol_related_hospitalizations": {
-      "measure": "Alcohol-related hospitalizations",
+      "name": "Alcohol-related hospitalizations",
       "description": "Rate of alcohol-related hospitalization per 1,000 population."
     },
     "reading_scores": {
-      "measure": "Reading scores",
+      "name": "Reading scores",
       "description": "Average grade level performance for 3rd graders on English Language Arts standardized tests"
     },
     "math_scores": {
-      "measure": "Math scores",
+      "name": "Math scores",
       "description": "Average grade level performance for 3rd graders on math standardized tests"
     },
     "suicides": {
-      "measure": "Suicides",
+      "name": "Suicides",
       "description": "Number of deaths due to suicide per 100,000 population (age-adjusted)."
     },
     "juvenile_arrests": {
-      "measure": "Juvenile arrests",
+      "name": "Juvenile arrests",
       "description": "Rate of delinquency cases per 1,000 juveniles"
     },
     "traffic_volume": {
-      "measure": "Traffic volume",
+      "name": "Traffic volume",
       "description": "Average traffic volume per meter of major roadways in the county.",
       "unit": "(vehicles/meter)"
     },
     "percent_non_hispanic_black": {
-      "measure": "% Non-Hispanic Black",
+      "name": "% Non-Hispanic Black",
       "description": "Percentage of population that is non-Hispanic Black or African American.",
       "unit": "Proportion"
     },
     "percent_american_indian_alaska_native": {
-      "measure": "% American Indian & Alaska Native",
+      "name": "% American Indian & Alaska Native",
       "description": "Percentage of population that is American Indian or Alaska Native.",
       "unit": "Proportion"
     }
diff --git a/static/css/epitracker-map.css b/static/css/epitracker-map.css
index 8d97345..fd7795b 100644
--- a/static/css/epitracker-map.css
+++ b/static/css/epitracker-map.css
@@ -119,6 +119,7 @@ footer {
   border-right-color: #333b4d;
 }
 
+
 .grid-card-topbar i {
   cursor: pointer;
 }
@@ -346,9 +347,14 @@ footer {
   100% { transform: rotate(360deg); }
 }
 
-/* Popup container styling for improved responsiveness */
+.popup-minor {
+  display: flex;
+  flex-direction: column;
+  pointer-events: all;
+}
+
 .popup {
-  position: fixed;
+  position: absolute;
   left: 50%;
   top: 50%;
   min-width: 600px; /* Ensure a minimum width for horizontal scrolls */
@@ -361,19 +367,17 @@ footer {
   display: flex;
   flex-direction: column;
   padding: 8px;
-  box-shadow: 0px 1px 6px 1px rgb(211, 211, 211);
+  box-shadow: 0px 1px 6px 1px rgb(0, 0, 0, .15);
+  left: 50%;
   transform: translate(-50%, -50%);
   z-index: 100;
 }
 
-/* Ensuring overflow behavior for both x and y directions */
-.popup-content {
-  overflow-y: auto !important;
-  overflow-x: auto !important;
-  min-width: 100%; /* This enables horizontal scrolling when content overflows */
+.popup.popup-fill {
+  height: 90%;
+  width: 90%;
 }
 
-/* Close icon styling for better visibility on smaller screens */
 .popup-topbar {
   display: flex;
   justify-content: space-between;
@@ -383,16 +387,19 @@ footer {
 
 .popup-title {
   font-weight: bold;
-  margin-left: 10px;
+  margin-left:  5px;
+  margin-right: 20px;
 }
 
-@media (max-width: 600px) {
-  .popup {
-    width: 100vw; /* Full width on very small screens */
-    max-width: 100vw;
-    max-height: 100vh;
-    height: 100vh;
-  }
+.popup-content {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.popup-buttons {
+  margin-top: -8px;
 }
 
 
diff --git a/static/css/epitracker-quantile.css b/static/css/epitracker-quantile.css
new file mode 100644
index 0000000..451b4cb
--- /dev/null
+++ b/static/css/epitracker-quantile.css
@@ -0,0 +1,140 @@
+#ex-settings-card {
+  /* height: 60px; */
+}
+
+#ex-dashboard {
+ height: calc(100vh - 120px);
+}
+
+#content-container {
+  height: 100%;
+  padding: 0px 10px 10px 20px;
+  display: flex; 
+  gap: 10px;
+  min-height: 0;
+}
+
+#options-container {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  /* height: 300px; */
+  min-height: 0;
+}
+
+#options-container h2 {
+  font-size: 1.4em;
+  padding-left: 15px;
+  padding-top: 10px;
+}
+
+#quantile-container {
+  width: 100%;
+  padding: 20px;
+  padding-top: 30px;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+#sidebar-form {
+  overflow-y: auto;
+  max-height: 100%;
+  padding-top: 0px;
+}
+
+#sidebar-form h2 {
+  font-size: 1.5em;
+  color: var(--color-gray-dark);
+}
+
+#sidebar-form h4 {
+  font-size: 1.1em;
+  color: var(--color-gray-dark);
+  margin-bottom: 20px;
+}
+
+#right-container {
+  display: flex; 
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+}
+
+#legend-container {
+  height: fit-content;
+}
+
+#plot-quantiles {
+  width: 100%;
+  min-height: fit-content;
+  height: 100%;
+  overflow: hidden;
+}
+
+#plot-quantiles svg {
+  margin-bottom: 0px;
+}
+
+#plot-legend {
+  margin-block: 15px;
+  margin-inline: 20px;
+}
+
+.table-popup-content {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  height: calc(100% - 50px);
+  border: 1px solid rgb(194, 194, 194);
+  padding: 0px;
+
+}
+
+.table-title {
+  padding-bottom: 20px;
+}
+
+.table-topbar {
+  display: flex; 
+  justify-content: space-between;
+}
+
+#dashboard-container {
+  position: relative;
+}
+
+#img-template {
+  display: flex; 
+  flex-direction: column;
+  width: fit-content;
+  height: 800px;
+  background-color: white;
+  gap: 10px;
+  padding: 30px;
+}
+
+#img-title {
+  font-weight: bold;
+  font-size: .9em;
+}
+
+#img-legend {
+  width: 100%;
+}
+
+#img-plot {
+  height: 800px;
+}
+
+#img-source {
+  font-size: .8em;
+  font-style: italic;
+}
+
+#img-legend .legend-check path {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/static/css/epitracker.css b/static/css/epitracker.css
index 5a17e61..36274a6 100644
--- a/static/css/epitracker.css
+++ b/static/css/epitracker.css
@@ -1473,9 +1473,9 @@ span.icon {
   /* font-size: 0.7em; */
   padding: 8px;
   border: none;
-  border-radius: 2px;
+  border-radius: 4px;
   display: none;
-  box-shadow: 1px 1px 5px rgb(81, 81, 81);
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
   pointer-events: none;
   z-index: 300;
 }
@@ -2231,8 +2231,8 @@ p {
 /* Toggle this class - hide and show the popup */
 .popup .show {
   visibility: visible;
-  -webkit-animation: fadeIn 1s;
-  animation: fadeIn 1s;
+  /* -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s; */
 }
 
 /* .popup-container .backdrop  {
@@ -2575,7 +2575,7 @@ button.previous-btn {
 
 #plot-quantiles {
   width: 100%;
-  /* height: fit-content; */
+  height: fit-content;
   display: flex;
   justify-content: center;
   flex-shrink: 0;
@@ -2811,7 +2811,8 @@ button.previous-btn {
 
 #sidebar-form {
   overflow-y: auto;
-  padding-right: 15px;
+  padding-inline: 15px;
+  padding-top: 10px;
   position: relative;
   flex-grow: 1;
 }
@@ -3111,7 +3112,7 @@ footer {
 #settings-dropdown {
   display: none;
   flex-direction: column;
-  padding: 5px;
+  padding: 15px;
   pointer-events: all;
 }
 
@@ -3146,4 +3147,23 @@ g[aria-label="geo"]:first-of-type > path:not(:first-of-type) {
   top: 0;
   z-index: 10;
   background: #f9fbff;
+}
+
+.dropdown-item {
+  cursor: pointer;
+}
+
+.download-popup-content {
+  display: flex; 
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  height: 150px;
+  gap: 20px;
+}
+
+.download-popup-content .spinner-border {
+  width: 50px;
+  height: 50px;
 }
\ No newline at end of file
diff --git a/visualization/map.html b/visualization/map.html
index 4ebffba..4443fbb 100644
--- a/visualization/map.html
+++ b/visualization/map.html
@@ -147,10 +147,10 @@
 
   <!-- The color settings element dropdown, initially hidden -->
   <div id="color-settings">
-    <div class="d-flex justify-content-between">
+    <!-- <div class="d-flex justify-content-between">
       <h5><i class="bi bi-gear-fill me-2"></i>Color Scheme Settings</h5>
       <i id="color-settings-close" class="fa-solid fa-xmark"></i>
-    </div>
+    </div> -->
 
     <div class="mb-2">
       <label for="select-color-scheme">Color scheme</label>
diff --git a/visualization/quantile.html b/visualization/quantile.html
index 33a081c..859be23 100644
--- a/visualization/quantile.html
+++ b/visualization/quantile.html
@@ -9,151 +9,145 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
-  <link href="../static/css/epitracker.css" rel="stylesheet" defer  />
   <link crossorigin="anonymous" type="text/css" rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" defer />
-    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
-    <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator_bootstrap5.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
+  <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator_bootstrap5.css" rel="stylesheet">
+  <link href="../static/css/epitracker.css" rel="stylesheet" defer  />
+  <link href="../static/css/epitracker-map.css" rel="stylesheet" defer  />
+  <link href="../static/css/epitracker-quantile.css" rel="stylesheet" defer  />
 
 </head>
 
 <body>
   <header></header>
   
-  <div id="dashboard">
-    <div id="sidebar" >
-      <div id="sidebar-toggle">
-        <i class="bi bi-caret-left-fill"></i>
-      </div>
-
-      <div id="sidebar-content" >
-        <h2><i class="bi bi-gear-fill me-2"></i>Configure</h2>
-
-        <div id="sidebar-form"> 
-          <h4 class="mt-2">Compare</h4>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute">Color by</label>
-            <select class="form-select" disabled id="select-compare-color" aria-label="Compare color">
-              <option hidden >Awaiting data...</option>
-            </select>
+  <div id="dashboard-container">
+    <div id="dashboard" >
+      <div id="ex-dashboard">
+        <div id="ex-infobar">
+          <div id="infobar-titles">
+            <div id="tool-title">
+              EpiTracker Cancer: Quantile Dashboard
+            </div>
+            <div id="title" >
+              US county-level age adjusted-mortality rate (per 100,000), 2022, US, All Cancers, All Races, All Sexes
+            </div>
           </div>
 
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-compare-facet">Sub-plot by</label>
-            <select id="select-compare-facet" class="form-select disabled" disabled aria-label="Compare sub-plot">
-              <option hidden >Awaiting data...</option>
-            </select>
+          <div id="infobar-right">
+  
+            <div id="ex-settings-card">
+              <!-- <i id="button-edit-grid" class="settings-button fa-solid fa-plus" tip="Add row or column"></i> -->
+              <i id="button-options" class="settings-button fa-solid fa-gear" tip="Plot settings"></i>
+              <!-- <i id="button-undo" class="settings-button fa-solid fa-rotate-left" tip="Undo"></i> -->
+              <i id="button-table" class="settings-button fa-solid fa-table" tip="Show data table"></i>
+              <!-- Image download button -->
+              <i id="button-download-image" class="settings-button fas fa-image" tip="Download image"></i>
+              <!-- Data download button -->
+              <i id="button-download-data" class="settings-button fa-solid fa-download" tip="Download data"></i> 
+
+            </div>
           </div>
-
-          <h4 class="mt-2">Select</h4>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-select-year">Year</label>
-            <select id="select-select-year" class="form-select mb-2" disabled aria-label="Year select">
-              <option hidden >Awaiting data...</option>
-            </select>
+        
+        </div>
+ 
+  
+        <div id="content-container">
+          <div id="options-container" class="grid-card">
+            <h2>Data Options</h2>
+
+            <div id="sidebar-form"> 
+              <h4 class="mt-2">Compare</h4>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute">Within Plot</label>
+                <select class="form-select" disabled id="select-compare-color" aria-label="Compare color">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-compare-facet">Between Plots</label>
+                <select id="select-compare-facet" class="form-select disabled" disabled aria-label="Compare sub-plot">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <h4 class="mt-2">Filter</h4>
+    
+              <!-- <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-select-year">Year</label>
+                <select id="select-select-year" class="form-select mb-2" disabled aria-label="Year select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div> -->
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-select-cause">Cancer Site</label>
+                <select id="select-select-cause" class="form-select mb-2" disabled aria-label="Cause select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+              
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-select-sex">Sex</label>
+                <select id="select-select-sex" class="form-select mb-2" disabled aria-label="Sex select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-select-race">Race</label>
+                <select id="select-select-race" class="form-select mb-2" disabled aria-label="Race select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <h4>Stratify Quantiles</h4>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-quantile-field">County Characteristic</label>
+                <select id="select-quantile-field" class="form-select mb-2" disabled aria-label="Quantile field select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-quantile-number"># Quantiles</label>
+                <select id="select-quantile-number" class="form-select mb-2" disabled aria-label="Quantile select">
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+    
+              <h4>Other</h4>
+    
+              <div class="floating-select">
+                <label class="floating-label position-absolute" for="select-measure">Measure</label>
+                <select id="select-measure" class="form-select mb-2" aria-label="Measure select" disabled>
+                  <option hidden >Awaiting data...</option>
+                </select>
+              </div>
+            </div>
           </div>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-select-cause">Cause</label>
-            <select id="select-select-cause" class="form-select mb-2" disabled aria-label="Cause select">
-              <option hidden >Awaiting data...</option>
-            </select>
+          <div id="right-container">
+            <div id="legend-container" class="grid-card">
+              <div id="plot-legend"></div>
+            </div>
+            <div id="quantile-container" class="grid-card">
+              <div id="plot-quantiles"></div>
+            </div>
           </div>
           
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-select-sex">Sex</label>
-            <select id="select-select-sex" class="form-select mb-2" disabled aria-label="Sex select">
-              <option hidden >Awaiting data...</option>
-            </select>
-          </div>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-select-race">Race</label>
-            <select id="select-select-race" class="form-select mb-2" disabled aria-label="Race select">
-              <option hidden >Awaiting data...</option>
-            </select>
-          </div>
-
-          <h4>Quantiles</h4>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-quantile-field">Quantile field</label>
-            <select id="select-quantile-field" class="form-select mb-2" disabled aria-label="Quantile field select">
-              <option hidden >Awaiting data...</option>
-            </select>
-          </div>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-quantile-number"># Quantiles</label>
-            <select id="select-quantile-number" class="form-select mb-2" disabled aria-label="Quantile select">
-              <option hidden >Awaiting data...</option>
-            </select>
-          </div>
-
-          <h4>Other</h4>
-
-          <div class="floating-select">
-            <label class="floating-label position-absolute" for="select-measure">Measure</label>
-            <select id="select-measure" class="form-select mb-2" aria-label="Measure select" disabled>
-              <option hidden >Awaiting data...</option>
-            </select>
-          </div>
         </div>
-      </div>
-    </div>
-
-    <div id="content">
-      <div id="topbar">
-        <div id="display-mode-control">
-            <ul class="nav nav-tabs">
-              <li class="nav-item">
-                <a id="graph-nav-link" class="nav-link active"><i class="bi bi-graph-up"></i></a>
-              </li>
-              <li class="nav-item">
-                <a id="table-nav-link" class="nav-link"><i class="bi bi-table"></i></a>
-              </li>
-            <ul>
-        </div>
-        
-        <div id="plot-title"></div>
-
-        <div id="topbar-cnt">
-          <div id="setting-legend-wrapper">
-            <div id="setting-legend"></div>
-          </div>
-          <div id="download-container"></div>
-
-        </div>
-       
-      </div>
-      <div id="plots">
-        <div id="plot-legend"></div>
-        <!-- <div id="setting-legend-wrapper">
-          <div id="setting-legend"></div>
-        </div> -->
-        <div id="plot-container" class="fill-height">
-          <div id="plot-quantiles"></div>
-        </div>
-
-        <div id="table-container"> </div>
 
-        <div id="loader-container" class="position-absolute" style="top:50%; left:50%;">
-          <div class="spinner-border" role="status"></div>
-        </div>
-        <div id="plot-source" style="display: none;">The source...</div>
-      </div>
-      
+     </div>
     </div>
+
+    
   </div>
 
   <div id="settings-dropdown">
-    <div class="d-flex justify-content-between">
-      <h5>Settings</h5>
-      <i id="settings-close" class="fa-solid fa-xmark"></i>
-    </div>
-
     <div class="form-check">
       <input class="form-check-input" type="checkbox" value="" id="check-show-lines">
       <label class="form-check-label" for="check-show-lines">
@@ -168,20 +162,33 @@ <h5>Settings</h5>
     </div>
   </div>
 
+  <div style="position: absolute; left: 0; top:0; opacity: 0; pointer-events:none;">
+    <div id="img-template">
+      <div id="img-title"></div>
+      <div id="img-legend"></div>
+      <div id="img-plot"></div>
+      <div id="img-source">Plot Generated by DCEG EpiTracker Cancer</div>
+    </div>
+  </div>
+
   <footer></footer>
 
   <script type="module">
     import { loadHeaderTemplate, loadFooterTemplate } from "../src/layouts/layout.js";
-    import { initSidebar } from "../src/utils/helper.js"
 
     loadHeaderTemplate()
     loadFooterTemplate()
-    initSidebar()
   </script>
 
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/tippy.js@6/animations/scale.css"
+/>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
       integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
       crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
       integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
       crossorigin="anonymous"></script>
@@ -190,5 +197,9 @@ <h5>Settings</h5>
     integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   
+  <!-- <script type="module" src="../src/pages/mapPage3.js"></script> -->
+  <script src="https://unpkg.com/tippy.js@6"></script>
+
   <script type="module" src="../src/pages/quantilePage.js"></script>
+
 </body>
\ No newline at end of file