diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl
index b7ac15ed..272ac931 100644
--- a/client/css/pool-list-view.styl
+++ b/client/css/pool-list-view.styl
@@ -1,47 +1,60 @@
 @import colors
 
 .pool-list
-    table
-        width: 100%
-        border-spacing: 0
-        text-align: left
-        line-height: 1.3em
-        tr:hover td
-            background: $top-navigation-color
-        th, td
-            padding: 0.1em 0.5em
-        th
-            white-space: nowrap
-            background: $top-navigation-color
-        .names
-            width: 84%
-        .post-count
-            text-align: center
-            width: 8%
-        .creation-time
-            text-align: center
-            width: 8%
-            white-space: pre
-        ul
-            list-style-type: none
-            margin: 0
-            padding: 0
-            display: inline
-            li
-                padding: 0
-                display: inline
-                &:not(:last-child):after
-                    content: ', '
-        @media (max-width: 800px)
-            .posts
-                display: none
+    ul
+        list-style-type: none
+        margin: 0
+        padding: 0
+        display: flex
+        align-content: flex-end
+        flex-wrap: wrap
+        margin: 0 -0.25em
 
-.darktheme .pool-list
-    table
-        tr:hover td
-            background: $top-navigation-color-darktheme
-        th
-            background: $top-navigation-color-darktheme
+        li
+            position: relative
+            flex-grow: 1
+            margin: 0 0.25em 0.5em 0.25em
+            display: inline-block
+            text-align: left
+            min-width: 10em
+            width: 12vw
+            &:not(.flexbox-dummy)
+                min-height: 7.5em
+                height: 9vw
+
+            .thumbnail-wrapper
+                display: inline-block
+                width: 100%
+                height: 100%
+                line-height: 80%
+                font-size: 80%
+                color: white
+                outline-offset: -3px
+                box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
+
+            .thumbnail
+                width: 100%
+                height: 100%
+                outline-offset: -3px
+                &:not(.empty)
+                    background-position: 50% 30%
+
+            .pool-name
+                color: black
+                font-size: 1em
+                text-align: center
+                a
+                    width: 100%
+                    display: inline-block
+
+            &:hover
+                background: $post-thumbnail-border-color
+                .thumbnail
+                    opacity: .9
+
+            &:hover a, a:active, a:focus
+                .thumbnail
+                    outline: 4px solid $main-color !important
 
 .pool-list-header
     label
@@ -61,3 +74,19 @@
 .darktheme .pool-list-header
     .append
         color: $inactive-link-color-darktheme
