diff --git a/web/public/birds/eagle.jpg b/web/public/birds/eagle.jpg
new file mode 100644
index 0000000000000..49faf3a3d00e4
Binary files /dev/null and b/web/public/birds/eagle.jpg differ
diff --git a/web/public/birds/owl.jpg b/web/public/birds/owl.jpg
new file mode 100644
index 0000000000000..1db8eba9ffd70
Binary files /dev/null and b/web/public/birds/owl.jpg differ
diff --git a/web/public/birds/toucan.jpg b/web/public/birds/toucan.jpg
new file mode 100644
index 0000000000000..5c9e2231727a5
Binary files /dev/null and b/web/public/birds/toucan.jpg differ
diff --git a/web/src/pages/About.tsx b/web/src/pages/About.tsx
index 975d26339357a..42b9487b6c683 100644
--- a/web/src/pages/About.tsx
+++ b/web/src/pages/About.tsx
@@ -1,11 +1,22 @@
 import { ExternalLinkIcon } from "lucide-react";
-import TileSpriteStrip from "@/components/Placeholder/TileSpriteStrip";
-import { TILE_SPRITES, type TileSprite } from "@/components/Placeholder/tileSprites";
 import SettingGroup from "@/components/Settings/SettingGroup";
 import SettingSection from "@/components/Settings/SettingSection";
 import { Button } from "@/components/ui/button";
 
-const SPRITE_SCALE = 2;
+const BIRD_PHOTOS = [
+  { name: "Owl", src: "/birds/owl.jpg", alt: "Little Owl (Athene noctua)" },
+  { name: "Eagle", src: "/birds/eagle.jpg", alt: "Bald Eagle portrait" },
+  { name: "Toucan", src: "/birds/toucan.jpg", alt: "Toucan portrait" },
+];
+
+const BirdPhoto = ({ bird }: { bird: (typeof BIRD_PHOTOS)[number] }) => (
+  <figure className="flex w-auto min-w-28 flex-none flex-col items-center gap-3 rounded-xl border border-border bg-muted/20 px-4 py-4 text-center">
+    <img src={bird.src} alt={bird.alt} className="size-16 rounded-lg object-cover" draggable={false} />
+    <figcaption className="min-w-0">
+      <h3 className="font-mono text-sm text-foreground">{bird.name}</h3>
+    </figcaption>
+  </figure>
+);
 
 const PRODUCT_LINKS = [
   { label: "Website", href: "https://usememos.com/" },
@@ -15,17 +26,6 @@ const PRODUCT_LINKS = [
 
 const PRODUCT_POINTS = ["Open. Write. Done.", "Markdown-native.", "Fully yours."];
 
-const BirdSprite = ({ sprite }: { sprite: TileSprite }) => {
-  return (
-    <figure className="flex w-auto min-w-28 flex-none flex-col items-center gap-3 rounded-xl border border-border bg-muted/20 px-4 py-4 text-center">
-      <TileSpriteStrip sprite={sprite} scale={SPRITE_SCALE} className="size-16" testId="about-bird-sprite" />
-      <figcaption className="min-w-0">
-        <h3 className="font-mono text-sm text-foreground">{sprite.name}</h3>
-      </figcaption>
-    </figure>
-  );
-};
-
 const About = () => {
   return (
     <section className="mx-auto w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
@@ -71,10 +71,10 @@ const About = () => {
               </div>
             </SettingGroup>
 
-            <SettingGroup showSeparator title="Birds" description="Pixel tile strips used by empty states.">
+            <SettingGroup showSeparator title="Birds" description="Real birds used by empty states.">
               <section aria-label="Birds" className="flex flex-row flex-wrap gap-3">
-                {TILE_SPRITES.map((sprite) => (
-                  <BirdSprite key={sprite.name} sprite={sprite} />
+                {BIRD_PHOTOS.map((bird) => (
+                  <BirdPhoto key={bird.name} bird={bird} />
                 ))}
               </section>
             </SettingGroup>