diff --git a/.storybook/modes.js b/.storybook/modes.js
new file mode 100644
index 000000000..9a1d99a51
--- /dev/null
+++ b/.storybook/modes.js
@@ -0,0 +1,9 @@
+// Set the viewport widths that Chromatic tests with globally.
+export const allModes = {
+  xs: {
+    viewport: "xs",
+  },
+  xl: {
+    viewport: "xl",
+  },
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index adc757e21..74cb1fa80 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,5 @@
 import "../src/styles/css/base.css";
+import { allModes } from "../.storybook/modes";
 
 export const parameters = {
   layout: "fullscreen",
@@ -9,13 +10,24 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: {
+      xs: { name: "XSmall", styles: { width: "400px", height: "900px" } },
+      sm: { name: "Small", styles: { width: "640px", height: "900px" } },
+      md: { name: "Medium", styles: { width: "768px", height: "900px" } },
+      lg: { name: "Large", styles: { width: "1024px", height: "900px" } },
+      xl: { name: "XL", styles: { width: "1200px", height: "900px" } },
+      "2xl": { name: "2XL", styles: { width: "1536px", height: "900px" } },
+    },
+  },
   chromatic: {
     // Notifies Chromatic to pause the animations when they finish at a global level
     // This is because Chromatic doesn't show the cover image when the animation starts with opacity 0
     pauseAnimationAtEnd: true,
-    // Set the viewport widths that Chromatic tests with globally.
-    // 400 lies between our screen-xs & screen-s variables.
-    // 1200 is the chromatic viewport we were using as default before adding an extra one for phones.
-    viewports: [400, 1200],
+    // Instructs Chromatic to test all stories at the specified viewports
+    modes: {
+      "400px": { viewport: 400 },
+      "1200px": { viewport: 1200 },
+    },
   },
 };