diff --git a/CHANGELOG.md b/CHANGELOG.md
index d304e1f83a..1efbaf1d23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.8.19 | [PR#2356](https://github.com/bbc/psammead/pull/2356) Bump @bbc/psammead-story-promo |
 | 1.8.18 | [PR#2356](https://github.com/bbc/psammead/pull/2356) Talos - Bump Dependencies - @bbc/psammead-locales |
 | 1.8.17 | [PR#2359](https://github.com/bbc/psammead/pull/2359) Remove Yeoman script test |
 | 1.8.16 | [PR#2349](https://github.com/bbc/psammead/pull/2349) Try to fix Yeoman test bug |
diff --git a/package-lock.json b/package-lock.json
index 6036aef97f..a9f48c103f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "1.8.18",
+  "version": "1.8.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1448,9 +1448,9 @@
       }
     },
     "@bbc/psammead-story-promo": {
-      "version": "2.7.18",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-story-promo/-/psammead-story-promo-2.7.18.tgz",
-      "integrity": "sha512-txYZdyXCCAXGfvAW1etWwPU6FGQKSyjY/s0pq0jfF1ho/0GHMs9RieQUW8pfba9bib5L+hIeZEW8uykCNle8mQ==",
+      "version": "2.8.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-story-promo/-/psammead-story-promo-2.8.0-alpha.1.tgz",
+      "integrity": "sha512-CrsOR2RPIttDdiOKsbEl9C6fGnOuNAqJIr3418SF1O0EuR0COimkxddwEX3LrK7cejnVwzc2RacaNuZv2KEtYw==",
       "dev": true,
       "requires": {
         "@bbc/gel-foundations": "^3.4.0",
diff --git a/package.json b/package.json
index 7284374b0f..c0963c173b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "1.8.18",
+  "version": "1.8.19",
   "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
   "main": "index.js",
   "private": true,
@@ -60,7 +60,7 @@
     "@bbc/psammead-locales": "^2.23.0",
     "@bbc/psammead-media-indicator": "^2.6.4",
     "@bbc/psammead-paragraph": "^2.2.13",
-    "@bbc/psammead-story-promo": "2.7.18",
+    "@bbc/psammead-story-promo": "2.8.0-alpha.1",
     "@bbc/psammead-storybook-helpers": "^6.0.3",
     "@bbc/psammead-styles": "^4.0.1",
     "@bbc/psammead-test-helpers": "^3.0.2",
diff --git a/packages/components/psammead-grid/CHANGELOG.md b/packages/components/psammead-grid/CHANGELOG.md
index 339c64ab6f..2bf1bd0f15 100644
--- a/packages/components/psammead-grid/CHANGELOG.md
+++ b/packages/components/psammead-grid/CHANGELOG.md
@@ -3,5 +3,6 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.0.0-alpha.2 | [PR#2315](https://github.com/bbc/psammead/pull/2315) Update usage of group0 (0-239px) & fix Storybook stories. |
 | 1.0.0-alpha.1 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.0 | [PR#2213](https://github.com/bbc/psammead/pull/2213) Initial package creation - Grid export. |
diff --git a/packages/components/psammead-grid/README.md b/packages/components/psammead-grid/README.md
index 9cc0b49a22..6c6b0cb1d5 100644
--- a/packages/components/psammead-grid/README.md
+++ b/packages/components/psammead-grid/README.md
@@ -14,8 +14,8 @@ Psammead Grid is a component that you can use to set out column-based layouts us
 <!-- prettier-ignore -->
 | Argument | Type | Required | Default | Example |
 | -------- | ---- | -------- | ------- | ------- |
-| columns | object | yes | N/A | { group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 } |
-| startOffset | object | no | Sets all values as 1 for each of the groups defined in `columns` | { group1: 1, group2: 1, group3: 1, group4: 2, group5: 5 } |
+| columns | object | yes | N/A | { group0: 6, group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 } |
+| startOffset | object | no | Sets all values as 1 for each of the groups defined in `columns` | { group0: 1, group1: 1, group2: 1, group3: 1, group4: 2, group5: 5 } |
 | item | boolean | no | false | `item` |
 | enableGelGutters | boolean | no | false | `enableGelGutter` |
 | enableGelMargins | boolean | no | false | `enableGelMargins` |
diff --git a/packages/components/psammead-grid/package-lock.json b/packages/components/psammead-grid/package-lock.json
index 66ccd84f03..5031563d5b 100644
--- a/packages/components/psammead-grid/package-lock.json
+++ b/packages/components/psammead-grid/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-grid/package.json b/packages/components/psammead-grid/package.json
index 87c422c10c..8c4640d59c 100644
--- a/packages/components/psammead-grid/package.json
+++ b/packages/components/psammead-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "publishConfig": {
     "tag": "alpha"
   },
diff --git a/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
index 2b6f43f4b5..e24c230496 100644
--- a/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
@@ -27,6 +27,30 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c1 {
     display: inline-block;
@@ -64,6 +88,30 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c4 {
     display: inline-block;
@@ -94,10 +142,26 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c5 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -132,10 +196,26 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c6 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -356,6 +436,30 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c1 {
     display: inline-block;
@@ -393,6 +497,30 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c5 {
     display: inline-block;
@@ -423,10 +551,26 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c6 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -461,10 +605,26 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c7 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c7 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c7 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
diff --git a/packages/components/psammead-grid/src/index.stories.jsx b/packages/components/psammead-grid/src/index.stories.jsx
index 6fa05af601..1bd3b4eac1 100644
--- a/packages/components/psammead-grid/src/index.stories.jsx
+++ b/packages/components/psammead-grid/src/index.stories.jsx
@@ -1,26 +1,64 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import notes from '../README.md';
+import { withKnobs } from '@storybook/addon-knobs';
+import { dirDecorator } from '@bbc/psammead-storybook-helpers';
+import Image from '@bbc/psammead-image';
+import MediaIndicator from '@bbc/psammead-media-indicator';
+import StoryPromo, { Headline, Summary, Link } from '@bbc/psammead-story-promo';
+import IndexAlsosContainer from '../../psammead-story-promo/testHelpers/IndexAlsosContainer';
+import relatedItems from '../../psammead-story-promo/testHelpers/relatedItems';
 import Grid from '.';
 import { ExampleImage, ExampleParagraph } from './testHelpers';
+import notes from '../README.md';
 
 storiesOf('Components|Grid', module)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
   .add(
-    'Simple example',
+    'Example with layout change at group4+',
     () => (
-      <Grid columns={{ group3: 6, group4: 8 }}>
-        <Grid item columns={{ group3: 6, group4: 6 }}>
+      <Grid
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 8,
+          group5: 8,
+        }}
+      >
+        <Grid
+          item
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 6,
+          }}
+        >
           <p>
-            Paragraph - for group 3 spans 6/6 columns, for group 4 spans 6/8
-            columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Paragraph - groups 0-3 span 6/6 columns, groups 4+ span 6/8 columns.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
         </Grid>
-        <Grid item columns={{ group3: 6, group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <p>
-            Paragraph - for group 3 spans 6/6 columns, for group 4 spans 2/8
-            columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Paragraph - groups 0-3 span 6/6 columns, groups 4+ span 2/8 columns.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
         </Grid>
       </Grid>
@@ -28,101 +66,186 @@ storiesOf('Components|Grid', module)
     { notes, knobs: { escapeHTML: false } },
   )
   .add(
-    'Simple example using gelGutters and gelMargins',
+    'Example with startOffset',
     () => (
-      <Grid enableGelGutters enableGelMargins columns={{ group4: 8 }}>
-        <Grid item columns={{ group4: 6 }}>
+      <Grid
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 6,
+          group5: 6,
+        }}
+      >
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+          startOffset={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="1" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="2" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="3" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="4" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="5" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="6" />
-        </Grid>
       </Grid>
     ),
-    { notes, knobs: { escapeHTML: false } },
+    { notes },
   )
   .add(
-    'Simple example with using an offset',
+    'Slice layout for 6 or 10 items',
     () => (
       <Grid
-        columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 }}
         enableGelGutters
         enableGelMargins
+        columns={{
+          group0: 8,
+          group1: 8,
+          group2: 8,
+          group3: 8,
+          group4: 8,
+          group5: 8,
+        }}
       >
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 4, group5: 12 }}
-          startOffset={{
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 6,
+          }}
+        >
+          <ExampleParagraph identifier="1" />
+        </Grid>
+        <Grid
+          item
+          columns={{
+            group0: 2,
             group1: 2,
             group2: 2,
             group3: 2,
             group4: 2,
-            group5: 5,
+            group5: 2,
           }}
         >
-          <ExampleImage />
+          <ExampleParagraph identifier="2" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 5, group4: 5, group5: 10 }}
-          startOffset={{
+          columns={{
+            group0: 2,
             group1: 2,
             group2: 2,
             group3: 2,
             group4: 2,
-            group5: 5,
+            group5: 2,
           }}
         >
-          <ExampleParagraph identifier="Paragraph " />
-        </Grid>
-      </Grid>
-    ),
-    { notes, knobs: { escapeHTML: false } },
-  )
-  .add(
-    'Slice layout for 6 or 10 items',
-    () => (
-      <Grid columns={{ group4: 8 }} enableGelGutters enableGelMargins>
-        <Grid item columns={{ group4: 6 }}>
-          <ExampleParagraph identifier="1" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
-          <ExampleParagraph identifier="2" />
-        </Grid>
-        <Grid item columns={{ group4: 2 }}>
           <ExampleParagraph identifier="3" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="4" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="5" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="6" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="7" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="8" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="9" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleParagraph identifier="10" />
         </Grid>
       </Grid>
@@ -133,120 +256,260 @@ storiesOf('Components|Grid', module)
     'Top story slice layout',
     () => (
       <Grid
-        columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 8 }}
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 8,
+          group5: 8,
+        }}
         enableGelGutters
         enableGelMargins
       >
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 8 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 8,
+            group5: 8,
+          }}
           enableGelGutters
         >
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 3, group4: 4, group5: 4 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 3,
+              group4: 4,
+              group5: 4,
+            }}
           >
             <ExampleImage />
           </Grid>
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 3, group4: 4, group5: 4 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 3,
+              group4: 4,
+              group5: 4,
+            }}
           >
             <ExampleParagraph identifier="1" />
           </Grid>
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="2" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="3" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="4" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="5" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="6" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="7" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="8" />
         </Grid>
         <Grid
           item
