diff --git a/packages/app-project/pages/projects/[owner]/[project]/classify/index.js b/packages/app-project/pages/projects/[owner]/[project]/classify/index.js
index 394009abfe..a192deddbd 100644
--- a/packages/app-project/pages/projects/[owner]/[project]/classify/index.js
+++ b/packages/app-project/pages/projects/[owner]/[project]/classify/index.js
@@ -3,10 +3,5 @@ export { default } from '@screens/ClassifyPage'
 
 export async function getServerSideProps({ params, query, req, res }) {
   const { props } = await getDefaultPageProps({ params, query, req, res })
-  const { project } = props.initialState
-  const workflowID = project.defaultWorkflow
-  if (workflowID) {
-    props.workflowID = workflowID
-  }
   return ({ props })
 }
diff --git a/packages/app-project/pages/projects/[owner]/[project]/index.js b/packages/app-project/pages/projects/[owner]/[project]/index.js
index 8a1ef4ef95..2268b8e63a 100644
--- a/packages/app-project/pages/projects/[owner]/[project]/index.js
+++ b/packages/app-project/pages/projects/[owner]/[project]/index.js
@@ -1,3 +1,8 @@
+import getDefaultPageProps from '@helpers/getDefaultPageProps'
 export { default } from '@screens/ProjectHomePage'
-export { default as getServerSideProps } from '@helpers/getDefaultPageProps'
+
+export async function getServerSideProps({ params, query, req, res }) {
+  const { props } = await getDefaultPageProps({ params, query, req, res })
+  return ({ props })
+}
 
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js b/packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js
similarity index 84%
rename from packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js
rename to packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js
index 4f1909186f..362f04c1ca 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js
+++ b/packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.js
@@ -1,22 +1,24 @@
 import { panoptes } from '@zooniverse/panoptes-js'
 
