diff --git a/src/shared/components/progress/progress.module.css b/src/shared/components/progress/progress.module.css
new file mode 100644
index 000000000..80175780c
--- /dev/null
+++ b/src/shared/components/progress/progress.module.css
@@ -0,0 +1,7 @@
+.root {
+    width: 100%;
+}
+
+.section {
+    transition: width 0.15s ease-out;
+}
diff --git a/src/shared/components/progress/progress.tsx b/src/shared/components/progress/progress.tsx
new file mode 100644
index 000000000..484ff3333
--- /dev/null
+++ b/src/shared/components/progress/progress.tsx
@@ -0,0 +1,29 @@
+import type { ProgressProps as MantineProgressProps } from '@mantine/core';
+
+import { Progress as MantineProgress } from '@mantine/core';
+import { forwardRef } from 'react';
+
+import styles from './progress.module.css';
+
+export interface ProgressProps extends MantineProgressProps {}
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+    ({ classNames, style, ...props }, ref) => {
+        return (
+            <MantineProgress
+                classNames={{
+                    root: styles.root,
+                    section: styles.section,
+                    ...classNames,
+                }}
+                ref={ref}
+                style={{
+                    ...style,
+                }}
+                {...props}
+            />
+        );
+    },
+);
+
+Progress.displayName = 'Progress';