diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js
index e819d69f..bfc534aa 100644
--- a/src/js/components/drilldownHeader.js
+++ b/src/js/components/drilldownHeader.js
@@ -34,6 +34,9 @@ function setCategories(categories) {
       cellTemplate.textContent = `+ ${more} more`;
       list.appendChild(cellTemplate);
     }
+  } else {
+    const list = document.querySelector('.intro .category-list');
+    list.remove();
   }
 }
 
@@ -41,6 +44,9 @@ function setDescription(description) {
   if(description && description !== "") {
     const descr = document.querySelector('p.app-description');
     descr.textContent = description;
+  } else {
+    const descr = document.querySelector('p.app-description');
+    descr.remove();
   }
 }
 
diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js
index 4a2777bd..6d83c6b5 100644
--- a/src/js/techreport/index.js
+++ b/src/js/techreport/index.js
@@ -366,6 +366,7 @@ class TechReport {
       },
     ];
 
+    const filters = document.querySelectorAll('.filters select');
     Promise.all(filterApis.map(api => {
       const url = `${Constants.apiBase}/${api.endpoint}`;
 
@@ -380,6 +381,8 @@ class TechReport {
       FilterComponent.updateTechnologies();
       FilterComponent.updateRank();
       FilterComponent.updateGeo();
+
+      filters.forEach(filter => filter.removeAttribute('disabled'));
     });
   }
 
diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
index 7a355754..a8a969b5 100644
--- a/src/js/techreport/tableLinked.js
+++ b/src/js/techreport/tableLinked.js
@@ -102,18 +102,22 @@ class TableLinked {
               cell = document.createElement('th');
               cell.classList.add('app-cell');
 
+              const wrapper = document.createElement('span');
+              wrapper.classList.add('app-wrapper');
+
               const img = document.createElement('span');
               const imgUrl = `https://cdn.httparchive.org/static/icons/${encodeURI(technology[0]?.icon)}`;
               img.setAttribute('aria-hidden', 'true');
               img.setAttribute('style', `background-image: url(${imgUrl})`);
               img.classList.add('app-img');
-              cell.append(img);
+              wrapper.append(img);
 
               const formattedApp = DataUtils.formatAppName(app);
               const link = document.createElement('a');
               link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
               link.innerHTML = formattedApp;
-              cell.append(link);
+              wrapper.append(link);
+              cell.append(wrapper);
             } else if (column.type === 'checkbox') {
               cell = this.addColumnCheckbox(app);
             } else if(column.key === 'client') {
diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css
index cb3fd9c6..cfbabfb7 100644
--- a/static/css/techreport/general.css
+++ b/static/css/techreport/general.css
@@ -39,7 +39,7 @@ strong {
 }
 
 :is(a, button, select):focus-visible {
-  outline: 1.5px solid var(--color-teal-dark);
+  outline: 1.5px solid var(--focus-default);
   outline-offset: 1.5px;
   border-radius: 3px;
 }
@@ -68,7 +68,7 @@ nav li:hover {
   padding: 1.5rem;
   background: var(--color-card-background);
   border-radius: var(--card-radius);
-  border: 1px solid var(--color-card-border-light);
+  border: 1px solid var(--color-card-border);
   box-shadow: var(--card-shadow);
   transition: padding 0.35s;
 }
@@ -124,6 +124,7 @@ nav li:hover {
   width: 25rem;
   max-width: 100vw;
   position: relative;
+  border-right: 1px solid var(--color-card-border);
 }
 
 .split-view:has(.filters.hidden) .page-content {
diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
index 780c83df..e229c3a4 100644
--- a/static/css/techreport/techreport.css
+++ b/static/css/techreport/techreport.css
@@ -7,43 +7,85 @@
   --color-teal-accent: #4e848b;
   --color-teal-dark: #3a5c63;
   --color-teal-darker: #1c4750;
+  --color-blue-darkest: #0a3555;
   --color-blue-dark: #3a7098;
-  --color-blue-100: #eff7ff;
   --color-blue-light: #e1f1ff;
+  --color-gray-lighter: #747171;
   --color-gray-medium: #5c5c5d;
+  --color-gray-dark: #2f2f30;
+  --color-gray-light: #f6f6f7;
   --color-teal-vibrant: #1c818d;
   --color-teal-vibrant-darker: #136e78;
+  --color-yellow-light: #fefae5;
+  --color-yellow-dark: #B08705;
+  --color-yellow-darker: #705600;
+  --color-yellow-darkest: #352902;
 
   /* Colors based on function */
+  /* Regular text */
   --color-link: var(--color-blue-dark);
   --color-text: #444;
   --color-text-lighter: #5f6768;
   --color-text-darker: #1e1e1e;
   --color-text-inverted: #fff;
+
+  /* Cards */
   --color-card-background: #fff;
   --color-card-border: #cdd4d6;
   --color-card-border-light: #e8e8e8;
+
+  /* Page */
   --color-page-background: #f4f4f4;
+  --color-bg-gradient: var(--color-teal-faded);
+  --color-page-border: var(--color-teal-medium);
+  --color-separator: var(--color-card-border);
+
+  /* Checkboxes */
   --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);
+
+  /* Buttons */
+  --color-button-background: var(--color-teal-vibrant);
+  --color-button-background-hover: var(--color-teal-vibrant-darker);
+  --color-button-text: #fff;
   --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);
+  --color-button-border: var(--color-text-lighter);
+
+  /* Dropdowns */
+  --color-dropdown-background: transparent;
+  --color-dropdown-background-hover: var(--color-teal-light);
+  --color-dropdown-background-disabled: var(--color-gray-light);
+  --color-dropdown-text: var(--color-text);
+  --color-dropdown-text-disabled: var(--color-text-lighter);
+  --color-dropdown-border-disabled: #aeb1b3;
+  --color-dropdown-border: var(--color-text-lighter);
+
+  /* Pills */
+  --color-pillbutton-background: var(--color-gray-light);
+  --color-pillbutton-text: var(--color-text-lighter);
+  --color-pillbutton-border: var(--color-gray-medium);
+
+  /* Navigation */
   --color-nav: #667a7d;
   --color-nav-active: var(--color-teal-accent);
   --color-nav-inactive: var(--color-teal-medium);
-  --color-button-background: var(--color-teal-vibrant);
-  --color-button-background-hover: var(--color-teal-vibrant-darker);
-  --color-button-text: #fff;
-  --color-progress-basic-border: #8e9799;
+
+  /* Charts */
+  --color-progress-basic-border: #879092;
   --color-progress-basic-bg: #eee;
   --color-progress-basic-fill: #3a5c63;
 
+  /* Tables */
+  --color-table-selected-bg: var(--color-yellow-light);
+  --color-table-selected-border: var(--color-yellow-dark);
+  --table-row-hover: var(--color-blue-light);
+  --table-row-hover-border: var(--color-blue-dark);
+
   /* Font sizes */
   --font-size-small: 0.875rem;
   --font-size-regular: 1rem;
@@ -54,7 +96,6 @@
   /* Components */
   --card-shadow: 0 3px 12px 0px rgba(106, 121, 124, 0.2);
   --card-radius: 0.625rem;
-  --table-row-hover: var(--color-blue-100);
   --color-panel-text: #203b40;
   --color-panel-background: #bfe1e7;
 
@@ -63,20 +104,29 @@
   --graph-color-primary-darker: var(--color-teal-darker);
   --graph-color-line: #a6bbbe;
   --graph-color-labels: #62777b;
+  --progess-color-empty: var(--color-progress-basic-bg);
 
   /* Defaults */
   --breakdown-color: var(--color-text);
+  --focus-default: var(--color-teal-dark);
 }
 
 [data-theme="dark"] {
+  /* Text */
   --color-link: var(--color-teal-faded);
   --color-text: #fff;
   --color-text-lighter: #fff;
   --color-text-darker: #fff;
   --color-text-inverted: #000;
+  --color-nav-inactive: #6D8488;
+
+  /* Cards */
   --color-card-background: #111;
   --color-card-border: #000;
+  --card-shadow: 0 3px 12px 0px rgba(4, 8, 8, 0.2);
   --color-page-background: #292828;
+
+  /* Checkboxes */
   --color-checkbox-button-label-selected: #292828;
   --color-checkbox: #fff;
   --color-checkbox-selected: #292828;
@@ -88,9 +138,35 @@
   --color-panel-background: #203b40;
   --color-nav: #bfe1e7;
 
+  /* Pills */
+  --color-pillbutton-background: var(--color-page-background);
+  --color-pillbutton-text: var(--color-text-lighter);
+  --color-pillbutton-border: var(--color-gray-medium);
+
+  /* Tables */
+  --color-table-selected-bg: var(--color-yellow-darkest);
+  --color-table-selected-border: var(--color-yellow-darker);
+  --table-row-hover: var(--color-teal-darker);
+  --table-row-hover-border: var(--color-blue-light);
+
   /* Graph colors */
   --graph-color-labels: #a6bbbe;
   --graph-color-line: var(--color-gray-medium);
+
+  /* Dropdowns */
+  --color-dropdown-border: var(--color-gray-lighter);
+  --color-dropdown-background-hover: var(--color-page-background);
+  --color-dropdown-text-disabled: var(--color-gray-lighter);
+  --color-dropdown-background-disabled: var(--color-page-background);
+  --color-dropdown-border-disabled: var(--color-gray-medium);;
+
+  /* Buttons */
+  --color-button-border: var(--color-gray-lighter);
+
+  /* Other */
+  --color-separator: var(--color-gray-dark);
+  --focus-default: var(--color-text-darker);
+  --progess-color-empty: var(--color-page-background);
 }
 
 /* ------------------------- */
