diff --git a/.storybook/modes.js b/.storybook/modes.js
new file mode 100644
index 000000000..b00151a59
--- /dev/null
+++ b/.storybook/modes.js
@@ -0,0 +1,8 @@
+export const allModes = {
+  mobile: {
+    viewport: "small",
+  },
+  desktop: {
+    viewport: "large",
+  }
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index ec3b30831..21d616f8d 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -23,6 +23,7 @@ import {
   withClearSubmissionLocalStorage,
 } from './decorators';
 import {reactIntl} from './reactIntl.js';
+import {allModes} from "./modes";
 
 initialize({
   onUnhandledRequest: 'bypass',
@@ -54,6 +55,12 @@ export default {
   },
   parameters: {
     actions: {argTypesRegex: '^on[A-Z].*'},
+    viewport: {
+      viewports: {
+        small: { name: "Small", styles: { width: "640px", height: "800px" } },
+        large: { name: "Large", styles: { width: "1024px", height: "1000px" } },
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -85,6 +92,12 @@ export default {
         ],
       },
     },
+    chromatic: {
+      modes: {
+        mobile: allModes.mobile,
+        desktop: allModes.desktop
+      }
+    }
   },
   loaders: [mswLoader],
 };