diff --git a/src/app/pages-layout.css b/src/app/pages-layout.css
index 1e84cc427..8c8e15f57 100644
--- a/src/app/pages-layout.css
+++ b/src/app/pages-layout.css
@@ -66,12 +66,20 @@
 
 .search-menu-result-link {
   font-size: max(clamp(1.6625vh, 2.0625vw, 1.1875em), 3.75vh);
+  padding-left: max(0.2vh, 0.2vw);
+  padding-right: max(0.2vh, 0.2vw);
 }
 
 .search-menu-result-link h3 {
   font-size: max(clamp(1.82875vh, 2.26875vw, 1.1875em), 4.125vh);
 }
 
+.search-menu-result-link mark {
+  background-color: hsl(var(--primary));
+  padding: 0 0.2em;
+  color: white;
+}
+
 @media only screen and (max-width: 1024px) {
   .search-menu-tabslist-item {
     height: max(4vw, 4vh);
diff --git a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
index 2985461a4..6e8d0fb65 100644
--- a/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
+++ b/src/components/layouts/navbar/search/NavbarSearchButtonInner.tsx
@@ -314,7 +314,7 @@ const NavbarSearchButtonInner = <AllTabValues extends typeof navbarSearchBtnProp
           </DialogHeader>
           <div
             className={cn('flex-1 rounded-md', {
-              'min-h-0 overflow-y-auto break-words border border-input px-2 [&>*>*]:pb-2 first:[&>*>*]:py-2': results !== null,
+              'min-h-0 overflow-y-auto break-words border border-input px-8 [&>*>*]:mb-8 first:[&>*>*]:my-8': results !== null,
               "after:block after:h-10 after:content-['']": searchText === SEARCH_TEXT_INITIAL_STATE
             })}
           >
diff --git a/src/components/ui/search/Result.tsx b/src/components/ui/search/Result.tsx
index 979d05d3e..932e61f0c 100644
--- a/src/components/ui/search/Result.tsx
+++ b/src/components/ui/search/Result.tsx
@@ -6,6 +6,8 @@ import { usePathname } from 'next/navigation';
 import { cn } from '@/lib/tailwind';
 import Link from 'next/link';
 
+import { CardContent, CardHeader, CardTitle, Card } from '../Card';
+
 interface ResultProps extends Partial<WithClassname> {
   metaTitle: string;
   excerpt: string;
@@ -20,7 +22,7 @@ const Result: FunctionComponent<ResultProps> = ({ className, metaTitle, excerpt,
     <Link
       className={cn(
         'search-menu-result-link',
-        'w-full',
+        'flex h-full w-full flex-col transition-transform duration-300 hover:delay-0 hover:duration-100 focus:delay-0 focus:duration-100 dark:hover:brightness-125 dark:focus:brightness-125',
         {
           'pointer-events-none opacity-50': exactMatch
         },
@@ -29,8 +31,16 @@ const Result: FunctionComponent<ResultProps> = ({ className, metaTitle, excerpt,
       aria-current={exactMatch ? 'page' : undefined}
       href={href}
     >
-      <h3>{metaTitle}</h3>
-      <p dangerouslySetInnerHTML={{ __html: excerpt }} />
+      <Card className="overflow-hidden rounded shadow-lg transition-[box-shadow] duration-300 hover:shadow-xl focus:shadow-xl">
+        <CardHeader className="pb-2">
+          <CardTitle className="flex justify-between" titleType="h3">
+            {metaTitle}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p dangerouslySetInnerHTML={{ __html: excerpt }} />
+        </CardContent>
+      </Card>
     </Link>
   );
 };