@@ -168,6 +244,93 @@ nav {
   font-weight: 600;
 }
 
+/* Dropdowns */
+.default-dropdown-label {
+  margin-bottom: 0.5rem;
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  width: 100%;
+}
+
+.default-dropdown {
+  width: 100%;
+  margin-bottom: 0;
+  border: 1px solid var(--color-dropdown-border);
+  appearance: none;
+  background-color: transparent;
+  color: var(--color-text-darker);
+  font-size: 0.9rem;
+  padding: 0.5rem;
+  z-index: 4;
+  position: relative;
+}
+
+.default-dropdown-group:not(:first-of-type) {
+  margin-top: 1.5rem;
+}
+
+.default-dropdown-wrapper {
+  position: relative;
+}
+
+.default-dropdown-wrapper::before {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  border-radius: 0 4px 4px 0;
+  z-index: 2;
+}
+
+.default-dropdown-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: 3;
+}
+
+.default-dropdown:not(:disabled):is(:focus-visible, :hover) {
+  background-image: linear-gradient(-90deg, var(--color-dropdown-background-hover), var(--color-dropdown-background-hover));
+  background-repeat: no-repeat;
+  background-size: calc(100% - 2.5rem) 100%;
+}
+
+.default-dropdown-wrapper:has(select:not(:disabled):is(:focus-visible, :hover))::before {
+  background-color: var(--color-text-darker);
+  border-left: 1px solid var(--color-text-darker);
+}
+
+.default-dropdown-wrapper:has(select:is(:focus-visible, :hover))::after {
+  border-color: var(--color-page-background);
+}
+
+.default-dropdown-wrapper:has(select:focus-visible) {
+  background-color: var(--color-page-background);
+  color: var(--color-text);
+}
+
+.default-dropdown:disabled {
+  background-color: var(--color-dropdown-background-disabled);
+  color: var(--color-dropdown-text-disabled);
+  border-color: var(--color-dropdown-border-disabled);
+}
+
+.default-dropdown-wrapper:has(select:disabled)::after {
+  border-color: var(--color-dropdown-text-disabled);
+}
+
 /* -------------------- */
 /* ---- Components ---- */
 /* -------------------- */
