diff --git a/__tests__/pages/utilities/har-file-viewer.test.tsx b/__tests__/pages/utilities/har-file-viewer.test.tsx
index 0924875..60e6c6d 100644
--- a/__tests__/pages/utilities/har-file-viewer.test.tsx
+++ b/__tests__/pages/utilities/har-file-viewer.test.tsx
@@ -151,13 +151,9 @@ describe("HARFileViewer", () => {
     await new Promise((resolve) => setTimeout(resolve, 500));
 
     // Should still see the api request
-    expect(
-      screen.getByText("https://example.com/api/test")
-    ).toBeInTheDocument();
-
-    // Should not see the css request (it should be filtered out)
     const rows = screen.queryAllByTestId("table-row");
     expect(rows.length).toBe(1);
+    expect(rows[0]).toHaveTextContent("https://example.com/api/test");
   });
 
   test("should clear search query when clear button is clicked", async () => {
diff --git a/components/MatchIndicators.tsx b/components/MatchIndicators.tsx
new file mode 100644
index 0000000..90682e7
--- /dev/null
+++ b/components/MatchIndicators.tsx
@@ -0,0 +1,67 @@
+import { MatchCategory } from "@/components/utils/har-utils";
+
+interface MatchIndicatorsProps {
+  categories: MatchCategory[];
+  className?: string;
+}
+
+/**
+ * Displays colored dots to indicate which parts of an entry matched the search.
+ * Similar to iOS notification indicators.
+ *
+ * Color scheme:
+ * - Blue: URL match
+ * - Purple: Headers match
+ * - Orange: Request payload match
+ * - Green: Response content match
+ */
+export default function MatchIndicators({
+  categories,
+  className = "",
+}: MatchIndicatorsProps) {
+  if (categories.length === 0) {
+    return null;
+  }
+
+  const getCategoryColor = (category: MatchCategory): string => {
+    switch (category) {
+      case "url":
+        return "bg-blue-500";
+      case "headers":
+        return "bg-purple-500";
+      case "request":
+        return "bg-orange-500";
+      case "response":
+        return "bg-green-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+
+  const getCategoryTitle = (category: MatchCategory): string => {
+    switch (category) {
+      case "url":
+        return "Match in URL";
+      case "headers":
+        return "Match in headers";
+      case "request":
+        return "Match in request payload";
+      case "response":
+        return "Match in response content";
+      default:
+        return "Match found";
+    }
+  };
+
+  return (
+    <div className={`flex items-center gap-1 ${className}`}>
+      {categories.map((category) => (
+        <div
+          key={category}
+          className={`w-2 h-2 rounded-full ${getCategoryColor(category)}`}
+          title={getCategoryTitle(category)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/components/MatchSummaryPills.tsx b/components/MatchSummaryPills.tsx
new file mode 100644
index 0000000..39d6e0e
--- /dev/null
+++ b/components/MatchSummaryPills.tsx
@@ -0,0 +1,99 @@
+import {
+  HarEntry,
+  getMatchCategories,
+  MatchCategory,
+} from "@/components/utils/har-utils";
+
+interface MatchSummaryPillsProps {
+  entries: HarEntry[];
+  searchQuery: string;
+  className?: string;
+}
+
+interface CategoryCount {
+  category: MatchCategory;
+  count: number;
+  label: string;
+  color: string;
+}
+
+/**
+ * Displays pill-shaped badges showing the count of matches by category.
+ * Helps users understand where their search matches are located.
+ */
+export default function MatchSummaryPills({
+  entries,
+  searchQuery,
+  className = "",
+}: MatchSummaryPillsProps) {
+  if (!searchQuery) {
+    return null;
+  }
+
+  // Count matches by category
+  const categoryCounts: Record<MatchCategory, number> = {
+    url: 0,
+    headers: 0,
+    request: 0,
+    response: 0,
+  };
+
+  entries.forEach((entry) => {
+    const matchInfo = getMatchCategories(entry, searchQuery);
+    matchInfo.categories.forEach((category) => {
+      categoryCounts[category]++;
+    });
+  });
+
+  // Build display data
+  const categoryData: CategoryCount[] = [
+    {
+      category: "url",
+      count: categoryCounts.url,
+      label: "URLs",
+      color:
+        "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
+    },
+    {
+      category: "headers",
+      count: categoryCounts.headers,
+      label: "Headers",
+      color:
+        "bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800",
+    },
+    {
+      category: "request",
+      count: categoryCounts.request,
+      label: "Requests",
+      color:
+        "bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-800",
+    },
+    {
+      category: "response",
+      count: categoryCounts.response,
+      label: "Responses",
+      color:
+        "bg-green-500/10 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
+    },
+  ];
+
+  // Filter out categories with no matches
+  const activeCategories = categoryData.filter((cat) => cat.count > 0);
+
+  if (activeCategories.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {activeCategories.map((cat) => (
+        <div
+          key={cat.category}
+          className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${cat.color}`}
+        >
+          {cat.label}: {cat.count}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/SearchHighlightText.tsx b/components/SearchHighlightText.tsx
new file mode 100644
index 0000000..16e0ed1
--- /dev/null
+++ b/components/SearchHighlightText.tsx
@@ -0,0 +1,56 @@
+interface SearchHighlightTextProps {
+  text: string;
+  searchQuery: string;
+  className?: string;
+}
+
+/**
+ * Component to highlight search matches in text, similar to Chrome's Cmd+F functionality.
+ * Matches are highlighted with a yellow background.
+ */
+export default function SearchHighlightText({
+  text,
+  searchQuery,
+  className = "",
+}: SearchHighlightTextProps) {
+  if (!searchQuery || !text) {
+    return <span className={className}>{text}</span>;
+  }
+
+  const parts: JSX.Element[] = [];
+  const lowerText = text.toLowerCase();
+  const lowerQuery = searchQuery.toLowerCase();
+
+  let lastIndex = 0;
+  let currentIndex = 0;
+
+  while ((currentIndex = lowerText.indexOf(lowerQuery, lastIndex)) !== -1) {
+    // Add text before match
+    if (currentIndex > lastIndex) {
+      parts.push(
+        <span key={`text-${lastIndex}`}>
+          {text.slice(lastIndex, currentIndex)}
+        </span>
+      );
+    }
+
+    // Add highlighted match
+    parts.push(
+      <mark
+        key={`match-${currentIndex}`}
+        className="bg-yellow-300 dark:bg-yellow-600 dark:text-black rounded px-0.5"
+      >
+        {text.slice(currentIndex, currentIndex + lowerQuery.length)}
+      </mark>
+    );
+
+    lastIndex = currentIndex + lowerQuery.length;
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    parts.push(<span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>);
+  }
+
+  return <span className={className}>{parts}</span>;
+}
diff --git a/components/utils/har-utils.ts b/components/utils/har-utils.ts
index 48c2336..8763327 100644
--- a/components/utils/har-utils.ts
+++ b/components/utils/har-utils.ts
@@ -112,3 +112,76 @@ export function tryParseJSON(str: string) {
     return str;
   }
 }
+
+// Search match categories for visual indicators
+export type MatchCategory = "url" | "headers" | "request" | "response";
+
+export interface MatchInfo {
+  categories: MatchCategory[];
+  hasMatch: boolean;
+}
+
+/**
+ * Determines which categories of content match the search query for a given entry.
+ * Used to display colored indicators showing where matches were found.
+ */
+export function getMatchCategories(
+  entry: HarEntry,
+  searchQuery: string
+): MatchInfo {
+  if (!searchQuery) {
+    return { categories: [], hasMatch: false };
+  }
+
+  const query = searchQuery.toLowerCase();
+  const categories: MatchCategory[] = [];
+
+  // Check URL
+  if (entry.request.url.toLowerCase().includes(query)) {
+    categories.push("url");
+  }
+
+  // Check request and response headers
+  const hasHeaderMatch =
+    entry.request.headers.some(
+      (header) =>
+        header.name.toLowerCase().includes(query) ||
+        header.value.toLowerCase().includes(query)
+    ) ||
+    entry.response.headers.some(
+      (header) =>
+        header.name.toLowerCase().includes(query) ||
+        header.value.toLowerCase().includes(query)
+    );
+
+  if (hasHeaderMatch) {
+    categories.push("headers");
+  }
+
+  // Check request payload
+  if (entry.request.postData?.text) {
+    if (entry.request.postData.text.toLowerCase().includes(query)) {
+      categories.push("request");
+    }
+  }
+
+  // Check response content
+  if (entry.response.content.text) {
+    let contentToSearch = entry.response.content.text;
+    if (isBase64(contentToSearch)) {
+      try {
+        contentToSearch = atob(contentToSearch);
+      } catch (e) {
+        // If decode fails, search in original
+      }
+    }
+    if (contentToSearch.toLowerCase().includes(query)) {
+      categories.push("response");
+    }
+  }
+
+  return {
+    categories,
+    hasMatch: categories.length > 0,
+  };
+}
diff --git a/pages/utilities/har-file-viewer.tsx b/pages/utilities/har-file-viewer.tsx
index 93f01fb..7586dfa 100644
--- a/pages/utilities/har-file-viewer.tsx
+++ b/pages/utilities/har-file-viewer.tsx
@@ -9,6 +9,8 @@ import {
   HarTableProps,
   isBase64,
   tryParseJSON,
+  getMatchCategories,
+  MatchCategory,
 } from "@/components/utils/har-utils";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -37,6 +39,9 @@ import {
   CommandList,
 } from "@/components/ds/CommandMenu";
 import { Checkbox } from "@/components/ds/CheckboxComponent";
+import SearchHighlightText from "@/components/SearchHighlightText";
+import MatchIndicators from "@/components/MatchIndicators";
+import MatchSummaryPills from "@/components/MatchSummaryPills";
 
 interface MultiSelectComboboxProps {
   data: { value: string; label: string }[];
@@ -335,15 +340,22 @@ export default function HARFileViewer() {
                     </Button>
                   )}
                 </div>
-                {/* Results count */}
-                {(debouncedSearchQuery ||
-                  activeFilter !== "All" ||
-                  statusFilter.length > 0) && (
+
+                <div className="flex items-center min-h-[32px] gap-4">
+                  {/* Match Summary Pills */}
+                  {debouncedSearchQuery && (
+                    <MatchSummaryPills
+                      entries={harData.log.entries}
+                      searchQuery={debouncedSearchQuery}
+                    />
+                  )}
+
+                  {/* Results count */}
                   <p className="text-sm text-muted-foreground">
                     Showing {getFilteredCount()} of {harData.log.entries.length}{" "}
                     requests
                   </p>
-                )}
+                </div>
               </div>
 
               {/* Filters and View Mode */}
@@ -595,7 +607,19 @@ const HarTable = ({
       <table className="w-full border-collapse table-fixed">
         <thead>
           <tr>
-            <th className={`${tableHeaderStyles} w-[40%]`}>Name</th>
+            {searchQuery && (
+              <th
+                className={`${tableHeaderStyles} w-[50px]`}
+                title="Search match indicators"
+              >
+                Search
+              </th>
+            )}
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[35%]" : "w-[40%]"}`}
+            >
+              Name
+            </th>
             <th className={`${tableHeaderStyles} w-[12%]`}>
               <div className="flex items-center justify-between">
                 <span>Status</span>
@@ -608,8 +632,16 @@ const HarTable = ({
                 </div>
               </div>
             </th>
-            <th className={`${tableHeaderStyles} w-[15%]`}>Type</th>
-            <th className={`${tableHeaderStyles} w-[15%]`}>Started at</th>
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[13%]" : "w-[15%]"}`}
+            >
+              Type
+            </th>
+            <th
+              className={`${tableHeaderStyles} ${searchQuery ? "w-[13%]" : "w-[15%]"}`}
+            >
+              Started at
+            </th>
             <th
               className={`${tableHeaderSortableStyles} w-[8%]`}
               onClick={() => handleSort("size")}
@@ -617,7 +649,7 @@ const HarTable = ({
               Size {sortField === "size" && (sortOrder === "asc" ? " ▲" : " ▼")}
             </th>
             <th
-              className={`${tableHeaderSortableStyles} w-[10%]`}
+              className={`${tableHeaderSortableStyles} ${searchQuery ? "w-[9%]" : "w-[10%]"}`}
               onClick={() => handleSort("time")}
             >
               Time {sortField === "time" && (sortOrder === "asc" ? " ▲" : " ▼")}
@@ -626,74 +658,112 @@ const HarTable = ({
         </thead>
 
         <tbody>
-          {filteredAndSortedEntries.map((entry, index) => (
-            <Fragment key={index}>
-              <tr
-                data-testid="table-row"
-                className={cn(
-                  tableRowStyles,
-                  index % 2 === 0 && tableRowOddStyles,
-                  entry.response.status >= 400 && tableRowErrorStyles
-                )}
-                onClick={() => {
-                  setExpandedRow(expandedRow === index ? null : index);
-                }}
-              >
-                <td
+          {filteredAndSortedEntries.map((entry, index) => {
+            const matchInfo = searchQuery
+              ? getMatchCategories(entry, searchQuery)
+              : { categories: [], hasMatch: false };
+
+            return (
+              <Fragment key={index}>
+                <tr
+                  data-testid="table-row"
                   className={cn(
-                    tableCellStyles,
-                    "max-w-xs cursor-pointer truncate"
+                    tableRowStyles,
+                    index % 2 === 0 && tableRowOddStyles,
+                    entry.response.status >= 400 && tableRowErrorStyles
                   )}
+                  onClick={() => {
+                    setExpandedRow(expandedRow === index ? null : index);
+                  }}
                 >
-                  {entry.request.url}
-                </td>
-                <td
-                  data-testid="column-status-code"
-                  className={cn(tableCellStyles, "cursor-pointer")}
-                >
-                  {entry.response.status}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {entry.response.content.mimeType}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {new Date(entry.startedDateTime).toLocaleTimeString()}
-                </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
-                  {(entry.response.content.size / 1024).toFixed(1) + "kB"}
-                </td>
-                <td className={tableCellStyles}>
-                  <div className="relative mb-1 h-2">
-                    <div
+                  {searchQuery && (
+                    <td
                       className={cn(
-                        "absolute h-[3px] rounded-xl",
-                        getColorForTime(entry.time)
+                        tableCellStyles,
+                        "cursor-pointer text-center"
                       )}
-                      style={{
-                        width: (entry.time / maxTime) * 100 + "%",
-                      }}
-                    />
-                  </div>
-                  {entry.time.toFixed(0) + "ms"}
-                </td>
-              </tr>
-
-              {expandedRow === index && (
-                <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
-                  <td colSpan={6} className={tableCellStyles}>
-                    <ExpandedDetails entry={entry} />
+                    >
+                      <MatchIndicators categories={matchInfo.categories} />
+                    </td>
+                  )}
+                  <td
+                    className={cn(
+                      tableCellStyles,
+                      "max-w-xs cursor-pointer truncate"
+                    )}
+                  >
+                    {searchQuery ? (
+                      <SearchHighlightText
+                        text={entry.request.url}
+                        searchQuery={searchQuery}
+                      />
+                    ) : (
+                      entry.request.url
+                    )}
+                  </td>
+                  <td
+                    data-testid="column-status-code"
+                    className={cn(tableCellStyles, "cursor-pointer")}
+                  >
+                    {entry.response.status}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {entry.response.content.mimeType}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {new Date(entry.startedDateTime).toLocaleTimeString()}
+                  </td>
+                  <td className={cn(tableCellStyles, "cursor-pointer")}>
+                    {(entry.response.content.size / 1024).toFixed(1) + "kB"}
+                  </td>
+                  <td className={tableCellStyles}>
+                    <div className="relative mb-1 h-2">
+                      <div
+                        className={cn(
+                          "absolute h-[3px] rounded-xl",
+                          getColorForTime(entry.time)
+                        )}
+                        style={{
+                          width: (entry.time / maxTime) * 100 + "%",
+                        }}
+                      />
+                    </div>
+                    {entry.time.toFixed(0) + "ms"}
                   </td>
                 </tr>
-              )}
-            </Fragment>
-          ))}
+
+                {expandedRow === index && (
+                  <tr className={cn(index % 2 === 0 && tableRowOddStyles)}>
+                    <td
+                      colSpan={searchQuery ? 7 : 6}
+                      className={tableCellStyles}
+                    >
+                      <ExpandedDetails
+                        entry={entry}
+                        searchQuery={searchQuery}
+                        matchInfo={matchInfo}
+                      />
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
         </tbody>
       </table>
     </div>
   );
 };
 
-const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
+const ExpandedDetails = ({
+  entry,
+  searchQuery,
+  matchInfo,
+}: {
+  entry: HarEntry;
+  searchQuery: string;
+  matchInfo: { categories: MatchCategory[]; hasMatch: boolean };
+}) => {
   const [activeTab, setActiveTab] = useState("headers");
 
   const decodeContent = useCallback((content: string) => {
@@ -756,17 +826,32 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
     );
   };
 
-  const TabHeader = ({ id, label }: { id: string; label: string }) => {
+  const TabHeader = ({
+    id,
+    label,
+    hasMatch,
+  }: {
+    id: string;
+    label: string;
+    hasMatch?: boolean;
+  }) => {
     return (
       <Button
         size="sm"
         variant="outline"
         className={cn(
+          "relative",
           activeTab === id && "bg-border border hover:bg-border/80"
         )}
         onClick={() => setActiveTab(id)}
       >
         {label}
+        {hasMatch && searchQuery && (
+          <span
+            className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-yellow-500"
+            title="Match found in this section"
+          />
+        )}
       </Button>
     );
   };
@@ -774,10 +859,24 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
   return (
     <div>
       <div className="mb-3 flex gap-1 px-4 py-2">
-        <TabHeader id="headers" label="Headers" />
-        {entry.request.postData && <TabHeader id="payload" label="Payload" />}
+        <TabHeader
+          id="headers"
+          label="Headers"
+          hasMatch={matchInfo.categories.includes("headers")}
+        />
+        {entry.request.postData && (
+          <TabHeader
+            id="payload"
+            label="Payload"
+            hasMatch={matchInfo.categories.includes("request")}
+          />
+        )}
         {entry.response.content.text && (
-          <TabHeader id="response" label="Response" />
+          <TabHeader
+            id="response"
+            label="Response"
+            hasMatch={matchInfo.categories.includes("response")}
+          />
         )}
       </div>
 
@@ -788,9 +887,26 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
             {entry.response.headers.map((header, index) => (
               <div key={index} className="flex break-all text-[13px]">
                 <span className="flex min-w-[260px] font-medium">
-                  {header.name}:{" "}
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.name}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.name
+                  )}
+                  :{" "}
+                </span>
+                <span className="flex">
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.value}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.value
+                  )}
                 </span>
-                <span className="flex">{header.value}</span>
               </div>
             ))}
 
@@ -798,9 +914,26 @@ const ExpandedDetails = ({ entry }: { entry: HarEntry }) => {
             {entry.request.headers.map((header, index) => (
               <div key={index} className="flex break-all text-[13px]">
                 <span className="flex min-w-[260px] font-medium">
-                  {header.name}:{" "}
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.name}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.name
+                  )}
+                  :{" "}
+                </span>
+                <span className="flex">
+                  {searchQuery ? (
+                    <SearchHighlightText
+                      text={header.value}
+                      searchQuery={searchQuery}
+                    />
+                  ) : (
+                    header.value
+                  )}
                 </span>
-                <span className="flex">{header.value}</span>
               </div>
             ))}
           </div>