diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e1015e78..ff085703 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -94,7 +94,7 @@ <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
                     <!-- *** RIGHT COLUMN ***
        _________________________________________________________ -->
 
-                    <div class="col-md-3">
+                    <aside class="col-md-3 content-sidebar" aria-label="Browse and filter">
 
                         <!-- *** MENUS AND WIDGETS *** -->
 
@@ -102,7 +102,7 @@ <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
 
                         <!-- *** MENUS AND FILTERS END *** -->
 
-                    </div>
+                    </aside>
                     <!-- /.col-md-3 -->
 
                     <!-- *** RIGHT COLUMN END *** -->
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 915fe201..d6a1caf4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -54,7 +54,7 @@
 
                     <!-- *** RIGHT COLUMN *** -->
 
-                    <div class="col-md-3">
+                    <aside class="col-md-3 content-sidebar" aria-label="Related content">
 
                         <!-- *** MENUS AND WIDGETS *** -->
 
@@ -62,7 +62,7 @@
 
                         <!-- *** MENUS AND FILTERS END *** -->
 
-                    </div>
+                    </aside>
                     <!-- /.col-md-3 -->
 
                     <!-- *** RIGHT COLUMN END *** -->
diff --git a/layouts/partials/widgets/tags.html b/layouts/partials/widgets/tags.html
index 7dbe12bf..dbbd1a28 100644
--- a/layouts/partials/widgets/tags.html
+++ b/layouts/partials/widgets/tags.html
@@ -1,24 +1,34 @@
 {{ if .Site.Params.widgets.tags }}
 {{ if isset .Site.Taxonomies "tags" }}
 {{ if not (eq (len .Site.Taxonomies.tags) 0) }}
-<div class="panel sidebar-menu">
+<section class="panel sidebar-menu sidebar-tags" aria-labelledby="sidebar-tags-title">
 
     <div class="panel-heading">
-        <h3 class="panel-title">{{ i18n "tagsTitle" }}</h3>
+        <h3 class="panel-title" id="sidebar-tags-title">{{ i18n "tagsTitle" }}</h3>
     </div>
 
     <div class="panel-body">
         <ul class="tag-cloud">
             {{ $current := . }}
-            {{ range $name, $items := .Site.Taxonomies.tags }}
-            <li {{ if eq $current.RelPermalink (printf "%s/%s/" ("tags" | relLangURL) ($name)) }}class="active"{{ end }}>
-                <a href="{{ "tags/" | relLangURL }}{{ $name | urlize }}"><i class="fas fa-tags"></i> {{ $name }}</a>
+            {{ range first 24 .Site.Taxonomies.tags.ByCount }}
+            {{ $tagURL := .Page.RelPermalink }}
+            <li {{ if eq $current.RelPermalink $tagURL }}class="active"{{ end }}>
+                <a href="{{ $tagURL }}">
+                    <i class="fas fa-tag" aria-hidden="true"></i>
+                    <span>{{ .Page.Title }}</span>
+                    <span class="tag-count" aria-label="{{ .Count }} posts">{{ .Count }}</span>
+                </a>
             </li>
             {{ end }}
         </ul>
+        {{ if gt (len .Site.Taxonomies.tags) 24 }}
+        <a class="sidebar-more-link" href="{{ "tags/" | relLangURL }}">
+            Browse all tags <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </a>
+        {{ end }}
     </div>
 
-</div>
+</section>
 {{ end }}
 {{ end }}
 {{ end }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 551c74a0..8e58b698 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -505,6 +505,182 @@ h3.text-uppercase {
     overflow: hidden;
 }
 
+/* Sidebar discovery tools */
+.content-sidebar {
+    min-width: 0;
+}
+
+.content-sidebar .panel.sidebar-menu {
+    background: var(--surface);
+    margin-bottom: 22px;
+}
+
+.content-sidebar .sidebar-menu .panel-heading {
+    background: var(--surface);
+    border: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 18px 20px 15px;
+    position: relative;
+}
+
+.content-sidebar .sidebar-menu .panel-heading::after {
+    background: var(--primary-accent);
+    border-radius: 99px;
+    bottom: -2px;
+    content: "";
+    height: 3px;
+    left: 20px;
+    position: absolute;
+    width: 42px;
+}
+
+#content .content-sidebar .sidebar-menu .panel-title {
+    font-size: 17px;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    margin: 0;
+}
+
+.content-sidebar .sidebar-menu .panel-body {
+    padding: 18px 20px 20px;
+}
+
+.content-sidebar .sidebar-menu form,
+.content-sidebar .sidebar-menu .input-group {
+    margin: 0;
+    width: 100%;
+}
+
+.content-sidebar .sidebar-menu .input-group {
+    display: flex;
+}
+
+.content-sidebar .sidebar-menu .input-group .form-control {
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+    flex: 1 1 auto;
+    font-size: 15px;
+    height: 44px;
+    min-width: 0;
+}
+
+.content-sidebar .sidebar-menu .input-group-btn {
+    display: flex;
+    flex: 0 0 46px;
+    width: 46px;
+}
+
+.content-sidebar .sidebar-menu .input-group-btn .btn {
+    align-items: center;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+}
+
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) {
+    list-style: none;
+    margin: -6px 0;
+    padding: 0;
+}
+
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) li {
+    border-bottom: 1px solid var(--line);
+    margin: 0;
+}
+
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) li:last-child {
+    border-bottom: 0;
+}
+
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) a {
+    border-radius: 6px;
+    display: block;
+    overflow-wrap: anywhere;
+    padding: 10px 8px;
+    text-decoration: none;
+}
+
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) a:hover,
+.content-sidebar .sidebar-menu ul:not(.tag-cloud) a:focus {
+    background: var(--primary-accent-light);
+}
+
+.sidebar-tags .tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar-tags .tag-cloud li {
+    margin: 0;
+    max-width: 100%;
+}
+
+.sidebar-tags .tag-cloud a {
+    align-items: center;
+    background: var(--surface-soft);
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    color: #34505d;
+    display: inline-flex;
+    font-size: 12px;
+    font-weight: 700;
+    gap: 6px;
+    line-height: 1.25;
+    max-width: 100%;
+    padding: 7px 9px;
+    text-decoration: none;
+    text-transform: none;
+}
+
+.sidebar-tags .tag-cloud a span:not(.tag-count) {
+    overflow-wrap: anywhere;
+}
+
+.sidebar-tags .tag-cloud a:hover,
+.sidebar-tags .tag-cloud a:focus,
+.sidebar-tags .tag-cloud .active a {
+    background: var(--primary-accent-light);
+    border-color: #9fd7e0;
+    color: var(--primary-accent-dark);
+}
+
+.sidebar-tags .tag-cloud i {
+    color: var(--primary-accent);
+    flex: 0 0 auto;
+}
+
+.sidebar-tags .tag-count {
+    align-items: center;
+    background: #fff;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    color: var(--ink-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 10px;
+    justify-content: center;
+    min-height: 20px;
+    min-width: 20px;
+    padding: 1px 5px;
+}
+
+.sidebar-more-link {
+    align-items: center;
+    border-top: 1px solid var(--line);
+    display: flex;
+    font-size: 13px;
+    font-weight: 700;
+    justify-content: space-between;
+    margin-top: 18px;
+    padding-top: 14px;
+    text-decoration: none;
+}
+
 /* In-page navigation */
 .page-toc {
     background: var(--surface);
@@ -685,6 +861,10 @@ ul ul {
     .page-toc__content {
         max-height: none;
     }
+
+    .content-sidebar {
+        margin-top: 36px;
+    }
 }
 
 @media (max-width: 767px) {