diff --git a/web/pages/grants/GranteeCard.tsx b/web/pages/grants/GranteeCard.tsx
new file mode 100644
index 00000000..15361751
--- /dev/null
+++ b/web/pages/grants/GranteeCard.tsx
@@ -0,0 +1,57 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+import { Grantee } from '.'
+import { Row } from 'web/components/layout/row'
+import { sumBy } from 'lodash'
+
+export default function GranteeCard(props: { grantee: Grantee }) {
+  const { grantee } = props
+  const { slug, photo, preview } = grantee
+
+  // sumBy grantee.grantsReceived amount
+  const raised = sumBy(grantee.grantsReceived, (grant) => grant.amount)
+
+  return (
+    <Link href={`/grants/${slug}`} passHref>
+      <div className="card card-compact transition:shadow flex-1 cursor-pointer border-2 bg-white hover:shadow-md">
+        <div className="px-8">
+          <figure className="relative h-32">
+            {photo ? (
+              <Image src={photo} alt="" layout="fill" objectFit="contain" />
+            ) : (
+              <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200">
+                <div className="absolute inset-0 flex items-center justify-center text-2xl font-light">
+                  {grantee.name}
+                </div>
+              </div>
+            )}
+          </figure>
+        </div>
+        <div className="card-body">
+          <div className="line-clamp-4 text-sm">{preview}</div>
+          {raised > 0 && (
+            <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
+              <Row className="items-baseline gap-1">
+                <span className="text-3xl font-semibold">
+                  {formatUsd(raised)}
+                </span>
+                raised
+              </Row>
+              {/* {match && (
+                  <Col className="text-gray-500">
+                    <span className="text-xl">+{formatUsd(match)}</span>
+                    <span className="">match</span>
+                  </Col>
+                )} */}
+            </Row>
+          )}
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+function formatUsd(usd: number) {
+  return `$${usd}`
+}
diff --git a/web/pages/grants/index.tsx b/web/pages/grants/index.tsx
new file mode 100644
index 00000000..6ed3375c
--- /dev/null
+++ b/web/pages/grants/index.tsx
@@ -0,0 +1,60 @@
+import { Col } from 'web/components/layout/col'
+import { Page } from 'web/components/page'
+import { Title } from 'web/components/title'
+import GranteeCard from './GranteeCard'
+
+export type Grantee = {
+  name: string // Better be unique lol
+  // slug = name.toLowerCase().replace(/\s/g, '-')
+  slug: string
+  website?: string
+  photo?: string
+  preview: string
+  description: string
+  grantsReceived: Grant[]
+}
+
+export type Grant = {
+  date: string // in YYYY-MM-DD format
+  amount: number // in USD
+  from: 'FTX FF' | 'SFF' | 'OP'
+  to: string // The name of the receiving charity
+  description: string // Why the grant was given; if stated
+}
+
+const grantees: Grantee[] = [
+  {
+    name: 'Manifold Markets',
+    slug: 'manifold-markets',
+    website: 'https://manifold.markets',
+    preview: '',
+    description: '',
+    grantsReceived: [
+      {
+        date: '2022-03-01',
+        amount: 500000,
+        from: 'FTX FF',
+        to: 'Manifold Markets',
+        description: 'Because you guys are awesome!',
+      },
+    ],
+  },
+]
+
+export default function Grants() {
+  return (
+    <Page>
+      <Col className="w-full rounded px-4 py-6 sm:px-8 xl:w-[125%]">
+        <Col className="">
+          <Title className="!mt-0" text="Manifold for Charity" />
+
+          <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
+            {grantees.map((grantee) => (
+              <GranteeCard grantee={grantee} key={grantee.name} />
+            ))}
+          </div>
+        </Col>
+      </Col>
+    </Page>
+  )
+}