diff --git a/next-ui/.storybook/modes.ts b/next-ui/.storybook/modes.ts
new file mode 100644
index 000000000..cdd965f20
--- /dev/null
+++ b/next-ui/.storybook/modes.ts
@@ -0,0 +1,19 @@
+const themes = ['light', 'dark']
+const viewports = [
+  { name: 'mobile', value: 'xs' },
+  { name: 'desktop', value: 'md' },
+]
+
+const allModes: Record<string, object> = {}
+
+// viewport / theme combinations
+viewports.forEach((vp) => {
+  themes.forEach((t) => {
+    allModes[`${t} ${vp.name}`] = {
+      viewport: vp.value,
+      theme: t,
+    }
+  })
+})
+
+export { allModes }
diff --git a/next-ui/.storybook/preview.ts b/next-ui/.storybook/preview.ts
index 0c42d9744..43ce5749a 100644
--- a/next-ui/.storybook/preview.ts
+++ b/next-ui/.storybook/preview.ts
@@ -12,7 +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 { viewports } from './viewport'
+import { vuetifyViewports } from './viewport'
+import { allModes } from './modes'
 
 initialize(
   {
@@ -31,6 +32,9 @@ Object.entries(availableLocales).forEach(([code, name]) => {
 
 const preview: Preview = {
   parameters: {
+    chromatic: {
+      modes: allModes,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -38,7 +42,7 @@ const preview: Preview = {
       },
     },
     viewport: {
-      options: [...viewports],
+      options: { ...vuetifyViewports },
     },
     a11y: {
       // 'todo' - show a11y violations in the test UI only
diff --git a/next-ui/.storybook/viewport.ts b/next-ui/.storybook/viewport.ts
index 98a1758b5..c61052e9f 100644
--- a/next-ui/.storybook/viewport.ts
+++ b/next-ui/.storybook/viewport.ts
@@ -1,37 +1,37 @@
-export const viewports = [
-  {
+export const vuetifyViewports = {
+  xs: {
     name: 'xs',
     styles: {
       width: '400px',
       height: '963px',
     },
   },
-  {
+  sm: {
     name: 'sm',
     styles: {
       width: '950px',
       height: '963px',
     },
   },
-  {
+  md: {
     name: 'md',
     styles: {
       width: '1200px',
       height: '963px',
     },
   },
-  {
+  lg: {
     name: 'lg',
     styles: {
       width: '1900px',
       height: '963px',
     },
   },
-  {
+  xl: {
     name: 'xl',
     styles: {
       width: '2550px',
       height: '963px',
     },
   },
-]
+}
diff --git a/next-ui/src/components.d.ts b/next-ui/src/components.d.ts
index 46090f6f6..af12d60f9 100644
--- a/next-ui/src/components.d.ts
+++ b/next-ui/src/components.d.ts
@@ -22,12 +22,10 @@ declare module 'vue' {
     FragmentBuildVersion: typeof import('./fragments/fragment/BuildVersion.vue')['default']
     FragmentDialogConfirm: typeof import('./fragments/fragment/dialog/Confirm.vue')['default']
     FragmentDialogConfirmEdit: typeof import('./fragments/fragment/dialog/ConfirmEdit.vue')['default']
-    FragmentHistoryBookFileDeleted: typeof import('./fragments/fragment/history/BookFileDeleted.vue')['default']
     FragmentHistoryExpandBookConverted: typeof import('./fragments/fragment/history/expand/BookConverted.vue')['default']
     FragmentHistoryExpandBookFileDeleted: typeof import('./fragments/fragment/history/expand/BookFileDeleted.vue')['default']
     FragmentHistoryExpandBookImported: typeof import('./fragments/fragment/history/expand/BookImported.vue')['default']
     FragmentHistoryExpandDuplicatePageDeleted: typeof import('./fragments/fragment/history/expand/DuplicatePageDeleted.vue')['default']
-    FragmentHistoryExpandFileDeleted: typeof import('./fragments/fragment/history/ExpandFileDeleted.vue')['default']
     FragmentHistoryExpandSeriesFolderDeleted: typeof import('./fragments/fragment/history/expand/SeriesFolderDeleted.vue')['default']
     FragmentHistoryExpandTable: typeof import('./fragments/fragment/history/expand/Table.vue')['default']
     FragmentHistoryTable: typeof import('./fragments/fragment/history/Table.vue')['default']