-          columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleImage />
         </Grid>
         <Grid
           item
-          columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
+          columns={{
+            group0: 4,
+            group1: 4,
+            group2: 4,
+            group3: 4,
+            group4: 2,
+            group5: 2,
+          }}
         >
           <ExampleParagraph identifier="9" />
         </Grid>
@@ -258,94 +521,110 @@ storiesOf('Components|Grid', module)
     'Normal slice layout for 1 or 5 items',
     () => (
       <Grid
-        columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 8 }}
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 8,
+          group5: 8,
+        }}
         enableGelGutters
         enableGelMargins
       >
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 8 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 8,
+            group5: 8,
+          }}
           enableGelGutters
         >
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 3, group4: 4, group5: 4 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 3,
+              group4: 4,
+              group5: 4,
+            }}
           >
             <ExampleImage />
           </Grid>
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 3, group4: 4, group5: 4 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 3,
+              group4: 4,
+              group5: 4,
+            }}
           >
-            <ExampleParagraph identifier="1" />
+            <ExampleParagraph identifier="2" />
           </Grid>
         </Grid>
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 2, group5: 2 }}
-          enableGelGutters
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
-          <Grid
-            item
-            columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
-          >
-            <ExampleImage />
-          </Grid>
-          <Grid
-            item
-            columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
-          >
-            <ExampleParagraph identifier="2" />
-          </Grid>
+          <ExampleImage />
+          <ExampleParagraph identifier="3" />
         </Grid>
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 2, group5: 2 }}
-          enableGelGutters
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
-          <Grid
-            item
-            columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
-          >
-            <ExampleImage />
-          </Grid>
-          <Grid
-            item
-            columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
-          >
-            <ExampleParagraph identifier="3" />
-          </Grid>
+          <ExampleImage />
+          <ExampleParagraph identifier="4" />
         </Grid>
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 2, group5: 2 }}
-          enableGelGutters
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
-          <Grid
-            item
-            columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
-          >
-            <ExampleImage />
-          </Grid>
-          <Grid
-            item
-            columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
-          >
-            <ExampleParagraph identifier="4" />
-          </Grid>
+          <ExampleImage />
+          <ExampleParagraph identifier="5" />
         </Grid>
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 2, group5: 2 }}
-          enableGelGutters
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
         >
