diff --git a/app/static/structure.css b/app/static/structure.css
index be9600f3..d731f5f9 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -551,6 +551,15 @@ fieldset legend {
   display: inline-block;
 }
 
+.topics_list {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+}
+.topics_list > li {
+  padding-bottom: 20px;
+}
+
 .community_header {
   background-repeat: no-repeat;
   background-position: center center;
diff --git a/app/static/structure.scss b/app/static/structure.scss
index 4b1ee8a6..964d1bd3 100644
--- a/app/static/structure.scss
+++ b/app/static/structure.scss
@@ -123,6 +123,16 @@ html {
   }
 }
 
+.topics_list {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(132px, 1fr));
+
+  > li {
+    padding-bottom: 20px;
+  }
+}
+
 .community_header {
   background-repeat: no-repeat;
   background-position: center center;
diff --git a/app/templates/list_topics.html b/app/templates/list_topics.html
index 5a928ec1..58c5e527 100644
--- a/app/templates/list_topics.html
+++ b/app/templates/list_topics.html
@@ -9,28 +9,26 @@
 {% block app_content %}
 {% if len(topics) > 0 %}
     {% macro render_topic(topic, depth) %}
-        <tr>
-            <td nowrap="nowrap">{{ '--' * depth }}
-                {% if depth == 0 %}<strong>{% endif %}
-                    <a href="/topic/{{ topic['topic'].path() }}">{{ topic['topic'].name }}</a>
-                {% if depth == 0 %}</strong>{% endif %}
-            </td>
-        </tr>
-        {% if topic['children'] %}
-            {% for topic in topic['children'] %}
-                {{ render_topic(topic, depth + 1)|safe }}
-            {% endfor %}
-        {% endif %}
+        <li>
+            {% if depth == 0 %}<strong>{% endif %}
+                <a href="/topic/{{ topic['topic'].path() }}">{{ topic['topic'].name }}</a>
+            {% if depth == 0 %}</strong>{% endif %}
+            {% if topic['children'] %}
+                <ul>
+                {% for topic in topic['children'] %}
+                    {{ render_topic(topic, depth + 1)|safe }}
+                {% endfor %}
+                </ul>
+            {% endif %}
+        </li>
     {% endmacro %}
     <h1>{{ _('Choose a topic') }}</h1>
     <div class="table-responsive-md mt-4">
-        <table class="communities_table table table-striped table-hover w-100">
-            <tbody>
-                {% for topic in topics %}
-                    {{ render_topic(topic, 0)|safe }}
-                {% endfor %}
-            </tbody>
-        </table>
+        <ul class="topics_list">
+            {% for topic in topics %}
+                {{ render_topic(topic, 0)|safe }}
+            {% endfor %}
+        </ul>
     </div>
 {% else %}
 <p>{{ _('There are no communities yet.') }}</p>