diff --git a/next-ui/.storybook/preview.ts b/next-ui/.storybook/preview.ts
index 52b37debf..f588eeea4 100644
--- a/next-ui/.storybook/preview.ts
+++ b/next-ui/.storybook/preview.ts
@@ -12,6 +12,8 @@ import { vueIntl } from '@/plugins/vue-intl'
 import 'virtual:uno.css'
 import { availableLocales } from '@/utils/i18n/locale-helper'
 import { localeDecorator } from './locale.decorator'
+import { INITIAL_VIEWPORTS } from 'storybook/viewport'
+import { viewports } from './viewport'
 
 initialize(
   {
@@ -36,7 +38,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-
+    viewport: {
+      options: [...viewports],
+    },
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations
diff --git a/next-ui/.storybook/viewport.ts b/next-ui/.storybook/viewport.ts
new file mode 100644
index 000000000..98a1758b5
--- /dev/null
+++ b/next-ui/.storybook/viewport.ts
@@ -0,0 +1,37 @@
+export const viewports = [
+  {
+    name: 'xs',
+    styles: {
+      width: '400px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'sm',
+    styles: {
+      width: '950px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'md',
+    styles: {
+      width: '1200px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'lg',
+    styles: {
+      width: '1900px',
+      height: '963px',
+    },
+  },
+  {
+    name: 'xl',
+    styles: {
+      width: '2550px',
+      height: '963px',
+    },
+  },
+]