-          <Grid
-            item
-            columns={{ group1: 2, group2: 2, group3: 2, group4: 2, group5: 2 }}
-          >
-            <ExampleImage />
-          </Grid>
-          <Grid
-            item
-            columns={{ group1: 4, group2: 4, group3: 4, group4: 2, group5: 2 }}
-          >
-            <ExampleParagraph identifier="5" />
-          </Grid>
+          <ExampleImage />
+          <ExampleParagraph identifier="4" />
         </Grid>
       </Grid>
     ),
@@ -354,48 +633,179 @@ storiesOf('Components|Grid', module)
   .add(
     'Normal slice layout for 2, 6 or 10 items',
     () => (
-      <Grid columns={{ group4: 8 }} enableGelGutters enableGelMargins>
-        <Grid columns={{ group4: 6 }} enableGelGutters>
-          <Grid item columns={{ group4: 2 }}>
+      <Grid
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 8,
+          group5: 8,
+        }}
+        enableGelGutters
+        enableGelMargins
+      >
+        <Grid
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 6,
+          }}
+          enableGelGutters
+        >
+          <Grid
+            item
+            columns={{
+              group0: 2,
+              group1: 2,
+              group2: 2,
+              group3: 2,
+              group4: 2,
+              group5: 2,
+            }}
+          >
             <ExampleParagraph identifier="1" />
           </Grid>
