diff --git a/package-lock.json b/package-lock.json
index ff2f488e2..bcc47ecd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "hybrids": "^9.1.15",
         "idb": "^8.0.2",
         "jwt-decode": "^4.0.0",
+        "plotly.js-basic-dist": "^3.0.1",
         "tldts-experimental": "^6.1.82"
       },
       "devDependencies": {
@@ -11588,6 +11589,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/plotly.js-basic-dist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/plotly.js-basic-dist/-/plotly.js-basic-dist-3.0.1.tgz",
+      "integrity": "sha512-TFhJjbCdOSp8IhxThlcaE9doaiBQ8gdFkBoyJ1UrsnLjJzsSGkNfVd2jl51WtOMiAxMSW0F1dtELEju4/cicnQ==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
diff --git a/package.json b/package.json
index df49246e6..d65d51e8a 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "hybrids": "^9.1.15",
     "idb": "^8.0.2",
     "jwt-decode": "^4.0.0",
+    "plotly.js-basic-dist": "^3.0.1",
     "tldts-experimental": "^6.1.82"
   },
   "engineStrict": true,
diff --git a/scripts/build.js b/scripts/build.js
index 83cf5fd8c..f4b2258af 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -32,6 +32,7 @@ const options = {
   srcDir: resolve(pwd, 'src'),
   outDir: resolve(pwd, 'dist'),
   assets: ['_locales', 'icons', 'static_pages'],
+  pages: ['logger', 'onboarding', 'whotracksme'],
 };
 
 // Generate arguments from command line
@@ -307,7 +308,7 @@ if (manifest.declarative_net_request?.rule_resources) {
 
 // --- Generate entry points ---
 
-const source = ['pages/onboarding/index.html', 'pages/logger/index.html'];
+const source = options.pages.map((page) => `pages/${page}/index.html`);
 const content_scripts = [];
 
 if (manifest.action?.default_popup) {
diff --git a/src/background/external.js b/src/background/external.js
index 360ab4677..468a80e16 100644
--- a/src/background/external.js
+++ b/src/background/external.js
@@ -12,7 +12,6 @@
 import { store } from 'hybrids';
 
 import Session from '/store/session.js';
-import { MergedStats } from '/store/daily-stats.js';
 
 if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
   // Listen for messages from Ghostery Search extension
@@ -23,8 +22,6 @@ if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
     'search@ghostery.com', // Firefox
   ];
 
-  const GHOSTERY_NEW_TAB_EXTENSION_IDS = ['newtab@ghostery.com'];
-
   chrome.runtime.onMessageExternal.addListener(
     (message, sender, sendResponse) => {
       // Refresh session support for Ghostery Search extension
@@ -43,37 +40,6 @@ if (__PLATFORM__ === 'chromium' || __PLATFORM__ === 'firefox') {
         }
       }
 
-      // Send historical stats to Ghostery New Tab extension
-      if (GHOSTERY_NEW_TAB_EXTENSION_IDS.includes(sender.id)) {
-        switch (message?.name) {
-          case 'getDashboardStats': {
-            (async () => {
-              const stats = await store.resolve(MergedStats);
-
-              // Firefox does not serialize correctly objects with getters
-              sendResponse(JSON.parse(JSON.stringify(stats)));
-            })();
-
-            return true;
-          }
-          case 'getUser': {
-            (async () => {
-              const session = await store.resolve(Session);
-
-              // Firefox does not serialize correctly objects with getters
-              sendResponse(session.user && JSON.parse(JSON.stringify(session)));
-            })();
-
-            return true;
-          }
-          default:
-            console.error(
-              `[external] Unknown message type from "${sender.id}"`,
-              message,
-            );
-        }
-      }
-
       return false;
     },
   );
diff --git a/src/pages/panel/components/menu-item.js b/src/pages/panel/components/menu-item.js
index 475cdc75a..c116d4a67 100644
--- a/src/pages/panel/components/menu-item.js
+++ b/src/pages/panel/components/menu-item.js
@@ -16,7 +16,7 @@ import { openTabWithUrl } from '/utils/tabs.js';
 export default {
   href: '',
   icon: '',
-  suffixIcon: 'arrow-right',
+  suffixIcon: 'chevron-right',
   internal: false,
   render: ({ href, icon, suffixIcon, internal }) => html`
     <template layout="block">
diff --git a/src/pages/panel/components/pause.js b/src/pages/panel/components/pause.js
index f03bbe448..f03b7e3e6 100644
--- a/src/pages/panel/components/pause.js
+++ b/src/pages/panel/components/pause.js
@@ -117,7 +117,7 @@ export default {
                     ${PAUSE_TYPES.find(({ value }) => value === pauseType)
                       .label}
                   </ui-text>
-                  <ui-icon name="arrow-down"></ui-icon>
+                  <ui-icon name="chevron-down"></ui-icon>
                 `}
           </div>
         </button>
diff --git a/src/pages/panel/views/main.js b/src/pages/panel/views/main.js
index 3e0180794..921cb68d7 100644
--- a/src/pages/panel/views/main.js
+++ b/src/pages/panel/views/main.js
@@ -139,7 +139,7 @@ export default {
                         >
                         ${!options.managed &&
                         html`<ui-icon
-                          name="arrow-down"
+                          name="chevron-down"
                           layout="size:1.5"
                           color="secondary"
                         ></ui-icon>`}
@@ -210,7 +210,7 @@ export default {
                         >
                           Report a broken page
                           <ui-icon
-                            name="arrow-right"
+                            name="chevron-right"
                             layout="size:1.5"
                           ></ui-icon>
                         </ui-text>
diff --git a/src/pages/settings/components/layout.js b/src/pages/settings/components/layout.js
index 3892dcc02..38563bf9d 100644
--- a/src/pages/settings/components/layout.js
+++ b/src/pages/settings/components/layout.js
@@ -154,12 +154,17 @@ export default {
         display: block;
         position: absolute;
         top: 0;
-        left: -80px;
+        left: -40px;
         bottom: 0;
-        width: 80px;
-        box-shadow: 0px 0px 80px var(--shadow-dialog);
+        width: 40px;
+        box-shadow: 0px 0px 60px var(--shadow-dialog);
         pointer-events: none;
       }
+
+      main ::slotted(*) {
+        position: relative;
+        z-index: 1;
+      }
     }
   `,
 };
diff --git a/src/pages/settings/components/trackers-list.js b/src/pages/settings/components/trackers-list.js
index ab017a0fa..c8f8a58b6 100644
--- a/src/pages/settings/components/trackers-list.js
+++ b/src/pages/settings/components/trackers-list.js
@@ -32,7 +32,7 @@ export default {
           >
             <ui-icon
               id="arrow"
-              name="arrow-down"
+              name="chevron-down"
               layout="size:3"
               color="secondary"
             ></ui-icon>
diff --git a/src/pages/settings/components/wtm-link.js b/src/pages/settings/components/wtm-link.js
index 2e223cb0a..5bc7efe3c 100644
--- a/src/pages/settings/components/wtm-link.js
+++ b/src/pages/settings/components/wtm-link.js
@@ -16,7 +16,7 @@ export default {
     <template layout="row items:center gap:2 padding:1.5:2">
       <ui-icon name="wtm-logo" color=""></ui-icon>
       <ui-text type="label-m" layout="grow"><slot></slot></ui-text>
-      <ui-icon name="arrow-right" color="primary"></ui-icon>
+      <ui-icon name="chevron-right" color="primary"></ui-icon>
     </template>
   `.css`
     :host {
diff --git a/src/pages/settings/views/custom-filters.js b/src/pages/settings/views/custom-filters.js
index 28ae361e9..47b067b82 100644
--- a/src/pages/settings/views/custom-filters.js
+++ b/src/pages/settings/views/custom-filters.js
@@ -68,7 +68,7 @@ export default {
                     layout="row gap:0.5"
                   >
                     Learn more on supported syntax
-                    <ui-icon name="arrow-right-s"></ui-icon>
+                    <ui-icon name="chevron-right-s"></ui-icon>
                   </a>
                 </ui-text>
               </div>
diff --git a/src/pages/settings/views/privacy.js b/src/pages/settings/views/privacy.js
index 56a02948a..59cdab36e 100644
--- a/src/pages/settings/views/privacy.js
+++ b/src/pages/settings/views/privacy.js
@@ -210,7 +210,7 @@ export default {
                     >
                       Regional Filters
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -241,7 +241,7 @@ export default {
                     >
                       Search Engine Redirect Protection
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -272,7 +272,7 @@ export default {
                     >
                       Experimental Filters
                       <ui-icon
-                        name="arrow-right"
+                        name="chevron-right"
                         color="inherit"
                         layout="size:2"
                       ></ui-icon
@@ -306,7 +306,7 @@ export default {
                       >
                         Custom Filters
                         <ui-icon
-                          name="arrow-right"
+                          name="chevron-right"
                           color="inherit"
                           layout="size:2"
                         ></ui-icon
diff --git a/src/pages/settings/views/whotracksme.js b/src/pages/settings/views/whotracksme.js
index b8e66d771..fb247bd6e 100644
--- a/src/pages/settings/views/whotracksme.js
+++ b/src/pages/settings/views/whotracksme.js
@@ -171,6 +171,24 @@ export default {
                 </div>
               </ui-toggle>
             `}
