diff --git a/deno.json b/deno.json
index 0b2db69..2dadcaa 100644
--- a/deno.json
+++ b/deno.json
@@ -33,6 +33,7 @@
     "react-dom": "npm:react-dom@18.3.1",
     "react-icons": "npm:react-icons@5.3.0",
     "react-infinite-scroll-hook": "npm:react-infinite-scroll-hook@5.0.1",
+    "react-intersection-observer": "npm:react-intersection-observer@9.13.1",
     "react-router-dom": "npm:react-router-dom@6.27.0",
     "tailwindcss": "npm:tailwindcss@3.4.14",
     "vite": "npm:vite@5.4.9",
diff --git a/deno.lock b/deno.lock
index 58b31a2..d9c6998 100644
--- a/deno.lock
+++ b/deno.lock
@@ -17,6 +17,8 @@
     "npm:react-icons@5.3.0": "5.3.0_react@18.3.1",
     "npm:react-infinite-scroll-hook@5.0.1": "5.0.1_react@18.3.1_react-dom@18.3.1__react@18.3.1",
     "npm:react-infinite-scroller@^1.2.6": "1.2.6_react@18.3.1",
+    "npm:react-intersection-observer@9.13.1": "9.13.1_react@18.3.1_react-dom@18.3.1__react@18.3.1",
+    "npm:react-intersection-observer@^9.13.1": "9.13.1_react@18.3.1_react-dom@18.3.1__react@18.3.1",
     "npm:react-router-dom@6.27.0": "6.27.0_react@18.3.1_react-dom@18.3.1__react@18.3.1",
     "npm:react@18.3.1": "18.3.1",
     "npm:tailwindcss@3.4.14": "3.4.14_postcss@8.4.47",
@@ -953,6 +955,13 @@
         "react-dom"
       ]
     },
+    "react-intersection-observer@9.13.1_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "dependencies": [
+        "react",
+        "react-dom"
+      ]
+    },
     "react-is@16.13.1": {
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
@@ -1223,6 +1232,7 @@
       "npm:react-dom@18.3.1",
       "npm:react-icons@5.3.0",
       "npm:react-infinite-scroll-hook@5.0.1",
+      "npm:react-intersection-observer@9.13.1",
       "npm:react-router-dom@6.27.0",
       "npm:react@18.3.1",
       "npm:tailwindcss@3.4.14",
diff --git a/src/pages/Browse/ExtensionBrowse.tsx b/src/pages/Browse/ExtensionBrowse.tsx
index 69e93fe..2a7986b 100644
--- a/src/pages/Browse/ExtensionBrowse.tsx
+++ b/src/pages/Browse/ExtensionBrowse.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import useInfiniteScroll from "react-infinite-scroll-hook";
+import { useInView } from "react-intersection-observer";
 
 import { Extension } from "../../types/extension.ts";
 import { Manga } from "../../types/manga.ts";
@@ -108,20 +109,29 @@ const GridItem = forwardRef<React.ComponentRef<"li">, GridItemProps>(
 
 const MangaItem = (
   { manga, extensionId }: { manga: Manga; extensionId: string },
-) => (
-  <>
-    <Link
-      to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
-      state={manga}
-    >
-      <img
-        src={manga.coverUrl}
-        alt={manga.title}
-        className="aspect-[2/3] rounded-md object-cover"
-      />
-      <p className="mx-1 mt-1 line-clamp-2 text-sm font-bold">
-        {manga.title}
-      </p>
-    </Link>
-  </>
-);
+) => {
+  const { ref, inView } = useInView();
+
+  return (
+    <>
+      <Link
+        ref={ref}
+        to={{ pathname: `/browse/${extensionId}/${manga.id}` }}
+        state={manga}
+      >
+        <div className="w-full aspect-[2/3]">
+          {inView && (
+            <img
+              src={manga.coverUrl}
+              alt={manga.title}
+              className="h-full rounded-md object-cover"
+            />
+          )}
+        </div>
+        <p className="mx-1 mt-1 line-clamp-2 text-sm font-bold">
+          {manga.title}
+        </p>
+      </Link>
+    </>
+  );
+};