-          <Grid item columns={{ group4: 4 }}>
+          <Grid
+            item
+            columns={{
+              group0: 4,
+              group1: 4,
+              group2: 4,
+              group3: 4,
+              group4: 4,
+              group5: 4,
+            }}
+          >
             <ExampleImage />
           </Grid>
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="2" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="3" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="4" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="5" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="6" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="7" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="8" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="9" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="10" />
         </Grid>
@@ -406,36 +816,127 @@ storiesOf('Components|Grid', module)
   .add(
     'Normal slice layout for 4 or 8 items',
     () => (
-      <Grid columns={{ group4: 8 }} enableGelGutters enableGelMargins>
-        <Grid item columns={{ group4: 2 }}>
+      <Grid
+        enableGelGutters
+        enableGelMargins
+        columns={{
+          group0: 8,
+          group1: 8,
+          group2: 8,
+          group3: 8,
+          group4: 8,
+          group5: 8,
+        }}
+      >
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="1" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="2" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="3" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="4" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="5" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="6" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="7" />
         </Grid>
-        <Grid item columns={{ group4: 2 }}>
+        <Grid
+          item
+          columns={{
+            group0: 2,
+            group1: 2,
+            group2: 2,
+            group3: 2,
+            group4: 2,
+            group5: 2,
+          }}
+        >
           <ExampleImage />
           <ExampleParagraph identifier="8" />
         </Grid>
@@ -443,26 +944,23 @@ storiesOf('Components|Grid', module)
     ),
     { notes, knobs: { escapeHTML: false } },
   )
-  .add(
-    'Single group - group2',
-    () => (
-      <Grid columns={{ group2: 6 }} enableGelMargins enableGelGutters>
-        <Grid item columns={{ group2: 2 }} startOffset={{ group2: 2 }}>
-          <ExampleParagraph identifier="1" />
-        </Grid>
-      </Grid>
-    ),
-    { notes },
-  )
   .add(
     'Grid Article image example',
     () => (
       <Grid
-        columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 }}
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 8,
+          group5: 20,
+        }}
         enableGelMargins
         enableGelGutters
         enableGelMaxWidths
         startOffset={{
+          group0: 1,
           group1: 1,
           group2: 1,
           group3: 1,
@@ -472,37 +970,79 @@ storiesOf('Components|Grid', module)
       >
         <Grid
           item
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 6, group5: 12 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 12,
+          }}
         >
           <ExampleParagraph identifier="1" />
         </Grid>
         <Grid