+
+            <ui-line></ui-line>
+            <div layout="row padding:left:15">
+              <ui-action>
+                <ui-text type="headline-xs">
+                  <a
+                    href="${chrome.runtime.getURL(
+                      '/pages/whotracksme/index.html',
+                    )}"
+                    target="_blank"
+                    layout="row items:center gap:0.5"
+                  >
+                    WhoTracks.Me Raport
+                    <ui-icon name="chevron-right" layout="size:2"></ui-icon>
+                  </a>
+                </ui-text>
+              </ui-action>
+            </div>
           </section>
         `}
       </settings-page-layout>
diff --git a/src/pages/whotracksme/components/button.js b/src/pages/whotracksme/components/button.js
new file mode 100644
index 000000000..adbc82a19
--- /dev/null
+++ b/src/pages/whotracksme/components/button.js
@@ -0,0 +1,45 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html } from 'hybrids';
+
+export default {
+  active: { value: false, reflect: true },
+  render: () => html`
+    <template layout="contents">
+      <ui-button>
+        <button layout="column center gap:0"><slot></slot></button>
+      </ui-button>
+    </template>
+  `.css`
+    ui-button {
+      box-shadow: none;
+      border-radius: 0px;
+      height: 50px;
+      background: var(--background-secondary);
+      border-color: var(--border-primary);
+    }
+
+    :host(:first-child) ui-button {
+      border-radius: 8px 0 0 8px;
+      border-right: none;
+    }
+
+    :host(:last-child) ui-button {
+      border-radius: 0 8px 8px 0;
+      border-left: none;
+    }
+
+    :host([active]) ui-button {
+      background: var(--background-primary);
+    }
+  `,
+};
diff --git a/src/pages/whotracksme/components/trends-chart.js b/src/pages/whotracksme/components/trends-chart.js
new file mode 100644
index 000000000..1d239a816
--- /dev/null
+++ b/src/pages/whotracksme/components/trends-chart.js
@@ -0,0 +1,147 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html, store } from 'hybrids';
+import Plotly from 'plotly.js-basic-dist';
+
+import Stats from '/store/daily-stats.js';
+
+const TRACE_COLORS = {
+  'pages': '--component-chart-line-observed',
+  'trackersBlocked': '--component-chart-line-blocked',
+  'trackersModified': '--component-chart-line-modified',
+};
+
+export default {
+  dateFrom: '',
+  dateTo: '',
+  stats: store([Stats], {
+    id: ({ dateFrom, dateTo }) => ({ dateFrom, dateTo }),
+  }),
+  trends: { value: [] },
+  aggregate: 0,
+  data: {
+    value: ({ stats, trends, aggregate }) => {
+      if (!store.ready(stats) || store.pending(stats)) return undefined;
+
+      return stats.length
+        ? trends.map((key) => {
+            let index = -1;
+            let lastDay = null;
+
+            const { x, y } = stats.reduce(
+              (acc, { day, [key]: value }) => {
+                if (
+                  acc.x.length === 0 ||
+                  !aggregate ||
+                  new Date(day) - lastDay >= aggregate * 24 * 60 * 60 * 1000
+                ) {
+                  acc.x.push(day);
+                  acc.y.push(value);
+
+                  index += 1;
+                  lastDay = new Date(day);
+
+                  return acc;
+                }
+
+                acc.y[index] = (acc.y[index] || 0) + value;
+                return acc;
+              },
+              { x: [], y: [] },
+            );
+
+            return {
+              name: key,
+              x,
+              y,
+              type: 'scatter',
+              mode: 'lines',
+              text: x.map((day, index) => `${day} - ${y[index]}`),
+              hoverinfo: 'text',
+            };
+          })
+        : [];
+    },
+    connect(host, _, invalidate) {
+      const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+      matchMedia.addEventListener('change', invalidate);
+
+      return () => matchMedia.removeEventListener('change', invalidate);
+    },
+    observe(host, data) {
+      // pending state
+      if (data === undefined) return;
+
+      const chart = host.render().querySelector('#chart');
+
+      // clean previous chart
+      Plotly.purge(chart);
+
+      // Let the rest of the page layout to fill-in before rendering the chart
+      // so the responsive layout can calculate the correct size.
+      window.requestAnimationFrame(() => {
+        const computedStyle = window.getComputedStyle(host);
+
+        Plotly.newPlot(
+          chart,
+          data.map((trace) => {
+            trace.line = {
+              color: computedStyle.getPropertyValue(TRACE_COLORS[trace.name]),
+              width: 2,
+            };
+            return trace;
+          }),
+          {
+            dragmode: false,
+            autosize: true,
+            margin: { b: 0, l: 0, r: 0, t: 0, pad: 20 },
+            showlegend: false,
+            yaxis: {
+              fixedrange: true,
+              automargin: true,
+              color: computedStyle.getPropertyValue('--color-tertiary'),
+              gridcolor: computedStyle.getPropertyValue('--border-primary'),
+              zerolinecolor: computedStyle.getPropertyValue('--border-primary'),
+              tickfont: { size: 10, family: 'Inter' },
+            },
+            xaxis: {
+              fixedrange: true,
+              automargin: true,
+              showgrid: false,
+              showline: false,
+              zeroline: false,
+              ticklabelposition: 'outside',
+              tickfont: { size: 10, family: 'Inter' },
+              color: computedStyle.getPropertyValue('--color-tertiary'),
+            },
+            bargap: 0.4,
+            hoverlabel: {
+              font: { family: 'Inter', size: 12 },
+            },
+            template: {
+              layout: {
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent',
+              },
+            },
+          },
+          { displayModeBar: false, responsive: true },
+        );
+      });
+    },
+  },
+  render: () => html`
+    <template layout="grid">
+      <div id="chart"></div>
+    </template>
+  `,
+};
diff --git a/src/pages/whotracksme/elements.js b/src/pages/whotracksme/elements.js
new file mode 100644
index 000000000..299daa7eb
--- /dev/null
+++ b/src/pages/whotracksme/elements.js
@@ -0,0 +1,20 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { define } from 'hybrids';
+
+define.from(
+  import.meta.glob(['./components/*.js'], {
+    eager: true,
+    import: 'default',
+  }),
+  { root: ['components'], prefix: 'whotracksme' },
+);
diff --git a/src/pages/whotracksme/index.html b/src/pages/whotracksme/index.html
new file mode 100644
index 000000000..4511a9be5
--- /dev/null
+++ b/src/pages/whotracksme/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Ghostery WhoTracks.Me</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/png" href="/ui/assets/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/ui/assets/favicon.svg" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/pages/whotracksme/index.js b/src/pages/whotracksme/index.js
new file mode 100644
index 000000000..61ea8a8c0
--- /dev/null
+++ b/src/pages/whotracksme/index.js
@@ -0,0 +1,19 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { mount } from 'hybrids';
+
+import '/ui/index.js';
+import './elements.js';
+
+import WhoTracksMe from './whotracksme.js';
+
+mount(document.body, WhoTracksMe);
diff --git a/src/pages/whotracksme/whotracksme.js b/src/pages/whotracksme/whotracksme.js
new file mode 100644
index 000000000..b0ee5dc57
--- /dev/null
+++ b/src/pages/whotracksme/whotracksme.js
@@ -0,0 +1,458 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html, store } from 'hybrids';
+
+import { WTM_PAGE_URL } from '/utils/urls.js';
+import { shortDateFormatter, categories } from '/ui/labels.js';
+
+import assets from '/pages/settings/assets/index.js';
+
+import { MergedStats } from '/store/daily-stats.js';
+import Session from '/store/session.js';
+
+const MONTH_IN_MS = 30 * 24 * 60 * 60 * 1000;
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+const now = Date.now();
+
+function setDurationToLastMonth(host) {
+  host.dateFrom = new Date(now - MONTH_IN_MS - DAY_IN_MS)
+    .toISOString()
+    .slice(0, 10);
+  host.dateTo = new Date(now - DAY_IN_MS).toISOString().slice(0, 10);
+}
+
+function setDurationToYesterday(host) {
+  host.dateFrom = new Date(now - DAY_IN_MS).toISOString().slice(0, 10);
+  host.dateTo = host.dateFrom;
+}
+
+function toggleTrend(trend) {
+  return (host) => {
+    host.trends = host.trends.includes(trend)
+      ? host.trends.filter((t) => t !== trend)
+      : [...host.trends, trend];
+  };
+}
+
+export default {
+  dateFrom: '',
+  dateTo: '',
+  duration: {
+    value: 'month',
+    connect: setDurationToLastMonth,
+    observe: (host, value) => {
+      switch (value) {
+        case 'month':
+          setDurationToLastMonth(host);
+          break;
+        case 'yesterday':
+          setDurationToYesterday(host);
+          break;
+      }
+    },
+  },
+  mergedStats: store(MergedStats, {
+    id: ({ dateFrom, dateTo }) => ({ dateFrom, dateTo }),
+  }),
+  session: store(Session),
+  trends: { value: ['pages', 'trackersBlocked', 'trackersModified'] },
+  trendsAggregate: 0,
+  render: ({
+    duration,
+    dateFrom,
+    dateTo,
+    mergedStats,
+    trends,
+    trendsAggregate,
+    session,
+  }) => html`
+    <template layout>
+      <main
+        layout="column padding:2 gap:5 margin:0:auto width:::1120px"
+        layout@768px:print="padding:4"
+        layout@print="gap:3"
+      >
+        <section layout="relative column gap:2 margin:2:0:0">
+          <header layout="row items:center gap:1.5" translate="no">
+            <ui-icon name="wtm-border"></ui-icon>
+            <div layout="column">
+              <ui-text type="label-l" color="tertiary" uppercase>
+                Ghostery
+              </ui-text>
+              <ui-text type="display-m">WhoTracks.Me</ui-text>
+            </div>
+          </header>
+          <ui-text
+            type="body-l"
+            mobile-type="body-m"
+            color="secondary"
+            layout@768px:print="width:::70% margin:left:9"
+          >
+            This privacy report was generated by tracking the trackers in a
+            browser protected by Ghostery. The statistics here provide
+            transparency about web tracking. To learn more about how Ghostery
+            keeps its community safe, visit
+            <span>
+              ${html`<ui-text
+                type="label-l"
+                mobile-type="label-m"
+                color="brand-primary"
+                translate="no"
+                layout="inline"
+              >
+                <a href="https://www.ghostery.com/whotracksme">
+                  ghostery.com/whotracksme</a
+                ></ui-text
+              >`}</span
+            >.
+          </ui-text>
+          <div
+            layout="column items:end gap"
+            layout@768px:print="absolute top right"
+          >
+            <div layout="row content:end gap">
+              <ui-button
+                onclick="${window.print}"
+                layout="hidden"
+                layout@1120px="block"
+              >
+                <button>Print to PDF</button>
+              </ui-button>
+              <div layout="column" layout@print="hidden">
+                ${duration !== 'custom' &&
+                html`<ui-input layout="width::16">
+                  <select
+                    value="${duration}"
+                    onchange="${html.set('duration')}"
+                  >
+                    <option value="month">Last Month</option>
+                    <option value="yesterday">Yesterday</option>
+                    <option value="custom">Custom</option>
+                  </select>
+                </ui-input>`}
+                ${duration === 'custom' &&
+                html`
+                  <div layout="row gap items:center">
+                    <ui-input layout="width::16">
+                      <input
+                        type="date"
+                        value="${dateFrom}"
+                        max="${dateTo}"
+                        onchange="${html.set('dateFrom')}"
+                      />
+                    </ui-input>
+                    <ui-text>-</ui-text>
+                    <ui-input layout="width::16">
+                      <input
+                        type="date"
+                        value="${dateTo}"
+                        min="${dateFrom}"
+                        onchange="${html.set('dateTo')}"
+                      />
+                    </ui-input>
+                  </div>
+                `}
+              </div>
+            </div>
+            <ui-text type="label-xs" color="tertiary" layout="margin:right">
+              Date Range: ${shortDateFormatter.format(new Date(dateFrom))} -
+              ${shortDateFormatter.format(new Date(dateTo))}
+            </ui-text>
+          </div>
+        </section>
+        ${store.error(mergedStats)}
+        ${store.ready(mergedStats) &&
+        html`
+          <section layout="column gap:2">
+            <div layout="column gap">
+              <ui-text type="display-s">Facts</ui-text>
+              <ui-text type="body-l" mobile-type="body-m" color="secondary">
+                Provides an overview of the essential aspects of privacy
+                protection.
+              </ui-text>
+            </div>
+            <div
+              layout="column gap:2"
+              layout@768px="grid:2:2"
+              layout@1024px:print="grid:4:1"
+              layout@print="padding:0:1px"
+            >
+              <ui-card layout="column gap padding:2.5">
+                <div layout="row items:center gap">
+                  <ui-icon
+                    name="websites"
+                    color="wtm-secondary"
+                    layout="size:6"
+                  ></ui-icon>
+                  <ui-text type="display-2xl">${mergedStats.pages}</ui-text>
+                </div>
+                <ui-text type="label-l" color="secondary">
+                  Pages visited
+                </ui-text>
+              </ui-card>
+              <ui-card layout="column gap padding:2.5">
+                <div layout="row items:center gap">
+                  <ui-icon
+                    name="block-s"
+                    color="danger-primary"
+                    layout="size:6"
+                  ></ui-icon>
+                  <ui-text type="display-2xl">
+                    ${mergedStats.trackersBlocked}
+                  </ui-text>
+                </div>
+                <ui-text type="label-l" color="secondary">
+                  Trackers blocked
+                </ui-text>
+              </ui-card>
+              <ui-card layout="column gap padding:2.5">
+                <div layout="row items:center gap">
+                  <ui-icon
+                    name="eye"
+                    color="brand-primary"
+                    layout="size:6"
+                  ></ui-icon>
+                  <ui-text type="display-2xl">
+                    ${mergedStats.trackersModified}
+                  </ui-text>
+                </div>
+                <ui-text type="label-l" color="secondary">
+                  Trackers modified
+                </ui-text>
+              </ui-card>
+              ${store.ready(mergedStats.groupedTrackers[0]) &&
+              html`
+                <ui-action>
+                  <a
+                    href="${WTM_PAGE_URL}/trackers/${mergedStats
+                      .groupedTrackers[0].id}"
+                    target="_blank"
+                  >
+                    <ui-card layout="column gap padding:2.5">
+                      <div layout="row items:end gap">
+                        <ui-category-icon
+                          name="${mergedStats.groupedTrackers[0].category}"
+                          size="large"
+                        ></ui-category-icon>
+                        <ui-text type="display-2xs" layout="row items:center">
+                          ${mergedStats.groupedTrackers[0].name}
+                          <ui-icon name="chevron-right-s"></ui-icon>
+                        </ui-text>
+                      </div>
+                      <ui-text type="body-m" color="secondary">
+                        was the most frequently observed tracker across all web
+                        pages visited.
+                      </ui-text>
+                    </ui-card>
+                  </a>
+                </ui-action>
+              `}
+            </div>
+          </section>
+          <section layout="column gap:2:5" layout@1120px:print="grid:2:1">
+            <div layout="column gap:4" layout@1120px:print="padding">
+              <div layout="column gap:2">
+                <ui-text type="display-s">Observed activities</ui-text>
+                <ui-text type="body-l" mobile-type="body-m" color="secondary">
+                  Reveals what's hidden beneath the internet’s surface. With
+                  WhoTracks.Me, you can uncover the identities behind every
+                  tracker.
+                </ui-text>
+              </div>
+              <div layout="column" layout@768px:print="row gap:2">
+                <ui-tracker-wheel
+                  categories="${mergedStats.categories}"
+                  layout="size:24 self:center margin:4"
+                  layout@768px="self:start margin:2"
+                ></ui-tracker-wheel>
+                <div layout="column grow">
+                  ${mergedStats.groupedCategories.map(
+                    ({ id, count }) => html`
+                      <ui-category
+                        name="${id}"
+                        count="${count}"
+                        large
+                      ></ui-category>
+                    `,
+                  )}
+                </div>
+              </div>
+              <ui-pagination
+                layout="column gap"
+                layout@768px="grid:2"
+                layout@1120px:print="grid:2:5 height::360px"
+              >
+                ${mergedStats.groupedTrackers.map(
+                  ({ id, name, category }, index) => html`
+                    <ui-action>
+                      <a href="${WTM_PAGE_URL}/trackers/${id}" target="_blank">
+                        <ui-card flat layout="padding row gap items:center">
+                          <ui-text
+                            type="label-s"
+                            layout="block:center width::3"
+                          >
+                            ${index + 1}
+                          </ui-text>
+                          <div layout="grow width:0">
+                            <ui-text type="label-m" ellipsis>${name}</ui-text>
+                            <ui-text type="body-s" color="secondary">
+                              ${categories[category]}
+                            </ui-text>
+                          </div>
+                          <ui-category-icon
+                            name="${category}"
+                          ></ui-category-icon>
+                        </ui-card>
+                      </a>
+                    </ui-action>
+                  `,
+                )}
+              </ui-pagination>
+            </div>
+            <div layout="column gap:3" layout@1120px:print="padding">
+              <div layout="column gap:2 relative">
+                <ui-text type="display-s">Trends</ui-text>
+                <ui-text type="body-l" mobile-type="body-m" color="secondary">
+                  Uncovers that no two days are alike. With Ghostery, you’re
+                  protected each day.
+                </ui-text>
+                <ui-input layout="absolute top:-1 right" layout@print="hidden">
+                  <select
+                    value="${trendsAggregate}"
+                    onchange="${html.set('trendsAggregate')}"
+                  >
+                    <option value="0">Daily</option>
+                    <option value="7">Weekly</option>
+                    <option value="30">Monthly</option>
+                  </select>
+                </ui-input>
+              </div>
+              <div layout="grid:3">
+                <whotracksme-button
+                  active="${trends.includes('pages')}"
+                  onclick="${toggleTrend('pages')}"
+                >
+                  <div layout="row items:center gap">
+                    <ui-icon
+                      name="websites"
+                      color="wtm-secondary"
+                      layout="size:2"
+                    ></ui-icon>
+                    <ui-text type="headline-s">${mergedStats.pages}</ui-text>
+                  </div>
+                  <ui-text type="label-xs" color="secondary">
+                    Pages visited
+                  </ui-text>
+                </whotracksme-button>
+                <whotracksme-button
+                  active="${trends.includes('trackersBlocked')}"
+                  onclick="${toggleTrend('trackersBlocked')}"
+                >
+                  <div layout="row items:center gap">
+                    <ui-icon
+                      name="block-s"
+                      color="danger-primary"
+                      layout="size:2"
+                    ></ui-icon>
+                    <ui-text type="headline-s">
+                      ${mergedStats.trackersBlocked}
+                    </ui-text>
+                  </div>
+                  <ui-text type="label-xs" color="secondary">
+                    Trackers blocked
+                  </ui-text>
+                </whotracksme-button>
+                <whotracksme-button
+                  active="${trends.includes('trackersModified')}"
+                  onclick="${toggleTrend('trackersModified')}"
+                >
+                  <div layout="row items:center gap">
+                    <ui-icon
+                      name="eye"
+                      color="brand-primary"
+                      layout="size:2"
+                    ></ui-icon>
+                    <ui-text type="headline-s">
+                      ${mergedStats.trackersModified}
+                    </ui-text>
+                  </div>
+                  <ui-text type="label-xs" color="secondary">
+                    Trackers modified
+                  </ui-text>
+                </whotracksme-button>
+              </div>
+              <whotracksme-trends-chart
+                dateFrom="${dateFrom}"
+                dateTo="${dateTo}"
+                trends="${trends}"
+                aggregate="${trendsAggregate}"
+                layout="grow"
+              ></whotracksme-trends-chart>
+            </div>
+          </section>
+          ${store.ready(session) &&
+          !session.contributor &&
+          html`
+            <section
+              layout="column center gap:2 padding:top:2"
+              layout@print="hidden"
+            >
+              <img
+                src="${assets['hands']}"
+                layout="size:12"
+                alt="Contribution"
+                slot="picture"
+              />
+              <div layout="block:center column center gap:2 width:::400px">
+                <div layout="column gap:0.5">
+                  <ui-text type="headline-m"> Become a Contributor </ui-text>
+                  <ui-text type="body-s" color="secondary">
+                    Help Ghostery fight for a web where privacy is a basic human
+                    right.
+                  </ui-text>
+                </div>
+                <ui-button type="primary">
+                  <a
+                    href="https://www.ghostery.com/become-a-contributor?utm_source=gbe"
+                    target="_blank"
+                  >
+                    Become a Contributor
+                  </a>
+                </ui-button>
+              </div>
+            </section>
+          `}
+          <section layout="block:center margin:2:auto:0 width:::960px">
+            <ui-text type="body-s" color="secondary">
+              All information displayed on the WhoTracks.Me Tab or
+              <span>
+                ${html`<ui-text
+                  type="label-s"
+                  color="brand-primary"
+                  translate="no"
+                  layout="inline"
+                >
+                  <a href="https://www.ghostery.com/whotracksme">
+                    ghostery.com/whotracksme</a
+                  ></ui-text
+                >`}</span
+              >
+              is an aggregate of facts about web trackers. These reports power
+              Ghostery's anti-tracking technology, protecting the entire
+              community.
+            </ui-text>
+          </section>
+        `}
+      </main>
+    </template>
+  `,
+};
diff --git a/src/store/daily-stats.js b/src/store/daily-stats.js
index 8c1b375cd..58b46d16f 100644
--- a/src/store/daily-stats.js
+++ b/src/store/daily-stats.js
@@ -13,7 +13,9 @@ import { store } from 'hybrids';
 import * as IDB from 'idb';
 
 import { registerDatabase } from '/utils/indexeddb.js';
-import * as trackerDb from '../utils/trackerdb.js';
+import * as trackerDb from '/utils/trackerdb.js';
+
+import Tracker from './tracker.js';
 
 // Synchronously register name of the database
 // so if a user don't open any page, it is still possible
@@ -21,13 +23,9 @@ import * as trackerDb from '../utils/trackerdb.js';
 const DB_NAME = registerDatabase('insights');
 
 async function getDb() {
-  let upgradeFromMV2 = false;
-
   if (!getDb.current) {
     getDb.current = IDB.openDB(DB_NAME, 31, {
       async upgrade(db, oldVersion, newVersion, transaction) {
-        upgradeFromMV2 = oldVersion > 0 && oldVersion < 31;
-
         if (oldVersion >= 20) {
           db.deleteObjectStore('search');
         }
@@ -50,41 +48,10 @@ async function getDb() {
 
         db.close();
         getDb.current = null;
-        upgradeFromMV2 = false;
       },
     });
   }
 
-  if (upgradeFromMV2) {
-    const db = await getDb.current;
-    const oldStats = await db.getAll('daily');
-    const tx = db.transaction('daily', 'readwrite');
-    const daily = tx.objectStore('daily');
-
-    console.info(
-      `[daily-stats] Migrating ${oldStats.length} daily stats from MV2`,
-    );
-
-    for (const stats of oldStats) {
-      await daily.delete(stats.day);
-      await daily.put({
-        id: stats.day,
-        day: stats.day,
-        trackersBlocked: stats.trackersBlocked || 0,
-        trackersModified:
-          (stats.cookiesBlocked || 0) + (stats.fingerprintsRemoved || 0),
-        pages: stats.pages || 0,
-        patterns: stats.trackers || [],
-      });
-    }
-
-    await tx.done;
-
-    console.info(
-      `[daily-stats] Migration of daily stats from MV2 done successfully`,
-    );
-  }
-
   return await getDb.current;
 }
 
@@ -128,9 +95,13 @@ const DailyStats = {
       flush(id);
       return values;
     },
-    async list() {
+    async list({ dateFrom, dateTo }) {
       const db = await getDb();
-      return db.getAllFromIndex('daily', 'day');
+      return db.getAllFromIndex(
+        'daily',
+        'day',
+        IDBKeyRange.bound(dateFrom, dateTo),
+      );
     },
   },
 };
@@ -138,46 +109,78 @@ const DailyStats = {
 export default DailyStats;
 
 export const MergedStats = {
+  id: true,
+  pages: 0,
   trackersBlocked: 0,
   trackersModified: 0,
-  trackersDetailed: [{ id: true, category: '' }],
+  trackers: [String],
+  groupedTrackers: [Tracker],
+  categories: [String],
+  groupedCategories: [{ id: true, count: 0 }],
   [store.connect]: {
     cache: false,
-    async get() {
-      const list = await store.resolve([DailyStats]);
-      const patterns = new Set();
+    async get({ dateFrom, dateTo }) {
+      const list = await store.resolve([DailyStats], { dateFrom, dateTo });
+      const patterns = [];
 
-      // Merge stats
-      const mergedStats = list.reduce(
+      const data = list.reduce(
         (acc, stats) => {
           for (const id of stats.patterns) {
-            patterns.add(id);
+            patterns.push(id);
           }
 
+          acc.pages += stats.pages;
           acc.trackersBlocked += stats.trackersBlocked;
           acc.trackersModified += stats.trackersModified;
 
           return acc;
         },
         {
+          pages: 0,
           trackersBlocked: 0,
           trackersModified: 0,
-          trackersDetailed: [],
+          categories: [],
         },
       );
 
-      // Add metadata
+      data.trackers = Array.from(new Set(patterns));
+
+      const groupedCategories = {};
+      const groupedTrackers = new Map();
+
       for (const id of patterns) {
-        const { category = 'unidentified' } =
-          (await trackerDb.getTracker(id)) || {};
+        const tracker = await trackerDb.getTracker(id);
+
+        const category = tracker?.category || 'unidentified';
+        groupedCategories[category] = (groupedCategories[category] || 0) + 1;
+
+        if (tracker) {
+          groupedTrackers.set(tracker, (groupedTrackers.get(tracker) || 0) + 1);
+        }
+      }
+
+      data.groupedTrackers = Array.from(groupedTrackers.entries())
+        .sort((a, b) => b[1] - a[1])
+        .map(([tracker]) => tracker);
 
-        mergedStats.trackersDetailed.push({
-          id,
-          category,
+      data.groupedCategories = Object.entries(groupedCategories)
+        .sort((a, b) => b[1] - a[1])
+        .map(([id, count]) => ({ id, count }));
+
+      if (data.groupedCategories.length > 5) {
+        const other = data.groupedCategories.splice(5);
+        data.groupedCategories.push({
+          id: 'other',
+          count: other.reduce((acc, { count }) => acc + count, 0),
         });
       }
 
-      return mergedStats;
+      data.categories = data.groupedCategories.reduce((acc, { id, count }) => {
+        for (let i = 0; i < count; i++) acc.push(id);
+        return acc;
+      }, []);
+
+      return data;
     },
   },
 };
diff --git a/src/ui/components/button.js b/src/ui/components/button.js
index 321bcf72a..a3dedeae5 100644
--- a/src/ui/components/button.js
+++ b/src/ui/components/button.js
@@ -41,6 +41,10 @@ export default {
       --button-border-color: var(--button-background);
     }
 
+    @media print {
+      :host { box-shadow: none; }
+    }
+
     :host([hidden]) { display: none; }
     :host(:active) { opacity: 0.6; }
 
@@ -130,6 +134,8 @@ export default {
       text-decoration: none;
       border-radius: 8px;
       padding: 0px 16px;
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
     }
 
     ::slotted(*:focus-visible) {
diff --git a/src/ui/components/card.js b/src/ui/components/card.js
index 012ffa60c..9f94bf755 100644
--- a/src/ui/components/card.js
+++ b/src/ui/components/card.js
@@ -13,6 +13,7 @@ import { html } from 'hybrids';
 
 export default {
   narrow: { value: false, reflect: true },
+  flat: { value: false, reflect: true },
   render: () => html`
     <template layout="column padding:3">
       <slot></slot>
