diff --git a/locale/en/LC_MESSAGES/messages.po b/locale/en/LC_MESSAGES/messages.po
index 34ad8c485..fab76819a 100644
--- a/locale/en/LC_MESSAGES/messages.po
+++ b/locale/en/LC_MESSAGES/messages.po
@@ -485,6 +485,18 @@ msgstr ""
 msgid "Display Tiles of"
 msgstr ""
 
+#: pygeoapi/templates/collections/collection.html:92
+msgid "Coverages"
+msgstr ""
+
+#: pygeoapi/templates/collections/collection.html:96
+msgid "Display Coverage"
+msgstr ""
+
+#: pygeoapi/templates/collections/collection.html:97
+msgid "Display Coverage of"
+msgstr ""
+
 #: pygeoapi/templates/collections/index.html:13
 msgid "Type"
 msgstr ""
diff --git a/pygeoapi/api/collection.py b/pygeoapi/api/collection.py
index 3b1f24922..2cd8b3ea6 100644
--- a/pygeoapi/api/collection.py
+++ b/pygeoapi/api/collection.py
@@ -228,13 +228,7 @@ def gen_collection(api, request, dataset: str,
             'rel': f'{OGC_RELTYPES_BASE}/schema',
             'title': l10n.translate('Schema of collection in HTML', locale_),
             'href': f'{api.get_collections_url()}/{dataset}/schema?f={F_HTML}'
-        }])
-
-    if is_vector_tile or collection_data_type in ['feature', 'record']:
-        # TODO: translate
-        data['itemType'] = collection_data_type
-        LOGGER.debug('Adding feature/record based links')
-        data['links'].extend([{
+        }, {
             'type': 'application/schema+json',
             'rel': f'{OGC_RELTYPES_BASE}/queryables',
             'title': l10n.translate('Queryables for this collection as JSON', locale_),  # noqa
@@ -244,7 +238,13 @@ def gen_collection(api, request, dataset: str,
             'rel': f'{OGC_RELTYPES_BASE}/queryables',
             'title': l10n.translate('Queryables for this collection as HTML', locale_),  # noqa
             'href': f'{api.get_collections_url()}/{dataset}/queryables?f={F_HTML}'  # noqa
-        }, {
+        }])
+
+    if is_vector_tile or collection_data_type in ['feature', 'record']:
+        # TODO: translate
+        LOGGER.debug('Adding feature/record based links')
+        data['itemType'] = collection_data_type
+        data['links'].extend([{
             'type': 'application/geo+json',
             'rel': 'items',
             'title': l10n.translate('Items as GeoJSON', locale_),
@@ -278,12 +278,17 @@ def gen_collection(api, request, dataset: str,
 
     elif collection_data_type == 'coverage':
         LOGGER.debug('Adding coverage based links')
-        data['links'].append({
+        data['links'].extend([{
             'type': 'application/prs.coverage+json',
             'rel': f'{OGC_RELTYPES_BASE}/coverage',
             'title': l10n.translate('Coverage data', locale_),
             'href': f'{api.get_collections_url()}/{dataset}/coverage?f={F_JSON}'  # noqa
-        })
+        }, {
+            'type': 'text/html',
+            'rel': f'{OGC_RELTYPES_BASE}/coverage',
+            'title': l10n.translate('Coverage data', locale_),
+            'href': f'{api.get_collections_url()}/{dataset}/coverage?f={F_HTML}'  # noqa
+        }])
         if collection_data_format is not None:
             title_ = l10n.translate('Coverage data as', locale_)
             title_ = f"{title_} {collection_data_format['name']}"
diff --git a/pygeoapi/api/coverages.py b/pygeoapi/api/coverages.py
index 67755407d..2564071e8 100644
--- a/pygeoapi/api/coverages.py
+++ b/pygeoapi/api/coverages.py
@@ -41,14 +41,15 @@
 import logging
 from http import HTTPStatus
 from typing import Tuple
+import urllib
 
 from pygeoapi import l10n
-from pygeoapi.formats import F_JSON
+from pygeoapi.formats import F_JSON, F_COVERAGEJSON, F_HTML
 from pygeoapi.openapi import get_oas_30_parameters
 from pygeoapi.plugin import load_plugin
 from pygeoapi.provider.base import ProviderGenericError, ProviderTypeError
 from pygeoapi.provider import get_provider_by_type
-from pygeoapi.util import filter_dict_by_key_value, to_json
+from pygeoapi.util import filter_dict_by_key_value, to_json, render_j2_template
 
 from . import (
     APIRequest, API, SYSTEM_LOCALE, validate_bbox, validate_datetime,
@@ -86,6 +87,8 @@ def get_collection_coverage(
 
     # Force response content type and language (en-US only) headers
     headers = request.get_response_headers(SYSTEM_LOCALE, **api.api_headers)
+    collections = filter_dict_by_key_value(api.config['resources'],
+                                           'type', 'collection')
 
     LOGGER.debug('Loading provider')
     try:
@@ -142,6 +145,10 @@ def get_collection_coverage(
     query_args['datetime_'] = datetime_
     query_args['format_'] = format_
 
+    if request.format == F_HTML:
+        # Request as JSON to render HTML
+        query_args['format_'] = F_COVERAGEJSON
+
     properties = request.params.get('properties')
     if properties:
         LOGGER.debug('Processing properties parameter')
@@ -191,6 +198,39 @@ def get_collection_coverage(
 
         headers['Content-Type'] = collection_def['format']['mimetype']
         return headers, HTTPStatus.OK, data
+    elif format_ == F_HTML:  # render
+        tpl_config = api.get_dataset_templates(dataset)
+
+        uri = f'{api.get_collections_url()}/{dataset}/coverage'
+        serialized_query_params = ''
+        for k, v in request.params.items():
+            if k != 'f':
+                serialized_query_params += '&'
+                serialized_query_params += urllib.parse.quote(k, safe='')
+                serialized_query_params += '='
+                serialized_query_params += urllib.parse.quote(str(v), safe=',')
+
+        data['query_path'] = uri
+        data['dataset_path'] = '/'.join(uri.split('/')[:-1])
+        data['collections_path'] = api.get_collections_url()
+
+        data['links'] = [{
+            'rel': 'collection',
+            'title': collections[dataset]['title'],
+            'href': data['dataset_path']
+        }, {
+            'type': 'application/vnd.cov+json',
+            'rel': request.get_linkrel(F_COVERAGEJSON),
+            'title': l10n.translate('This document as CoverageJSON', request.locale),  # noqa
+            'href': f'{uri}?f={F_COVERAGEJSON}{serialized_query_params}'
+        }]
+
+        content = render_j2_template(api.tpl_config, tpl_config,
+                                     'collections/coverage/index.html',
+                                     data, api.default_locale)
+
+        return headers, HTTPStatus.OK, content
+
     elif format_ == F_JSON:
         headers['Content-Type'] = 'application/prs.coverage+json'
         return headers, HTTPStatus.OK, to_json(data, api.pretty_print)
diff --git a/pygeoapi/templates/collections/collection.html b/pygeoapi/templates/collections/collection.html
index 2b3904dcc..4cfbfca0b 100644
--- a/pygeoapi/templates/collections/collection.html
+++ b/pygeoapi/templates/collections/collection.html
@@ -74,20 +74,40 @@ <h3>{% trans %}Schema{% endtrans %}</h3>
               {% trans %}Display Schema of{% endtrans %} "{{ data['title'] }}"</a></div>
         </li>
       </ul>
+      {% endif %}
+
       {% for provider in config['resources'][data['id']]['providers'] %}
         {% if 'tile' in provider['type'] %}
-      <h3>{% trans %}Tiles{% endtrans %}</h3>
-      <ul>
-        <li>
-          <div>
-            <a title="{% trans %}Display Tiles{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/tiles">{% trans %}Display Tiles of{% endtrans %} "{{ data['title'] }}"</a>
-          </div>
-        </li>
-      </ul>
+          <h3>{% trans %}Tiles{% endtrans %}</h3>
+          <ul>
+            <li>
+              <div>
+                <a title="{% trans %}Display Tiles{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/tiles">{% trans %}Display Tiles of{% endtrans %} "{{ data['title'] }}"</a>
+              </div>
+            </li>
+          </ul> 
+        {% endif  %}
+
+        {% if 'coverage' in provider['type'] %}
+        <h3>{% trans %}Coverage{% endtrans %}</h3>
+        <ul>
+          <li>
+            <div>
+              <a title="{% trans %}Display Coverage{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/coverage">
+                {% trans %}Display Coverage of{% endtrans %} "{{ data['title'] }}"</a></div>
+          </li>
+        </ul>
+        <h3>{% trans %}Schema{% endtrans %}</h3>
+        <ul>
+          <li>
+            <div>
+              <a title="{% trans %}Display Schema{% endtrans %}" href="{{ data['collections_path'] }}/{{ data['id'] }}/schema">
+                {% trans %}Display Schema of{% endtrans %} "{{ data['title'] }}"</a></div>
+          </li>
+        </ul>
         {% endif %}
-      {% endfor %}
-      {% endif  %}
 
+      {% endfor %}
       {%- if data['data_queries'] -%}
         <h3>Data Queries</h3>
         <table class="table table-striped table-bordered">
diff --git a/pygeoapi/templates/collections/coverage/index.html b/pygeoapi/templates/collections/coverage/index.html
new file mode 100644
index 000000000..59cc2afc4
--- /dev/null
+++ b/pygeoapi/templates/collections/coverage/index.html
@@ -0,0 +1,271 @@
+{% extends "_base.html" %}
+{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
+{% block crumbs %}{{ super() }}
+/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
+{% for link in data['links'] %}
+  {% if link.rel == 'collection' %} /
+    <a href="{{ data['dataset_path'] }}">{{ link['title'] | truncate( 25 ) }}</a>
+    {% set col_title = link['title'] %}
+  {% endif %}
+{% endfor %}
+/ <a href="{{ data['query_path']}}">{% trans query_type=data.query_type %}Coverage{% endtrans %}</a>
+{% endblock %}
+{% block extrahead %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet-coverage@0.7/leaflet-coverage.css">
+    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
+    {% if data.type == "Coverage" or data.type == "CoverageCollection" %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.css">
+    <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.js"></script>
+    <script src="https://unpkg.com/covutils@0.6/covutils.min.js"></script>
+    <script src="https://unpkg.com/covjson-reader@0.16/covjson-reader.src.js"></script>
+    <script src="https://unpkg.com/leaflet-coverage@0.7/leaflet-coverage.min.js"></script>
+    {% elif data.type == "Feature" or data.type == "FeatureCollection" %}
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
+    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
+    {% endif %}
+{% endblock %}
+
+{% block body %}
+  <section id="coverage">
+    {% if data.features or data.coverages or data.ranges or data.references %}
+    <div id="coverages-map"></div>
+    {% else %}
+    <div class="row col-sm-12">
+        <p>{% trans %}No items{% endtrans %}</p>
+    </div>
+    {% endif %}
+  </section>
+{% endblock %}
+
+{% block extrafoot %}
+{% if data %}
+    <script>
+    var map = L.map('coverages-map').setView([40, -85], 3);
+    var baseLayers = {
+      'Map': new L.TileLayer(
+        '{{ config['server']['map']['url'] }}', {
+            maxZoom: 18,
+            attribution: '{{ config['server']['map']['attribution'] | safe }}'
+          }).addTo(map)
+    }
+
+    {% if data.type == "Coverage" or data.type == "CoverageCollection" %}
+    let layerControl = L.control.layers(baseLayers, {}, {collapsed: false}).addTo(map)
+    let layersInControl = new Set()
+    let coverageLayersOnMap = new Set()
+    let paramSync = new C.ParameterSync({
+      syncProperties: {
+        palette: (p1, p2) => p1,
+        paletteExtent: (e1, e2) => e1 && e2 ? [Math.min(e1[0], e2[0]), Math.max(e1[1], e2[1])] : null
+      }
+    }).on('parameterAdd', e => {
+        // The virtual sync layer proxies the synced palette, paletteExtent, and parameter.
+        // The sync layer will fire a 'remove' event if all real layers for that parameter were removed.
+        let layer = e.syncLayer
+        if (layer.palette) {
+          C.legend(layer, {
+            position: 'bottomright'
+          }).addTo(map)
+        }
+      })
+
+    var covjson_data = {{ data | to_json | safe }};
+    displayCovJSON(covjson_data, {display: true})
+
+    const truncateString = (str, maxLength) => {
+      str = str.replace(/\+/g, ' ');
+      return str.length > maxLength ? `${str.slice(0, maxLength - 3)}...` : str;
+    };
+
+    function displayCovJSON(obj, options = {}) {
+      map.fire('dataloading');
+      var layer = CovJSON.read(obj)
+        .then(cov => {
+          if (CovUtils.isDomain(cov)) {
+            cov = CovUtils.fromDomain(cov);
+          }
+
+          map.fire('dataload');
+
+          // add each parameter as a layer
+          let firstLayer;
+
+          let layerClazz = C.dataLayerClass(cov);
+
+          if (cov.coverages && !layerClazz) {
+            // generic collection
+            if (!cov.parameters) {
+              throw new Error('only coverage collections with a "parameters" property are supported');
+            }
+
+            for (let key of cov.parameters.keys()) {
+              let layers = cov.coverages
+                .filter(coverage => coverage.parameters.has(key))
+                .map(coverage => createLayer(coverage, { keys: [key] }));
+              layers.forEach(layer => map.fire('covlayercreate', { layer }));
+              let layerGroup = L.layerGroup(layers);
+              layersInControl.add(layerGroup);
+              layerControl.addOverlay(layerGroup, truncateString(key, 50));
+              if (!firstLayer) {
+                firstLayer = layerGroup;
+                // the following piece of code should be easier
+                // TODO extend layer group class in leaflet-coverage (like PointCollection) to provide single 'add' event
+                let addCount = 0;
+                for (let l of layers) {
+                  l.on('afterAdd', () => {
+                    coverageLayersOnMap.add(l);
+                    ++addCount;
+                    if (addCount === layers.length) {
+                      zoomToLayers(layers);
+                      // FIXME is this the right place?? define event semantics!
+                      map.fire('covlayeradd', { layer: l });
+                    }
+                  });
+                }
+              }
+            }
+          } else if (layerClazz) {
+            // single coverage or a coverage collection of a specific domain type
+            for (let key of cov.parameters.keys()) {
+              let opts = { keys: [key] };
+              let layer = createLayer(cov, opts);
+              map.fire('covlayercreate', { layer });
+              layersInControl.add(layer);
+
+              layerControl.addOverlay(layer, truncateString(key, 50));
+              if (!firstLayer) {
+                firstLayer = layer;
+                layer.on('afterAdd', () => {
+                  zoomToLayers([layer])
+                  if (!cov.coverages) {
+                    if (isVerticalProfile(cov) || isTimeSeries(cov)) {
+                      layer.openPopup();
+                    }
+                  }
+                });
+              }
+              layer.on('afterAdd', () => {
+                coverageLayersOnMap.add(layer);
+                map.fire('covlayeradd', { layer });
+              });
+            }
+          } else {
+            throw new Error('unsupported or missing domain type');
+          }
+          if (options.display && firstLayer) {
+            map.addLayer(firstLayer);
+          }
+        })
+        .catch(e => {
+          map.fire('dataload');
+          console.log(e);
+        });
+    }
+
+    function createLayer(cov, opts) {
+      let layer = C.dataLayer(cov, opts).on('afterAdd', e => {
+        let covLayer = e.target
+                
+        // This registers the layer with the sync manager.
+        // By doing that, the palette and extent get unified (if existing)
+        // and an event gets fired if a new parameter was added.
+        // See the code above where ParameterSync gets instantiated.
+        paramSync.addLayer(covLayer)
+        
+        if (!cov.coverages) {
+          if (covLayer.time) {
+            new C.TimeAxis(covLayer).addTo(map)
+          }
+          if (covLayer.vertical) {
+            new C.VerticalAxis(covLayer).addTo(map)
+          }
+        }
+      }).on('dataLoad', () => map.fire('dataload'))
+        .on('dataLoading', () => map.fire('dataloading'))
+        .on('error', e => map.fire('error', { error: e.error }))
+      layer.on('axisChange', () => {
+        layer.paletteExtent = 'subset'
+      })
+      
+      if (cov.coverages) {
+        if (isVerticalProfile(cov)) {
+          layer.bindPopupEach(coverage => new C.VerticalProfilePlot(coverage))
+        } else if (isTimeSeries(cov)) {
+          layer.bindPopupEach(coverage => new C.TimeSeriesPlot(coverage))
+        }
+      } else {
+        if (isVerticalProfile(cov)) {
+          layer.bindPopup(new C.VerticalProfilePlot(cov))
+        } else if (isTimeSeries(cov)) {
+          layer.bindPopup(new C.TimeSeriesPlot(cov))
+        }
+      }
+        
+      return layer
+    }
+
+    function zoomToLayers (layers) {
+      let bnds = layers.map(l => l.getBounds())
+      let bounds = L.latLngBounds(bnds)
+      let opts = {
+        padding: L.point(10, 10)
+      }
+      if (bounds.getWest() === bounds.getEast() && bounds.getSouth() === bounds.getNorth()) {
+        opts.maxZoom = 5
+      } 
+      map.fitBounds(bounds, opts)
+    }
+
+    function isVerticalProfile (cov) {
+      return cov.domainType === C.COVJSON_VERTICALPROFILE
+    }
+
+    function isTimeSeries (cov) {
+      return cov.domainType === C.COVJSON_POINTSERIES || cov.domainType === C.COVJSON_POLYGONSERIES
+    }
+    window.api = {
+      map,
+      layers: coverageLayersOnMap
+    }
+
+    // Wire up coverage value popup
+    let valuePopup = new C.DraggableValuePopup({
+      className: 'leaflet-popup-draggable',
+      layers: [...coverageLayersOnMap]
+    })
+
+    function closeValuePopup () {
+      if (map.hasLayer(valuePopup)) {
+        map.closePopup(valuePopup)
+      }
+    }
+
+    // click event needed for Grid layer (can't use bindPopup there)
+    map.on('singleclick', e => {
+      valuePopup.setLatLng(e.latlng).openOn(map)
+    })
+    map.on('covlayercreate', e => {
+      // some layers already have a plot popup bound to it, ignore those
+      if (!e.layer.getPopup()) {
+        e.layer.bindPopup(valuePopup)
+      }
+    })
+    map.on('covlayeradd', e => {
+      valuePopup.addCoverageLayer(e.layer)
+    })
+    map.on('covlayerremove', e => {
+      valuePopup.removeCoverageLayer(e.layer)
+    })
+
+    map.on('error', e => {
+      if (e.error?.message) {
+        editor.setError(e.error.message)
+      }
+    })
+    {% endif %}
+</script>
+{% endif %}
+{% endblock %}
diff --git a/tests/api/test_coverages.py b/tests/api/test_coverages.py
index bea6ac612..0ea2372ad 100644
--- a/tests/api/test_coverages.py
+++ b/tests/api/test_coverages.py
@@ -57,7 +57,7 @@ def test_describe_collections(config, api_):
     collection = json.loads(response)
 
     assert collection['id'] == 'gdps-temperature'
-    assert len(collection['links']) == 10
+    assert len(collection['links']) == 13
     assert collection['extent']['spatial']['grid'][0]['cellsCount'] == 2400
     assert collection['extent']['spatial']['grid'][0]['resolution'] == 0.15000000000000002  # noqa
     assert collection['extent']['spatial']['grid'][1]['cellsCount'] == 1201
@@ -122,17 +122,14 @@ def test_get_collection_coverage(config, api_):
     rsp_headers, code, response = get_collection_coverage(
         api_, req, 'gdps-temperature')
 
-    assert code == HTTPStatus.BAD_REQUEST
+    assert code == HTTPStatus.OK
     assert rsp_headers['Content-Type'] == 'text/html'
 
     req = mock_api_request(HTTP_ACCEPT='text/html')
     rsp_headers, code, response = get_collection_coverage(
         api_, req, 'gdps-temperature')
 
-    # NOTE: This test used to assert the code to be 200 OK,
-    #       but it requested HTML, which is not available,
-    #       so it should be 400 Bad Request
-    assert code == HTTPStatus.BAD_REQUEST
+    assert code == HTTPStatus.OK
     assert rsp_headers['Content-Type'] == 'text/html'
 
     req = mock_api_request({'subset': 'Lat(5:10),Long(5:10)'})