diff --git a/packages/lib-user/src/components/GroupStats/GroupStats.js b/packages/lib-user/src/components/GroupStats/GroupStats.js
index 2e6d711860..43ae0de721 100644
--- a/packages/lib-user/src/components/GroupStats/GroupStats.js
+++ b/packages/lib-user/src/components/GroupStats/GroupStats.js
@@ -51,7 +51,7 @@ function GroupStats({
 }) {
   // set stats based on selected project or all projects
   const stats = selectedProject === 'AllProjects' ? allProjectsStats : projectStats
-  
+
   // set top projects based on selected date range and all project stats
   let topProjects = []
   const topProjectContributions = allProjectsStats.project_contributions
@@ -104,7 +104,7 @@ function GroupStats({
                   displayName={topProject?.display_name}
                   href={`https://www.zooniverse.org/projects/${topProject?.slug}`}
                   imageSrc={topProject?.avatar_src}
-                  small
+                  size='small'
                 />
               )
             })}
diff --git a/packages/lib-user/src/components/UserStats/components/TopProjects/TopProjects.js b/packages/lib-user/src/components/UserStats/components/TopProjects/TopProjects.js
index a3e48e0a25..ca11769e1e 100644
--- a/packages/lib-user/src/components/UserStats/components/TopProjects/TopProjects.js
+++ b/packages/lib-user/src/components/UserStats/components/TopProjects/TopProjects.js
@@ -1,5 +1,6 @@
-import { Box } from 'grommet'
+import { Box, ResponsiveContext } from 'grommet'
 import { arrayOf, string, shape } from 'prop-types'
+import { useContext } from 'react'
 
 import {
   ContentBox,
@@ -7,6 +8,8 @@ import {
 } from '@components/shared'
 
 function TopProjects ({ topProjects = [] }) {
+  const size = useContext(ResponsiveContext)
+
   return (
     <ContentBox
       linkLabel='See more'
@@ -26,7 +29,8 @@ function TopProjects ({ topProjects = [] }) {
               description={topProject?.description}
               displayName={topProject?.display_name}
               href={`https://www.zooniverse.org/projects/${topProject?.slug}`}
-              imageSrc={topProject?.avatar_src}                
+              imageSrc={topProject?.avatar_src}
+              size={size}
             />
           )
         })}
diff --git a/packages/lib-user/src/components/shared/ContentBox/ContentBox.stories.js b/packages/lib-user/src/components/shared/ContentBox/ContentBox.stories.js
index a7e7ab5582..6c7097226d 100644
--- a/packages/lib-user/src/components/shared/ContentBox/ContentBox.stories.js
+++ b/packages/lib-user/src/components/shared/ContentBox/ContentBox.stories.js
@@ -82,11 +82,11 @@ export const TopProjectsSplit = {
         columns='1/3'
         gap='small'
       >
-        <ProjectCard {...NfnCaliFlowers.args} small />
-        <ProjectCard {...NestQuestGo.args} small />
-        <ProjectCard {...PlanetHuntersTess.args} small />
-        <ProjectCard {...CorrespondingWithQuakers.args} small />
-        <ProjectCard {...WildwatchKenya.args} small />
+        <ProjectCard {...NfnCaliFlowers.args} size='small' />
+        <ProjectCard {...NestQuestGo.args} size='small' />
+        <ProjectCard {...PlanetHuntersTess.args} size='small' />
+        <ProjectCard {...CorrespondingWithQuakers.args} size='small' />
+        <ProjectCard {...WildwatchKenya.args} size='small' />
       </Grid>
     </ContentBox>
   )
diff --git a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.js b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.js
index c99ae4cf7b..a7ba1b186d 100644
--- a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.js
+++ b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.js
@@ -1,39 +1,11 @@
 import { Box } from 'grommet'
