diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
index e8f354185..28bdffbe3 100644
--- a/hub/templates/hub/explore.html
+++ b/hub/templates/hub/explore.html
@@ -38,7 +38,8 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output f
             <h2 class="h5 mt-4 mt-lg-5 mb-4 text-primary">Step 2: Filter constituencies</h2>
 
             <div ref="filtersContainer" class="mb-4" hidden>
-                <div v-for="filter in filters" class="bg-gray-100 border p-3 rounded filter">
+                <template v-for="filter in filters">
+                    <div class="border p-3 rounded filter" :class="{ 'bg-gray-100': filter.areas_available.includes(area_type), 'bg-red-100': !filter.areas_available.includes(area_type) }">
                     <div class="filter__header">
                         <h3 class="h6">${ filter.title }</h3>
                         <button @click="removeFilter(filter.name)" type="button" class="btn-close p-0" aria-label="Remove filter"></button>
@@ -86,6 +87,7 @@ <h3 class="h6">${ filter.title }</h3>
                         </table>
                     </details>
                 </div>
+                </template>
             </div>
 
             <button @click="selectFilter" type="button" class="btn btn-outline-secondary p-3 w-100">
diff --git a/hub/views/explore.py b/hub/views/explore.py
index cda60880d..b90c62d5d 100644
--- a/hub/views/explore.py
+++ b/hub/views/explore.py
@@ -70,6 +70,7 @@ def render_to_response(self, context, **response_kwargs):
                 is_in=True if d.comparators[0]["field_lookup"] == "in" else False,
                 is_range=d.is_range,
                 data_type=d.data_type,
+                areas_available=[t.code for t in d.areas_available.all()],
             )
             if d.release_date is not None:
                 ds["release_date"] = d.release_date