diff --git a/web/src/lib/components/AuthenticationCard.svelte b/web/src/lib/components/AuthenticationCard.svelte
index b1a7864..e46fe9e 100644
--- a/web/src/lib/components/AuthenticationCard.svelte
+++ b/web/src/lib/components/AuthenticationCard.svelte
@@ -53,7 +53,7 @@
     }
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="authentication-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
diff --git a/web/src/lib/components/BlacklistCard.svelte b/web/src/lib/components/BlacklistCard.svelte
index a3dd010..00e07c1 100644
--- a/web/src/lib/components/BlacklistCard.svelte
+++ b/web/src/lib/components/BlacklistCard.svelte
@@ -14,7 +14,7 @@
     let { blacklists, blacklistGrade, blacklistScore, receivedChain }: Props = $props();
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="rbl-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
diff --git a/web/src/lib/components/ContentAnalysisCard.svelte b/web/src/lib/components/ContentAnalysisCard.svelte
index 3b7bc95..bc65de0 100644
--- a/web/src/lib/components/ContentAnalysisCard.svelte
+++ b/web/src/lib/components/ContentAnalysisCard.svelte
@@ -12,7 +12,7 @@
     let { contentAnalysis, contentGrade, contentScore }: Props = $props();
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="content-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
diff --git a/web/src/lib/components/DnsRecordsCard.svelte b/web/src/lib/components/DnsRecordsCard.svelte
index 03b992b..e49ce97 100644
--- a/web/src/lib/components/DnsRecordsCard.svelte
+++ b/web/src/lib/components/DnsRecordsCard.svelte
@@ -26,7 +26,7 @@
     );
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="dns-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
diff --git a/web/src/lib/components/HeaderAnalysisCard.svelte b/web/src/lib/components/HeaderAnalysisCard.svelte
index 0a2c198..ac5ad7a 100644
--- a/web/src/lib/components/HeaderAnalysisCard.svelte
+++ b/web/src/lib/components/HeaderAnalysisCard.svelte
@@ -13,7 +13,7 @@
     let { dmarcRecord, headerAnalysis, headerGrade, headerScore }: Props = $props();
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="header-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
diff --git a/web/src/lib/components/ScoreCard.svelte b/web/src/lib/components/ScoreCard.svelte
index d360c31..d1e6b5d 100644
--- a/web/src/lib/components/ScoreCard.svelte
+++ b/web/src/lib/components/ScoreCard.svelte
@@ -19,6 +19,19 @@
     }
 </script>
 
+<style>
+    .summary-card {
+        transition: all 0.2s ease-in-out;
+        cursor: pointer;
+    }
+
+    .summary-card:hover {
+        background-color: #e2e6ea !important;
+        transform: translateY(-2px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+</style>
+
 <div class="card shadow-lg bg-white">
     <div class="card-body p-5 text-center">
         <div class="mb-3">
@@ -30,40 +43,52 @@
         {#if summary}
             <div class="row g-3 text-start">
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
-                        <small class="text-muted d-block">DNS</small>
-                    </div>
+                    <a href="#dns-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
+                            <small class="text-muted d-block">DNS</small>
+                        </div>
+                    </a>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
-                        <small class="text-muted d-block">Authentication</small>
-                    </div>
+                    <a href="#authentication-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
+                            <small class="text-muted d-block">Authentication</small>
+                        </div>
+                    </a>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
-                        <small class="text-muted d-block">Blacklists</small>
-                    </div>
+                    <a href="#rbl-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
+                            <small class="text-muted d-block">Blacklists</small>
+                        </div>
+                    </a>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.header_grade} score={summary.header_score} />
-                        <small class="text-muted d-block">Headers</small>
-                    </div>
+                    <a href="#header-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.header_grade} score={summary.header_score} />
+                            <small class="text-muted d-block">Headers</small>
+                        </div>
+                    </a>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
-                        <small class="text-muted d-block">Spam Score</small>
-                    </div>
+                    <a href="#spam-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
+                            <small class="text-muted d-block">Spam Score</small>
+                        </div>
+                    </a>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-2 bg-light rounded text-center">
-                        <GradeDisplay grade={summary.content_grade} score={summary.content_score} />
-                        <small class="text-muted d-block">Content</small>
-                    </div>
+                    <a href="#content-details" class="text-decoration-none">
+                        <div class="p-2 bg-light rounded text-center summary-card">
+                            <GradeDisplay grade={summary.content_grade} score={summary.content_score} />
+                            <small class="text-muted d-block">Content</small>
+                        </div>
+                    </a>
                 </div>
             </div>
         {/if}
diff --git a/web/src/lib/components/SpamAssassinCard.svelte b/web/src/lib/components/SpamAssassinCard.svelte
index 7a588f0..d70a1bd 100644
--- a/web/src/lib/components/SpamAssassinCard.svelte
+++ b/web/src/lib/components/SpamAssassinCard.svelte
@@ -12,7 +12,7 @@
     let { spamassassin, spamGrade, spamScore }: Props = $props();
 </script>
 
-<div class="card shadow-sm">
+<div class="card shadow-sm" id="spam-details">
     <div class="card-header bg-white">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>