+
+.post-flow
+    ul
+        li
+            min-width: inherit
+            width: inherit
+            &:not(.flexbox-dummy)
+                height: 14vw
+            .thumbnail
+                outline-offset: -1px
+            .thumbnail-wrapper.no-tags
+                .thumbnail
+                    outline: 2px solid $post-thumbnail-no-tags-border-color
+            &:hover a, a:active, a:focus
+                .thumbnail
+                    outline: 2px solid $main-color !important
diff --git a/client/html/pools_page.tpl b/client/html/pools_page.tpl
index 0d811808..48530ea3 100644
--- a/client/html/pools_page.tpl
+++ b/client/html/pools_page.tpl
@@ -1,48 +1,19 @@
-<div class='pool-list table-wrap'>
+<% if (ctx.postFlow) { %><div class='pool-list post-flow'><% } else { %><div class='pool-list'><% } %>
     <% if (ctx.response.results.length) { %>
-        <table>
-            <thead>
-                <th class='names'>
-                    <% if (ctx.parameters.query == 'sort:name' || !ctx.parameters.query) { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:name'}) %>'>Pool name(s)</a>
-                    <% } else { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:name'}) %>'>Pool name(s)</a>
+        <ul>
+          <% for (let pool of ctx.response.results) { %>
+            <li data-pool-id='<%= pool.id %>'>
+                <a class='thumbnail-wrapper' href='<%= ctx.canViewPools ? ctx.formatClientLink("pool", pool.id) : "" %>'>
+                    <% if (ctx.canViewPosts && pool.posts.length > 0) { %>
+                        <%= ctx.makeThumbnail(pool.posts.at(0).thumbnailUrl) %>
                     <% } %>
-                </th>
-                <th class='post-count'>
-                     <% if (ctx.parameters.query == 'sort:post-count') { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:post-count'}) %>'>Post count</a>
-                     <% } else { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:post-count'}) %>'>Post count</a>
-                     <% } %>
-                     </th>
-                <th class='creation-time'>
-                    <% if (ctx.parameters.query == 'sort:creation-time') { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: '-sort:creation-time'}) %>'>Created on</a>
-                    <% } else { %>
-                        <a href='<%- ctx.formatClientLink('pools', {query: 'sort:creation-time'}) %>'>Created on</a>
-                    <% } %>
-                </th>
-            </thead>
-            <tbody>
-                <% for (let pool of ctx.response.results) { %>
-                    <tr>
-                        <td class='names'>
-                            <ul>
-                                <% for (let name of pool.names) { %>
-                                    <li><%= ctx.makePoolLink(pool.id, false, false, pool, name) %></li>
-                                <% } %>
-                            </ul>
-                        </td>
-                        <td class='post-count'>
-                            <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + pool.id}) %>'><%- pool.postCount %></a>
-                        </td>
-                        <td class='creation-time'>
-                            <%= ctx.makeRelativeTime(pool.creationTime) %>
-                        </td>
-                    </tr>
-                <% } %>
-            </tbody>
-        </table>
+                </a>
+                <div class='pool-name'>
+                  <%= ctx.makePoolLink(pool.id, false, false, pool, name) %>
+                </div>
+            </li>
+          <% } %>
+          <%= ctx.makeFlexboxAlign() %>
+        </ul>
     <% } %>
 </div>
diff --git a/client/js/controllers/pool_list_controller.js b/client/js/controllers/pool_list_controller.js
index 91d655c5..67608684 100644
--- a/client/js/controllers/pool_list_controller.js
+++ b/client/js/controllers/pool_list_controller.js
@@ -2,6 +2,7 @@
 
 const router = require("../router.js");
 const api = require("../api.js");
+const settings = require("../models/settings.js");
 const uri = require("../util/uri.js");
 const PoolList = require("../models/pool_list.js");
 const topNavigation = require("../models/top_navigation.js");
@@ -42,7 +43,9 @@ class PoolListController {
         });
         this._headerView.addEventListener(
             "submit",
-            (e) => this._evtSubmit(e),
+            (e) => this._evtSubmit(e)
+        );
+        this._headerView.addEventListener(
             "navigate",
             (e) => this._evtNavigate(e)
         );
@@ -106,6 +109,11 @@ class PoolListController {
                 );
             },
             pageRenderer: (pageCtx) => {
+                Object.assign(pageCtx, {
+                    canViewPosts: api.hasPrivilege("posts:view"),
+                    canViewPools: api.hasPrivilege("pools:view"),
+                    postFlow: settings.get().postFlow,
+                });
                 return new PoolsPageView(pageCtx);
             },
         });
diff --git a/client/package.json b/client/package.json
index 6c816432..991700ec 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "build": "node build.js",
-    "watch": "c1=\"\";while :;do c2=$(find html js css img -type f -and -not -iname '*autogen*'|sort|xargs cat|md5sum);[[ $c1 != $c2 ]]&&npm run build -- --debug --no-vendor-js;c1=$c2;sleep 1;done"
+    "watch": "c1=\"\";while :;do c2=$(find html js css img -type f -and -not -iname '*autogen*'|sort|xargs cat|md5sum);[[ $c1 != $c2 ]]&&npm run build -- --debug --no-vendor-js --no-web-app-files --no-binary-assets;c1=$c2;sleep 1;done"
   },
   "dependencies": {
     "dompurify": "^2.0.17",