diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index 79013dbdcd..b956eca6af 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -112,7 +112,8 @@ module.exports = {
         '../react/MuiCozyTheme/Menus',
         '../react/MuiCozyTheme/List',
         '../react/MuiCozyTheme/RaisedList',
-        '../react/MuiCozyTheme/ExpansionPanel'
+        '../react/MuiCozyTheme/ExpansionPanel',
+        '../react/MuiCozyTheme/Grid'
       ]
     }
   ],
diff --git a/react/MuiCozyTheme/Grid/Readme.md b/react/MuiCozyTheme/Grid/Readme.md
new file mode 100644
index 0000000000..6ce3474d8a
--- /dev/null
+++ b/react/MuiCozyTheme/Grid/Readme.md
@@ -0,0 +1,71 @@
+# Grid
+
+Displays a Grid of items
+
+### Default usage
+
+```
+const MuiCozyTheme = require('..').default;
+const Grid = require('.').default;
+const Card = require('../../Card').default;
+
+<MuiCozyTheme>
+    <Grid container spacing={24}>
+        <Grid item xs={12}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+      </Grid>
+</MuiCozyTheme>
+```
+
+### Responsive usage
+
+```
+const MuiCozyTheme = require('..').default;
+const Grid = require('.').default;
+const Card = require('../../Card').default;
+
+<MuiCozyTheme>
+    <Grid container spacing={8}>
+        <Grid item xs={12}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+       <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+      </Grid>
+</MuiCozyTheme>
+```
diff --git a/react/MuiCozyTheme/Grid/index.js b/react/MuiCozyTheme/Grid/index.js
new file mode 100644
index 0000000000..33094b288e
--- /dev/null
+++ b/react/MuiCozyTheme/Grid/index.js
@@ -0,0 +1,3 @@
+import Grid from '@material-ui/core/Grid'
+
+export default Grid
diff --git a/react/MuiCozyTheme/theme.js b/react/MuiCozyTheme/theme.js
index 5f04bf4ad1..d49e3362ce 100644
--- a/react/MuiCozyTheme/theme.js
+++ b/react/MuiCozyTheme/theme.js
@@ -173,6 +173,25 @@ export const theme = createMuiTheme({
         paddingRight: 24
       }
     }
+  },
+  breakpoints: {
+    // Define custom breakpoint values.
+    // These will apply to Material-UI components that use responsive
+    // breakpoints, such as `Grid` and `Hidden`. You can also use the
+    // theme breakpoint functions `up`, `down`, and `between` to create
+    // media queries for these breakpoints
+    // xs = all
+    // sm = tiny
+    // md = small
+    // lg = medium
+    // xl = large
+    values: {
+      xs: 0,
+      sm: 480,
+      md: 768,
+      lg: 1023,
+      xl: 1200
+    }
   }
 })
 
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index f963f46804..b426e897de 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -3295,6 +3295,10 @@ exports[`MuiCozyTheme/ExpansionPanel should render examples: MuiCozyTheme/Expans
 
 exports[`MuiCozyTheme/ExpansionPanel should render examples: MuiCozyTheme/ExpansionPanel 2`] = `"<div></div>"`;
 
+exports[`MuiCozyTheme/Grid should render examples: MuiCozyTheme/Grid 1`] = `"<div></div>"`;
+
+exports[`MuiCozyTheme/Grid should render examples: MuiCozyTheme/Grid 2`] = `"<div></div>"`;
+
 exports[`MuiCozyTheme/List should render examples: MuiCozyTheme/List 1`] = `"<div></div>"`;
 
 exports[`MuiCozyTheme/List should render examples: MuiCozyTheme/List 2`] = `"<div></div>"`;
diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
index 9c41739193..13d20d46ca 100644
--- a/react/examples.spec.jsx
+++ b/react/examples.spec.jsx
@@ -41,6 +41,7 @@ testComponent('MuiCozyTheme/Buttons')
 testComponent('MuiCozyTheme/ExpansionPanel')
 testComponent('MuiCozyTheme/List')
 testComponent('MuiCozyTheme/Menus')
+testComponent('MuiCozyTheme/Grid')
 testComponent('Radio')
 testComponent('SelectBox')
 testComponent('Sidebar')