diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
index 6ec4b9857..f8515e554 100644
--- a/hub/static/js/explore.esm.js
+++ b/hub/static/js/explore.esm.js
@@ -25,16 +25,20 @@ const app = createApp({
       area_type_changed: false, // so we know to reload the map
       area_types: [{
         slug: "WMC",
-        label: "Current constituencies"
+        label: "Current constituencies",
+        description: "This is the constituency currently represented by an MP in UK Parliament."
       }, {
         slug: "WMC23",
-        label: "Future constituencies"
+        label: "Future constituencies",
+        description: "This is the constituency in which parliamentary candidates will soon be standing for election."
       }, {
         slug: "STC",
-        label: "Single Tier councils"
+        label: "Single Tier councils",
+        description: "The local authority has powers over local services like education, planning, and transport."
       }, {
         slug: "DIS",
-        label: "District councils"
+        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"
       }],
       area_header_label: "constituencies",
 
diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
index c7253feeb..e6d6e03e4 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -19,7 +19,7 @@ <h1 class="h2 mb-3">Explore</h1>
 
             <p>Use data from The Climate Coalition, its member organisations, and the wider sector, to narrow down your focus to the constituencies that matter to you.</p>
 
-            <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output format</h2>
+            <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Select an output format</h2>
 
             <ul class="nav nav-tabs mx-n4 mx-lg-n5 px-4 px-lg-5" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
@@ -33,14 +33,54 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output f
 
         <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>
+
+                <!-- 
                 <label for="area_type" class="form-label text-muted">Constituency generation</label>
-                <p class="from-text fs-7">Parliamentary boundaries are changing at the next election. You can search by either the current or future constituencies. Some datasets have been <a href="{% url 'future_constituencies' %}" target="_blank" title="Opens in a new tab">automatically converted</a> to future constituencies.</p>
+                -->
+
+                <!--
                 <select id="area_type" class="form-select form-select-lg" v-model="area_type" @change="changeAreaType()">
                     <option v-for="t in area_types" :value="t['slug']">${ t.label }</option>
                 </select>
+                -->
+
+                <button type="button" class="btn btn-outline-secondary p-3 w-100 position-relative text-start" data-bs-toggle="modal" data-bs-target="#areaType">
+
+                    <p class="mb-1">Current constituencies</p>
+                    <small>These constituencies are the areas which MPs currently represent in UK Parliament.</small>
+                    <!--
+                    <small>This is the constituency in which parliamentary candidates will soon be standing for election.</small>
+                    -->
+                </button>
+
+                <div class="modal fade" id="areaType" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true">
+                    <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                        <h5 class="modal-title" id="areaTypeLabel">Select area</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()">
+                                        <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">
+                                            ${ t.description }
+                                        </small>
+                                      </button>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
             </div>
 
-            <h2 class="h5 mb-4 text-primary">Step 2: Filter constituencies</h2>
+            <h2 class="h5 mb-4 text-primary">Filter constituencies</h2>
 
             <div ref="filtersContainer" class="mb-4" hidden>
                 <template v-for="filter in filters">
@@ -122,7 +162,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">Step 3: Shade constituencies (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade constituencies (optional)</h2>
 
                     <div ref="shaderContainer" hidden>
                         <div v-if="shader" class="filter mb-0" :class="{ 'bg-red-100': !shader.areas_available.includes(area_type) }">
@@ -162,7 +202,7 @@ <h3 class="h6">${ shader.title }</h3>
                 </div>
                 <div class="tab-pane" :class="{ 'active': tableViewActive }" id="options-table" role="tabpanel" aria-labelledby="tab-table" tabindex="0">
 
-                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Add extra columns (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Add extra columns (optional)</h2>
 
                     <div ref="columnContainer" class="mb-4" hidden>
                     <template v-for="column in columns">