-async function fetchWorkflowData (activeWorkflows) {
+async function fetchWorkflowData (activeWorkflows, env) {
   const response = await panoptes
     .get('/workflows', {
       complete: false,
+      env,
       fields: 'completeness,grouped',
       id: activeWorkflows.join(','),
       include: 'subject_sets'
     })
   const { workflows, linked } = response.body
   const subjectSets = linked ? linked.subject_sets : []
-  await Promise.allSettled(subjectSets.map(fetchPreviewImage))
+  await Promise.allSettled(subjectSets.map(subjectSet => fetchPreviewImage(subjectSet, env)))
   return { subjectSets, workflows }
 }
 
-function fetchDisplayNames (language, activeWorkflows) {
+function fetchDisplayNames (language, activeWorkflows, env) {
   return panoptes
     .get('/translations', {
+      env,
       fields: 'strings,translated_id',
       language,
       'translated_id': activeWorkflows.join(','),
@@ -26,9 +28,10 @@ function fetchDisplayNames (language, activeWorkflows) {
     .then(createDisplayNamesMap)
 }
 
-async function fetchPreviewImage (subjectSet) {
+async function fetchPreviewImage (subjectSet, env) {
   const response = await panoptes
     .get('/set_member_subjects', {
+      env,
       subject_set_id: subjectSet.id,
       include: 'subject',
       page_size: 1
@@ -37,10 +40,10 @@ async function fetchPreviewImage (subjectSet) {
   subjectSet.subjects = linked.subjects
 }
 
-async function fetchWorkflowsHelper (language = 'en', activeWorkflows, defaultWorkflow) {
-  const { subjectSets, workflows } = await fetchWorkflowData(activeWorkflows)
+async function fetchWorkflowsHelper (language = 'en', activeWorkflows, defaultWorkflow, env) {
+  const { subjectSets, workflows } = await fetchWorkflowData(activeWorkflows, env)
   const workflowIds = workflows.map(workflow => workflow.id)
-  const displayNames = await fetchDisplayNames(language, workflowIds)
+  const displayNames = await fetchDisplayNames(language, workflowIds, env)
 
   return workflows.map(workflow => {
     const isDefault = workflows.length === 1 || workflow.id === defaultWorkflow
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.spec.js b/packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.spec.js
similarity index 100%
rename from packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.spec.js
rename to packages/app-project/src/helpers/fetchWorkflowsHelper/fetchWorkflowsHelper.spec.js
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/index.js b/packages/app-project/src/helpers/fetchWorkflowsHelper/index.js
similarity index 100%
rename from packages/app-project/src/screens/ProjectHomePage/components/Hero/helpers/fetchWorkflowsHelper/index.js
rename to packages/app-project/src/helpers/fetchWorkflowsHelper/index.js
diff --git a/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
index 760fd4a49d..566f80c1eb 100644
--- a/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
+++ b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.js
@@ -1,4 +1,5 @@
 import getCookie from '@helpers/getCookie'
+import fetchWorkflowsHelper from '@helpers/fetchWorkflowsHelper'
 import initStore from '@stores'
 import { getSnapshot } from 'mobx-state-tree'
 
@@ -25,6 +26,10 @@ export default async function getDefaultPageProps({ params, query, req, res }) {
 
   const { project, ui } = getSnapshot(store)
   const { headers, connection } = req
+  const { env } = query
+  const language = project.primary_language
+  const { active_workflows, default_workflow } = project.links
+  const workflows = await fetchWorkflowsHelper(language, active_workflows, default_workflow, env)
   const props = {
     host: generateHostUrl(headers, connection),
     initialState: {
@@ -32,7 +37,13 @@ export default async function getDefaultPageProps({ params, query, req, res }) {
       ui
     },
     isServer: true,
-    query
+    query,
+    workflows
+  }
+
+  const workflowID = store.project.defaultWorkflow
+  if (workflowID) {
+    props.workflowID = workflowID
   }
 
   return { props }
diff --git a/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.spec.js b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.spec.js
new file mode 100644
index 0000000000..b4c796260e
--- /dev/null
+++ b/packages/app-project/src/helpers/getDefaultPageProps/getDefaultPageProps.spec.js
@@ -0,0 +1,173 @@
+import nock from 'nock'
+
+import getDefaultPageProps from './'
+
+describe('Components > ProjectHomePage > getDefaultPageProps', function () {
+  const PROJECT = {
+    id: '1',
+    default_workflow: '1',
+    primary_language: 'en',
+    slug: 'test-owner/test-project',
+    links: {
+      active_workflows: ['1']
+    }
+  }
+
+  const TRANSLATION = {
+    translated_id: 1,
+    strings: {
+      display_name: 'Foo'
+    }
+  }
+
+  const WORKFLOW = {
+    id: '1',
+    completeness: 0.4,
+    grouped: false,
+    links: {
+      subject_sets: ['1', '2', '3']
+    }
+  }
+
+  function subjectSet(id) {
+    return {
+      id,
+      display_name: `test set ${id}`,
+      set_member_subjects_count: 10
+    }
+  }
+
+  describe('with the staging API', function () {
+    before(function () {
+      const slug = 'test-owner/test-project'
+      const scope = nock('https://panoptes-staging.zooniverse.org/api')
+        .get('/projects')
+        .query(query => query.slug === slug)
+        .reply(200, {
+          projects: [PROJECT]
+        })
+        .get('/translations')
+        .query(query => {
+          return query.translated_type === 'workflow'
+          && query.translated_id === '1'
+          && query.language === 'en'
+        })
+        .reply(200, {
+          translations: [TRANSLATION]
+        })
+        .get('/workflows')
+        .query(query => query.id === '1')
+        .reply(200, {
+          workflows: [WORKFLOW],
+          linked: {
+            subject_sets: [
+              subjectSet('1'),
+              subjectSet('2'),
+              subjectSet('3')
+            ]
+          }
+        })
+    })
+
+    it('should return the project\'s active workflows', async function () {
+      const params = {
+        owner: 'test-owner',
+        project: 'test-project'
+      }
+      const query = {
+        env: 'staging'
+      }
+      const req = {
+        connection: {
+          encrypted: true
+        },
+        headers: {
+          host: 'www.zooniverse.org'
+        }
+      }
+      const res = {}
+      const { props } = await getDefaultPageProps({ params, query, req, res })
+      expect(props.workflows).to.deep.equal([
+        {
+          completeness: 0.4,
+          default: true,
+          grouped: false,
+          id: '1',
+          displayName: 'Foo',
+          subjectSets: [
+            subjectSet('1'),
+            subjectSet('2'),
+            subjectSet('3')
+          ]
+        }
+      ])
+    })
+  })
+
+  describe('with the production API', function () {
+    before(function () {
+      const slug = 'test-owner/test-project'
+      const scope = nock('https://www.zooniverse.org/api')
+        .get('/projects')
+        .query(query => query.slug === slug)
+        .reply(200, {
+          projects: [PROJECT]
+        })
+        .get('/translations')
+        .query(query => {
+          return query.translated_type === 'workflow'
+          && query.translated_id === '1'
+          && query.language === 'en'
+        })
+        .reply(200, {
+          translations: [TRANSLATION]
+        })
+        .get('/workflows')
+        .query(query => query.id === '1')
+        .reply(200, {
+          workflows: [WORKFLOW],
+          linked: {
+            subject_sets: [
+              subjectSet('1'),
+              subjectSet('2'),
+              subjectSet('3')
+            ]
+          }
+        })
+    })
+
+    it('should return the project\'s active workflows', async function () {
+      const params = {
+        owner: 'test-owner',
+        project: 'test-project'
+      }
+      const query = {
+        env: 'production'
+      }
+      const req = {
+        connection: {
+          encrypted: true
+        },
+        headers: {
+          host: 'www.zooniverse.org'
+        }
+      }
+      const res = {}
+      const { props } = await getDefaultPageProps({ params, query, req, res })
+      expect(props.workflows).to.deep.equal([
+        {
+          completeness: 0.4,
+          default: true,
+          grouped: false,
+          id: '1',
+          displayName: 'Foo',
+          subjectSets: [
+            subjectSet('1'),
+            subjectSet('2'),
+            subjectSet('3')
+          ]
+        }
+      ])
+    })
+  })
+})
\ No newline at end of file
diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js
index 4c86e0fefc..c596d7f0d3 100644
--- a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js
+++ b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePage.js
@@ -1,6 +1,6 @@
 import { Box, Grid } from 'grommet'
 import React from 'react'
-import { bool } from 'prop-types'
+import { arrayOf, bool, shape, string } from 'prop-types'
 import styled from 'styled-components'
 import { ZooFooter } from '@zooniverse/react-components'
 
@@ -24,14 +24,17 @@ const RemainingHeightBox = styled(Box)`
   flex-grow: 1;
 `
 
-function ProjectHomePage ({ inBeta }) {
+function ProjectHomePage ({
+  inBeta,
+  workflows
+}) {
   return (
     <Box border={(inBeta) ? { color: 'brand', size: 'medium' } : false}>
       <Media at='default'>
         <ZooHeaderWrapper />
         <ProjectHeader />
         <Announcements />
-        <Hero />
+        <Hero workflows={workflows} />
         <Box margin='small' gap='small'>
           <ThemeModeToggle />
           <ZooniverseTalk />
@@ -48,7 +51,7 @@ function ProjectHomePage ({ inBeta }) {
           <ProjectHeader />
           <Announcements />
           <RemainingHeightBox>
-            <Hero isWide={true} />
+            <Hero workflows={workflows} isWide={true} />
           </RemainingHeightBox>
         </FullHeightBox>
         <Box
@@ -76,11 +79,15 @@ function ProjectHomePage ({ inBeta }) {
 }
 
 ProjectHomePage.defaultProps = {
-  inBeta: false
+  inBeta: false,
+  workflows: []
 }
 
 ProjectHomePage.propTypes = {
-  inBeta: bool
+  inBeta: bool,
+  workflows: arrayOf(shape({
+    id: string.isRequired
+  }))
 }
 
 export default ProjectHomePage
diff --git a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePageContainer.js b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePageContainer.js
index fe0deac88f..1a23fc920a 100644
--- a/packages/app-project/src/screens/ProjectHomePage/ProjectHomePageContainer.js
+++ b/packages/app-project/src/screens/ProjectHomePage/ProjectHomePageContainer.js
@@ -1,5 +1,5 @@
 import { inject, observer } from 'mobx-react'
-import { bool } from 'prop-types'
+import { arrayOf, bool, shape, string } from 'prop-types'
 import React, { Component } from 'react'
 
 import ProjectHomePage from './ProjectHomePage'
@@ -22,11 +22,15 @@ class ProjectHomePageContainer extends Component {
 }
 
 ProjectHomePageContainer.defaultProps = {
-  inBeta: false
+  inBeta: false,
+  workflows: []
 }
 
 ProjectHomePageContainer.propTypes = {
-  inBeta: bool
+  inBeta: bool,
+  workflows: arrayOf(shape({
+    id: string.isRequired
+  }))
 }
 
 export default ProjectHomePageContainer
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.js
new file mode 100644
index 0000000000..021beb7a9c
--- /dev/null
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.js
@@ -0,0 +1,26 @@
+import { arrayOf, bool, shape, string } from 'prop-types'
+import React, { Component } from 'react'
+import asyncStates from '@zooniverse/async-states'
+
+import WideLayout from './components/WideLayout'
+import NarrowLayout from './components/NarrowLayout'
+
+function Hero (props) {
+  const { isWide, workflows } = props
+  return isWide
+    ? <WideLayout workflows={workflows} />
+    : <NarrowLayout workflows={workflows} />
+}
+
+Hero.propTypes = {
+  isWide: bool,
+  workflows: arrayOf(shape({
+    id: string.isRequired
+  }))
+}
+
+Hero.defaultProps = {
+  isWide: false,
+  workflows: []
+}
+export default Hero
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.spec.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.spec.js
new file mode 100644
index 0000000000..cb52059d54
--- /dev/null
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.spec.js
@@ -0,0 +1,82 @@
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+import Hero from './Hero'
+import NarrowLayout from './components/NarrowLayout'
+import WideLayout from './components/WideLayout'
+
+const WORKFLOWS = [
+  {
+    id: '1',
+    completeness: 0.4,
+    default: true,
+    displayName: 'Foo',
+    grouped: false,
+    links: {
+      subject_sets: ['1', '2', '3']
+    },
+    subjectSets: [
+      subjectSet('1'),
+      subjectSet('2'),
+      subjectSet('3')
+    ]
+  }
+]
+
+function subjectSet(id) {
+  return {
+    id,
+    display_name: `test set ${id}`,
+    set_member_subjects_count: 10
+  }
+}
+
+describe('Component > Hero', function () {
+  describe('general behaviour', function () {
+    let wrapper
+
+    before(function () {
+      wrapper = shallow(<Hero workflows={WORKFLOWS} />)
+    })
+
+    it('should render without crashing', function () {
+      expect(wrapper).to.be.ok()
+    })
+
+    it('should render the `NarrowLayout` by default', function () {
+      expect(wrapper.find(NarrowLayout)).to.have.lengthOf(1)
+    })
+
+    it('should render the `WideLayout` with the appropriate prop', function () {
+      wrapper.setProps({ isWide: true })
+      expect(wrapper.find(WideLayout)).to.have.lengthOf(1)
+    })
+  })
+
+  describe('workflows', function () {
+    let wrapper
+    let componentWrapper
+
+    it('should pass down the workflow data', async function () {
+      wrapper = shallow(<Hero workflows={WORKFLOWS} />)
+      componentWrapper = wrapper.first()
+      expect(componentWrapper.prop('workflows')).to.deep.equal([
+        {
+          completeness: 0.4,
+          default: true,
+          grouped: false,
+          id: '1',
+          displayName: 'Foo',
+          links: {
+            subject_sets: ['1', '2', '3']
+          },
+          subjectSets: [
+            subjectSet('1'),
+            subjectSet('2'),
+            subjectSet('3')
+          ]
+        }
+      ])
+    })
+  })
+})
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js
index 39869d1e16..81688e5b97 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/Hero.stories.js
@@ -11,8 +11,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import sinon from 'sinon'
 
-import NarrowLayout from './components/NarrowLayout'
-import WideLayout from './components/WideLayout'
+import HeroContainer from './'
 
 const mockStore = {
   project: {
@@ -27,6 +26,9 @@ const mockStore = {
       2) "Location": Smartphone-friendly, series of questions on the geographic location of the nest.  
       3) "Nest Attempt: Smartphone-friendly, for data-entry lovers to record nest attempt data on cards.  
       4) "Comments": For transcription lovers, we ask you to transcribe all the written comments on the cards.`
+  },
+  user: {
+    loadingState: asyncStates.success
   }
 }
 
@@ -87,69 +89,42 @@ function MockProjectContext({ children, theme }) {
     </MediaContextProvider>
   )
 }
-const WORKFLOWS = {
-  loading: asyncStates.success,
-  data: [
-    {
-      completeness: 0.65,
-      default: false,
-      displayName: 'The Family and the Fishing Net',
-      id: '12345'
-    },
-    {
-      completeness: 0,
-      default: false,
-      displayName: 'Games Without Frontiers',
-      id: '7890'
-    },
-    {
-      completeness: 0.99,
-      default: false,
-      displayName: 'Shock The Monkey',
-      id: '5678'
-    }
-  ]
-}
-const WORKFLOWS_LOADING = {
-  loading: asyncStates.loading,
-  data: null
-}
-const WORKFLOWS_ERROR = {
-  loading: asyncStates.error,
-  data: null
-}
+const WORKFLOWS = [
+  {
+    completeness: 0.65,
+    default: false,
+    displayName: 'The Family and the Fishing Net',
+    id: '12345'
+  },
+  {
+    completeness: 0,
+    default: false,
+    displayName: 'Games Without Frontiers',
+    id: '7890'
+  },
+  {
+    completeness: 0.99,
+    default: false,
+    displayName: 'Shock The Monkey',
+    id: '5678'
+  }
+]
+
 storiesOf('Project App / Screens / Project Home / Hero', module)
   .addDecorator(withKnobs)
   .addParameters({ viewport: { defaultViewport: 'responsive' }})
   .add('default', () => (
     <MockProjectContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
-      <WideLayout
-        screenSize='default'
+      <HeroContainer
+        isWide
         workflows={WORKFLOWS}
       />
     </MockProjectContext>
   ))
   .add('small screen', () => (
     <MockProjectContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
-      <NarrowLayout
-        screenSize='small'
+      <HeroContainer
         workflows={WORKFLOWS}
       />
     </MockProjectContext>
   ), { viewport: { defaultViewport: 'iphone5' }})
-  .add('loading', () => (
-    <MockProjectContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
-      <WideLayout
-        screenSize='default'
-        workflows={WORKFLOWS_LOADING}
-      />
-    </MockProjectContext>
-  ))
-  .add('error', () => (
-    <MockProjectContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
-      <WideLayout
-        screenSize='default'
-        workflows={WORKFLOWS_ERROR}
-      />
-    </MockProjectContext>
-  ))
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.js
deleted file mode 100644
index 894137cefc..0000000000
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { inject, observer } from 'mobx-react'
-import { arrayOf, string } from 'prop-types'
-import React, { Component } from 'react'
-import asyncStates from '@zooniverse/async-states'
-
-import WideLayout from './components/WideLayout'
-import NarrowLayout from './components/NarrowLayout'
-import fetchWorkflowsHelper from './helpers/fetchWorkflowsHelper'
-
-function storeMapper (stores) {
-  return {
-    activeWorkflows: stores.store.project.links['active_workflows'],
-    defaultWorkflow: stores.store.project.configuration['default_workflow']
-  }
-}
-
-class HeroContainer extends Component {
-  constructor () {
-    super()
-    this.state = {
-      workflows: {
-        loading: asyncStates.initialized,
-        data: []
-      }
-    }
-  }
-
-  componentDidMount () {
-    return this.fetchWorkflows()
-  }
-
-  async fetchWorkflows () {
-    this.setState(state => ({
-      workflows: {
-        ...state.workflows,
-        loading: asyncStates.loading
-      }
-    }))
-    try {
-      const { activeWorkflows, defaultWorkflow, language } = this.props
-      const workflows = await fetchWorkflowsHelper(language, activeWorkflows, defaultWorkflow)
-      this.setState({
-        workflows: {
-          loading: asyncStates.success,
-          data: workflows
-        }
-      })
-    } catch (error) {
-      if (process.browser) {
-        console.error(error)
-      }
-      this.setState(state => ({
-        workflows: {
-          ...state.workflows,
-          loading: asyncStates.error
-        }
-      }))
-    }
-  }
-
-  render () {
-    const { workflows } = this.state
-    const { isWide } = this.props
-    return isWide
-      ? <WideLayout workflows={workflows} />
-      : <NarrowLayout workflows={workflows} />
-
-  }
-}
-
-HeroContainer.propTypes = {
-  activeWorkflows: arrayOf(string),
-  defaultWorkflow: string,
-  language: string
-}
-
-HeroContainer.defaultProps = {
-  activeWorkflows: [],
-  defaultWorkflow: '',
-  language: 'en'
-}
-
-@inject(storeMapper)
-@observer
-class DecoratedHeroContainer extends HeroContainer { }
-
-export {
-  DecoratedHeroContainer as default,
-  HeroContainer
-}
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.spec.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.spec.js
deleted file mode 100644
index 42728dad5c..0000000000
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/HeroContainer.spec.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { shallow } from 'enzyme'
-import nock from 'nock'
-import sinon from 'sinon'
-
-import { HeroContainer } from './HeroContainer'
-import NarrowLayout from './components/NarrowLayout'
-import WideLayout from './components/WideLayout'
-
-const WORKFLOWS = [
-  {
-    id: '1',
-    completeness: 0.4,
-    grouped: false,
-    links: {
-      subject_sets: ['1', '2', '3']
-    }
-  }
-]
-
-// `translated_id` is a number because of a bug in the translations API :(
-const TRANSLATIONS = [
-  {
-    translated_id: 1,
-    strings: {
-      display_name: 'Foo'
-    }
-  }
-]
-
-function subjectSet(id) {
-  return {
-    id,
-    display_name: `test set ${id}`,
-    set_member_subjects_count: 10
-  }
-}
-
-describe('Component > HeroContainer', function () {
-  describe('general behaviour', function () {
-    let scope
-    let wrapper
-
-    before(function () {
-      scope = nock('https://panoptes-staging.zooniverse.org/api')
-        .get('/translations')
-        .query(true)
-        .reply(200, {
-          translations: TRANSLATIONS
-        })
-        .get('/workflows')
-        .query(true)
-        .reply(200, {
-          workflows: WORKFLOWS,
-          linked: { 
-            subject_sets: [
-              subjectSet('1'),
-              subjectSet('2'),
-              subjectSet('3')
-            ]
-          }
-        })
-      wrapper = shallow(<HeroContainer activeWorkflows={['1']} />)
-    })
-
-    after(function () {
-      nock.cleanAll()
-    })
-
-    it('should render without crashing', function () {
-      expect(wrapper).to.be.ok()
-    })
-
-    it('should render the `NarrowLayout` by default', function () {
-      expect(wrapper.find(NarrowLayout)).to.have.lengthOf(1)
-    })
-
-    it('should render the `WideLayout` with the appropriate prop', function () {
-      wrapper.setProps({ isWide: true })
-      expect(wrapper.find(WideLayout)).to.have.lengthOf(1)
-    })
-  })
-
-  describe('loading state', function () {
-    let scope
-    let wrapper
-    let componentWrapper
-
-    before(function () {
-      scope = nock('https://panoptes-staging.zooniverse.org/api')
-        .get('/translations')
-        .query(true)
-        .reply(200, {
-          translations: TRANSLATIONS
-        })
-        .get('/workflows')
-        .query(true)
-        .reply(200, {
-          workflows: WORKFLOWS,
-          linked: { 
-            subject_sets: [
-              subjectSet('1'),
-              subjectSet('2'),
-              subjectSet('3')
-            ]
-          }
-        })
-    })
-
-    after(function () {
-      nock.cleanAll()
-    })
-
-    it('should pass down the correct props', function () {
-      wrapper = shallow(<HeroContainer activeWorkflows={['1']} />)
-      componentWrapper = wrapper.first()
-      expect(componentWrapper.prop('workflows')).to.deep.equal({
-        loading: 'loading',
-        data: []
-      })
-    })
-  })
-
-  describe('success state', function () {
-    let scope
-    let wrapper
-    let componentWrapper
-    let fetchWorkflowsSpy
-
-    before(function () {
-      scope = nock('https://panoptes-staging.zooniverse.org/api')
-        .get('/translations')
-        .query(true)
-        .reply(200, {
-          translations: TRANSLATIONS
-        })
-        .get('/workflows')
-        .query(true)
-        .reply(200, {
-          workflows: WORKFLOWS,
-          linked: { 
-            subject_sets: [
-              subjectSet('1'),
-              subjectSet('2'),
-              subjectSet('3')
-            ]
-          }
-        })
-      fetchWorkflowsSpy = sinon.spy(HeroContainer.prototype, 'fetchWorkflows')
-    })
-
-    after(function () {
-      nock.cleanAll()
-      fetchWorkflowsSpy.restore()
-    })
-
-    it('should pass down the correct props', async function () {
-      wrapper = shallow(<HeroContainer activeWorkflows={['1']} />)
-      await fetchWorkflowsSpy.returnValues[0]
-      componentWrapper = wrapper.first()
-      expect(componentWrapper.prop('workflows')).to.deep.equal({
-        loading: 'success',
-        data: [
-          {
-            completeness: 0.4,
-            default: true,
-            grouped: false,
-            id: '1',
-            displayName: 'Foo',
-            subjectSets: [
-              subjectSet('1'),
-              subjectSet('2'),
-              subjectSet('3')
-            ]
-          }
-        ]
-      })
-    })
-  })
-
-  describe('error state', function () {
-    let scope
-    let wrapper
-    let componentWrapper
-    let fetchWorkflowsSpy
-
-    before(function () {
-      scope = nock('https://panoptes-staging.zooniverse.org/api')
-        .get('/translations')
-        .query(true)
-        .reply(200, {
-          translations: TRANSLATIONS
-        })
-        .get('/workflows')
-        .query(true)
-        .replyWithError('something awful happened')
-      fetchWorkflowsSpy = sinon.spy(HeroContainer.prototype, 'fetchWorkflows')
-    })
-
-    after(function () {
-      nock.cleanAll()
-      fetchWorkflowsSpy.restore()
-    })
-
-    it('should pass down the correct props', async function () {
-      wrapper = shallow(<HeroContainer activeWorkflows={['1']} />)
-      await fetchWorkflowsSpy.returnValues[0]
-      componentWrapper = wrapper.first()
-      expect(componentWrapper.prop('workflows')).to.deep.equal({
-        loading: 'error',
-        data: []
-      })
-    })
-  })
-})
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.js
index db2c6c94f5..18fc972391 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.js
@@ -17,7 +17,7 @@ const markdownzComponents = {
 }
 
 function WorkflowSelector (props) {
-  const { workflows } = props
+  const { userReadyState, workflows } = props
   const loaderColor = props.theme.global.colors.brand
   const workflowDescription = props.workflowDescription || counterpart('WorkflowSelector.message')
 
@@ -30,7 +30,7 @@ function WorkflowSelector (props) {
         {workflowDescription}
       </Markdownz>
 
-      {(workflows.loading === asyncStates.error) && (
+      {(userReadyState === asyncStates.error) && (
         <Box
           align='center'
           justify='center'
@@ -40,7 +40,7 @@ function WorkflowSelector (props) {
         </Box>
       )}
 
-      {(workflows.loading === asyncStates.success) && (
+      {(userReadyState === asyncStates.success) && (
         <Box
           alignSelf='start'
           fill='horizontal'
@@ -49,11 +49,11 @@ function WorkflowSelector (props) {
           width={{ max: 'medium' }}
         >
 
-          {(workflows.data.length > 0) && workflows.data.map(workflow =>
+          {(workflows.length > 0) && workflows.map(workflow =>
             <WorkflowSelectButton key={workflow.id} workflow={workflow} />
           )}
 
-          {(workflows.data.length === 0) && (
+          {(workflows.length === 0) && (
             <Box background='accent-4' pad='xsmall' width={{ max: 'medium' }}>
               <Text size='small' textAlign='center'>
                 {counterpart('WorkflowSelector.noWorkflows')}
@@ -64,7 +64,7 @@ function WorkflowSelector (props) {
         </Box>
       )}
 
-      {(![asyncStates.success, asyncStates.error].includes(workflows.loading)) && (
+      {(![asyncStates.success, asyncStates.error].includes(userReadyState)) && (
         <Box align='center' justify='center' margin={{ top: 'small' }}>
           <Box height='xxsmall' width='xxsmall'>
             <Bars
@@ -81,12 +81,11 @@ function WorkflowSelector (props) {
 }
 
 WorkflowSelector.propTypes = {
+  userReadyState: string,
   workflowDescription: string,
-  workflows: shape({
-    data: arrayOf(shape({
+  workflows: arrayOf(shape({
       id: string.isRequired
     }).isRequired).isRequired
-  }).isRequired
 }
 
 export default withTheme(WorkflowSelector)
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.stories.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.stories.js
index 6fda328634..09710cc29e 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.stories.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelector.stories.js
@@ -8,7 +8,7 @@ import * as nextRouter from 'next/router'
 import React from 'react'
 import sinon from 'sinon'
 
-import WorkflowSelector from './'
+import WorkflowSelector from './WorkflowSelector'
 
 const store = {
   project: {
@@ -26,37 +26,26 @@ const store = {
   }
 }
 
-const WORKFLOWS = {
-  loading: asyncStates.success,
-  data: [
-    {
-      completeness: 0.65,
-      default: false,
-      displayName: 'The Family and the Fishing Net',
-      id: '12345'
-    },
-    {
-      completeness: 0,
-      default: false,
-      displayName: 'Games Without Frontiers',
-      id: '7890'
-    },
-    {
-      completeness: 0.99,
-      default: false,
-      displayName: 'Shock The Monkey',
-      id: '5678'
-    }
-  ]
-}
-const WORKFLOWS_LOADING = {
-  loading: asyncStates.loading,
-  data: null
-}
-const WORKFLOWS_ERROR = {
-  loading: asyncStates.error,
-  data: null
-}
+const WORKFLOWS = [
+  {
+    completeness: 0.65,
+    default: false,
+    displayName: 'The Family and the Fishing Net',
+    id: '12345'
+  },
+  {
+    completeness: 0,
+    default: false,
+    displayName: 'Games Without Frontiers',
+    id: '7890'
+  },
+  {
+    completeness: 0.99,
+    default: false,
+    displayName: 'Shock The Monkey',
+    id: '5678'
+  }
+]
 
 function StoryContext (props) {
   const { children, theme } = props
@@ -82,6 +71,7 @@ storiesOf('Project App / Screens / Project Home / Workflow Selector', module)
   .add('default', () => (
     <StoryContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
       <WorkflowSelector
+        loadingState={asyncStates.success}
         workflows={WORKFLOWS}
       />
     </StoryContext>
@@ -89,7 +79,8 @@ storiesOf('Project App / Screens / Project Home / Workflow Selector', module)
   .add('loading', () => (
     <StoryContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
       <WorkflowSelector
-        workflows={WORKFLOWS_LOADING}
+        loadingState={asyncStates.loading}
+        workflows={WORKFLOWS}
       />
     </StoryContext>
 
@@ -97,7 +88,8 @@ storiesOf('Project App / Screens / Project Home / Workflow Selector', module)
   .add('error', () => (
     <StoryContext theme={{ ...zooTheme, dark: boolean('Dark theme', false) }}>
       <WorkflowSelector
-        workflows={WORKFLOWS_ERROR}
+        loadingState={asyncStates.error}
+        workflows={WORKFLOWS}
       />
     </StoryContext>
   ))
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.js
index c4149e3b15..693fd5b2eb 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.js
@@ -4,21 +4,26 @@ import React, { Component } from 'react'
 
 import WorkflowSelector from './WorkflowSelector'
 
-function storeMapper (stores) {
+function storeMapper(stores) {
+  const { project, user } = stores.store
   return {
-    workflowDescription: stores.store.project.workflow_description
+    userReadyState: user.loadingState,
+    workflowDescription: project.workflow_description
   }
 }
 
 class WorkflowSelectorContainer extends Component {
   render () {
     return (
-      <WorkflowSelector {...this.props} />
+      <WorkflowSelector
+        {...this.props}
+      />
     )
   }
 }
 
 WorkflowSelectorContainer.propTypes = {
+  userReadyState: string,
   workflowDescription: string
 }
 
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.spec.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.spec.js
index 509a8f9df7..89bfa4a9d8 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.spec.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowSelector/WorkflowSelectorContainer.spec.js
@@ -11,7 +11,12 @@ describe('Component > Hero > WorkflowSelector > WorkflowSelectorContainer', func
   let componentWrapper
 
   before(function () {
-    wrapper = shallow(<WorkflowSelectorContainer workflowDescription={WORKFLOW_DESCRIPTION} />)
+    wrapper = shallow(
+      <WorkflowSelectorContainer
+        userReadyState='success'
+        workflowDescription={WORKFLOW_DESCRIPTION}
+      />
+    )
     componentWrapper = wrapper.find(WorkflowSelector)
   })
 
@@ -26,4 +31,8 @@ describe('Component > Hero > WorkflowSelector > WorkflowSelectorContainer', func
   it('should pass down the `workflowDescription` prop', function () {
     expect(componentWrapper.prop('workflowDescription')).to.equal(WORKFLOW_DESCRIPTION)
   })
+
+  it('should pass down the user loading state', function () {
+    expect(componentWrapper.prop('userReadyState')).to.equal('success')
+  })
 })
diff --git a/packages/app-project/src/screens/ProjectHomePage/components/Hero/index.js b/packages/app-project/src/screens/ProjectHomePage/components/Hero/index.js
index e99e7dd918..b08fa5ac8e 100644
--- a/packages/app-project/src/screens/ProjectHomePage/components/Hero/index.js
+++ b/packages/app-project/src/screens/ProjectHomePage/components/Hero/index.js
@@ -1 +1 @@
-export { default } from './HeroContainer'
+export { default } from './Hero'
diff --git a/packages/app-project/src/screens/ProjectHomePage/index.js b/packages/app-project/src/screens/ProjectHomePage/index.js
index 7f5595aaba..3993918bea 100644
--- a/packages/app-project/src/screens/ProjectHomePage/index.js
+++ b/packages/app-project/src/screens/ProjectHomePage/index.js
@@ -1 +1,2 @@
 export { default } from './ProjectHomePageContainer'
+