diff --git a/jsapp/js/components/common/loader.stories.tsx b/jsapp/js/components/common/loader.stories.tsx
index ebf971b4db..e81d961bbd 100644
--- a/jsapp/js/components/common/loader.stories.tsx
+++ b/jsapp/js/components/common/loader.stories.tsx
@@ -15,23 +15,32 @@ const meta: Meta<typeof Loader> = {
     ),
   ],
   argTypes: {
-    size: {
-      description: 'Select size',
-      options: ['sm', 'md', 'lg'],
+    type: {
+      description: 'Select loader type',
+      options: ['regular', 'big'],
       control: 'radio',
     },
   },
-  args: {
-    size: 'md',
-  },
 };
 
 type Story = StoryObj<typeof Loader>;
 
 /**
- * Basic usage of Loader component
+ * Regular variant
  */
-export const Basic: Story = {};
+export const Regular: Story = {
+  args: {
+    type: 'regular',
+  },
+};
 
+/**
+ * Big variant
+ */
+export const Big: Story = {
+  args: {
+    type: 'big',
+  },
+};
 
 export default meta;
diff --git a/jsapp/js/components/common/loadingOverlay.stories.tsx b/jsapp/js/components/common/loadingOverlay.stories.tsx
index fdadf58ea1..715521a683 100644
--- a/jsapp/js/components/common/loadingOverlay.stories.tsx
+++ b/jsapp/js/components/common/loadingOverlay.stories.tsx
@@ -64,4 +64,14 @@ export const NotVisible: Story = {
   },
 };
 
+/**
+ * Using 'big' variant
+ */
+export const Big: Story = {
+  args: {
+    visible: true,
+    loaderProps: {type: 'big'},
+  },
+};
+
 export default meta;
diff --git a/jsapp/js/theme/kobo/Loader.tsx b/jsapp/js/theme/kobo/Loader.tsx
index 5fe5159504..e28c81a226 100644
--- a/jsapp/js/theme/kobo/Loader.tsx
+++ b/jsapp/js/theme/kobo/Loader.tsx
@@ -3,15 +3,27 @@ import {Box, Loader} from '@mantine/core';
 import LoadingSpinner from 'jsapp/js/components/common/loadingSpinner';
 import {forwardRef} from 'react';
 
-const KoboLoader: MantineLoaderComponent = forwardRef(({...others}, ref) => (
+const KoboLoaderRegular: MantineLoaderComponent = forwardRef(
+  ({...others}, ref) => (
+    <Box component='span' {...others} ref={ref}>
+      <LoadingSpinner message={false} />
+    </Box>
+  )
+);
+
+const KoboLoaderBig: MantineLoaderComponent = forwardRef(({...others}, ref) => (
   <Box component='span' {...others} ref={ref}>
-    <LoadingSpinner message={false} />
+    <LoadingSpinner message={false} type='big' />
   </Box>
 ));
 
 export const LoaderThemeKobo = Loader.extend({
   defaultProps: {
-    loaders: {...Loader.defaultLoaders, custom: KoboLoader},
-    type: 'custom',
+    loaders: {
+      ...Loader.defaultLoaders,
+      regular: KoboLoaderRegular,
+      big: KoboLoaderBig,
+    },
+    type: 'regular',
   },
 });