diff --git a/hub/static/css/_explore.scss b/hub/static/css/_explore.scss
index ac76303c0..df017119f 100644
--- a/hub/static/css/_explore.scss
+++ b/hub/static/css/_explore.scss
@@ -48,13 +48,16 @@ $osm-sea-blue: rgb(168, 212, 243);
     background: $osm-sea-blue;
 }
 
-.explore-modal {
+.dataset-modal {
     // Full-width modal, even on large screens.
     .modal-dialog {
         margin: var(--#{$prefix}modal-margin);
         max-width: none;
     }
+}
 
+.dataset-modal,
+.area-type-modal {
     .list-group {
         --#{$prefix}list-group-item-padding-y: 0.75em;
     }
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
index 64918516a..0b2ad244d 100644
--- a/hub/static/js/explore.esm.js
+++ b/hub/static/js/explore.esm.js
@@ -26,21 +26,24 @@ const app = createApp({
       area_types: [{
         slug: "WMC",
         label: "Current constituencies",
-        description: "This is the constituency currently represented by an MP in UK Parliament."
+        short_label: "constituencies",
+        description: "These are the constituencies currently represented by MPs in UK Parliament."
       }, {
         slug: "WMC23",
         label: "Future constituencies",
-        description: "This is the constituency in which parliamentary candidates will soon be standing for election."
+        short_label: "constituencies",
+        description: "These are the constituencies in which parliamentary candidates will soon be standing for election."
       }, {
         slug: "STC",
         label: "Single Tier councils",
-        description: "The local authority has powers over local services like education, planning, and transport."
+        short_label: "councils",
+        description: "Includes county councils, London boroughs, unitary authorities, and metropolitain districts."
       }, {
         slug: "DIS",
         label: "District councils",
-        description: "A district council has certain exclusive responsibilities (e.g. housing and local planning) and shares others (e.g. recreation, town and country planning) with the council of the county to which the district belongs"
+        short_label: "councils",
+        description: "Some places are served by both a county council, and one of these district councils, which handle local services like rubbish collection and planning applications."
       }],
-      area_header_label: "constituencies",
 
       filters_applied: false, // were filters applied on the last Update?
       area_count: 0, // number of areas returned on last Update
@@ -494,11 +497,6 @@ const app = createApp({
           });
 
           this.area_count = Object.keys(features).length
-          if (["DIS", "STC"].includes(this.area_type)) {
-            this.area_header_label = "councils"
-          } else {
-            this.area_header_label = "constituencies"
-          }
 
           window.geojson.eachLayer(function (layer) {
             if ( features[layer.feature.properties.PCON13CD] ) {
diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
index 69c6b9b0e..514da481b 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -33,15 +33,15 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Select an output format</h
 
         <div class="p-4 p-lg-5">
             <div class="mb-4 mb-lg-5" v-cloak>
-                <h2 class="h5 mt-2 mt-lg-3 mb-3 mb-lg-4 text-primary">Select an area type</h2>
+                <h2 class="h5 mb-3 mb-lg-4 text-primary">Select an area type</h2>
                 <button type="button" class="btn btn-outline-secondary p-3 pe-5 w-100 position-relative text-start" @click="selectAreaType">
-                    <p class="mb-1">${ getAreaType(area_type)["label"] }</p>
-                    <small>${ getAreaType(area_type)["description"] }</small>
+                    <p class="mb-2 lh-sm">${ getAreaType(area_type)["label"] }</p>
+                    <small class="d-block fw-normal">${ getAreaType(area_type)["description"] }</small>
                     {% include "hub/includes/icons/select.html" with classes="position-absolute top-50 start-95 translate-middle" %}
                 </button>
             </div>
 
-            <h2 class="h5 mb-4 text-primary">Filter constituencies</h2>
+            <h2 class="h5 mb-4 text-primary">Filter ${ getAreaType(area_type)["short_label"] }</h2>
 
             <div ref="filtersContainer" class="mb-4" hidden>
                 <template v-for="filter in filters">
@@ -123,7 +123,7 @@ <h3 class="h6">${ filter.title }</h3>
             <div class="tab-content">
                 <div class="tab-pane" :class="{ 'active': mapViewActive }" id="options-map" role="tabpanel" aria-labelledby="tab-map" tabindex="0">
 
-                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade constituencies (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade ${ getAreaType(area_type)["short_label"] } (optional)</h2>
 
                     <div ref="shaderContainer" hidden>
                         <div v-if="shader" class="filter mb-0" :class="{ 'bg-red-100': !shader.areas_available.includes(area_type) }">
@@ -214,16 +214,16 @@ <h3 class="h6 mb-0 me-auto">${ column.title }</h3>
             </template>
             <template v-else-if="filters_applied && area_count == 0">
                 {% include 'hub/includes/icons/exclamation.html' with classes="flex-grow-0 me-2" %}
-                No matching ${ area_header_label }
+                No matching ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else-if="filters_applied">
-                ${ area_count } matching ${ area_header_label }
+                ${ area_count } matching ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else-if="area_count">
-                ${ area_count } ${ area_header_label }
+                ${ area_count } ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else>
-                No ${ area_header_label }
+                No ${ getAreaType(area_type)["short_label"] }
             </template>
         </div>
         <div class="explore-map" ref="map" :hidden="!mapViewActive"></div>
diff --git a/hub/templates/hub/includes/add-data-modal.html b/hub/templates/hub/includes/add-data-modal.html
index 6ddb7ab3a..5d8d627fc 100644
--- a/hub/templates/hub/includes/add-data-modal.html
+++ b/hub/templates/hub/includes/add-data-modal.html
@@ -1,4 +1,4 @@
-<div class="modal fade explore-modal" tabindex="-1" ref="datasetModal">
+<div class="modal fade dataset-modal" tabindex="-1" ref="datasetModal">
     <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content h-100 overflow-hidden shadow-lg">
             <div class="modal-header">
diff --git a/hub/templates/hub/includes/area-type-modal.html b/hub/templates/hub/includes/area-type-modal.html
index a8a036681..23aa20bcc 100644
--- a/hub/templates/hub/includes/area-type-modal.html
+++ b/hub/templates/hub/includes/area-type-modal.html
@@ -1,24 +1,22 @@
-<div class="modal fade" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true" ref="areaTypeModal">
-    <div class="modal-dialog">
-    <div class="modal-content">
-        <div class="modal-header">
-        <h5 class="modal-title" id="areaTypeLabel">Select area type</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-            <div class="list-group">
-                <template v-for="t in area_types">
-                    <button class="list-group-item list-group-item-action" @click="changeAreaType(t.slug)">
+<div class="modal fade area-type-modal" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true" ref="areaTypeModal">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content overflow-hidden shadow-lg">
+            <div class="modal-header">
+                <h5 class="modal-title" id="areaTypeLabel">Select area type</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body bg-gray-100">
+                <div class="list-group">
+                    <button v-for="t in area_types" class="list-group-item list-group-item-action" @click="changeAreaType(t.slug)">
                         <div class="d-flex align-items-center mb-2">
                             <strong class="lh-sm me-auto pe-3">${ t.label }</strong>
                         </div>
-                        <small class="d-block fs-7 mb-2">
+                        <small class="d-block fs-7">
                             ${ t.description }
                         </small>
                     </button>
-                </template>
+                </div>
             </div>
         </div>
     </div>
-    </div>
 </div>