@@ -20,12 +21,24 @@ export default {
   `.css`
     :host {
       background: var(--background-primary);
-      border-radius: 16px;
-      box-shadow: 15px 30px 80px var(--shadow-card);
+      border-radius: 8px;
+      box-shadow: 0px 4px 12px 0px var(--shadow-card);
+    }
+
+    @media print {
+      :host {
+        box-shadow: none;
+        border: 1px solid var(--border-primary);
+      }
     }
 
     :host([narrow]) {
       border-radius: 8px;
     }
+
+    :host([flat]) {
+      box-shadow: none;
+      border: 1px solid var(--border-primary);
+    }
   `,
 };
diff --git a/src/ui/components/category-icon.js b/src/ui/components/category-icon.js
index e9949a407..1dd514771 100644
--- a/src/ui/components/category-icon.js
+++ b/src/ui/components/category-icon.js
@@ -14,6 +14,7 @@ import { getCategoryColor } from '../categories.js';
 
 export default {
   name: '',
+  size: { value: '', reflect: true },
   render: ({ name }) => html`
     <template layout="row relative size:3 padding:0.5">
       <ui-icon name="category-${name}" layout="grow size:full"></ui-icon>
@@ -32,5 +33,15 @@ export default {
       opacity: 0.15;
       border-radius: 4px;
     }
+
+    :host([size='large']) {
+      width: 48px;
+      height: 48px;
+      padding: 8px;
+    }
+
+    :host([size='large'])::before {
+      border-radius: 8px;
+    }
   `,
 };
diff --git a/src/ui/components/category.js b/src/ui/components/category.js
index 79f2ad49a..fdb3de862 100644
--- a/src/ui/components/category.js
+++ b/src/ui/components/category.js
@@ -18,14 +18,24 @@ export default {
   name: '',
   count: 0,
   actionable: { value: false, reflect: true },
-  render: ({ name, count }) => html`
+  large: { value: false, reflect: true },
+  render: ({ name, count, large }) => html`
     <template layout="row gap items:center">
       <div id="pill" layout="size:12px:6px"></div>
-      <div id="label" layout="row gap items:center grow padding:0.5:0">
-        <ui-text type="body-s" color="secondary" layout="grow">
+      <div
+        id="label"
+        class="${{ large }}"
+        layout="row gap items:center grow padding:0.5:0"
+        layout.large="padding:1:0"
+      >
+        <ui-text
+          type="body-${large ? 'l' : 's'}"
+          color="secondary"
+          layout="grow"
+        >
           ${labels.categories[getCategoryKey(name)]}
         </ui-text>
-        <ui-text type="label-s" id="count">${count}</ui-text>
+        <ui-text type="label-${large ? 'l' : 's'}" id="count">${count}</ui-text>
       </div>
     </template>
   `.css`
@@ -44,7 +54,6 @@ export default {
 
     :host(:last-child) #label {
       border-bottom: none;
-      padding-bottom: 0;
     }
 
     @media (hover: hover) {
diff --git a/src/ui/components/icon.js b/src/ui/components/icon.js
index df1eb21df..6f7406810 100644
--- a/src/ui/components/icon.js
+++ b/src/ui/components/icon.js
@@ -31,21 +31,6 @@ export default {
 
 // prettier-ignore
 const icons = {
-  'arrow-right': /* html */`
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  `,
-  'arrow-right-s': /* html */`
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M2.66406 8H13.3307M13.3307 8L9.33073 4M13.3307 8L9.33073 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  `,
-  'arrow-down': /* html */`
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.10651 8.78147C6.24852 8.65129 6.47876 8.65129 6.62077 8.78147L10 11.8791L13.3792 8.78147C13.5212 8.65129 13.7515 8.65129 13.8935 8.78147C14.0355 8.91164 14.0355 9.1227 13.8935 9.25287L10.2571 12.5862C10.1151 12.7164 9.88488 12.7164 9.74287 12.5862L6.10651 9.25287C5.9645 9.1227 5.9645 8.91164 6.10651 8.78147Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  `,
   'alert': /* html */`
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_4366_65557)">
@@ -132,6 +117,11 @@ const icons = {
       <rect x="1" y="5" width="14" height="10" rx="1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   `,
+  'arrow-right-s': /* html */`
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.66406 8H13.3307M13.3307 8L9.33073 4M13.3307 8L9.33073 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
   'block-s': /* html */`
     <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M3.78659 3.28666L13.2133 12.7133M1.83325 5.68182V10.3182C1.83325 10.4812 1.83325 10.5627 1.85167 10.6395C1.86801 10.7075 1.89494 10.7725 1.93149 10.8322C1.97272 10.8995 2.03037 10.9571 2.14567 11.0724L5.4275 14.3543C5.5428 14.4695 5.60045 14.5272 5.66773 14.5684C5.72738 14.605 5.7924 14.6319 5.86043 14.6483C5.93716 14.6667 6.01869 14.6667 6.18175 14.6667H10.8181C10.9811 14.6667 11.0627 14.6667 11.1394 14.6483C11.2075 14.6319 11.2725 14.605 11.3321 14.5684C11.3994 14.5272 11.4571 14.4695 11.5723 14.3543L14.8542 11.0724C14.9695 10.9571 15.0271 10.8995 15.0683 10.8322C15.1049 10.7725 15.1319 10.7075 15.1482 10.6395C15.1666 10.5627 15.1666 10.4812 15.1666 10.3182V5.68182C15.1666 5.51876 15.1666 5.43723 15.1482 5.36051C15.1319 5.29248 15.1049 5.22745 15.0683 5.16781C15.0271 5.10053 14.9695 5.04287 14.8542 4.92757L11.5723 1.64575C11.4571 1.53045 11.3994 1.47279 11.3321 1.43157C11.2725 1.39501 11.2075 1.36808 11.1394 1.35175C11.0627 1.33333 10.9811 1.33333 10.8181 1.33333H6.18175C6.01869 1.33333 5.93716 1.33333 5.86043 1.35175C5.7924 1.36808 5.72738 1.39501 5.66773 1.43157C5.60045 1.47279 5.5428 1.53045 5.4275 1.64575L2.14567 4.92757C2.03037 5.04287 1.97272 5.10053 1.93149 5.16781C1.89494 5.22745 1.86801 5.29248 1.85167 5.36051C1.83325 5.43723 1.83325 5.51876 1.83325 5.68182Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -737,11 +727,31 @@ const icons = {
       <path d="M13.3337 4L6.00033 11.3333L2.66699 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   `,
+  'chevron-right': /* html */`
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  'chevron-right-s': /* html */`
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7 12L11 8L7 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
   'chevron-left': /* html */`
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  'chevron-left-s': /* html */`
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M9 12L5 8L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   `,
+  'chevron-down': /* html */`
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.10651 8.78147C6.24852 8.65129 6.47876 8.65129 6.62077 8.78147L10 11.8791L13.3792 8.78147C13.5212 8.65129 13.7515 8.65129 13.8935 8.78147C14.0355 8.91164 14.0355 9.1227 13.8935 9.25287L10.2571 12.5862C10.1151 12.7164 9.88488 12.7164 9.74287 12.5862L6.10651 9.25287C5.9645 9.1227 5.9645 8.91164 6.10651 8.78147Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
   'close': /* html */`
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1038,6 +1048,45 @@ const icons = {
       <path d="M2.5 6V12.5H1.5V4.5H22.5V19.5H1.5V16.5H2.5V18V18.5H3H21H21.5V18V6V5.5H21H3H2.5V6Z" fill="black" stroke="currentColor"/>
     </svg>
   `,
+  'wtm-border': /* html */`
+    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_i_1558_1884)">
+      <rect width="56" height="56" rx="12" fill="white"/>
+      <rect x="0.5" y="0.5" width="55" height="55" rx="11.5" stroke="#E0E2E6"/>
+      <mask id="path-3-outside-1_1558_1884" maskUnits="userSpaceOnUse" x="14.8" y="13.2002" width="26" height="29" fill="black">
+      <rect fill="white" x="14.8" y="13.2002" width="26" height="29"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M38.5666 36.459C37.505 34.0178 37.3222 31.9493 37.2937 31.1365V24.4495C37.2937 19.3411 33.1319 15.2002 27.9984 15.2002C22.8643 15.2002 18.7024 19.3411 18.7024 24.4495V31.2332C18.6627 32.1076 18.4541 34.1129 17.4334 36.459C16.0615 39.6117 17.1969 39.2359 18.2139 38.9766C19.2307 38.7183 21.5016 37.7057 22.211 38.9531C22.9201 40.1999 23.5117 41.2827 25.1673 40.5766C26.8229 39.8709 27.6031 39.6357 27.8395 39.6357H28.161C28.3971 39.6357 29.1776 39.8709 30.8331 40.5766C32.4886 41.2827 33.0799 40.1999 33.7895 38.9531C34.4986 37.7057 36.7694 38.7183 37.7865 38.9766C38.8034 39.2359 39.9382 39.6117 38.5666 36.459Z"/>
+      </mask>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M38.5666 36.459C37.505 34.0178 37.3222 31.9493 37.2937 31.1365V24.4495C37.2937 19.3411 33.1319 15.2002 27.9984 15.2002C22.8643 15.2002 18.7024 19.3411 18.7024 24.4495V31.2332C18.6627 32.1076 18.4541 34.1129 17.4334 36.459C16.0615 39.6117 17.1969 39.2359 18.2139 38.9766C19.2307 38.7183 21.5016 37.7057 22.211 38.9531C22.9201 40.1999 23.5117 41.2827 25.1673 40.5766C26.8229 39.8709 27.6031 39.6357 27.8395 39.6357H28.161C28.3971 39.6357 29.1776 39.8709 30.8331 40.5766C32.4886 41.2827 33.0799 40.1999 33.7895 38.9531C34.4986 37.7057 36.7694 38.7183 37.7865 38.9766C38.8034 39.2359 39.9382 39.6117 38.5666 36.459Z" fill="url(#paint0_linear_1558_1884)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M38.5666 36.459C37.505 34.0178 37.3222 31.9493 37.2937 31.1365V24.4495C37.2937 19.3411 33.1319 15.2002 27.9984 15.2002C22.8643 15.2002 18.7024 19.3411 18.7024 24.4495V31.2332C18.6627 32.1076 18.4541 34.1129 17.4334 36.459C16.0615 39.6117 17.1969 39.2359 18.2139 38.9766C19.2307 38.7183 21.5016 37.7057 22.211 38.9531C22.9201 40.1999 23.5117 41.2827 25.1673 40.5766C26.8229 39.8709 27.6031 39.6357 27.8395 39.6357H28.161C28.3971 39.6357 29.1776 39.8709 30.8331 40.5766C32.4886 41.2827 33.0799 40.1999 33.7895 38.9531C34.4986 37.7057 36.7694 38.7183 37.7865 38.9766C38.8034 39.2359 39.9382 39.6117 38.5666 36.459Z" fill="url(#paint1_linear_1558_1884)"/>
+      <path d="M37.2937 31.1365H36.0937V31.1575L36.0944 31.1786L37.2937 31.1365ZM18.7024 31.2332L19.9011 31.2876L19.9024 31.2604V31.2332H18.7024ZM17.4334 36.459L18.5338 36.9379L18.5338 36.9378L17.4334 36.459ZM18.2139 38.9766L17.9184 37.8136L17.9173 37.8138L18.2139 38.9766ZM22.211 38.9531L21.1679 39.5463L21.1679 39.5463L22.211 38.9531ZM25.1673 40.5766L24.6967 39.4727L24.6965 39.4728L25.1673 40.5766ZM30.8331 40.5766L31.3038 39.4728L31.3037 39.4728L30.8331 40.5766ZM33.7895 38.9531L34.8324 39.5466L34.8327 39.5461L33.7895 38.9531ZM37.7865 38.9766L38.083 37.8138L38.0819 37.8135L37.7865 38.9766ZM39.6671 35.9805C38.6824 33.7162 38.5179 31.806 38.4929 31.0945L36.0944 31.1786C36.1265 32.0925 36.3276 34.3194 37.4662 36.9376L39.6671 35.9805ZM38.4937 31.1365V24.4495H36.0937V31.1365H38.4937ZM38.4937 24.4495C38.4937 18.6727 33.789 14.0002 27.9984 14.0002V16.4002C32.4748 16.4002 36.0937 20.0094 36.0937 24.4495H38.4937ZM27.9984 14.0002C22.2073 14.0002 17.5024 18.6726 17.5024 24.4495H19.9024C19.9024 20.0095 23.5213 16.4002 27.9984 16.4002V14.0002ZM17.5024 24.4495V31.2332H19.9024V24.4495H17.5024ZM17.5036 31.1788C17.4685 31.9527 17.2795 33.8048 16.333 35.9803L18.5338 36.9378C19.6287 34.4209 19.8569 32.2624 19.9011 31.2876L17.5036 31.1788ZM16.3331 35.9802C15.9771 36.7982 15.7465 37.4684 15.6515 38.0124C15.5675 38.4929 15.5252 39.2292 16.0334 39.7974C16.5605 40.3866 17.2848 40.36 17.5875 40.3302C17.9306 40.2965 18.3069 40.1913 18.5104 40.1394L17.9173 37.8138C17.6124 37.8916 17.4653 37.9307 17.3525 37.9418C17.307 37.9462 17.342 37.9366 17.422 37.9546C17.5172 37.976 17.6807 38.0391 17.8222 38.1973C17.96 38.3514 17.992 38.501 17.9983 38.5469C18.0033 38.5836 17.993 38.555 18.0157 38.4254C18.0618 38.1613 18.2037 37.6962 18.5338 36.9379L16.3331 35.9802ZM18.5093 40.1397C18.7988 40.0661 19.2046 39.9317 19.5172 39.8365C19.8714 39.7286 20.2118 39.6357 20.5234 39.5841C20.8471 39.5306 21.0505 39.5379 21.1582 39.563C21.2028 39.5733 21.2084 39.5818 21.1951 39.5726C21.1779 39.5607 21.1679 39.5463 21.1679 39.5463L23.2541 38.3598C22.881 37.7038 22.292 37.3627 21.7021 37.2254C21.1527 37.0976 20.5918 37.1403 20.132 37.2163C19.6601 37.2943 19.1978 37.4249 18.818 37.5406C18.3967 37.6689 18.1373 37.7579 17.9184 37.8136L18.5093 40.1397ZM21.1679 39.5463C21.4769 40.0895 21.925 40.9314 22.6064 41.4513C22.9912 41.7448 23.4611 41.9525 24.0198 41.993C24.5614 42.0323 25.1031 41.9086 25.638 41.6805L24.6965 39.4728C24.4036 39.5977 24.2505 39.6034 24.1934 39.5993C24.1535 39.5964 24.1207 39.5878 24.062 39.5431C23.9853 39.4845 23.8776 39.3717 23.7311 39.1565C23.5832 38.9394 23.4393 38.6854 23.2541 38.3598L21.1679 39.5463ZM25.6378 41.6805C26.4507 41.334 27.0297 41.1112 27.4226 40.9774C27.6196 40.9103 27.7571 40.8699 27.8462 40.8476C27.959 40.8194 27.9341 40.8357 27.8395 40.8357V38.4357C27.6266 38.4357 27.4156 38.4814 27.2639 38.5193C27.0884 38.5632 26.8832 38.6257 26.6486 38.7056C26.1784 38.8658 25.5395 39.1135 24.6967 39.4727L25.6378 41.6805ZM27.8395 40.8357H28.161V38.4357H27.8395V40.8357ZM28.161 40.8357C28.0662 40.8357 28.0413 40.8194 28.1541 40.8476C28.2432 40.8699 28.3808 40.9103 28.5778 40.9774C28.9707 41.1112 29.5497 41.334 30.3625 41.6805L31.3037 39.4728C30.4609 39.1135 29.822 38.8658 29.3517 38.7056C29.1172 38.6257 28.9119 38.5632 28.7365 38.5193C28.5849 38.4814 28.3739 38.4357 28.161 38.4357V40.8357ZM30.3623 41.6805C30.8972 41.9086 31.4389 42.0323 31.9805 41.993C32.5392 41.9525 33.0091 41.7448 33.3938 41.4512C34.0752 40.9315 34.5234 40.0896 34.8324 39.5466L32.7466 38.3595C32.5612 38.6852 32.4172 38.9392 32.2693 39.1564C32.1226 39.3717 32.015 39.4845 31.9382 39.5431C31.8795 39.5879 31.8468 39.5964 31.8069 39.5993C31.7498 39.6034 31.5967 39.5977 31.3038 39.4728L30.3623 41.6805ZM34.8327 39.5461C34.834 39.5438 34.832 39.5478 34.8255 39.5549C34.819 39.562 34.8118 39.5681 34.8054 39.5725C34.7921 39.5817 34.7976 39.5733 34.8421 39.563C34.9497 39.5379 35.1531 39.5306 35.4768 39.5841C35.7884 39.6357 36.1288 39.7286 36.483 39.8365C36.7957 39.9317 37.2015 40.0661 37.4911 40.1397L38.0819 37.8135C37.8629 37.7579 37.6035 37.6689 37.1822 37.5406C36.8024 37.4249 36.3401 37.2943 35.8682 37.2163C35.4084 37.1403 34.8476 37.0976 34.2982 37.2254C33.7083 37.3627 33.1193 37.7039 32.7463 38.36L34.8327 39.5461ZM37.49 40.1394C37.6934 40.1913 38.0696 40.2965 38.4128 40.3302C38.7154 40.36 39.4398 40.3867 39.9669 39.7972C40.4749 39.229 40.4324 38.4928 40.3485 38.0124C40.2534 37.4684 40.0229 36.7983 39.667 35.9803L37.4663 36.9378C37.7962 37.6962 37.9381 38.1613 37.9843 38.4255C38.007 38.5551 37.9967 38.5837 38.0017 38.5471C38.008 38.5012 38.0399 38.3516 38.1777 38.1975C38.3192 38.0393 38.4828 37.9761 38.5781 37.9546C38.6582 37.9366 38.6933 37.9462 38.6478 37.9418C38.535 37.9307 38.388 37.8916 38.083 37.8138L37.49 40.1394Z" fill="white" mask="url(#path-3-outside-1_1558_1884)"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M27.7231 21.6001C27.7265 21.6001 27.73 21.6001 27.7333 21.6001H28.8C28.8034 21.6001 28.8068 21.6001 28.8103 21.6001C28.8632 21.6001 28.9264 21.6001 28.9821 21.6046C29.0467 21.6099 29.1391 21.6234 29.236 21.6728C29.3614 21.7367 29.4634 21.8387 29.5273 21.9641C29.5767 22.061 29.5902 22.1534 29.5955 22.218C29.6 22.2736 29.6 22.3369 29.6 22.3898C29.6 22.3933 29.6 22.3967 29.6 22.4001V23.4668C29.6 23.4701 29.6 23.4736 29.6 23.477C29.6 23.53 29.6 23.5932 29.5955 23.6489C29.5902 23.7134 29.5767 23.8059 29.5273 23.9028C29.4634 24.0282 29.3614 24.1302 29.236 24.1941C29.1391 24.2435 29.0467 24.257 28.9821 24.2623C28.9264 24.2668 28.8632 24.2668 28.8103 24.2668C28.8068 24.2668 28.8034 24.2668 28.8 24.2668H27.7333C27.73 24.2668 27.7265 24.2668 27.7231 24.2668C27.6701 24.2668 27.6069 24.2668 27.5512 24.2623C27.4866 24.257 27.3942 24.2435 27.2973 24.1941C27.1719 24.1302 27.0699 24.0282 27.006 23.9028C26.9566 23.8059 26.9431 23.7134 26.9378 23.6489C26.9333 23.5932 26.9333 23.53 26.9333 23.477C26.9333 23.4736 26.9333 23.4701 26.9333 23.4668V22.4001C26.9333 22.3967 26.9333 22.3933 26.9333 22.3898C26.9333 22.3369 26.9333 22.2736 26.9378 22.218C26.9431 22.1534 26.9566 22.061 27.006 21.9641C27.0699 21.8387 27.1719 21.7367 27.2973 21.6728C27.3942 21.6234 27.4866 21.6099 27.5512 21.6046C27.6069 21.6001 27.6701 21.6001 27.7231 21.6001Z" fill="white"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M24.5231 24.7998C24.5265 24.7998 24.53 24.7998 24.5333 24.7998H25.6C25.6034 24.7998 25.6068 24.7998 25.6103 24.7998C25.6632 24.7998 25.7264 24.7998 25.7821 24.8043C25.8467 24.8096 25.9391 24.8231 26.036 24.8725C26.1614 24.9364 26.2634 25.0384 26.3273 25.1638C26.3767 25.2607 26.3902 25.3531 26.3955 25.4177C26.4 25.4734 26.4 25.5366 26.4 25.5895C26.4 25.593 26.4 25.5964 26.4 25.5998V26.6665C26.4 26.6698 26.4 26.6733 26.4 26.6768C26.4 26.7297 26.4 26.7929 26.3955 26.8486C26.3902 26.9132 26.3767 27.0056 26.3273 27.1025C26.2634 27.2279 26.1614 27.3299 26.036 27.3938C25.9391 27.4432 25.8467 27.4567 25.7821 27.462C25.7264 27.4665 25.6632 27.4665 25.6103 27.4665C25.6068 27.4665 25.6034 27.4665 25.6 27.4665H24.5333C24.53 27.4665 24.5265 27.4665 24.5231 27.4665C24.4701 27.4665 24.4069 27.4665 24.3512 27.462C24.2866 27.4567 24.1942 27.4432 24.0973 27.3938C23.9719 27.3299 23.8699 27.2279 23.806 27.1025C23.7566 27.0056 23.7431 26.9132 23.7378 26.8486C23.7333 26.7929 23.7333 26.7297 23.7333 26.6768C23.7333 26.6733 23.7333 26.6698 23.7333 26.6665V25.5998C23.7333 25.5964 23.7333 25.593 23.7333 25.5895C23.7333 25.5366 23.7333 25.4734 23.7378 25.4177C23.7431 25.3531 23.7566 25.2607 23.806 25.1638C23.8699 25.0384 23.9719 24.9364 24.0973 24.8725C24.1942 24.8231 24.2866 24.8096 24.3512 24.8043C24.4069 24.7998 24.4701 24.7998 24.5231 24.7998Z" fill="white"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4564 20.5332C23.4599 20.5332 23.4634 20.5332 23.4667 20.5332H24.5334C24.5368 20.5332 24.5402 20.5332 24.5437 20.5332C24.5966 20.5332 24.6598 20.5332 24.7155 20.5377C24.7801 20.543 24.8725 20.5565 24.9694 20.6059C25.0948 20.6698 25.1968 20.7718 25.2607 20.8972C25.3101 20.9941 25.3236 21.0865 25.3289 21.1511C25.3334 21.2068 25.3334 21.27 25.3334 21.3229C25.3334 21.3264 25.3334 21.3298 25.3334 21.3332V22.3999C25.3334 22.4032 25.3334 22.4067 25.3334 22.4102C25.3334 22.4631 25.3334 22.5263 25.3289 22.582C25.3236 22.6466 25.3101 22.739 25.2607 22.8359C25.1968 22.9613 25.0948 23.0633 24.9694 23.1272C24.8725 23.1766 24.7801 23.1901 24.7155 23.1954C24.6598 23.1999 24.5966 23.1999 24.5437 23.1999C24.5402 23.1999 24.5368 23.1999 24.5334 23.1999H23.4667C23.4634 23.1999 23.4599 23.1999 23.4564 23.1999C23.4035 23.1999 23.3403 23.1999 23.2846 23.1954C23.22 23.1901 23.1276 23.1766 23.0307 23.1272C22.9053 23.0633 22.8033 22.9613 22.7394 22.8359C22.69 22.739 22.6765 22.6466 22.6712 22.582C22.6667 22.5263 22.6667 22.4631 22.6667 22.4102C22.6667 22.4067 22.6667 22.4032 22.6667 22.3999V21.3332C22.6667 21.3298 22.6667 21.3264 22.6667 21.3229C22.6667 21.27 22.6667 21.2068 22.6712 21.1511C22.6765 21.0865 22.69 20.9941 22.7394 20.8972C22.8033 20.7718 22.9053 20.6698 23.0307 20.6059C23.1276 20.5565 23.22 20.543 23.2846 20.5377C23.3403 20.5332 23.4035 20.5332 23.4564 20.5332Z" fill="white"/>
+      <path d="M33.8667 23.7335C33.8667 23.439 33.6279 23.2002 33.3333 23.2002H31.2C30.9054 23.2002 30.6667 23.439 30.6667 23.7335V25.6002C30.6667 25.7475 30.5473 25.8669 30.4 25.8669H28.5333C28.2388 25.8669 28 26.1056 28 26.4002V28.2669C28 28.4141 27.8806 28.5335 27.7333 28.5335H25.8667C25.5721 28.5335 25.3333 28.7723 25.3333 29.0669V31.2002C25.3333 31.4947 25.5721 31.7335 25.8667 31.7335H33.3333C33.6279 31.7335 33.8667 31.4947 33.8667 31.2002V23.7335Z" fill="white"/>
+      </g>
+      <defs>
+      <filter id="filter0_i_1558_1884" x="0" y="0" width="56" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/>
+      <feBlend mode="normal" in2="shape" result="effect1_innerShadow_1558_1884"/>
+      </filter>
+      <linearGradient id="paint0_linear_1558_1884" x1="22.0822" y1="17.3339" x2="35.9269" y2="32.5915" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#67A73A"/>
+      <stop offset="1" stop-color="#00AEF0"/>
+      </linearGradient>
+      <linearGradient id="paint1_linear_1558_1884" x1="18.7526" y1="21.402" x2="37.0444" y2="39.5674" gradientUnits="userSpaceOnUse">
+      <stop offset="0.0978647" stop-color="#503FBB"/>
+      <stop offset="1" stop-color="#01AEF1"/>
+      </linearGradient>
+      </defs>
+    </svg>
+  `,
   'wtm-logo': /* html */`
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M29.2083 26.5736C27.8812 23.522 27.6527 20.9363 27.6171 19.9204V11.5616C27.6171 5.17607 22.4149 0 15.998 0C9.58037 0 4.37796 5.17607 4.37796 11.5616V20.0412C4.32838 21.1342 4.06763 23.6408 2.79177 26.5736C1.0769 30.5144 2.49611 30.0447 3.76732 29.7205C5.03835 29.3976 7.87696 28.1319 8.76374 29.6911C9.65017 31.2496 10.3897 32.6031 12.4591 31.7206C14.5286 30.8384 15.5038 30.5444 15.7993 30.5444H16.2013C16.4964 30.5444 17.472 30.8384 19.5414 31.7206C21.6108 32.6031 22.3499 31.2496 23.2369 29.6911C24.1233 28.1319 26.9617 29.3976 28.2331 29.7205C29.5043 30.0447 30.9228 30.5144 29.2083 26.5736Z" fill="url(#paint0_linear_289_22287)"/>
diff --git a/src/ui/components/input.js b/src/ui/components/input.js
index ea7bd6002..d3194765d 100644
--- a/src/ui/components/input.js
+++ b/src/ui/components/input.js
@@ -71,6 +71,10 @@ export default {
       border-color: var(--background-brand-strong);
     }
 
+    ::slotted(input[type="date"]) {
+      font: var(--font-body-m);
+    }
+
     @media (prefers-color-scheme: dark) {
       ::slotted(input[type="checkbox"]:checked) {
         background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23202225' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@@ -95,6 +99,7 @@ export default {
       background: no-repeat right 7px center / 16px 16px;
       background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23202C44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
       padding-right: 28px;
+      cursor: pointer;
     }
 
     @media (prefers-color-scheme: dark) {
diff --git a/src/ui/components/list.js b/src/ui/components/list.js
index 4866532f7..cd00728c4 100644
--- a/src/ui/components/list.js
+++ b/src/ui/components/list.js
@@ -28,7 +28,7 @@ export default {
           <ui-text type="label-m">${labels.categories[name]}</ui-text>
           <ui-icon
             id="arrow"
-            name="arrow-down"
+            name="chevron-down"
             color="secondary"
             layout="margin:right:-0.5"
           ></ui-icon>
diff --git a/src/ui/components/pagination.js b/src/ui/components/pagination.js
new file mode 100644
index 000000000..0f1b01b64
--- /dev/null
+++ b/src/ui/components/pagination.js
@@ -0,0 +1,125 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { html } from 'hybrids';
+
+function updatePage(host) {
+  Array.from(host.children).forEach((child, index) => {
+    child.classList.toggle(
+      'ui-pagination-active',
+      index >= host.limit * (host.page - 1) && index < host.limit * host.page,
+    );
+  });
+}
+
+function reset(host) {
+  host.pageCount = undefined;
+  host.page = 1;
+  updatePage(host);
+}
+
+export default {
+  limit: 10,
+  page: {
+    value: 1,
+    observe: (host, value, lastValue) => {
+      updatePage(host);
+
+      if (lastValue) {
+        host.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      }
+    },
+  },
+  pageCount: (host, value) =>
+    value || Math.ceil(host.children.length / host.limit),
+  render: ({ page, pageCount }) => html`
+    <template layout="relative padding:bottom:8">
+      <slot onslotchange="${reset}"></slot>
+      ${pageCount > 1 &&
+      html`
+        <div layout="absolute bottom left right row gap center padding:2">
+          <ui-button
+            onclick="${html.set('page', page - 1)}"
+            disabled="${page <= 1}"
+          >
+            <button>
+              <ui-icon name="chevron-left-s" color="secondary"></ui-icon>
+            </button>
+          </ui-button>
+
+          ${page !== 1 &&
+          html`<ui-button onclick="${html.set('page', 1)}">
+            <button>
+              <ui-text type="label-m" color="secondary">1</ui-text>
+            </button>
+          </ui-button>`}
+          ${page > 3 &&
+          html`<ui-text type="label-m" color="secondary">...</ui-text>`}
+          ${page > 2 &&
+          html`<ui-button onclick="${html.set('page', page - 1)}">
+            <button>
+              <ui-text type="label-m" color="secondary">${page - 1}</ui-text>
+            </button>
+          </ui-button>`}
+
+          <ui-button disabled>
+            <button>
+              <ui-text type="label-m" color="secondary">${page}</ui-text>
+            </button>
+          </ui-button>
+
+          ${page < pageCount - 1 &&
+          html`<ui-button onclick="${html.set('page', page + 1)}">
+            <button>
+              <ui-text type="label-m" color="secondary">${page + 1}</ui-text>
+            </button>
+          </ui-button>`}
+          ${page < pageCount - 2 &&
+          html`<ui-text type="label-m" color="secondary">...</ui-text>`}
+          ${page !== pageCount &&
+          html`<ui-button onclick="${html.set('page', pageCount)}">
+            <button>
+              <ui-text type="label-m" color="secondary">${pageCount}</ui-text>
+            </button>
+          </ui-button>`}
+
+          <ui-button
+            onclick="${html.set('page', page + 1)}"
+            disabled="${page >= pageCount}"
+          >
+            <button>
+              <ui-icon name="chevron-right-s" color="secondary"></ui-icon>
+            </button>
+          </ui-button>
+        </div>
+      `}
+    </template>
+  `.css`
+    ::slotted(*:not(.ui-pagination-active)) {
+      display: none;
+    }
+
+    ui-button {
+      width: 28px;
+      height: 28px;
+    }
+
+    ui-button[disabled] {
+      background: var(--background-secondary);
+      border: none;
+      box-shadow: none;
+    }
+
+    button {
+      padding: 0;
+    }
+  `,
+};
diff --git a/src/ui/components/tracker-wheel.js b/src/ui/components/tracker-wheel.js
index 080c9233a..e5a38679f 100644
--- a/src/ui/components/tracker-wheel.js
+++ b/src/ui/components/tracker-wheel.js
@@ -100,7 +100,15 @@ export default {
               />
           `,
         )}