-          columns={{ group1: 6, group2: 6, group3: 6, group4: 6, group5: 12 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 12,
+          }}
           enableGelGutters
         >
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 6, group4: 6, group5: 12 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 6,
+              group5: 12,
+            }}
           >
             <ExampleParagraph identifier="Landscape image " />
           </Grid>
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 5, group4: 5, group5: 10 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 5,
+              group4: 5,
+              group5: 10,
+            }}
           >
             <ExampleParagraph identifier="Landscape image's caption " />
           </Grid>
         </Grid>
         <Grid
           item
-          columns={{ group1: 6, group2: 6, group3: 5, group4: 5, group5: 10 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 5,
+            group4: 5,
+            group5: 10,
+          }}
         >
           <ExampleParagraph identifier="Paragraph " />
         </Grid>
         {['2', '3', '4', '5', '6', '7', '8', '9', '10'].map(num => (
           <Grid
             item
-            columns={{ group1: 6, group2: 6, group3: 5, group4: 5, group5: 10 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 5,
+              group4: 5,
+              group5: 10,
+            }}
             key={`${num}item`}
           >
             <ExampleParagraph identifier={num} />
@@ -511,4 +1051,198 @@ storiesOf('Components|Grid', module)
       </Grid>
     ),
     { notes },
+  )
+  .add(
+    'Example with Top story and regular promos',
+    ({ service, script, dir }) => {
+      // eslint-disable-next-line react/prop-types
+      const generateStory = ({ topStory, alsoItems = null, mediaType }) => {
+        const MediaIndicatorComponent = type => (
+          <MediaIndicator
+            duration={type !== 'photogallery' && '2:15'}
+            datetime="PT2M15S"
+            service={service}
+            type={type}
+          />
+        );
+
+        const Info = (
+          <>
+            <Headline script={script} topStory={topStory} service={service}>
+              <Link href="https://www.bbc.co.uk/news">
+                Could a computer ever create better art than a human?
+              </Link>
+            </Headline>
+            <Summary script={script} topStory={topStory} service={service}>
+              Lorem Ipsum is simply dummy text of the printing and typesetting
+              industry.
+            </Summary>
+            {topStory && alsoItems && (
+              <IndexAlsosContainer
+                alsoItems={alsoItems}
+                script={script}
+                service={service}
+                dir={dir}
+              />
+            )}
+          </>
+        );
+
+        const Img = (
+          <Image
+            alt="Robert Downey Junior in Iron Man"
+            src="https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg"
+            width="640"
+          />
+        );
+
+        return (
+          <StoryPromo
+            image={Img}
+            info={Info}
+            mediaIndicator={
+              mediaType && MediaIndicatorComponent(mediaType, service)
+            }
+            topStory={topStory}
+          />
+        );
+      };
+
+      return (
+        <Grid
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 8,
+            group5: 8,
+          }}
+          enableGelGutters
+          enableGelMargins
+        >
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 8,
+              group5: 8,
+            }}
+          >
+            {generateStory({
+              topStory: true,
+              alsoItems: relatedItems,
+            })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false, mediaType: 'audio' })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false, mediaType: 'video' })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false, mediaType: 'photogallery' })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false })}
+          </Grid>
+          <Grid
+            item
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 2,
+              group5: 2,
+            }}
+          >
+            {generateStory({ topStory: false })}
+          </Grid>
+        </Grid>
+      );
+    },
+    { notes, knobs: { escapeHTML: false } },
   );
diff --git a/packages/components/psammead-grid/src/index.test.jsx b/packages/components/psammead-grid/src/index.test.jsx
index f61259cb7d..e64a7d7a15 100644
--- a/packages/components/psammead-grid/src/index.test.jsx
+++ b/packages/components/psammead-grid/src/index.test.jsx
@@ -7,29 +7,99 @@ describe('Grid component', () => {
   shouldMatchSnapshot(
     'should render Grid with Grid items',
     <Grid
-      columns={{ group3: 6, group4: 8, group5: 20 }}
-      startOffset={{ group3: 1, group4: 1, group5: 5 }}
       enableGelMargins
       enableGelGutters
+      columns={{
+        group0: 6,
+        group1: 6,
+        group2: 6,
+        group3: 6,
+        group4: 8,
+        group5: 20,
+      }}
+      startOffset={{
+        group0: 1,
+        group1: 1,
+        group2: 1,
+        group3: 1,
+        group4: 1,
+        group5: 5,
+      }}
     >
-      <Grid item columns={{ group3: 6, group4: 6, group5: 12 }}>
+      <Grid
+        item
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 6,
+          group5: 12,
+        }}
+      >
         <ExampleParagraph identifier="1" />
       </Grid>
-      <Grid columns={{ group3: 6, group4: 6, group5: 12 }}>
-        <Grid item columns={{ group3: 6, group4: 6, group5: 12 }}>
+      <Grid
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 6,
+          group5: 12,
+        }}
+      >
+        <Grid
+          item
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 12,
+          }}
+        >
           <ExampleParagraph identifier="Landscape image " />
         </Grid>
