diff --git a/report/trends_report_web/index.html b/report/trends_report_web/index.html
index cf968fa9c0..d3937e5d7e 100644
--- a/report/trends_report_web/index.html
+++ b/report/trends_report_web/index.html
@@ -26,6 +26,10 @@
   <body>
     <h1>Trends Report</h1>
     <section>
+      <div class="search-container">
+        <input id="search-input" type="text" placeholder="🔍 Search by name, date or config…" />
+        <button id="search-clear" title="Clear search">✕</button>
+      </div>
       <button id="filters-toggle" class="filters-toggle">
         <span class="material-symbols-outlined">filter_alt</span>
         Filters
diff --git a/report/trends_report_web/index.js b/report/trends_report_web/index.js
index 25b5063379..861fb92c83 100644
--- a/report/trends_report_web/index.js
+++ b/report/trends_report_web/index.js
@@ -217,6 +217,13 @@ class Page {
         Array.from(tags).toSorted(),
         document.querySelector('#tag-filter'),
         new Proxy(this.filters.tags, filtersProxyHandler));
+
+    const searchInput = document.querySelector('#search-input');
+      searchInput.addEventListener('input', (e) => {
+        // store a lowercase version for case‐insensitive matching
+        this.filters.searchText = e.target.value.trim().toLowerCase();
+        this.fetchAndUpdate();
+      });
   }
 
   // fetchAndUpdate is called whenever filters change and it's responsible for
