diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 907736ef..820b54c3 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -76,26 +76,8 @@ body.login header {
 .demo_map .map_fragment {
     height: var(--map-fragment-height);
 }
-.map_list .legend {
-    padding-top: 7px;
-    margin-bottom: 28px;
-    text-align: center;
-    font-size: 1.2em;
-}
-.map_list .legend a {
-    color: #222;
-    font-weight: bold;
-}
-.map_list .legend em,
-.map_list .legend em a {
-    color: #444;
-    font-weight: normal;
-}
-.map_list hr {
-    display: none;
-}
-.map_list .wide + hr {
-    display: block;
+.grid-container hgroup {
+    text-align: left;
 }
 .umap-features-list ul {
     margin-top: 14px;
@@ -189,7 +171,6 @@ h2.tabs a:hover {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--gutter) / 2 );
-    justify-content: center;
 }
 .tag-list li {
     border: 1px solid var(--color-darkBlue);
@@ -206,6 +187,27 @@ h2.tabs a:hover {
     text-overflow: ellipsis;
     vertical-align: middle;
 }
+.card {
+    border: 1px solid var(--color-lightGray);
+    border-radius: var(--border-radius);
+    padding: var(--box-padding);
+    display: flex;
+    flex-direction: column;
+}
+.card .button {
+    margin-bottom: 0;
+}
+.card hgroup {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 0;
+    flex-grow: 1;
+    gap: var(--gutter);
+}
+.card h3 {
+    margin-bottom: 0;
+}
 
 /* **************************** */
 /*            colors            */
diff --git a/umap/templates/umap/map_list.html b/umap/templates/umap/map_list.html
index bdce48a8..67e6df8d 100644
--- a/umap/templates/umap/map_list.html
+++ b/umap/templates/umap/map_list.html
@@ -1,22 +1,25 @@
 {% load umap_tags i18n %}
 
 {% for map_inst in maps %}
-  <div>
+  <div class="card">
     {% map_fragment map_inst prefix=prefix page=request.GET.p %}
     <hgroup>
-      {% if map_inst.tags %}
-        <ul class="tag-list">
-          {% for tag, label in map_inst.get_tags_display %}
-            <li><a href="{% url 'search' %}?tags={{ tag }}">{{ label }}</a></li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-      <h3><a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a></h3>
-      {% with author=map_inst.get_author %}
-        {% if author %}
-          <p>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></p>
+      <div>
+        {% if map_inst.tags %}
+          <ul class="tag-list">
+            {% for tag, label in map_inst.get_tags_display %}
+              <li><a href="{% url 'search' %}?tags={{ tag }}">{{ label }}</a></li>
+            {% endfor %}
+          </ul>
         {% endif %}
-      {% endwith %}
+        <h3><a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a></h3>
+        {% with author=map_inst.get_author %}
+          {% if author %}
+            <p>{% trans "by" %} <a href="{{ author.get_url }}">{{ author }}</a></p>
+          {% endif %}
+        {% endwith %}
+      </div>
+      <a class="button" href="{{ map_inst.get_absolute_url }}">{% translate "See the map" %}</a>
     </hgroup>
   </div>
 {% endfor %}