diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index b99670037..831d962f8 100644
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -41,23 +41,22 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Pr
         const title = page.frontmatter?.title
         const tags = page.frontmatter?.tags ?? []
         const tagsStr = JSON.stringify(tags)
+        const href = resolveRelative(fileData.slug!, page.slug!)
 
         return (
           <li class="section-li" data-tags={tagsStr}>
-            <div class="section">
-              {page.dates && (
-                <p class="meta">
-                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
-                </p>
-              )}
-              <div class="desc">
-                <h3>
-                  <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal" data-no-popover="true">
-                    {title}
-                  </a>
-                </h3>
+            <a href={href} class="section-link">
+              <div class="section">
+                {page.dates && (
+                  <p class="meta">
+                    <Date date={getDate(cfg, page)!} locale={cfg.locale} />
+                  </p>
+                )}
+                <div class="desc">
+                  <h3>{title}</h3>
+                </div>
               </div>
-            </div>
+            </a>
           </li>
         )
       })}
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index c7f4b3c3c..181501c09 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -595,16 +595,38 @@ input {
 
   .section-li {
     margin: 0;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
     border-radius: 12px;
     background: var(--light);
     border: 1px solid var(--lightgray);
     overflow: hidden;
+    position: relative;
+
+    .section-link {
+      text-decoration: none;
+      color: var(--darkgray);
+      background: none !important;
+      display: block;
+      height: 100%;
+
+      &:hover {
+        background: none !important;
+        color: var(--darkgray);
+      }
+    }
 
     &:hover {
       transform: translateY(-3px);
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       background-color: var(--highlight);
+
+      .section {
+        .desc {
+          h3 {
+            color: var(--tertiary);
+          }
+        }
+      }
     }
 
     .section {
@@ -627,18 +649,8 @@ input {
           margin: 0;
           font-size: 1.3rem;
           line-height: 1.4;
-          
-          a {
-            text-decoration: none;
-            background: none;
-            padding: 0;
-            transition: color 0.2s ease, background-color 0.2s ease;
-            
-            &:hover {
-              color: var(--tertiary);
-              background: none;
-            }
-          }
+          transition: color 0.2s ease;
+          color: var(--secondary);
         }
       }
     }