diff --git a/src/lib/browse/Filters.svelte b/src/lib/browse/Filters.svelte
deleted file mode 100644
index e3faf4546..000000000
--- a/src/lib/browse/Filters.svelte
+++ /dev/null
@@ -1,277 +0,0 @@
-<script lang="ts">
-  import {
-    Checkbox,
-    CollapsibleCard,
-    CheckboxGroup,
-    FormElement,
-    SecondaryButton,
-    Select,
-  } from "govuk-svelte";
-  import { onMount } from "svelte";
-  import type { Feature } from "types";
-  import { fundingProgrammesForColouringAndFiltering } from "./data";
-  import InterventionColorSelector from "./InterventionColorSelector.svelte";
-  import {
-    filterInterventionText,
-    filterSchemeText,
-    schemes,
-    schemesGj,
-  } from "./stores";
-
-  // NOTE: If schemesGj changes, re-create this component
-
-  // by scheme_reference
-  export let schemesToBeShown: Set<string> = new Set();
-
-  export let show = true;
-
-  // Dropdown filters
-  let authorities: [string, string][] = [];
-  let filterAuthority = "";
-  let fundingProgrammes: [string, string][] = [];
-  let knownFundingProgrammes: Set<string> = new Set(
-    fundingProgrammesForColouringAndFiltering.slice(0, -1),
-  );
-  let filterFundingProgramme = "";
-  let currentMilestones: [string, string][] = [];
-  let filterCurrentMilestone = "";
-  let sketchSources: [string, string][] = [
-    ["ATF assessment", "ATF assessment"],
-    ["LCWIP mapping", "LCWIP mapping"],
-    ["Both", "Both"],
-  ];
-  let filterSketchSource = "";
-
-  // Stats about filtered schemes
-  let counts = { area: 0, route: 0, crossing: 0, other: 0, totalLength: 0.0 };
-
-  onMount(() => {
-    let set1: Set<string> = new Set();
-    let set2: Set<string> = new Set();
-    let set3: Set<string> = new Set();
-    for (let x of $schemes.values()) {
-      if (x.browse?.authority_or_region) {
-        set1.add(x.browse.authority_or_region);
-      }
-      if (x.browse?.funding_programme) {
-        set2.add(x.browse.funding_programme);
-      }
-      if (x.browse?.current_milestone) {
-        set3.add(x.browse.current_milestone);
-      }
-    }
-    authorities = Array.from(set1.entries());
-    authorities.sort();
-    fundingProgrammes = fundingProgrammesForColouringAndFiltering.map(
-      (value: string) => [value, value],
-    );
-
-    currentMilestones = Array.from(set3.entries());
-    currentMilestones.sort();
-  });
-
-  // When any filters change, update schemesToBeShown
-  function filtersUpdated(
-    filterSketchSource: string,
-    filterInterventionTextCopy: string,
-    filterSchemeTextCopy: string,
-    filterAuthority: string,
-    filterFundingProgramme: string,
-    filterCurrentMilestone: string,
-  ) {
-    let filterInterventionNormalized = filterInterventionTextCopy.toLowerCase();
-    let filterSchemeNormalized = filterSchemeTextCopy.toLowerCase();
-    let filterFeatures = (feature: Feature) => {
-      // Only the name and description fields have anything worth filtering
-      if (
-        filterInterventionNormalized &&
-        !feature.properties.name
-          ?.toLowerCase()
-          .includes(filterInterventionNormalized) &&
-        !feature.properties.description
-          ?.toLowerCase()
-          .includes(filterInterventionNormalized)
-      ) {
-        return false;
-      }
-      if (
-        filterSketchSource ||
-        filterSchemeNormalized ||
-        filterAuthority ||
-        filterFundingProgramme ||
-        filterCurrentMilestone
-      ) {
-        let scheme = $schemes.get(feature.properties.scheme_reference!)!;
-        if (
-          filterAuthority &&
-          scheme.browse?.authority_or_region != filterAuthority
-        ) {
-          return false;
-        }
-        if (
-          (filterFundingProgramme &&
-            filterFundingProgramme !== "Other" &&
-            scheme.browse?.funding_programme != filterFundingProgramme) ||
-          (filterFundingProgramme === "Other" &&
-            knownFundingProgrammes.has(scheme.browse?.funding_programme ?? ""))
-        ) {
-          return false;
-        }
-        if (
-          filterCurrentMilestone &&
-          scheme.browse?.current_milestone != filterCurrentMilestone
-        ) {
-          return false;
-        }
-        if (
-          filterSchemeNormalized &&
-          !scheme.scheme_reference
-            .toLowerCase()
-            .includes(filterSchemeNormalized) &&
-          !(scheme.scheme_name ?? "")
-            .toLowerCase()
-            .includes(filterSchemeNormalized)
-        ) {
-          return false;
-        }
-        if (filterSketchSource) {
-          if (
-            filterSketchSource !== "Both" &&
-            filterSketchSource !== scheme.browse?.sketch_source
-          ) {
-            return false;
-          }
-        }
-      }
-      return true;
-    };
-    schemesToBeShown = new Set(
-      $schemesGj.features
-        .filter(filterFeatures)
-        .map((f) => f.properties.scheme_reference!),
-    );
-
-    // Hide things on the map, and recalculate stats
-    counts = { area: 0, route: 0, crossing: 0, other: 0, totalLength: 0.0 };
-    let showFeature = (feature: Feature) => {
-      if (!schemesToBeShown.has(feature.properties.scheme_reference!)) {
-        return false;
-      }
-      // If there's free-text, only show interventions matching it within a scheme
-      if (
-        filterInterventionNormalized &&
-        !feature.properties.name
-          ?.toLowerCase()
-          .includes(filterInterventionNormalized) &&
-        !feature.properties.description
-          ?.toLowerCase()
-          .includes(filterInterventionNormalized)
-      ) {
-        return false;
-      }
-      return true;
-    };
-    for (let feature of $schemesGj.features) {
-      if (showFeature(feature)) {
-        delete feature.properties.hide_while_editing;
-        counts[feature.properties.intervention_type]++;
-        if (
-          feature.geometry.type == "LineString" &&
-          feature.properties.length_meters
-        ) {
-          counts.totalLength += feature.properties.length_meters;
-        }
-      } else {
-        feature.properties.hide_while_editing = true;
-      }
-    }
-    $schemesGj = $schemesGj;
-    counts = counts;
-  }
-  $: filtersUpdated(
-    filterSketchSource,
-    $filterInterventionText,
-    $filterSchemeText,
-    filterAuthority,
-    filterFundingProgramme,
-    filterCurrentMilestone,
-  );
-
-  function metersToMiles(x: number): number {
-    return x * 0.000621371;
-  }
-
-  function resetFilters() {
-    filterSketchSource = "";
-    filterAuthority = "";
-    filterFundingProgramme = "";
-    filterCurrentMilestone = "";
-    $filterInterventionText = "";
-    $filterSchemeText = "";
-  }
-</script>
-
-<CollapsibleCard label="Filters">
-  <SecondaryButton on:click={resetFilters}>Reset all filters</SecondaryButton>
-  <Select
-    label="Authority or region"
-    choices={authorities}
-    emptyOption
-    bind:value={filterAuthority}
-  />
-  <Select
-    label="Funding programme"
-    choices={fundingProgrammes}
-    emptyOption
-    bind:value={filterFundingProgramme}
-  />
-  <Select
-    label="Current milestone"
-    choices={currentMilestones}
-    emptyOption
-    bind:value={filterCurrentMilestone}
-  />
-  <Select
-    label="Sketch source"
-    choices={sketchSources}
-    emptyOption
-    bind:value={filterSketchSource}
-  />
-  <FormElement
-    label="Intervention name or description"
-    id="filterInterventionText"
-  >
-    <input
-      type="text"
-      class="govuk-input govuk-input--width-10"
-      id="filterInterventionText"
-      bind:value={$filterInterventionText}
-    />
-    <SecondaryButton on:click={() => ($filterInterventionText = "")}>
-      Clear
-    </SecondaryButton>
-  </FormElement>
-  <FormElement label="Scheme name or reference" id="filterSchemeText">
-    <input
-      type="text"
-      class="govuk-input govuk-input--width-10"
-      id="filterSchemeText"
-      bind:value={$filterSchemeText}
-    />
-    <SecondaryButton on:click={() => ($filterSchemeText = "")}>
-      Clear
-    </SecondaryButton>
-  </FormElement>
-  <InterventionColorSelector />
-</CollapsibleCard>
-
-<CheckboxGroup small>
-  <Checkbox bind:checked={show}>
-    Showing {schemesToBeShown.size.toLocaleString()} schemes ({counts.route.toLocaleString()}
-    routes, {counts.area.toLocaleString()} areas,
-    {counts.crossing.toLocaleString()} crossings, {counts.other.toLocaleString()}
-    other, with total LineString length of {metersToMiles(
-      counts.totalLength,
-    ).toFixed(1)} miles)
-  </Checkbox>
-</CheckboxGroup>
diff --git a/src/lib/browse/InterventionColorSelector.svelte b/src/lib/browse/InterventionColorSelector.svelte
deleted file mode 100644
index cdc4ae36f..000000000
--- a/src/lib/browse/InterventionColorSelector.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { Legend } from "lib/common";
-  import { CollapsibleCard, Select } from "govuk-svelte";
-  import { colorInterventionsBySchema, schemaLegend } from "schemas";
-  import { map } from "stores";
-  import { styleByCurrentMilestone, styleByFundingProgramme } from "./colors";
-
-  let colorInterventionsAccordingTo = "fundingProgramme";
-  let [_, legendRows] = styleByFundingProgramme();
-
-  function changeStyle() {
-    let color;
-    if (colorInterventionsAccordingTo == "interventionType") {
-      color = colorInterventionsBySchema("v1");
-      legendRows = schemaLegend("v1");
-    } else if (colorInterventionsAccordingTo == "fundingProgramme") {
-      [color, legendRows] = styleByFundingProgramme();
-    } else if (colorInterventionsAccordingTo == "currentMilestone") {
-      [color, legendRows] = styleByCurrentMilestone();
-    }
-    // TODO Plumb instead of setting
-    $map.setPaintProperty("interventions-points", "circle-color", color);
-    $map.setPaintProperty("interventions-lines", "line-color", color);
-    $map.setPaintProperty("interventions-polygons", "fill-color", color);
-    $map.setPaintProperty(
-      "interventions-polygons-outlines",
-      "line-color",
-      color,
-    );
-  }
-</script>
-
-<Select
-  label="Color interventions"
-  choices={[
-    ["fundingProgramme", "By funding programme"],
-    ["interventionType", "By intervention type"],
-    ["currentMilestone", "By current milestone"],
-  ]}
-  bind:value={colorInterventionsAccordingTo}
-  on:change={changeStyle}
-/>
-
-<CollapsibleCard label="Legend">
-  <Legend rows={legendRows} />
-</CollapsibleCard>
diff --git a/src/lib/browse/InterventionPopup.svelte b/src/lib/browse/InterventionPopup.svelte
deleted file mode 100644
index 24a5879db..000000000
--- a/src/lib/browse/InterventionPopup.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-  import { prettyPrintMeters } from "lib/maplibre";
-  import { filterInterventionText, filterSchemeText, schemes } from "./stores";
-  import DescribePipelineTiming from "./DescribePipelineTiming.svelte";
-  import DescribePipelineBudget from "./DescribePipelineBudget.svelte";
-
-  export let props: { [name: string]: any };
-
-  $: scheme = $schemes.get(props.scheme_reference)!;
-
-  // When the user is filtering name/description by freeform text, highlight the matching pieces.
-  function highlightFilter(input: string, filter: string): string {
-    if (!filter) {
-      return input;
-    }
-    return input.replace(
-      new RegExp(filter, "gi"),
-      (match) => `<mark>${match}</mark>`,
-    );
-  }
-</script>
-
-<div style="max-width: 30vw; max-height: 60vh; overflow: auto;">
-  <h2>
-    {@html highlightFilter(props.name, $filterInterventionText)} ({props.intervention_type})
-  </h2>
-  {#if props.length_meters}
-    <p>
-      Length: <b>{prettyPrintMeters(props.length_meters)}</b>
-    </p>
-  {/if}
-  {#if props.description}
-    <p>{@html highlightFilter(props.description, $filterInterventionText)}</p>
-  {/if}
-
-  {#if props.pipeline}
-    {@const p = props.pipeline}
-    {#if p.atf4_type}
-      <p>
-        ATF4 type: <b>{p.atf4_type}</b>
-      </p>
-    {/if}
-    {#if p.accuracy}
-      <p>
-        Accuracy: <b>{p.accuracy}</b>
-      </p>
-    {/if}
-    {#if p.is_alternative}
-      <p>Represents an alternative route</p>
-    {/if}
-    <DescribePipelineBudget props={p} />
-    <DescribePipelineTiming props={p} />
-  {/if}
-
-  <hr />
-
-  <p>
-    Part of scheme: {@html highlightFilter(
-      scheme.scheme_name ?? "",
-      $filterSchemeText,
-    )} ({@html highlightFilter(props.scheme_reference, $filterSchemeText)})
-  </p>
-  <p>
-    Authority or region: <b>{scheme.browse?.authority_or_region}</b>
-  </p>
-  {#if scheme.browse?.capital_scheme_id}
-    <p>
-      Capital scheme ID: <b>{scheme.browse?.capital_scheme_id}</b>
-    </p>
-  {/if}
-  <p>
-    Funding programme: <b>{scheme.browse?.funding_programme}</b>
-  </p>
-  {#if scheme.browse?.current_milestone}
-    <p>
-      Current milestone: <b>{scheme.browse?.current_milestone}</b>
-    </p>
-  {/if}
-
-  {#if scheme.pipeline}
-    {@const p = scheme.pipeline}
-    {#if p.scheme_type}
-      <p>
-        Scheme type: <b>{p.scheme_type}</b>
-      </p>
-    {/if}
-    {#if p.atf4_lead_type}
-      <p>
-        ATF4 lead type: <b>{p.atf4_lead_type}</b>
-      </p>
-    {/if}
-    {#if p.scheme_description}
-      <p>Descripton: {p.scheme_description}</p>
-    {/if}
-    <DescribePipelineBudget props={p} />
-    <DescribePipelineTiming props={p} />
-  {/if}
-</div>
diff --git a/src/lib/browse/LayerControls.svelte b/src/lib/browse/LayerControls.svelte
index d75f426c8..8c566639e 100644
--- a/src/lib/browse/LayerControls.svelte
+++ b/src/lib/browse/LayerControls.svelte
@@ -34,7 +34,8 @@
   import Stats19LayerControl from "./layers/points/Stats19.svelte";
   import VehicleCountsLayerControl from "./layers/points/VehicleCounts.svelte";
   import ProblemsLayerControl from "./layers/points/Problems.svelte";
-  import { interactiveMapLayersEnabled } from "./stores";
+  import SchemesLayer from "./schemes/SchemesLayer.svelte";
+  import { interactiveMapLayersEnabled, controls } from "./stores";
   import { getRoadLayerNames } from "lib/maplibre";
   import { get } from "svelte/store";
   import { map, mapStyle } from "stores";
@@ -71,7 +72,8 @@
   };
 </script>
 
-<CollapsibleCard label="Layers" open>
+<div bind:this={$controls}>
+  <SchemesLayer />
   <CollapsibleCard label="Trip generators">
     <CheckboxGroup small>
       <EducationLayerControl />
@@ -131,7 +133,7 @@
     <LineMeasureTool />
   </CollapsibleCard>
   <BaselayerSwitcher disabled={!$interactiveMapLayersEnabled} />
-</CollapsibleCard>
+</div>
 
 <GeoJSON data={coverEverything}>
   <FillLayer
diff --git a/src/lib/browse/SchemeCard.svelte b/src/lib/browse/SchemeCard.svelte
deleted file mode 100644
index 1cc00251f..000000000
--- a/src/lib/browse/SchemeCard.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import type { FeatureCollection } from "geojson";
-  import { CollapsibleCard, ButtonGroup, SecondaryButton } from "govuk-svelte";
-  import { bbox } from "lib/maplibre";
-  import { map } from "stores";
-  import type { SchemeData } from "types";
-  import { schemesGj } from "./stores";
-  import { setLocalStorageItem } from "lib/common";
-
-  export let scheme: SchemeData;
-
-  function showScheme() {
-    // TODO Highlight on the map? Or fade everything else?
-    let gj: FeatureCollection = {
-      type: "FeatureCollection",
-      features: $schemesGj.features.filter(
-        (f) => f.properties.scheme_reference == scheme.scheme_reference,
-      ),
-    };
-    $map?.fitBounds(bbox(gj), { padding: 20, animate: false });
-  }
-
-  function editScheme() {
-    let gj = {
-      type: "FeatureCollection",
-      features: $schemesGj.features.filter(
-        (f) => f.properties.scheme_reference == scheme.scheme_reference,
-      ),
-    };
-    let filename = scheme.browse?.authority_or_region || "unknown authority";
-    // Assuming the schema is always v1
-
-    // Put the file in local storage, so it'll be loaded from the next page
-    setLocalStorageItem(filename, JSON.stringify(gj));
-    window.open(
-      `scheme.html?authority=${scheme.browse?.authority_or_region}`,
-      "_blank",
-    );
-  }
-</script>
-
-<CollapsibleCard label={`${scheme.scheme_name}`}>
-  <p>Scheme reference: {scheme.scheme_reference}</p>
-  <p>Authority or region: {scheme.browse?.authority_or_region}</p>
-  <p>Capital scheme ID: {scheme.browse?.capital_scheme_id}</p>
-  <p>Funding programme: {scheme.browse?.funding_programme}</p>
-  {#if scheme.browse?.current_milestone}
-    <p>Current milestone: {scheme.browse?.current_milestone}</p>
-  {/if}
-  <ButtonGroup>
-    <SecondaryButton on:click={showScheme}>Show on map</SecondaryButton>
-    <SecondaryButton on:click={editScheme}>Edit scheme locally</SecondaryButton>
-  </ButtonGroup>
-</CollapsibleCard>
diff --git a/src/lib/browse/colors.ts b/src/lib/browse/colors.ts
index bfaa00fb1..3e6e42765 100644
--- a/src/lib/browse/colors.ts
+++ b/src/lib/browse/colors.ts
@@ -1,6 +1,4 @@
-import { constructMatchExpression } from "lib/maplibre";
-import { type DataDrivenPropertyValueSpecification } from "maplibre-gl";
-import { fundingProgrammesForColouringAndFiltering } from "./data";
+import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
 
 // These are specific to the browse page
 export const colors = {
@@ -42,29 +40,6 @@ export const colors = {
     "#080C54",
   ],
 
-  // A qualitative set from colorbrewer2.org
-  funding_programmes: [
-    "#66c2a5",
-    "#fc8d62",
-    "#8da0cb",
-    "#e78ac3",
-    "#a6d854",
-    "#ffd92f",
-    "grey",
-  ],
-
-  current_milestone: [
-    "grey",
-    "grey",
-    "red",
-    "red",
-    "#fbb862",
-    "#eddc76",
-    "#dafd9d",
-    "#76c384",
-    "#488f31",
-  ],
-
   // Thanks to https://ropensci.github.io/slopes/articles/roadnetworkcycling.html
   gradient_flat_to_steep: [
     "#267300",
@@ -89,65 +64,3 @@ export const denseLineWidth: DataDrivenPropertyValueSpecification<number> = [
   18,
   20.0,
 ];
-
-export function styleByFundingProgramme(): [
-  DataDrivenPropertyValueSpecification<string>,
-  [string, string][],
-] {
-  let [colorMapping, legendRows] = getColorMappingAndLegend(
-    fundingProgrammesForColouringAndFiltering,
-    colors.funding_programmes,
-  );
-
-  let color = constructMatchExpression(
-    ["get", "funding_programme"],
-    colorMapping,
-    "grey",
-  );
-  return [color, legendRows];
-}
-
-export function styleByCurrentMilestone(): [
-  DataDrivenPropertyValueSpecification<string>,
-  [string, string][],
-] {
-  let stageGates = [
-    "removed",
-    "no data",
-    "not progressed",
-    "superseded",
-    "preliminary design completed",
-    "feasability design completed",
-    "detailed design completed",
-    "consruction started",
-    "construction completed",
-  ];
-
-  let [colorMapping, legendRows] = getColorMappingAndLegend(
-    stageGates,
-    colors.current_milestone,
-  );
-
-  let color = constructMatchExpression(
-    ["get", "current_milestone"],
-    colorMapping,
-    "grey",
-  );
-  return [color, legendRows];
-}
-
-function getColorMappingAndLegend(
-  keys: string[],
-  colorList: string[],
-): [{ [key: string]: string }, [string, string][]] {
-  let legendRows: [string, string][] = [];
-  let colorMapping: { [key: string]: string } = {};
-  let i = 0;
-  for (let x of keys) {
-    let color = colorList[i++ % colorList.length];
-    colorMapping[x] = color;
-    legendRows.push([x, color]);
-  }
-
-  return [colorMapping, legendRows];
-}
diff --git a/src/lib/browse/data.ts b/src/lib/browse/data.ts
deleted file mode 100644
index b02f91004..000000000
--- a/src/lib/browse/data.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Feature, Schemes, SchemeData } from "types";
-
-// Takes a GeoJSON file representing a bunch of scheme files combined into one.
-// Modifies this GeoJSON in-place, and returns a dictionary of Schemes, keyed
-// (and ordered) by scheme_reference. Each feature (intervention) in the GJ
-// links back to one of these schemes by scheme_reference.
-export function processInput(gj: Schemes): Map<string, SchemeData> {
-  let schemes = new Map();
-
-  // Assume the input has a top-level dictionary keyed by scheme_reference
-  for (let [scheme_reference, scheme] of Object.entries(gj.schemes)) {
-    schemes.set(scheme_reference, scheme);
-  }
-
-  gj.features = gj.features.filter((f) => keepFeature(f));
-
-  let id = 1;
-  for (let feature of gj.features) {
-    let scheme: SchemeData = schemes.get(feature.properties!.scheme_reference);
-    if (scheme.browse) {
-      // TODO For easy styling, copy one field from scheme to all its features.
-      // As we have more cases like this, revisit what's most performant.
-      // @ts-ignore Extend InterventionProps with scheme_reference, current_milestone, and this
-      feature.properties!.funding_programme = scheme.browse.funding_programme;
-      // @ts-ignore Same
-      feature.properties!.current_milestone = scheme.browse.current_milestone;
-      // Force numeric IDs (skipping 0) for hovering to work
-      feature.id = id++;
-    }
-  }
-
-  return schemes;
-}
-
-// These should ideally be fixed during upstream data validation processes.
-function keepFeature(feature: Feature): boolean {
-  // Manually filter out some large areas that describe a boundary or
-  // non-specific location of interventions. They make it harder to
-  // interact with smaller, more specific interventions.
-  let hugeAreas = [
-    "eb0ad8ed183c137da4bae66afa944da9",
-    "0a568f07241be96f0a70aa73a0de80c8",
-    "6c4a5d57176eaeb3296eba790f869909",
-    "475e9a43749ce09c7edaaffa0ae57a2f",
-    "117b783cb2916a1bb4262960e523acc5",
-    "7a600e6342b226aa0983c8dfed19254f",
-    "84cc5eb1b52a4e49188058373e587ff0",
-  ];
-
-  // @ts-ignore The id field is present in the current input data, but it's not
-  // part of our intended schema or used elsewhere, so InterventionProps
-  // deliberately does not include it. Only use it here.
-  if (hugeAreas.includes(feature.properties.id)) {
-    return false;
-  }
-
-  return true;
-}
-
-export const fundingProgrammesForColouringAndFiltering = [
-  "ATF2",
-  "ATF2 or ATF3",
-  "ATF3",
-  "ATF4",
-  "ATF4E",
-  "Planned pipeline",
-  "Other",
-];
diff --git a/src/lib/browse/layers/lines/CyclePaths.svelte b/src/lib/browse/layers/lines/CyclePaths.svelte
index 276d49309..2b9439a65 100644
--- a/src/lib/browse/layers/lines/CyclePaths.svelte
+++ b/src/lib/browse/layers/lines/CyclePaths.svelte
@@ -71,14 +71,14 @@
   ] as const;
 
   function tooltip(props: { [name: string]: any }): [string, string, string] {
-    // @ts-ignore Write types for the feature properties
+    // @ts-expect-error Write types for the feature properties
     let kind = {
       track: "Separated track",
       lane: "Unprotected lane",
       shared_use_segregated: "Shared-use (segregated)",
       shared_use_unsegregated: "Shared-use (unsegregated)",
     }[props.kind];
-    // @ts-ignore Write types for the feature properties
+    // @ts-expect-error Write types for the feature properties
     let direction = {
       "one-way": "&uarr;",
       "two-way": "&#8597;",
diff --git a/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte b/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte
index 71f2c1c12..ad44268e4 100644
--- a/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte
+++ b/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte
@@ -28,7 +28,7 @@
 
   // The caller must also fill in the default slot with the contents of a help modal
 
-  // @ts-ignore TODO Also constrain name to exist in the colors type
+  // @ts-expect-error TODO Also constrain name to exist in the colors type
   let color = colors[name];
 
   let show = showHideLayer(name);
diff --git a/src/lib/browse/DescribePipelineBudget.svelte b/src/lib/browse/schemes/DescribePipelineBudget.svelte
similarity index 89%
rename from src/lib/browse/DescribePipelineBudget.svelte
rename to src/lib/browse/schemes/DescribePipelineBudget.svelte
index b41a2849a..3fc411391 100644
--- a/src/lib/browse/DescribePipelineBudget.svelte
+++ b/src/lib/browse/schemes/DescribePipelineBudget.svelte
@@ -23,7 +23,8 @@
 
 {#if props.budget}
   <p>
-    Cost: <b>{props.budget.toLocaleString()}</b>
+    <b>Cost</b>
+    : {props.budget.toLocaleString()}
     GBP
   </p>
 {/if}
@@ -38,6 +39,7 @@
 
 {#if funding}
   <p>
-    Funding sources: <b>{funding}</b>
+    <b>Funding sources</b>
+    : {funding}
   </p>
 {/if}
diff --git a/src/lib/browse/DescribePipelineTiming.svelte b/src/lib/browse/schemes/DescribePipelineTiming.svelte
similarity index 53%
rename from src/lib/browse/DescribePipelineTiming.svelte
rename to src/lib/browse/schemes/DescribePipelineTiming.svelte
index 045980218..866bf1ecf 100644
--- a/src/lib/browse/DescribePipelineTiming.svelte
+++ b/src/lib/browse/schemes/DescribePipelineTiming.svelte
@@ -6,30 +6,35 @@
 
 {#if props.status}
   <p>
-    Status: <b>{props.status}</b>
+    <b>Status</b>
+    : {props.status}
   </p>
 {/if}
 
 {#if props.timescale}
   <p>
-    Timescale: <b>{props.timescale}</b>
+    <b>Timescale</b>
+    : {props.timescale}
   </p>
 {/if}
 
 {#if props.timescale_year}
   <p>
-    Estimated completion year: <b>{props.timescale_year}</b>
+    <b>Estimated completion year</b>
+    : {props.timescale_year}
   </p>
 {/if}
 
 {#if props.year_published}
   <p>
-    Scheme most recently published: <b>{props.year_published}</b>
+    <b>Scheme most recently published</b>
+    : {props.year_published}
   </p>
 {/if}
 
 {#if props.year_consulted}
   <p>
-    Scheme most recently consulted on: <b>{props.year_consulted}</b>
+    <b>Scheme most recently consulted on</b>
+    : {props.year_consulted}
   </p>
 {/if}
diff --git a/src/lib/browse/schemes/Filters.svelte b/src/lib/browse/schemes/Filters.svelte
new file mode 100644
index 000000000..5b36dacc2
--- /dev/null
+++ b/src/lib/browse/schemes/Filters.svelte
@@ -0,0 +1,291 @@
+<script lang="ts">
+  import {
+    DefaultButton,
+    FormElement,
+    SecondaryButton,
+    Select,
+    Checkbox,
+    CheckboxGroup,
+    AutocompleteTextInput,
+  } from "govuk-svelte";
+  import { Modal } from "lib/common";
+  import type { Feature, Schemes, SchemeData } from "types";
+  import {
+    atfFundingProgrammes,
+    currentMilestones as currentMilestoneColors,
+  } from "./colors";
+
+  export let source: string;
+  export let schemes: Map<string, SchemeData>;
+  export let schemesGj: Schemes;
+  export let filterSchemeText: string;
+  export let filterInterventionText: string;
+
+  let open = false;
+
+  // by scheme_reference
+  let showSchemes: Set<string> = new Set();
+  // Stats about filtered schemes
+  let counts = { interventions: 0, totalLength: 0.0 };
+
+  let currentMilestones: [string, string][] = Object.keys(
+    currentMilestoneColors,
+  ).map((x) => [x, x]);
+
+  $: authorities = getAuthorities(schemes);
+  let filterAuthority = "";
+  let filterFundingProgrammes = Object.fromEntries(
+    Object.keys(atfFundingProgrammes).map((x) => [x, true]),
+  );
+  let filterCurrentMilestone = "";
+
+  function getAuthorities(
+    schemes: Map<string, SchemeData>,
+  ): [string, string][] {
+    let names: Set<string> = new Set();
+    for (let x of schemes.values()) {
+      if (x.browse?.authority_or_region) {
+        names.add(x.browse.authority_or_region);
+      }
+    }
+    let result = Array.from(names.entries());
+    result.sort();
+    return result;
+  }
+
+  // When any filters change, update showSchemes
+  function filtersUpdated(
+    filterInterventionTextCopy: string,
+    filterSchemeTextCopy: string,
+    filterAuthority: string,
+    filterFundingProgrammes: { [name: string]: boolean },
+    filterCurrentMilestone: string,
+  ) {
+    let filterInterventionNormalized = filterInterventionTextCopy.toLowerCase();
+    let filterSchemeNormalized = filterSchemeTextCopy.toLowerCase();
+    let filterFeatures = (feature: Feature) => {
+      // Only the name and description fields have anything worth filtering
+      if (
+        filterInterventionNormalized &&
+        !feature.properties.name
+          ?.toLowerCase()
+          .includes(filterInterventionNormalized) &&
+        !feature.properties.description
+          ?.toLowerCase()
+          .includes(filterInterventionNormalized)
+      ) {
+        return false;
+      }
+
+      let scheme = schemes.get(feature.properties.scheme_reference!)!;
+      if (
+        filterAuthority &&
+        scheme.browse?.authority_or_region != filterAuthority
+      ) {
+        return false;
+      }
+      if (
+        source == "ATF" &&
+        !filterFundingProgrammes[scheme.browse!.funding_programme]
+      ) {
+        return false;
+      }
+      if (
+        filterCurrentMilestone &&
+        scheme.browse?.current_milestone != filterCurrentMilestone
+      ) {
+        return false;
+      }
+      if (
+        filterSchemeNormalized &&
+        !scheme.scheme_reference
+          .toLowerCase()
+          .includes(filterSchemeNormalized) &&
+        !(scheme.scheme_name ?? "")
+          .toLowerCase()
+          .includes(filterSchemeNormalized)
+      ) {
+        return false;
+      }
+
+      return true;
+    };
+    showSchemes = new Set(
+      schemesGj.features
+        .filter(filterFeatures)
+        .map((f) => f.properties.scheme_reference!),
+    );
+
+    // Hide things on the map, and recalculate stats
+    counts = { interventions: 0, totalLength: 0 };
+    let showFeature = (feature: Feature) => {
+      if (!showSchemes.has(feature.properties.scheme_reference!)) {
+        return false;
+      }
+      // If there's free-text, only show interventions matching it within a scheme
+      if (
+        filterInterventionNormalized &&
+        !feature.properties.name
+          ?.toLowerCase()
+          .includes(filterInterventionNormalized) &&
+        !feature.properties.description
+          ?.toLowerCase()
+          .includes(filterInterventionNormalized)
+      ) {
+        return false;
+      }
+      return true;
+    };
+    for (let feature of schemesGj.features) {
+      if (showFeature(feature)) {
+        delete feature.properties.hide_while_editing;
+        counts.interventions++;
+        if (
+          feature.geometry.type == "LineString" &&
+          feature.properties.length_meters
+        ) {
+          counts.totalLength += feature.properties.length_meters;
+        }
+      } else {
+        feature.properties.hide_while_editing = true;
+      }
+    }
+    schemesGj = schemesGj;
+    counts = counts;
+  }
+  $: filtersUpdated(
+    filterInterventionText,
+    filterSchemeText,
+    filterAuthority,
+    filterFundingProgrammes,
+    filterCurrentMilestone,
+  );
+
+  function metersToMiles(x: number): number {
+    return x * 0.000621371;
+  }
+
+  function resetFilters() {
+    filterAuthority = "";
+    filterFundingProgrammes = Object.fromEntries(
+      Object.keys(atfFundingProgrammes).map((x) => [x, true]),
+    );
+    filterCurrentMilestone = "";
+    filterInterventionText = "";
+    filterSchemeText = "";
+  }
+
+  function schemeAutocompleteOptions(
+    schemes: Map<string, SchemeData>,
+  ): [string, string][] {
+    let result = [] as [string, string][];
+    for (let scheme of schemes.values()) {
+      // TODO Consider not doing this for LCWIPs
+      result.push([scheme.scheme_reference, scheme.scheme_reference]);
+      if (scheme.scheme_name) {
+        result.push([scheme.scheme_name, scheme.scheme_name]);
+      }
+    }
+    return result;
+  }
+</script>
+
+<SecondaryButton on:click={() => (open = true)}>Filters</SecondaryButton>
+
+<Modal title={`Filter ${source} schemes`} bind:open>
+  <p>Showing:</p>
+  <ul>
+    <li>
+      {counts.interventions.toLocaleString()} interventions
+    </li>
+    <li>{showSchemes.size.toLocaleString()} schemes</li>
+    <li>
+      total route length of {metersToMiles(counts.totalLength).toFixed(1)} miles
+    </li>
+  </ul>
+
+  <SecondaryButton on:click={resetFilters}>Reset all filters</SecondaryButton>
+
+  {#if source == "ATF"}
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-half">
+        <FormElement
+          label="Intervention name or description"
+          id="filterInterventionText"
+        >
+          <input
+            type="text"
+            class="govuk-input govuk-input--width-10"
+            id="filterInterventionText"
+            bind:value={filterInterventionText}
+          />
+          <SecondaryButton on:click={() => (filterInterventionText = "")}>
+            Clear
+          </SecondaryButton>
+        </FormElement>
+
+        <AutocompleteTextInput
+          label="Scheme name or reference"
+          bind:value={filterSchemeText}
+          options={schemeAutocompleteOptions(schemes)}
+        />
+
+        <Select
+          label="Authority or region"
+          choices={authorities}
+          emptyOption
+          bind:value={filterAuthority}
+        />
+      </div>
+
+      <div class="govuk-grid-column-one-half">
+        <FormElement label="Funding programmes" id="filterFundingProgrammes">
+          <CheckboxGroup small>
+            {#each Object.keys(atfFundingProgrammes) as fp}
+              <Checkbox bind:checked={filterFundingProgrammes[fp]}>
+                {fp}
+              </Checkbox>
+            {/each}
+          </CheckboxGroup>
+        </FormElement>
+
+        <Select
+          label="Current milestone"
+          choices={currentMilestones}
+          emptyOption
+          bind:value={filterCurrentMilestone}
+        />
+      </div>
+    </div>
+  {:else}
+    <FormElement
+      label="Intervention name or description"
+      id="filterInterventionText"
+    >
+      <input
+        type="text"
+        class="govuk-input govuk-input--width-10"
+        id="filterInterventionText"
+        bind:value={filterInterventionText}
+      />
+      <SecondaryButton on:click={() => (filterInterventionText = "")}>
+        Clear
+      </SecondaryButton>
+    </FormElement>
+
+    <AutocompleteTextInput
+      label="Scheme name or reference"
+      bind:value={filterSchemeText}
+      options={schemeAutocompleteOptions(schemes)}
+    />
+
+    <Select
+      label="Authority or region"
+      choices={authorities}
+      emptyOption
+      bind:value={filterAuthority}
+    />
+  {/if}
+
+  <DefaultButton on:click={() => (open = false)}>Done</DefaultButton>
+</Modal>
diff --git a/src/lib/browse/InterventionLayer.svelte b/src/lib/browse/schemes/InterventionLayer.svelte
similarity index 61%
rename from src/lib/browse/InterventionLayer.svelte
rename to src/lib/browse/schemes/InterventionLayer.svelte
index 391a2a37e..4de81d922 100644
--- a/src/lib/browse/InterventionLayer.svelte
+++ b/src/lib/browse/schemes/InterventionLayer.svelte
@@ -8,7 +8,10 @@
     isPolygon,
     layerId,
   } from "lib/maplibre";
-  import type { ExpressionSpecification } from "maplibre-gl";
+  import type {
+    DataDrivenPropertyValueSpecification,
+    ExpressionSpecification,
+  } from "maplibre-gl";
   import {
     CircleLayer,
     FillLayer,
@@ -16,15 +19,19 @@
     hoverStateFilter,
     LineLayer,
   } from "svelte-maplibre";
-  import { styleByFundingProgramme } from "./colors";
   import InterventionPopup from "./InterventionPopup.svelte";
-  import { schemesGj } from "./stores";
+  import type { Schemes, SchemeData } from "types";
 
-  export let showSchemes: boolean;
+  export let source: string;
+  export let show: boolean;
 
-  let [colorInterventions] = styleByFundingProgramme();
+  export let schemes: Map<string, SchemeData>;
+  export let schemesGj: Schemes;
+  export let filterSchemeText: string;
+  export let filterInterventionText: string;
+  export let color: DataDrivenPropertyValueSpecification<string>;
 
-  $: gj = addLineStringEndpoints($schemesGj);
+  $: gj = addLineStringEndpoints(schemesGj);
 
   // TODO Abusing this property for filtering
   const hideWhileEditing: ExpressionSpecification = [
@@ -41,48 +48,62 @@
 
 <GeoJSON data={gj}>
   <CircleLayer
-    {...layerId("interventions-points")}
+    {...layerId(`${source}-interventions-points`)}
     filter={["all", isPoint, hideWhileEditing, notEndpoint]}
     manageHoverState
     eventsIfTopMost
     paint={{
-      "circle-color": colorInterventions,
+      "circle-color": color,
       "circle-radius": circleRadius,
       "circle-opacity": hoverStateFilter(1.0, 0.5),
     }}
     layout={{
-      visibility: showSchemes ? "visible" : "none",
+      visibility: show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
-      <InterventionPopup {props} />
+      <InterventionPopup
+        {source}
+        {props}
+        {schemesGj}
+        {schemes}
+        {filterSchemeText}
+        {filterInterventionText}
+      />
     </Popup>
   </CircleLayer>
 
   <LineLayer
-    {...layerId("interventions-lines")}
+    {...layerId(`${source}-interventions-lines`)}
     filter={["all", isLine, hideWhileEditing]}
     manageHoverState
     eventsIfTopMost
     paint={{
-      "line-color": colorInterventions,
+      "line-color": color,
       "line-width": lineWidth,
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}
     layout={{
-      visibility: showSchemes ? "visible" : "none",
+      visibility: show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
-      <InterventionPopup {props} />
+      <InterventionPopup
+        {source}
+        {props}
+        {schemesGj}
+        {schemes}
+        {filterSchemeText}
+        {filterInterventionText}
+      />
     </Popup>
   </LineLayer>
   <CircleLayer
-    {...layerId("interventions-lines-endpoints")}
+    {...layerId(`${source}-interventions-lines-endpoints`)}
     filter={["==", "endpoint", true]}
     paint={{
       "circle-radius": 0.5 * lineWidth,
@@ -91,39 +112,46 @@
       "circle-stroke-width": 2.0,
     }}
     layout={{
-      visibility: showSchemes ? "visible" : "none",
+      visibility: show ? "visible" : "none",
     }}
   />
 
   <FillLayer
-    {...layerId("interventions-polygons")}
+    {...layerId(`${source}-interventions-polygons`)}
     filter={["all", isPolygon, hideWhileEditing]}
     manageHoverState
     eventsIfTopMost
     paint={{
-      "fill-color": colorInterventions,
+      "fill-color": color,
       "fill-opacity": hoverStateFilter(0.2, 0.5),
     }}
     layout={{
-      visibility: showSchemes ? "visible" : "none",
+      visibility: show ? "visible" : "none",
     }}
     hoverCursor="pointer"
   >
     <Popup let:props popupClass="border-popup"><p>{props.name}</p></Popup>
     <Popup let:props openOn="click" popupClass="border-popup">
-      <InterventionPopup {props} />
+      <InterventionPopup
+        {source}
+        {props}
+        {schemesGj}
+        {schemes}
+        {filterSchemeText}
+        {filterInterventionText}
+      />
     </Popup>
   </FillLayer>
   <LineLayer
-    {...layerId("interventions-polygons-outlines")}
+    {...layerId(`${source}-interventions-polygons-outlines`)}
     filter={["all", isPolygon, hideWhileEditing]}
     paint={{
-      "line-color": colorInterventions,
+      "line-color": color,
       "line-opacity": 0.5,
       "line-width": 0.7 * lineWidth,
     }}
     layout={{
-      visibility: showSchemes ? "visible" : "none",
+      visibility: show ? "visible" : "none",
     }}
   />
 </GeoJSON>
diff --git a/src/lib/browse/schemes/InterventionPopup.svelte b/src/lib/browse/schemes/InterventionPopup.svelte
new file mode 100644
index 000000000..56db2dc38
--- /dev/null
+++ b/src/lib/browse/schemes/InterventionPopup.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { SecondaryButton } from "govuk-svelte";
+  import type { FeatureCollection } from "geojson";
+  import { bbox } from "lib/maplibre";
+  import { map } from "stores";
+  import { prettyPrintMeters } from "lib/maplibre";
+  import { setLocalStorageItem } from "lib/common";
+  import DescribePipelineTiming from "./DescribePipelineTiming.svelte";
+  import DescribePipelineBudget from "./DescribePipelineBudget.svelte";
+  import type { Schemes, SchemeData } from "types";
+  import { afterUpdate } from "svelte";
+
+  export let source: string;
+  export let props: { [name: string]: any };
+  export let schemes: Map<string, SchemeData>;
+  export let schemesGj: Schemes;
+  export let filterSchemeText: string;
+  export let filterInterventionText: string;
+
+  $: scheme = schemes.get(props.scheme_reference)!;
+
+  let div: HTMLDivElement | undefined;
+  afterUpdate(() => {
+    if (div) {
+      div.scrollTop = 0;
+    }
+  });
+
+  // When the user is filtering name/description by freeform text, highlight the matching pieces.
+  function highlightFilter(input: string, filter: string): string {
+    if (!filter) {
+      return input;
+    }
+    return input.replace(
+      new RegExp(filter, "gi"),
+      (match) => `<mark>${match}</mark>`,
+    );
+  }
+
+  function showScheme() {
+    // TODO Highlight on the map? Or fade everything else?
+    let gj: FeatureCollection = {
+      type: "FeatureCollection",
+      features: schemesGj.features.filter(
+        (f) => f.properties.scheme_reference == scheme.scheme_reference,
+      ),
+    };
+    $map?.fitBounds(bbox(gj), { padding: 20, animate: false });
+  }
+
+  function editScheme() {
+    let gj: Schemes = {
+      type: "FeatureCollection",
+      features: schemesGj.features.filter(
+        (f) => f.properties.scheme_reference == scheme.scheme_reference,
+      ),
+      schemes: {},
+    };
+    gj.schemes[scheme.scheme_reference] = scheme;
+    let filename = scheme.browse?.authority_or_region || "unknown authority";
+    let schema = scheme.pipeline ? "pipeline" : "v1";
+    if (schema == "pipeline") {
+      filename += "_pipeline";
+    }
+
+    // Put the file in local storage, so it'll be loaded from the next page
+    setLocalStorageItem(filename, JSON.stringify(gj));
+    window.open(
+      `scheme.html?authority=${scheme.browse?.authority_or_region}&schema=${schema}`,
+      "_blank",
+    );
+  }
+</script>
+
+{#key props}
+  <div
+    style="max-width: 30vw; max-height: 60vh; overflow: auto;"
+    bind:this={div}
+  >
+    <h2>Intervention</h2>
+
+    <p>
+      <b>Name</b>
+      : {@html highlightFilter(props.name, filterInterventionText)} ({props.intervention_type})
+    </p>
+
+    {#if props.length_meters}
+      <p>
+        <b>Length</b>
+        : {prettyPrintMeters(props.length_meters)}
+      </p>
+    {/if}
+
+    {#if props.description}
+      <p>{@html highlightFilter(props.description, filterInterventionText)}</p>
+    {/if}
+
+    {#if props.pipeline}
+      {@const p = props.pipeline}
+      {#if p.atf4_type}
+        <p>
+          <b>ATF4 type</b>
+          : {p.atf4_type}
+        </p>
+      {/if}
+      {#if p.accuracy}
+        <p>
+          <b>Accuracy</b>
+          : {p.accuracy}
+        </p>
+      {/if}
+      {#if p.is_alternative}
+        <p>Represents an alternative route</p>
+      {/if}
+      <DescribePipelineBudget props={p} />
+      <DescribePipelineTiming props={p} />
+    {/if}
+
+    <hr />
+
+    <h2>{source.toUpperCase()} Scheme</h2>
+
+    <p>
+      <b>Scheme name</b>
+      : {@html highlightFilter(scheme.scheme_name ?? "", filterSchemeText)}
+    </p>
+    <p>
+      <b>Scheme reference</b>
+      : {@html highlightFilter(props.scheme_reference, filterSchemeText)}
+    </p>
+    <p>
+      <b>Authority or region</b>
+      : {scheme.browse?.authority_or_region}
+    </p>
+    {#if scheme.browse?.capital_scheme_id}
+      <p>
+        <b>Capital scheme ID</b>
+        : {scheme.browse?.capital_scheme_id}
+      </p>
+    {/if}
+    <p>
+      <b>Funding programme</b>
+      : {scheme.browse?.funding_programme}
+    </p>
+    {#if scheme.browse?.current_milestone}
+      <p>
+        <b>Current milestone</b>
+        : {scheme.browse?.current_milestone}
+      </p>
+    {/if}
+
+    {#if scheme.pipeline}
+      {@const p = scheme.pipeline}
+      {#if p.scheme_type}
+        <p>
+          <b>Scheme type</b>
+          : {p.scheme_type}
+        </p>
+      {/if}
+      {#if p.atf4_lead_type}
+        <p>
+          <b>ATF4 lead type</b>
+          : {p.atf4_lead_type}
+        </p>
+      {/if}
+      {#if p.scheme_description}
+        <p>
+          <b>Descripton</b>
+          : {p.scheme_description}
+        </p>
+      {/if}
+      <DescribePipelineBudget props={p} />
+      <DescribePipelineTiming props={p} />
+    {/if}
+
+    <SecondaryButton on:click={showScheme}>
+      Zoom to show entire scheme
+    </SecondaryButton>
+    <SecondaryButton on:click={editScheme}>
+      Edit a copy of this scheme
+    </SecondaryButton>
+  </div>
+{/key}
diff --git a/src/lib/browse/LoadRemoteSchemeData.svelte b/src/lib/browse/schemes/LoadRemoteSchemeData.svelte
similarity index 100%
rename from src/lib/browse/LoadRemoteSchemeData.svelte
rename to src/lib/browse/schemes/LoadRemoteSchemeData.svelte
diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
new file mode 100644
index 000000000..49baa057c
--- /dev/null
+++ b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+  import {
+    CollapsibleCard,
+    ErrorMessage,
+    FileInput,
+    Checkbox,
+    Select,
+  } from "govuk-svelte";
+  import { appVersion, HelpButton, Legend, WarningIcon } from "lib/common";
+  import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte";
+  import { setupSchemes } from "./data";
+  import Filters from "./Filters.svelte";
+  import {
+    atfSchemesGj,
+    atfSchemes,
+    lcwipSchemesGj,
+    lcwipSchemes,
+    filterAtfSchemeText,
+    filterAtfInterventionText,
+    filterLcwipSchemeText,
+    filterLcwipInterventionText,
+  } from "./stores";
+  import InterventionLayer from "./InterventionLayer.svelte";
+  import { colorInterventionsBySchema, schemaLegend } from "schemas";
+  import { currentMilestones, atfFundingProgrammes } from "./colors";
+  import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
+  import { constructMatchExpression } from "lib/maplibre";
+
+  let errorMessage = "";
+
+  let showAtf = true;
+  let showLcwip = true;
+
+  let atfStyle = "fundingProgramme";
+  $: [atfColor, atfLegend] = pickStyle(atfStyle);
+
+  let lcwipStyle = "interventionType";
+  $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
+
+  function loadFile(filename: string, text: string) {
+    try {
+      setupSchemes(JSON.parse(text));
+      errorMessage = "";
+    } catch (err) {
+      errorMessage = `The file you loaded is broken: ${err}`;
+    }
+  }
+
+  function pickStyle(
+    style: string,
+  ): [DataDrivenPropertyValueSpecification<string>, [string, string][]] {
+    if (style == "interventionType") {
+      return [colorInterventionsBySchema("v1"), schemaLegend("v1")];
+    } else if (style == "fundingProgramme") {
+      return [
+        constructMatchExpression(
+          ["get", "funding_programme"],
+          atfFundingProgrammes,
+          "grey",
+        ),
+        Object.entries(atfFundingProgrammes),
+      ];
+    } else if (style == "currentMilestone") {
+      return [
+        constructMatchExpression(
+          ["get", "current_milestone"],
+          currentMilestones,
+          "grey",
+        ),
+        Object.entries(currentMilestones),
+      ];
+    } else {
+      // Should be impossible
+      return ["red", []];
+    }
+  }
+</script>
+
+<CollapsibleCard label="Schemes" open>
+  {#if appVersion() == "Private (development)"}
+    <LoadRemoteSchemeData {loadFile} />
+  {/if}
+
+  {#if $atfSchemes.size > 0}
+    <Checkbox bind:checked={showAtf}>
+      ATF schemes
+      <span slot="right">
+        <HelpButton>
+          <p>
+            <WarningIcon text="Scheme data caveats" />Please note there are data
+            quality caveats for all scheme data:
+          </p>
+          <ul>
+            {#each $atfSchemesGj.notes ?? [] as note}
+              <li><p>{note}</p></li>
+            {/each}
+          </ul>
+        </HelpButton>
+      </span>
+    </Checkbox>
+
+    <Filters
+      source="ATF"
+      bind:schemesGj={$atfSchemesGj}
+      bind:schemes={$atfSchemes}
+      bind:filterSchemeText={$filterAtfSchemeText}
+      bind:filterInterventionText={$filterAtfInterventionText}
+    />
+
+    <Select
+      label="Colour interventions"
+      choices={[
+        ["fundingProgramme", "By funding programme"],
+        ["interventionType", "By intervention type"],
+        ["currentMilestone", "By current milestone"],
+      ]}
+      bind:value={atfStyle}
+    />
+    <Legend rows={atfLegend} />
+  {/if}
+
+  {#if $lcwipSchemes.size > 0}
+    <Checkbox bind:checked={showLcwip}>
+      LCWIP schemes
+      <span slot="right">
+        <HelpButton>
+          <p>
+            <WarningIcon text="Scheme data caveats" />Please note there are data
+            quality caveats for all scheme data:
+          </p>
+          <ul>
+            {#each $lcwipSchemesGj.notes ?? [] as note}
+              <li><p>{note}</p></li>
+            {/each}
+          </ul>
+        </HelpButton>
+      </span>
+    </Checkbox>
+
+    <Filters
+      source="LCWIP"
+      bind:schemesGj={$lcwipSchemesGj}
+      bind:schemes={$lcwipSchemes}
+      bind:filterSchemeText={$filterLcwipSchemeText}
+      bind:filterInterventionText={$filterLcwipInterventionText}
+    />
+
+    <Select
+      label="Colour interventions"
+      choices={[["interventionType", "By intervention type"]]}
+      bind:value={lcwipStyle}
+    />
+    <Legend rows={lcwipLegend} />
+  {/if}
+
+  <FileInput label="Load schemes from GeoJSON" onLoad={loadFile} />
+  <ErrorMessage {errorMessage} />
+</CollapsibleCard>
+
+<InterventionLayer
+  source="atf"
+  show={showAtf}
+  schemesGj={$atfSchemesGj}
+  schemes={$atfSchemes}
+  filterSchemeText={$filterAtfSchemeText}
+  filterInterventionText={$filterAtfInterventionText}
+  color={atfColor}
+/>
+<InterventionLayer
+  source="lcwip"
+  show={showLcwip}
+  schemesGj={$lcwipSchemesGj}
+  schemes={$lcwipSchemes}
+  filterSchemeText={$filterLcwipSchemeText}
+  filterInterventionText={$filterLcwipInterventionText}
+  color={lcwipColor}
+/>
diff --git a/src/lib/browse/schemes/colors.ts b/src/lib/browse/schemes/colors.ts
new file mode 100644
index 000000000..6642a678e
--- /dev/null
+++ b/src/lib/browse/schemes/colors.ts
@@ -0,0 +1,19 @@
+export let atfFundingProgrammes = {
+  ATF2: "#66c2a5",
+  "ATF2 or ATF3": "#fc8d62",
+  ATF3: "#8da0cb",
+  ATF4: "#e78ac3",
+  ATF4E: "#a6d854",
+};
+
+export let currentMilestones = {
+  removed: "grey",
+  "no data": "grey",
+  "not progressed": "red",
+  superseded: "red",
+  "preliminary design completed": "#fbb862",
+  "feasability design completed": "#eddc76",
+  "detailed design completed": "#dafd9d",
+  "consruction started": "#76c384",
+  "construction completed": "#488f31",
+};
diff --git a/src/lib/browse/schemes/data.ts b/src/lib/browse/schemes/data.ts
new file mode 100644
index 000000000..1bfa8efd8
--- /dev/null
+++ b/src/lib/browse/schemes/data.ts
@@ -0,0 +1,89 @@
+import type { Feature, Schemes, SchemeData } from "types";
+import {
+  atfSchemesGj,
+  atfSchemes as atfSchemesStore,
+  lcwipSchemesGj,
+  lcwipSchemes as lcwipSchemesStore,
+} from "./stores";
+
+// Takes a GeoJSON file representing a bunch of scheme files combined into one.
+// Populates the two stores for each of ATF and LCWIP schemes.
+export function setupSchemes(gj: Schemes) {
+  let atfGj: Schemes = {
+    type: "FeatureCollection",
+    features: [],
+    schemes: {},
+    // TODO For now, duplicate the notes between the two. Later, these will become two separate files
+    notes: gj.notes,
+  };
+  let atfSchemes: Map<string, SchemeData> = new Map();
+
+  let lcwipGj: Schemes = {
+    type: "FeatureCollection",
+    features: [],
+    schemes: {},
+    notes: gj.notes,
+  };
+  let lcwipSchemes: Map<string, SchemeData> = new Map();
+
+  for (let [scheme_reference, scheme] of Object.entries(gj.schemes)) {
+    if (scheme.pipeline) {
+      lcwipSchemes.set(scheme_reference, scheme);
+      lcwipGj.schemes[scheme_reference] = scheme;
+    } else {
+      atfSchemes.set(scheme_reference, scheme);
+      atfGj.schemes[scheme_reference] = scheme;
+    }
+  }
+
+  for (let feature of gj.features) {
+    if (!keepFeature(feature)) {
+      continue;
+    }
+
+    let scheme_reference = feature.properties.scheme_reference;
+    let is_atf = atfSchemes.has(scheme_reference);
+
+    let schemes = is_atf ? atfSchemes : lcwipSchemes;
+    let scheme = schemes.get(scheme_reference)!;
+    if (scheme.browse) {
+      // TODO For easy styling, copy one field from scheme to all its features.
+      // As we have more cases like this, revisit what's most performant.
+      // TODO Aren't these only for LCWIP?
+      feature.properties.funding_programme = scheme.browse.funding_programme;
+      feature.properties.current_milestone = scheme.browse.current_milestone;
+    }
+
+    let gj = is_atf ? atfGj : lcwipGj;
+    // Force numeric IDs (skipping 0) for hovering to work
+    feature.id = gj.features.length + 1;
+    gj.features.push(feature);
+  }
+
+  atfSchemesGj.set(atfGj);
+  atfSchemesStore.set(atfSchemes);
+  lcwipSchemesGj.set(lcwipGj);
+  lcwipSchemesStore.set(lcwipSchemes);
+}
+
+// These should ideally be fixed during upstream data validation processes.
+function keepFeature(feature: Feature): boolean {
+  // Manually filter out some large areas that describe a boundary or
+  // non-specific location of interventions. They make it harder to
+  // interact with smaller, more specific interventions.
+  let hugeAreas = [
+    "eb0ad8ed183c137da4bae66afa944da9",
+    "0a568f07241be96f0a70aa73a0de80c8",
+    "6c4a5d57176eaeb3296eba790f869909",
+    "475e9a43749ce09c7edaaffa0ae57a2f",
+    "117b783cb2916a1bb4262960e523acc5",
+    "7a600e6342b226aa0983c8dfed19254f",
+    "84cc5eb1b52a4e49188058373e587ff0",
+  ];
+
+  if (hugeAreas.includes(feature.properties.id)) {
+    return false;
+  }
+
+  return true;
+}
diff --git a/src/lib/browse/schemes/stores.ts b/src/lib/browse/schemes/stores.ts
new file mode 100644
index 000000000..3e3428e43
--- /dev/null
+++ b/src/lib/browse/schemes/stores.ts
@@ -0,0 +1,25 @@
+import { writable, type Writable } from "svelte/store";
+import type { Schemes, SchemeData } from "types";
+
+// TODO Bundle this into one type, so it's easier to plumb around
+export const atfSchemesGj: Writable<Schemes> = writable({
+  type: "FeatureCollection",
+  features: [],
+  schemes: {},
+});
+export const atfSchemes: Writable<Map<string, SchemeData>> = writable(
+  new Map(),
+);
+export const filterAtfInterventionText: Writable<string> = writable("");
+export const filterAtfSchemeText: Writable<string> = writable("");
+
+export const lcwipSchemesGj: Writable<Schemes> = writable({
+  type: "FeatureCollection",
+  features: [],
+  schemes: {},
+});
+export const lcwipSchemes: Writable<Map<string, SchemeData>> = writable(
+  new Map(),
+);
+export const filterLcwipInterventionText: Writable<string> = writable("");
+export const filterLcwipSchemeText: Writable<string> = writable("");
diff --git a/src/lib/browse/stores.ts b/src/lib/browse/stores.ts
index 4ecc0bb43..947597cc0 100644
--- a/src/lib/browse/stores.ts
+++ b/src/lib/browse/stores.ts
@@ -1,13 +1,4 @@
 import { writable, type Writable } from "svelte/store";
-import type { Schemes, SchemeData } from "types";
-
-export const schemesGj: Writable<Schemes> = writable({
-  type: "FeatureCollection",
-  features: [],
-  schemes: {},
-});
-export const schemes: Writable<Map<string, SchemeData>> = writable(new Map());
 
 export const interactiveMapLayersEnabled: Writable<boolean> = writable(true);
-export const filterInterventionText: Writable<string> = writable("");
-export const filterSchemeText: Writable<string> = writable("");
+export let controls: Writable<HTMLDivElement | null> = writable(null);
diff --git a/src/lib/common/LoggedIn.svelte b/src/lib/common/LoggedIn.svelte
index 3269d869e..bfa5c45aa 100644
--- a/src/lib/common/LoggedIn.svelte
+++ b/src/lib/common/LoggedIn.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Cookies from "js-cookie";
-  import { Alpha, appVersion } from "lib/common";
+  import { appVersion } from "lib/common";
   import { ErrorMessage } from "govuk-svelte";
 
   let email = Cookies.get("email");
@@ -15,5 +15,3 @@
     />
   {/if}
 {/if}
-
-<Alpha />
diff --git a/src/lib/maplibre/zorder.ts b/src/lib/maplibre/zorder.ts
index be6270b8b..75e6be505 100644
--- a/src/lib/maplibre/zorder.ts
+++ b/src/lib/maplibre/zorder.ts
@@ -63,18 +63,31 @@ export let layerZorder = [
   // Polygons are bigger than lines, which're bigger than points. When geometry
   // overlaps, put the smaller thing on top
   sketch("interventions-coverage-polygons-outlines"),
-  sketch(browse("interventions-polygons")),
-  sketch(browse("interventions-polygons-outlines")),
+  sketch("interventions-polygons"),
+  sketch("interventions-polygons-outlines"),
   // This is an outline, so draw on top
   sketch("hover-polygons"),
 
+  browse("atf-interventions-polygons"),
+  browse("lcwip-interventions-polygons"),
+  browse("atf-interventions-polygons-outlines"),
+  browse("lcwip-interventions-polygons-outlines"),
+
   // The hover effect thickens, so draw beneath
   sketch("hover-lines"),
-  sketch(browse("interventions-lines")),
-  sketch(browse("interventions-lines-endpoints")),
+  sketch("interventions-lines"),
+  sketch("interventions-lines-endpoints"),
+
+  browse("atf-interventions-lines"),
+  browse("lcwip-interventions-lines"),
+  browse("atf-interventions-lines-endpoints"),
+  browse("lcwip-interventions-lines-endpoints"),
 
   sketch("hover-points"),
-  sketch(browse("interventions-points")),
+  sketch("interventions-points"),
+
+  browse("atf-interventions-points"),
+  browse("lcwip-interventions-points"),
 
   // Problem points are one layer that should display on top of scheme data
   browse("problems"),
diff --git a/src/lib/sketch/StorageModal.svelte b/src/lib/sketch/StorageModal.svelte
index 614282bc7..96fcb73e0 100644
--- a/src/lib/sketch/StorageModal.svelte
+++ b/src/lib/sketch/StorageModal.svelte
@@ -49,8 +49,8 @@
     {#each setStorageError.storedStrings as storedStringDescriptor}
       {#if storedStringDescriptor.key === currentAuthority}
         <p>
-          <WarningIcon text={"warning icon"} />The button below deletes the
-          current sketch.
+          <WarningIcon text="This will delete the current sketch" />The button
+          below deletes the current sketch.
         </p>
       {/if}
       <SecondaryButton
diff --git a/src/lib/sketch/UnexpectedProperties.svelte b/src/lib/sketch/UnexpectedProperties.svelte
index d679f8cab..b2f573fb4 100644
--- a/src/lib/sketch/UnexpectedProperties.svelte
+++ b/src/lib/sketch/UnexpectedProperties.svelte
@@ -17,7 +17,6 @@
     gjSchemes.update((gj) => {
       let feature = gj.features.find((f) => f.id == id)!;
       for (let key of Object.keys(unexpected)) {
-        // @ts-ignore TS thinks the properties don't have extra properties, but they do
         delete feature.properties[key];
       }
       return gj;
diff --git a/src/pages/BrowseSchemes.svelte b/src/pages/BrowseSchemes.svelte
index 808692d04..0d97fc18e 100644
--- a/src/pages/BrowseSchemes.svelte
+++ b/src/pages/BrowseSchemes.svelte
@@ -1,25 +1,20 @@
 <script lang="ts">
-  // @ts-ignore no declarations
+  // @ts-expect-error no declarations
   import { initAll } from "govuk-frontend";
-  import { processInput } from "lib/browse/data";
-  import Filters from "lib/browse/Filters.svelte";
   import LayerControls from "lib/browse/LayerControls.svelte";
-  import LoadRemoteSchemeData from "lib/browse/LoadRemoteSchemeData.svelte";
-  import SchemeCard from "lib/browse/SchemeCard.svelte";
   import "../style/main.css";
-  import InterventionLayer from "lib/browse/InterventionLayer.svelte";
-  import { schemes, schemesGj } from "lib/browse/stores";
+  import { controls } from "lib/browse/stores";
+  import { atfSchemesGj } from "lib/browse/schemes/stores";
   import {
     appVersion,
     Geocoder,
     Layout,
     LoggedIn,
+    Alpha,
     MapLibreMap,
-    Modal,
     ZoomOutMap,
     Header,
   } from "lib/common";
-  import { ErrorMessage, FileInput, SecondaryButton } from "govuk-svelte";
   import { map, mapStyle } from "stores";
   import { onMount } from "svelte";
   import { map as sketchMapStore } from "scheme-sketcher-lib/config";
@@ -31,93 +26,42 @@
 
   const params = new URLSearchParams(window.location.search);
   mapStyle.set(params.get("style") || "dataviz");
-  let errorMessage = "";
-
-  let schemesToBeShown: Set<string> = new Set();
-  let showSchemes = true;
-  let showSchemeNotes = false;
 
   // Need this for zordering to work
   $: if ($map) {
     sketchMapStore.set($map);
   }
 
-  function loadFile(filename: string, text: string) {
-    try {
-      schemesGj.set(JSON.parse(text));
-      schemes.set(processInput($schemesGj));
-      errorMessage = "";
-    } catch (err) {
-      errorMessage = `The file you loaded is broken: ${err}`;
-    }
+  let sidebarDiv: HTMLDivElement;
+  $: if (sidebarDiv && $controls) {
+    sidebarDiv.innerHTML = "";
+    sidebarDiv.appendChild($controls);
   }
 </script>
 
 <Layout>
   <div slot="sidebar" class="govuk-prose">
     <Header />
-    <div style="display: flex; justify-content: space-between">
-      <h1>Browse schemes</h1>
-      <ZoomOutMap boundaryGeojson={$schemesGj} />
+
+    <Alpha />
+    <div style="border-bottom: 1px solid #b1b4b6">
+      <LoggedIn />
+      <p>App version: {appVersion()}</p>
     </div>
-    <LoggedIn />
-    <p>App version: {appVersion()}</p>
-    {#if appVersion() == "Private (development)"}
-      <LoadRemoteSchemeData {loadFile} />
-    {/if}
-    {#if $schemesGj.notes}
-      <SecondaryButton on:click={() => (showSchemeNotes = true)}>
-        About the scheme data
-      </SecondaryButton>
-      <Modal title="About this scheme data" bind:open={showSchemeNotes}>
-        <div class="govuk-prose">
-          <p>Please note there are data quality caveats for all scheme data:</p>
-          <ul>
-            {#each $schemesGj.notes as note}
-              <li><p>{note}</p></li>
-            {/each}
-          </ul>
-        </div>
-      </Modal>
-    {/if}
-    <FileInput label="Load schemes from GeoJSON" onLoad={loadFile} />
-    <ErrorMessage {errorMessage} />
 
-    {#if $schemes.size > 0}
-      <Filters bind:schemesToBeShown bind:show={showSchemes} />
-    {/if}
+    <div style="display: flex; justify-content: space-between">
+      <h1>Scheme Browser</h1>
+      <ZoomOutMap boundaryGeojson={$atfSchemesGj} />
+    </div>
 
-    <ul>
-      {#each $schemes.values() as scheme}
-        {#if schemesToBeShown.has(scheme.scheme_reference)}
-          <SchemeCard {scheme} />
-        {/if}
-      {/each}
-    </ul>
+    <div bind:this={sidebarDiv} />
   </div>
   <div slot="main">
     <MapLibreMap style={$mapStyle} startBounds={[-5.96, 49.89, 2.31, 55.94]}>
       <Geocoder />
       {#if $sketchMapStore}
-        <InterventionLayer {showSchemes} />
-        <div class="top-right">
-          <LayerControls />
-        </div>
+        <LayerControls />
       {/if}
     </MapLibreMap>
   </div>
 </Layout>
-
-<style>
-  .top-right {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    background-color: white;
-    padding: 16px;
-    /* Leave room at the bottom for some of the map controls */
-    max-height: calc(100vh - 200px);
-    overflow: auto;
-    max-width: 450px;
-  }
-</style>
diff --git a/src/pages/ChooseArea.svelte b/src/pages/ChooseArea.svelte
index e5aab6726..9fb935905 100644
--- a/src/pages/ChooseArea.svelte
+++ b/src/pages/ChooseArea.svelte
@@ -2,15 +2,15 @@
   import type { Schema } from "types";
   import "../style/main.css";
   import type { FeatureCollection } from "geojson";
-  // @ts-ignore no declarations
+  // @ts-expect-error no declarations
   import { initAll } from "govuk-frontend";
   import {
     DefaultButton,
     ErrorMessage,
-    FormElement,
     FileInput,
     Radio,
     SecondaryButton,
+    AutocompleteTextInput,
   } from "govuk-svelte";
   import { onMount } from "svelte";
   import "maplibre-gl/dist/maplibre-gl.css";
@@ -19,6 +19,7 @@
     appVersion,
     getAuthoritiesGeoJson,
     LoggedIn,
+    Alpha,
     MapLibreMap,
     Popup,
     setLocalStorageItem,
@@ -45,7 +46,6 @@
   let uploadErrorMessage: string = "";
 
   let inputValue: string;
-  let dataList: HTMLDataListElement;
   let authoritySet: Set<string> = new Set();
   $: validEntry = authoritySet.has(inputValue);
 
@@ -57,10 +57,6 @@
 
     authoritiesGj = await getAuthoritiesGeoJson();
     for (let feature of authoritiesGj.features) {
-      let option = document.createElement("option");
-      option.value = feature.properties.full_name;
-      option.label = `${feature.properties.name} (${feature.properties.level})`;
-      dataList.appendChild(option);
       authoritySet.add(feature.properties.full_name);
     }
   });
@@ -120,30 +116,34 @@
 </script>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-one-half">
+  <div class="govuk-grid-column-one-half govuk-prose">
     <Header />
 
     <div class="left">
-      <LoggedIn />
-      <p>App version: {appVersion()}</p>
+      <Alpha />
+      <div style="border-bottom: 1px solid #b1b4b6">
+        <LoggedIn />
+        <p>App version: {appVersion()}</p>
+      </div>
+
+      <h1>Scheme Sketcher</h1>
+
       <SecondaryButton on:click={() => (showAbout = !showAbout)}>
         About
       </SecondaryButton>
       <ErrorMessage errorMessage={pageErrorMessage} />
 
-      <FormElement
-        label="Select Transport Authority or Local Authority District"
-        id="inputValue"
-      >
-        <input
-          class="govuk-input govuk-input--width-20"
-          id="inputValue"
-          data-testid="transport-authority"
-          list="authorities-list"
+      {#if authoritiesGj.features.length > 0}
+        <AutocompleteTextInput
+          label="Select Transport Authority or Local Authority District"
           bind:value={inputValue}
+          options={authoritiesGj.features.map((f) => [
+            f.properties.full_name,
+            `${f.properties.name} (${f.properties.level})`,
+          ])}
         />
-        <datalist id="authorities-list" bind:this={dataList} />
-      </FormElement>
+      {/if}
+
       <DefaultButton on:click={start} disabled={!validEntry}>
         Start
       </DefaultButton>
diff --git a/src/pages/SketchSchemes.svelte b/src/pages/SketchSchemes.svelte
index c86cfbb88..e33885ba1 100644
--- a/src/pages/SketchSchemes.svelte
+++ b/src/pages/SketchSchemes.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  // @ts-ignore no declarations
+  // @ts-expect-error no declarations
   import { initAll } from "govuk-frontend";
   import "../style/main.css";
   import type { AuthorityBoundaries } from "boundaries";
@@ -18,6 +18,7 @@
     Geocoder,
     getAuthoritiesGeoJson,
     LoggedIn,
+    Alpha,
     MapLibreMap,
     ZoomOutMap,
     Header,
@@ -107,8 +108,12 @@
     <Header />
 
     {#if $mode.mode == "list"}
-      <LoggedIn />
-      <p>App version: {appVersion()}</p>
+      <Alpha />
+      <div style="border-bottom: 1px solid #b1b4b6">
+        <LoggedIn />
+        <p>App version: {appVersion()}</p>
+      </div>
+
       <div style="display: flex; justify-content: space-between">
         <p>{authorityDescription()}</p>
         <a href={`index.html?schema=${$schema}`}>Change area</a>
diff --git a/src/scripts/random_schemes.ts b/src/scripts/random_schemes.ts
index 789400c5b..02809bb1e 100644
--- a/src/scripts/random_schemes.ts
+++ b/src/scripts/random_schemes.ts
@@ -69,7 +69,7 @@ function main() {
         "Repair damaged surface",
       ]);
     }
-    // @ts-ignore ts being overzealous, it's okay to have properties in our features
+    // @ts-expect-error ts being overzealous, it's okay to have properties in our features
     gj.features.push(pt);
 
     let route = makeLineString(authority.geometry);
@@ -83,7 +83,7 @@ function main() {
       "Shared use with segregation",
       "Stepped cycle-track on the north side only",
     ]);
-    // @ts-ignore ts being overzealous, it's okay to have properties in our features
+    // @ts-expect-error ts being overzealous, it's okay to have properties in our features
     gj.features.push(route);
 
     let area = makePolygon(authority.geometry);
@@ -94,7 +94,7 @@ function main() {
       "Lighting improvements",
       "New cycle hangars",
     ]);
-    // @ts-ignore ts being overzealous, it's okay to have properties in our features
+    // @ts-expect-error ts being overzealous, it's okay to have properties in our features
     gj.features.push(area);
   }
 
diff --git a/src/stores.ts b/src/stores.ts
index 51d65bc21..72da5e170 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -8,7 +8,7 @@ import { type Schema } from "./types";
 export const schema: Writable<Schema> = writable(defaultSchema());
 
 // A global singleton, containing a loaded map
-// @ts-ignore TODO By construction, no components using the store should be
+// @ts-expect-error TODO By construction, no components using the store should be
 // mounted before this is populated.
 export const map: Writable<Map> = writable(null);
 
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
index 6b7df7bfb..44b039a5f 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -5,7 +5,7 @@ test("choosing a local authority and clicking start changes the url", async ({
 }) => {
   await page.goto("/");
   await page
-    .getByTestId("transport-authority")
+    .getByLabel("Select Transport Authority or Local Authority District")
     .fill("TA_West Yorkshire Combined Authority");
   await page.getByRole("button", { name: "Start" }).click();
   await expect(page).toHaveURL(
@@ -26,7 +26,9 @@ test("Uploading a valid atip geojson redirects to the appropriate authority sche
 
 test("schema is plumbed along to the sketch page", async ({ page }) => {
   await page.goto("/index.html?schema=pipeline");
-  await page.getByTestId("transport-authority").fill("LAD_Adur");
+  await page
+    .getByLabel("Select Transport Authority or Local Authority District")
+    .fill("LAD_Adur");
   await page.getByRole("button", { name: "Start" }).click();
   await expect(page).toHaveURL(
     /.*scheme.html\?authority=LAD_Adur&schema=pipeline/,