diff --git a/.github/linters/.stylelintrc.json b/.github/linters/.stylelintrc.json
index 47699a52..8f6d5a3b 100644
--- a/.github/linters/.stylelintrc.json
+++ b/.github/linters/.stylelintrc.json
@@ -10,6 +10,7 @@
         ],
         "color-function-notation": null,
         "comment-empty-line-before": null,
+        "declaration-colon-newline-after": null,
         "font-family-no-duplicate-names": [
             true,
             {
@@ -18,6 +19,7 @@
         ],
         "length-zero-no-unit": null,
         "max-line-length": null,
+        "media-feature-range-notation": "prefix",
         "no-descending-specificity": null,
         "no-eol-whitespace": [
             true,
diff --git a/config/last_updated.json b/config/last_updated.json
index 73ff3928..07836d7e 100644
--- a/config/last_updated.json
+++ b/config/last_updated.json
@@ -1,4 +1,14 @@
 {
+  "/static/components/summary.css": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "304aa7ab9c39f9eb730f4f9de0261652"
+  },
+  "/static/components/table.css": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "56bd14f21cf53b601d86be0061ae7baa"
+  },
   "/static/css/bootstrap.min.css": {
     "date_published": "2018-05-08T00:00:00.000Z",
     "date_modified": "2021-04-23T00:00:00.000Z",
@@ -29,11 +39,46 @@
     "date_modified": "2023-04-26T00:00:00.000Z",
     "hash": "1d22c6afc3a451844da89684d7ad84ef"
   },
+  "/static/css/techreport/general.css": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "28eb032e3482a2447241be1e712ed74d"
+  },
+  "/static/css/techreport/landing.css": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "804dc15c1ed6962ae75a2b189de56148"
+  },
+  "/static/css/techreport/techreport.css": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "44544a77ae69a65af90cb8b147bd0263"
+  },
+  "/static/js/accessibility.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "cf1af15492a3443d875cffaf34cd97fe"
+  },
+  "/static/js/accessibility.js.map": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "c2cbce2ba7a3898335fde135b24e301d"
+  },
+  "/static/js/export-data.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "7f994d8425277b2e3e05f062c8c497c1"
+  },
   "/static/js/exporting.js": {
     "date_published": "2021-05-19T00:00:00.000Z",
     "date_modified": "2024-01-28T00:00:00.000Z",
     "hash": "bf113a2ddbc983f18f069cd5957814d9"
   },
+  "/static/js/exporting.js.map": {
+    "date_published": "2024-04-05T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "90a638c281c291abf8acb7531024d3a5"
+  },
   "/static/js/faq.js": {
     "date_published": "2018-05-08T00:00:00.000Z",
     "date_modified": "2024-03-14T00:00:00.000Z",
@@ -44,11 +89,26 @@
     "date_modified": "2024-01-28T00:00:00.000Z",
     "hash": "1d792d50f4462089ca7b3453f8426d6c"
   },
+  "/static/js/highcharts-more.js.map": {
+    "date_published": "2024-04-05T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "8d31b26d9fd75b9f2749cf0fc652fb34"
+  },
+  "/static/js/highcharts.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "7517a72a4be7d8cb449462dfd7c3cf34"
+  },
   "/static/js/highstock.js": {
     "date_published": "2021-04-26T00:00:00.000Z",
     "date_modified": "2024-01-28T00:00:00.000Z",
     "hash": "2435bd016c365ddc7c6daad120bcde8b"
   },
+  "/static/js/highstock.js.map": {
+    "date_published": "2024-04-05T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "6a6de9a402c29ea5b76e30b5eed6ddd9"
+  },
   "/static/js/histogram.js": {
     "date_published": "2018-05-08T00:00:00.000Z",
     "date_modified": "2024-03-14T00:00:00.000Z",
@@ -74,6 +134,51 @@
     "date_modified": "2024-03-14T00:00:00.000Z",
     "hash": "b15100fd778e0784c465ffe4215e57be"
   },
+  "/static/js/summaryLinked.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "b00f52e619f9aa6b965ebe2a49b6fd23"
+  },
+  "/static/js/tableCWVOverviewMulti.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "ab2994dc074ff02e055c5fb5c8df988b"
+  },
+  "/static/js/tableGeneral.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "d2317a0b43a4c04a86723b178dfedf2c"
+  },
+  "/static/js/tableGeneralMulti.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "62b2c943393389849758cc3d7ff7be5b"
+  },
+  "/static/js/tableOverview.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "0a9bf98ecfeeb9594fde313ae8ab8edb"
+  },
+  "/static/js/tableOverviewMulti.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2023-10-09T00:00:00.000Z",
+    "hash": "6d90ac2a5081aebcf8377f37dc2d98dc"
+  },
+  "/static/js/techreport.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "c6d56aa085452dd25392d3cac889dba8"
+  },
+  "/static/js/techreport/section.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "692808a4620e6d84ce2a12d45eb7d40b"
+  },
+  "/static/js/techreport/timeseries.js": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "6e7983322c2a8dab527e43209910e939"
+  },
   "/static/js/timeseries.js": {
     "date_published": "2018-05-08T00:00:00.000Z",
     "date_modified": "2024-03-14T00:00:00.000Z",
@@ -119,6 +224,11 @@
     "date_modified": "2023-09-07T00:00:00.000Z",
     "hash": "bb56bcf9203e97fcad14369053f778e3"
   },
+  "reports/cwv-tech-new": {
+    "date_published": "2023-10-09T00:00:00.000Z",
+    "date_modified": "2024-04-05T00:00:00.000Z",
+    "hash": "59ca9a96a7a3a9ec1b19bb7aba15f930"
+  },
   "reports/loading-speed": {
     "date_published": "2018-05-08T00:00:00.000Z",
     "date_modified": "2023-09-07T00:00:00.000Z",
diff --git a/config/reports.json b/config/reports.json
index 1012a7ed..61a319c1 100644
--- a/config/reports.json
+++ b/config/reports.json
@@ -10,7 +10,8 @@
     "page-weight",
     "chrome-ux-report",
     "project-fugu",
-    "cwv-tech"
+    "cwv-tech",
+    "cwv-tech-new"
   ],
   "_featured": [
     "state-of-the-web"
@@ -1378,5 +1379,22 @@
         "width": "fa-w-18"
       }
     }
+  },
+  "cwv-tech-new": {
+    "name": "BETA: Core Web Vitals Technology Report",
+    "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
+    "url": "/reports/techreport/landing",
+    "metrics": [],
+    "graphic": {
+      "bgcolor": "#fff",
+      "primary": {
+        "color": "#444",
+        "icon": "fas fa-wrench"
+      },
+      "secondary": {
+        "color": "rgba(0, 0, 0, 0.3)",
+        "icon": "fas fa-tachometer-alt"
+      }
+    }
   }
 }
