diff --git a/frontend/src/components/search/.SearchResultsHeader.tsx.swp b/frontend/src/components/search/.SearchResultsHeader.tsx.swp
new file mode 100644
index 000000000..5d1b2117b
Binary files /dev/null and b/frontend/src/components/search/.SearchResultsHeader.tsx.swp differ
diff --git a/frontend/src/components/search/SearchResultsHeader.tsx b/frontend/src/components/search/SearchResultsHeader.tsx
index 3855a05db..fab3462df 100644
--- a/frontend/src/components/search/SearchResultsHeader.tsx
+++ b/frontend/src/components/search/SearchResultsHeader.tsx
@@ -16,11 +16,12 @@ export default function SearchResultsHeader({
 }) {
   const { totalResults } = useContext(QueryContext);
   const total = totalFetchedResults || totalResults;
+  const gridRowClasses = ["tablet-lg:grid-col-fill", "margin-top-5", "tablet-lg:margin-top-2", "tablet-lg:margin-bottom-0"]
+  if (loading) gridRowClasses.push("opacity-50");
   return (
     <div className="grid-row">
       <h2
-        className="tablet-lg:grid-col-fill margin-top-5 tablet-lg:margin-top-2 tablet-lg:margin-bottom-0"
-        style={{ opacity: loading ? 0.5 : 1 }}
+        className={gridRowClasses.join(" ")}
       >
         {total && <>{total} Opportunities</>}
       </h2>