diff --git a/src/WebClient/app/components/Graveyard.tsx b/src/WebClient/app/components/Graveyard.tsx
index 2de4341..65d0081 100644
--- a/src/WebClient/app/components/Graveyard.tsx
+++ b/src/WebClient/app/components/Graveyard.tsx
@@ -1,17 +1,14 @@
 import { useCallback, useEffect, useState, JSX } from 'react';
-import {
-  Button,
-  Card,
-  CardHeader,
-  Image,
-  Text,
-  makeStyles,
-  tokens,
-} from '@fluentui/react-components';
-import { News16Regular } from '@fluentui/react-icons';
+import { makeStyles, tokens } from '@fluentui/react-components';
 import corpsesDocument from '@microsoftgraveyard/data/corpses.json';
 import GraveyardHeader from '@microsoftgraveyard/components/GraveyardHeader';
 import GraveyardFooter from '@microsoftgraveyard/components/GraveyardFooter';
+import {
+  Corpse,
+  CorpseRecord,
+  CorpsesDocument,
+} from '@microsoftgraveyard/types/corpse';
+import Headstone from '@microsoftgraveyard/components/Headstone';
 
 const useStyles = makeStyles({
   main: {
@@ -52,94 +49,6 @@ const useStyles = makeStyles({
   },
 });
 
-interface Corpse {
-  name: string;
-  qualifier: string | null;
-  birthDate: Date | null;
-  deathDate: Date;
-  description: string;
-  link: string;
-}
-
-interface CorpseRecord {
-  name: string;
-  qualifier: string | null;
-  birthDate: string | null;
-  deathDate: string;
-  description: string;
-  link: string;
-}
-
-interface CorpsesDocument {
-  $schema: string;
-  corpses: CorpseRecord[];
-}
-
-const getAge = (start: Date, end: Date): { age: number; period: string } => {
-  let years = end.getFullYear() - start.getFullYear();
-  if (
-    end.getMonth() < start.getMonth() ||
-    (end.getMonth() === start.getMonth() && end.getDate() < start.getDate())
-  ) {
-    years--;
-  }
-
-  if (years >= 1) {
-    return { age: years, period: years === 1 ? 'year' : 'years' };
-  }
-
-  const months =
-    end.getMonth() -
-    start.getMonth() +
-    12 * (end.getFullYear() - start.getFullYear());
-  if (months >= 1) {
-    return { age: months, period: months === 1 ? 'month' : 'months' };
-  }
-
-  const days = end.getDate() - start.getDate();
-  return { age: days, period: days === 1 ? 'day' : 'days' };
-};
-
-const getExpectedDeathDate = (corpse: Corpse): string =>
-  corpse.deathDate.toLocaleDateString(undefined, {
-    month: 'long',
-    year: 'numeric',
-  });
-
-const getFullName = (corpse: Corpse): string =>
-  corpse.qualifier ? `${corpse.name} (${corpse.qualifier})` : corpse.name;
-
-const getLifeDates = (corpse: Corpse): string =>
-  corpse.birthDate
-    ? `${corpse.birthDate.getFullYear()} - ${corpse.deathDate.getFullYear()}`
-    : `${corpse.deathDate.getFullYear()}`;
-
-const getObituary = (corpse: Corpse, today: Date): string => {
-  let obituary = '';
-
-  const dead = isDead(corpse, today);
-  if (dead) {
-    const { age, period } = getAge(corpse.deathDate, today);
-    const message = age === 0 ? 'today' : `${age} ${period} ago`;
-    obituary += `Killed by Microsoft ${message}, `;
-  } else {
-    const { age, period } = getAge(today, corpse.deathDate);
-    obituary += `To be killed by Microsoft in ${age} ${period}, `;
-  }
-
-  obituary += `${corpse.name} ${dead ? 'was' : 'is'} ${corpse.description}.`;
-
-  if (dead && corpse.birthDate) {
-    const { age, period } = getAge(corpse.birthDate, corpse.deathDate);
-    obituary += ` It was ${age} ${period} old.`;
-  }
-
-  return obituary;
-};
-
-const isDead = (corpse: Corpse, today: Date): boolean =>
-  corpse.deathDate <= today;
-
 const Graveyard = () => {
   const [corpses, setCorpses] = useState<Corpse[]>([]);
   const today: Date = new Date();
@@ -168,48 +77,10 @@ const Graveyard = () => {
     );
   }, []);
 
-  const renderGraves = (): JSX.Element[] => {
+  const renderHeadstones = (): JSX.Element[] => {
     return corpses.map((corpse, index) => (
       <li className={styles.container} key={index}>
-        <Card appearance="filled-alternative" key={index}>
-          <CardHeader
-            image={
-              <Image
-                src={
-                  isDead(corpse, today)
-                    ? '/images/headstone.svg'
-                    : '/images/coffin.svg'
-                }
-                alt="a headstone for that which is dead"
-                height={72}
-                width={72}
-              />
-            }
-            header={
-              <Text as="h2" weight="bold" block className={styles.title}>
-                {getFullName(corpse)}
-              </Text>
-            }
-            description={
-              <Text as="p" className={styles.lifeDates}>
-                {isDead(corpse, today)
-                  ? getLifeDates(corpse)
-                  : getExpectedDeathDate(corpse)}
-              </Text>
-            }
-            action={
-              <Button
-                as="a"
-                icon={<News16Regular />}
-                appearance="subtle"
-                href={corpse.link}
-                target="_blank"
-                rel="noreferrer noopener"
-              />
-            }
-          />
-          <Text as="p">{getObituary(corpse, today)}</Text>
-        </Card>
+        <Headstone corpse={corpse} today={today} />
       </li>
     ));
   };
@@ -222,7 +93,7 @@ const Graveyard = () => {
     <main className={styles.main}>
       <GraveyardHeader />
       <section id="graveyard">
-        <ul className={styles.list}>{renderGraves()}</ul>
+        <ul className={styles.list}>{renderHeadstones()}</ul>
       </section>
       <GraveyardFooter />
     </main>
diff --git a/src/WebClient/app/components/Headstone.tsx b/src/WebClient/app/components/Headstone.tsx
new file mode 100644
index 0000000..49290e4
--- /dev/null
+++ b/src/WebClient/app/components/Headstone.tsx
@@ -0,0 +1,158 @@
+import {
+  Card,
+  CardHeader,
+  Button,
+  Image,
+  tokens,
+  makeStyles,
+  Skeleton,
+  SkeletonItem,
+  Body1,
+  Subtitle1,
+} from '@fluentui/react-components';
+import { News16Regular } from '@fluentui/react-icons';
+import useCorpse from '@microsoftgraveyard/hooks/useCorpse';
+import { Corpse } from '@microsoftgraveyard/types/corpse';
+import { FC } from 'react';
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+  },
+  skeletonImage: {
+    height: '72px',
+    width: '72px',
+  },
+  skeletonAction: {
+    height: '16px',
+    width: '16px',
+  },
+  skeletonFirstRow: {
+    alignItems: 'center',
+    display: 'grid',
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    position: 'relative',
+    gap: '10px',
+    gridTemplateColumns: '20% 15% 30% 25% min-content',
+  },
+  skeletonSecondRow: {
+    alignItems: 'center',
+    display: 'grid',
+    paddingBottom: '10px',
+    position: 'relative',
+    gap: '10px',
+    gridTemplateColumns: '15% 30% 20% min-content 20%',
+  },
+  skeletonThirdRow: {
+    alignItems: 'center',
+    display: 'grid',
+    paddingBottom: '10px',
+    position: 'relative',
+    gap: '10px',
+    gridTemplateColumns: '10% 15% 20% 35% min-content',
+  },
+  title: {
+    margin: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalNone}`,
+  },
+  lifeDates: {
+    color: tokens.colorBrandForeground2,
+    lineHeight: tokens.lineHeightBase200,
+    margin: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalNone}`,
+  },
+});
+
+interface HeadstoneProps {
+  corpse: Corpse;
+  today: Date;
+}
+
+const Headstone: FC<HeadstoneProps> = ({ corpse, today }) => {
+  const styles = useStyles();
+  const { name, lifeDates, obituary, isDead, loading } = useCorpse(
+    corpse,
+    today
+  );
+
+  return (
+    <Card appearance="filled-alternative" className={styles.container}>
+      {loading ? (
+        <Skeleton aria-label="Loading headstone">
+          <CardHeader
+            image={
+              <SkeletonItem shape="circle" className={styles.skeletonImage} />
+            }
+            header={<SkeletonItem size={20} className={styles.title} />}
+            description={
+              <SkeletonItem size={16} className={styles.lifeDates} />
+            }
+            action={
+              <SkeletonItem
+                shape="square"
+                size={24}
+                className={styles.skeletonAction}
+              />
+            }
+          />
+          <div className={styles.skeletonFirstRow}>
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+          </div>
+          <div className={styles.skeletonSecondRow}>
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+          </div>
+          <div className={styles.skeletonThirdRow}>
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+            <SkeletonItem size={12} />
+          </div>
+        </Skeleton>
+      ) : (
+        <>
+          <CardHeader
+            image={
+              <Image
+                src={isDead ? '/images/headstone.svg' : '/images/coffin.svg'}
+                alt="a headstone for that which is dead"
+                height={72}
+                width={72}
+              />
+            }
+            header={
+              <Subtitle1 as="h2" block className={styles.title}>
+                {name}
+              </Subtitle1>
+            }
+            description={
+              <Body1 as="p" className={styles.lifeDates}>
+                {lifeDates}
+              </Body1>
+            }
+            action={
+              <Button
+                as="a"
+                icon={<News16Regular />}
+                appearance="subtle"
+                href={corpse.link}
+                target="_blank"
+                rel="noreferrer noopener"
+              />
+            }
+          />
+          <Body1 as="p">{obituary}</Body1>
+        </>
+      )}
+    </Card>
+  );
+};
+
+export default Headstone;
diff --git a/src/WebClient/app/hooks/useCorpse.ts b/src/WebClient/app/hooks/useCorpse.ts
new file mode 100644
index 0000000..9505964
--- /dev/null
+++ b/src/WebClient/app/hooks/useCorpse.ts
@@ -0,0 +1,98 @@
+import { Corpse } from '@microsoftgraveyard/types/corpse';
+import { useCallback, useEffect, useState } from 'react';
+
+const useCorpse = (corpse: Corpse, today: Date) => {
+  const name = corpse.qualifier
+    ? `${corpse.name} (${corpse.qualifier})`
+    : corpse.name;
+
+  const [lifeDates, setLifeDates] = useState<string>('');
+  const [obituary, setObituary] = useState<string>('');
+
+  const isDead: boolean = corpse.deathDate <= today;
+
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const getLifeDates = useCallback(
+    (): string =>
+      corpse.birthDate
+        ? `${corpse.birthDate.getFullYear()} - ${corpse.deathDate.getFullYear()}`
+        : `${corpse.deathDate.getFullYear()}`,
+    [corpse]
+  );
+
+  const getExpectedDeathDate = useCallback(
+    (): string =>
+      corpse.deathDate.toLocaleDateString(undefined, {
+        month: 'long',
+        year: 'numeric',
+      }),
+    [corpse]
+  );
+
+  const getAge = useCallback(
+    (start: Date, end: Date): { age: number; period: string } => {
+      let years = end.getFullYear() - start.getFullYear();
+      if (
+        end.getMonth() < start.getMonth() ||
+        (end.getMonth() === start.getMonth() && end.getDate() < start.getDate())
+      ) {
+        years--;
+      }
+
+      if (years >= 1) {
+        return { age: years, period: years === 1 ? 'year' : 'years' };
+      }
+
+      const months =
+        end.getMonth() -
+        start.getMonth() +
+        12 * (end.getFullYear() - start.getFullYear());
+      if (months >= 1) {
+        return { age: months, period: months === 1 ? 'month' : 'months' };
+      }
+
+      const days = end.getDate() - start.getDate();
+      return { age: days, period: days === 1 ? 'day' : 'days' };
+    },
+    []
+  );
+
+  const buildLifeDates = useCallback(
+    () => setLifeDates(isDead ? getLifeDates() : getExpectedDeathDate()),
+    [getExpectedDeathDate, getLifeDates, isDead]
+  );
+
+  const buildObituary = useCallback(() => {
+    let content = '';
+
+    const dead = isDead;
+    if (dead) {
+      const { age, period } = getAge(corpse.deathDate, today);
+      const message = age === 0 ? 'today' : `${age} ${period} ago`;
+      content += `Killed by Microsoft ${message}, `;
+    } else {
+      const { age, period } = getAge(today, corpse.deathDate);
+      content += `To be killed by Microsoft in ${age} ${period}, `;
+    }
+
+    content += `${corpse.name} ${dead ? 'was' : 'is'} ${corpse.description}.`;
+
+    if (dead && corpse.birthDate) {
+      const { age, period } = getAge(corpse.birthDate, corpse.deathDate);
+      content += ` It was ${age} ${period} old.`;
+    }
+
+    setObituary(content);
+  }, [corpse, getAge, isDead, today]);
+
+  useEffect(() => {
+    buildLifeDates();
+    buildObituary();
+    setLoading(false);
+  }, [buildLifeDates, buildObituary]);
+
+  return { name, lifeDates, obituary, isDead, loading };
+};
+
+export default useCorpse;
diff --git a/src/WebClient/app/types/corpse.ts b/src/WebClient/app/types/corpse.ts
new file mode 100644
index 0000000..0864e12
--- /dev/null
+++ b/src/WebClient/app/types/corpse.ts
@@ -0,0 +1,24 @@
+interface Corpse {
+  name: string;
+  qualifier: string | null;
+  birthDate: Date | null;
+  deathDate: Date;
+  description: string;
+  link: string;
+}
+
+interface CorpseRecord {
+  name: string;
+  qualifier: string | null;
+  birthDate: string | null;
+  deathDate: string;
+  description: string;
+  link: string;
+}
+
+interface CorpsesDocument {
+  $schema: string;
+  corpses: CorpseRecord[];
+}
+
+export type { Corpse, CorpseRecord, CorpsesDocument };