diff --git a/dashboard/src/states/Loading/Loading.jsx b/dashboard/src/states/Loading/Loading.jsx
new file mode 100644
index 0000000..16d5748
--- /dev/null
+++ b/dashboard/src/states/Loading/Loading.jsx
@@ -0,0 +1,16 @@
+import {LinearProgress, Stack, useTheme} from "@mui/material";
+import DarkLogo from "@/common/assets/images/logo/dark.webp";
+import LightLogo from "@/common/assets/images/logo/light.webp";
+
+export const Loading = ({progress}) => {
+    const theme = useTheme();
+    const logo = theme.palette.mode === "dark" ? DarkLogo : LightLogo;
+
+    return (
+        <Stack justifyContent="center" alignItems="center" sx={{height: "100vh"}} gap={5}>
+            <img src={logo} alt="Logo" style={{width: "25rem"}}/>
+            <LinearProgress variant={progress ? "determinate" : "indeterminate"} sx={{width: "20rem"}}
+                            value={progress}/>
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Loading/index.js b/dashboard/src/states/Loading/index.js
new file mode 100644
index 0000000..64fddb2
--- /dev/null
+++ b/dashboard/src/states/Loading/index.js
@@ -0,0 +1 @@
+export {Loading as default} from "./Loading.jsx";
\ No newline at end of file