diff --git a/apps/nextjs/.storybook/chromatic.ts b/apps/nextjs/.storybook/chromatic.ts
new file mode 100644
index 000000000..9a345de55
--- /dev/null
+++ b/apps/nextjs/.storybook/chromatic.ts
@@ -0,0 +1,3 @@
+export const CHROMATIC_ALL_VIEWPORTS = { viewports: [375] };
+export const CHROMATIC_MOBILE_ONLY = { viewports: [375] };
+export const CHROMATIC_DESKTOP_ONLY = { viewports: [1200] };
diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
index 99b2ad60e..f0b9471c5 100644
--- a/apps/nextjs/.storybook/preview.tsx
+++ b/apps/nextjs/.storybook/preview.tsx
@@ -15,6 +15,7 @@ import { DialogProvider } from "../src/components/AppComponents/DialogContext";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
+import { CHROMATIC_DESKTOP_ONLY } from "./chromatic";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -28,6 +29,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    ...CHROMATIC_DESKTOP_ONLY,
   },
   loaders: [mswLoader],
 };