@@ -224,7 +387,7 @@ nav {
   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);
+  border-bottom:1px solid var(--color-card-border);
   display: flex;
   justify-content: space-between;
   padding: 0 2.5vw;
@@ -411,7 +574,7 @@ nav {
   margin-bottom: 1.5rem;
   margin-right: 0;
   margin-top: 2rem;
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 2.5rem;
 }
 
@@ -423,8 +586,7 @@ nav {
   width: 100%;
 }
 
-#page-filters .lens .select-label select,
-.breakdown select {
+#page-filters .lens .select-label select {
   color: var(--color-text-darker);
   font-size: 0.9rem;
   width: 100%;
@@ -432,128 +594,15 @@ nav {
   padding: 0.825rem;
 }
 
-.breakdown select {
-  background-color: transparent;
-  appearance: none;
-  margin: 0;
-  border: none;
-}
-
-#page-filters .lens .select-label:not(:last-of-type) {
-  margin-bottom: 2rem;
-}
-
-.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;
-  line-height: 100%;
-  color: var(--color-text-darker);
-  border-radius: 3px;
-  outline-offset: 2px;
-}
-
 .dropdown-content {
   z-index: 2;
 }
 
-.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: var(--color-page-background);
-}
-
-.select-label:has(select:focus-visible) {
-  background-color: var(--color-page-background);
-}
-
-.select-label:has(select:focus-visible) label {
-  color: var(--color-text) !important;
-}
-
 .technology-filters {
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 2.5rem;
 }
 
-.technology-filters label.tech {
-  margin-bottom: 0.5rem;
-  color: var(--color-text);
-  font-size: 0.875rem;
-  font-weight: 600;
-  width: 100%;
-}
-
-.technology-filters select.tech {
-  width: 100%;
-  margin-bottom: 0;
-  border: 1px solid #959494;
-  appearance: none;
-  background-color: transparent;
-  color: var(--color-text-darker);
-  font-size: 0.9rem;
-  border-color: var(--color-text-lighter);
-  padding: 0.5rem;
-}
-
-.technology-filters .tech-selector-group {
-  padding-top: 1.5rem;
-}
-
-.technology-filters .tech-selector-group:first-of-type {
-  margin-top: -1.5rem;
-}
-
 .breakdown {
   margin-top: 1rem;
 }
