diff --git a/content/reports/_index.md b/content/reports/_index.md
index af6748b69..3f26e44e3 100644
--- a/content/reports/_index.md
+++ b/content/reports/_index.md
@@ -1,4 +1,15 @@
 ---
 title: Research reports
+submenu:
+  - url: "/reports/"
+    name: "All Reports"
+  - url: "/reports/circumvention/"
+    name: "Circumvention"
+  - url: "/reports/social-media-im/"
+    name: "Social Media & IMs"
+  - url: "/reports/news-media/"
+    name: "News Media"
+  - url: "/reports/human-rights/"
+    name: "Human Rights"
 description: Read our research reports investigating internet censorship worldwide
 ---
diff --git a/content/reports/circumvention/_index.md b/content/reports/circumvention/_index.md
new file mode 100644
index 000000000..635c5c208
--- /dev/null
+++ b/content/reports/circumvention/_index.md
@@ -0,0 +1,16 @@
+---
+title: Research reports - Circumvention
+submenu:
+  - url: "/reports/"
+    name: "All Reports"
+  - url: "/reports/circumvention/"
+    name: "Circumvention"
+  - url: "/reports/social-media-im/"
+    name: "Social Media & IMs"
+  - url: "/reports/news-media/"
+    name: "News Media"
+  - url: "/reports/human-rights/"
+    name: "Human Rights"
+description: Read our research reports investigating internet censorship worldwide
+tags: ["theme-circumvention"]
+---
\ No newline at end of file
diff --git a/content/reports/human-rights/_index.md b/content/reports/human-rights/_index.md
new file mode 100644
index 000000000..bd00ee3d0
--- /dev/null
+++ b/content/reports/human-rights/_index.md
@@ -0,0 +1,16 @@
+---
+title: Research reports - Human Rights
+submenu:
+  - url: "/reports/"
+    name: "All Reports"
+  - url: "/reports/circumvention/"
+    name: "Circumvention"
+  - url: "/reports/social-media-im/"
+    name: "Social Media & IMs"
+  - url: "/reports/news-media/"
+    name: "News Media"
+  - url: "/reports/human-rights/"
+    name: "Human Rights"
+description: Read our research reports investigating internet censorship worldwide
+tags: ["theme-human_rights"]
+---
\ No newline at end of file
diff --git a/content/reports/news-media/_index.md b/content/reports/news-media/_index.md
new file mode 100644
index 000000000..b0ff4c7b7
--- /dev/null
+++ b/content/reports/news-media/_index.md
@@ -0,0 +1,16 @@
+---
+title: Research reports - News Media
+submenu:
+  - url: "/reports/"
+    name: "All Reports"
+  - url: "/reports/circumvention/"
+    name: "Circumvention"
+  - url: "/reports/social-media-im/"
+    name: "Social Media & IMs"
+  - url: "/reports/news-media/"
+    name: "News Media"
+  - url: "/reports/human-rights/"
+    name: "Human Rights"
+description: Read our research reports investigating internet censorship worldwide
+tags: ["theme-news_media"]
+---
\ No newline at end of file
diff --git a/content/reports/social-media-im/_index.md b/content/reports/social-media-im/_index.md
new file mode 100644
index 000000000..b045f1e64
--- /dev/null
+++ b/content/reports/social-media-im/_index.md
@@ -0,0 +1,16 @@
+---
+title: Research reports - Social Media & IM
+submenu:
+  - url: "/reports/"
+    name: "All Reports"
+  - url: "/reports/circumvention/"
+    name: "Circumvention"
+  - url: "/reports/social-media-im/"
+    name: "Social Media & IMs"
+  - url: "/reports/news-media/"
+    name: "News Media"
+  - url: "/reports/human-rights/"
+    name: "Human Rights"
+description: Read our research reports investigating internet censorship worldwide
+tags: ["theme-social_media", "theme-im"]
+---
\ No newline at end of file
diff --git a/layouts/section/reports.html b/layouts/section/reports.html
index 96146dbb5..8481ab6e5 100644
--- a/layouts/section/reports.html
+++ b/layouts/section/reports.html
@@ -1,27 +1,48 @@
+{{ define "css" }}
+{{ partial "css-tailwind.html" . }}
+{{ end }}
+
+{{ define "navbar" }}
+{{ partial "navbar-tailwind.html" . }}
+{{ end }}
+
 {{ define "main" }}
+{{ $tags := .Params.tags }}
 
-<div class="container">
-  <h1>{{ .Title }}</h1>
-  <main class="col">
-    {{ range .Site.Taxonomies.categories.report }}
+{{ $reports := .Site.Taxonomies.categories.report }}
+{{ $pages := $reports }}
+{{ with $tags }}
+  {{ $pages = where $reports ".Params.tags" "intersect" $tags }}
+{{ end }}
 
-      <div class="row blog-summary">
-        <div>
-          <a href="{{ .RelPermalink }}" style="margin-bottom: 0">
-            <p class="title">{{ .Title }}</p>
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+  <h1 class="text-3xl my-8 font-bold">{{ .Title }}</h1>
+  <p class="text-lg">{{ .Description }}</p>
+  <main class="col">
+    <div class="grid auto-rows-fr my-8 gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
+      {{ range $pages }}
+        <div class="flex justify-between flex-col py-6 px-6 border border-gray4 border-b-[10px] border-b-ooniblue">
+          <a class="flex text-black" href="{{ .RelPermalink }}">
+            <h4 class="text-lg font-bold mb-2 leading-tight hover:text-ooniblue">{{ .Title }}</h4>
           </a>
-          {{ if .IsTranslated }}
-            <p class="title-translation">Translations: {{ range .Translations }}<a style="display: inline-block;margin-bottom: 0;padding-right: 10px" href="{{ .RelPermalink }}">{{ if eq .Lang "en" }}English{{ else if eq .Lang "pt" }}Portuguese{{ else if eq .Lang "fr" }}French{{ else if eq .Lang "es"  }}Spanish{{ else if eq .Lang "ca"  }}Catalan{{ else }}{{ .Lang }}{{ end }}</a>{{ end }}
-            </p>
-          {{ else }}
-          {{ end }}
-          <p class="byline" style="margin-bottom: 0">{{ .Date.Format "2 Jan 2006" }}</p>
+          <div>
+            {{ if .IsTranslated }}
+              <p class="text-sm">
+                Translations: {{ range $i, $e := .Translations }}{{ if $i }}, {{ end }}
+                  <a class="text-ooniblue hover:underline" href="{{ $e.RelPermalink }}">{{ if eq $e.Lang "en" }}English{{ else if eq $e.Lang "pt" }}Portuguese{{ else if eq $e.Lang "fr" }}French{{ else if eq $e.Lang "es" }}Spanish{{ else if eq $e.Lang "ca" }}Catalan{{ else if eq $e.Lang "ca" }}Russian{{ else }}{{ $e.Lang }}{{ end }}</a>
+                  {{ end }}
+              </p>
+            {{ else }}
+            {{ end }}
+            <div class="text-gray6">{{ .Date.Format "2 Jan 2006" }}</div>
+          </div>
         </div>
-      </div>
-
-    {{ end }}
+      {{ end }}
+    </div>
   </main>
-
 </div>
+{{ end }}
 
+{{ define "footer" }}
+{{ partial "footer-tailwind.html" . }}
 {{ end }}