-import { bool, string } from 'prop-types'
-import styled, { css } from 'styled-components'
+import { string } from 'prop-types'
+import styled from 'styled-components'
 import { SpacedText } from '@zooniverse/react-components'
 
 const StyledProjectCard = styled(Box)`
-  font-size: 0.625rem;
-  height: 200px;
   text-decoration: none;
-  width: 157px;
-
-  > .project-image {
-    height: 157px;
-  }
-
-  ${props => !props.small && css`
-    @media (768px < width <= 1280px) {
-      font-size: 0.656rem;
-      height: 240px;
-      width: 189px;
-
-      > .project-image {
-        height: 189px;
-      }
-    }
-
-    @media (width > 1280px) {
-      font-size: 0.688rem;
-      height: 280px;
-      width: 220px;
-
-      > .project-image {
-        height: 220px;
-      }
-    }
-  `}
+  font-size: ${props => props.cardFontSize};
 `
 
 const StyledProjectContent = styled(Box)`
@@ -70,12 +42,42 @@ const StyledProjectDescription = styled(SpacedText)`
   }
 `
 
+function cardWidth (size) {
+  switch (size) {
+    case 'small':
+      return 157;
+    case 'medium':
+      return 189;
+    case 'large':
+      return 220;
+    case 'xlarge':
+      return 252;
+    default:
+      return 189;
+  }
+}
+
+function cardFontSize (size) {
+  switch (size) {
+    case 'small':
+      return '0.625rem';
+    case 'medium':
+      return '0.656rem';
+    case 'large':
+      return '0.688rem';
+    case 'xlarge':
+      return '0.688rem';
+    default:
+      return '0.656rem';
+  }
+}
+
 function ProjectCard ({
   description = '',
   displayName = '',
   href = '',
   imageSrc = '',
-  small = false
+  size = 'medium',
 }) {
   return (
     <StyledProjectCard
@@ -84,7 +86,9 @@ function ProjectCard ({
       forwardedAs='a'
       href={href}
       round='8px'
-      small={small}
+      cardFontSize={cardFontSize(size)}
+      height={`${cardWidth(size) * 14 / 11}px`}
+      width={`${cardWidth(size)}px`}
     >
       <Box
         className='project-image'
@@ -93,6 +97,7 @@ function ProjectCard ({
           position: 'top',
           size: 'cover',
         }}
+        height={`${cardWidth(size)}px`}
         round={{ corner: 'top', size: '8px' }}
       >
       </Box>
@@ -128,7 +133,7 @@ ProjectCard.propTypes = {
   displayName: string,
   href: string,
   imageSrc: string,
-  small: bool
+  size: string
 }
 
 export default ProjectCard
diff --git a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.spec.js b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.spec.js
index 0d6f7e4f8c..806c1a0820 100644
--- a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.spec.js
+++ b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.spec.js
@@ -9,18 +9,19 @@ describe('components > shared > ProjectCard', function () {
   it('should show the project name', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByText('Notes from Nature - Capturing California\'s Flowers')).to.be.ok()
+    // grabbing the first element because each Story renders all four ProjectCard sizes
+    expect(screen.getAllByText('Notes from Nature - Capturing California\'s Flowers')[0]).to.be.ok()
   })
 
   it('should show the project description', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByText('Using digital images to investigate ​phenological change in a biodiversity hotspot​')).to.be.ok()
+    expect(screen.getAllByText('Using digital images to investigate ​phenological change in a biodiversity hotspot​')[0]).to.be.ok()
   })
 
   it('should link to the project', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByRole('link', { href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers'})).to.be.ok()
+    expect(screen.getAllByRole('link', { href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers'})[0]).to.be.ok()
   })
 })
diff --git a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.stories.js b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.stories.js
index b828348da5..108d770258 100644
--- a/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.stories.js
+++ b/packages/lib-user/src/components/shared/ProjectCard/ProjectCard.stories.js
@@ -1,90 +1,92 @@
 import { Box } from 'grommet'
 import ProjectCard from './ProjectCard.js'
-
-// TODO: refactor with PROJECTS from panoptes.mock.js
-// import { PROJECTS } from '../../../../test/mocks/panoptes.mock.js'
+import { PROJECTS } from '../../../../test/mocks/panoptes/projects.js'
 
 export default {
   title: 'Components/shared/ProjectCard',
-  component: ProjectCard,
-  decorators: [ComponentDecorator]
-}
-function ComponentDecorator (Story) {
-  return (
-    <Box
-      background={{
-        dark: 'dark-3',
-        light: 'neutral-6'
-      }}
-      fill
-      pad='30px'
-    >
-      <Story />
-    </Box>
-  )
+  component: ProjectCard
 }
 
 export const NfnCaliFlowers = {
   args: {
-    description: 'Using digital images to investigate ​phenological change in a biodiversity hotspot​',
-    displayName: `Notes from Nature - Capturing California's Flowers`,
-    href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg'
-  }
+    displayName: PROJECTS[0].display_name,
+    imageSrc: PROJECTS[0].avatar_src,
+    ...PROJECTS[0]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
+/* This code looks repetitive instead of mapping over PROJECTS,
+   but Storybook requires named exports, so each project
+   is explicitely written out below */
+
 export const NestQuestGo = {
   args: {
-    description: 'Help us understand the historical nesting patterns of these beloved bluebirds!',
-    displayName: 'NEST QUEST GO: EASTERN BLUEBIRDS',
-    href: 'https://www.zooniverse.org/projects/brbcornell/nest-quest-go-eastern-bluebirds',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg'
-  }
+    displayName: PROJECTS[1].display_name,
+    imageSrc: PROJECTS[1].avatar_src,
+    ...PROJECTS[1]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const PlanetHuntersTess = {
   args: {
-    description: 'Join the Search for Undiscovered Worlds',
-    displayName: 'Planet Hunters TESS',
-    href: 'https://www.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg'
-  }
+    displayName: PROJECTS[2].display_name,
+    imageSrc: PROJECTS[2].avatar_src,
+    ...PROJECTS[2]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const CorrespondingWithQuakers = {
   args: {
-    description: 'Investigating race, gender, class, and religion in 18th- and 19th-Century Irish Quaker Documents',
-    displayName: 'Corresponding with Quakers',
-    href: 'https://www.zooniverse.org/projects/rachaelsking/corresponding-with-quakers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/252e7e80-949b-4324-8af4-8d3ad7aafbde.jpeg'
-  }
+    displayName: PROJECTS[3].display_name,
+    imageSrc: PROJECTS[3].avatar_src,
+    ...PROJECTS[3]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const WildwatchKenya = {
   args: {
-    description: 'We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya! We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya!',
-    displayName: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
-    href: 'https://www.zooniverse.org/projects/sandiegozooglobal/wildwatch-kenya',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg'
-  }
-}
-
-export const NfnCaliFlowersSmall = {
-  args: {
-    description: 'Using digital images to investigate ​phenological change in a biodiversity hotspot​',
-    displayName: `Notes from Nature - Capturing California's Flowers`,
-    href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
-    small: true
-  }
-}
-
-export const WildwatchKenyaSmall = {
-  args: {
-    description: 'We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya! We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya!',
-    displayName: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
-    href: 'https://www.zooniverse.org/projects/sandiegozooglobal/wildwatch-kenya',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
-    small: true
-  }
+    displayName: PROJECTS[4].display_name,
+    imageSrc: PROJECTS[4].avatar_src,
+    ...PROJECTS[4]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }