diff --git a/src/app/(private)/(dashboards)/data-sources/new/schema.ts b/src/app/(private)/(dashboards)/data-sources/new/schema.ts
index b3747d24..112f9d3f 100644
--- a/src/app/(private)/(dashboards)/data-sources/new/schema.ts
+++ b/src/app/(private)/(dashboards)/data-sources/new/schema.ts
@@ -8,10 +8,12 @@ import {
   zetkinConfigSchema,
 } from "@/models/DataSource";
 
-export const newCSVConfigSchema = csvConfigSchema.extend({
-  file: z.instanceof(File),
-  filename: z.string().min(1, "Filename is required"),
-}).omit({ url: true });
+export const newCSVConfigSchema = csvConfigSchema
+  .extend({
+    file: z.instanceof(File),
+    filename: z.string().min(1, "Filename is required"),
+  })
+  .omit({ url: true });
 
 export type NewCSVConfig = z.infer<typeof newCSVConfigSchema>;
 
diff --git a/src/app/(private)/map/[id]/components/BoundaryHoverInfo/AreasList.tsx b/src/app/(private)/map/[id]/components/BoundaryHoverInfo/AreasList.tsx
index d81739fe..199bbf61 100644
--- a/src/app/(private)/map/[id]/components/BoundaryHoverInfo/AreasList.tsx
+++ b/src/app/(private)/map/[id]/components/BoundaryHoverInfo/AreasList.tsx
@@ -52,7 +52,7 @@ export function AreasList({
         >
           <div className="flex items-center gap-2">
             <div
-              className="w-4 h-4 rounded shrink-0"
+              className="w-4 h-4 rounded shrink-0 border border-neutral-200"
               style={{ backgroundColor: area.backgroundColor }}
             />
             <span>{area.name}</span>
diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx
index b6d43b0c..cb51f56a 100644
--- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx
+++ b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorDataTab.tsx
@@ -105,6 +105,9 @@ export default function InspectorDataTab({
   );
 
   const isBoundary = type === LayerType.Boundary;
+  const hasChoroplethVisualisation = Boolean(
+    choroplethDataSource?.id && viewConfig.areaDataColumn,
+  );
   const bivariateBucket =
     areaStats?.secondary &&
     typeof areaStat?.primary === "number" &&
@@ -146,7 +149,7 @@ export default function InspectorDataTab({
 
   return (
     <div className="flex flex-col gap-4">
-      {isBoundary ? (
+      {isBoundary && hasChoroplethVisualisation ? (
         <div className="rounded border border-neutral-200 bg-neutral-50 px-2.5 py-2 flex flex-col gap-3">
           <div className="min-w-0 flex items-center justify-between gap-2">
             <h3 className="text-[11px] uppercase font-mono tracking-wide text-muted-foreground inline-flex items-center gap-1">
diff --git a/src/app/(private)/map/[id]/components/Legend/Legend.tsx b/src/app/(private)/map/[id]/components/Legend/Legend.tsx
index 95718d62..a8d0a606 100644
--- a/src/app/(private)/map/[id]/components/Legend/Legend.tsx
+++ b/src/app/(private)/map/[id]/components/Legend/Legend.tsx
@@ -25,6 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shadcn/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
 import {
   Select,
   SelectContent,
@@ -35,6 +36,10 @@ import {
 import { cn } from "@/shadcn/utils";
 import { useColorScheme } from "../../colors";
 import { useAreaStats } from "../../data";
+import {
+  DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR,
+  mapColorPalette,
+} from "../../styles";
 import BivariateLegend from "../BivariateLagend";
 import {
   dataRecordsWillAggregate,
@@ -65,6 +70,20 @@ export default function Legend({
     null,
   );
   const [bivariatePickerOpen, setBivariatePickerOpen] = useState(false);
+  const [secondaryBoundariesOpen, setSecondaryBoundariesOpen] = useState(
+    Boolean(viewConfig.secondaryAreaSetCode),
+  );
+
+  useEffect(() => {
+    if (viewConfig.secondaryAreaSetCode) {
+      setSecondaryBoundariesOpen(true);
+    }
+  }, [viewConfig.secondaryAreaSetCode]);
+
+  const secondaryBoundaryStrokeColor =
+    viewConfig.secondaryBoundaryStrokeColor ||
+    DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR;
+  const secondaryBoundarySwatches = mapColorPalette.map((c) => c.color);
 
   const areaStatsQuery = useAreaStats();
   const areaStats = areaStatsQuery?.data;
@@ -335,17 +354,6 @@ export default function Legend({
                 )}
               </div>
             )}
-            {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>
-            )}
           </div>
         )}
       </div>
@@ -370,15 +378,32 @@ export default function Legend({
         </div>
       ) : null}
 
-      {hasDataSource && onClearRequest && (
-        <div className="border-b border-neutral-100 px-3 pb-2">
-          <button
-            type="button"
-            className="text-xs text-muted-foreground underline cursor-pointer text-left hover:text-foreground transition-colors"
-            onClick={onClearRequest}
-          >
-            Clear visualisation
-          </button>
+      {(canSelectSecondaryColumn || (hasDataSource && onClearRequest)) && (
+        <div className=" px-3 pb-2">
+          <div className="flex items-center justify-between gap-3">
+            {hasDataSource && onClearRequest ? (
+              <button
+                type="button"
+                className="text-xs text-muted-foreground underline cursor-pointer text-left hover:text-foreground transition-colors"
+                onClick={onClearRequest}
+              >
+                Clear
+              </button>
+            ) : (
+              <span />
+            )}
+            {canSelectSecondaryColumn && (
+              <button
+                type="button"
+                className="text-xs text-muted-foreground underline cursor-pointer text-left hover:text-foreground transition-colors"
+                onClick={toggleBivariatePicker}
+              >
+                {viewConfig.areaDataSecondaryColumn || bivariatePickerOpen
+                  ? "Remove second column"
+                  : "Add another column"}
+              </button>
+            )}
+          </div>
         </div>
       )}
 
@@ -455,7 +480,7 @@ export default function Legend({
 
       {/* Aggregation */}
       {canSelectAggregation && (
-        <div className="border-t border-neutral-100 px-3 py-3">
+        <div className="border-b border-neutral-100 px-3 pb-3">
           <p className="text-xs text-muted-foreground font-mono font-medium uppercase mb-1">
             Aggregation
           </p>
@@ -484,46 +509,151 @@ export default function Legend({
 
       {/* Secondary boundaries */}
       {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">
-            Secondary boundaries
-          </p>
-          <Select
-            value={viewConfig.secondaryAreaSetCode || NULL_UUID}
-            onValueChange={(value) => {
-              updateViewConfig({
-                secondaryAreaSetCode:
-                  value === NULL_UUID ? null : (value as AreaSetCode),
-              });
-            }}
-          >
-            <SelectTrigger
-              size="sm"
-              className="h-8 w-full text-xs font-normal shadow-xs hover:border-action-hover"
+        <div className="px-3 pb-3">
+          {!secondaryBoundariesOpen && !viewConfig.secondaryAreaSetCode ? (
+            <button
+              type="button"
+              className="text-xs text-muted-foreground underline cursor-pointer text-left hover:text-foreground transition-colors"
+              onClick={() => setSecondaryBoundariesOpen(true)}
             >
-              <SelectValue placeholder="Secondary boundaries…">
-                {viewConfig.secondaryAreaSetCode
-                  ? AreaSetCodeLabels[viewConfig.secondaryAreaSetCode]
-                  : "No secondary boundaries"}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={NULL_UUID}>No secondary boundaries</SelectItem>
-              {CHOROPLETH_AREA_SET_CODES.map((code) => (
-                <SelectItem key={code} value={code}>
-                  <div className="flex flex-col">
-                    <span>{AreaSetCodeLabels[code]}</span>
+              Add secondary boundaries
+            </button>
+          ) : (
+            <div className="flex items-center justify-between gap-2 mb-1 mt-2">
+              <p className="text-xs text-muted-foreground font-mono font-medium uppercase">
+                Secondary boundaries
+              </p>
+              <button
+                type="button"
+                className="text-xs text-muted-foreground underline cursor-pointer text-left hover:text-foreground transition-colors"
+                onClick={() => {
+                  updateViewConfig({ secondaryAreaSetCode: null });
+                  setSecondaryBoundariesOpen(false);
+                }}
+              >
+                Remove
+              </button>
+            </div>
+          )}
+          {(secondaryBoundariesOpen || viewConfig.secondaryAreaSetCode) && (
+            <div className="flex items-center gap-2">
+              <Select
+                value={viewConfig.secondaryAreaSetCode || NULL_UUID}
+                onValueChange={(value) => {
+                  const nextValue =
+                    value === NULL_UUID ? null : (value as AreaSetCode);
+                  updateViewConfig({ secondaryAreaSetCode: nextValue });
+                  if (!nextValue) {
+                    setSecondaryBoundariesOpen(false);
+                  }
+                }}
+              >
+                <SelectTrigger
+                  size="sm"
+                  className="h-8 w-full text-xs font-normal shadow-xs hover:border-action-hover"
+                >
+                  <SelectValue placeholder="Secondary boundaries…">
+                    {viewConfig.secondaryAreaSetCode
+                      ? AreaSetCodeLabels[viewConfig.secondaryAreaSetCode]
+                      : "No secondary boundaries"}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={NULL_UUID}>
+                    No secondary boundaries
+                  </SelectItem>
+                  {CHOROPLETH_AREA_SET_CODES.map((code) => (
+                    <SelectItem key={code} value={code}>
+                      <div className="flex flex-col">
+                        <span>{AreaSetCodeLabels[code]}</span>
+                        <span
+                          className="text-xs text-muted-foreground"
+                          dangerouslySetInnerHTML={{
+                            __html: AreaSetCodeYears[code],
+                          }}
+                        />
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      "h-8 w-8 rounded-lg border border-input shadow-xs flex items-center justify-center",
+                      "hover:border-action-hover transition-colors",
+                      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                    )}
+                    aria-label="Secondary boundary stroke colour"
+                    title="Secondary boundary stroke colour"
+                  >
                     <span
-                      className="text-xs text-muted-foreground"
-                      dangerouslySetInnerHTML={{
-                        __html: AreaSetCodeYears[code],
-                      }}
+                      className="h-4 w-4 rounded-full border border-black/15"
+                      style={{ backgroundColor: secondaryBoundaryStrokeColor }}
                     />
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-56 p-3">
+                  <p className="text-xs font-medium mb-2">Stroke colour</p>
+                  <div className="flex flex-wrap gap-2">
+                    {secondaryBoundarySwatches.map((c) => (
+                      <button
+                        key={c}
+                        type="button"
+                        className={cn(
+                          "h-7 w-7 rounded-full border border-black/10",
+                          "hover:scale-[1.02] transition-transform",
+                          c === secondaryBoundaryStrokeColor &&
+                            "ring-2 ring-ring ring-offset-2 ring-offset-background",
+                        )}
+                        style={{ backgroundColor: c }}
+                        onClick={() =>
+                          updateViewConfig({ secondaryBoundaryStrokeColor: c })
+                        }
+                        aria-label={`Set stroke colour to ${c}`}
+                      />
+                    ))}
+                    <label className="h-7 w-7 rounded-full border border-black/10 relative overflow-hidden cursor-pointer">
+                      <input
+                        type="color"
+                        className="absolute inset-0 h-full w-full opacity-0 cursor-pointer"
+                        value={secondaryBoundaryStrokeColor}
+                        onChange={(e) =>
+                          updateViewConfig({
+                            secondaryBoundaryStrokeColor: e.target.value,
+                          })
+                        }
+                        aria-label="Custom stroke colour"
+                      />
+                      <span
+                        className="absolute inset-0"
+                        style={{
+                          backgroundColor: secondaryBoundaryStrokeColor,
+                        }}
+                        aria-hidden
+                      />
+                    </label>
                   </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+                  {viewConfig.secondaryBoundaryStrokeColor && (
+                    <button
+                      type="button"
+                      className="mt-3 text-xs text-muted-foreground underline hover:text-foreground transition-colors"
+                      onClick={() =>
+                        updateViewConfig({
+                          secondaryBoundaryStrokeColor: null,
+                        })
+                      }
+                    >
+                      Reset to default
+                    </button>
+                  )}
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
         </div>
       )}
 
diff --git a/src/app/(private)/map/[id]/components/SecondaryBoundaries.tsx b/src/app/(private)/map/[id]/components/SecondaryBoundaries.tsx
index da36ff2b..fc9e2fc4 100644
--- a/src/app/(private)/map/[id]/components/SecondaryBoundaries.tsx
+++ b/src/app/(private)/map/[id]/components/SecondaryBoundaries.tsx
@@ -1,5 +1,7 @@
 import { Layer, Source } from "react-map-gl/mapbox";
+import { useMapViews } from "../hooks/useMapViews";
 import { useSecondaryAreaSetConfig } from "../hooks/useSecondaryAreaSet";
+import { DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR } from "../styles";
 import type { ChoroplethLayerConfig } from "./Choropleth/configs";
 
 const SECONDARY_TOP_LAYER_ID = "secondary-top";
@@ -32,10 +34,14 @@ export default function SecondaryBoundaries() {
 }
 
 function Boundaries({ config }: { config: ChoroplethLayerConfig }) {
+  const { viewConfig } = useMapViews();
   const {
     mapbox: { sourceId, layerId, featureCodeProperty },
   } = config;
   const secondarySourceId = `${sourceId}-secondary`;
+  const strokeColor =
+    viewConfig.secondaryBoundaryStrokeColor ||
+    DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR;
   return (
     <Source
       id={secondarySourceId}
@@ -52,8 +58,8 @@ function Boundaries({ config }: { config: ChoroplethLayerConfig }) {
         source-layer={layerId}
         type="line"
         paint={{
-          "line-color": "#555",
-          "line-width": 3,
+          "line-color": strokeColor,
+          "line-width": 1.5,
           "line-opacity": 1,
         }}
         layout={{
diff --git a/src/app/(private)/map/[id]/components/controls/ControlPanel.tsx b/src/app/(private)/map/[id]/components/controls/ControlPanel.tsx
index 8867134b..965ce54e 100644
--- a/src/app/(private)/map/[id]/components/controls/ControlPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/ControlPanel.tsx
@@ -1,10 +1,8 @@
 import { PanelLeft } from "lucide-react";
 
 import { useChoropleth } from "@/app/(private)/map/[id]/hooks/useChoropleth";
-import { MapType } from "@/models/MapView";
 import { Button } from "@/shadcn/ui/button";
 import { useShowControlsAtom } from "../../hooks/useMapControls";
-import { useMapViews } from "../../hooks/useMapViews";
 import { CONTROL_PANEL_WIDTH } from "../../styles";
 
 import BoundariesControl from "./BoundariesControl/BoundariesControl";
@@ -14,7 +12,6 @@ import TurfsControl from "./TurfsControl/TurfsControl";
 export default function ControlPanel() {
   const [showControls, setShowControls] = useShowControlsAtom();
   const { setBoundariesPanelOpen } = useChoropleth();
-  const { viewConfig } = useMapViews();
 
   const onToggleControls = () => {
     setShowControls(!showControls);
@@ -64,12 +61,8 @@ export default function ControlPanel() {
             className="flex-1 overflow-y-auto / flex flex-col"
             style={{ width: `${CONTROL_PANEL_WIDTH}px` }}
           >
-            {viewConfig.mapType !== MapType.Hex && (
-              <>
-                <MarkersControl />
-                <TurfsControl />
-              </>
-            )}
+            <MarkersControl />
+            <TurfsControl />
             <BoundariesControl />
           </div>
         </div>
diff --git a/src/app/(private)/map/[id]/components/controls/LayerControlWrapper.tsx b/src/app/(private)/map/[id]/components/controls/LayerControlWrapper.tsx
index 19ca1777..5d202cd9 100644
--- a/src/app/(private)/map/[id]/components/controls/LayerControlWrapper.tsx
+++ b/src/app/(private)/map/[id]/components/controls/LayerControlWrapper.tsx
@@ -1,12 +1,17 @@
+import { cn } from "@/shadcn/utils";
 import type { ReactNode } from "react";
 
 export default function LayerControlWrapper({
   children,
+  className,
 }: {
   children: ReactNode;
+  className?: string;
 }) {
   return (
-    <div className="border-b border-neutral-200 last:border-b-0">
+    <div
+      className={cn("border-b border-neutral-200 last:border-b-0", className)}
+    >
       {children}
     </div>
   );
diff --git a/src/app/(private)/map/[id]/components/controls/MarkersControl/MarkersControl.tsx b/src/app/(private)/map/[id]/components/controls/MarkersControl/MarkersControl.tsx
index 9d5dacc6..88d4b1f6 100644
--- a/src/app/(private)/map/[id]/components/controls/MarkersControl/MarkersControl.tsx
+++ b/src/app/(private)/map/[id]/components/controls/MarkersControl/MarkersControl.tsx
@@ -21,7 +21,9 @@ import {
   useMembersDataSource,
 } from "@/hooks/useDataSources";
 import { DataSourceRecordType } from "@/models/DataSource";
+import { MapType } from "@/models/MapView";
 import { LayerType } from "@/types";
+import { useMapViews } from "../../../hooks/useMapViews";
 import { CollectionIcon } from "../../Icons";
 import LayerControlWrapper from "../LayerControlWrapper";
 import LayerHeader from "../LayerHeader";
@@ -30,6 +32,7 @@ import MarkersList from "./MarkersList";
 export default function MarkersControl() {
   const router = useRouter();
   const { mapConfig, updateMapConfig } = useMapConfig();
+  const { viewConfig } = useMapViews();
   const { data: folders = [] } = useFoldersQuery();
   const { isMutating: isPlacedMarkersMutating } = usePlacedMarkerMutations();
   const { insertFolder, isMutating: isFoldersMutating } = useFolderMutations();
@@ -39,6 +42,7 @@ export default function MarkersControl() {
   const markerDataSources = useMarkerDataSources() || [];
   const membersDataSource = useMembersDataSource();
   const [expanded, setExpanded] = useState(true);
+  const isHex = viewConfig.mapType === MapType.Hex;
 
   const createFolder = () => {
     const newFolder = {
@@ -182,7 +186,9 @@ export default function MarkersControl() {
   const loading = isFoldersMutating || isPlacedMarkersMutating;
 
   return (
-    <LayerControlWrapper>
+    <LayerControlWrapper
+      className={isHex ? "opacity-45 pointer-events-none" : undefined}
+    >
       <LayerHeader
         label="Markers"
         type={LayerType.Marker}
diff --git a/src/app/(private)/map/[id]/components/controls/TurfsControl/TurfsControl.tsx b/src/app/(private)/map/[id]/components/controls/TurfsControl/TurfsControl.tsx
index e64b2423..e5618e04 100644
--- a/src/app/(private)/map/[id]/components/controls/TurfsControl/TurfsControl.tsx
+++ b/src/app/(private)/map/[id]/components/controls/TurfsControl/TurfsControl.tsx
@@ -12,6 +12,7 @@ import {
   useFoldersQuery,
 } from "@/app/(private)/map/[id]/hooks/useFolders";
 import IconButtonWithTooltip from "@/components/IconButtonWithTooltip";
+import { MapType } from "@/models/MapView";
 import { Button } from "@/shadcn/ui/button";
 import { Input } from "@/shadcn/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
@@ -21,6 +22,7 @@ import {
   useEditAreaMode,
   useSetEditAreaMode,
 } from "../../../hooks/useMapControls";
+import { useMapViews } from "../../../hooks/useMapViews";
 import { useTurfsQuery } from "../../../hooks/useTurfsQuery";
 import { useTurfState } from "../../../hooks/useTurfState";
 import { mapColors } from "../../../styles";
@@ -30,6 +32,7 @@ import TurfsList from "./TurfsList";
 
 export default function AreasControl() {
   const { handleAddArea } = useTurfState();
+  const { viewConfig } = useMapViews();
   const editAreaMode = useEditAreaMode();
   const setEditAreaMode = useSetEditAreaMode();
   const [expanded, setExpanded] = useState(true);
@@ -37,6 +40,7 @@ export default function AreasControl() {
   const { data: folders = [] } = useFoldersQuery();
   const { insertFolder, isMutating: isFoldersMutating } = useFolderMutations();
   const { mapConfig, updateMapConfig } = useMapConfig();
+  const isHex = viewConfig.mapType === MapType.Hex;
 
   const turfFolders = useMemo(() => {
     return folders.filter((f) => f.type === "turf");
@@ -77,7 +81,9 @@ export default function AreasControl() {
   ];
 
   return (
-    <LayerControlWrapper>
+    <LayerControlWrapper
+      className={isHex ? "opacity-45 pointer-events-none" : undefined}
+    >
       <LayerHeader
         label="Areas"
         type={LayerType.Turf}
@@ -98,7 +104,7 @@ export default function AreasControl() {
               <p className="text-xs font-medium mb-2">Area colour</p>
               <div className="flex items-center gap-2">
                 <div
-                  className="w-10 h-10 rounded border border-neutral-300 flex-shrink-0 relative"
+                  className="w-10 h-10 rounded border border-neutral-300 shrink-0 relative"
                   style={{
                     backgroundColor:
                       mapConfig.turfColor ?? mapColors.areas.color,
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 2cf0b707..4f05b777 100644
--- a/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
+++ b/src/app/(private)/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx
@@ -5,7 +5,12 @@ import { DEFAULT_CUSTOM_COLOR, DUMMY_COUNT_COLUMN } from "@/constants";
 import { useChoroplethDataSource } from "@/hooks/useDataSources";
 import { useEditColumnMetadata } from "@/hooks/useEditColumnMetadata";
 import { ColumnType } from "@/models/DataSource";
-import { ColorScaleType, ColorScheme } from "@/models/MapView";
+import {
+  ColorScaleType,
+  ColorScheme,
+  MapType,
+  mapTypes,
+} from "@/models/MapView";
 import { Button } from "@/shadcn/ui/button";
 import { Input } from "@/shadcn/ui/input";
 import { Label } from "@/shadcn/ui/label";
@@ -151,6 +156,30 @@ export default function VisualisationPanel({
         </p>
       ) : (
         <>
+          <div className="space-y-2">
+            <p className="text-sm font-medium">Layout</p>
+            <div className="flex gap-2">
+              {mapTypes.map((type) => {
+                const isDefault = !viewConfig.mapType && type === MapType.Geo;
+                const isChecked = viewConfig.mapType === type || isDefault;
+                return (
+                  <button
+                    key={type}
+                    type="button"
+                    className={cn(
+                      "flex-1 rounded-md border px-3 py-2 text-xs font-medium shadow-xs transition-colors",
+                      "hover:bg-accent hover:text-accent-foreground hover:border-border",
+                      isChecked && "border-blue-300",
+                    )}
+                    onClick={() => updateViewConfig({ mapType: type })}
+                  >
+                    {type === MapType.Hex ? "Hex map" : "Geographic"}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
           {showStyle && (
             <div className="space-y-2 mb-4">
               <p className="flex gap-2 items-center text-sm font-medium">
@@ -318,7 +347,7 @@ export default function VisualisationPanel({
                             </Label>
                             <div className="flex items-center gap-2">
                               <div
-                                className="w-10 h-10 rounded border border-neutral-300 flex-shrink-0 relative"
+                                className="w-10 h-10 rounded border border-neutral-300 shrink-0 relative"
                                 style={{
                                   backgroundColor:
                                     viewConfig.customColor ||
diff --git a/src/app/(private)/map/[id]/styles.ts b/src/app/(private)/map/[id]/styles.ts
index 8e62cff5..703f305c 100644
--- a/src/app/(private)/map/[id]/styles.ts
+++ b/src/app/(private)/map/[id]/styles.ts
@@ -90,6 +90,37 @@ export const mapColors: Record<
   },
 };
 
+export interface mapPaletteColor {
+  name: string;
+  color: string;
+}
+
+export const DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR = "#555555";
+
+export const mapColorPalette: mapPaletteColor[] = [
+  // Existing named UI colours
+  { name: mapColors.member.name, color: mapColors.member.color },
+  { name: mapColors.dataSource.name, color: mapColors.dataSource.color },
+  {
+    name: mapColors.areas.name,
+    color: mapColors.areas.textColor ?? mapColors.areas.color,
+  },
+
+  // Neutrals
+  { name: "Slate", color: DEFAULT_SECONDARY_BOUNDARY_STROKE_COLOR },
+  { name: "Black", color: "#000000" },
+  { name: "White", color: "#ffffff" },
+
+  // Extra palette options (good contrast on light maps)
+  { name: "Royal blue", color: "#00749e" },
+  { name: "Purple", color: "#c026d3" },
+  { name: "Orange", color: "#ef5f00" },
+  { name: "Red", color: "#dc3b5d" },
+  { name: "Teal", color: "#0f766e" },
+  { name: "Indigo", color: "#4f46e5" },
+  { name: "Amber", color: "#d97706" },
+];
+
 export const CONTROL_PANEL_WIDTH = 280;
 export const VISUALISATION_PANEL_WIDTH = 300;
 
diff --git a/src/models/MapView.ts b/src/models/MapView.ts
index ff979b08..eae09d68 100644
--- a/src/models/MapView.ts
+++ b/src/models/MapView.ts
@@ -118,6 +118,7 @@ export const mapViewConfigSchema = z.object({
   areaDataSecondaryColumn: z.string().optional(),
   areaSetGroupCode: areaSetGroupCode.nullish(),
   secondaryAreaSetCode: areaSetCode.nullish(),
+  secondaryBoundaryStrokeColor: z.string().nullish(),
   choroplethOpacityPct: z.number().optional(),
   includeColumnsString: z.string().optional(),
   mapStyleName: z.nativeEnum(MapStyleName),