diff --git a/app/lib/frontend/templates/listing.dart b/app/lib/frontend/templates/listing.dart
index bf45c234d5..702cb93fef 100644
--- a/app/lib/frontend/templates/listing.dart
+++ b/app/lib/frontend/templates/listing.dart
@@ -135,11 +135,14 @@ d.Node? _nameMatches(SearchForm form, List<String>? matches) {
       : 'Matching package ${singular ? 'name' : 'names'}: ';
 
   return d.p(children: [
-    d.b(text: nameMatchLabel),
+    d.text(nameMatchLabel),
     ...matches.expandIndexed((i, name) {
       return [
         if (i > 0) d.text(', '),
-        d.code(child: d.a(href: urls.pkgPageUrl(name), text: name)),
+        d.a(
+          href: urls.pkgPageUrl(name),
+          child: d.b(text: name),
+        ),
       ];
     }),
   ]);
diff --git a/app/lib/frontend/templates/views/pkg/index.dart b/app/lib/frontend/templates/views/pkg/index.dart
index 98e802f4f2..4871a409e2 100644
--- a/app/lib/frontend/templates/views/pkg/index.dart
+++ b/app/lib/frontend/templates/views/pkg/index.dart
@@ -20,7 +20,8 @@ d.Node packageListingNode({
 }) {
   final innerContent = d.fragment([
     listingInfo,
-    if (nameMatches != null) nameMatches,
+    if (nameMatches != null)
+      d.div(classes: ['listing-highlight-block'], child: nameMatches),
     packageList,
     if (pagination != null) pagination,
     d.markdown('Check our help page for details on '
diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss
index 4c3ee6839f..e1bd48e9b3 100644
--- a/pkg/web_css/lib/src/_list.scss
+++ b/pkg/web_css/lib/src/_list.scss
@@ -44,6 +44,10 @@
   }
 }
 
+.listing-highlight-block {
+  margin: 8px 0px;
+}
+
 .sort-control {
   position: relative;
   cursor: pointer;