@@ -225,34 +232,56 @@ class Page {
   async fetchAndUpdate() {
     document.querySelector('#loading').style.display = '';
 
-    // Filter the list of reports
-    let startDate = (new Date('1970-01-01')).getTime();
+    let startDate = new Date('1970-01-01').getTime();
     if (this.filters.dateRange !== 'all') {
-      const durationMillis = Number(this.filters.dateRange) * 3600 * 24 * 1000;
+      const durationMillis = Number(this.filters.dateRange) * 24 * 3600 * 1000;
       startDate = Date.now() - durationMillis;
     }
-    this.filteredNames = this.sortedNames.filter((name) => {
+
+    const search = (this.filters.searchText || '').trim().toLowerCase();
+
+    const prelim = this.sortedNames.filter((name) => {
       const r = this.index[name];
-      let tagsMatch = this.filters.tags.size == 0;
-      for (let tag of r.tags) {
-        if (this.filters.tags.has(tag)) {
-          tagsMatch = true;
-          break;
-        }
+      if (new Date(r.date).getTime() < startDate) return false;
+
+      if (this.filters.tags.size > 0) {
+        if (!r.tags.some(t => this.filters.tags.has(t))) return false;
+      }
+
+      if (this.filters.llmModels.size > 0 &&
+          !this.filters.llmModels.has(r.llm_model)) {
+        return false;
       }
-      return (
-          startDate < (new Date(r.date)).getTime() &&
-          tagsMatch &&
-          (this.filters.llmModels.size == 0 || this.filters.llmModels.has(r.llm_model)) &&
-          (this.filters.benchmarkSets.size == 0 || this.filters.benchmarkSets.has(r.benchmark_set)));
+
+      if (this.filters.benchmarkSets.size > 0 &&
+          !this.filters.benchmarkSets.has(r.benchmark_set)) {
+        return false;
+      }
+
+      return true;
     });
 
-    // Update the rest of the page. If no reports match, we'll just clear all
-    // the children in each area. They do the same thing when the update methods
-    // are called.
+    //  fetch only JSONs once
+    this.filteredNames = prelim;
+    await this.fetchReports();
+
+    if (search) {
+      this.filteredNames = this.filteredNames.filter((name) => {
+        const report = this.reports.get(name);
+        if (report.name.toLowerCase().includes(search)) return true;
+        if (report.date.toLowerCase().includes(search)) return true;
+        if (Array.isArray(report.experiments) &&
+            report.experiments.some(e => e.name.toLowerCase().includes(search)))
+          return true;
+        if (Array.isArray(report.fuzzers) &&
+            report.fuzzers.some(f => f.name.toLowerCase().includes(search)))
+          return true;
+        return JSON.stringify(report).toLowerCase().includes(search);
+      });
+    }
+
     if (this.filteredNames.length > 0) {
       this.updateReportLinks();
-      await this.fetchReports();
       this.updateOverviewChart();
       this.updateOverviewTable();
       this.updateOverviewCoverageChart();
@@ -684,8 +713,15 @@ async function main() {
     llmModels: new Set(),
     benchmarkSets: new Set(),
     tags: new Set(['daily']),
+    searchText: '',
   };
   const page = new Page(index, filters);
+
+  document.querySelector('#search-clear').addEventListener('click', () => {
+    document.querySelector('#search-input').value = '';
+    filters.searchText = '';
+    page.fetchAndUpdate();
+  });
   await page.fetchAndUpdate();
 }
 
diff --git a/report/trends_report_web/style.css b/report/trends_report_web/style.css
index 0796c238a9..6eee69c1f6 100644
--- a/report/trends_report_web/style.css
+++ b/report/trends_report_web/style.css
@@ -51,17 +51,46 @@ button {
 }
 
 @keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+  0% { transform: rotate(0deg); }
+  50% { transform: rotate(180deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/*
+ * Search + Filters Container
+ */
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 20px 0;
+}
+
+#search-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 999px;
+  outline: none;
+  font-size: 1em;
+  transition: border-color 0.2s ease;
+}
+
+#search-input:focus {
+  border-color: #888;
+}
 
-  50% {
-    transform: rotate(180deg);
-  }
+#search-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2em;
+  color: #666;
+  line-height: 1;
+}
 
-  100% {
-    transform: rotate(360deg);
-  }
+#search-clear:hover {
+  color: #333;
 }
 
 /*
@@ -83,25 +112,31 @@ button {
   border-radius: 5px;
   max-height: 70vh;
   overflow-y: auto;
+  z-index: 10;
 }
 
 .filter-autocomplete > div {
-  padding: 3px;
+  padding: 5px 8px;
   cursor: pointer;
 }
 
 .filter-autocomplete > div.hovered {
-  background: #ddd;
+  background: #f0f0f0;
 }
 
 .selected-values {
   margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .selected-values .chip {
+  display: inline-flex;
+  align-items: center;
   padding: 5px 10px;
   background: #dedede;
-  border-radius: 99px;
+  border-radius: 999px;
 }
 
 .selected-values .chip > button {
@@ -111,6 +146,7 @@ button {
   border: none;
   padding: 0;
   margin-left: 5px;
+  font-size: 0.9em;
 }
 
 /*
@@ -120,6 +156,7 @@ button {
   display: flex;
   flex-flow: row wrap;
   gap: 10px 5px;
+  margin: 20px 0;
 }
 
 .projects button {
@@ -127,12 +164,18 @@ button {
   appearance: none;
   background: inherit;
   border: 1px #ccc solid;
-  border-radius: 99px;
-  padding: 10px;
+  border-radius: 999px;
+  padding: 10px 15px;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.projects button:hover {
+  border-color: #888;
 }
 
 .projects button.selected {
   background: #eee;
+  border-color: #888;
 }
 
 /*
@@ -141,26 +184,36 @@ button {
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  width: 100%;
+  margin: 20px 0;
 }
 
 td, th {
   border-right: 1px #dedede solid;
   border-bottom: 1px #dedede solid;
-  padding: 5px;
+  padding: 8px;
   text-align: left;
+  font-size: 0.95em;
 }
+
 td:first-child, th:first-child {
   border-left: 1px #dedede solid;
 }
+
 th {
   border-top: 1px #dedede solid;
-  font-weight: 500;
+  font-weight: 600;
+  background: #f9f9f9;
 }
 
 tbody tr:nth-child(odd) {
   background-color: #f4f5ff;
 }
 
+tbody tr:hover {
+  background-color: #eef;
+}
+
 /*
  * Chart
  */