-        <Grid item columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}>
+        <Grid
+          item
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 5,
+            group4: 5,
+            group5: 10,
+          }}
+        >
           <ExampleParagraph identifier="Landscape image's caption " />
         </Grid>
       </Grid>
-      <Grid item columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}>
+      <Grid
+        item
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 5,
+          group4: 5,
+          group5: 10,
+        }}
+      >
         <ExampleParagraph identifier="Paragraph " />
       </Grid>
       {['2', '3', '4', '5', '6', '7', '8', '9', '10'].map(num => (
         <Grid
           item
-          columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 5,
+            group4: 5,
+            group5: 10,
+          }}
           key={`${num}item`}
         >
           <ExampleParagraph identifier={num} />
@@ -39,30 +109,96 @@ describe('Grid component', () => {
   );
   shouldMatchSnapshot(
     'should render Grid with Grid items including nested non-Grid Figure element',
-    <Grid columns={{ group3: 6, group4: 8, group5: 20 }} enableGelMargins>
+    <Grid
+      columns={{
+        group0: 6,
+        group1: 6,
+        group2: 6,
+        group3: 6,
+        group4: 8,
+        group5: 20,
+      }}
+      enableGelMargins
+    >
       <Grid
         item
-        columns={{ group3: 6, group4: 6, group5: 12 }}
-        startOffset={{ group3: 1, group4: 1, group5: 5 }}
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 6,
+          group4: 6,
+          group5: 12,
+        }}
+        startOffset={{
+          group0: 1,
+          group1: 1,
+          group2: 1,
+          group3: 1,
+          group4: 1,
+          group5: 5,
+        }}
       >
         <ExampleParagraph identifier="1" />
       </Grid>
       <ExampleFigure>
         <Grid
-          columns={{ group3: 6, group4: 6, group5: 12 }}
-          startOffset={{ group3: 1, group4: 1, group5: 5 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 6,
+            group4: 6,
+            group5: 12,
+          }}
+          startOffset={{
+            group0: 1,
+            group1: 1,
+            group2: 1,
+            group3: 1,
+            group4: 1,
+            group5: 5,
+          }}
         >
           <Grid
             item
-            columns={{ group3: 6, group4: 6, group5: 12 }}
-            startOffset={{ group3: 1, group4: 1, group5: 5 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 6,
+              group4: 6,
+              group5: 12,
+            }}
+            startOffset={{
+              group0: 1,
+              group1: 1,
+              group2: 1,
+              group3: 1,
+              group4: 1,
+              group5: 5,
+            }}
           >
             <ExampleParagraph identifier="Landscape image " />
           </Grid>
           <Grid
             item
-            columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}
-            startOffset={{ group2: 1, group3: 1, group4: 1, group5: 5 }}
+            columns={{
+              group0: 6,
+              group1: 6,
+              group2: 6,
+              group3: 5,
+              group4: 5,
+              group5: 10,
+            }}
+            startOffset={{
+              group0: 1,
+              group1: 1,
+              group2: 1,
+              group3: 1,
+              group4: 1,
+              group5: 5,
+            }}
           >
             <ExampleParagraph identifier="Landscape image's caption " />
           </Grid>