@@ -574,66 +623,6 @@ nav {
   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: 2;
-}
-
-.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: 3;
-}
-
-.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: var(--color-page-background);
-}
-
-.tech-input-wrapper:has(select:focus-visible) {
-  background-color: var(--color-page-background);
-  color: var(--color-text);
-}
-
-.tech-input-wrapper:has(select:focus-visible) select {
-  color: var(--color-text);
-}
-
-[data-theme="dark"] select option,
-[data-theme="dark"] .tech-input-wrapper:has(select:focus-visible) select {
-  color: var(--color-page-background) !important;
-  background-color: var(--color-text-darker) !important;
-}
-
 .tech-selector-group .content {
   position: relative;
   width: 100%;
@@ -978,8 +967,8 @@ select {
   text-align: left;
 }
 
-.table-ui :is(td, th):not(:last-child) {
-  padding: 1rem 1rem 1rem 0;
+.table-ui :is(td, th):not(:last-child, :first-child) {
+  padding: 1rem 0;
 }
 
 .table-ui :is(td, th):has(.progress-circle) {
@@ -987,7 +976,7 @@ select {
 }
 
 .table-ui tbody tr {
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
 }
 
 .table-ui tbody th {
@@ -1002,54 +991,75 @@ select {
 .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(.check-cell input[type="checkbox"]:checked) {
+  background-color: var(--color-table-selected-bg);
+  border: 1px solid var(--color-table-selected-border);
 }
 
-.table-ui tr:has(.row-link:hover) {
-  background-color: var(--table-row-hover);
+.table-ui tr:has(.check-cell input[type="checkbox"]:checked) :is(th, td) {
+  border-bottom: 1px solid var(--color-table-selected-border);
+  border-top: 1px solid var(--color-table-selected-border);
 }
 
-.table-ui tr:has(.row-link:focus) {
+.table-ui tr:has(.app-cell a:is(:hover, :focus-visible)) {
   background-color: var(--table-row-hover);
-  border: 1.5px solid var(--color-teal-dark);
+  box-shadow: 0 0 0 1.5px var(--table-row-hover-border) inset,
+    0 2px 0 var(--table-row-hover-border) inset;
+  border-bottom-color: transparent;
 }
 
-.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 td.check-cell {
+  position: relative;
 }
 
-.table-ui tr:has(.row-link:focus) .row-link:focus {
-  /* So the outline only gets removed in browsers that support :has */
-  outline-style: dotted;
+.check-cell input[type="checkbox"]::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.check-cell input[type="checkbox"]:is(:hover, :focus) {
+  border-width: 2px;
+}
+
+.table-ui .app-wrapper {
+  display: flex;
+  min-width: 15rem;
+  max-width: 25rem;
+  align-items: center;
 }
 
 .table-ui .app-cell .app-img {
-  display: inline-block;
+  display: block;
   height: 1rem;
   width: 1rem;
   margin-right: 0.75rem;
-  position: relative;
-  top: -0.12rem;
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .table-ui .app-cell a {
-  display: inline-block;
-  width: 20rem;
   text-overflow: ellipsis;
   text-wrap: nowrap;
   overflow: hidden;
 }
 
+.table-ui .app-cell a:focus-visible {
+  outline-color: var(--table-row-hover-border);
+}
+
 .table-ui .check-cell {
   min-width: 2rem;
+  padding-left: 0.5rem;
 }
 
 .table-ui .check-cell input[type="checkbox"] {
@@ -1085,6 +1095,7 @@ select {
 
 .table-ui .client {
   text-align: right;
+  padding-right: 0.5rem;
 }
 
 .table-ui .good-scores {
@@ -1148,7 +1159,7 @@ select {
   justify-content: space-between;
   padding: 1.5rem 0 1rem;
   margin-top: 2.5rem;
-  border-top: 1px solid var(--color-card-border);
+  border-top: 1px solid var(--color-separator);
 }
 
 .table-page-info p {
@@ -1197,9 +1208,9 @@ select {
 .intro {
   border: none;
   margin-top: 0;
+  margin-bottom: 3rem;
   background-color: transparent;
-  padding: 4rem 0;
-  margin-bottom: 2.5rem;
+  padding: 3rem 0 7rem 0;
 }
 
 .intro h1 {
@@ -1283,16 +1294,17 @@ select {
   width: 100%;
 }
 
-.report-content {
+.data-sections {
   background-image: linear-gradient(var(--color-bg-gradient), rgba(238, 238, 238, 0));
   background-size: 100% 50rem;
   background-repeat: no-repeat;
-  background-position: 0 25rem;
+  background-position: 0 0;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-page-border);
 }
 
-.report-content .intro {
-  padding: 0;
-  margin-top: 3rem;
+.data-sections > div:first-of-type {
+  margin-top: -10rem;
 }
 
 .report-section {
@@ -1304,7 +1316,6 @@ select {
 }
 
 h2.summary-heading {
-  margin-top: 4rem;
   font-size: var(--font-size-regular);
   text-transform: uppercase;
   font-weight: 600;
@@ -1322,7 +1333,7 @@ h2.summary-heading {
 }
 
 .report-section > .card {
-  margin-top: 2rem;
+  margin-top: 1rem;
 }
 
 .report-content:has(> .error) {
@@ -1548,7 +1559,6 @@ path.highcharts-tick {
   --progress-start: calc(70% - 1px);
   --progess-width: calc(70% - 0.25em);
   --progress-end: calc(70% - 0.25em + 1.5px);
-  --progess-color-empty: var(--color-progress-basic-bg);
   --offset-start: 0.75%;
   --offset-end: calc(var(--offset) - var(--offset-start));
 
@@ -1586,7 +1596,7 @@ path.highcharts-tick {
 
 .accessibility-options {
   background-color: var(--color-card-background);
-  border-bottom: 1px solid var(--color-card-border);
+  border-bottom: 1px solid var(--color-separator);
   padding-bottom: 4rem;
 }
 
@@ -1600,7 +1610,7 @@ path.highcharts-tick {
 }
 
 .check-wrapper {
-  border: 1px solid var(--color-text-lighter);
+  border: 1px solid var(--color-button-border);
   display: inline-block;
   margin-top: 1rem;
   margin-bottom: 0.25rem;
@@ -1667,7 +1677,7 @@ path.highcharts-tick {
 
 .theme-switcher {
   background-color: var(--color-theme-toggle-background);
-  border: 1px solid var(--color-text-lighter);
+  border: 1px solid var(--color-button-border);
   margin-top: 1rem;
   margin-bottom: 0.25rem;
   padding: 0.5rem 1rem;
@@ -1693,9 +1703,9 @@ path.highcharts-tick {
 }
 
 .cta-link[data-name="selected-apps"] {
-  border: 1.5px solid var(--color-teal-dark);
+  border: 1.5px solid var(--color-button-background);
   background-color: transparent;
-  color: var(--color-teal-dark);
+  color: var(--color-button-background);
 }
 
 .selected-apps {
@@ -1705,7 +1715,8 @@ path.highcharts-tick {
 
 .selected-apps p {
   font-weight: 600;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1.75rem;
 }
 
 .selected-apps ul li {
@@ -1715,15 +1726,15 @@ path.highcharts-tick {
 }
 
 .selected-apps ul li:not(:last-of-type) {
-  margin-right: 1em;
+  margin-right: 0.75em;
 }
 
 .selected-apps ul li button {
   padding: 0.1em 0.5em;
   border-radius: 2rem;
-  border: 1px solid var(--color-text-lighter);
-  background-color: transparent;
-  color: var(--color-text-lighter);
+  border: 1px solid var(--color-pillbutton-border);
+  background-color: var(--color-pillbutton-background);
+  color: var(--color-pillbutton-text);
 }
 
 .selected-apps ul li button img {
diff --git a/templates/techreport/category.html b/templates/techreport/category.html
index 20756365..50487109 100644
--- a/templates/techreport/category.html
+++ b/templates/techreport/category.html
@@ -3,14 +3,14 @@
 {% block filters %}
 <form id="page-filters">
   <div>
-    <fieldset class="technology-filters">
+    <fieldset class="technology-filters filters">
       <legend class="form-title">Choose a dataset</legend>
 
-      <div class="tech-selector">
-        <label for="categories_selector" class="tech">Category</label>
-        <div class="tech-input-wrapper">
+      <div class="tech-selector default-dropdown-group">
+        <label for="categories_selector" class="tech default-dropdown-label">Category</label>
+        <div class="default-dropdown-wrapper">
           {% set category_selected = tech_report_page.filters.category or tech_report_config.default_category %}
-          <select name="categories" class="tech" data-selected="{{ category_selected }}" id="categories_selector">
+          <select name="categories" class="default-dropdown tech" data-selected="{{ category_selected }}" id="categories_selector" disabled>
             <option value="{{ category_selected }}" selected="true">
               {{ category_selected }}
             </option>
@@ -22,22 +22,26 @@
     <fieldset class="lens">
       <legend class="sr-only">Lens</legend>
 
-      <label for="geo">Geo</label>
-      <div class="select-label">
-        <select name="geo" id="geo">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="geo">Geo</label>
+        <div class="default-dropdown-wrapper">
+          <select class="default-dropdown" name="geo" id="geo" disabled>
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
 
-      <label for="rank">Rank</label>
-      <div class="select-label">
-        <select name="rank" id="rank">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="rank">Rank</label>
+        <div class="default-dropdown-wrapper">
+          <select class="default-dropdown" name="rank" id="rank" disabled>
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
     </fieldset>
   </div>
@@ -77,99 +81,101 @@ <h1>
       </div>
     </div>
 
-    <div
-      id="cateogry-summary"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="category"
-    >
-      <h2 class="summary-heading">Summary</h2>
-      <div class="summary-grid">
-        {% for summary in tech_report_page.config.summary %}
-          {% include "techreport/components/summary_card.html" %}
-        {% endfor %}
+    <div class="data-sections">
+      <div
+        id="cateogry-summary"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="category"
+      >
+        <h2 class="summary-heading">Summary</h2>
+        <div class="summary-grid">
+          {% for summary in tech_report_page.config.summary %}
+            {% include "techreport/components/summary_card.html" %}
+          {% endfor %}
+        </div>
       </div>
-    </div>
 
-    <div
-      id="comparison-summary"
-      class="card block-m summary report-section"
-      data-type="section"
-      data-api="cwv,lighthouse,page-weight"
-    >
-      <h2>Technologies</h2>
-      <div class="table-descr">
-        <p>
-          Overview of the latest Core Web Vitals of all technologies within this category, sorted by number of origins.
-          Select up to 10 technologies to compare their Core Web Vitals, Lighthouse scores, adoption, and page weight over time, or view details about a single technology.
-        </p>
-        <p>
-          Currently showing page <strong><span data-page="current">1</span> of <span data-page="total">1</span></strong>, based on the latest data (<span data-slot="timestamp"></span>).
-        </p>
-      </div>
+      <div
+        id="comparison-summary"
+        class="card block-m summary report-section"
+        data-type="section"
+        data-api="cwv,lighthouse,page-weight"
+      >
+        <h2>Technologies</h2>
+        <div class="table-descr">
+          <p>
+            Overview of the latest Core Web Vitals of all technologies within this category, sorted by number of origins.
+            Select up to 10 technologies to compare their Core Web Vitals, Lighthouse scores, adoption, and page weight over time, or view details about a single technology.
+          </p>
+          <p>
+            Currently showing page <strong><span data-page="current">1</span> of <span data-page="total">1</span></strong>, based on the latest data (<span data-slot="timestamp"></span>).
+          </p>
+        </div>
 
-      {% set component = tech_report_page.config.tech_comparison_summary %}
-      {% set id = component.id %}
-      {% set client = request.args.get('client', '')  or 'mobile' %}
-      {% set sort_endpoint = "adoption" %}
-      {% set sort_metric = "adoption" %}
-      {% set sort_key = "origins" %}
-      {% set sort_order = "desc" %}
+        {% set component = tech_report_page.config.tech_comparison_summary %}
+        {% set id = component.id %}
+        {% set client = request.args.get('client', '')  or 'mobile' %}
+        {% set sort_endpoint = "adoption" %}
+        {% set sort_metric = "adoption" %}
+        {% set sort_key = "origins" %}
+        {% set sort_order = "desc" %}
 
-      <a data-name="selected-apps" href="/reports/techreport/tech" class="cta-link">Compare all technologies on this page</a>
+        <a data-name="selected-apps" href="/reports/techreport/tech" class="cta-link">Compare all technologies on this page</a>
 
-      <div class="selected-apps">
-        <p>
-          Selected technologies:
-        </p>
-        <ul data-name="selected-apps-overview"></ul>
-      </div>
+        <div class="selected-apps">
+          <p>
+            Selected technologies:
+          </p>
+          <ul data-name="selected-apps-overview"></ul>
+        </div>
 
-      {% set table = component.table %}
-      {% include "techreport/components/table_linked.html" %}
+        {% set table = component.table %}
+        {% include "techreport/components/table_linked.html" %}
 
-      <div class="table-pagination">
-        {% set filters = tech_report_page.filters %}
-        <p data-pagination="previous">
-          {% if filters.page and filters.page > 1 %}
-            <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page - 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Previous page </a>
-          {% endif %}
-        </p>
-        <div class="table-page-info">
-          <p>
-            Page <strong data-page="current">1</strong> of <strong data-page="total">1</strong>
+        <div class="table-pagination">
+          {% set filters = tech_report_page.filters %}
+          <p data-pagination="previous">
+            {% if filters.page and filters.page > 1 %}
+              <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page - 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Previous page </a>
+            {% endif %}
           </p>
-          <div class="table-row-count">
-            <label for="rowsPerPage">
-              Rows
-            </label>
-            <select id="rowsPerPage">
-              {% if filters.rows == "10" %}
-                <option value="10" selected>10</option>
-              {% else %}
-                <option value="10">10</option>
-              {% endif %}
-              {% if filters.rows == "20" %}
-                <option value="20" selected>20</option>
-              {% else %}
-                <option value="20">20</option>
-              {% endif %}
-              {% if filters.rows == "30" %}
-                <option value="30" selected>30</option>
-              {% else %}
-                <option value="30">30</option>
-              {% endif %}
-            </select>
+          <div class="table-page-info">
+            <p>
+              Page <strong data-page="current">1</strong> of <strong data-page="total">1</strong>
+            </p>
+            <div class="table-row-count">
+              <label for="rowsPerPage">
+                Rows
+              </label>
+              <select id="rowsPerPage">
+                {% if filters.rows == "10" %}
+                  <option value="10" selected>10</option>
+                {% else %}
+                  <option value="10">10</option>
+                {% endif %}
+                {% if filters.rows == "20" %}
+                  <option value="20" selected>20</option>
+                {% else %}
+                  <option value="20">20</option>
+                {% endif %}
+                {% if filters.rows == "30" %}
+                  <option value="30" selected>30</option>
+                {% else %}
+                  <option value="30">30</option>
+                {% endif %}
+              </select>
+            </div>
+            <p class="sr-only" aria-live="polite">
+              <span id="rows-announcement"></span>
+            </p>
           </div>
-          <p class="sr-only" aria-live="polite">
-            <span id="rows-announcement"></span>
+          <p data-pagination="next">
+            {% if not filters.last_page and filters.last_page == False  %}
+              <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page + 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Next page</a>
+            {% endif %}
           </p>
         </div>
-        <p data-pagination="next">
-          {% if not filters.last_page and filters.last_page == False  %}
-            <a href="/reports/techreport/category?geo={{ filters.geo }}&rank={{ filters.rank }}&category={{ filters.category }}&page={{ filters.page + 1 }}{%if filters.selected %}&selected={{ filters.selected }}{% endif %}{%if filters.rows %}&rows={{ filters.rows }}{% endif %}">Next page</a>
-          {% endif %}
-        </p>
       </div>
     </div>
   </div>
diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html
index 29c0c4cd..fcac1960 100644
--- a/templates/techreport/comparison.html
+++ b/templates/techreport/comparison.html
@@ -21,102 +21,104 @@ <h1>
       </div>
     </div>
 
-    <!-- Section: Summary of the main metrics -->
-    <div
-      id="comparison-summary"
-      class="card block-m summary report-section"
-      data-type="section"
-      data-api="cwv,lighthouse,page-weight"
-    >
-      <h2>Summary</h2>
-      <p>Showing the latest data for <strong>{{ technologies | length }} technologies</strong>.</p>
-      {% 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>
+    <div class="data-sections">
+      <!-- Section: Summary of the main metrics -->
+      <div
+        id="comparison-summary"
+        class="card block-m summary report-section"
+        data-type="section"
+        data-api="cwv,lighthouse,page-weight"
+      >
+        <h2>Summary</h2>
+        <p>Showing the latest data for <strong>{{ technologies | length }} technologies</strong>.</p>
+        {% 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>{{ tech_report_labels.metrics.vitals.general.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 %}
+      <!-- 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>{{ tech_report_labels.metrics.vitals.general.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>
-    </div>
 
-    <!-- Section: Lighthouse -->
-    <div
-      id="comparison-lighthouse"
-      class="block-m summary report-section"
-      data-type="section"
-      data-api="lighthouse"
-    >
-      <h2>Lighthouse</h2>
-      <p>{{ tech_report_labels.metrics.lighthouse.general.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 %}
+      <!-- Section: Lighthouse -->
+      <div
+        id="comparison-lighthouse"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="lighthouse"
+      >
+        <h2>Lighthouse</h2>
+        <p>{{ tech_report_labels.metrics.lighthouse.general.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>{{ tech_report_labels.metrics.pageWeight.general.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>
-    </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>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
-
-      <!-- Timeseries -->
-      <div class="card">
-        {% set timeseries = tech_report_page.config.weight_timeseries %}
+      <!-- Section: Adoption -->
+      <div
+        id="comparison-adoption"
+        class="block-m summary report-section"
+        data-type="section"
+        data-api="adopiton"
+      >
+        <h2>Adoption</h2>
+        <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
+
+        <!-- Timeseries -->
+        <div class="card">
+        {% set timeseries = tech_report_page.config.adoption_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>{{ tech_report_labels.metrics.adoption.general.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>
   </div>
 
diff --git a/templates/techreport/components/filter_breakdown.html b/templates/techreport/components/filter_breakdown.html
index 148274f7..df6c6f4e 100644
--- a/templates/techreport/components/filter_breakdown.html
+++ b/templates/techreport/components/filter_breakdown.html
@@ -1,7 +1,7 @@
-<div class="breakdown">
-  <label for="client-breakdown">Client</label>
-  <div class="select-label">
-    <select name="client-breakdown" id="client-breakdown">
+<div class="breakdown default-dropdown-group">
+  <label for="client-breakdown" class="default-dropdown-label">Client</label>
+  <div class="select-label default-dropdown-wrapper">
+    <select class="default-dropdown" name="client-breakdown" id="client-breakdown">
       {% if request.args.get('client', '') == 'desktop' %}
       <option value="mobile">Mobile</option>
       <option value="desktop" selected>Desktop</option>
diff --git a/templates/techreport/components/table_linked.html b/templates/techreport/components/table_linked.html
index abe263f4..c921563c 100644
--- a/templates/techreport/components/table_linked.html
+++ b/templates/techreport/components/table_linked.html
@@ -57,8 +57,10 @@
             {% for column in table.columns %}
               {% if column.key == "technology" %}
                 <th class="app-cell">
-                  <span class="app-img" aria-hidden="true" style="background-image: url(https://cdn.httparchive.org/static/icons/{{ tech }}.png)"></span>
-                  <a href="/reports/techreport/tech?tech={{ tech }}&geo={{ tech_report_page.filters.geo }}&rank={{ tech_report_page.filters.rank }}">{{ tech }}</a>
+                  <span class="app-wrapper">
+                    <span class="app-img" aria-hidden="true" style="background-image: url(https://cdn.httparchive.org/static/icons/{{ tech }}.png)"></span>
+                    <a href="/reports/techreport/tech?tech={{ tech }}&geo={{ tech_report_page.filters.geo }}&rank={{ tech_report_page.filters.rank }}">{{ tech }}</a>
+                  </span>
                 </th>
               {% elif column.viz == "progress" %}
                 <td style="--cell-value: 2%" data-value="0" class="cwv-cell main-cell pct-value">
diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html
index 0a1af724..35274ba3 100644
--- a/templates/techreport/drilldown.html
+++ b/templates/techreport/drilldown.html
@@ -25,119 +25,121 @@ <h1>
       </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 class="summary-heading">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>{{ tech_report_labels.metrics.vitals.general.description }}</p>
-
-      {% if tech_report_page.config.good_cwv_summary %}
-        <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
+    <div class="data-sections">
+      <!-- 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 class="summary-heading">Summary</h2>
         <div class="summary-grid">
-          {% for summary in tech_report_page.config.good_cwv_summary.cards %}
-            {% set section_prefix = "cwv" %}
+          {% for summary in tech_report_page.config.summary %}
             {% 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" %}
+        {% include "techreport/components/filter_meta.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 %}
+      <!-- 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>{{ tech_report_labels.metrics.vitals.general.description }}</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>
-      {% 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>{{ tech_report_labels.metrics.pageWeight.general.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 %}
+      <!-- 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>
-      {% 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>{{ tech_report_labels.metrics.adoption.general.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" %}
+      <!-- Section: Page Weight -->
+      <div
+        id="page-weight"
+        class="block-m report-section"
+        data-type="section"
+        data-api="page-weight"
+      >
+        <h2>Page weight</h2>
+        <p>{{ tech_report_labels.metrics.pageWeight.general.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>{{ tech_report_labels.metrics.adoption.general.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>
   </div>
 {% endblock %}
diff --git a/templates/techreport/templates/filters.html b/templates/techreport/templates/filters.html
index 857368ee..59a40b30 100644
--- a/templates/techreport/templates/filters.html
+++ b/templates/techreport/templates/filters.html
@@ -24,22 +24,26 @@
     <fieldset class="lens">
       <legend class="sr-only">Lens</legend>
 
-      <label for="geo">Geo</label>
-      <div class="select-label">
-        <select name="geo" id="geo">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="geo">Geo</label>
+        <div class="default-dropdown-wrapper">
+          <select name="geo" id="geo" class="default-dropdown" disabled>
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
 
-      <label for="rank">Rank</label>
-      <div class="select-label">
-        <select name="rank" id="rank">
-          <option value="ALL" selected="true">
-            ALL
-          </option>
-        </select>
+      <div class="default-dropdown-group">
+        <label for="rank">Rank</label>
+        <div class="default-dropdown-wrapper">
+          <select name="rank" id="rank" class="default-dropdown" disabled>
+            <option value="ALL" selected="true">
+              ALL
+            </option>
+          </select>
+        </div>
       </div>
     </fieldset>
   </div>
diff --git a/templates/techreport/templates/selector_tech.html b/templates/techreport/templates/selector_tech.html
index eae2f41f..6dec1163 100644
--- a/templates/techreport/templates/selector_tech.html
+++ b/templates/techreport/templates/selector_tech.html
@@ -1,9 +1,9 @@
-<div class="tech-selector-group" data-tech="{{ name }}">
+<div class="default-dropdown-group tech-selector-group" data-tech="{{ name }}">
   <div class="content">
     <div class="tech-selector">
-      <label for="{{ name }}" class="tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
-      <div class="tech-input-wrapper">
-        <select name="tech" class="tech" data-selected="{{ technologyName }}" id="{{ name }}">
+      <label for="{{ name }}" class="default-dropdown-label tech">Technology {% if key > 1%}{{ key }}{% endif %}</label>
+      <div class="default-dropdown-wrapper">
+        <select class="tech default-dropdown" name="tech" data-selected="{{ technologyName }}" id="{{ name }}" disabled>
           <option value="{{ technology }}" selected="true">
             {{ technologyName }}
           </option>