diff --git a/sites/devsite/content/page/About_Us/fair.mdx b/sites/devsite/content/page/About_Us/fair.mdx
index 4c37d11..8b59bec 100644
--- a/sites/devsite/content/page/About_Us/fair.mdx
+++ b/sites/devsite/content/page/About_Us/fair.mdx
@@ -29,4 +29,14 @@ Proident in ea officia aliquip sint cillum magna nostrud est est anim. In culpa
 
 Id irure ex sint nostrud. Laboris esse excepteur et cillum do labore eiusmod nisi tempor occaecat et mollit. Elit ullamco veniam Lorem adipisicing. Minim fugiat irure aliquip eiusmod proident occaecat ex sunt do. Ipsum minim cupidatat do occaecat officia nisi mollit anim. Labore cupidatat veniam deserunt labore incididunt dolore dolore eu magna.
 
-Pariatur enim enim ad non quis ut. Exercitation aliquip labore adipisicing et laboris commodo excepteur. Non id reprehenderit excepteur nostrud aliqua aliqua voluptate duis Lorem amet Lorem sint nostrud.
\ No newline at end of file
+<Grid container spacing={4} sx={{mt: 3}} padding={2}>
+      <StoryCard 
+        title="Joe Wheaton"
+        image={"/images/logo-nasa.png"}
+        description="Professor of Riverscapes; Fluvial Geomorphologist; Restoration Practitioner"
+        to="https://www.riverscapes.net/users/5826874" />
+      
+</Grid>
+
+Pariatur enim enim ad non quis ut. Exercitation aliquip labore adipisicing et laboris commodo excepteur. Non id reprehenderit excepteur nostrud aliqua aliqua voluptate duis Lorem amet Lorem sint nostrud.
+
diff --git a/theme/src/components/StoryCard.tsx b/theme/src/components/StoryCard.tsx
index 494dbb6..26c233b 100644
--- a/theme/src/components/StoryCard.tsx
+++ b/theme/src/components/StoryCard.tsx
@@ -1,5 +1,6 @@
 import { Box, Card, CardActionArea, CardContent, Grid, Typography } from '@mui/material'
 import React from 'react'
+import { withPrefix } from 'gatsby'
 import { GatsbyImage } from 'gatsby-plugin-image'
 import { ContentLink as Link } from './ContentLink'
 
@@ -13,13 +14,20 @@ interface StoryCardProps {
 
 export const StoryCard: React.FC<StoryCardProps> = ({ title, to, description, image, imageAlt }) => {
   const imgIsString = typeof image === 'string'
+  // If the image is a relative path, append the pathPrefix from gatsby-config.js
+  let newSrc: string = image
+  if (imgIsString) {
+    if (newSrc.startsWith('/')) {
+      newSrc = withPrefix(newSrc)
+    }
+  }
   return (
     <Grid item xs={12} md={6} lg={3}>
       <Card sx={{ height: '100%' }}>
         <CardActionArea component={Link} to={to}>
           {imgIsString ? (
             <Box>
-              <img src={image} alt={imageAlt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              <img src={newSrc} alt={imageAlt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
             </Box>
           ) : (
             <GatsbyImage image={image} alt={imageAlt} />