@@ -70,16 +206,44 @@ describe('Grid component', () => {
       </ExampleFigure>
       <Grid
         item
-        columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}
-        startOffset={{ group2: 1, group3: 1, group4: 1, group5: 5 }}
+        columns={{
+          group0: 6,
+          group1: 6,
+          group2: 6,
+          group3: 5,
+          group4: 5,
+          group5: 10,
+        }}
+        startOffset={{
+          group0: 1,
+          group1: 1,
+          group2: 1,
+          group3: 1,
+          group4: 1,
+          group5: 5,
+        }}
       >
         <ExampleParagraph identifier="Paragraph " />
       </Grid>
       {['2', '3', '4', '5', '6', '7', '8', '9', '10'].map(num => (
         <Grid
           item
-          columns={{ group2: 6, group3: 5, group4: 5, group5: 10 }}
-          startOffset={{ group2: 1, group3: 1, group4: 1, group5: 5 }}
+          columns={{
+            group0: 6,
+            group1: 6,
+            group2: 6,
+            group3: 5,
+            group4: 5,
+            group5: 10,
+          }}
+          startOffset={{
+            group0: 1,
+            group1: 1,
+            group2: 1,
+            group3: 1,
+            group4: 1,
+            group5: 5,
+          }}
           key={`${num}item`}
         >
           <ExampleParagraph identifier={num} />
diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md
index 6a0d9550f4..0596262363 100644
--- a/packages/components/psammead-story-promo-list/CHANGELOG.md
+++ b/packages/components/psammead-story-promo-list/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.1.16 | [PR#2315](https://github.com/bbc/psammead/pull/2315) Update snapshots |
 | 2.1.15 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.1.14 | [PR#2273](https://github.com/bbc/psammead/pull/2273) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.1.13 | [PR#2251](https://github.com/bbc/psammead/pull/2251) Talos - Bump Dependencies - @bbc/psammead-styles |
diff --git a/packages/components/psammead-story-promo-list/package-lock.json b/packages/components/psammead-story-promo-list/package-lock.json
index b0375bcb0b..17c4541881 100644
--- a/packages/components/psammead-story-promo-list/package-lock.json
+++ b/packages/components/psammead-story-promo-list/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo-list",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json
index 5e24a8cd81..aec2523558 100644
--- a/packages/components/psammead-story-promo-list/package.json
+++ b/packages/components/psammead-story-promo-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo-list",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
diff --git a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
index 8c1c6dd169..07b6df6529 100644
--- a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap
@@ -16,6 +16,13 @@ exports[`StoryPromo list should render correctly 1`] = `
   position: relative;
 }
 
+.c5 {
+  display: inline-block;
+  vertical-align: top;
+  width: 66.67%;
+  padding: 0 0.5rem;
+}
+
 .c6 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
@@ -38,13 +45,6 @@ exports[`StoryPromo list should render correctly 1`] = `
   padding-bottom: 0.5rem;
 }
 
-.c5 {
-  display: inline-block;
-  vertical-align: top;
-  width: 66.67%;
-  padding: 0 0.5rem;
-}
-
 .c1 {
   border-bottom: 0.0625rem solid #F2F2F2;
   padding: 0.5rem 0 1rem;
@@ -73,9 +73,10 @@ exports[`StoryPromo list should render correctly 1`] = `
   }
 }
 
-@media (min-width:80rem) {
+@media (min-width:63rem) {
   .c3 {
-    width: 33.33%;
+    display: block;
+    width: 100%;
   }
 }
 
@@ -87,6 +88,29 @@ exports[`StoryPromo list should render correctly 1`] = `
   }
 }
 
+@media (min-width:37.5rem) {
+  .c5 {
+    padding: 0 1rem;
+  }
+}
+
+@media (min-width:63rem) {
+  .c5 {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0;
+  }
+}
+
+@supports (grid-template-columns:fit-content(200px)) {
+  .c5 {
+    display: block;
+    width: initial;
+    padding: initial;
+    grid-column: 3 / span 4;
+  }
+}
+
 @media (min-width:20rem) and (max-width:37.4375rem) {
   .c6 {
     font-size: 1rem;
@@ -129,24 +153,10 @@ exports[`StoryPromo list should render correctly 1`] = `
   }
 }
 
-@media (min-width:37.5rem) {
-  .c5 {
-    padding: 0 1rem;
-  }
-}
-
-@media (min-width:80rem) {
-  .c5 {
-    width: 66.67%;
-  }
-}
-
-@supports (grid-template-columns:fit-content(200px)) {
-  .c5 {
-    display: block;
-    width: initial;
-    padding: initial;
-    grid-column: 3 / span 4;
+@media (min-width:63rem) {
+  .c7 {
+    display: none;
+    visibility: hidden;
   }
 }