diff --git a/common/charity.ts b/common/charity.ts
index 1b21cc12..086b65e9 100644
--- a/common/charity.ts
+++ b/common/charity.ts
@@ -1,4 +1,14 @@
-export const charities = [
+export interface Charity {
+  slug: string // Note, slugs double as charity IDs
+  name: string
+  website: string
+  ein: string
+  photo: string
+  blurb: string
+  raised?: number
+}
+
+export const charities: Charity[] = [
   {
     name: 'Faunalytics',
     website: 'https://faunalytics.org/',
diff --git a/web/components/charity/charity-card.tsx b/web/components/charity/charity-card.tsx
index 36581655..3ecd3ce8 100644
--- a/web/components/charity/charity-card.tsx
+++ b/web/components/charity/charity-card.tsx
@@ -1,23 +1,9 @@
 import Link from 'next/link'
+import { Charity } from '../../../common/charity'
 import { Row } from '../layout/row'
 
-// TODO: type probably belongs elsewhere
-export interface Charity {
-  slug: string // Note, slugs double as charity IDs
-  name: string
-  website: string
-  ein: string
-  photo?: string
-  blurb: string
-  raised: number
-}
-
-interface Props {
-  charity: Charity
-}
-
-export default function Card({ charity }: Props) {
-  const { name, slug, photo, raised, blurb } = charity
+export function CharityCard(props: { charity: Charity }) {
+  const { name, slug, photo, raised, blurb } = props.charity
 
   return (
     <Link href={`/charity/${slug}`} passHref>
@@ -29,7 +15,7 @@ export default function Card({ charity }: Props) {
           <h3 className="card-title line-clamp-3">{name}</h3>
           <div className="line-clamp-4 text-sm text-gray-100">{blurb}</div>
           <Row className="mt-4 items-end justify-center gap-1 text-green-300">
-            <span className="text-3xl">${Math.floor(raised / 100)}</span>
+            <span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span>
             <span>raised</span>
           </Row>
         </div>
diff --git a/web/pages/charity/[...slugs]/index.tsx b/web/pages/charity/[charitySlug].tsx
similarity index 71%
rename from web/pages/charity/[...slugs]/index.tsx
rename to web/pages/charity/[charitySlug].tsx
index 15b32410..87f3f157 100644
--- a/web/pages/charity/[...slugs]/index.tsx
+++ b/web/pages/charity/[charitySlug].tsx
@@ -1,34 +1,39 @@
 import clsx from 'clsx'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { Charity } from '../../../components/charity/charity-card'
-import { Col } from '../../../components/layout/col'
-import { Row } from '../../../components/layout/row'
-import { Page } from '../../../components/page'
-import { Title } from '../../../components/title'
-import { BuyAmountInput } from '../../../components/amount-input'
-import { Spacer } from '../../../components/layout/spacer'
-import { User } from '../../../../common/user'
-import { useUser } from '../../../hooks/use-user'
-import { Linkify } from '../../../components/linkify'
-import { transact } from '../../../lib/firebase/api-call'
+import { useEffect, useRef, useState } from 'react'
+import { Col } from '../../components/layout/col'
+import { Row } from '../../components/layout/row'
+import { Page } from '../../components/page'
+import { Title } from '../../components/title'
+import { BuyAmountInput } from '../../components/amount-input'
+import { Spacer } from '../../components/layout/spacer'
+import { User } from '../../../common/user'
+import { useUser } from '../../hooks/use-user'
+import { Linkify } from '../../components/linkify'
+import { transact } from '../../lib/firebase/api-call'
+import { charities, Charity } from '../../../common/charity'
+import { useRouter } from 'next/router'
+import Custom404 from '../404'
 
 const manaToUSD = (mana: number) =>
   (mana / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
 
-// TODO: replace with props
-const data: Charity = {
-  name: 'QRI',
-  slug: 'qri',
-  website: 'https://www.google.com',
-  ein: '123456789',
-  photo: 'https://placekitten.com/200/200',
-  blurb:
-    'Lorem Ipsum is simply dummy text of Lorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text ofLorem Ipsum isLorem Ipsum is simply dummy text ofLorem Ipsum is simply dummy text of simply dummy text ofummy text of ',
-  raised: 23450,
+export default function CharityPageWrapper() {
+  const router = useRouter()
+  const { charitySlug } = router.query as { charitySlug: string }
+
+  const charity = charities.find(
+    (c) => c.slug.toLowerCase() === charitySlug?.toLowerCase()
+  )
+  if (!router.isReady) return <></>
+  if (!charity) {
+    return <Custom404 />
+  }
+  return <CharityPage charity={charity} />
 }
 
-export default function CharityPage() {
-  const { name, photo, blurb } = data
+function CharityPage(props: { charity: Charity }) {
+  const { charity } = props
+  const { name, photo, blurb } = charity
 
   // TODO: why not just useUser inside Donation Box rather than passing in?
   const user = useUser()
@@ -41,7 +46,7 @@ export default function CharityPage() {
           {/* TODO: donations over time chart */}
           <Row className="justify-between">
             {photo && <img src={photo} alt="" className="w-40 rounded-2xl" />}
-            <Details userDonated={4} numSupporters={1} />
+            <Details charity={charity} userDonated={4} numSupporters={1} />
           </Row>
           <h2 className="mt-7 mb-2 text-xl text-indigo-700">About</h2>
           <Blurb text={blurb} />
@@ -84,13 +89,17 @@ function Blurb({ text }: { text: string }) {
   )
 }
 
-function Details(props: { userDonated?: number; numSupporters: number }) {
-  const { userDonated, numSupporters } = props
-  const { raised, website } = data
+function Details(props: {
+  charity: Charity
+  userDonated?: number
+  numSupporters: number
+}) {
+  const { charity, userDonated, numSupporters } = props
+  const { raised, website } = charity
   return (
     <Col className="gap-1 text-right">
       <div className="text-primary mb-2 text-4xl">
-        {manaToUSD(raised)} raised
+        {manaToUSD(raised ?? 0)} raised
       </div>
       {userDonated && (
         <div className="text-primary text-xl">
diff --git a/web/pages/charity/index.tsx b/web/pages/charity/index.tsx
index 0f3eda60..f3b7226d 100644
--- a/web/pages/charity/index.tsx
+++ b/web/pages/charity/index.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import { useState, useMemo } from 'react'
 import { charities as charityList } from '../../../common/charity'
-import Card from '../../components/charity/charity-card'
+import { CharityCard } from '../../components/charity/charity-card'
 import { Col } from '../../components/layout/col'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
@@ -39,7 +39,7 @@ export default function Charity() {
         <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-3 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
           {filterCharities.map((charity) => (
             <div key={charity.name}>
-              <Card charity={charity} />
+              <CharityCard charity={charity} />
             </div>
           ))}
         </div>