-        <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">
+        <text
+          x="50%"
+          y="50%"
+          dominant-baseline="central"
+          text-anchor="middle"
+          style="${{
+            fontSize: `${14 - String(categories.length).length}px`,
+          }}"
+        >
           ${categories && categories.length}
         </text>
       </svg>
@@ -120,7 +128,6 @@ export default {
     text {
       fill: var(--color-primary);
       font-family: var(--font-family-label);
-      font-size: 12px;
       font-weight: 600;
     }
    `,
diff --git a/src/ui/labels.js b/src/ui/labels.js
index 24f9fb5fb..b517bf5e7 100644
--- a/src/ui/labels.js
+++ b/src/ui/labels.js
@@ -34,12 +34,12 @@ export const categories = {
   other: msg`Other | Tracker category name`,
 };
 
-export const regions = new Intl.DisplayNames(
-  [chrome.i18n.getUILanguage().split('-')[0]],
-  { type: 'region' },
-);
+const lang = chrome.i18n.getUILanguage().split('-')[0];
 
-export const languages = new Intl.DisplayNames(
-  [chrome.i18n.getUILanguage().split('-')[0]],
-  { type: 'language' },
-);
+export const regions = new Intl.DisplayNames(lang, { type: 'region' });
+export const languages = new Intl.DisplayNames(lang, { type: 'language' });
+
+export const shortDateFormatter = new Intl.DateTimeFormat(lang, {
+  month: 'short',
+  day: 'numeric',
+});
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 9382c6ced..7d6624b69 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -261,6 +261,30 @@ html {
     --component-custom-token-bg-overlay: var(--color-alpha-black-80);
     --component-custom-token-bg-scroll: var(--color-alpha-black-10);
   }
+
+  input {
+    color-scheme: dark;
+  }
+}
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin-left: 0.5cm;
+    margin-right: 0.5cm;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  html,
+  body {
+    width: 1120px;
+  }
+
+  body {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }
 
 html {