diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index b048c05bd..df4226800 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -13,7 +13,7 @@ const StyledPeopleContainer = styled.div`
   width: 100%;
 `;
 
-const GET_PEOPLE = gql`
+export const GET_PEOPLE = gql`
   query GetPeople {
     person {
       id
diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx
index 24d4c6803..02ec4f45e 100644
--- a/front/src/pages/people/__stories__/People.stories.tsx
+++ b/front/src/pages/people/__stories__/People.stories.tsx
@@ -1,7 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
-import People from '../People';
+import People, { GET_PEOPLE } from '../People';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../layout/styles/themes';
+import { MockedProvider } from '@apollo/client/testing';
+import { defaultData } from '../default-data';
 
 const component = {
   title: 'People',
@@ -10,10 +12,25 @@ const component = {
 
 export default component;
 
+const mocks = [
+  {
+    request: {
+      query: GET_PEOPLE,
+    },
+    result: {
+      data: {
+        person: defaultData,
+      },
+    },
+  },
+];
+
 export const PeopleDefault = () => (
-  <ThemeProvider theme={lightTheme}>
-    <MemoryRouter>
-      <People />
-    </MemoryRouter>
-  </ThemeProvider>
+  <MockedProvider mocks={mocks}>
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter>
+        <People />
+      </MemoryRouter>
+    </ThemeProvider>
+  </MockedProvider>
 );