diff --git a/src/shared/components/loading-overlay/loading-overlay.tsx b/src/shared/components/loading-overlay/loading-overlay.tsx
new file mode 100644
index 000000000..fbefbf489
--- /dev/null
+++ b/src/shared/components/loading-overlay/loading-overlay.tsx
@@ -0,0 +1,28 @@
+import {
+    LoadingOverlay as MantineLoadingOverlay,
+    LoadingOverlayProps as MantineLoadingOverlayProps,
+} from '@mantine/core';
+
+import { Spinner } from '/@/shared/components/spinner/spinner';
+
+interface LoadingOverlayProps extends MantineLoadingOverlayProps {
+    color?: string;
+    opacity?: number;
+}
+
+export const LoadingOverlay = ({ ...props }: LoadingOverlayProps) => {
+    return (
+        <MantineLoadingOverlay
+            loaderProps={{ children: <Spinner /> }}
+            overlayProps={{
+                color: 'var(--theme-colors-background)',
+                opacity: 0.5,
+            }}
+            transitionProps={{
+                duration: 0.5,
+                transition: 'fade',
+            }}
+            {...props}
+        />
+    );
+};