diff --git a/config/techreport.json b/config/techreport.json
new file mode 100644
index 00000000..e167e208
--- /dev/null
+++ b/config/techreport.json
@@ -0,0 +1,1246 @@
+{
+  "id": "techreport",
+  "name": "Technology Report",
+  "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
+  "config": {
+    "cwv_subcategories": [
+      "FID",
+      "CLS",
+      "LCP",
+      "FCP",
+      "INP",
+      "TTFB"
+    ],
+    "lighthouse_subcategories": [
+      "accessibility",
+      "best_practices",
+      "performance",
+      "seo"
+    ],
+    "lighthouse_brackets": [
+      {
+        "name": "poor",
+        "min": 0,
+        "max": 49
+      },
+      {
+        "name": "improvement",
+        "min": 50,
+        "max": 89
+      },
+      {
+        "name": "good",
+        "min": 90,
+        "max": 100
+      }
+    ]
+  },
+  "pages": {
+    "landing": {
+      "id": "landing",
+      "title": "Technology Report",
+      "subtitle": "Report",
+      "description": "This is placeholder text about how the report works",
+      "data": {},
+      "filters": {
+        "technologies": ["WordPress", "Squarespace", "Drupal"]
+      },
+      "config": {
+        "default": {
+          "app": ["WordPress", "Squarespace", "Drupal"]
+        },
+        "popular_tech": {
+          "id": "popular_tech",
+          "title": "Popular technologies",
+          "description": "To write",
+          "caption": "popular technologies table caption todo",
+          "filters": {
+            "app": ["WordPress", "Squarespace", "Drupal"]
+          },
+          "ctaLabel": "Compare technologies",
+          "ctaUrl": "/reports/techreport/comparison?app=WordPress,Squarespace,Drupal"
+        }
+      }
+    },
+    "drilldown": {
+      "id": "drilldown",
+      "title": "Drilldown",
+      "subtitle": "Technology Report",
+      "description": "Drilldown placeholder",
+      "config": {
+        "default": {
+          "app": ["ALL"],
+          "series": {
+            "breakdown": "client",
+            "breakdown_values": [
+              {
+                "name": "desktop",
+                "color": "#669E8E",
+                "suffix": "%"
+              },
+              {
+                "name": "mobile",
+                "color": "#BD6EBE",
+                "suffix": "%"
+              }
+            ]
+          }
+        },
+        "summary": [
+          {
+            "endpoint": "vitals",
+            "category": "overall",
+            "metric": "good_pct",
+            "label": "Overall good CWVs",
+            "suffix": "%",
+            "description": "Origins with overall good core web vitals.",
+            "url": "#good-cwvs"
+          },
+          {
+            "endpoint": "lighthouse",
+            "category": "performance",
+            "metric": "median_score_pct",
+            "label": "Lighthouse performance",
+            "suffix": "",
+            "description": "Median lighthouse performance score across tested origins.",
+            "url": "#lighthouse"
+          },
+          {
+            "endpoint": "lighthouse",
+            "category": "accessibility",
+            "metric": "median_score_pct",
+            "label": "Lighthouse accessibility",
+            "suffix": "",
+            "description": "Median lighthouse accessibility score across tested origins.",
+            "url": "#lighthouse&median-lighthouse-over-time=accessibility"
+          },
+          {
+            "endpoint": "lighthouse",
+            "category": "seo",
+            "metric": "median_score_pct",
+            "label": "Page weight",
+            "suffix": "kB",
+            "description": "Median total bytes per page for across tested origins.",
+            "url": "#page-weight"
+          }
+        ],
+        "adoption_timeseries": {
+          "title": "All usage",
+          "description": "Information about how ",
+          "id": "adoption_timeseries",
+          "endpoint": "adoption",
+          "default": "adoption",
+          "metric": "origins",
+          "table": {
+            "param": "",
+            "default": "adoption",
+            "caption": "Usage placeholder",
+            "columns": [
+              {
+                "key": "date",
+                "name": "Date"
+              },
+              {
+                "key": "origins",
+                "name": "Origins"
+              },
+              {
+                "key": "client",
+                "name": "Client"
+              }
+            ]
+          },
+          "viz": {
+            "title": "Origins over time",
+            "metric": "origins",
+            "default": "adoption",
+            "series": {
+              "breakdown": "client",
+              "values": [
+                {
+                  "name": "desktop",
+                  "color": "#669E8E"
+                },
+                {
+                  "name": "mobile",
+                  "color": "#BD6EBE"
+                }
+              ],
+              "defaults": [
+                {
+                  "name": "Desktop",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "Mobile",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "Amount of origins",
+              "tickAmount": 3
+            }
+          }
+        },
+        "good_cwv_summary": {
+          "title": "Latest Core Web Vitals",
+          "cards": [
+            {
+              "endpoint": "vitals",
+              "category": "overall",
+              "metric": "good_pct",
+              "label": "Good CWVs",
+              "suffix": "%",
+              "description": "Origins with overall good core web vitals.",
+              "url": "?good-cwv-over-time=overall#good-cwvs"
+            },
+            {
+              "endpoint": "vitals",
+              "category": "LCP",
+              "metric": "good_pct",
+              "label": "Good LCP",
+              "suffix": "%",
+              "description": "Percentage of origins with good LCP scores (under 0.25s).",
+              "url": "?good-cwv-over-time=LCP#good-cwvs"
+            },
+            {
+              "endpoint": "vitals",
+              "category": "FID",
+              "metric": "good_pct",
+              "label": "Good FID",
+              "suffix": "%",
+              "description": "Percentage of origins with good FID scores (under 100ms).",
+              "url": "?good-cwv-over-time=FID#good-cwvs"
+            },
+            {
+              "endpoint": "vitals",
+              "category": "CLS",
+              "metric": "good_pct",
+              "label": "Good CLS",
+              "suffix": "%",
+              "description": "Percentage of origins with good CLS scores (under 0.1).",
+              "url": "?good-cwv-over-time=CLS#good-cwvs"
+            },
+            {
+              "endpoint": "vitals",
+              "category": "INP",
+              "metric": "good_pct",
+              "label": "Good INP",
+              "suffix": "%",
+              "description": "Percentage of origins with good INP scores (under 200ms).",
+              "url": "?good-cwv-over-time=INP#good-cwvs"
+            }
+          ]
+        },
+        "good_cwv_timeseries": {
+          "title": "Good Core Web Vitals over time",
+          "description": "Placeholder - combination of several metrics",
+          "id": "good_cwv_timeseries",
+          "endpoint": "vitals",
+          "metric": "good_pct",
+          "subcategory": {
+            "base": "pct_good_",
+            "param": "good-cwv-over-time",
+            "default": "overall",
+            "options": [
+              {
+                "label": "Overall good CWVs",
+                "value": "overall"
+              },
+              {
+                "label": "LCP",
+                "value": "LCP"
+              },
+              {
+                "label": "FID",
+                "value": "FID"
+              },
+              {
+                "label": "CLS",
+                "value": "CLS"
+              },
+              {
+                "label": "FCP",
+                "value": "FCP"
+              },
+              {
+                "label": "TTFB",
+                "value": "TTFB"
+              },
+              {
+                "label": "INP",
+                "value": "INP"
+              }
+            ]
+          },
+          "table": {
+            "param":"good-cwv-over-time",
+            "default": "overall",
+            "caption": "Good Core Web Vitals",
+            "columns": [
+              {
+                "key": "date",
+                "name": "Date",
+                "type": "heading"
+              },
+              {
+                "key": "good_pct",
+                "name": "% Good scores",
+                "suffix": "%",
+                "className": "main-cell pct-value"
+              },
+              {
+                "key": "good_number",
+                "name": "Good scores",
+                "className": "good-scores",
+                "hiddenSuffix": "/"
+              },
+              {
+                "key": "tested",
+                "name": "Eligible",
+                "className": "eligible"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          },
+          "summary": true,
+          "viz": {
+            "base": "pct_good_",
+            "default": "overall",
+            "param": "good-cwv-over-time",
+            "title": "Origins with good scores over time",
+            "metric": "good_pct",
+            "height": 600,
+            "series": {
+              "breakdown": "client",
+              "values": [
+                {
+                  "name": "desktop",
+                  "color": "#669E8E",
+                  "suffix": "%"
+                },
+                {
+                  "name": "mobile",
+                  "color": "#BD6EBE",
+                  "suffix": "%"
+                }
+              ],
+              "defaults": [
+                {
+                  "name": "desktop",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "mobile",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "% Origins with good scores"
+            }
+          }
+        },
+        "lighthouse_summary": {
+          "title": "Latest lighthouse scores",
+          "cards": [
+            {
+              "endpoint": "lighthouse",
+              "category": "performance",
+              "metric": "median_score_pct",
+              "label": "Performance",
+              "url": "?median-lighthouse-over-time=performance#lighthouse"
+            },
+            {
+              "endpoint": "lighthouse",
+              "category": "accessibility",
+              "metric": "median_score_pct",
+              "label": "Accessibility",
+              "url": "?median-lighthouse-over-time=accessibility#lighthouse"
+            },
+            {
+              "endpoint": "lighthouse",
+              "category": "seo",
+              "metric": "median_score_pct",
+              "label": "SEO",
+              "url": "?median-lighthouse-over-time=seo#lighthouse"
+            },
+            {
+              "endpoint": "lighthouse",
+              "category": "best_practices",
+              "metric": "median_score_pct",
+              "label": "Best Practices",
+              "url": "?median-lighthouse-over-time=best_practices#lighthouse"
+            }
+          ]
+        },
+        "lighthouse_timeseries": {
+          "title": "Lighthouse over time",
+          "description": "Placeholder text",
+          "id": "lighthouse_timeseries",
+          "endpoint": "lighthouse",
+          "metric": "median_score_pct",
+          "summary": true,
+          "subcategory": {
+            "base": "median_lighthouse_score_",
+            "param": "median-lighthouse-over-time",
+            "default": "performance",
+            "options": [
+              {
+                "label": "Performance",
+                "value": "performance"
+              },
+              {
+                "label": "Accessibility",
+                "value": "accessibility"
+              },
+              {
+                "label": "SEO (Search Engine Optimisation)",
+                "value": "seo"
+              },
+              {
+                "label": "Best practices",
+                "value": "best_practices"
+              }
+            ]
+          },
+          "table": {
+            "param":"median-lighthouse-over-time",
+            "default": "performance",
+            "caption": "Lighthouse scores",
+            "columns": [
+              {
+                "key": "date",
+                "name": "Date"
+              },
+              {
+                "key": "median_score_pct",
+                "name": "Median score",
+                "className": "main-cell"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          },
+          "viz": {
+            "base": "median_lighthouse_score_",
+            "param": "median-lighthouse-over-time",
+            "default": "performance",
+            "title": "Scores over time",
+            "metric": "median_score_pct",
+            "height": 600,
+            "series": {
+              "breakdown": "client",
+              "values": [
+                {
+                  "name": "desktop",
+                  "color": "#669E8E"
+                },
+                {
+                  "name": "mobile",
+                  "color": "#BD6EBE"
+                }
+              ],
+              "defaults": [
+                {
+                  "name": "Desktop",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "Mobile",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "Lighthouse Score"
+            }
+          }
+        },
+        "weight_summary": {
+          "title": "Latest page weight",
+          "cards": [
+            {
+              "endpoint": "pageWeight",
+              "category": "images",
+              "metric": "median_bytes",
+              "label": "Image Weight",
+              "url": "?weight-over-time=image#page-weight",
+              "suffix": " kB"
+            },
+            {
+              "endpoint": "pageWeight",
+              "category": "js",
+              "metric": "median_bytes",
+              "label": "JavaScript Size",
+              "url": "?weight-over-time=js#page-weight",
+              "suffix": " kB"
+            },
+            {
+              "endpoint": "pageWeight",
+              "category": "total",
+              "metric": "median_bytes",
+              "label": "Total Page Weight",
+              "url": "?weight-over-time=total#page-weight",
+              "suffix": " kB"
+            }
+          ]
+        },
+        "weight_timeseries": {
+          "title": "Weight over time",
+          "description": "Placeholder text",
+          "id": "weight_timeseries",
+          "summary": true,
+          "endpoint": "pageWeight",
+          "default": "images",
+          "metric": "median_bytes",
+          "subcategory": {
+            "base": "median_bytes_",
+            "param": "weight-over-time",
+            "default": "total",
+            "options": [
+              {
+                "label": "Total page weight",
+                "value": "total"
+              },
+              {
+                "label": "Image weight",
+                "value": "images"
+              },
+              {
+                "label": "JavaScript transfer size",
+                "value": "js"
+              }
+            ]
+          },
+          "table": {
+            "param":"weight-over-time",
+            "default": "images",
+            "caption": "Weight",
+            "columns": [
+              {
+                "name": "Date",
+                "key": "date"
+              },
+              {
+                "name": "Median Bytes",
+                "key": "median_bytes",
+                "suffix": "kB",
+                "className": "main-cell"
+              },
+              {
+                "name": "Client",
+                "key": "client",
+                "className": "client"
+              }
+            ]
+          },
+          "viz": {
+            "base": "median_bytes_",
+            "param": "weight-over-time",
+            "default": "images",
+            "title": "Image weight over time",
+            "metric": "median_bytes",
+            "height": 600,
+            "series": {
+              "breakdown": "client",
+              "values": [
+                {
+                  "name": "desktop",
+                  "color": "#669E8E",
+                  "suffix": " kB"
+                },
+                {
+                  "name": "mobile",
+                  "color": "#BD6EBE",
+                  "suffix": " kB"
+                }
+              ],
+              "defaults": [
+                {
+                  "name": "Desktop",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "Mobile",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "Weight in kB"
+            }
+          }
+        }
+      }
+    },
+    "comparison": {
+      "id": "comparison",
+      "title": "Comparison",
+      "subtitle": "Technology Report",
+      "config": {
+        "colors": {
+          "app": [
+            "#5980EB",
+            "#D55316",
+            "#2C2F70",
+            "#68A16D",
+            "#B979A7",
+            "#AC8D1C",
+            "#742F53",
+            "#449DB1",
+            "#8E3496",
+            "#CB377C"
+          ],
+          "overrides": {
+            "WordPress": "#ff0000"
+          }
+        },
+        "default": {
+          "app": ["ALL", "WordPress", "Drupal"],
+          "series": {
+            "breakdown": "app"
+          }
+        },
+        "tech_comparison_summary": {
+          "id": "tech_comparison_summary",
+          "table": {
+            "caption": "Summary",
+            "columns": [
+              {
+                "key": "technology",
+                "name": "Tech",
+                "type": "heading"
+              },
+              {
+                "key": "origins",
+                "name": "Origins",
+                "breakdown": "subcategory",
+                "subcategory": "adoption",
+                "endpoint": "adoption",
+                "metric": "origins"
+              },
+              {
+                "key": "good_pct",
+                "name": "Overall good CWV",
+                "breakdown": "subcategory",
+                "subcategory": "overall",
+                "suffix": "%",
+                "className": "main-cell pct-value",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "good_pct",
+                "name": "FID",
+                "breakdown": "subcategory",
+                "subcategory": "FID",
+                "suffix": "%",
+                "endpoint": "vitals",
+                "metric": "good_pct"
+              },
+              {
+                "key": "medium_score_pct",
+                "name": "Accessibility",
+                "breakdown": "subcategory",
+                "subcategory": "accessibility",
+                "endpoint": "lighthouse",
+                "metric": "median_score_pct"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          }
+        },
+        "good_cwv_timeseries": {
+          "title": "Good Core Web Vitals over time",
+          "description": "Placeholder - combination of several metrics",
+          "id": "good_cwv_timeseries",
+          "endpoint": "vitals",
+          "metric": "good_pct",
+          "default": "overall",
+          "subcategory": {
+            "base": "pct_good_",
+            "param": "good-cwv-over-time",
+            "default": "overall",
+            "options": [
+              {
+                "label": "Overall good CWVs",
+                "value": "overall"
+              },
+              {
+                "label": "LCP",
+                "value": "LCP"
+              },
+              {
+                "label": "FID",
+                "value": "FID"
+              },
+              {
+                "label": "CLS",
+                "value": "CLS"
+              },
+              {
+                "label": "FCP",
+                "value": "FCP"
+              },
+              {
+                "label": "TTFB",
+                "value": "TTFB"
+              },
+              {
+                "label": "INP",
+                "value": "INP"
+              }
+            ]
+          },
+          "table": {
+            "param": "good-cwv-over-time",
+            "default": "overall",
+            "caption": "Good Core Web Vitals placeholder",
+            "columns": [
+              {
+                "key": "date",
+                "name": "Date",
+                "type": "heading"
+              },
+              {
+                "key": "good_pct",
+                "name": "Good scores",
+                "breakdown": "app",
+                "suffix": "%",
+                "className": "main-cell pct-value"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          },
+          "summary": true,
+          "viz": {
+            "title": "Origins with good core web vitals over time",
+            "base": "pct_good_",
+            "param": "good-cwv-over-time",
+            "default": "overall",
+            "metric": "good_pct",
+            "height": 600,
+            "series": {
+              "breakdown": "app",
+              "suffix": "%",
+              "defaults": [
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ],
+              "xAxis": {
+                "title": "Monthly entries",
+                "tickAmount": 12,
+                "defaults": [
+                  "Jan",
+                  "Feb",
+                  "Mar",
+                  "Apr",
+                  "May",
+                  "Jun",
+                  "Jul",
+                  "Aug",
+                  "Sep",
+                  "Oct",
+                  "Nov",
+                  "Dec"
+                ]
+              },
+              "yAxis": {
+                "title": "% Origins with good scores"
+              }
+            }
+          }
+        },
+        "lighthouse_timeseries": {
+          "title": "Lighthouse over time",
+          "description": "Placeholder text",
+          "id": "lighthouse_timeseries",
+          "endpoint": "lighthouse",
+          "metric": "median_score_pct",
+          "subcategory": {
+            "base": "median_lighthouse_score_",
+            "param": "median-lighthouse-over-time",
+            "default": "performance",
+            "options": [
+              {
+                "label": "Performance",
+                "value": "performance"
+              },
+              {
+                "label": "Accessibility",
+                "value": "accessibility"
+              },
+              {
+                "label": "SEO (Search Engine Optimisation)",
+                "value": "seo"
+              },
+              {
+                "label": "Best practices",
+                "value": "best_practices"
+              }
+            ]
+          },
+          "table": {
+            "param": "median-lighthouse-over-time",
+            "default": "performance",
+            "caption": "Lighthouse placeholder",
+            "columns": [
+              {
+                "key": "date",
+                "name": "Date",
+                "type": "heading"
+              },
+              {
+                "key": "median_score_pct",
+                "name": "Median lighthouse score",
+                "breakdown": "app",
+                "className": "main-cell"
+              },
+              {
+                "key": "client",
+                "name": "Client",
+                "className": "client"
+              }
+            ]
+          },
+          "summary": true,
+          "viz": {
+            "title": "Lighthouse scores over time",
+            "base": "median_lighthouse_score_",
+            "param": "median-lighthouse-over-time",
+            "default": "performance",
+            "metric": "median_score_pct",
+            "series": {
+              "breakdown": "app",
+              "defaults": [
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "Lighthouse Score"
+            }
+          }
+        },
+        "weight_timeseries": {
+          "title": "Page weight over time",
+          "description": "Placeholder text",
+          "id": "weight_timeseries",
+          "endpoint": "pageWeight",
+          "metric": "median_bytes",
+          "default": "total",
+          "subcategory": {
+            "base": "median_bytes_",
+            "param": "median-weight-over-time",
+            "default": "performance",
+            "options": [
+              {
+                "label": "Total page weight",
+                "value": "total"
+              },
+              {
+                "label": "Image weight",
+                "value": "images"
+              },
+              {
+                "label": "JavaScript transfer size",
+                "value": "js"
+              }
+            ]
+          },
+          "table": {
+            "param":"median-weight-over-time",
+            "default": "total",
+            "caption": "Weight",
+            "columns": [
+              {
+                "name": "Date",
+                "key": "date"
+              },
+              {
+                "name": "Median Bytes",
+                "key": "median_bytes",
+                "suffix": "kB",
+                "className": "main-cell",
+                "breakdown": "app"
+              },
+              {
+                "name": "Client",
+                "key": "client",
+                "className": "client"
+              }
+            ]
+          },
+          "summary": true,
+          "viz": {
+            "title": "Median page weight over time",
+            "base": "median_bytes",
+            "param": "median-weight-over-time",
+            "default": "total",
+            "metric": "median_bytes",
+            "series": {
+              "breakdown": "app",
+              "suffix": " kB",
+              "defaults": [
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ]
+            },
+            "xAxis": {
+              "title": "Monthly entries",
+              "tickAmount": 12,
+              "defaults": [
+                "Jan",
+                "Feb",
+                "Mar",
+                "Apr",
+                "May",
+                "Jun",
+                "Jul",
+                "Aug",
+                "Sep",
+                "Oct",
+                "Nov",
+                "Dec"
+              ]
+            },
+            "yAxis": {
+              "title": "Weight in kB"
+            }
+          }
+        },
+        "adoption_timeseries": {
+          "title": "Origins over time",
+          "description": "Placeholder text",
+          "id": "adoption_timeseries",
+          "endpoint": "adoption",
+          "metric": "origins",
+          "default": "adoption",
+          "table": {
+            "param":"",
+            "caption": "Adoption",
+            "default": "adoption",
+            "columns": [
+              {
+                "name": "Date",
+                "key": "date"
+              },
+              {
+                "name": "Usage",
+                "key": "origins",
+                "className": "main-cell",
+                "breakdown": "app"
+              },
+              {
+                "name": "Client",
+                "key": "client",
+                "className": "client"
+              }
+            ]
+          },
+          "summary": true,
+          "viz": {
+            "title": "Origins over time",
+            "metric": "origins",
+            "default": "adoption",
+            "series": {
+              "breakdown": "app",
+              "defaults": [
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                },
+                {
+                  "name": "App",
+                  "data": [0,0,0,0,0,0,0,0,0,0,0,0]
+                }
+              ],
+              "xAxis": {
+                "title": "Monthly entries",
+                "tickAmount": 12,
+                "defaults": [
+                  "Jan",
+                  "Feb",
+                  "Mar",
+                  "Apr",
+                  "May",
+                  "Jun",
+                  "Jul",
+                  "Aug",
+                  "Sep",
+                  "Oct",
+                  "Nov",
+                  "Dec"
+                ]
+              },
+              "yAxis": {
+                "title": "Amount of origins",
+                "tickAmount": 3
+              }
+            }
+          }
+        }
+      },
+      "description": "Comparison placeholder"
+    }
+  },
+
+  "labels": {
+    "metrics": {
+      "lighthouse": {
+        "general": {
+          "description": "Lighthouse has audits for performance, accessibility, progressive web apps, SEO, and more. Based on the audits, a score is calculated. Currently, this section visualizes median scores, but in the future you'll also be able to explore the details of the audits here."
+        },
+        "performance": {
+          "title": "Performance",
+          "description": "In general, only metrics contribute to your Lighthouse Performance score, not the results of Opportunities or Diagnostics. "
+        },
+        "accessibility": {
+          "title": "Accessibility",
+          "description": "The Lighthouse Accessibility score is a weighted average of all accessibility audits. Weighting is based on axe user impact assessments. Each accessibility audit is pass or fail. Unlike the Performance audits, a page doesn't get points for partially passing an accessibility audit."
+        },
+        "seo": {
+          "title": "SEO",
+          "description": "These checks ensure that your page is following basic search engine optimization advice. There are many additional factors Lighthouse does not score here that may affect your search ranking, including performance on Core Web Vitals."
+        },
+        "best_practices": {
+          "title": "Best Practices",
+          "description": "This ensures that your page is built using modern web development best practices."
+        }
+      },
+      "vitals": {
+        "overall": {
+          "label": "Overall Core Web Vitals",
+          "title": "Passes Core Web Vitals",
+          "description": "The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a good experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics."
+        },
+        "LCP": {
+          "label": "LCP",
+          "title": "Good Largest Contentful Paint",
+          "description": "Largest Contentful Paint (LCP) is an important, stable Core Web Vital metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful. Good experiences are less than or equal to 2.5 seconds."
+        },
+        "FID": {
+          "label": "FID",
+          "title": "Good First Input Delay",
+          "description": "First Input Delay (FID) measures the time from when a user first interacts with a page, to the time when the browser is actually able to begin processing event handlers in response to that interaction. Sites should strive to have a First Input Delay of 100 milliseconds or less. FID will be replaced by Interaction to Next Paint (INP) as a Core Web Vital in March 2024."
+        },
+        "CLS": {
+          "label": "CLS",
+          "title": "Good Cumulative Layout Shift",
+          "description": "The Cumulative Layout Shift (CLS) score is a unitless value based on a calculation of how much content is shifting and by how far. Sites should strive to have a CLS of 0.1 or less for at least 75% of page visits."
+        },
+        "FCP": {
+          "label": "FCP",
+          "value": "fcp",
+          "title": "Good First Contentful Paint",
+          "description": "The percentage of origins with good FCP experiences, less than or equal to 1.8 seconds"
+        },
+        "TTFB": {
+          "label": "TTFB",
+          "title": "Good Time To First Byte",
+          "description": "TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive. A good TTFB is less than or equal to 800ms."
+        },
+        "INP": {
+          "label": "INP",
+          "title": "Good Interaction to Next Paint",
+          "description": "INP is a metric that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, ignoring outliers. A good experience is less than or equal to 200ms."
+        }
+      },
+      "pageWeight": {
+        "images": {
+          "title": "Image Weight",
+          "description": "todo"
+        },
+        "js": {
+          "title": "JavaScript Transfer Size",
+          "description": "todo"
+        },
+        "total": {
+          "title": "Total Page Weight",
+          "description": "todo"
+        }
+      },
+      "adoption": {
+        "adoption": {
+          "title": "Adoption",
+          "description": "Todo"
+        }
+      }
+    },
+    "values": {
+      "date": "Date",
+      "client": "Client",
+      "origins": "Origins",
+
+      "origins_eligible_for_cwv": "Eligible",
+      "origins_eligible_for_fid": "Eligible",
+      "origins_eligible_for_cls": "Eligible",
+      "origins_eligible_for_lcp": "Eligible",
+      "origins_eligible_for_fcp": "Eligible",
+      "origins_eligible_for_inp": "Eligible",
+      "origins_eligible_for_ttfb": "Eligible",
+
+      "origins_with_good_cwv": "Having good CWVs",
+      "origins_with_good_fid": "Having good FID",
+      "origins_with_good_cls": "Having good CLS",
+      "origins_with_good_lcp": "Having good LCP",
+      "origins_with_good_fcp": "Having good FCP",
+      "origins_with_good_inp": "Having good INP",
+      "origins_with_good_ttfb": "Having good TTFB",
+
+      "pct_good_cwv": "% Good CWVs",
+      "pct_good_fid": "% Good FID",
+      "pct_good_cls": "% Good CLS",
+      "pct_good_lcp": "% Good LCP",
+      "pct_good_fcp": "% Good FCP",
+      "pct_good_inp": "% Good INP",
+      "pct_good_ttfb": "% Good TTFB",
+
+      "median_lighthouse_score_accessibility": "Median accessibility",
+      "median_lighthouse_score_performance": "Median performance",
+      "median_lighthouse_score_pwa": "Median PWA",
+      "median_lighthouse_score_seo": "Median SEO",
+      "median_lighthouse_score_best_practices": "Median best practices",
+
+      "median_bytes_image":"Median bytes image",
+      "median_bytes_js":"Median bytes js",
+      "median_bytes_total":"Median bytes total"
+    }
+  },
+  "graphic": {
+    "bgcolor": "#fff",
+    "primary": {
+      "color": "#444",
+      "icon": "fas fa-wrench"
+    },
+    "secondary": {
+      "color": "rgba(0, 0, 0, 0.3)",
+      "icon": "fas fa-tachometer-alt"
+    }
+  }
+}
diff --git a/docs/cwv_tech_report.md b/docs/cwv_tech_report.md
new file mode 100644
index 00000000..5632703e
--- /dev/null
+++ b/docs/cwv_tech_report.md
@@ -0,0 +1,110 @@
+# CWV Tech Report
+
+## Development
+
+### Setting up the code
+
+See general README.md, nothing extra is required.
+
+### Useful files
+
+Some files you'll need to work in when building on this report:
+- **Configuration**: `config/techreport.json`. Contains all text labels, information on data formatting and structure, and anything else that needs to be configured in one central locaiton. Used by both the server and client to render the page.
+- **Routing**: `server/routes.py`. Where the page templates get loaded based on the URL formatting. Functionality specific to this tech report is located in `server/techreport.py` and called from the routes file.
+- **Page templates**: `templates/techreport/*.html`. The structure of the different pages is located in the techreport folder, and used as SSR templates. `techreport.html` is the main tech report base, and where the shared JS and CSS is loaded from.
+- **Re-usable HTML**: `templates/techreport/components/*.html`. Re-usable UI components are added in the components folder, and included from the page templates. These may be modified in JS, but load with empty/placeholder content without it.
+- **Initializing the JS**: `src/js/techreport/index.js`. All the JS code related to this report is in the `techreport` folder. The code for the different UI elements and features is split up in separate files, and the `index.js` is the main one called from the `techreport.py` page.
+- **Sections**: `src/js/techreport/section.js`. The report is split up in several sections based on the different metrics.
+- **Timeseries**: `src/js/techreport/timeseries.js`. This contains all functionality related to the timeseries container, including: switching sub-metric, latest data highlight, rendering the highcharts timeseries, table toggle.
+
+## How it works
+
+The report is built using Python, HTML/CSS, and vanilla JavaScript. We're using Highcharts for the visualizations, with the export and accessibility module added (built-in table altenatives, keyboard nav, etc). The page skeleton gets built on the server side, and populated with data on the client.
+
+### Configurations
+
+The configurations for the tech report can be found in the **`/config/techreport.json`** file. They're passed in to the JavaScript from the **`/templates/techreport.html`** file.
+
+#### `techreport.json`
+
+**TODO**: Example to come 🙂
+
+### Server-side: rendering of the page frame
+
+Based on the URL, the server decides which report template to load:
+- Landing
+- Drilldown
+- Comparison
+
+This is currently based on `/techreport/<pageId>` in the url, but could in the future also be a combination of this and the number of technologies present in the arguments.
+
+Each page is made out of sections (based on the metrics), that each contain a collection of visualizations. The static skeleton content for these are rendered server-side, and based on the configurations in the **`techreport.json`** file.
+
+### Client-side: data fetching and functionality
+
+On the client, through **`/src/js/techreport/index.js`**, the data is fetched and filled into the components on the page.
+
+The Highcharts components (`timeseries.js`) are rendered with placeholder data (defined in the config) first, to avoid having a long period without graphs while waiting for the API.
+
+#### Data
+
+**Future behavior**: There will be one API per metric, which will be called from the section level.
+
+**Current behavior**: The data currently comes from static JSONs and is fetched from inside the **`techreport/index.js`** file, and then passed on to the different sections.
+
+#### HTML
+
+All the HTML files are located in the `templates/techreport` folder. The top level files in that folder are the main pages that will be rendered. The `components` subfolder contains reusable bits of HTML that can be included in the pages and templates.
+
+The `templates` subfolder contains `<template>`s used in (web)components.
+
+```
+/templates
+  /techreport
+    /components
+      filters.html
+      ...
+    /templates
+      table_general.html
+      ...
+    comparison.html
+    drilldown.html
+    landing.html
+    ...
+```
+
+#### JavaScript
+
+**`/src/js/techreport/index.js`** is the main JavaScript file, from where all sections/visualizations are initiated and updated, and from where the data currently gets loaded.
+
+Different `Section` instances are created by based on the different `[data-type="section"]`s on the page.
+
+Currently, the JSON files are fetched from within the `Techreport`, and on success the `Section`s get updated with the new data. Later this data will be fetched with an API for each `Section`.
+
+When the data in the `Section` updates, the code updates the different components. The `Section` is responsible for fetching the data or watching section-level interactions. The components, like `Timeseries` (**`/src/js/techreport/timeseries.js`**), parse the data into the format required and then update the HTML with it.
+
+#### CSS
+
+We use vanilla CSS, no libraries. Bootstrap is loaded as well because it's used in the shared the header.
+
+## Behavior
+
+### Filters
+
+**On a global level**, the data can be filtered by:
+- App / technology
+- Geography
+- Rank
+
+When changing any of these, the user has to submit the form, after which the data gets fetched through the API(s).
+
+These parameters also update in the URL, which is used by the server-side code to render a page outline, and carry over between drilldown/comparison page.
+
+**On a page level**, the selected cliented can be changed between desktop and mobile. This does not require a new API call.
+
+**On a component level**, the selected submetric can be changed. The options are different for each metric, and defined in the `techreport.json`.
+
+
+## Todos and improvements
+
+This is still a work in progress, todos will be tracked elsewhere.
diff --git a/package.json b/package.json
index a63b5769..2386ce9b 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "start": "run-script-os",
     "start:darwin:linux": "./tools/scripts/run_and_test_website.sh -d",
     "start:win32": "call tools/scripts/run_and_test_website.bat",
-    "stage": "npm run build && npm run timestamps && npm run generate && echo \"Y\" | gcloud app deploy --project httparchive-staging",
+    "stage": "npm run build && npm run timestamps && npm run generate && echo \"Y\" | gcloud app deploy --project httparchive --no-promote --version=technology-report",
     "testdeploy": "npm run build && npm run timestamps && npm run generate && echo \"Y\" | gcloud app deploy --project httparchive --no-promote",
     "deploy": "./tools/scripts/deploy.sh",
     "timestamps": "node ./tools/generate/generate_timestamps",
diff --git a/server/csp.py b/server/csp.py
index dea06d46..97d8a1b4 100644
--- a/server/csp.py
+++ b/server/csp.py
@@ -11,6 +11,7 @@
         "spdcrv.global.ssl.fastly.net",
         "lux.speedcurve.com",
         "'unsafe-inline'",
+        "dev-gw-2vzgiib6.ue.gateway.dev",
     ],
     "font-src": ["'self'"],
     "connect-src": [
@@ -24,6 +25,7 @@
         "analytics.google.com",
         "*.analytics.google.com",
         "stats.g.doubleclick.net",
+        "dev-gw-2vzgiib6.ue.gateway.dev",
     ],
     "img-src": ["'self'", "https:"],
     "frame-src": ["'none'"],
diff --git a/server/routes.py b/server/routes.py
index 5246cb56..c738f6d5 100644
--- a/server/routes.py
+++ b/server/routes.py
@@ -4,6 +4,7 @@
 
 from . import app, talisman, render_template, url_for
 from . import reports as report_util
+from . import techreport as tech_report_util
 from . import faq as faq_util
 
 
@@ -66,6 +67,48 @@ def reports():
     return render_template("reports.html", reports=all_reports)
 
 
+@app.route("/reports/techreport/<page_id>", strict_slashes=False)
+def techreport(page_id):
+    # Needed for the header dropdown
+    all_reports = report_util.get_reports()
+
+    # Get the configuration for the tech report
+    tech_report = tech_report_util.get_report()
+
+    # Get the settings for the current page
+    active_tech_report = tech_report.get("pages").get(page_id)
+
+    # Add the technologies requested in the URL to the filters
+    # Use the default configured techs as fallback
+    # Use ["ALL"] if there is nothing configured
+    requested_technologies = active_tech_report.get("config").get("default").get(
+        "app"
+    ) or ["ALL"]
+
+    if request.args.get("tech"):
+        requested_technologies = request.args.get("tech").split(",")
+
+    # Get the filters
+    requested_geo = request.args.get("geo") or "ALL"
+    requested_rank = request.args.get("rank") or "ALL"
+    filters = {
+        "geo": requested_geo,
+        "rank": requested_rank,
+        "app": requested_technologies,
+    }
+
+    active_tech_report["filters"] = filters
+
+    return render_template(
+        "techreport/%s.html" % page_id,
+        active_page=page_id,
+        tech_report_labels=tech_report.get("labels"),
+        tech_report_config=tech_report.get("config"),
+        tech_report_page=active_tech_report,
+        reports=all_reports,
+    )
+
+
 @app.route("/reports/<report_id>", strict_slashes=False)
 def report(report_id):
 
diff --git a/server/techreport.py b/server/techreport.py
new file mode 100644
index 00000000..6730d0c9
--- /dev/null
+++ b/server/techreport.py
@@ -0,0 +1,17 @@
+import json
+
+
+def update_report():
+    global tech_report_json
+    with open("config/techreport.json") as tech_report_file:
+        tech_report_json = json.load(tech_report_file)
+
+
+def get_report():
+    global tech_report_json
+    update_report()
+
+    return tech_report_json
+
+
+update_report()
diff --git a/server/tests/routes_test.py b/server/tests/routes_test.py
index a036d100..4e72fb6b 100644
--- a/server/tests/routes_test.py
+++ b/server/tests/routes_test.py
@@ -228,3 +228,22 @@ def test_render_js_cache_control(client):
     assert response.status_code == 200 and "max-age=10800" in response.headers.get(
         "Cache-Control"
     )
+
+
+def test_tech_report_compare(client):
+    response = client.get(
+        "/reports/techreport/comparison?tech=jQuery%2CWordPress&geo=ALL&rank=ALL"
+    )
+    assert response.status_code == 200
+
+
+def test_tech_report_drilldown(client):
+    response = client.get("/reports/techreport/drilldown?geo=ALL&rank=ALL")
+    assert response.status_code == 200
+
+
+def test_tech_report_drilldown_wordpress(client):
+    response = client.get(
+        "/reports/techreport/drilldown?tech=WordPress&geo=ALL&rank=ALL"
+    )
+    assert response.status_code == 200
diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js
new file mode 100644
index 00000000..c31b9c8c
--- /dev/null
+++ b/src/js/components/drilldownHeader.js
@@ -0,0 +1,46 @@
+function setTitle(title) {
+  const mainTitle = document.querySelector('h2 span.main-title');
+  mainTitle.textContent = title;
+}
+
+function setCategories(categories) {
+  if(categories?.length > 0) {
+    /* Fetch the category list element and empty it. */
+    const list = document.querySelector('.intro .category-list');
+    list.innerHTML = '';
+
+    /* Get the first 5 elements of the array */
+    const _categories = categories.slice(0,5);
+    _categories.forEach((category)  => {
+      const cellTemplate = document.createElement('li');
+      cellTemplate.className('cell');
+      cellTemplate.textContent = category;
+      list.appendChild(cellTemplate);
+    });
+
+    /* If there are more than 5 categories, show a message */
+    if(categories.length > 5) {
+      const more = categories.length - 5;
+      const cellTemplate = document.createElement('li');
+      cellTemplate.className('cell');
+      cellTemplate.textContent = `+ ${more} more`;
+      list.appendChild(cellTemplate);
+    }
+  }
+}
+
+function update(data, filters) {
+  const app = filters.app[0];
+
+  if(app) {
+    setTitle(app);
+  }
+
+  if(data[app]) {
+    setCategories(data[app][0]?.category?.split(", "));
+  }
+}
+
+export const DrilldownHeader = {
+  update,
+}
diff --git a/src/js/components/filters.js b/src/js/components/filters.js
new file mode 100644
index 00000000..b0c85a5d
--- /dev/null
+++ b/src/js/components/filters.js
@@ -0,0 +1,253 @@
+const { DataUtils } = require("../techreport/utils/data");
+class Filters {
+  constructor(filterData, filters) {
+    this.categories = filterData?.categories;
+    this.technologies = filterData?.technologies;
+    this.geos = filterData?.geos;
+    this.ranks = filterData?.ranks;
+
+    this.filters = filters;
+
+    this.bindFilterListener();
+  }
+
+  /* Add event listeners to the interactive components */
+  bindFilterListener() {
+    /* Submit the form */
+    const submit = document.getElementById('submit-form');
+    if(submit) {
+      submit.addEventListener('click', this.setFilter);
+    }
+
+    /* Add a new technology */
+    const addButton = document.getElementById('add-tech');
+    if(addButton) {
+      addButton.addEventListener('click', this.addTechnologySelector);
+    }
+
+    /* Remove a technology */
+    const removeButtons = Object.values(document.getElementsByClassName('remove-tech'));
+    removeButtons?.forEach(removeButton => removeButton.addEventListener('click', this.removeTechnology));
+
+    /* Choose a category */
+    const categoriesSelectors = Object.values(document.getElementsByClassName('categories-selector'));
+    categoriesSelectors.forEach((categorySelector) => {
+      categorySelector.addEventListener('change', (event) => this.updateCategory(event));
+    });
+  }
+
+  /* Submit form */
+  setFilter(event) {
+    event.preventDefault();
+
+    const url = new URL(location.href);
+
+    /* Get the geo and rank filter */
+    const geo = document.getElementsByName('geo')[0].value;
+    const rank = document.getElementsByName('rank')[0].value;
+
+    /* Create a string of technologies */
+    let technologies = [];
+    document.getElementsByName('tech').forEach(technology => {
+      technologies.push(technology.value);
+    });
+    technologies = technologies.join(",");
+
+    /* Modify the URL with the tech */
+    url.searchParams.delete('tech');
+    url.searchParams.append('tech', technologies);
+
+    url.searchParams.delete('geo');
+    url.searchParams.append('geo', geo);
+
+    url.searchParams.delete('rank');
+    url.searchParams.append('rank', rank);
+
+
+    /* Update the url */
+    location.href = url;
+  }
+
+  /* Update the list of technologies */
+  updateTechnologies() {
+    this.technologies = DataUtils.filterDuplicates(this.technologies, 'technology');
+
+    /* Get existing tech selectors on the page */
+    const allTechSelectors = document.querySelectorAll('select.tech');
+    const techNames = this.technologies.map(element => element.app);
+
+    /* Update the options inside all of the selectors */
+    allTechSelectors.forEach(techSelector => {
+      techSelector.innerHTML = '';
+
+      /* If the technology doesn't exist, throw a warning */
+      const techNamesFiltered = techNames;
+      if(!techNamesFiltered) {
+        const errorMsg = document.createElement('p');
+        errorMsg.textContent = 'Technology not found, please select a different one';
+        techSelector.before(errorMsg);
+      }
+
+      /* Add one option per technology */
+      this.technologies.forEach((technology) => {
+        const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
+        const option = optionTmpl.querySelector('option');
+        const formattedTech = technology.technology;
+        option.textContent = technology.technology;
+        option.value = formattedTech;
+        if(formattedTech === techSelector.getAttribute('data-selected')) {
+          option.selected = true;
+        }
+        techSelector.append(optionTmpl);
+      });
+    });
+  }
+
+  /* Update the list with geographies */
+  updateGeo() {
+    const select = document.querySelector('select#geo');
+    select.innerHTML = '';
+    this.geos.forEach((geo) => {
+      const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
+      const option = optionTmpl.querySelector('option');
+      const formattedTech = geo.geo;
+      option.textContent = geo.geo;
+      option.value = formattedTech;
+      if(formattedTech === this.filters.geo) {
+        option.selected = true;
+      }
+      select.append(optionTmpl);
+    });
+  }
+
+  /* Update the list with ranks */
+  updateRank() {
+    const select = document.querySelector('select#rank');
+    select.innerHTML = '';
+    this.ranks.forEach((rank) => {
+      const optionTmpl = document.getElementById('filter-option').content.cloneNode(true);
+      const option = optionTmpl.querySelector('option');
+      const formattedTech = rank.rank;
+      option.textContent = rank.rank;
+      option.value = formattedTech;
+      if(formattedTech === this.filters.rank) {
+        option.selected = true;
+      }
+      select.append(optionTmpl);
+    });
+  }
+
+  /* Update the list with categories */
+  updateCategories() {
+    const selects = document.querySelectorAll('select[name="categories"]');
+
+    if(this.categories) {
+      selects.forEach(select => {
+        select.innerHTML = '';
+
+        const all = document.createElement('option');
+        all.value = 'ALL';
+        all.innerHTML = 'ALL';
+        select.append(all);
+
+        this.categories.forEach((category) => {
+          const option = document.createElement('option');
+          option.value = category.category;
+          option.innerHTML = category.category;
+          select.append(option);
+        });
+      })
+    }
+  }
+
+  /* Set the selected category */
+  updateCategory(event) {
+    const selectedTechs = this.categories.find(category => category.category === event.target.value)?.technologies;
+    const selectedTechInfo = [];
+    selectedTechs.forEach(selectedTech => selectedTechInfo.push(this.technologies.find(tech => tech.technology === selectedTech)));
+    const techSelector = document.getElementById(event.target.dataset.tech);
+    techSelector.innerHTML = '';
+
+    selectedTechInfo.forEach((technology) => {
+      const option = document.createElement('option');
+      const formattedTech = technology.technology;
+      option.textContent = technology.technology;
+      option.value = formattedTech;
+      if(formattedTech === techSelector.getAttribute('data-selected')) {
+        option.selected = true;
+      }
+      techSelector.append(option);
+    });
+
+  }
+
+  /* Duplicate the technology dropdowns */
+  addTechnologySelector(event) {
+    event.preventDefault();
+
+    const selectorTemplate = document.getElementById('tech-selector').content.cloneNode(true);
+
+    const selectElement = selectorTemplate.querySelector('select.tech');
+    const labelElement = selectorTemplate.querySelector('label.tech');
+    const removeButton = selectorTemplate.querySelector('.remove-tech');
+
+    const categorySelect = selectorTemplate.querySelector('select.categories-selector');
+    const categoryLabel = selectorTemplate.querySelector('label[for="categories-tech-new"]');
+    categorySelect.innerHTML = document.querySelector('select.categories-selector').innerHTML;
+    categorySelect.addEventListener('change', this.updateCategory);
+
+    /* Set a unique name on the new element (based on the amount of techs) */
+    const techId = `tech-${document.querySelectorAll('select.tech[name="tech"]').length + 1}`;
+    selectElement.setAttribute('id', techId);
+    labelElement.setAttribute('for', techId);
+    removeButton.dataset.tech = techId;
+
+    categorySelect.setAttribute('id', `${techId}-category`);
+    categoryLabel.setAttribute('for', `${techId}-category`);
+    categorySelect.setAttribute('data-tech', techId);
+
+    removeButton.classList.remove('hidden');
+
+    /* Bind functionality to the button */
+    removeButton.addEventListener('click', this.removeTechnology);
+
+    /* Fill in all techs and select the first one */
+    selectElement.innerHTML = document.querySelector('select.tech').innerHTML;
+    selectElement.getElementsByTagName('option')[0].selected = true;
+
+    categorySelect.innerHTML = document.querySelector('select.categories-selector')?.innerHTML;
+    categorySelect.getElementsByTagName('option')[0].selected = true;
+
+    /* Add the new tech to the end of the list */
+    const techs = document.getElementsByClassName('tech-selector-group');
+    const last = techs[techs.length - 1];
+    last.after(selectorTemplate);
+
+    /* If this is there are 2 or more technologies, the first one can be removed too */
+    if(techs.length === 2) {
+      techs[0].getElementsByClassName('remove-tech')[0].classList.remove('hidden');
+    }
+  }
+
+  /* Remove the chosen technology option */
+  removeTechnology(event) {
+    event.preventDefault();
+
+    /* Remove the tech selector group from the DOM */
+    const tech = document.querySelector(`.tech-selector-group[data-tech="${event.target.dataset.tech}"]`);
+    tech.remove();
+
+    /* Don't show any remove buttons if there is only one element left */
+    this.hideRemoveButton();
+  }
+
+  /* Hide possibility to remove tech when only one is selected */
+  hideRemoveButton() {
+    const techs = document.getElementsByClassName('tech-selector-group');
+    if(techs.length === 1) {
+      techs[0].getElementsByClassName('remove-tech')[0].classList.add('hidden');
+    }
+  }
+}
+
+export default Filters;
diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js
new file mode 100644
index 00000000..29f0108c
--- /dev/null
+++ b/src/js/techreport/index.js
@@ -0,0 +1,318 @@
+import Filters from '../components/filters';
+const { DrilldownHeader } = require("../components/drilldownHeader");
+const { DataUtils } = require("./utils/data");
+const { UIUtils } = require("./utils/ui");
+
+class TechReport {
+  constructor(pageId, page, config, labels) {
+    this.filters = page.filters;
+    this.allData = [];
+    this.config = config;
+    this.labels = labels;
+    this.pageId = pageId;
+    this.sections = {};
+
+    // Pass the labels into the page data
+    this.page = {
+      ...page,
+      config: {
+        ...page.config,
+        labels: labels,
+      },
+    };
+
+    // Load the page
+    this.initializePage();
+    this.getAllMetricData();
+    this.bindSettingsListeners();
+  }
+
+  // Initialize the sections for the different pages
+  initializePage() {
+    switch(this.pageId) {
+      case 'landing':
+        this.initializeLanding();
+        break;
+
+      case 'drilldown':
+        this.initializeReport();
+        break;
+
+      case 'comparison':
+        this.initializeReport();
+        break;
+    }
+  }
+
+  // TODO
+  initializeLanding() {
+  }
+
+  // TODO
+  initializeReport() {
+    // TODO: Move to function
+    const showIndicators = localStorage.getItem('showIndicators');
+    document.querySelector('main').dataset.showIndicators = showIndicators;
+    document.querySelector('#indicators-check').checked = showIndicators === 'true';
+
+    // TODO: Move to function
+    const theme = localStorage.getItem('haTheme');
+    document.querySelector('html').dataset.theme = theme;
+    const btn = document.querySelector('.theme-switcher');
+    if(theme === 'dark') {
+      btn.innerHTML = '🌝 Switch to light theme';
+    } else if(theme === 'light') {
+      btn.innerHTML = '🌚 Switch to dark theme';
+    }
+
+    const sections = document.querySelectorAll('[data-type="section"]');
+    // TODO: add general config too
+    sections.forEach(section => {
+      const reportSection = new Section(
+        section.id,
+        this.page.config,
+        this.config,
+        this.filters,
+        this.allData
+      );
+      this.sections[section.id] = reportSection;
+    });
+
+    this.bindClientListener();
+    this.updateStyling();
+  }
+
+  // Watch for changes in the client dropdown
+  bindClientListener() {
+    const select = document.getElementById('client-breakdown');
+
+    if(select) {
+      select.onchange = (event) => this.updateClient(event);
+    }
+  }
+
+  bindSettingsListeners() {
+    const indicatorSetting = document.querySelector('input[name="indicators-check"]');
+    if(indicatorSetting) {
+      indicatorSetting.onchange = (event) => {
+        document.querySelector('main').dataset.showIndicators = event.target.checked;
+        localStorage.setItem('showIndicators', event.target.checked);
+
+        Object.values(this.sections).forEach(section => {
+          section.updateSection();
+        });
+
+      }
+    }
+
+    const themeSwitcher = document.querySelector('button.theme-switcher');
+    if(themeSwitcher) {
+      themeSwitcher.addEventListener('click', (event) => {
+        const currentTheme = document.querySelector('html').dataset.theme;
+
+        if(currentTheme !== 'dark') {
+          document.querySelector('html').dataset.theme = 'dark';
+          localStorage.setItem('haTheme', 'dark');
+          event.target.innerHTML = '🌝 Switch to light theme';
+        } else {
+          document.querySelector('html').dataset.theme = 'light';
+          localStorage.setItem('haTheme', 'light');
+          event.target.innerHTML = '🌚 Switch to dark theme';
+        }
+      });
+    }
+  }
+
+  updateClient(event) {
+    const client = event.target.value;
+
+    // Update the URL
+    const url = new URL(window.location.href);
+    url.searchParams.set(`client`, client);
+    window.history.replaceState(null, null, url);
+
+    // Update selected client property everywhere
+    document.querySelectorAll('[data-client]').forEach(component => {
+      component.dataset.client = client;
+    });
+
+    // Update the sections
+    Object.values(this.sections).forEach(section => {
+      section.updateSection();
+    });
+
+    // Update labels
+    document.querySelectorAll('[data-slot="client"]').forEach(component => {
+      component.innerHTML = client;
+    });
+  }
+
+  // New API
+  getAllMetricData() {
+    const technologies = this.filters.app;
+
+    const apis = [
+      {
+        endpoint: 'cwv',
+        metric: 'vitals',
+        parse: DataUtils.parseVitalsData,
+      },
+      {
+        endpoint: 'lighthouse',
+        metric: 'lighthouse',
+        parse: DataUtils.parseLighthouseData,
+      },
+      {
+        endpoint: 'adoption',
+        metric: 'adoption',
+        parse: DataUtils.parseAdoptionData,
+      },
+      {
+        endpoint: 'page-weight',
+        metric: 'pageWeight',
+        parse: DataUtils.parsePageWeightData,
+      },
+    ];
+
+    const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1';
+
+    const technology = technologies.join('%2C')
+      .replaceAll(" ", "%20");
+
+    const geo = this.filters.geo.replaceAll(" ", "%20");
+    const rank = this.filters.rank.replaceAll(" ", "%20")
+
+    let allResults = {};
+    technologies.forEach(tech => allResults[tech] = []);
+
+    Promise.all(apis.map(api => {
+      const url = `${base}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
+
+      return fetch(url)
+        .then(result => result.json())
+        .then(result => {
+          result.forEach(row => {
+            const parsedRow = {
+              ...row,
+            }
+
+            if(api.parse) {
+              parsedRow[api.metric] = api.parse(parsedRow[api.metric], parsedRow?.date);
+            }
+
+            const resIndex = allResults[row.technology].findIndex(res => res.date === row.date);
+            if(resIndex > -1) {
+              allResults[row.technology][resIndex] = {
+                ...allResults[row.technology][resIndex],
+                ...parsedRow
+              }
+            } else {
+              allResults[row.technology].push(parsedRow);
+            }
+          });
+        })
+        .catch(error => console.log('Something went wrong', error));
+    })).then(() => {
+      this.updateComponents(allResults);
+    });
+  }
+
+  // Update components and sections that are relevant to the current page
+  updateComponents(data) {
+    switch(this.pageId) {
+      case 'landing':
+        this.updateLandingComponents(data);
+        break;
+
+      case 'drilldown':
+        this.updateDrilldownComponents(data);
+        this.getFilterInfo();
+        break;
+
+      case 'comparison':
+        this.updateComparisonComponents(data);
+        this.getFilterInfo();
+        break;
+    }
+  }
+
+  // Fetch the data for the filter dropdowns
+  getFilterInfo() {
+    const filterData = {};
+    const base = 'https://dev-gw-2vzgiib6.ue.gateway.dev/v1';
+
+    const filterApis = ['categories', 'technologies', 'ranks', 'geos'];
+
+    Promise.all(filterApis.map(api => {
+      const url = `${base}/${api}`;
+
+      return fetch(url)
+        .then(result => result.json())
+        .then(result => filterData[api] = result)
+        .catch(error => console.log('Something went wrong', error));
+    })).then(() => {
+      const FilterComponent = new Filters(filterData, this.filters);
+
+      FilterComponent.updateCategories();
+      FilterComponent.updateTechnologies();
+      FilterComponent.updateRank();
+      FilterComponent.updateGeo();
+    });
+  }
+
+  // Update the page components
+  updateLandingComponents(data) {
+    const allDataComponents = document.querySelectorAll('[data-scope="all-data"]');
+    allDataComponents.forEach((component) => {
+      component.allData = data;
+      component.page = this.page;
+      component.labels = this.labels;
+      component.setAttribute('loaded', true);
+      component.setAttribute('all_data', JSON.stringify(data));
+    });
+  }
+
+  updateDrilldownComponents(data) {
+    DrilldownHeader.update(data, this.filters);
+
+    const app = this.filters.app[0];
+
+    if(data && data[app]) {
+      UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels);
+    } else {
+      this.updateWithEmptyData();
+    }
+  }
+
+  updateComparisonComponents(data) {
+    if(data && Object.keys(data).length > 0) {
+      UIUtils.updateReportComponents(this.sections, data, data, this.page, this.labels);
+    } else {
+      this.updateWithEmptyData();
+    }
+  }
+
+  // Add error message if no data was found
+  updateWithEmptyData() {
+    const text = document.createElement('p');
+    text.textContent = 'No data found for this query';
+    text.className = 'error';
+
+    const report = document.getElementById('report-content');
+    report.innerHTML = '';
+    report.append(text);
+  }
+
+  // Add styling based on config
+  updateStyling() {
+    const series = this.page.config.default.series;
+    const body = document.querySelector('body');
+    if(series?.breakdown == 'client') {
+      series?.breakdown_values?.forEach((breakdown) => {
+        body.style.setProperty(`--breakdown-color-${breakdown.name}`, breakdown.color);
+      });
+    }
+  }
+}
+
+window.TechReport = TechReport;
diff --git a/src/js/techreport/section.js b/src/js/techreport/section.js
new file mode 100644
index 00000000..4b774d76
--- /dev/null
+++ b/src/js/techreport/section.js
@@ -0,0 +1,78 @@
+import SummaryCard from "./summaryCards";
+import TableLinked from "./tableLinked";
+
+class Section {
+  constructor(id, pageConfig, globalConfig, filters, data) {
+    this.id = id;
+    this.data = data;
+    this.pageConfig = pageConfig;
+    this.config = globalConfig;
+    this.pageFilters = filters;
+    this.components = {};
+
+    this.initializeComponents();
+  }
+
+  initializeComponents() {
+    const section = document.getElementById(this.id);
+
+    // Initialize components
+    section.querySelectorAll('[data-component]').forEach(component => {
+      switch(component.dataset.component) {
+        case "timeseries":
+          this.initializeTimeseries(component);
+          break;
+
+        case "summaryCard":
+          this.initializeSummaryCards(component);
+          break;
+
+        case "table":
+          this.initializeTable(component);
+          break;
+
+        default:
+          break;
+      }
+    });
+  }
+
+  initializeTable(component) {
+    this.components[component.dataset.id] = new TableLinked(
+      component.dataset.id,
+      this.pageConfig,
+      this.pageFilters,
+      this.data
+    );
+  }
+
+  initializeSummaryCards(component) {
+    this.components[component.dataset.id] = new SummaryCard(
+      component.dataset.id,
+      this.pageConfig,
+      this.config,
+      this.pageFilters,
+      this.data
+    );
+  }
+
+  initializeTimeseries(component) {
+    this.components[component.dataset.id] = new Timeseries(
+      component.dataset.id,
+      this.pageConfig,
+      this.pageFilters,
+      this.data
+    );
+  }
+
+  updateSection() {
+    Object.values(this.components).forEach(component => {
+      if(component.data !== this.data) {
+        component.data = this.data;
+      }
+      component.updateContent();
+    });
+  }
+}
+
+window.Section = Section;
diff --git a/src/js/techreport/summaryCards.js b/src/js/techreport/summaryCards.js
new file mode 100644
index 00000000..34caf911
--- /dev/null
+++ b/src/js/techreport/summaryCards.js
@@ -0,0 +1,73 @@
+/* Summary cards.
+ * Show static values for given metrics.
+ */
+
+import { DataUtils } from "./utils/data";
+
+class SummaryCard {
+  constructor(id, pageConfig, config, filters, data) {
+    this.data = data;
+    this.id = id;
+    this.pageConfig = pageConfig;
+    this.config = config;
+    this.pageFilters = filters;
+    this.client = 'mobile'; //TODO: get default from config
+  }
+
+  updateContent() {
+    if(this.data) {
+      // Select the HTML element that corresponds with this card
+      const query = `[data-component="summaryCard"][data-id="${this.id}"]`;
+      const card = document.querySelector(query);
+
+      // Get the latest data for the selected app/tech
+      const app = this.pageFilters.app[0];
+      const client = card.dataset.client || this.client;
+      // const filteredData = this.data?.[app]?.filter(entry => entry.client === client);
+      // filteredData?.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+      // Select value based on a pre-defined metric
+      const metric = card.dataset.metric;
+      const category = card.dataset.category;
+      const endpoint = card.dataset.endpoint;
+
+      const dataApp = this.data?.[app];
+      const latestToOldest = [...dataApp].sort((a, b) => new Date(b.date) - new Date(a.date));
+      const latestEndpoint = latestToOldest[0]?.[endpoint];
+
+      let latestValue;
+
+      if(category) {
+        const latestCategory = latestEndpoint?.find(row => row.name === category)?.[client];
+        if(metric) {
+          latestValue = latestCategory?.[metric];
+        } else {
+          latestValue = latestCategory;
+        }
+      } else {
+        latestValue = latestEndpoint?.[client];
+      }
+
+      // Update the html
+      if(latestValue) {
+        const valueSlot = card.querySelector('[data-slot="value"]');
+        valueSlot.innerHTML = latestValue;
+
+        const progress = card.querySelectorAll('.lighthouse-progress');
+        progress.forEach(circle => {
+          const scoreCategory = DataUtils.getLighthouseScoreCategories(latestValue, this.config.lighthouse_brackets);
+          const scoreCategoryName = scoreCategory?.name;
+          circle.setAttribute('style', `--offset: ${100 - latestValue};`);
+          const chart = card.querySelector('svg.progress-chart');
+          console.log('chart', chart);
+          chart.classList.add(scoreCategoryName);
+        });
+
+      }
+    }
+
+  }
+
+}
+
+export default SummaryCard;
diff --git a/src/js/techreport/table.js b/src/js/techreport/table.js
new file mode 100644
index 00000000..7d0d0b50
--- /dev/null
+++ b/src/js/techreport/table.js
@@ -0,0 +1,181 @@
+function formatData(tableConfig, data) {
+  const { id, config, apps } = tableConfig;
+
+  const component = document.getElementById(`table-${id}`);
+
+  // Get the selected subcategory
+  const subcategory = getSubcategory(config);
+  const metric = component.dataset.metric;
+  const endpoint = component.dataset.endpoint;
+
+  // Create empty array
+  const table = [];
+
+  // Loop through all of the dates
+  // Populate array of data rows with it
+  const client = component.dataset.client || 'mobile';
+
+  let _dates = [];
+
+  Object.keys(data).forEach(app => {
+    const date = data[app]?.map(entry => entry.date);
+    _dates = [...new Set([..._dates, ...date])];
+  });
+
+
+  for(let i = 0; i < _dates?.length; i++) {
+    const row = [];
+
+    // Loop through each of the column configs
+    config.columns?.forEach(column => {
+      // Create object with necessary info to find the value
+      const columnConfig = {
+        config,
+        column,
+        client,
+        subcategory,
+        metric,
+        endpoint,
+      };
+
+
+      // Add column cell for each of the apps
+      // Filter by app name and then metric (key) to find the value
+      if(column.breakdown === 'app') {
+        apps.forEach(app => {
+          row.push(getColumnCell({...columnConfig, app}, data, _dates[i]));
+        });
+      }
+
+      // Add column cell with the data for the first app
+      else {
+        const app = apps[0];
+        row.push(getColumnCell({...columnConfig, app}, data, _dates[i]));
+      }
+    });
+
+    // Add row to the table
+    table.push(row);
+  }
+
+  return table;
+}
+
+function getColumnCell(columnConfig, data, date) {
+  const { config, column, client, app, subcategory, metric, endpoint } = columnConfig;
+
+  const _data = data[app]?.find(entry => entry.date === date);
+  const endpointData = _data?.[endpoint];
+  const subcategoryData = endpointData?.find(row => row.name === subcategory);
+  const value = subcategoryData?.[client]?.[column.key];
+
+  const cell = {
+    ...column,
+    formattedKey: column.key,
+    value: value,
+    app: app
+  };
+
+  return cell;
+}
+
+// Get the selected subcategory based on url
+function getSubcategory(config) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlSubcategory = urlParams.get(config.param);
+  const subcategory = urlSubcategory || config.default || '';
+
+  return subcategory;
+}
+
+// Update the table
+function updateTable(id, config, apps, data) {
+  // Select a table based on the passed in id
+  const component = document.getElementById(`table-${id}`)
+  const tbody = component.querySelector('tbody');
+
+  // Reset what's in the table before adding new content
+  tbody.innerHTML = '';
+
+  // Collect the settings in an object
+  const tableConfig = {
+    id,
+    config,
+    apps
+  };
+
+  // Format the data per row
+  const rows = formatData(tableConfig, data);
+
+  // Add rows to the table
+  rows?.forEach(row => {
+    const tr = document.createElement('tr');
+
+    // Add columns to each row
+    row?.forEach(column => {
+      const cellType = column?.type === "heading" ? 'th' : 'td';
+      let cell = document.createElement(cellType);
+
+      let text = '';
+      let className = column.className;
+
+      const value = column.value;
+
+      // Fill in the data if it exists
+      if(value && value !== '') {
+        const suffix = column.suffix || '';
+        text = `${value}${suffix}`;
+      } else {
+        text = 'N/A';
+        className += ' no-data';
+      }
+
+      // Wrap the text in a span for styling
+      const wrapper = document.createElement('span');
+      wrapper.innerHTML = text;
+      cell.append(wrapper);
+
+      // Stylized column groups (eg format `<column 1> / <column 2>`)
+      if(column.hiddenSuffix) {
+        /* In this case applying aria-hidden because otherwise
+         * assistive tech would announce "/" at the end of col 1
+         * or as part of the heading, which may be announced weirdly.
+         * So since it's mainly decorative, we hide it as a precaution.
+         */
+        const hiddenSuffix = document.createElement('span');
+        hiddenSuffix.setAttribute('aria-hidden', 'true');
+        hiddenSuffix.innerHTML = column.hiddenSuffix;
+
+        const textWrapper = document.createElement('span');
+        textWrapper.innerHTML = text;
+
+        const cellWrapper = document.createElement(cellType);
+        cellWrapper.appendChild(textWrapper);
+        cellWrapper.appendChild(hiddenSuffix);
+
+        cell = cellWrapper;
+      }
+
+      // Expose percentages to css to use for styling
+      if(text.includes('%')) {
+        cell.setAttribute('style', `--cell-value: ${value}%`);
+        cell.dataset.value = value;
+      }
+
+      // Add classnames from the config
+      if(className) {
+        cell.className = className;
+      }
+
+      // Add cell to the row
+      tr.appendChild(cell);
+    });
+
+    // Add row to the body
+    tbody.appendChild(tr);
+  });
+}
+
+export const Table = {
+  updateTable,
+}
diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
new file mode 100644
index 00000000..cfbd1d2f
--- /dev/null
+++ b/src/js/techreport/tableLinked.js
@@ -0,0 +1,71 @@
+class TableLinked {
+  constructor(id, config, filters, data) {
+    this.id = id;
+    this.pageConfig = config;
+    this.pageFilters = filters;
+    this.submetric = ''; // TODO: Fetch the default one from somewhere
+    this.data = data;
+
+    this.updateContent();
+  }
+
+  // Update content in the table
+  updateContent() {
+    // Select a table based on the passed in id
+    const component = document.getElementById(`table-${this.id}`);
+    const tbody = component?.querySelector('tbody');
+
+    if(tbody) {
+      // Reset what's in the table before adding new content
+      tbody.innerHTML = '';
+
+      // Collect the settings in an object
+      const tableConfig = {
+        apps: this.pageFilters.app,
+        config: this.pageConfig?.[this.id]?.table,
+        id: this.id,
+      };
+
+      tableConfig.apps.forEach(app => {
+        const data = this.data[app];
+        const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date));
+        const latest = sorted?.[0];
+
+        if(latest) {
+          const tr = document.createElement('tr');
+
+          tableConfig.config?.columns?.forEach(column => {
+            let cell;
+            if(column.type === 'heading') {
+              cell = document.createElement('th');
+              const link = document.createElement('a');
+              link.setAttribute('href', `?tech=${app}`);
+              link.innerHTML = app;
+              cell.append(link);
+            } else if(column.key === 'client') {
+              cell = document.createElement('td');
+              cell.innerHTML = component.dataset.client;
+            } else {
+              cell = document.createElement('td');
+              const dataset = latest?.[column?.endpoint];
+              let value = dataset?.find(entry => entry.name === column.subcategory);
+              value = value?.[component.dataset.client]?.[column?.metric];
+              cell.innerHTML = `${value}`;
+            }
+
+            if(column.className) {
+              cell.className = column.className;
+            }
+
+
+
+            tr.append(cell);
+          });
+          tbody.append(tr);
+        }
+      });
+    }
+  }
+}
+
+export default TableLinked;
diff --git a/src/js/techreport/timeseries.js b/src/js/techreport/timeseries.js
new file mode 100644
index 00000000..de090032
--- /dev/null
+++ b/src/js/techreport/timeseries.js
@@ -0,0 +1,421 @@
+import { Table } from "./table";
+import { UIUtils } from "./utils/ui";
+class Timeseries {
+  // Create the component
+  constructor(id, config, filters, data) {
+    this.id = id;
+    this.pageConfig = config;
+    this.pageFilters = filters;
+    this.submetric = ''; // TODO: Fetch the default one from somewhere
+    this.data = data;
+
+    this.updateContent();
+    this.bindEventListeners();
+  }
+
+  // Check if anything in the component updates
+  bindEventListeners() {
+    const subcategory = `[data-id="${this.id}"] .subcategory-selector`;
+    document.querySelectorAll(subcategory).forEach(dropdown => {
+      dropdown.addEventListener('change', (event) => this.updateSubmetric(event));
+    });
+
+    const buttons = Object.values(document.getElementsByClassName('show-table'));
+    buttons.forEach(button => {
+      button.addEventListener('click', this.toggleTable);
+    });
+  }
+
+  // Filter and re-render the component when the submetric changes
+  updateSubmetric(event) {
+    if(this.submetric !== event.target.value) {
+      // Update the URL
+      const url = new URL(window.location.href);
+      url.searchParams.set(event.target.dataset.param, event.target.value);
+      window.history.replaceState(null, null, url);
+
+      // Get the relevant endpoint and metric
+      const endpoint = event.target.dataset.endpoint;
+      const metric = event.target.value;
+
+      // Re-render the content
+      this.updateContent();
+      this.updateInfo(metric, endpoint);
+    }
+  }
+
+  // Show/hide UI table
+  toggleTable(event) {
+    const button = event.target;
+    const tableWrapper = document.getElementById(`${button.dataset.id}-table-wrapper`);
+    if(tableWrapper.classList.contains('hidden')) {
+      button.innerHTML = 'Hide table';
+      tableWrapper.classList.remove('hidden');
+    } else {
+      button.innerHTML = 'Show table';
+      tableWrapper.classList.add('hidden');
+    }
+  }
+
+  // Re-render the title, description, and text labels
+  updateInfo(metric, endpoint) {
+    const option = this.pageConfig?.labels?.metrics[endpoint][metric];
+    const component = document.querySelector(`[data-id="${this.id}"]`);
+
+    if(option && option.title) {
+      const title = component.querySelector('h3');
+      title.innerHTML = option.title;
+    }
+
+    if(option && option.description) {
+      const descr = component.querySelector('.descr');
+      descr.innerHTML = option.description;
+    }
+  }
+
+  // Re-render the contents of the component
+  updateContent() {
+    if(this.pageConfig[this.id]?.summary) {
+      this.updateSummary();
+    }
+    this.updateViz();
+    Table.updateTable(this.id, this.pageConfig[this.id]?.table, this.pageFilters.app, this.data);
+  }
+
+  // Update the summary with the latest data for all categories
+  // TODO: only works this way in the single tech, for comparison we need to do this differently
+  updateSummary() {
+    switch(this.pageConfig.default.series.breakdown) {
+      case 'client':
+        this.updateClientSummary();
+        break;
+      case 'app':
+        this.updateAppSummary();
+        break;
+    }
+  }
+
+  updateClientSummary() {
+    const config = this.pageConfig[this.id]?.viz;
+    const data = this.data;
+    const id = this.id;
+    const pageFilters = this.pageFilters;
+
+    /* Select the container to which we'll add elements. */
+    const viz = document.querySelector(`[data-id="${id}"]`);
+    const container = viz.querySelector('.breakdown-list');
+
+    /* Get settings */
+    const metric = viz.dataset.metric;
+    const endpoint = viz.dataset.endpoint;
+
+    const app = pageFilters.app[0];
+    const filtered = data?.[app]?.filter(entry => entry[endpoint]);
+    const sorted = filtered?.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    if(sorted) {
+      /* Get the currently selected subcategory based on the URL */
+      const urlParams = new URLSearchParams(window.location.search);
+      const urlSubcategory = urlParams.get(config.param);
+      const subcategory = urlSubcategory || config.default;
+
+      /* Remove the previous content */
+      container.innerHTML = '';
+
+      /* Update the date to the most recent timestamp in the dataset */
+      viz.querySelector('[data-slot="timestamp"]').innerHTML = sorted?.[0]?.date;
+
+      /* For each of the breakdowns, add a component with the latest data */
+      config.series.values.forEach(breakdown => {
+        /* Get the latest values */
+        const latestData = sorted[0];
+        const categoryData = latestData?.[endpoint]?.find(row => row.name === subcategory);
+        const latestValue = categoryData?.[breakdown.name]?.[metric];
+
+        /* Create a wrapper */
+        const itemWrapper = document.createElement('div');
+        itemWrapper.classList.add('breakdown-item');
+        itemWrapper.style.setProperty('--breakdown-color', breakdown.color);
+
+        /* Add a text label to the wrapper */
+        const breakdownLabel = document.createElement('p');
+        breakdownLabel.textContent = breakdown.name;
+        breakdownLabel.classList.add('breakdown-label');
+        itemWrapper.appendChild(breakdownLabel);
+
+        /* Add the value to the wrapper */
+        const valueLabel = document.createElement('p');
+        valueLabel.textContent = `${latestValue}${breakdown.suffix || ''}`;
+        valueLabel.classList.add('breakdown-value');
+        itemWrapper.appendChild(valueLabel);
+
+        /* Add the wrapper to the container */
+        container.appendChild(itemWrapper);
+      });
+    }
+  }
+
+  updateAppSummary() {
+    const config = this.pageConfig[this.id]?.viz;
+    const data = this.data;
+    const id = this.id;
+    const pageFilters = this.pageFilters;
+
+    const component = document.querySelector(`[data-id="${id}"]`);
+    const container = component.querySelector('.breakdown-list');
+
+    /* Get the currently selected subcategory based on the URL */
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlSubcategory = urlParams.get(config.param);
+    const subcategory = urlSubcategory || config.default;
+
+    /* Get settings */
+    const metric = component.dataset.metric;
+    const endpoint = component.dataset.endpoint;
+    const client = component.dataset.client;
+
+    pageFilters.app.forEach((app, index) => {
+      if(data[app] && data[app].length > 0) {
+        const sorted = data[app].sort((a, b) => new Date(b.date) - new Date(a.date));
+        const latest = sorted[0];
+
+        /* Select value */
+        const latestEndpoint = latest[endpoint];
+        const latestSubcategory = latestEndpoint?.find(row => row.name === subcategory);
+        const latestClient  = latestSubcategory?.[client];
+        const latestValue = latestClient?.[metric];
+
+        /* Select the container to which we'll add elements. */
+        const card = container.querySelector(`[data-app="${app}"]`);
+        const timestamp = component.querySelector('[data-slot="timestamp"]');
+        const label = card.getElementsByClassName('breakdown-label')[0];
+        const value = card.getElementsByClassName('breakdown-value')[0];
+
+        /* Update text */
+        label.innerHTML = latest.technology;
+        if(latestValue) {
+          value.innerHTML = `${latestValue}${config.series.suffix || ''}`;
+        } else {
+          value.classList.add('undefined');
+          value.innerHTML = 'No data';
+        }
+        timestamp.innerHTML = latest.date;
+        const techColor = UIUtils.getAppColor(app, this.pageFilters.app, this.pageConfig.colors);
+        const fallback = this.pageConfig.colors.app[index];
+        card.style.setProperty('--breakdown-color', techColor || fallback);
+      }
+    });
+  }
+
+  // Update the highcharts timeseries
+  updateViz() {
+    const config = this.pageConfig[this.id]?.viz;
+    const timeseries = this.defaults(config);
+
+    // Accessibility settings
+    if(config && config.caption) {
+      timeseries['caption'] = {
+        text: config.caption,
+      };
+    }
+
+    if(this.pageConfig[this.id].valueSuffix) {
+      timeseries.accessibility.point = {
+        ...timeseries.accessibility.point,
+        'valueSuffix': this.pageConfig[this.id].valueSuffix,
+      }
+    }
+
+    // General styling
+    timeseries.chart = {
+      ...timeseries.chart,
+      height: config?.height,
+    };
+
+    // Axis settings
+    timeseries.yAxis = {
+      ...timeseries.yAxis,
+      tickAmount: config?.yAxis?.tickAmount,
+    }
+
+    timeseries.xAxis = {
+      ...timeseries.xAxis,
+      tickAmount: config?.xAxis?.tickAmount,
+    }
+
+    // Update the data
+    if(this.data) {
+      timeseries.series = this.formatSeries();
+    }
+
+    // Render the chart
+    Highcharts.chart(`${this.id}-timeseries`, timeseries);
+  }
+
+  // Format the data in the format Highcharts needs it to be
+  formatSeries() {
+    const breakdown = this.pageConfig?.default?.series?.breakdown;
+    let series;
+    switch(breakdown) {
+      case 'client':
+        series = this.formatDataByClient();
+        return series;
+      case 'app':
+        series = this.formatDataByApp();
+        return series;
+      default:
+        console.log('unknown breakdown');
+        return;
+    }
+  }
+
+  // Format the data broken down by app
+  formatDataByApp() {
+    const series = [];
+
+    // Get the selected client
+    const component = document.querySelector(`[data-id="${this.id}"]`);
+
+    // Get the viz settings
+    const metric = component.dataset.metric;
+    const endpoint = component.dataset.endpoint;
+    const client = component.dataset.client;
+
+    // Get the currently selected subcategory based on the URL
+    const config = this.pageConfig[this.id]?.viz;
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlSubcategory = urlParams.get(config.param);
+    const subcategory = urlSubcategory || config.default;
+
+    // Get default colors
+    const colors = this.defaults(config)?.chart?.colors;
+
+    // Create series to use in Highcharts
+    Object.values(this.data).forEach((app, index) => {
+      const tech = app[0]?.technology;
+      const techColor = UIUtils.getAppColor(tech, this.pageFilters.app, this.pageConfig.colors);
+
+      const data = app.map(row => {
+        const value = row?.[endpoint]?.find(row => row.name === subcategory)?.[client]?.[metric];
+        return {
+          x: new Date(row.date),
+          y: value || 0,
+        };
+      });
+
+      series.push({
+        name: tech,
+        data: data,
+        color: techColor || colors[index]
+      });
+    });
+
+    return series;
+  }
+
+  // Format the data broken down by client
+  formatDataByClient() {
+    // Empty array that we'll populate later
+    const series = [];
+
+    // Get the viz settings
+    const config = this.pageConfig[this.id]?.viz;
+    const app = this.pageFilters.app[0];
+
+    // TODO: Replace with info from component or config
+    const endpoint = this.pageConfig[this.id]?.endpoint;
+    const metric = this.pageConfig[this.id]?.metric;
+
+    const category = this.getCategory(config);
+
+    // Breakdown data by categories defined in config
+    config?.series?.values?.forEach((value, index) => {
+      // Filter by selected client & sort
+      const appData = this.data?.[app];
+
+      // Add the values for the selected metric to a new array of objects
+      // Formatted as coordinates for Highcharts
+      const formattedData = [];
+      appData?.forEach(row => {
+        const categoryData = row?.[endpoint]?.find(row => row.name === category);
+        const clientData = categoryData?.[value.name];
+        const y = clientData?.[metric];
+        formattedData.push({
+          x: new Date(row.date),
+          y: Number(y),
+        });
+      });
+
+      const sortedData = formattedData.sort((a, b) => new Date(a.x) - new Date(b.x));
+
+      const colors = this.defaults(config)?.chart?.colors;
+
+      // Push the configurations and formatted data to the series array
+      series.push(
+        {
+          name: value.name,
+          data: sortedData,
+          color: value.color || colors[index],
+          lineWidth: 2,
+        }
+      )
+    });
+
+    return series;
+  }
+
+  getCategory(config) {
+    // The default metric from the settings
+    const defaultMetric = config.default;
+
+    // Get the submetric from the URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlSubcategory = urlParams.get(config.param);
+
+    return urlSubcategory || defaultMetric;
+  }
+
+  // Get the default settings
+  defaults(config) {
+    const showIndicators = document.querySelector('main').dataset.showIndicators === true
+      || document.querySelector('main').dataset.showIndicators === "true";
+    const defaults = {
+      type: 'timeseries',
+      chart: {
+        colors: this.pageConfig.colors?.app,
+      },
+      title: {
+        text: config?.title,
+      },
+      accessibility: {},
+      series: config?.series?.defaults,
+      xAxis: {
+        title: {
+          text: config?.xAxis?.title,
+        },
+        type: 'datetime'
+      },
+      yAxis: {
+        title: {
+          text: config?.yAxis?.title,
+        },
+      },
+      plotOptions: {
+        series: {
+          lineWidth: 2,
+          marker: {
+            enabled: showIndicators,
+            fillColor: '#ffffff',
+            lineWidth: 2,
+            lineColor: null // inherit from series
+          },
+        },
+      },
+    };
+
+    return defaults;
+  }
+}
+
+/* Make the component availble everywhere */
+window.Timeseries = Timeseries;
diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js
new file mode 100644
index 00000000..d3f200e5
--- /dev/null
+++ b/src/js/techreport/utils/data.js
@@ -0,0 +1,100 @@
+const parseVitalsData = (metric, date) => {
+  return metric.map(submetric => {
+    return {
+      ...submetric,
+      desktop: {
+        ...submetric.desktop,
+        good_pct: submetric?.desktop?.tested > 0 ? parseInt(submetric.desktop.good_number / submetric.desktop.tested * 100) : 0,
+        client: 'desktop',
+        date: date,
+      },
+      mobile: {
+        ...submetric.mobile,
+        good_pct: submetric?.mobile?.tested > 0 ? parseInt(submetric.mobile.good_number / submetric.mobile.tested * 100) : 0,
+        client: 'mobile',
+        date: date,
+      },
+    };
+  });
+}
+
+const parseLighthouseData = (metric, date) => {
+  return metric.map(submetric => {
+    return {
+      ...submetric,
+      desktop: {
+        ...submetric.desktop,
+        median_score_pct: parseInt(submetric?.desktop?.median_score * 100),
+        client: 'desktop',
+        date: date,
+      },
+      mobile: {
+        ...submetric.mobile,
+        median_score_pct: parseInt(submetric?.mobile?.median_score * 100),
+        client: 'mobile',
+        date: date,
+      },
+    };
+  });
+}
+
+const parseAdoptionData = (submetric, date) => {
+  return [
+    {
+      desktop: {
+        origins: submetric.desktop,
+        client: 'desktop',
+        date: date,
+      },
+      mobile: {
+        origins: submetric.mobile,
+        client: 'mobile',
+        date: date,
+      },
+      name: 'adoption',
+    },
+  ];
+}
+
+const parsePageWeightData = (metric, date) => {
+  return metric.map(submetric => {
+    return {
+      ...submetric,
+      desktop: {
+        ...submetric.desktop,
+        client: 'desktop',
+        date: date,
+      },
+      mobile: {
+        ...submetric.mobile,
+        client: 'mobile',
+        date: date,
+      },
+    };
+  });
+}
+
+const filterDuplicates = (array, key) => {
+  const filtered = [];
+  array.forEach((row) => {
+    const matchingKeys = filtered.filter(filteredRow => filteredRow[key] === row[key]);
+    if(matchingKeys.length < 1) {
+      filtered.push(row);
+    }
+  });
+  return filtered;
+};
+
+const getLighthouseScoreCategories = (score, brackets) => {
+  return brackets.find(bracket => bracket.min <= score && bracket.max >= score);
+
+}
+
+export const DataUtils = {
+  parseVitalsData,
+  parseLighthouseData,
+  parseAdoptionData,
+  parsePageWeightData,
+  filterDuplicates,
+  getLighthouseScoreCategories,
+};
diff --git a/src/js/techreport/utils/ui.js b/src/js/techreport/utils/ui.js
new file mode 100644
index 00000000..77d1b938
--- /dev/null
+++ b/src/js/techreport/utils/ui.js
@@ -0,0 +1,32 @@
+// Get the color associated with the techology
+// Based on the order of the technologies
+// To ensure the color is consistent per query
+const getAppColor = (tech, technologies, colors) => {
+  const sortedTechs = [...technologies].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+  const techIndex = sortedTechs.indexOf(tech);
+
+  // Return custom colors if configured
+  if(colors.overrides && colors.overrides[tech]) {
+    return colors.overrides[tech];
+  }
+
+  // Otherwise reutrn based on alphabetic position
+  if(techIndex < colors.app.length) {
+    return colors.app[techIndex];
+  }
+}
+
+// Loop through all the sections in the report
+// Pass in the new data and config, and re-render
+const updateReportComponents = (sections, data, allData, page, labels) => {
+  // Update sections
+  Object.values(sections).forEach(section => {
+    section.data = data;
+    section.updateSection();
+  });
+}
+
+export const UIUtils = {
+  getAppColor,
+  updateReportComponents,
+}
diff --git a/src/js/utils.js b/src/js/utils.js
index 44d918fb..efbd86bb 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -124,3 +124,16 @@ const getChangeSentiment = (change, options) => {
   }
   return 'neutral';
 };
+
+export const getLatestEntry = (data) => {
+  const sorted = data.sort((a, b) => new Date(b.date) - new Date(a.date));
+  return sorted[0];
+};
+
+export const getPercentage = (x, y) => {
+  if(y && y > 0) {
+    return parseInt(parseInt(x) / parseInt(y) * 10000) / 100;
+  }
+
+  return;
+}
diff --git a/static/components/summary.css b/static/components/summary.css
new file mode 100644
index 00000000..75b81f35
--- /dev/null
+++ b/static/components/summary.css
@@ -0,0 +1,21 @@
+.summary-linked-label {
+  font-weight: 600;
+}
+
+.summary-linked-label a {
+  color: var(--color-link);
+}
+
+.summary-linked-label a:is(:hover, :focus) {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.summary-linked-value,
+.summary-suffix {
+  font-size: var(--font-size-medium);
+}
+
+.summary-linked-description {
+  margin-bottom: 0;
+}
diff --git a/static/components/table.css b/static/components/table.css
new file mode 100644
index 00000000..97029c59
--- /dev/null
+++ b/static/components/table.css
@@ -0,0 +1,99 @@
+.table-ui-wrapper {
+  overflow: auto;
+}
+
+.table-ui-wrapper:focus-visible {
+  outline: 1.5px solid var(--color-teal-dark);
+  outline-offset: 1.5px;
+}
+
+.table-ui {
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+}
+
+.table-ui tr {
+  border-bottom: 1px solid var(--color-card-border);
+  width: 100%;
+}
+
+.table-ui tr:last-child {
+  border-bottom: none;
+}
+
+.table-ui thead {
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--color-text);
+}
+
+.table-ui :is(td, th) {
+  min-width: 5rem;
+  text-align: left;
+}
+
+.table-ui :is(td, th):not(:last-child) {
+  padding: 1rem 2rem 1rem 0;
+}
+
+.table-ui tbody tr {
+  border-bottom: 1px solid var(--color-card-border);
+}
+
+.table-ui tbody th {
+  font-weight: normal;
+}
+
+.table-ui :is(td, th) strong {
+  margin-right: 0.1rem;
+  font-weight: 600;
+}
+
+.table-ui tr a {
+  color: var(--color-link);
+  text-decoration: underline;
+  width: 100%;
+  display: block;
+}
+
+.table-ui tr .row-link:is(:hover, :focus) {
+  text-decoration-thickness: 3px;
+}
+
+.table-ui tr:has(.row-link:hover) {
+  background-color: var(--table-row-hover);
+}
+
+.table-ui tr:has(.row-link:focus) {
+  background-color: var(--table-row-hover);
+  border: 1.5px solid var(--color-teal-dark);
+}
+
+.table-ui tr:has(.row-link:focus) :is(th, td) {
+  border-bottom: 1.5px solid var(--color-teal-dark);
+  border-top: 1.5px solid var(--color-teal-dark);
+}
+
+.table-ui tr:has(.row-link:focus) .row-link:focus {
+  /* So the outline only gets removed in browsers that support :has */
+  outline-style: dotted;
+}
+
+.table-ui td ul {
+  height: 30px;
+  display: flex;
+  align-items: flex-end;
+  column-gap: 1px;
+}
+
+.table-ui td ul li {
+  border: 1px solid var(--graph-color-primary-darker);
+  height: 100%;
+  background-image: linear-gradient(
+    transparent calc(100% - var(--height)),
+    var(--graph-color-primary) calc(100% - var(--height)) 100%
+  );
+  border-radius: 1px 1px 0 0;
+  flex: 1;
+  list-style-type: none;
+}
diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css
new file mode 100644
index 00000000..3651401f
--- /dev/null
+++ b/static/css/techreport/general.css
@@ -0,0 +1,101 @@
+/* General */
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: var(--color-page-background);
+  font-size: 1rem;
+}
+
+main {
+  color: var(--color-text);
+}
+
+h1 {
+  font-size: var(--font-size-xlarge);
+  font-weight: 500;
+}
+
+h2 {
+  font-size: var(--font-size-large);
+}
+
+h2 + p {
+  margin: 0;
+  padding: 0;
+}
+
+/* Overwrite margin that's set elsewhere */
+p {
+  margin: 0;
+}
+
+:is(a, button, select):focus-visible {
+  outline: 1.5px solid var(--color-teal-dark);
+  outline-offset: 1.5px;
+}
+
+/* Hidden visually, but still accessible through screen readers/other AT */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* Hidden for everyone */
+.hidden {
+  display: none;
+}
+
+.card {
+  padding: 1.5rem;
+  background: var(--color-card-background);
+  border-radius: var(--card-radius);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--card-shadow);
+  transition: padding 0.35s;
+}
+
+.card > :is(h2, h3, h4) {
+  margin-top: 0;
+}
+
+.block-s {
+  width: 50rem;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block-m {
+  width: 70rem;
+  max-width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block-l {
+  width: 85rem;
+  max-width: 98%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.feedback {
+  background-image: linear-gradient(
+    var(--color-page-background),
+    var(--color-card-background)
+  );
+  padding: 4rem 0;
+  margin-top: -4rem;
+}
+
+.feedback h2 {
+  margin-top: 0;
+}
diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css
new file mode 100644
index 00000000..dc23d173
--- /dev/null
+++ b/static/css/techreport/landing.css
@@ -0,0 +1,67 @@
+.landing-content {
+  margin-top: 10rem;
+}
+
+.choices {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 1rem 2rem;
+  margin-bottom: 4rem;
+  margin-top: -15rem;
+}
+
+.choices .card {
+  padding: 1.5rem 1.75rem;
+}
+
+.choices .card h2 {
+  font-size: 1.5rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.choices .card h2 + p {
+  margin: 0;
+  padding: 0;
+}
+
+.choices .card .img-placeholder {
+  display: block;
+  width: 100%;
+  height: 17rem;
+  background-color: #eee;
+  margin-top: 1rem;
+}
+
+.latest-info h2 {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.latest-info .stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.latest-info h3 {
+  font-size: 1.15rem;
+}
+
+.latest-info p.value {
+  font-size: var(--font-size-medium);
+  font-weight: 600;
+}
+
+.report-summary-tables {
+  padding: 4rem 0;
+}
+
+.report-summary-tables .section {
+  margin-top: 2rem;
+}
+
+.report-summary-tables .section + .section {
+  margin-top: 1rem;
+}
diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
new file mode 100644
index 00000000..beb10533
--- /dev/null
+++ b/static/css/techreport/techreport.css
@@ -0,0 +1,1359 @@
+/* Variables */
+:root {
+  /* Main colors to use */
+  --color-teal-faded: #c0ced0;
+  --color-teal-medium: #6a797c;
+  --color-teal-dark: #3a5c63;
+  --color-teal-darker: #1c4750;
+  --color-blue-dark: #3a7098;
+  --color-blue-100: #eff7ff;
+  --color-blue-light: #e1f1ff;
+  --color-gray-medium: #5c5c5d;
+
+  /* Colors based on function */
+  --color-link: var(--color-blue-dark);
+  --color-text: #444;
+  --color-text-lighter: #5f6768;
+  --color-text-darker: #1e1e1e;
+  --color-text-inverted: #fff;
+  --color-card-background: #fff;
+  --color-card-border: #cdd4d6;
+  --color-page-background: #f4f4f4;
+  --color-checkbox: var(--color-blue-dark);
+  --color-checkbox-selected: var(--color-blue-dark);
+  --color-checkbox-button-selected: var(--color-blue-light);
+  --color-checkbox-button-label: var(--color-text);
+  --color-checkbox-button-label-selected: var(--color-text);
+  --color-theme-toggle-background: #f4f4f4;
+  --color-bg-gradient: var(--color-teal-faded);
+  --color-page-border: var(--color-teal-medium);
+  --color-tooltip-background: var(--color-card-background);
+  --color-tooltip-border: var(--color-card-border);
+
+  /* Font sizes */
+  --font-size-medium: 1.75rem;
+  --font-size-large: 2.15rem;
+  --font-size-xlarge: 2.35rem;
+
+  /* Components */
+  --card-shadow: 0 2px 7px 0px rgba(143, 149, 150, 0.05);
+  --card-radius: 0.25rem;
+  --table-row-hover: var(--color-blue-100);
+
+  /* Graph colors */
+  --graph-color-primary: var(--color-teal-dark);
+  --graph-color-primary-darker: var(--color-teal-darker);
+  --graph-color-line: #a6bbbe;
+  --graph-color-labels: #62777b;
+
+  /* Defaults */
+  --breakdown-color: var(--color-text);
+}
+
+[data-theme="dark"] {
+  --color-link: var(--color-teal-faded);
+  --color-text: #fff;
+  --color-text-lighter: #fff;
+  --color-text-darker: #fff;
+  --color-text-inverted: #000;
+  --color-card-background: #111;
+  --color-card-border: #000;
+  --color-page-background: #292828;
+  --color-checkbox-button-label-selected: #292828;
+  --color-checkbox: #fff;
+  --color-checkbox-selected: #292828;
+  --color-theme-toggle-background: transparent;
+  --color-bg-gradient: #111;
+  --color-page-border: #000;
+  --color-tooltip-border: var(--color-page-background);
+
+  /* Graph colors */
+  --graph-color-labels: #a6bbbe;
+  --graph-color-line: var(--color-gray-medium);
+}
+
+/* ------------------------- */
+/* ---- Building blocks ---- */
+/* ------------------------- */
+
+/* Page header and footer */
+body > :is(header, footer) {
+  background-color: var(--color-card-background);
+}
+
+/* Links */
+main :is(a, p a) {
+  color: var(--color-link);
+}
+
+/* CTA */
+.cta-link {
+  background-color: var(--color-teal-dark);
+  color: var(--color-text-inverted);
+  text-decoration: none;
+  border-radius: 0.25rem;
+  padding: 0.45rem 0.75rem;
+  font-size: 1rem;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+.cta-link:is(:hover, :focus) {
+  color: var(--color-text-inverted);
+  text-decoration: none;
+  background-color: var(--color-teal-darker);
+}
+
+.cta-link:focus {
+  outline: 1.5px solid var(--color-teal-dark);
+  outline-offset: 1.5px;
+}
+
+.cta-link-wrapper {
+  display: block;
+  margin-top: 1rem;
+}
+
+/* Filter info */
+.meta {
+  font-size: 0.75rem;
+  color: var(--color-text-lighter);
+  margin-top: 1rem;
+}
+
+.meta li {
+  list-style-type: none;
+  display: inline-block;
+}
+
+.meta li:not(:last-child) {
+  margin-right: 2rem;
+}
+
+.meta span {
+  font-weight: 600;
+}
+
+/* -------------------- */
+/* ---- Components ---- */
+/* -------------------- */
+
+/* Overwriting the current HA header */
+:is(header, footer) {
+  padding: 1rem 0;
+  border-top: 0;
+}
+
+:is(header, footer) .container {
+  width: 85rem;
+  max-width: 98vw;
+  padding: 0;
+}
+
+:is(header, footer) .container > div {
+  padding: 0;
+}
+
+/* Report navigation */
+.report-navigation {
+  color: var(--color-text);
+  background-color: var(--color-card-background);
+  border-top: 1px solid var(--color-page-background);
+  border-bottom: 1px solid var(--color-page-background);
+}
+
+.report-navigation-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+
+.report-navigation ul li {
+  text-transform: none;
+}
+
+.report-navigation ul li a {
+  padding: 0.75rem 0.25rem;
+}
+
+.report-navigation ul li a[aria-current="page"] {
+  border-bottom: 3px solid var(--color-text);
+}
+
+.report-navigation ul li:hover {
+  background-color: transparent;
+}
+
+.report-navigation ul li a:hover {
+  color: var(--color-text);
+  background-color: transparent;
+  text-decoration: none;
+}
+
+.report-navigation ul li a:not([aria-current="page"]):hover {
+  border-bottom: 3px solid var(--color-teal-faded);
+}
+
+/* Page Filters */
+#page-filters {
+  padding: 1.5rem;
+}
+
+#page-filters button:not(.remove-tech) {
+  background-color: var(--color-teal-darker);
+  border-radius: 3px;
+  color: var(--color-blue-100);
+  font-weight: 600;
+  border: none;
+  padding: 0.25rem 0.5rem;
+}
+
+.remove-tech {
+  background: none;
+  border: none;
+  border-radius: 10rem;
+  width: 44px;
+  height: 44px;
+  position: relative;
+  top: -0.15rem;
+}
+
+.remove-tech:is(:hover, :focus) img {
+  background: #fcc9c4;
+  border-radius: 3rem;
+}
+
+.remove-tech img {
+  width: 100%;
+  max-width: 1.75rem;
+}
+
+#page-filters button[type="submit"] {
+  font-size: 1.25rem;
+  padding: 0.5rem;
+  width: 100%;
+  margin-top: 1rem;
+}
+
+#page-filters legend {
+  font-size: 1rem;
+  border: none;
+  color: var(--color-text-lighter);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+/* Page filters: Geo and rank */
+#page-filters .lens {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+  margin: 0;
+  gap: 0.5rem 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+  margin-top: 2rem;
+}
+
+#page-filters .lens label,
+#page-filters .lens select {
+  color: var(--color-text-lighter);
+  font-size: 0.8rem;
+  width: 100%;
+}
+
+#page-filters .lens select {
+  border-color: var(--color-text-lighter);
+}
+
+.select-label {
+  border: 1px solid #959494;
+  padding: 0;
+  line-height: 100%;
+  position: relative;
+  border-radius: 5px;
+}
+
+#page-filters .select-label label {
+  margin-bottom: 0;
+  padding: 0;
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  font-size: 0.825rem;
+  z-index: 0;
+  color: #767474;
+}
+
+#page-filters .select-label select {
+  appearance: none;
+  background-color: transparent;
+  z-index: 1;
+  position: relative;
+  border: none;
+  margin-bottom: 0;
+  padding: 1.75rem 0.5rem 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 100%;
+  color: var(--color-text-darker);
+  border-radius: 3px;
+  outline-offset: 2px;
+}
+
+.select-label::before {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  border-radius: 0 4px 4px 0;
+}
+
+.select-label::after {
+  content: "";
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  top: calc(50% - 0.25rem);
+  border-bottom: 1.5px solid var(--color-text-darker);
+  border-left: 1.5px solid var(--color-text-darker);
+  border-radius: 1px;
+  transform: rotate(-45deg);
+}
+
+.select-label:has(select:is(:focus-visible, :hover))::before {
+  background-color: var(--color-text-darker);
+  border-left: 1px solid var(--color-text-darker);
+}
+
+.select-label:has(select:is(:focus-visible, :hover))::after {
+  border-color: #f2f9ff;
+}
+
+.select-label:has(select:focus-visible) {
+  background-color: #f2f9ff;
+}
+
+.select-label:has(select:focus-visible) label {
+  color: var(--color-text) !important;
+}
+
+.technology-filters label.tech {
+  font-size: 1.15rem;
+  font-weight: normal;
+  margin-bottom: 0.5rem;
+  width: 100%;
+}
+
+.technology-filters select.tech {
+  font-size: 1.25rem;
+  width: 100%;
+  margin-bottom: 0;
+  border: 1px solid #959494;
+  color: var(--color-text-lighter);
+  appearance: none;
+  background-color: transparent;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+}
+
+.technology-filters .tech-selector-group {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 2rem;
+  padding-top: 1.5rem;
+}
+
+.technology-filters .tech-selector-group:first-of-type {
+  margin-top: -1.5rem;
+}
+
+.tech-selector-group:has(.remove-tech:is(:focus, :hover)) {
+  background-color: #f2f9ff;
+}
+
+.tech-selector-group {
+  display: flex;
+  column-gap: 1rem;
+  align-items: end;
+}
+
+.tech-input-wrapper {
+  position: relative;
+}
+
+.tech-input-wrapper::before {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  border-radius: 0 4px 4px 0;
+  z-index: 0;
+}
+
+.tech-input-wrapper::after {
+  content: "";
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  top: calc(50% - 0.25rem);
+  border-bottom: 1.5px solid var(--color-text-darker);
+  border-left: 1.5px solid var(--color-text-darker);
+  border-radius: 1px;
+  transform: rotate(-45deg);
+  z-index: 0;
+}
+
+.tech-input-wrapper select {
+  z-index: 1;
+  position: relative;
+}
+
+.tech-input-wrapper:has(select:is(:focus-visible, :hover))::before {
+  background-color: var(--color-text-darker);
+  border-left: 1px solid var(--color-text-darker);
+}
+
+.tech-input-wrapper:has(select:is(:focus-visible, :hover))::after {
+  border-color: #f2f9ff;
+}
+
+.tech-input-wrapper:has(select:focus-visible) {
+  background-color: #f2f9ff;
+  color: var(--color-text);
+}
+
+.tech-input-wrapper:has(select:focus-visible) select {
+  color: var(--color-text);
+}
+
+.tech-selector-group .content {
+  position: relative;
+  width: 100%;
+}
+
+.categories-selector-group {
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  position: absolute;
+  right: 0;
+  top: 0.4rem;
+  text-align: right;
+}
+
+.categories-selector-group label {
+  font-weight: 400;
+  font-size: 0.825rem;
+  margin-bottom: 0;
+}
+
+.categories-selector-group select {
+  margin-bottom: 0;
+  appearance: none;
+  background-color: transparent;
+  color: var(--color-text-lighter);
+  border: none;
+  font-size: 0.825rem;
+  padding: 0;
+  border-radius: 0;
+  width: 15ch;
+  border-bottom: 1px solid #959494;
+}
+
+select {
+  max-width: 100%;
+}
+
+#add-tech {
+  margin-top: 1.5rem;
+}
+
+/* Results header */
+.results-header {
+  position: sticky;
+  top: 0;
+  padding: 0.5rem 0;
+  background-color: var(--color-page-background);
+  z-index: 3;
+  border-bottom: 1px solid var(--color-page-border);
+}
+
+.results-header :is(label, select) {
+  margin: 0;
+}
+
+.results-header .wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.client-breakdown-wrapper label {
+  display: block;
+  font-size: 0.825rem;
+  font-weight: 600;
+  color: var(--color-text-lighter);
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.client-breakdown-wrapper select {
+  appearance: none;
+  background-color: transparent;
+  z-index: 1;
+  border-radius: 0;
+  border: none;
+  color: var(--color-text);
+  padding: 0;
+  width: 5rem;
+  border-bottom: 1px solid var(--color-text-lighter);
+  display: block;
+  font-size: 1rem;
+}
+
+.client-breakdown-wrapper:has(select:focus) {
+  border: 1px solid var(--color-teal-darker);
+  border-radius: 3px;
+}
+
+/* So that the outline only gets removed if :has is supported */
+.client-breakdown-wrapper:has(select:focus) select {
+  outline: none;
+  border: none;
+  position: relative;
+  left: 1px;
+  top: -1px;
+  margin-bottom: -1px;
+}
+
+.client-breakdown-wrapper:has(select:focus) label {
+  position: relative;
+  left: 1px;
+  top: -1px;
+}
+
+.result-info > div {
+  display: flex;
+  column-gap: 1rem;
+  font-size: 0.825rem;
+}
+
+/* Table */
+.show-table {
+  background-color: transparent;
+  color: var(--color-text-lighter);
+  border-color: var(--color-text-lighter);
+}
+
+.card.table-ui-wrapper {
+  margin-bottom: 2rem;
+}
+
+.footnote {
+  margin-bottom: 2rem;
+  font-style: italic;
+  font-size: 0.875rem;
+}
+
+/* Summary grid */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 1rem 1rem;
+}
+
+.summary-grid + .card {
+  margin-top: 1rem;
+}
+
+/* Submetric selector */
+.subcategory-selector-wrapper {
+  border: 1px solid #959494;
+  padding: 0.5rem 1rem;
+  line-height: 100%;
+  position: relative;
+  border-radius: 5px;
+  display: inline-block;
+  padding-right: 0;
+}
+
+.subcategory-selector-wrapper .position-wrapper {
+  display: flex;
+  align-items: center;
+  column-gap: 0.25rem;
+}
+
+.subcategory-selector-wrapper label {
+  color: var(--color-text-lighter);
+  display: unset;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.subcategory-selector-wrapper select {
+  margin-bottom: 0;
+  border: none;
+  appearance: none;
+  background-color: transparent;
+  color: var(--color-text);
+  padding-right: 3rem;
+  z-index: 2;
+  position: relative;
+  display: unset;
+}
+
+.subcategory-selector-wrapper:has(select:focus) select {
+  outline: none;
+}
+
+.subcategory-selector-wrapper:has(select:focus) {
+  outline: 1px solid var(--color-text);
+  outline-offset: 1.5px;
+}
+
+.subcategory-selector-wrapper::after {
+  content: "";
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  top: calc(50% - 0.25rem);
+  border-bottom: 1.5px solid var(--color-text-darker);
+  border-left: 1.5px solid var(--color-text-darker);
+  border-radius: 1px;
+  transform: rotate(-45deg);
+  z-index: 1;
+}
+
+.subcategory-selector-wrapper:has(select:is(:focus-visible, :hover))::before {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 2.5rem;
+  background-color: var(--color-text-darker);
+  border-left: 1px solid var(--color-text-darker);
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.subcategory-selector-wrapper:has(select:is(:focus-visible, :hover))::after {
+  border-color: #f2f9ff;
+}
+
+.subcategory-selector-wrapper:has(select:focus-visible) {
+  background-color: #f2f9ff;
+}
+
+.subcategory-selector-wrapper:has(select:focus-visible) label {
+  color: var(--color-text) !important;
+}
+
+/* Timeseries cards */
+.timeseries-container {
+  margin-top: 2rem;
+}
+
+.timeseries-title {
+  font-size: 1.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.timeseries-description {
+  max-width: 50rem;
+}
+
+.timeseries-time {
+  font-weight: 600;
+  font-size: 1rem;
+  margin: 0.75rem 0;
+}
+
+/* Info message */
+.info-panel {
+  background: #bfe1e7;
+  color: #203b40;
+  font-weight: 400;
+  padding: 0.5rem;
+}
+
+.info-panel > div {
+  display: flex;
+  align-items: center;
+}
+
+.info-panel p {
+  margin-bottom: 0;
+}
+
+.info-panel .info-label {
+  margin-right: 1rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 3px;
+  background-color: white;
+  border: 1px solid black;
+}
+
+/* General tables */
+.table-ui-wrapper {
+  overflow: auto;
+}
+
+.table-ui-wrapper:focus-visible {
+  outline: 1.5px solid var(--color-teal-dark);
+  outline-offset: 1.5px;
+}
+
+.table-ui {
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+}
+
+.table-ui tr {
+  border-bottom: 1px solid var(--color-card-border);
+  width: 100%;
+}
+
+.table-ui tr:last-child {
+  border-bottom: none;
+}
+
+.table-ui thead {
+  font-size: 0.875rem;
+  border-bottom: 1px solid var(--color-text);
+}
+
+.table-ui :is(td, th) {
+  min-width: 5rem;
+  text-align: left;
+}
+
+.table-ui :is(td, th):not(:last-child) {
+  padding: 1rem 1rem 1rem 0;
+}
+
+.table-ui tbody tr {
+  border-bottom: 1px solid var(--color-card-border);
+}
+
+.table-ui tbody th {
+  font-weight: normal;
+}
+
+.table-ui :is(td, th) strong {
+  margin-right: 0.1rem;
+  font-weight: 600;
+}
+
+.table-ui tr a {
+  color: var(--color-link);
+  text-decoration: underline;
+  width: 100%;
+  display: block;
+}
+
+.table-ui tr .row-link:is(:hover, :focus) {
+  text-decoration-thickness: 3px;
+}
+
+.table-ui tr:has(.row-link:hover) {
+  background-color: var(--table-row-hover);
+}
+
+.table-ui tr:has(.row-link:focus) {
+  background-color: var(--table-row-hover);
+  border: 1.5px solid var(--color-teal-dark);
+}
+
+.table-ui tr:has(.row-link:focus) :is(th, td) {
+  border-bottom: 1.5px solid var(--color-teal-dark);
+  border-top: 1.5px solid var(--color-teal-dark);
+}
+
+.table-ui tr:has(.row-link:focus) .row-link:focus {
+  /* So the outline only gets removed in browsers that support :has */
+  outline-style: dotted;
+}
+
+.table-ui td ul {
+  height: 30px;
+  display: flex;
+  align-items: flex-end;
+  column-gap: 1px;
+}
+
+.table-ui td ul li {
+  border: 1px solid var(--graph-color-primary-darker);
+  height: 100%;
+  background-image: linear-gradient(
+    transparent calc(100% - var(--height)),
+    var(--graph-color-primary) calc(100% - var(--height)) 100%
+  );
+  border-radius: 1px 1px 0 0;
+  flex: 1;
+  list-style-type: none;
+}
+
+.table-ui .no-data {
+  color: var(--color-text-lighter);
+}
+
+.table-ui .client {
+  text-align: right;
+}
+
+.table-ui .good-scores {
+  text-align: right;
+}
+
+.table-ui .eligible {
+  font-size: 0.825rem;
+  position: relative;
+  top: 0.05rem;
+}
+
+.table-ui td.eligible {
+  color: var(--color-text-lighter);
+}
+
+.table-ui .good-scores span[aria-hidden] {
+  font-weight: 400;
+  font-size: 0.825rem;
+  margin-left: 1rem;
+}
+
+.table-ui td.main-cell {
+  font-weight: 600;
+}
+
+.table-ui td.pct-value {
+  position: relative;
+}
+
+.table-ui td.pct-value[data-value] span {
+  width: 4.5rem;
+  display: block;
+}
+
+.table-ui td.pct-value[data-value] span::after {
+  content: "";
+  display: block;
+  height: 0.5rem;
+  width: 100%;
+  width: calc(100% - 4.5rem);
+  position: absolute;
+  top: 1.5rem;
+  right: 0;
+  border: 1px solid var(--color-teal-dark);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-teal-dark) 0% var(--cell-value),
+    transparent var(--cell-value) 100%
+  );
+}
+
+/* Metric components */
+.component-heading-wrapper {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.component-heading {
+  flex: 0 0 30rem;
+  max-width: 100%;
+}
+
+.component-heading h3 {
+  margin-top: 0;
+}
+
+.component-filters {
+  text-align: right;
+}
+
+.component-filters select {
+  font-size: 1rem;
+}
+
+/* -------------------- */
+/* ----- Sections ----- */
+/* -------------------- */
+
+/* Page heading */
+.intro {
+  border: none;
+  margin-top: 0;
+  background-color: transparent;
+  padding: 4rem 0;
+}
+
+.intro h1 {
+  font-size: var(--font-size-xlarge);
+  margin-bottom: 2.5rem;
+  margin-top: 0;
+}
+
+.intro h2 {
+  font-size: var(--font-size-xlarge);
+}
+
+.intro span.subtitle {
+  font-size: 1.15rem;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.intro p {
+  font-size: 1.15rem;
+  max-width: 45rem;
+}
+
+.intro h1 + p {
+  padding: 0;
+}
+
+.intro ul {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.intro .categories {
+  margin: 1rem 0;
+}
+
+.intro .categories .cell {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  border: 1px solid var(--color-text);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.report-content {
+  background-image: linear-gradient(var(--color-bg-gradient), rgba(238, 238, 238, 0));
+  background-size: 100% 50rem;
+  background-repeat: no-repeat;
+  padding-top: 3rem;
+}
+
+.report-content .intro {
+  padding: 0;
+  margin-bottom: 4rem;
+}
+
+.report-section {
+  margin-bottom: 6rem;
+}
+
+.report-section > .card {
+  margin-top: 2rem;
+}
+
+.report-content:has(> .error) {
+  background-image: none;
+  padding-top: 0;
+  background-color: #fff;
+  border-bottom: 1px solid var(--color-page-border);
+}
+
+.report-content > .error {
+  margin-bottom: 0;
+  text-align: center;
+  padding: 5rem 0;
+}
+
+/* Summary cards */
+.summary-linked-label {
+  font-weight: 600;
+}
+
+.summary-linked-label a {
+  color: var(--color-link);
+}
+
+.summary-linked-label a:is(:hover, :focus) {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.summary-linked-value,
+.summary-suffix {
+  font-size: var(--font-size-medium);
+}
+
+.summary-linked-description {
+  margin-bottom: 0;
+}
+
+[data-component="summaryCard"] {
+  position: relative;
+}
+
+[data-component="summaryCard"] > p.meta {
+  position: absolute;
+  bottom: 1rem;
+}
+
+/* Chart summary list */
+.data-summary {
+  margin-top: 2rem;
+}
+
+.data-summary .heading h4 {
+  font-size: 0.875rem;
+  color: var(--color-text-lighter);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.data-summary .breakdown-list {
+  display: flex;
+  column-gap: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.data-summary .breakdown-item {
+  padding: 0.15rem;
+}
+
+.data-summary .breakdown-label {
+  position: relative;
+  margin-right: 3rem;
+}
+
+.data-summary .breakdown-label::after {
+  content: "";
+  display: block;
+  width: 2rem;
+  height: 0.17rem;
+  background-color: black;
+  background-color: var(--breakdown-color);
+  position: absolute;
+  top: 0.7rem;
+  left: 100%;
+  left: calc(100% + 0.4rem);
+}
+
+.data-summary .breakdown-value {
+  font-size: var(--font-size-medium);
+}
+
+.breakdown-value.undefined {
+  color: var(--color-text-lighter);
+  font-style: italic;
+}
+
+/* -------------------- */
+/* ---- Highcharts ---- */
+/* -------------------- */
+
+/* Highcharts */
+.highcharts-background,
+.highcharts-point {
+  fill: var(--color-card-background) !important;
+}
+
+.highcharts-title {
+  font-weight: normal !important;
+  fill: var(--color-text) !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 0.875rem !important;
+}
+
+.highcharts-grid-line {
+  stroke: var(--graph-color-line) !important;
+}
+
+svg.highcharts-root text {
+  font-weight: normal !important;
+  fill: var(--color-text) !important;
+  font-family: "Open Sans", sans-serif !important;
+}
+
+svg.highcharts-root .highcharts-axis-line {
+  stroke: var(--graph-color-line) !important;
+}
+
+svg.highcharts-root .highcharts-axis-labels text {
+  fill: var(--graph-color-labels) !important;
+}
+
+path.highcharts-tick {
+  display: none;
+}
+
+.highcharts-data-table table {
+  width: 100%;
+  color: var(--color-text);
+}
+
+.highcharts-data-table thead th {
+  font-weight: 600;
+}
+
+.highcharts-data-table thead {
+  border-bottom: 1px solid var(--color-text);
+}
+
+.highcharts-data-table :is(td, th) {
+  padding: 0.5rem 0.15rem;
+  min-width: 7rem;
+  text-overflow: ellipsis;
+}
+
+.highcharts-data-table tbody th {
+  font-weight: normal;
+}
+
+.highcharts-button:not(.highcharts-button-hover) rect {
+  fill: transparent;
+}
+
+.highcharts-button:not(.highcharts-button-hover) path {
+  fill: var(--color-text-lighter);
+  stroke: var(--color-text-lighter);
+}
+
+.highcharts-tooltip {
+  filter: none;
+}
+
+.highcharts-tooltip path {
+  fill: var(--color-tooltip-background);
+  stroke: var(--color-tooltip-border);
+  stroke-width: 1px;
+}
+
+/* ------------------------ */
+/* ----- Small charts ----- */
+/* ------------------------ */
+.progress-chart {
+  transform: rotate(-90deg);
+}
+
+.summary-value:has(.progress-chart) {
+  position: relative;
+  margin-top: 1rem;
+}
+
+.summary-value:has(.progress-chart) > p {
+  text-align: center;
+  width: 50%;
+  height: 100%;
+  height: calc(100% - 0.5rem);
+  position: absolute;
+  top: 0;
+  padding-top: 25%;
+  padding-top: calc(25% - 0.55rem);
+  line-height: 100%;
+}
+
+.lighthouse-progress {
+  stroke-dashoffset: var(--offset);
+  transform-origin: center;
+}
+
+.lighthouse-progress.border-1 {
+  transform: rotate(-1deg);
+}
+
+.lighthouse-progress.border-2 {
+  transform: rotate(1deg);
+}
+
+.progress-chart.poor .lighthouse-progress:not(.border-1, .border-2) {
+  stroke: #f33;
+}
+
+.progress-chart.good .lighthouse-progress:not(.border-1, .border-2) {
+  stroke: #18a975;
+}
+
+.progress-chart.improvement .lighthouse-progress:not(.border-1, .border-2) {
+  stroke: #c7870b;
+}
+
+/* ----------------------- */
+/* ---- Accessibility ---- */
+/* ----------------------- */
+
+.accessibility-options {
+  background-color: var(--color-card-background);
+  border-top: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-card-border);
+  padding: 2rem 0;
+}
+
+.accessibility-options h2 {
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.accessibility-options p {
+  margin-bottom: 1rem;
+}
+
+.check-wrapper {
+  border: 1px solid var(--color-text-lighter);
+  display: inline-block;
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
+  padding: 0.5rem 1rem;
+  border-radius: 3px;
+  position: relative;
+}
+
+.check-wrapper label {
+  margin-bottom: 0;
+  padding-left: 1.5rem;
+  color: var(--color-checkbox-button-label);
+}
+
+.check-wrapper input {
+  width: 0;
+  height: 0;
+}
+
+.check-wrapper input::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.check-wrapper::before {
+  content: "";
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.3rem;
+  position: absolute;
+  left: 1rem;
+  top: 0.75rem;
+  border: 1px solid var(--color-checkbox);
+}
+
+.check-wrapper:has(input:checked) {
+  background-color: var(--color-checkbox-button-selected);
+}
+
+.check-wrapper:has(input:checked)::before {
+  background-color: var(--color-checkbox-selected);
+  border-color: var(--color-checkbox-selected);
+  box-shadow: 0 0 0 1.5px var(--color-checkbox-button-selected) inset;
+}
+
+.check-wrapper:has(input:checked) label {
+  color: var(--color-checkbox-button-label-selected);
+}
+
+.check-descr {
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+.check-descr .check-state {
+  font-weight: 600;
+}
+
+.theme-switcher {
+  background-color: var(--color-theme-toggle-background);
+  border: 1px solid var(--color-text-lighter);
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
+  padding: 0.5rem 1rem;
+  border-radius: 3px;
+}
+
+/* ----------------------- */
+/* ---- Media queries ---- */
+/* ----------------------- */
+
+/* Re-arrange when viewport becomes too narrow in height */
+/* ± 200% zoom on a 13" screen */
+@media screen and (max-height: 30rem) {
+  .results-header {
+    position: static;
+  }
+}
+
+/* Smaller screens */
+@media screen and (max-width: 40rem) {
+  .tech-selector-group .content {
+    display: flex;
+    flex-direction: column-reverse;
+    row-gap: 0.75rem;
+  }
+
+  .categories-selector-group {
+    position: static;
+  }
+
+  .tech-selector-group {
+    align-items: start;
+  }
+
+  .tech-selector-group .actions {
+    position: relative;
+    top: 2.25rem;
+  }
+}
+
+@media screen and (max-width: 50rem) {
+  .table-ui td.pct-value[data-value] span {
+    width: 100%;
+  }
+
+  .table-ui .pct-value {
+    min-width: 10rem;
+  }
+
+  .table-ui td.pct-value[data-value] span::after {
+    display: none;
+  }
+
+  .table-ui tbody * {
+    font-size: 1rem;
+  }
+
+  .table-ui .good-scores span[aria-hidden] {
+    display: none;
+  }
+
+  .card {
+    padding: 0.75rem;
+  }
+}
+
+@media screen and (max-width: 60rem) {
+  .summary-grid {
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  }
+
+  .summary-grid > * {
+    max-width: 95vw;
+  }
+
+  .table-ui :is(td, th) {
+    min-width: 7.5rem;
+  }
+}
diff --git a/static/img/icon-delete.svg b/static/img/icon-delete.svg
new file mode 100644
index 00000000..043085dc
--- /dev/null
+++ b/static/img/icon-delete.svg
@@ -0,0 +1,5 @@
+<svg width="94" height="94" viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="47" cy="47" r="45.5" stroke="#A94138" stroke-width="3"/>
+<path d="M32.7974 31.2972L63.203 61.7028" stroke="#A94138" stroke-width="4" stroke-linecap="round"/>
+<path d="M32.7974 61.7028L63.203 31.2972" stroke="#A94138" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/templates/main.html b/templates/main.html
index b9df01bf..94f4dd32 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -176,6 +176,8 @@
   </header>
   <nav id="mobile" class="hidden-sm hidden-md hidden-lg" aria-label="Mobile Menu"></nav>
 
+  {% block report_navigation %}{% endblock %}
+
   <main>
     {% block main %}{% endblock %}
   </main>
diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html
new file mode 100644
index 00000000..f2a2d488
--- /dev/null
+++ b/templates/techreport/comparison.html
@@ -0,0 +1,123 @@
+{% extends "techreport/report.html" %}
+
+{% block section %}
+  {{ super() }}
+
+  {% set technologies = tech_report_page.filters.app or tech_report_page.config.default.app %}
+  {% set technologies_str = ','.join(technologies) %}
+
+  <div class="intro block-m">
+    <div class="info">
+      <h1>
+        <span class="subtitle">Tech Report</span>
+        <span class="main-title">Comparison</span>
+      </h1>
+    </div>
+    <div class="filters">
+      {% include "techreport/templates/filters.html" %}
+    </div>
+  </div>
+
+  {% set filter_tech_title = technologies_str or tech_report_page.filters.app[0] or 'ALL' %}
+  {% include "techreport/components/filter_info_header.html" %}
+
+  <div id="report-content" class="report-content">
+    <!-- Section: Summary of the main metrics -->
+    <div
+      id="comparison-summary"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="cwv,lighthouse,page-weight"
+    >
+      <h2>Summary ({{ technologies | length }} technologies)</h2>
+      {% set component = tech_report_page.config.tech_comparison_summary %}
+      {% set id = component.id %}
+      {% set client = request.args.get('client', '')  or 'mobile' %}
+
+      {% set table = component.table %}
+      {% include "techreport/components/table_linked.html" %}
+
+      {% include "techreport/components/filter_meta.html" %}
+    </div>
+
+    <!-- Section: Core Web Vitals -->
+    <div
+      id="comparison-good-cwvs"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="cwv"
+    >
+      <h2>Core Web Vitals</h2>
+      <p>Description</p>
+
+      <!-- Timeseries -->
+      <div class="card">
+        {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
+        {% if timeseries %}
+          {% set subcategory = request.args.get('good-cwv-over-time', '')  or 'cwv' %}
+          {% include "techreport/components/timeseries.html" %}
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Section: Lighthouse -->
+    <div
+      id="comparison-lighthouse"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="lighthouse"
+    >
+      <h2>Lighthouse</h2>
+      <p>Description</p>
+
+      <!-- Timeseries -->
+      <div class="card">
+        {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
+        {% if timeseries %}
+          {% set subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
+          {% include "techreport/components/timeseries.html" %}
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Section: Page weight -->
+    <div
+      id="comparison-page-weight"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="page-weight"
+    >
+      <h2>Page weight</h2>
+      <p>Description</p>
+
+      <!-- Timeseries -->
+      <div class="card">
+        {% set timeseries = tech_report_page.config.weight_timeseries %}
+        {% if timeseries %}
+          {% set subcategory = request.args.get('median-weight-over-time', '')  or 'image' %}
+          {% include "techreport/components/timeseries.html" %}
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Section: Adoption -->
+    <div
+      id="comparison-adoption"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="adopiton"
+    >
+      <h2>Adoption</h2>
+      <p>Description</p>
+
+      <!-- Timeseries -->
+      <div class="card">
+      {% set timeseries = tech_report_page.config.adoption_timeseries %}
+      {% if timeseries %}
+        {% include "techreport/components/timeseries.html" %}
+      {% endif %}
+    </div>
+    </div>
+  </div>
+
+{% endblock %}
diff --git a/templates/techreport/components/filter_info_header.html b/templates/techreport/components/filter_info_header.html
new file mode 100644
index 00000000..4de53cd8
--- /dev/null
+++ b/templates/techreport/components/filter_info_header.html
@@ -0,0 +1,37 @@
+<div class="results-header">
+  <div class="wrapper block-m">
+    <div class="result-info">
+      <p>
+        <a href="#tech-1">
+          {{ filter_tech_title }}
+        </a>
+      </p>
+      <div>
+        <p>
+          Geo:
+          <a href="#geo">
+            <span data-slot="geo">{{ request.args.get('geo', '')  or 'ALL' }}</span>
+          </a>
+        </p>
+        <p>
+          Rank:
+          <a href="#rank">
+            <span data-slot="rank">{{ request.args.get('rank', '')  or 'ALL' }}</span>
+          </a>
+        </p>
+      </div>
+    </div>
+    <div class="client-breakdown-wrapper">
+      <label for="client-breakdown">Client</label>
+      <select name="client-breakdown" id="client-breakdown">
+        {% if request.args.get('client', '') == 'desktop' %}
+        <option value="mobile">Mobile</option>
+        <option value="desktop" selected>Desktop</option>
+        {% else %}
+        <option value="mobile" selected>Mobile</option>
+        <option value="desktop">Desktop</option>
+        {% endif %}
+      </select>
+    </div>
+  </div>
+</div>
diff --git a/templates/techreport/components/filter_meta.html b/templates/techreport/components/filter_meta.html
new file mode 100644
index 00000000..28734686
--- /dev/null
+++ b/templates/techreport/components/filter_meta.html
@@ -0,0 +1,11 @@
+<ul class="meta">
+  <li>
+    Client: <span data-slot="client">{{ request.args.get('client', '')  or 'mobile' }}</span>
+  </li>
+  <li>
+    Geo: <span data-slot="geo">{{ request.args.get('geo', '')  or 'ALL' }}</span>
+  </li>
+  <li>
+    Rank: <span data-slot="rank">{{ request.args.get('rank', '')  or 'ALL' }}</span>
+  </li>
+</ul>
diff --git a/templates/techreport/components/subcategory.html b/templates/techreport/components/subcategory.html
new file mode 100644
index 00000000..61c70f69
--- /dev/null
+++ b/templates/techreport/components/subcategory.html
@@ -0,0 +1,26 @@
+{% set selectedparam = request.args.get(subcategory.param, '') or subcategory.default %}
+<div class="subcategory-selector-wrapper">
+  <div class="position-wrapper">
+    <label for="subcategory-{{ subcategory.base }}">Metric</label>
+    <select
+      name="subcategory"
+      class="subcategory-selector"
+      id="subcategory-{{ subcategory.base }}"
+      data-controls="{{ id }}"
+      data-param="{{ subcategory.param }}"
+      data-endpoint="{{ endpoint }}"
+    >
+      {% for option in subcategory.options %}
+        {% if selectedparam == option.value %}
+        <option value="{{ option.value }}" selected>
+          {{ option.label }}
+        </option>
+        {% else %}
+        <option value="{{ option.value }}">
+          {{ option.label }}
+        </option>
+        {% endif %}
+      {% endfor %}
+    </select>
+  </div>
+</div>
diff --git a/templates/techreport/components/summary_card.html b/templates/techreport/components/summary_card.html
new file mode 100644
index 00000000..f14af454
--- /dev/null
+++ b/templates/techreport/components/summary_card.html
@@ -0,0 +1,36 @@
+{% set prefix = "summary" %}
+{% if section_prefix %}
+  {% set prefix = section_prefix + "-summary" %}
+{% endif %}
+
+<div
+  class="card"
+  data-component="summaryCard"
+  data-metric="{{ summary.metric }}"
+  data-endpoint="{{ summary.endpoint }}"
+  data-category="{{ summary.category }}"
+  data-id="{{ prefix }}-{{ summary.endpoint }}-{{ summary.category }}-{{ summary.metric }}"
+  data-client="{{ request.args.get('client', '')  or 'mobile' }}"
+>
+  <p class="summary-linked-label">
+    <a href="{{ summary.url }}{{ filters }}" data-slot="label">{{ summary.label }}</a>
+  </p>
+  <div class="summary-value">
+    <p>
+      <span class="summary-linked-value" data-slot="value">--</span>
+      <span class="summary-suffix" data-slot="suffix">{{ summary.suffix or "" }}</span>
+    </p>
+    {% if section_prefix == "lighthouse" %}
+      <svg class="progress-chart" width="50%" height="50%" viewBox="0 0 120 120" aria-hidden="true">
+        <circle cx="60" cy="60" r="54" fill="none" stroke="#000" stroke-width="12" />
+        <circle cx="60" cy="60" r="54" fill="none" stroke="#EEEEEE" stroke-width="10" />
+        <circle class="lighthouse-progress border-1" cx="60" cy="60" r="54" fill="none" stroke="#000" stroke-width="10" pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" />
+        <circle class="lighthouse-progress border-2" cx="60" cy="60" r="54" fill="none" stroke="#000" stroke-width="10" pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" />
+        <circle class="lighthouse-progress" cx="60" cy="60" r="54" fill="none" stroke="#1c4750" stroke-width="10" pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" />
+      </svg>
+    {% endif %}
+  </div>
+  <p class="summary-linked-description" data-slot="description">
+    {{ summary.description }}
+  </p>
+</div>
diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html
new file mode 100644
index 00000000..d0c51eb1
--- /dev/null
+++ b/templates/techreport/components/table.html
@@ -0,0 +1,63 @@
+<!-- This makes the table focusable and scrollable by keyboard -->
+<!-- Table content and caption id set in JS -->
+<div class="table-ui-wrapper" role="region" aria-labelledby="table-{{ id }}" tabindex="0">
+  <table
+    id="table-{{ id }}"
+    class="table-ui"
+    data-client="{{ client }}"
+    data-breakdown="{{ tech_report_page.config.default.series.breakdown }}"
+    data-endpoint="{{endpoint}}"
+    data-category="{{category}}"
+    data-metric="{{metric}}"
+  >
+    <caption class="sr-only">{{ table.caption }}</caption>
+    <thead>
+      <tr>
+        {% for column in table.columns %}
+          {% if column.breakdown == 'app' %}
+            {% set technologies = tech_report_page.filters.app or tech_report_page.config.default.app %}
+            {% for app in technologies %}
+              <th
+                data-key="{{ column.key }}"
+                data-app="{{ app }}"
+                data-metric="{{column.metric}}"
+                class="{{ column.className }}"
+              >
+                {{ app }}
+                {% if column.hiddenSuffix %}
+                  <span aria-hidden="true">
+                      {{ column.hiddenSuffix }}
+                  </span>
+                {% endif %}
+              </th>
+            {% endfor %}
+          {% else %}
+            <th
+              data-key="{{ column.key }}"
+              data-metric="{{column.metric}}"
+              class="{{ column.className }}"
+            >
+              {{ column.name }}
+              {% if column.hiddenSuffix %}
+                <span aria-hidden="true">
+                    {{ column.hiddenSuffix }}
+                </span>
+              {% endif %}
+            </th>
+          {% endif %}
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% if table.rows %}
+        {% for row in table.rows %}
+          {% if row.header == "true" %}
+            <th data-key="{{ row.key }}">{{ row.name }}</th>
+          {% else %}
+            <td data-key="{{ row.key }}">{{ row.name }}</td>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    </tbody>
+  </table>
+</div>
diff --git a/templates/techreport/components/table_linked.html b/templates/techreport/components/table_linked.html
new file mode 100644
index 00000000..ffc95406
--- /dev/null
+++ b/templates/techreport/components/table_linked.html
@@ -0,0 +1,46 @@
+<!-- This makes the table focusable and scrollable by keyboard -->
+<!-- Table content and caption id set in JS -->
+<div class="table-ui-wrapper" role="region" aria-labelledby="table-{{ id }}" tabindex="0">
+  <table
+    class="table-ui"
+    data-breakdown="{{ tech_report_page.config.default.series.breakdown }}"
+    data-category="{{category}}"
+    data-client="{{ client }}"
+    data-component="table"
+    data-endpoint="{{endpoint}}"
+    data-id="{{ id }}"
+    id="table-{{ id }}"
+  >
+    <caption class="sr-only">{{ table.caption }}</caption>
+    <thead>
+      <tr>
+        {% for column in table.columns %}
+          <th
+            data-key="{{ column.key }}"
+            data-metric="{{ column.metric }}"
+            data-endpoint="{{ column.endpoint }}"
+            class="{{ column.className }}"
+          >
+            {{ column.name }}
+            {% if column.hiddenSuffix %}
+              <span aria-hidden="true">
+                  {{ column.hiddenSuffix }}
+              </span>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% if table.rows %}
+        {% for row in table.rows %}
+          {% if row.header == "true" %}
+            <th data-key="{{ row.key }}">{{ row.name }}</th>
+          {% else %}
+            <td data-key="{{ row.key }}">{{ row.name }}</td>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    </tbody>
+  </table>
+</div>
diff --git a/templates/techreport/components/timeseries.html b/templates/techreport/components/timeseries.html
new file mode 100644
index 00000000..5eb42ac6
--- /dev/null
+++ b/templates/techreport/components/timeseries.html
@@ -0,0 +1,71 @@
+{% set category = selected_subcategory or subcategory.default %}
+{% set endpoint = timeseries.endpoint %}
+
+<div data-id="{{ timeseries.id }}" data-component="timeseries" data-endpoint="{{timeseries.endpoint}}" data-category="{{category}}" data-metric="{{timeseries.metric}}" data-client="{{ request.args.get('client', '')  or 'mobile' }}">
+  <div class="component-heading-wrapper">
+    <div class="component-heading">
+      {% set title = timeseries.title %}
+      {% set descr = timeseries.description %}
+      {% if tech_report_labels.metrics[endpoint][selected_subcategory] %}
+        {% set title = tech_report_labels.metrics[endpoint][selected_subcategory].title %}
+        {% set descr = tech_report_labels.metrics[endpoint][selected_subcategory].description %}
+      {% endif %}
+
+      <h3>{{ title }}</h3>
+      <p class="descr">{{ descr }}</p>
+    </div>
+
+    <div class="component-filters">
+      {% if timeseries.subcategory %}
+        {% set subcategory = timeseries.subcategory %}
+        {% set id = timeseries.id %}
+        {% include "techreport/components/subcategory.html" %}
+      {% endif %}
+    </div>
+  </div>
+
+
+  {% if timeseries.viz %}
+    {% if timeseries.summary %}
+      <div class="data-summary">
+        <div class="heading">
+          <h4>
+            Latest data: <span data-slot="timestamp"></span>
+          </h4>
+        </div>
+        <div class="breakdown-list">
+          {% if timeseries.viz.series.breakdown == 'client' %}
+            {% for breakdown in timeseries.viz.series["values"] %}
+              <div class="breakdown-item">
+                <p class="breakdown-label">{{ breakdown.name }}</p>
+                <p class="breakdown-value">00{% if breakdown.suffix == "%" %}.00{% endif %}{{ breakdown.suffix }}</p>
+              </div>
+            {% endfor %}
+          {% elif timeseries.viz.series.breakdown == 'app' %}
+              {% for app in tech_report_page.filters.app %}
+                <div class="breakdown-item" data-app="{{ app }}">
+                  <p class="breakdown-label">{{ app }}</p>
+                  <p class="breakdown-value">00{{ timeseries.viz.series.suffix }}</p>
+                </div>
+              {% endfor %}
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+  {% endif %}
+
+  <!-- This will be used to load the Highcharts viz into -->
+  <div id="{{ timeseries.id }}-timeseries"></div>
+
+  <button class="btn show-table" type="button" data-id="{{ timeseries.id }}">Show table</button>
+
+  <div id="{{ timeseries.id }}-table-wrapper" class="hidden">
+    {% set table = timeseries.table %}
+    {% set id = timeseries.id %}
+    {% set metric = timeseries.metric %}
+    {% set client = request.args.get('client', '')  or 'mobile' %}
+    {% include "techreport/components/table.html" %}
+  </div>
+
+  {% include "techreport/components/filter_meta.html" %}
+</div>
diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html
new file mode 100644
index 00000000..ccc86f75
--- /dev/null
+++ b/templates/techreport/drilldown.html
@@ -0,0 +1,150 @@
+{% extends "techreport/report.html" %}
+
+{% block section %}
+  {{ super() }}
+
+  <div class="intro block-m">
+    <div class="info">
+      <h1>
+        <span class="subtitle">Tech Report</span>
+        <span class="">Drilldown</span>
+      </h1>
+      <!-- <ul class="category-list categories">
+        <li class="cell">Placeholder</li>
+      </ul> -->
+    </div>
+    <div class="filters">
+      {% include "techreport/templates/filters.html" %}
+    </div>
+  </div>
+
+  {% set filter_tech_title = tech_report_page.filters.app[0] or 'ALL' %}
+  {% include "techreport/components/filter_info_header.html" %}
+
+  <div id="report-content" class="report-content">
+    <div class="info intro block-m">
+      <h2>
+        <span class="subtitle">Results for</span>
+        <span class="main-title">ALL</span>
+      </h2>
+      <ul class="category-list categories">
+        <li class="cell">Placeholder</li>
+      </ul>
+    </div>
+
+    <!-- Section: Summary of the main metrics -->
+    <div
+      id="drilldown-summary"
+      class="block-m summary report-section"
+      data-type="section"
+      data-api="cwv,lighthouse,page-weight"
+    >
+      <h2>Summary</h2>
+      <div class="summary-grid">
+        {% for summary in tech_report_page.config.summary %}
+          {% include "techreport/components/summary_card.html" %}
+        {% endfor %}
+      </div>
+      {% include "techreport/components/filter_meta.html" %}
+    </div>
+
+    <!-- Section: Core Web Vitals -->
+    <div
+      id="good-cwvs"
+      class="block-m report-section"
+      data-type="section"
+      data-api="cwv"
+    >
+      <h2>Core Web Vitals</h2>
+      <p>Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome. A good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.</p>
+
+      {% if tech_report_page.config.good_cwv_summary %}
+        <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
+        <div class="summary-grid">
+          {% for summary in tech_report_page.config.good_cwv_summary.cards %}
+            {% set section_prefix = "cwv" %}
+            {% include "techreport/components/summary_card.html" %}
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <div class="card">
+        {% set timeseries = tech_report_page.config.good_cwv_timeseries %}
+        {% set selected_subcategory = request.args.get('good-cwv-over-time', '') or tech_report_page.config.good_cwv_timeseries.viz.default or 'overall' %}
+        {% include "techreport/components/timeseries.html" %}
+      </div>
+    </div>
+
+    <!-- Section: Lighthouse -->
+    <div
+      id="lighthouse"
+      class="block-m report-section"
+      data-type="section"
+      data-api="lighthouse"
+    >
+      <h2>Lighthouse</h2>
+      <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
+
+      {% if tech_report_page.config.lighthouse_summary %}
+        {% set section_prefix = "lighthouse" %}
+        <h3>{{ tech_report_page.config.lighthouse_summary.title }}</h3>
+        <div class="summary-grid">
+          {% for summary in tech_report_page.config.lighthouse_summary.cards %}
+            {% include "techreport/components/summary_card.html" %}
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <div class="card">
+        {% set timeseries = tech_report_page.config.lighthouse_timeseries %}
+        {% set selected_subcategory = request.args.get('median-lighthouse-over-time', '')  or 'performance' %}
+        {% include "techreport/components/timeseries.html" %}
+      </div>
+    </div>
+
+    <!-- Section: Page Weight -->
+    <div
+      id="page-weight"
+      class="block-m report-section"
+      data-type="section"
+      data-api="page-weight"
+    >
+      <h2>Page weight</h2>
+      <p>Description</p>
+
+      {% if tech_report_page.config.weight_summary %}
+      {% set section_prefix = "weight" %}
+        <h3>{{ tech_report_page.config.weight_summary.title }}</h3>
+        <div class="summary-grid">
+          {% for summary in tech_report_page.config.weight_summary.cards %}
+            {% include "techreport/components/summary_card.html" %}
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      <div class="card">
+        {% set timeseries = tech_report_page.config.weight_timeseries %}
+        {% set selected_subcategory = request.args.get('weight-over-time', '') or tech_report_page.config.weight_timeseries.viz.default or 'performance' %}
+        {% include "techreport/components/timeseries.html" %}
+      </div>
+    </div>
+
+    <!-- Section: Adoption -->
+    <div
+      id="adoption"
+      class="block-m report-section"
+      data-type="section"
+      data-api="adoption"
+    >
+      <h2>Adoption</h2>
+      <p>Description</p>
+
+      <div class="card">
+        {% set timeseries = tech_report_page.config.adoption_timeseries %}
+        {% set selected_subcategory = tech_report_page.config.adoption_timeseries.viz.default or 'adoption' %}
+        {% include "techreport/components/timeseries.html" %}
+      </div>
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html
new file mode 100644
index 00000000..88659812
--- /dev/null
+++ b/templates/techreport/landing.html
@@ -0,0 +1,35 @@
+{% extends "techreport/techreport.html" %}
+
+{% block head %}
+  {{ super() }}
+  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/techreport/landing.css') }}" />
+{% endblock %}
+
+{% block section %}
+  <div class="intro block-m">
+    <div>
+      <h1>
+        <span class="subtitle">Reports</span>
+        <span class="title">Tech Report</span>
+      </h1>
+      <p>
+        Placeholder text: A short description about what it is that we display in the Core Web Vitals report, and how it can be used. There should probably be links here to the individual technology pages and a few interesting comparison pages, as well as to the methodology page and the discussions etc like the reports have today.
+      </p>
+    </div>
+  </div>
+
+  <div class="report-content landing-content">
+    <div class="choices block-m">
+      <div class="card">
+        <h2><a href="/reports/techreport/drilldown">Technology Drilldown</a></h2>
+        <p>Get detailed information about <strong>one</strong> technology. </p>
+        <span class="img-placeholder"></span>
+      </div>
+      <div class="card">
+        <h2><a href="/reports/techreport/comparison">Technology Comparison</a></h2>
+        <p>Get detailed information about <strong>two to ten</strong> technologies. </p>
+        <span class="img-placeholder"></span>
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/templates/techreport/report.html b/templates/techreport/report.html
new file mode 100644
index 00000000..d2f24c61
--- /dev/null
+++ b/templates/techreport/report.html
@@ -0,0 +1,7 @@
+{% extends "techreport/techreport.html" %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block section %}{% endblock %}
diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html
new file mode 100644
index 00000000..181ad873
--- /dev/null
+++ b/templates/techreport/techreport.html
@@ -0,0 +1,112 @@
+{% extends "main.html" %}
+
+{% block title %}HTTP Archive: Tech Report{% endblock %}
+
+{% block head %}
+  {{ super() }}
+
+  <!-- Stylesheets -->
+  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/techreport/general.css') }}" />
+  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/techreport/techreport.css') }}" />
+{% endblock %}
+
+{% block report_navigation %}
+  <div class="info-panel">
+    <div class="block-l">
+      <p class="info-label">Beta</p>
+      <p>This dashboard is still under development.</p>
+    </div>
+  </div>
+
+  <nav class="report-navigation">
+    {% set filters = "" %}
+    {% if tech_report_page.filters %}
+      {% set filters = "?geo=" + tech_report_page.filters.geo + "&rank=" + tech_report_page.filters.rank %}
+    {% endif %}
+    <ul class="navigation-items block-l">
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "landing" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/landing"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Home
+        </a>
+      </li>
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "drilldown" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/drilldown{{ filters }}"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Drilldown
+        </a>
+      </li>
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "comparison" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/comparison{{ filters }}"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Comparison
+        </a>
+      </li>
+    </ul>
+  </nav>
+{% endblock %}
+
+{% block main %}
+  {% block section %}{% endblock %}
+  <div class="feedback">
+    <div class="block-m">
+      <h2>Feedback?</h2>
+      <p>
+        We are still working on this dashboard. The design and functionality can still change, and we're working on accessibility improvements and bugfixes.
+        What you're seeing here is a snapshot of our latest GitHub commit, and are <a href="https://github.com/HTTPArchive/cwv-tech-report/discussions/30">open for feedback</a>.
+      </p>
+    </div>
+  </div>
+
+  <div class="accessibility-options">
+    <div class="wrapper block-m">
+      <h2>Accessibility</h2>
+      <p>Change settings related to accessibility here</p>
+
+      <div class="setting">
+        <div class="check-wrapper">
+          <label for="indicators-check">Show markers</label>
+          <input type="checkbox" name="indicators-check" id="indicators-check" />
+        </div>
+      </div>
+
+      <div class="setting">
+        <button class="theme-switcher">🌚 Switch to dark mode</button>
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <!-- Libraries -->
+  <script src="{{ get_versioned_filename('/static/js/highcharts.js') }}" nonce="{{ csp_nonce() }}"></script>
+  <script src="{{ get_versioned_filename('/static/js/exporting.js') }}" nonce="{{ csp_nonce() }}"></script>
+  <script src="{{ get_versioned_filename('/static/js/export-data.js') }}" nonce="{{ csp_nonce() }}"></script>
+  <script src="{{ get_versioned_filename('/static/js/accessibility.js') }}" nonce="{{ csp_nonce() }}"></script>
+
+  <!-- Import general JS -->
+  <script src="{{ get_versioned_filename('/static/js/techreport/timeseries.js') }}" nonce="{{ csp_nonce() }}"></script>
+  <script src="{{ get_versioned_filename('/static/js/techreport/section.js') }}" nonce="{{ csp_nonce() }}"></script>
+  <script src="{{ get_versioned_filename('/static/js/techreport.js') }}" nonce="{{ csp_nonce() }}"></script>
+
+  <script nonce="{{ csp_nonce() }}">
+    const reportPage = {{ tech_report_page|tojson }};
+    const config = {{ tech_report_config|tojson }};
+    const labels = {{ tech_report_labels|tojson }};
+
+    const techReport = new TechReport('{{ active_page }}', reportPage, config, labels);
+  </script>
+{% endblock %}
diff --git a/templates/techreport/templates/filters.html b/templates/techreport/templates/filters.html
new file mode 100644
index 00000000..bfbdd0a1
--- /dev/null
+++ b/templates/techreport/templates/filters.html
@@ -0,0 +1,56 @@
+<form id="page-filters" class="card">
+  <div>
+    <fieldset class="technology-filters">
+      <legend class="sr-only">Technologies</legend>
+
+      {% set technologies = tech_report_page.filters.app or tech_report_page.config.default.app %}
+      {% if active_page == "drilldown" %}
+        {% set technologies = [technologies[0]] %}
+      {% endif %}
+
+      {% for technology in technologies %}
+        {% set key = loop.index %}
+        {% set technology = technology %}
+        {% set name = "tech-" + key|string %}
+        {% include "techreport/templates/selector_tech.html" %}
+      {% endfor %}
+
+      {% if active_page == "comparison" %}
+        <button id="add-tech">Add another technology</button>
+      {% endif %}
+    </fieldset>
+    <fieldset class="lens">
+      <legend>Lens</legend>
+      <div class="select-label">
+        <label for="geo">Geo</label>
+        <select name="geo" id="geo">
+          <option value="ALL" selected="true">
+            ALL
+          </option>
+        </select>
+      </div>
+      <div class="select-label">
+        <label for="rank">Rank</label>
+        <select name="rank" id="rank">
+          <option value="ALL" selected="true">
+            ALL
+          </option>
+        </select>
+      </div>
+    </fieldset>
+  </div>
+  <button type="submit" id="submit-form">Update</button>
+</form>
+
+<template id="filter-option">
+  <option value="Option">
+    Option
+  </option>
+</template>
+
+<template id="tech-selector">
+  {% set technology = "ALL" %}
+  {% set name = "tech-new" %}
+  {% set key = 2 %}
+  {% include "techreport/templates/selector_tech.html" %}
+</template>
diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html
new file mode 100644
index 00000000..4608857c
--- /dev/null
+++ b/templates/techreport/templates/selector_tech.html
@@ -0,0 +1,31 @@
+<div class="tech-selector-group" data-tech="{{ name }}">
+  <div class="content">
+    <div class="categories-selector-group">
+      <label for="categories-{{ name }}">Category</label>
+      <select name="categories" class="categories-selector" id="categories-{{ name }}" data-tech="{{ name }}">
+        <option value="ALL" selected="true">
+          ALL
+        </option>
+      </select>
+    </div>
+
+    <div class="tech-selector">
+      <label for="{{ name }}" class="tech">Technology</label>
+      <div class="tech-input-wrapper">
+        <select name="tech" class="tech" data-selected="{{ technology }}" id="{{ name }}">
+          <option value="{{ technology }}" selected="true">
+            {{ technology }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  {% if active_page == "comparison" %}
+    <div class="actions">
+        <button class="remove-tech {% if technologies|length == 1 %}hidden{% endif %}" data-tech="{{ name }}">
+          <img src="/static/img/icon-delete.svg" alt="Remove" height="28" width="28" data-tech="{{ name }}" />
+        </button>
+    </div>
+  {% endif %}
+</div>
diff --git a/tools/generate/generate_js.js b/tools/generate/generate_js.js
index ae983351..dbcf8732 100644
--- a/tools/generate/generate_js.js
+++ b/tools/generate/generate_js.js
@@ -1,8 +1,11 @@
 const fs = require('fs-extra');
 
 node_module_files = [
+  'highcharts/highcharts.js',
   'highcharts/highcharts-more.js',
   'highcharts/highstock.js',
+  'highcharts/modules/accessibility.js',
+  'highcharts/modules/export-data.js',
   'highcharts/modules/exporting.js'
 ];
 
diff --git a/tools/generate/generate_sitemap.js b/tools/generate/generate_sitemap.js
index 1a43334c..8bb4c55d 100644
--- a/tools/generate/generate_sitemap.js
+++ b/tools/generate/generate_sitemap.js
@@ -30,6 +30,11 @@ const generate_sitemap = async () => {
   for (const report of report_config._reports) {
     if (report_config[report] && report_config[report].url && report_config[report].url.startsWith('http')) {
       console.log(`Skipping ${report} as has external url\n`);
+    } else if (report_config[report] && report_config[report].url && report_config[report].url.startsWith('/')) {
+      const loc = `reports/${report}`;
+      const lastmod = get_lastmod_date(loc);
+      const url = report_config[report].url.slice(1);
+      urls.push({ url, lastmod });
     } else {
       const loc = `reports/${report}`;
       const lastmod = get_lastmod_date(loc);
diff --git a/tools/scripts/set_lighthouse_urls.sh b/tools/scripts/set_lighthouse_urls.sh
index f85b7a6b..1b3a46d8 100755
--- a/tools/scripts/set_lighthouse_urls.sh
+++ b/tools/scripts/set_lighthouse_urls.sh
@@ -56,16 +56,16 @@ elif [ "${RUN_TYPE}" == "pull_request" ] && [ "${COMMIT_SHA}" != "" ]; then
     git pull --quiet
     git checkout main
     # Then get the changes
-    CHANGED_FILES=$(git diff --name-only "main...${COMMIT_SHA}" --diff-filter=d templates config/reports.json | grep -v base.html | grep -v main.html | grep -v ejs | grep -v base_ | grep -v sitemap | grep -v error.html )
+    CHANGED_FILES=$(git diff --name-only "main...${COMMIT_SHA}" --diff-filter=d templates config/reports.json | grep -v base.html | grep -v main.html | grep -v ejs | grep -v base_ | grep -v sitemap | grep -v error.html | grep -v techreport/components | grep -v techreport/templates | grep -v techreport/report | grep -v techreport/techreport)
     echo "${CHANGED_FILES}"
 
     # Then back to the pull request changes
     git checkout --progress --force "${COMMIT_SHA}"
 
     # Transform the files to http://127.0.0.1:8080 URLs
-    LIGHTHOUSE_URLS=$(echo "${CHANGED_FILES}" | sed 's/templates/http:\/\/127.0.0.1:8080/g' | sed 's/index\.html//g' | sed 's/\.html//g' | sed 's/_/-/g' )
+    LIGHTHOUSE_URLS=$(echo "${CHANGED_FILES}" | sed 's/templates/http:\/\/127.0.0.1:8080/g' | sed 's/techreport/reports\/techreport/g' | sed 's/index\.html//g' | sed 's/\.html//g' | sed 's/_/-/g' )
 
-    # If report.json or any of the report templaes were changed, then test all the reports
+    # If report.json or any of the report templates were changed, then test all the reports
     # TODO - make this list dynamic
     LIGHTHOUSE_URLS=$(echo "${LIGHTHOUSE_URLS}" | sed 's/config\/reports.json/http:\/\/127.0.0.1:8080\/reports\/state-of-the-web\nhttp:\/\/127.0.0.1:8080\/reports\/state-of-javascript\nhttp:\/\/127.0.0.1:8080\/reports\/state-of-images\nhttp:\/\/127.0.0.1:8080\/reports\/loading-speed\nhttp:\/\/127.0.0.1:8080\/reports\/progressive-web-apps\nhttp:\/\/127.0.0.1:8080\/reports\/accessibility\nhttp:\/\/127.0.0.1:8080\/reports\/search-engine-optimization\nhttp:\/\/127.0.0.1:8080\/reports\/page-weight\nhttp:\/\/127.0.0.1:8080\/reports\/chrome-ux-report\nhttp:\/\/127.0.0.1:8080\/reports\/project-fugu/g')
     LIGHTHOUSE_URLS=$(echo "${LIGHTHOUSE_URLS}" | sed 's/http:\/\/127.0.0.1:8080\/report\/.*/http:\/\/127.0.0.1:8080\/reports\/state-of-the-web\nhttp:\/\/127.0.0.1:8080\/reports\/state-of-javascript\nhttp:\/\/127.0.0.1:8080\/reports\/state-of-images\nhttp:\/\/127.0.0.1:8080\/reports\/loading-speed\nhttp:\/\/127.0.0.1:8080\/reports\/progressive-web-apps\nhttp:\/\/127.0.0.1:8080\/reports\/accessibility\nhttp:\/\/127.0.0.1:8080\/reports\/search-engine-optimization\nhttp:\/\/127.0.0.1:8080\/reports\/page-weight\nhttp:\/\/127.0.0.1:8080\/reports\/chrome-ux-report\nhttp:\/\/127.0.0.1:8080\/reports\/project-fugu/g')
diff --git a/webpack.config.js b/webpack.config.js
index f38a7907..74d23eb8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,6 +10,11 @@ module.exports = {
     'histogram': './src/js/histogram.js',
     'timeseries': './src/js/timeseries.js',
     'send-web-vitals': './src/js/send-web-vitals.js',
+
+    // Techreport
+    'techreport': './src/js/techreport/index.js',
+    'techreport/timeseries': './src/js/techreport/timeseries.js',
+    'techreport/section': './src/js/techreport/section.js',
   },
   output: {
     path: path.resolve(__dirname, 'static/js'),