diff --git a/ui/src/components/hintDataSelect.tsx b/ui/src/components/hintDataSelect.tsx
index 2d18198fb..2f8cbaf89 100644
--- a/ui/src/components/hintDataSelect.tsx
+++ b/ui/src/components/hintDataSelect.tsx
@@ -58,15 +58,7 @@ export function HintDataSelect(props: HintDataSelectProps) {
   };
 
   return (
-    <FormControl
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onMouseUp={(e) => {
-        e.stopPropagation();
-      }}
-    >
+    <FormControl>
       <Select
         multiple
         displayEmpty
@@ -81,15 +73,7 @@ export function HintDataSelect(props: HintDataSelectProps) {
                   <Chip
                     key={s}
                     label={s}
-                    onMouseDown={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                    onMouseUp={(e) => {
-                      e.stopPropagation();
-                    }}
-                    onDelete={(e) => {
-                      e.stopPropagation();
+                    onDelete={() => {
                       onDelete(s);
                     }}
                   />
diff --git a/ui/src/components/rangeSlider.tsx b/ui/src/components/rangeSlider.tsx
index 21a2e6ef8..96a8b59c9 100644
--- a/ui/src/components/rangeSlider.tsx
+++ b/ui/src/components/rangeSlider.tsx
@@ -86,10 +86,6 @@ export function RangeSlider(props: RangeSliderProps) {
         height: "auto",
         mt: 0.5,
       }}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
     >
       <GridLayout cols fillCol={1} spacing={3} height="auto">
         <Input
diff --git a/ui/src/components/select.tsx b/ui/src/components/select.tsx
new file mode 100644
index 000000000..ee5e20a5b
--- /dev/null
+++ b/ui/src/components/select.tsx
@@ -0,0 +1,17 @@
+import { Theme } from "@mui/material/styles";
+
+export function uncontainedSelectSx() {
+  return {
+    color: (theme: Theme) => theme.palette.primary.main,
+    "& .MuiOutlinedInput-input": {
+      px: 0,
+      py: "2px",
+    },
+    "& .MuiSelect-select": (theme: Theme) => ({
+      ...theme.typography.body2,
+    }),
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderStyle: "none",
+    },
+  };
+}
diff --git a/ui/src/criteria/textSearch.tsx b/ui/src/criteria/textSearch.tsx
index 9a266844c..9ea01c5d4 100644
--- a/ui/src/criteria/textSearch.tsx
+++ b/ui/src/criteria/textSearch.tsx
@@ -193,16 +193,7 @@ function TextSearchInline(props: TextSearchInlineProps) {
   return (
     <Loading status={hintDataState}>
       {!!hintDataState.data?.hintData?.enumHintOptions ? (
-        <FormControl
-          sx={{ maxWidth: 500 }}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onMouseUp={(e) => {
-            e.stopPropagation();
-          }}
-        >
+        <FormControl sx={{ maxWidth: 500 }}>
           <GridLayout rows spacing={1} height="auto">
             <TextField
               label="Search text"
@@ -224,15 +215,7 @@ function TextSearchInline(props: TextSearchInlineProps) {
                       <Chip
                         key={c}
                         label={c}
-                        onMouseDown={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                        }}
-                        onMouseUp={(e) => {
-                          e.stopPropagation();
-                        }}
-                        onDelete={(e) => {
-                          e.stopPropagation();
+                        onDelete={() => {
                           onDelete(c);
                         }}
                       />
diff --git a/ui/src/criteria/unhintedValue.tsx b/ui/src/criteria/unhintedValue.tsx
index a54bb0417..47fbf1136 100644
--- a/ui/src/criteria/unhintedValue.tsx
+++ b/ui/src/criteria/unhintedValue.tsx
@@ -168,15 +168,7 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
 
   return (
     <GridLayout rows height="auto">
-      <FormControl
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-        onMouseUp={(e) => {
-          e.stopPropagation();
-        }}
-      >
+      <FormControl>
         <Select
           value={decodedData.operator}
           input={<OutlinedInput />}
@@ -195,7 +187,6 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
           size="medium"
           onChange={handleMinInputChange}
           onBlur={handleMinInputBlur}
-          onClick={(e) => e.stopPropagation()}
           inputProps={{
             type: "number",
           }}
@@ -208,7 +199,6 @@ function UnhintedValueInline(props: UnhintedValueInlineProps) {
               size="medium"
               onChange={handleMaxInputChange}
               onBlur={handleMaxInputBlur}
-              onClick={(e) => e.stopPropagation()}
               inputProps={{
                 type: "number",
               }}
diff --git a/ui/src/criteria/valueData.tsx b/ui/src/criteria/valueData.tsx
index ef61eff22..84afd1e02 100644
--- a/ui/src/criteria/valueData.tsx
+++ b/ui/src/criteria/valueData.tsx
@@ -254,15 +254,7 @@ export function ValueDataEdit(props: ValueDataEditProps) {
           <Typography variant="body2">{props.title}</Typography>
           <Loading status={hintDataState} size="small">
             {hasHints ? (
-              <GridBox
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onMouseUp={(e) => {
-                  e.stopPropagation();
-                }}
-              >
+              <GridBox>
                 <Typography variant="body2">
                   <IconButton
                     sx={
@@ -289,15 +281,7 @@ export function ValueDataEdit(props: ValueDataEditProps) {
         {hasHints && (!props.title || isValid(props.valueData)) ? (
           <GridLayout rows height="auto">
             {!!valueDataList.length && props.singleValue ? (
-              <FormControl
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onMouseUp={(e) => {
-                  e.stopPropagation();
-                }}
-              >
+              <FormControl>
                 <Select
                   value={valueDataList[0].attribute}
                   input={<OutlinedInput />}
diff --git a/ui/src/demographicCharts.tsx b/ui/src/demographicCharts.tsx
index 7bad974be..e429e5073 100644
--- a/ui/src/demographicCharts.tsx
+++ b/ui/src/demographicCharts.tsx
@@ -1,11 +1,19 @@
+import MenuItem from "@mui/material/MenuItem";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
+import { uncontainedSelectSx } from "components/select";
 import { Cohort } from "data/source";
 import { useUnderlay } from "hooks";
 import { GridBox } from "layout/gridBox";
 import GridLayout from "layout/gridLayout";
 import { ReactNode } from "react";
 import { VizContainer } from "viz/vizContainer";
+import { useState } from "react";
+import Empty from "components/empty";
+import { Underlay } from "underlaysSlice";
 
 export type DemographicChartsProps = {
   cohort?: Cohort;
@@ -15,6 +23,23 @@ export type DemographicChartsProps = {
 export function DemographicCharts(props: DemographicChartsProps) {
   const underlay = useUnderlay();
 
+  const [selectedVisualizations, setSelectedVisualizations] = useState(
+    getInitialVisualizations(underlay)
+  );
+
+  const onSelect = (event: SelectChangeEvent<string[]>) => {
+    const {
+      target: { value: sel },
+    } = event;
+    if (typeof sel === "string") {
+      // This case is only for selects with text input.
+      return;
+    }
+
+    setSelectedVisualizations(sel);
+    storeSelectedVisualizations(underlay.name, sel);
+  };
+
   return (
     <Paper
       sx={{
@@ -23,9 +48,30 @@ export function DemographicCharts(props: DemographicChartsProps) {
       }}
     >
       <GridLayout rows spacing={2}>
-        <GridLayout cols fillCol={1} rowAlign="middle">
+        <GridLayout cols fillCol={0} spacing={1} rowAlign="middle">
           <Typography variant="h6">Cohort visualizations</Typography>
-          <GridBox />
+          <FormControl>
+            <Select
+              fullWidth
+              multiple
+              displayEmpty
+              value={selectedVisualizations}
+              input={<OutlinedInput />}
+              renderValue={(sel) => (
+                <Typography variant="body2">{`${sel.length} visualizations selected`}</Typography>
+              )}
+              onChange={onSelect}
+              sx={uncontainedSelectSx()}
+            >
+              {underlay.visualizations.map((viz) => {
+                return (
+                  <MenuItem key={viz.name} value={viz.name}>
+                    {viz.title ?? "Unknown"}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </FormControl>
           {props.extraControls}
         </GridLayout>
         <GridBox
@@ -38,13 +84,56 @@ export function DemographicCharts(props: DemographicChartsProps) {
             gridGap: (theme) => theme.spacing(3),
           }}
         >
-          {underlay.visualizations.map((v) =>
-            props.cohort ? (
-              <VizContainer key={v.name} config={v} cohort={props.cohort} />
-            ) : null
+          {selectedVisualizations.length > 0 ? (
+            underlay.visualizations.map((v) =>
+              selectedVisualizations.find((sv) => sv === v.name) &&
+              props.cohort ? (
+                <VizContainer key={v.name} config={v} cohort={props.cohort} />
+              ) : null
+            )
+          ) : (
+            <Empty
+              maxWidth="90%"
+              minHeight="200px"
+              title="No visualizations selected"
+            />
           )}
         </GridBox>
       </GridLayout>
     </Paper>
   );
 }
+
+// TODO(tjennison): Store the selected visualizations in local storage per
+// underlay for now.  Longer term, these should be stored on the backend but
+// there a few options about whether they should be stored attached to the
+// cohort, study, user, etc. as part of the visualiation changes.
+function storageKey(underlay: string) {
+  return `tanagra-selected-visualizations-${underlay}`;
+}
+
+function loadSelectedVisualizations(underlay: string): string[] | undefined {
+  const stored = localStorage.getItem(storageKey(underlay));
+  if (!stored) {
+    return undefined;
+  }
+  return JSON.parse(stored);
+}
+
+function storeSelectedVisualizations(underlay: string, sel: string[]) {
+  localStorage.setItem(storageKey(underlay), JSON.stringify(sel));
+}
+
+function getInitialVisualizations(underlay: Underlay) {
+  const stored = loadSelectedVisualizations(underlay.name);
+  if (!stored) {
+    return (
+      underlay.uiConfiguration.defaultVisualizations ??
+      underlay.visualizations.map((viz) => viz.name)
+    );
+  }
+
+  return stored.filter((v) =>
+    underlay.visualizations.find((viz) => viz.name === v)
+  );
+}
diff --git a/ui/src/overview.tsx b/ui/src/overview.tsx
index a880f7783..694c9cb93 100644
--- a/ui/src/overview.tsx
+++ b/ui/src/overview.tsx
@@ -1,3 +1,4 @@
+import { uncontainedSelectSx } from "components/select";
 import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
@@ -135,10 +136,19 @@ export function Overview() {
       />
       <GridLayout
         rows="minmax(max-content, 100%)"
-        cols="minmax(440px, auto) 450px"
+        cols="max(450px, 40%) minmax(440px, auto)"
         spacing={2}
         sx={{ px: 5, overflow: "auto" }}
       >
+        <GridBox sx={{ pt: 3 }}>
+          <Paper
+            sx={{
+              p: 2,
+            }}
+          >
+            <GroupList />
+          </Paper>
+        </GridBox>
         <GridBox
           sx={{
             pt: 3,
@@ -165,15 +175,6 @@ export function Overview() {
           {renameTitleDialog}
           {confirmDialog}
         </GridBox>
-        <GridBox sx={{ pt: 3 }}>
-          <Paper
-            sx={{
-              p: 2,
-            }}
-          >
-            <GroupList />
-          </Paper>
-        </GridBox>
       </GridLayout>
     </GridLayout>
   );
@@ -441,6 +442,7 @@ function ParticipantsGroupSection(props: {
           ) : (
             <Empty
               maxWidth="90%"
+              minHeight="60px"
               subtitle={
                 <>
                   <Link
@@ -531,6 +533,7 @@ function ParticipantsGroupSection(props: {
           ) : (
             <Empty
               maxWidth="90%"
+              minHeight="60px"
               subtitle={
                 <>
                   <Link
@@ -647,7 +650,6 @@ function ReducingOperator(props: {
                   operatorValue: parseInt(event.target.value) ?? 0,
                 });
               }}
-              onClick={(e) => e.stopPropagation()}
               inputProps={{
                 type: "number",
                 min: 1,
@@ -697,19 +699,7 @@ function ReducingOperatorSelect(props: {
               : undefined,
           });
         }}
-        sx={{
-          color: (theme) => theme.palette.primary.main,
-          "& .MuiOutlinedInput-input": {
-            px: 0,
-            py: "2px",
-          },
-          "& .MuiSelect-select": (theme) => ({
-            ...theme.typography.body2,
-          }),
-          "& .MuiOutlinedInput-notchedOutline": {
-            borderStyle: "none",
-          },
-        }}
+        sx={uncontainedSelectSx()}
       >
         <MenuItem value={GroupSectionReducingOperator.Any}>
           Any mention of
@@ -851,16 +841,6 @@ function ParticipantsGroup(props: {
   return (
     <GridLayout key={props.group.id} rows height="auto">
       <GridBox
-        onClick={() => {
-          navigate(
-            "../" +
-              cohortURL(
-                cohort.id,
-                props.groupSection.id,
-                !selected ? props.group.id : undefined
-              )
-          );
-        }}
         sx={{
           p: 2,
           height: "auto",
@@ -869,15 +849,7 @@ function ParticipantsGroup(props: {
                 backgroundColor: "#F1F2FA",
                 boxShadow: "inset 0 -1px 0 #BEC2E9, inset 0 1px 0 #BEC2E9",
               }
-            : {
-                "&:hover": {
-                  textDecoration: "underline",
-                  cursor: "pointer",
-                  color: (theme) =>
-                    (theme.typography as { link: { color: string } }).link
-                      .color,
-                },
-              }),
+            : undefined),
         }}
       >
         <GridLayout key={props.group.id} rows height="auto">
@@ -894,10 +866,29 @@ function ParticipantsGroup(props: {
               <GridBox />
             )}
             <GridBox
+              onClick={() => {
+                navigate(
+                  "../" +
+                    cohortURL(
+                      cohort.id,
+                      props.groupSection.id,
+                      !selected ? props.group.id : undefined
+                    )
+                );
+              }}
               sx={{
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
                 overflow: "hidden",
+                "&:hover": {
+                  textDecoration: "underline",
+                  cursor: "pointer",
+                  color: (theme) =>
+                    !selected
+                      ? (theme.typography as { link: { color: string } }).link
+                          .color
+                      : undefined,
+                },
               }}
             >
               <Typography
@@ -908,15 +899,7 @@ function ParticipantsGroup(props: {
                 {title}
               </Typography>
             </GridBox>
-            <GridBox
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              onMouseUp={(e) => {
-                e.stopPropagation();
-              }}
-            >
+            <GridLayout cols rowAlign="middle">
               {selected && !!plugin.renderEdit ? (
                 <IconButton
                   data-testid={title}
@@ -971,7 +954,7 @@ function ParticipantsGroup(props: {
                   <DeleteIcon fontSize="small" />
                 </IconButton>
               ) : null}
-            </GridBox>
+            </GridLayout>
             <GridBox />
             <Loading status={groupCountState} size="small">
               <Typography
@@ -1035,28 +1018,18 @@ function ParticipantsGroup(props: {
                         <Typography variant="body2">
                           {modifierCriteria[i].config.displayName}
                         </Typography>
-                        <GridBox
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                          }}
-                          onMouseUp={(e) => {
-                            e.stopPropagation();
-                          }}
+                        <IconButton
+                          onClick={() =>
+                            deleteCohortCriteriaModifier(
+                              context,
+                              props.groupSection.id,
+                              props.group.id,
+                              p.id
+                            )
+                          }
                         >
-                          <IconButton
-                            onClick={() =>
-                              deleteCohortCriteriaModifier(
-                                context,
-                                props.groupSection.id,
-                                props.group.id,
-                                p.id
-                              )
-                            }
-                          >
-                            <DeleteIcon fontSize="small" />
-                          </IconButton>
-                        </GridBox>
+                          <DeleteIcon fontSize="small" />
+                        </IconButton>
                         <GridBox />
                       </GridLayout>
                     </GridLayout>
diff --git a/ui/src/plugins/vumc/biovu.tsx b/ui/src/plugins/vumc/biovu.tsx
index 4f6292b09..06716d78b 100644
--- a/ui/src/plugins/vumc/biovu.tsx
+++ b/ui/src/plugins/vumc/biovu.tsx
@@ -146,15 +146,7 @@ function BioVUInline(props: BioVUInlineProps) {
 
   return !props.config.plasmaFilter ? (
     <GridLayout rows spacing={1} height="auto">
-      <FormControl
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-        onMouseUp={(e) => {
-          e.stopPropagation();
-        }}
-      >
+      <FormControl>
         <Select
           value={decodedData.sampleFilter}
           input={<OutlinedInput />}
@@ -168,15 +160,7 @@ function BioVUInline(props: BioVUInlineProps) {
         </Select>
       </FormControl>
       <GridLayout cols rowAlign="middle">
-        <GridBox
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onMouseUp={(e) => {
-            e.stopPropagation();
-          }}
-        >
+        <GridBox>
           <Checkbox
             checked={decodedData.excludeCompromised}
             onChange={() =>
@@ -194,15 +178,7 @@ function BioVUInline(props: BioVUInlineProps) {
         </Tooltip>
       </GridLayout>
       <GridLayout cols rowAlign="middle">
-        <GridBox
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onMouseUp={(e) => {
-            e.stopPropagation();
-          }}
-        >
+        <GridBox>
           <Checkbox
             checked={decodedData.excludeInternal}
             onChange={() =>
diff --git a/ui/src/underlaysSlice.ts b/ui/src/underlaysSlice.ts
index 580398277..08222408c 100644
--- a/ui/src/underlaysSlice.ts
+++ b/ui/src/underlaysSlice.ts
@@ -26,6 +26,7 @@ export type UIConfiguration = {
   demographicChartConfigs: DemographicChartConfig;
   criteriaSearchConfig: CriteriaSearchConfig;
   cohortReviewConfig: CohortReviewConfig;
+  defaultVisualizations: string[];
 };
 
 export type FeatureConfig = {