diff --git a/apps/web/package.json b/apps/web/package.json
index f670558..6cbd6dc 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -30,6 +30,7 @@
     "@types/validator": "^13.15.3",
     "@vercel/og": "^0.0.20",
     "canvas-confetti": "^1.9.3",
+    "capture-node": "^2.2.0",
     "chrono-node": "^2.7.6",
     "classnames": "^2.3.1",
     "easymde": "^2.18.0",
diff --git a/apps/web/pages/pages/index.tsx b/apps/web/pages/pages/index.tsx
index 0a3ee2c..1ba6d18 100644
--- a/apps/web/pages/pages/index.tsx
+++ b/apps/web/pages/pages/index.tsx
@@ -1,10 +1,10 @@
 import { PageType, PageTypeToLabel } from "@changes-page/supabase/types/page";
 import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
-import { InferGetServerSidePropsType } from "next";
+import type { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, type JSX } from "react";
+import { type JSX, useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { PrimaryRouterButton } from "../../components/core/buttons.component";
 import { notifyError } from "../../components/core/toast.component";
@@ -13,6 +13,7 @@ import AuthLayout from "../../components/layout/auth-layout.component";
 import Page from "../../components/layout/page.component";
 import Changelog from "../../components/marketing/changelog";
 import { ROUTES } from "../../data/routes.data";
+import { getPageScreenshotUrl } from "../../utils/capture";
 import { getAppBaseURL } from "../../utils/helpers";
 import { withSupabase } from "../../utils/supabase/withSupabase";
 import { useUserData } from "../../utils/useUser";
@@ -33,9 +34,20 @@ export const getServerSideProps = withSupabase(async (_, { supabase }) => {
     )
     .order("updated_at", { ascending: false });
 
+  const screenshots = pages.map((page) =>
+    page
+      ? getPageScreenshotUrl(
+          page.page_settings?.custom_domain
+            ? `https://${page.page_settings.custom_domain}`
+            : `https://${page.url_slug}.changes.page`
+        )
+      : null
+  );
+
   return {
     props: {
       pages: pages ?? [],
+      screenshots,
       error,
     },
   };
@@ -43,6 +55,7 @@ export const getServerSideProps = withSupabase(async (_, { supabase }) => {
 
 export default function Pages({
   pages,
+  screenshots,
   error,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { billingDetails, user } = useUserData();
@@ -80,7 +93,7 @@ export default function Pages({
               message="Get started by creating your first page."
               buttonLink={
                 billingDetails?.has_active_subscription
-                  ? `/pages/new`
+                  ? "/pages/new"
                   : `/api/billing/redirect-to-checkout?return_url=${getAppBaseURL()}/pages`
               }
               buttonLabel={
@@ -107,69 +120,81 @@ export default function Pages({
           {pages.length ? (
             <div className="overflow-hidden shadow rounded-md bg-white dark:bg-gray-900 border dark:border-gray-800">
               <ul className="divide-y divide-gray-200 dark:divide-gray-800">
-                {pages.map((page) => (
+                {pages.map((page, idx) => (
                   <li
                     key={page.id}
                     className="relative group hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
                   >
                     <div className="flex items-center justify-between p-6">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-3 mb-2">
-                          <span
-                            className={classNames(
-                              page.type === PageType.announcements &&
-                                "bg-blue-100 dark:bg-blue-700",
-                              page.type === PageType.changelogs &&
-                                "bg-teal-100 dark:bg-teal-700",
-                              page.type === PageType.releases &&
-                                "bg-rose-100 dark:bg-rose-700",
-                              page.type === PageType.updates &&
-                                "bg-amber-100 dark:bg-amber-700",
-                              page.type === PageType.announcements &&
-                                "text-blue-500 dark:text-blue-100",
-                              page.type === PageType.changelogs &&
-                                "text-teal-500 dark:text-teal-100",
-                              page.type === PageType.releases &&
-                                "text-rose-500 dark:text-rose-100",
-                              page.type === PageType.updates &&
-                                "text-amber-500 dark:text-amber-100",
-                              "inline-flex px-2 py-1 text-xs font-bold rounded-md"
-                            )}
-                          >
-                            {PageTypeToLabel[page.type]}
-                          </span>
-                          {page.teams && page.user_id !== user?.id && (
-                            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
-                              <UserGroupIcon className="h-4 w-4" />
-                              <span className="text-xs font-medium">
-                                Editor ({page.teams.name})
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-bold tracking-tight text-gray-900 dark:text-white">
-                            <Link
-                              href={`${ROUTES.PAGES}/${page.id}`}
-                              className="focus:outline-none hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200"
+                      <div className="flex items-center gap-4">
+                        {screenshots[idx] ? (
+                          <div className="flex-shrink-0 hidden sm:block">
+                            <img
+                              className="w-48 h-18 object-cover rounded-md border border-gray-200 dark:border-gray-700"
+                              src={screenshots[idx]}
+                              alt={`Screenshot of ${page.title}`}
+                              loading="lazy"
+                            />
+                          </div>
+                        ) : null}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-3 mb-2">
+                            <span
+                              className={classNames(
+                                page.type === PageType.announcements &&
+                                  "bg-blue-100 dark:bg-blue-700",
+                                page.type === PageType.changelogs &&
+                                  "bg-teal-100 dark:bg-teal-700",
+                                page.type === PageType.releases &&
+                                  "bg-rose-100 dark:bg-rose-700",
+                                page.type === PageType.updates &&
+                                  "bg-amber-100 dark:bg-amber-700",
+                                page.type === PageType.announcements &&
+                                  "text-blue-500 dark:text-blue-100",
+                                page.type === PageType.changelogs &&
+                                  "text-teal-500 dark:text-teal-100",
+                                page.type === PageType.releases &&
+                                  "text-rose-500 dark:text-rose-100",
+                                page.type === PageType.updates &&
+                                  "text-amber-500 dark:text-amber-100",
+                                "inline-flex px-2 py-1 text-xs font-bold rounded-md"
+                              )}
                             >
-                              <span
-                                className="absolute inset-0"
-                                aria-hidden="true"
-                              />
-                              {page.title}
-                            </Link>
-                          </h3>
-                          {page.description && (
-                            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
-                              {page.description}
+                              {PageTypeToLabel[page.type]}
+                            </span>
+                            {page.teams && page.user_id !== user?.id && (
+                              <div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                                <UserGroupIcon className="h-4 w-4" />
+                                <span className="text-xs font-medium">
+                                  Editor ({page.teams.name})
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                          <div>
+                            <h3 className="text-lg font-bold tracking-tight text-gray-900 dark:text-white">
+                              <Link
+                                href={`${ROUTES.PAGES}/${page.id}`}
+                                className="focus:outline-none hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200"
+                              >
+                                <span
+                                  className="absolute inset-0"
+                                  aria-hidden="true"
+                                />
+                                {page.title}
+                              </Link>
+                            </h3>
+                            {page.description && (
+                              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+                                {page.description}
+                              </p>
+                            )}
+                            <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                              {page.page_settings?.custom_domain
+                                ? page.page_settings.custom_domain
+                                : `${page.url_slug}.changes.page`}
                             </p>
-                          )}
-                          <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
-                            {page.page_settings?.custom_domain
-                              ? page.page_settings.custom_domain
-                              : `${page.url_slug}.changes.page`}
-                          </p>
+                          </div>
                         </div>
                       </div>
                       <div className="ml-4 flex-shrink-0">
@@ -178,6 +203,7 @@ export default function Pages({
                           fill="currentColor"
                           viewBox="0 0 20 20"
                         >
+                          <title>Go to page</title>
                           <path
                             fillRule="evenodd"
                             d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
diff --git a/apps/web/utils/capture.ts b/apps/web/utils/capture.ts
new file mode 100644
index 0000000..15eec7e
--- /dev/null
+++ b/apps/web/utils/capture.ts
@@ -0,0 +1,14 @@
+import { Capture } from "capture-node";
+
+export function getPageScreenshotUrl(url: string) {
+  const capture = new Capture(
+    process.env.CAPTURE_API_KEY,
+    process.env.CAPTURE_API_SECRET
+  );
+
+  return capture.buildImageUrl(url, {
+    vw: 1280,
+    vh: 720,
+    scaleFactor: 1.5,
+  });
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5e4a99..75d68b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -270,6 +270,9 @@ importers:
       canvas-confetti:
         specifier: ^1.9.3
         version: 1.9.3
+      capture-node:
+        specifier: ^2.2.0
+        version: 2.2.0
       chrono-node:
         specifier: ^2.7.6
         version: 2.8.0
@@ -2344,6 +2347,9 @@ packages:
   canvas-confetti@1.9.3:
     resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
 
+  capture-node@2.2.0:
+    resolution: {integrity: sha512-tIGaAKji/SDZxCJt+YDPaoLkXmLiDTD4XaHynBsAcO/NIOl0qWaC6+uVFNBKND8DUL92hAaV33TwHAvEseUB0w==}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -2371,6 +2377,9 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2488,6 +2497,9 @@ packages:
   crossws@0.3.5:
     resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
 
+  crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+
   css-b64-images@0.2.5:
     resolution: {integrity: sha512-TgQBEdP07adhrDfXvI5o6bHGukKBNMzp2Ngckc/6d09zpjD2gc1Hl3Ca1CKgb8FXjHi88+Phv2Uegs2kTL4zjg==}
     hasBin: true
@@ -3335,6 +3347,9 @@ packages:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
 
+  is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+
   is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
@@ -3674,6 +3689,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+
   mdast-util-definitions@5.1.2:
     resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
 
@@ -7119,6 +7137,11 @@ snapshots:
 
   canvas-confetti@1.9.3: {}
 
+  capture-node@2.2.0:
+    dependencies:
+      md5: 2.3.0
+      qs: 6.14.0
+
   ccount@2.0.1: {}
 
   chalk@2.4.2:
@@ -7145,6 +7168,8 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  charenc@0.0.2: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -7258,6 +7283,8 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
+  crypt@0.0.2: {}
+
   css-b64-images@0.2.5: {}
 
   css-background-parser@0.1.0: {}
@@ -8475,6 +8502,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-buffer@1.1.6: {}
+
   is-buffer@2.0.5: {}
 
   is-bun-module@2.0.0:
@@ -8766,6 +8795,12 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  md5@2.3.0:
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+
   mdast-util-definitions@5.1.2:
     dependencies:
       '@types/mdast': 3.0.15