diff --git a/src/app/(private)/map/[id]/components/DataSourceSelectButton.tsx b/src/app/(private)/map/[id]/components/DataSourceSelectButton.tsx
index ad2e1290..3cf368ff 100644
--- a/src/app/(private)/map/[id]/components/DataSourceSelectButton.tsx
+++ b/src/app/(private)/map/[id]/components/DataSourceSelectButton.tsx
@@ -117,7 +117,7 @@ function DataSourceSelectButtonModalTrigger({
   );
 }
 
-function DataSourceSelectModal({
+export function DataSourceSelectModal({
   isModalOpen,
   setIsModalOpen,
   onSelect,
diff --git a/src/app/(private)/map/[id]/components/Legend.tsx b/src/app/(private)/map/[id]/components/Legend.tsx
index ed89fd96..774aba15 100644
--- a/src/app/(private)/map/[id]/components/Legend.tsx
+++ b/src/app/(private)/map/[id]/components/Legend.tsx
@@ -1,24 +1,56 @@
-import { ChevronRight, Eye, EyeOff, LoaderPinwheel } from "lucide-react";
-import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
-import { useChoroplethDataSource } from "@/app/(private)/map/[id]/hooks/useDataSources";
+import {
+  ChevronDown,
+  CornerDownRight,
+  Database,
+  LoaderPinwheel,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  useChoroplethDataSource,
+  useDataSources,
+} from "@/app/(private)/map/[id]/hooks/useDataSources";
 import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
-import { MAX_COLUMN_KEY } from "@/constants";
+import { MAX_COLUMN_KEY, NULL_UUID } from "@/constants";
+import { AreaSetGroupCodeLabels, AreaSetGroupCodeYears } from "@/labels";
 import { ColumnType } from "@/models/DataSource";
-import { CalculationType, ColorScaleType } from "@/models/MapView";
+import { CalculationType, ColorScaleType, MapType } from "@/models/MapView";
+import { Combobox } from "@/shadcn/ui/combobox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shadcn/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shadcn/ui/select";
 import { cn } from "@/shadcn/utils";
 import { resolveColumnMetadataEntry } from "@/utils/resolveColumnMetadata";
 import { formatNumber } from "@/utils/text";
 import { calculateStepColor, useColorScheme } from "../colors";
 import { useAreaStats } from "../data";
 import BivariateLegend from "./BivariateLagend";
+import { getValidAreaSetGroupCodes } from "./Choropleth/areas";
 import { getChoroplethDataKey } from "./Choropleth/utils";
 import ColumnMetadataIcons from "./ColumnMetadataIcons";
+import { DataSourceSelectModal } from "./DataSourceSelectButton";
 import type { NumericColorScheme } from "../colors";
+import type { AreaSetGroupCode } from "@/models/AreaSet";
 
 export default function Legend() {
   const { viewConfig, updateViewConfig } = useMapViews();
   const dataSource = useChoroplethDataSource();
-  const { setBoundariesPanelOpen } = useChoropleth();
+  const { data: dataSources, getDataSourceById } = useDataSources();
+
+  const [isDataSourceModalOpen, setIsDataSourceModalOpen] = useState(false);
+  const [invalidDataSourceId, setInvalidDataSourceId] = useState<string | null>(
+    null,
+  );
+  const [bivariatePickerOpen, setBivariatePickerOpen] = useState(false);
 
   const areaStatsQuery = useAreaStats();
   const areaStats = areaStatsQuery?.data;
@@ -29,12 +61,6 @@ export default function Legend() {
     viewConfig,
   });
 
-  const isLayerVisible = viewConfig.showChoropleth !== false;
-
-  const toggleLayerVisibility = () => {
-    updateViewConfig({ showChoropleth: !isLayerVisible });
-  };
-
   const hasDataSource = Boolean(viewConfig.areaDataSourceId);
   const hasColumn = Boolean(
     viewConfig.areaDataColumn ||
@@ -45,58 +71,93 @@ export default function Legend() {
     viewConfig.areaDataColumn &&
     viewConfig.areaDataSecondaryColumn;
 
-  if (!hasDataSource) {
-    return null;
-  }
+  const isCount = viewConfig.calculationType === CalculationType.Count;
+  const canSelectColumn = !isCount && hasDataSource;
 
-  const getColumnLabel = () => {
-    if (!hasColumn) {
-      return <p>No column selected</p>;
-    }
-    if (viewConfig.areaDataColumn === MAX_COLUMN_KEY) {
-      return <p>Highest-value column</p>;
-    }
-    if (viewConfig.calculationType === CalculationType.Count) {
-      return <p>Count</p>;
-    }
+  const columnOneIsNumber =
+    Boolean(viewConfig.areaDataColumn) &&
+    dataSource?.columnDefs.find((c) => c.name === viewConfig.areaDataColumn)
+      ?.type === ColumnType.Number;
+  const canSelectSecondaryColumn =
+    !isCount && Boolean(viewConfig.areaDataColumn) && columnOneIsNumber;
 
-    const primaryLabel = (
-      <div>
-        {viewConfig.areaDataColumn}
-        <ColumnMetadataIcons
-          dataSource={dataSource}
-          column={viewConfig.areaDataColumn}
-          fields={{
-            description: true,
-            valueLabels: true,
-            categoryColors: colorScheme?.colorSchemeType === "categoric",
-          }}
-        />
-      </div>
-    );
+  const showSecondColumnRow =
+    canSelectSecondaryColumn &&
+    (Boolean(viewConfig.areaDataSecondaryColumn) || bivariatePickerOpen);
 
-    if (!viewConfig.areaDataSecondaryColumn) {
-      return primaryLabel;
+  useEffect(() => {
+    if (!dataSource || !viewConfig.areaDataColumn) return;
+    const primaryIsNumber =
+      dataSource.columnDefs.find((c) => c.name === viewConfig.areaDataColumn)
+        ?.type === ColumnType.Number;
+    if (!primaryIsNumber) {
+      if (viewConfig.areaDataSecondaryColumn) {
+        updateViewConfig({ areaDataSecondaryColumn: undefined });
+      }
+      setBivariatePickerOpen(false);
     }
+  }, [
+    dataSource,
+    viewConfig.areaDataColumn,
+    viewConfig.areaDataSecondaryColumn,
+    updateViewConfig,
+  ]);
 
-    const secondaryLabel = (
-      <div>
-        {viewConfig.areaDataSecondaryColumn}
-        <ColumnMetadataIcons
-          dataSource={dataSource}
-          column={viewConfig.areaDataSecondaryColumn}
-          fields={{ description: true, valueLabels: true }}
-        />
-      </div>
-    );
+  const secondaryColumnComboboxOptions = [
+    { value: NULL_UUID, label: "None" },
+    ...(dataSources
+      ?.find((ds) => ds.id === viewConfig.areaDataSourceId)
+      ?.columnDefs.filter(
+        (col) =>
+          col.type === ColumnType.Number &&
+          col.name !== viewConfig.areaDataColumn,
+      )
+      .map((col) => ({
+        value: col.name,
+        label: `${col.name} (${col.type})`,
+        hint: resolveColumnMetadataEntry(
+          dataSource?.columnMetadata || [],
+          dataSource?.columnMetadataOverride,
+          col.name,
+        )?.description,
+      })) || []),
+  ];
 
-    return (
-      <div>
-        {primaryLabel}
-        <span>vs</span>
-        {secondaryLabel}
-      </div>
-    );
+  const handleDataSourceSelect = (dataSourceId: string) => {
+    const selectedAreaSetGroup = viewConfig.areaSetGroupCode;
+    if (!selectedAreaSetGroup) {
+      updateViewConfig({
+        areaDataSourceId: dataSourceId,
+        areaDataSecondaryColumn: undefined,
+      });
+      setIsDataSourceModalOpen(false);
+      return;
+    }
+    const ds = getDataSourceById(dataSourceId);
+    const validAreaSetGroups = getValidAreaSetGroupCodes(ds?.geocodingConfig);
+    if (validAreaSetGroups.includes(selectedAreaSetGroup)) {
+      updateViewConfig({
+        areaDataSourceId: dataSourceId,
+        areaDataSecondaryColumn: undefined,
+      });
+      setIsDataSourceModalOpen(false);
+      return;
+    }
+    setIsDataSourceModalOpen(false);
+    setInvalidDataSourceId(dataSourceId);
+  };
+
+  const toggleBivariatePicker = () => {
+    if (viewConfig.areaDataSecondaryColumn) {
+      updateViewConfig({ areaDataSecondaryColumn: undefined });
+      setBivariatePickerOpen(false);
+      return;
+    }
+    if (bivariatePickerOpen) {
+      setBivariatePickerOpen(false);
+      return;
+    }
+    setBivariatePickerOpen(true);
   };
 
   const makeBars = () => {
@@ -132,7 +193,7 @@ export default function Legend() {
         )?.valueLabels || {};
 
       return (
-        <div className="flex flex-col gap-1.5 w-full py-1">
+        <div className="flex max-h-[min(35vh,14rem)] min-h-0 w-full flex-col gap-1.5 overflow-y-auto py-1 pr-0.5">
           {Object.keys(colorScheme.colorMap)
             .filter((key) => categoriesInData.has(key))
             .toSorted((a, b) => {
@@ -367,78 +428,264 @@ export default function Legend() {
   };
 
   return (
-    <div className="group flex flex-col gap-1 rounded-sm overflow-auto bg-white border border-neutral-200 w-full">
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={() => setBoundariesPanelOpen(true)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setBoundariesPanelOpen(true);
-          }
-        }}
-        className="flex items-start justify-between hover:bg-neutral-50 transition-colors cursor-pointer text-left w-full"
-      >
-        <div className="flex flex-col flex-1 py-1">
-          <div className="flex items-center justify-between pr-2">
-            <div className="flex gap-x-1 pb-2 px-2 items-center text-sm flex-wrap">
-              <p className="flex items-center font-medium">
-                {dataSource?.name}
-              </p>
-              <ChevronRight className="w-4 h-4" />
-              <div className="flex items-center gap-0.5">
-                {getColumnLabel()}
+    <div className="group flex flex-col rounded-sm overflow-auto bg-white border border-neutral-200 w-full">
+      {/* Data source + column */}
+      <div className="flex flex-col gap-2 p-2">
+        <p className="text-xs text-muted-foreground font-mono font-medium uppercase mb-1">
+          Data source
+        </p>
+
+        <button
+          type="button"
+          className={cn(
+            "flex w-full min-w-0 items-center gap-2 rounded-md border border-input bg-background px-3 h-8 text-xs font-normal shadow-xs outline-none transition-[color,box-shadow,border]",
+            "hover:bg-accent/60 hover:border-action-hover",
+            "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          )}
+          onClick={() => setIsDataSourceModalOpen(true)}
+        >
+          <Database
+            className="size-3.5 shrink-0 text-muted-foreground"
+            aria-hidden
+          />
+          <span className="min-w-0 flex-1 truncate text-left">
+            {dataSource?.name ?? "Select data source…"}
+          </span>
+          <ChevronDown className="size-4 shrink-0 opacity-50" aria-hidden />
+        </button>
+
+        {hasDataSource && canSelectColumn && (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <CornerDownRight
+                className="size-4 shrink-0 text-muted-foreground"
+                strokeWidth={2}
+                aria-hidden
+              />
+              <div className="min-w-0 flex-1">
+                <Combobox
+                  size="sm"
+                  triggerClassName="text-xs font-normal hover:border-action-hover"
+                  options={[
+                    { value: NULL_UUID, label: "None" },
+                    {
+                      value: MAX_COLUMN_KEY,
+                      label: "Highest-value column (String)",
+                    },
+                    ...(dataSources
+                      ?.find((ds) => ds.id === viewConfig.areaDataSourceId)
+                      ?.columnDefs.map((col) => ({
+                        value: col.name,
+                        label: `${col.name} (${col.type})`,
+                        hint: resolveColumnMetadataEntry(
+                          dataSource?.columnMetadata || [],
+                          dataSource?.columnMetadataOverride,
+                          col.name,
+                        )?.description,
+                      })) || []),
+                  ]}
+                  value={viewConfig.areaDataColumn || NULL_UUID}
+                  onValueChange={(value) => {
+                    const col = value === NULL_UUID ? "" : value;
+                    const primaryIsNumber =
+                      Boolean(col) &&
+                      dataSource?.columnDefs.find((c) => c.name === col)
+                        ?.type === ColumnType.Number;
+                    updateViewConfig({
+                      areaDataColumn: col,
+                      ...(col === viewConfig.areaDataSecondaryColumn
+                        ? { areaDataSecondaryColumn: undefined }
+                        : {}),
+                      ...(!primaryIsNumber
+                        ? { areaDataSecondaryColumn: undefined }
+                        : {}),
+                    });
+                    if (!primaryIsNumber) {
+                      setBivariatePickerOpen(false);
+                    }
+                  }}
+                  placeholder="Column…"
+                  searchPlaceholder="Search columns…"
+                />
               </div>
+              {viewConfig.areaDataColumn &&
+                viewConfig.areaDataColumn !== NULL_UUID &&
+                viewConfig.areaDataColumn !== MAX_COLUMN_KEY && (
+                  <ColumnMetadataIcons
+                    dataSource={dataSource}
+                    column={viewConfig.areaDataColumn}
+                    fields={{
+                      description: true,
+                      valueLabels: true,
+                      categoryColors:
+                        colorScheme?.colorSchemeType === "categoric",
+                    }}
+                  />
+                )}
             </div>
-            <VisibilityToggle
-              isLayerVisible={isLayerVisible}
-              toggleLayerVisibility={toggleLayerVisibility}
-            />
+
+            {canSelectSecondaryColumn && (
+              <button
+                type="button"
+                className="text-xs text-muted-foreground underline cursor-pointer text-left pl-6 hover:text-foreground transition-colors"
+                onClick={toggleBivariatePicker}
+              >
+                {viewConfig.areaDataSecondaryColumn || bivariatePickerOpen
+                  ? "Remove second column"
+                  : "Add another column"}
+              </button>
+            )}
+
+            {showSecondColumnRow && (
+              <div className="flex items-center gap-2">
+                <CornerDownRight
+                  className="size-4 shrink-0 text-muted-foreground invisible"
+                  strokeWidth={2}
+                  aria-hidden
+                />
+                <div className="min-w-0 flex-1">
+                  <Combobox
+                    size="sm"
+                    triggerClassName="text-xs font-normal hover:border-action-hover"
+                    options={secondaryColumnComboboxOptions}
+                    value={viewConfig.areaDataSecondaryColumn || NULL_UUID}
+                    onValueChange={(value) => {
+                      updateViewConfig({
+                        areaDataSecondaryColumn:
+                          value === NULL_UUID ? undefined : value,
+                      });
+                      if (value === NULL_UUID) {
+                        setBivariatePickerOpen(false);
+                      }
+                    }}
+                    placeholder="Column 2…"
+                    searchPlaceholder="Search columns…"
+                  />
+                </div>
+                {viewConfig.areaDataSecondaryColumn && (
+                  <ColumnMetadataIcons
+                    dataSource={dataSource}
+                    column={viewConfig.areaDataSecondaryColumn}
+                    fields={{ description: true, valueLabels: true }}
+                  />
+                )}
+              </div>
+            )}
           </div>
-          {isLoading ? (
-            <div className="flex items-center justify-center px-2 py-4">
-              <LoaderPinwheel className="w-5 h-5 animate-spin text-neutral-400" />
-            </div>
-          ) : isBivariate ? (
-            <div className="px-2" onClick={(e) => e.stopPropagation()}>
-              <BivariateLegend />
-            </div>
-          ) : hasColumn && colorScheme ? (
-            <div className="flex px-2">{makeBars()}</div>
-          ) : null}
-        </div>
+        )}
       </div>
+
+      {/* Colour bars */}
+      {isLoading ? (
+        <div className="flex items-center justify-center px-3 py-4">
+          <LoaderPinwheel className="w-5 h-5 animate-spin text-neutral-400" />
+        </div>
+      ) : isBivariate ? (
+        <div className="px-3 pb-2">
+          <BivariateLegend />
+        </div>
+      ) : hasColumn && colorScheme ? (
+        <div className="flex px-3 pb-2">{makeBars()}</div>
+      ) : null}
+
+      {viewConfig.mapType !== MapType.Hex && (
+        <div className="border-t border-neutral-100 px-3 py-3">
+          <p className="text-xs text-muted-foreground font-mono font-medium uppercase  mb-1">
+            Boundaries
+          </p>
+          <Select
+            value={viewConfig.areaSetGroupCode || NULL_UUID}
+            onValueChange={(value) =>
+              updateViewConfig({
+                areaSetGroupCode:
+                  value === NULL_UUID ? null : (value as AreaSetGroupCode),
+              })
+            }
+          >
+            <SelectTrigger
+              size="sm"
+              className="h-8 w-full text-xs font-normal shadow-xs hover:border-action-hover"
+            >
+              <SelectValue placeholder="Boundaries…">
+                {viewConfig.areaSetGroupCode
+                  ? AreaSetGroupCodeLabels[viewConfig.areaSetGroupCode]
+                  : "No locality"}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={NULL_UUID}>No locality</SelectItem>
+              {getValidAreaSetGroupCodes(dataSource?.geocodingConfig).map(
+                (code) => (
+                  <SelectItem key={code} value={code}>
+                    <div className="flex flex-col">
+                      <span>
+                        {AreaSetGroupCodeLabels[code as AreaSetGroupCode]}
+                      </span>
+                      <span
+                        className="text-xs text-muted-foreground"
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            AreaSetGroupCodeYears[code as AreaSetGroupCode],
+                        }}
+                      />
+                    </div>
+                  </SelectItem>
+                ),
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+      {/* Data source modal */}
+      <DataSourceSelectModal
+        isModalOpen={isDataSourceModalOpen}
+        setIsModalOpen={setIsDataSourceModalOpen}
+        onSelect={handleDataSourceSelect}
+      />
+
+      {/* Invalid boundary dialog */}
+      <Dialog
+        open={Boolean(invalidDataSourceId)}
+        onOpenChange={(o) => {
+          if (!o) setInvalidDataSourceId(null);
+        }}
+      >
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-auto">
+          <DialogHeader>
+            <DialogTitle>Select new boundaries</DialogTitle>
+          </DialogHeader>
+          <p>
+            The data source you have selected does not fit into your selected
+            boundaries (
+            {viewConfig.areaSetGroupCode
+              ? AreaSetGroupCodeLabels[viewConfig.areaSetGroupCode]
+              : "unknown"}
+            ). Please select alternative boundaries, or cancel.
+          </p>
+          <Select
+            onValueChange={(value) => {
+              updateViewConfig({
+                areaSetGroupCode: value as AreaSetGroupCode,
+                areaDataSourceId: invalidDataSourceId || "",
+              });
+              setInvalidDataSourceId(null);
+            }}
+          >
+            <SelectTrigger className="w-full min-w-0">
+              <SelectValue placeholder="Choose boundaries…" />
+            </SelectTrigger>
+            <SelectContent>
+              {getValidAreaSetGroupCodes(
+                getDataSourceById(invalidDataSourceId)?.geocodingConfig,
+              ).map((code) => (
+                <SelectItem key={code} value={code}>
+                  {AreaSetGroupCodeLabels[code as AreaSetGroupCode]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
-
-const VisibilityToggle = ({
-  isLayerVisible,
-  toggleLayerVisibility,
-}: {
-  isLayerVisible: boolean;
-  toggleLayerVisibility: () => void;
-}) => (
-  <div className="opacity-0 group-hover:opacity-100 transition-opacity ml-2 shrink-0">
-    <div
-      role="button"
-      tabIndex={0}
-      className="p-2 rounded bg-neutral-100 hover:bg-neutral-200 cursor-pointer transition-colors"
-      aria-label={isLayerVisible ? "Hide layer" : "Show layer"}
-      onClick={(e) => {
-        e.stopPropagation();
-        toggleLayerVisibility();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-          toggleLayerVisibility();
-        }
-      }}
-    >
-      {isLayerVisible ? <Eye size={16} /> : <EyeOff size={16} />}
-    </div>
-  </div>
-);
diff --git a/src/app/(private)/map/[id]/components/controls/BoundariesControl/BoundariesControl.tsx b/src/app/(private)/map/[id]/components/controls/BoundariesControl/BoundariesControl.tsx
index c7fd9f37..ff3b5046 100644
--- a/src/app/(private)/map/[id]/components/controls/BoundariesControl/BoundariesControl.tsx
+++ b/src/app/(private)/map/[id]/components/controls/BoundariesControl/BoundariesControl.tsx
@@ -1,10 +1,9 @@
-import { SettingsIcon } from "lucide-react";
+import { PaintbrushIcon } from "lucide-react";
 import { useState } from "react";
 import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
 import IconButtonWithTooltip from "@/components/IconButtonWithTooltip";
 import { LayerType } from "@/types";
 import LayerControlWrapper from "../LayerControlWrapper";
-import EmptyLayer from "../LayerEmptyMessage";
 import LayerHeader from "../LayerHeader";
 import LegendControl from "./LegendControl";
 import { useBoundariesControl } from "./useBoundariesControl";
@@ -23,31 +22,23 @@ export default function BoundariesControl() {
         setExpanded={setExpanded}
         enableVisibilityToggle={hasDataSource}
       >
-        <IconButtonWithTooltip
-          tooltip={
-            boundariesPanelOpen ? "Close settings" : "Open advanced settings"
-          }
-          onClick={() => setBoundariesPanelOpen(!boundariesPanelOpen)}
-        >
-          <SettingsIcon size={16} />
-        </IconButtonWithTooltip>
+        {hasDataSource && (
+          <IconButtonWithTooltip
+            tooltip={
+              boundariesPanelOpen
+                ? "Close style settings"
+                : "Open style settings"
+            }
+            onClick={() => setBoundariesPanelOpen(!boundariesPanelOpen)}
+          >
+            <PaintbrushIcon size={16} />
+          </IconButtonWithTooltip>
+        )}
       </LayerHeader>
 
       {expanded && (
         <div className="px-4 pt-2 pb-3 space-y-2">
-          {/* Controls removed from here 2025-12-08. */}
-          {/* Potentially could be restored. Remove if still not restored by 2025-03-01 */}
-          {/* <ShapeSelector />
-          <Separator />
-          <FillSelector /> */}
-          {!hasDataSource && (
-            <EmptyLayer
-              message="Add a data visualisation"
-              onClick={() => setBoundariesPanelOpen(true)}
-              showAsButton
-            />
-          )}
-          {hasDataSource && <LegendControl />}
+          <LegendControl />
         </div>
       )}
     </LayerControlWrapper>
diff --git a/src/app/(private)/map/[id]/components/controls/BoundariesControl/LegendControl.tsx b/src/app/(private)/map/[id]/components/controls/BoundariesControl/LegendControl.tsx
index c9bed91f..4847035c 100644
--- a/src/app/(private)/map/[id]/components/controls/BoundariesControl/LegendControl.tsx
+++ b/src/app/(private)/map/[id]/components/controls/BoundariesControl/LegendControl.tsx
@@ -1,20 +1,5 @@
 import Legend from "@/app/(private)/map/[id]/components/Legend";
-import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
-import { useBoundariesControl } from "./useBoundariesControl";
 
 export default function LegendControl() {
-  const { viewConfig } = useMapViews();
-  const { hasShape } = useBoundariesControl();
-
-  return (
-    <div
-      className={`space-y-1 ${!hasShape ? "opacity-50 pointer-events-none" : ""}`}
-    >
-      <div
-        className={`flex items-center bg-white group relative ${viewConfig.showChoropleth ? "" : "opacity-50"}`}
-      >
-        <Legend />
-      </div>
-    </div>
-  );
+  return <Legend />;
 }
diff --git a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
index 0e791ccc..d024e6cf 100644
--- a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
@@ -1,13 +1,9 @@
-import { CircleAlert, Database, Palette, PieChart, X } from "lucide-react";
+import { Palette, PieChart, X } from "lucide-react";
 import { useState } from "react";
 import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
-import {
-  useChoroplethDataSource,
-  useDataSources,
-} from "@/app/(private)/map/[id]/hooks/useDataSources";
+import { useChoroplethDataSource } from "@/app/(private)/map/[id]/hooks/useDataSources";
 import { useMapViews } from "@/app/(private)/map/[id]/hooks/useMapViews";
-import { DEFAULT_CUSTOM_COLOR, MAX_COLUMN_KEY, NULL_UUID } from "@/constants";
-import { AreaSetGroupCodeLabels, AreaSetGroupCodeYears } from "@/labels";
+import { DEFAULT_CUSTOM_COLOR, MAX_COLUMN_KEY } from "@/constants";
 import { ColumnType } from "@/models/DataSource";
 import {
   CalculationType,
@@ -17,7 +13,6 @@ import {
 } from "@/models/MapView";
 import { Button } from "@/shadcn/ui/button";
 import { Checkbox } from "@/shadcn/ui/checkbox";
-import { Combobox } from "@/shadcn/ui/combobox";
 import {
   Dialog,
   DialogContent,
@@ -37,16 +32,10 @@ import {
 import { Separator } from "@/shadcn/ui/separator";
 import { Switch } from "@/shadcn/ui/switch";
 import { cn } from "@/shadcn/utils";
-import { resolveColumnMetadataEntry } from "@/utils/resolveColumnMetadata";
 import { CHOROPLETH_COLOR_SCHEMES } from "../../../colors";
 import { useEditColumnMetadata } from "../../../hooks/useEditColumnMetadata";
-import {
-  dataRecordsWillAggregate,
-  getValidAreaSetGroupCodes,
-} from "../../Choropleth/areas";
-import DataSourceSelectButton from "../../DataSourceSelectButton";
+import { dataRecordsWillAggregate } from "../../Choropleth/areas";
 import SteppedColorEditor from "./SteppedColorEditor";
-import type { AreaSetGroupCode } from "@/models/AreaSet";
 import type { DataSource } from "@/models/DataSource";
 
 const SELECT_TO_BUTTON_CLASSES =
@@ -166,13 +155,8 @@ export default function VisualisationPanel({
 }) {
   const { viewConfig, updateViewConfig } = useMapViews();
   const { boundariesPanelOpen, setBoundariesPanelOpen } = useChoropleth();
-  const { data: dataSources, getDataSourceById } = useDataSources();
   const dataSource = useChoroplethDataSource();
 
-  const [invalidDataSourceId, setInvalidDataSourceId] = useState<string | null>(
-    null,
-  );
-
   if (!boundariesPanelOpen) return null;
 
   const isCount = viewConfig.calculationType === CalculationType.Count;
@@ -186,8 +170,6 @@ export default function VisualisationPanel({
     viewConfig.colorScaleType === ColorScaleType.Categorical ||
     columnOneIsNotNumber;
 
-  const canSelectColumn = !isCount && viewConfig.areaDataSourceId;
-  const canSelectSecondaryColumn = !isCount && columnOneIsNumber;
   const canSelectAggregation =
     !isCount &&
     columnOneIsNumber &&
@@ -200,6 +182,8 @@ export default function VisualisationPanel({
   const canSelectColorScheme = canSelectColorScale && !isCategorical;
   const canSetCategoryColors = isCategorical;
 
+  const hasDataSource = Boolean(viewConfig.areaDataSourceId);
+
   return (
     <div
       className={cn(
@@ -211,7 +195,7 @@ export default function VisualisationPanel({
       }}
     >
       <div className="flex justify-between items-start gap-6 / text-sm">
-        <h3 className="mt-2 font-medium">Create visualisation</h3>
+        <h3 className="mt-2 font-medium">Style settings</h3>
         <button
           aria-label="Close visualisation panel"
           className="text-muted-foreground hover:text-primary cursor-pointer"
@@ -223,654 +207,408 @@ export default function VisualisationPanel({
 
       <Separator />
 
-      {/* Data Source Selection */}
-      <div className="space-y-2 mb-4 group">
-        <Label className="text-sm">
-          <Database className="w-4 h-4 text-muted-foreground" /> Data source
-        </Label>
-        <DataSourceSelectButton
-          className="w-full"
-          dataSource={dataSource}
-          onClickRemove={() =>
-            updateViewConfig({
-              areaDataSourceId: "",
-              areaDataColumn: "",
-              calculationType: undefined,
-            })
-          }
-          onSelect={(dataSourceId) => {
-            const selectedAreaSetGroup = viewConfig.areaSetGroupCode;
-            if (!selectedAreaSetGroup) {
-              updateViewConfig({
-                areaDataSourceId: dataSourceId,
-                areaDataSecondaryColumn: undefined,
-              });
-              return;
-            }
-            const dataSource = getDataSourceById(dataSourceId);
-            const validAreaSetGroups = getValidAreaSetGroupCodes(
-              dataSource?.geocodingConfig,
-            );
-            if (validAreaSetGroups.includes(selectedAreaSetGroup)) {
-              updateViewConfig({
-                areaDataSourceId: dataSourceId,
-                areaDataSecondaryColumn: undefined,
-              });
-              return;
-            }
-            setInvalidDataSourceId(dataSourceId);
-          }}
-        />
-      </div>
-
-      <div className="space-y-2 mb-4">
-        <p className="flex gap-2 items-center text-sm font-medium">
-          <PieChart className="w-4 h-4 text-muted-foreground" />
-          Visualisation
+      {!hasDataSource ? (
+        <p className="text-xs text-muted-foreground">
+          Select a data source and column from the legend panel to configure
+          style options.
         </p>
+      ) : (
+        <>
+          <div className="space-y-2 mb-4">
+            <p className="flex gap-2 items-center text-sm font-medium">
+              <PieChart className="w-4 h-4 text-muted-foreground" />
+              Visualisation
+            </p>
 
-        <div className="grid grid-cols-[auto_minmax(200px,1fr)] gap-2 items-center">
-          <Label
-            htmlFor="choropleth-boundary-select"
-            className="text-sm text-muted-foreground font-normal"
-          >
-            Boundaries
-          </Label>
-
-          <Select
-            value={viewConfig.areaSetGroupCode || NULL_UUID}
-            onValueChange={(value) =>
-              updateViewConfig({
-                areaSetGroupCode:
-                  value === NULL_UUID ? null : (value as AreaSetGroupCode),
-              })
-            }
-          >
-            <SelectTrigger
-              className={cn("w-full min-w-0", SELECT_TO_BUTTON_CLASSES)}
-              id="choropleth-boundary-select"
-            >
-              <SelectValue placeholder="Choose boundaries...">
-                {viewConfig.areaSetGroupCode
-                  ? AreaSetGroupCodeLabels[viewConfig.areaSetGroupCode]
-                  : "No locality"}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={NULL_UUID}>No locality</SelectItem>
-              {getValidAreaSetGroupCodes(dataSource?.geocodingConfig).map(
-                (code) => (
-                  <SelectItem key={code} value={code}>
-                    <div className="flex flex-col">
-                      <span className="">
-                        {AreaSetGroupCodeLabels[code as AreaSetGroupCode]}
-                      </span>
-                      <span
-                        className="text-sm text-muted-foreground"
-                        dangerouslySetInnerHTML={{
-                          __html:
-                            AreaSetGroupCodeYears[code as AreaSetGroupCode],
-                        }}
-                      />
-                    </div>
-                  </SelectItem>
-                ),
-              )}
-            </SelectContent>
-          </Select>
-
-          <Label
-            htmlFor="choropleth-calculation-select"
-            className="text-sm text-muted-foreground font-normal"
-          >
-            Display
-          </Label>
-
-          <Select
-            value={
-              viewConfig.calculationType === CalculationType.Count
-                ? "counts"
-                : "values"
-            }
-            onValueChange={(value) =>
-              updateViewConfig({
-                calculationType:
-                  value === "counts"
-                    ? CalculationType.Count
-                    : DEFAULT_CALCULATION_TYPE,
-              })
-            }
-          >
-            <SelectTrigger
-              className={cn("w-full min-w-0", SELECT_TO_BUTTON_CLASSES)}
-              id="choropleth-calculation-select"
-            >
-              <SelectValue placeholder="Choose calculation..." />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="counts">Count by area</SelectItem>
-              <SelectItem value="values">Data values</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {canSelectColumn && (
-            <>
+            <div className="grid grid-cols-[auto_minmax(200px,1fr)] gap-2 items-center">
               <Label
-                htmlFor="choropleth-column-1-select"
+                htmlFor="choropleth-calculation-select"
                 className="text-sm text-muted-foreground font-normal"
               >
-                {viewConfig.areaDataSecondaryColumn !== undefined &&
-                viewConfig.areaDataSecondaryColumn !== ""
-                  ? "Column 1"
-                  : "Column"}
+                Display
               </Label>
-              <Combobox
-                options={[
-                  { value: NULL_UUID, label: "None" },
-                  {
-                    value: MAX_COLUMN_KEY,
-                    label: "Highest-value column (String)",
-                  },
-                  ...(dataSources
-                    ?.find((ds) => ds.id === viewConfig.areaDataSourceId)
-                    ?.columnDefs.map((col) => ({
-                      value: col.name,
-                      label: `${col.name} (${col.type})`,
-                      hint: resolveColumnMetadataEntry(
-                        dataSource?.columnMetadata || [],
-                        dataSource?.columnMetadataOverride,
-                        col.name,
-                      )?.description,
-                    })) || []),
-                ]}
-                value={viewConfig.areaDataColumn || NULL_UUID}
-                onValueChange={(value) =>
-                  updateViewConfig({
-                    areaDataColumn: value === NULL_UUID ? "" : value,
-                  })
-                }
-                placeholder="Choose a column..."
-                searchPlaceholder="Search columns..."
-              />
-            </>
-          )}
 
-          {canSelectSecondaryColumn && (
-            <>
-              <Label
-                htmlFor="choropleth-column-2-select"
-                className="text-sm text-muted-foreground font-normal"
-              >
-                Column 2
-              </Label>
-              <div className="flex items-center gap-2">
-                <Combobox
-                  options={[
-                    { value: NULL_UUID, label: "None" },
-                    ...(dataSources
-                      ?.find((ds) => ds.id === viewConfig.areaDataSourceId)
-                      ?.columnDefs.filter(
-                        (col) =>
-                          col.type === ColumnType.Number &&
-                          col.name !== viewConfig.areaDataColumn,
-                      )
-                      .map((col) => ({
-                        value: col.name,
-                        label: `${col.name} (${col.type})`,
-                        hint: resolveColumnMetadataEntry(
-                          dataSource?.columnMetadata || [],
-                          dataSource?.columnMetadataOverride,
-                          col.name,
-                        )?.description,
-                      })) || []),
-                  ]}
-                  value={viewConfig.areaDataSecondaryColumn || NULL_UUID}
-                  onValueChange={(value) =>
-                    updateViewConfig({
-                      areaDataSecondaryColumn:
-                        value === NULL_UUID ? undefined : value,
-                    })
-                  }
-                  placeholder="Choose a column..."
-                  searchPlaceholder="Search columns..."
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-9 w-9 flex-shrink-0"
-                  onClick={() => {
-                    updateViewConfig({ areaDataSecondaryColumn: undefined });
-                  }}
-                  title="Remove column 2"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
-              {viewConfig.areaDataSecondaryColumn && (
-                <div className="col-span-2">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs w-full justify-start"
-                    onClick={() => {
-                      updateViewConfig({ areaDataSecondaryColumn: undefined });
-                    }}
-                  >
-                    <X className="h-3 w-3 mr-1" />
-                    Remove bivariate visualization
-                  </Button>
-                </div>
-              )}
-            </>
-          )}
-
-          {canSelectAggregation && (
-            <>
-              <Label
-                htmlFor="choropleth-aggregation-select"
-                className="text-sm text-muted-foreground font-normal"
-              >
-                Aggregation
-              </Label>
               <Select
-                value={viewConfig.calculationType || ""}
+                value={
+                  viewConfig.calculationType === CalculationType.Count
+                    ? "counts"
+                    : "values"
+                }
                 onValueChange={(value) =>
                   updateViewConfig({
-                    calculationType: value as CalculationType,
+                    calculationType:
+                      value === "counts"
+                        ? CalculationType.Count
+                        : DEFAULT_CALCULATION_TYPE,
                   })
                 }
               >
                 <SelectTrigger
                   className={cn("w-full min-w-0", SELECT_TO_BUTTON_CLASSES)}
-                  id="choropleth-aggregation-select"
+                  id="choropleth-calculation-select"
                 >
-                  <SelectValue placeholder="Choose an aggregation..." />
+                  <SelectValue placeholder="Choose calculation..." />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value={CalculationType.Avg}>Average</SelectItem>
-                  <SelectItem value={CalculationType.Mode}>
-                    Most common
-                  </SelectItem>
-                  <SelectItem value={CalculationType.Sum}>Sum</SelectItem>
+                  <SelectItem value="counts">Count by area</SelectItem>
+                  <SelectItem value="values">Data values</SelectItem>
                 </SelectContent>
               </Select>
-            </>
-          )}
-        </div>
-        {!viewConfig.areaDataSourceId && (
-          <div className="flex items-center gap-2">
-            <CircleAlert className="w-4 h-4 text-yellow-500" />
-            <p className="text-xs text-gray-500">
-              No data source selected. Please select a data source to create a
-              choropleth.
-            </p>
-          </div>
-        )}
-        {viewConfig.areaDataSourceId && !viewConfig.areaSetGroupCode && (
-          <div className="flex items-center gap-2">
-            <CircleAlert className="w-4 h-4 text-yellow-500" />
-            <p className="text-xs text-gray-500">
-              No locality shapes selected. Please select a locality set to
-              render the filled map.
-            </p>
-          </div>
-        )}
 
-        {/* Include Columns Modal - only show when MAX_COLUMN_KEY is selected */}
-        {viewConfig.areaDataColumn === MAX_COLUMN_KEY && dataSource && (
-          <IncludeColumnsModal
-            dataSource={dataSource}
-            selectedColumns={
-              viewConfig.includeColumnsString
-                ? viewConfig.includeColumnsString
-                    .split(",")
-                    .map((v) => v.trim())
-                    .filter(Boolean)
-                : []
-            }
-            onColumnsChange={(columns) => {
-              updateViewConfig({
-                includeColumnsString:
-                  columns.length > 0 ? columns.join(",") : undefined,
-              });
-            }}
-          />
-        )}
-      </div>
-
-      {showStyle && (
-        <div className="space-y-2 mb-4">
-          {/* Color Scheme Selection */}
-
-          <p className="flex gap-2 items-center text-sm font-medium">
-            <Palette className="w-4 h-4 text-muted-foreground" />
-            Style
-          </p>
+              {canSelectAggregation && (
+                <>
+                  <Label
+                    htmlFor="choropleth-aggregation-select"
+                    className="text-sm text-muted-foreground font-normal"
+                  >
+                    Aggregation
+                  </Label>
+                  <Select
+                    value={viewConfig.calculationType || ""}
+                    onValueChange={(value) =>
+                      updateViewConfig({
+                        calculationType: value as CalculationType,
+                      })
+                    }
+                  >
+                    <SelectTrigger
+                      className={cn("w-full min-w-0", SELECT_TO_BUTTON_CLASSES)}
+                      id="choropleth-aggregation-select"
+                    >
+                      <SelectValue placeholder="Choose an aggregation..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={CalculationType.Avg}>
+                        Average
+                      </SelectItem>
+                      <SelectItem value={CalculationType.Mode}>
+                        Most common
+                      </SelectItem>
+                      <SelectItem value={CalculationType.Sum}>Sum</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </>
+              )}
+            </div>
 
-          <div className="grid grid-cols-[auto_minmax(200px,1fr)] gap-2 items-center">
-            {canSelectColorScale && (
-              <>
-                <Label
-                  htmlFor="color-scale-type-select"
-                  className="text-sm text-muted-foreground font-normal"
-                >
-                  Color scale
-                </Label>
+            {/* Include Columns Modal - only show when MAX_COLUMN_KEY is selected */}
+            {viewConfig.areaDataColumn === MAX_COLUMN_KEY && dataSource && (
+              <IncludeColumnsModal
+                dataSource={dataSource}
+                selectedColumns={
+                  viewConfig.includeColumnsString
+                    ? viewConfig.includeColumnsString
+                        .split(",")
+                        .map((v) => v.trim())
+                        .filter(Boolean)
+                    : []
+                }
+                onColumnsChange={(columns) => {
+                  updateViewConfig({
+                    includeColumnsString:
+                      columns.length > 0 ? columns.join(",") : undefined,
+                  });
+                }}
+              />
+            )}
+          </div>
 
-                <Select
-                  value={viewConfig.colorScaleType || ColorScaleType.Gradient}
-                  onValueChange={(value) =>
-                    updateViewConfig({
-                      colorScaleType: value as ColorScaleType,
-                    })
-                  }
-                >
-                  <SelectTrigger
-                    className={cn("w-full min-w-0", SELECT_TO_BUTTON_CLASSES)}
-                    id="color-scale-type-select"
-                  >
-                    <SelectValue placeholder="Choose color scale...">
-                      {viewConfig.colorScaleType || ColorScaleType.Gradient}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={ColorScaleType.Gradient}>
-                      <div className="flex items-center gap-2">
-                        <div
-                          className="w-16 h-3 rounded border border-neutral-300"
-                          style={{
-                            background:
-                              "linear-gradient(to right, #3b82f6, #60a5fa, #93c5fd, #dbeafe)",
-                          }}
-                        />
-                        <span>Gradient</span>
-                      </div>
-                    </SelectItem>
-                    <SelectItem value={ColorScaleType.Stepped}>
-                      <div className="flex items-center gap-2">
-                        <div className="w-16 h-3 rounded border border-neutral-300 overflow-hidden flex">
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#3b82f6" }}
-                          />
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#60a5fa" }}
-                          />
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#93c5fd" }}
-                          />
-                          <div
-                            className="h-full flex-1"
-                            style={{ backgroundColor: "#dbeafe" }}
-                          />
-                        </div>
-                        <span>Stepped</span>
-                      </div>
-                    </SelectItem>
-                    <SelectItem value={ColorScaleType.Categorical}>
-                      <div className="flex items-center gap-2">
-                        <div className="w-16 h-3 rounded border border-neutral-300 overflow-hidden flex">
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#1f77b4" }}
-                          />
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#ff7f0e" }}
-                          />
-                          <div
-                            className="h-full flex-1 border-r border-neutral-400"
-                            style={{ backgroundColor: "#2ca02c" }}
-                          />
-                          <div
-                            className="h-full flex-1"
-                            style={{ backgroundColor: "#d62728" }}
-                          />
-                        </div>
-                        <span>Categorical</span>
-                      </div>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+          {showStyle && (
+            <div className="space-y-2 mb-4">
+              <p className="flex gap-2 items-center text-sm font-medium">
+                <Palette className="w-4 h-4 text-muted-foreground" />
+                Style
+              </p>
 
-                {canSelectColorScheme && (
+              <div className="grid grid-cols-[auto_minmax(200px,1fr)] gap-2 items-center">
+                {canSelectColorScale && (
                   <>
                     <Label
-                      htmlFor="choropleth-color-scheme-select"
+                      htmlFor="color-scale-type-select"
                       className="text-sm text-muted-foreground font-normal"
                     >
-                      Colour scheme
+                      Color scale
                     </Label>
 
                     <Select
-                      value={viewConfig.colorScheme || ColorScheme.RedBlue}
+                      value={
+                        viewConfig.colorScaleType || ColorScaleType.Gradient
+                      }
                       onValueChange={(value) =>
                         updateViewConfig({
-                          colorScheme: value as ColorScheme,
+                          colorScaleType: value as ColorScaleType,
                         })
                       }
                     >
                       <SelectTrigger
-                        className="w-full min-w-0"
-                        id="choropleth-color-scheme-select"
+                        className={cn(
+                          "w-full min-w-0",
+                          SELECT_TO_BUTTON_CLASSES,
+                        )}
+                        id="color-scale-type-select"
                       >
-                        <SelectValue placeholder="Choose colour scheme..." />
+                        <SelectValue placeholder="Choose color scale...">
+                          {viewConfig.colorScaleType || ColorScaleType.Gradient}
+                        </SelectValue>
                       </SelectTrigger>
                       <SelectContent>
-                        {CHOROPLETH_COLOR_SCHEMES.map((option, index) => {
-                          const isCustom = option.value === ColorScheme.Custom;
-                          const customColorValue = isCustom
-                            ? viewConfig.customColor || "#3b82f6"
-                            : undefined;
-                          return (
-                            <SelectItem
-                              key={index}
-                              value={option.value}
-                              className="flex items-center gap-2"
-                            >
-                              {isCustom && customColorValue ? (
-                                <div
-                                  className="w-4 h-4 rounded"
-                                  style={{
-                                    background: `linear-gradient(to right, white, ${customColorValue})`,
-                                  }}
-                                />
-                              ) : (
-                                <div
-                                  className={`w-4 h-4 rounded ${option.color}`}
-                                />
-                              )}
-                              <span className="truncate">{option.label}</span>
-                            </SelectItem>
-                          );
-                        })}
+                        <SelectItem value={ColorScaleType.Gradient}>
+                          <div className="flex items-center gap-2">
+                            <div
+                              className="w-16 h-3 rounded border border-neutral-300"
+                              style={{
+                                background:
+                                  "linear-gradient(to right, #3b82f6, #60a5fa, #93c5fd, #dbeafe)",
+                              }}
+                            />
+                            <span>Gradient</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value={ColorScaleType.Stepped}>
+                          <div className="flex items-center gap-2">
+                            <div className="w-16 h-3 rounded border border-neutral-300 overflow-hidden flex">
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#3b82f6" }}
+                              />
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#60a5fa" }}
+                              />
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#93c5fd" }}
+                              />
+                              <div
+                                className="h-full flex-1"
+                                style={{ backgroundColor: "#dbeafe" }}
+                              />
+                            </div>
+                            <span>Stepped</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value={ColorScaleType.Categorical}>
+                          <div className="flex items-center gap-2">
+                            <div className="w-16 h-3 rounded border border-neutral-300 overflow-hidden flex">
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#1f77b4" }}
+                              />
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#ff7f0e" }}
+                              />
+                              <div
+                                className="h-full flex-1 border-r border-neutral-400"
+                                style={{ backgroundColor: "#2ca02c" }}
+                              />
+                              <div
+                                className="h-full flex-1"
+                                style={{ backgroundColor: "#d62728" }}
+                              />
+                            </div>
+                            <span>Categorical</span>
+                          </div>
+                        </SelectItem>
                       </SelectContent>
                     </Select>
 
-                    {viewConfig.colorScheme === ColorScheme.Custom && (
+                    {canSelectColorScheme && (
                       <>
                         <Label
-                          htmlFor="custom-color-picker"
+                          htmlFor="choropleth-color-scheme-select"
                           className="text-sm text-muted-foreground font-normal"
                         >
-                          Max color
+                          Colour scheme
                         </Label>
-                        <div className="flex items-center gap-2">
-                          <div
-                            className="w-10 h-10 rounded border border-neutral-300 flex-shrink-0 relative"
-                            style={{
-                              backgroundColor:
-                                viewConfig.customColor || DEFAULT_CUSTOM_COLOR,
-                            }}
+
+                        <Select
+                          value={viewConfig.colorScheme || ColorScheme.RedBlue}
+                          onValueChange={(value) =>
+                            updateViewConfig({
+                              colorScheme: value as ColorScheme,
+                            })
+                          }
+                        >
+                          <SelectTrigger
+                            className="w-full min-w-0"
+                            id="choropleth-color-scheme-select"
                           >
-                            <input
-                              type="color"
-                              id="custom-color-picker"
-                              value={
-                                viewConfig.customColor || DEFAULT_CUSTOM_COLOR
-                              }
-                              onChange={(e) =>
-                                updateViewConfig({
-                                  customColor: e.target.value,
-                                })
-                              }
-                              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                              title="Choose color for max value"
-                            />
-                          </div>
-                          <Input
-                            type="text"
-                            value={
-                              viewConfig.customColor || DEFAULT_CUSTOM_COLOR
-                            }
-                            onChange={(e) =>
-                              updateViewConfig({ customColor: e.target.value })
-                            }
-                            className="flex-1"
-                            placeholder={DEFAULT_CUSTOM_COLOR}
-                          />
-                        </div>
-                      </>
-                    )}
+                            <SelectValue placeholder="Choose colour scheme..." />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {CHOROPLETH_COLOR_SCHEMES.map((option, index) => {
+                              const isCustom =
+                                option.value === ColorScheme.Custom;
+                              const customColorValue = isCustom
+                                ? viewConfig.customColor || "#3b82f6"
+                                : undefined;
+                              return (
+                                <SelectItem
+                                  key={index}
+                                  value={option.value}
+                                  className="flex items-center gap-2"
+                                >
+                                  {isCustom && customColorValue ? (
+                                    <div
+                                      className="w-4 h-4 rounded"
+                                      style={{
+                                        background: `linear-gradient(to right, white, ${customColorValue})`,
+                                      }}
+                                    />
+                                  ) : (
+                                    <div
+                                      className={`w-4 h-4 rounded ${option.color}`}
+                                    />
+                                  )}
+                                  <span className="truncate">
+                                    {option.label}
+                                  </span>
+                                </SelectItem>
+                              );
+                            })}
+                          </SelectContent>
+                        </Select>
+
+                        {viewConfig.colorScheme === ColorScheme.Custom && (
+                          <>
+                            <Label
+                              htmlFor="custom-color-picker"
+                              className="text-sm text-muted-foreground font-normal"
+                            >
+                              Max color
+                            </Label>
+                            <div className="flex items-center gap-2">
+                              <div
+                                className="w-10 h-10 rounded border border-neutral-300 flex-shrink-0 relative"
+                                style={{
+                                  backgroundColor:
+                                    viewConfig.customColor ||
+                                    DEFAULT_CUSTOM_COLOR,
+                                }}
+                              >
+                                <input
+                                  type="color"
+                                  id="custom-color-picker"
+                                  value={
+                                    viewConfig.customColor ||
+                                    DEFAULT_CUSTOM_COLOR
+                                  }
+                                  onChange={(e) =>
+                                    updateViewConfig({
+                                      customColor: e.target.value,
+                                    })
+                                  }
+                                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                  title="Choose color for max value"
+                                />
+                              </div>
+                              <Input
+                                type="text"
+                                value={
+                                  viewConfig.customColor || DEFAULT_CUSTOM_COLOR
+                                }
+                                onChange={(e) =>
+                                  updateViewConfig({
+                                    customColor: e.target.value,
+                                  })
+                                }
+                                className="flex-1"
+                                placeholder={DEFAULT_CUSTOM_COLOR}
+                              />
+                            </div>
+                          </>
+                        )}
 
-                    <Label
-                      htmlFor="choropleth-color-scheme-switch"
-                      className="text-sm text-muted-foreground font-normal"
-                    >
-                      Reverse
-                    </Label>
+                        <Label
+                          htmlFor="choropleth-color-scheme-switch"
+                          className="text-sm text-muted-foreground font-normal"
+                        >
+                          Reverse
+                        </Label>
 
-                    <Switch
-                      id="choropleth-color-scheme-switch"
-                      checked={Boolean(viewConfig.reverseColorScheme)}
-                      onCheckedChange={(v) =>
-                        updateViewConfig({ reverseColorScheme: v })
-                      }
-                    />
+                        <Switch
+                          id="choropleth-color-scheme-switch"
+                          checked={Boolean(viewConfig.reverseColorScheme)}
+                          onCheckedChange={(v) =>
+                            updateViewConfig({ reverseColorScheme: v })
+                          }
+                        />
 
-                    {viewConfig.colorScaleType === ColorScaleType.Stepped && (
-                      <>
-                        <Label className="text-sm text-muted-foreground font-normal">
-                          Color steps
-                        </Label>
-                        <div>
-                          <SteppedColorEditor />
-                        </div>
+                        {viewConfig.colorScaleType ===
+                          ColorScaleType.Stepped && (
+                          <>
+                            <Label className="text-sm text-muted-foreground font-normal">
+                              Color steps
+                            </Label>
+                            <div>
+                              <SteppedColorEditor />
+                            </div>
+                          </>
+                        )}
                       </>
                     )}
                   </>
                 )}
-              </>
-            )}
-            {canSetCategoryColors && (
-              <>
-                <Label className="text-sm text-muted-foreground font-normal">
-                  Category colors
+                {canSetCategoryColors && (
+                  <>
+                    <Label className="text-sm text-muted-foreground font-normal">
+                      Category colors
+                    </Label>
+                    <div>
+                      <SetCategoryColorsButton />
+                    </div>
+                  </>
+                )}
+                <Label
+                  htmlFor="choropleth-opacity"
+                  className="text-sm text-muted-foreground font-normal"
+                >
+                  Opacity (%)
                 </Label>
-                <div>
-                  <SetCategoryColorsButton />
-                </div>
-              </>
-            )}
-            <Label
-              htmlFor="choropleth-opacity"
-              className="text-sm text-muted-foreground font-normal"
-            >
-              Opacity (%)
-            </Label>
 
-            <div className="flex items-center gap-3">
-              <div className="flex-1 relative">
-                <input
-                  type="range"
-                  id="choropleth-opacity"
-                  min="0"
-                  max="100"
-                  step="1"
-                  value={viewConfig.choroplethOpacityPct ?? 80}
-                  onChange={(e) => {
-                    const v = Number(e.target.value);
-                    const choroplethOpacityPct = isNaN(v)
-                      ? 80
-                      : Math.max(0, Math.min(v, 100));
-                    updateViewConfig({ choroplethOpacityPct });
-                  }}
-                  className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-neutral-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-neutral-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:appearance-none"
-                  style={{
-                    background: `linear-gradient(to right, #737373 0%, #737373 ${viewConfig.choroplethOpacityPct ?? 80}%, #e5e7eb ${viewConfig.choroplethOpacityPct ?? 80}%, #e5e7eb 100%)`,
-                  }}
-                />
+                <div className="flex items-center gap-3">
+                  <div className="flex-1 relative">
+                    <input
+                      type="range"
+                      id="choropleth-opacity"
+                      min="0"
+                      max="100"
+                      step="1"
+                      value={viewConfig.choroplethOpacityPct ?? 80}
+                      onChange={(e) => {
+                        const v = Number(e.target.value);
+                        const choroplethOpacityPct = isNaN(v)
+                          ? 80
+                          : Math.max(0, Math.min(v, 100));
+                        updateViewConfig({ choroplethOpacityPct });
+                      }}
+                      className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-neutral-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-neutral-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:appearance-none"
+                      style={{
+                        background: `linear-gradient(to right, #737373 0%, #737373 ${viewConfig.choroplethOpacityPct ?? 80}%, #e5e7eb ${viewConfig.choroplethOpacityPct ?? 80}%, #e5e7eb 100%)`,
+                      }}
+                    />
+                  </div>
+                  <Input
+                    type="number"
+                    min="0"
+                    max="100"
+                    value={viewConfig.choroplethOpacityPct ?? 80}
+                    onChange={(e) => {
+                      const v = Number(e.target.value);
+                      const choroplethOpacityPct = isNaN(v)
+                        ? 80
+                        : Math.max(0, Math.min(v, 100));
+                      updateViewConfig({ choroplethOpacityPct });
+                    }}
+                    className="w-16"
+                  />
+                </div>
               </div>
-              <Input
-                type="number"
-                min="0"
-                max="100"
-                value={viewConfig.choroplethOpacityPct ?? 80}
-                onChange={(e) => {
-                  const v = Number(e.target.value);
-                  const choroplethOpacityPct = isNaN(v)
-                    ? 80
-                    : Math.max(0, Math.min(v, 100));
-                  updateViewConfig({ choroplethOpacityPct });
-                }}
-                className="w-16"
-              />
             </div>
-          </div>
-        </div>
+          )}
+        </>
       )}
-
-      {/* Modal for handling invalid data source / boundary combination */}
-      <Dialog
-        open={Boolean(invalidDataSourceId)}
-        onOpenChange={(o) => {
-          if (!o) {
-            setInvalidDataSourceId(null);
-          }
-        }}
-      >
-        <DialogContent className="max-w-2xl max-h-[80vh] overflow-auto">
-          <DialogHeader>
-            <DialogTitle>Select new boundaries</DialogTitle>
-          </DialogHeader>
-
-          <p>
-            The data source you have selected does not fit into your selected
-            boundaries (
-            {viewConfig.areaSetGroupCode
-              ? AreaSetGroupCodeLabels[viewConfig.areaSetGroupCode]
-              : "unknown"}
-            ). Please select alternative boundaries, or cancel.
-          </p>
-
-          <Select
-            onValueChange={(value) => {
-              updateViewConfig({
-                areaSetGroupCode: value as AreaSetGroupCode,
-                areaDataSourceId: invalidDataSourceId || "",
-              });
-              setInvalidDataSourceId(null);
-            }}
-          >
-            <SelectTrigger className="w-full min-w-0">
-              <SelectValue placeholder="Choose boundaries..." />
-            </SelectTrigger>
-            <SelectContent>
-              {getValidAreaSetGroupCodes(
-                getDataSourceById(invalidDataSourceId)?.geocodingConfig,
-              ).map((code) => (
-                <SelectItem key={code} value={code}>
-                  {AreaSetGroupCodeLabels[code as AreaSetGroupCode]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }
diff --git a/src/shadcn/ui/combobox.tsx b/src/shadcn/ui/combobox.tsx
index b519df37..68318ffb 100644
--- a/src/shadcn/ui/combobox.tsx
+++ b/src/shadcn/ui/combobox.tsx
@@ -29,6 +29,9 @@ interface ComboboxProps {
   placeholder?: string;
   searchPlaceholder?: string;
   emptyMessage?: string;
+  /** Merged onto the trigger button (e.g. typography to match Select) */
+  triggerClassName?: string;
+  size?: React.ComponentProps<typeof Button>["size"];
 }
 
 /**
@@ -53,6 +56,8 @@ export const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
       placeholder = "Select an option...",
       searchPlaceholder = "Search...",
       emptyMessage = "No options found.",
+      triggerClassName,
+      size = "default",
     },
     ref,
   ) => {
@@ -83,9 +88,10 @@ export const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
           <Button
             ref={ref}
             variant="outline"
+            size={size}
             role="combobox"
             aria-expanded={open}
-            className="w-full justify-between"
+            className={cn("w-full justify-between", triggerClassName)}
           >
             <span className="truncate">{selectedLabel || placeholder}</span>
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />