diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
index 026985e8..9f61cb5a 100644
--- a/apps/storefront/src/components/index.ts
+++ b/apps/storefront/src/components/index.ts
@@ -84,4 +84,5 @@ export {
 export {
   B3PageMask,
   showPageMask,
-} from './pageMask/B3PageMask'
+  Loading,
+} from './loadding'
diff --git a/apps/storefront/src/components/layout/B3RenderRouter.tsx b/apps/storefront/src/components/layout/B3RenderRouter.tsx
index 9a28e906..08dca6a2 100644
--- a/apps/storefront/src/components/layout/B3RenderRouter.tsx
+++ b/apps/storefront/src/components/layout/B3RenderRouter.tsx
@@ -6,10 +6,6 @@ import {
   useEffect,
 } from 'react'
 
-import {
-  Box,
-} from '@mui/material'
-
 import {
   Route,
   Routes,
@@ -24,6 +20,7 @@ import type {
 
 import {
   B3Layout,
+  Loading,
 } from '@/components'
 import {
   RegisteredProvider,
@@ -86,17 +83,9 @@ export const B3RenderRouter = (props: B3RenderRouterProps) => {
   }, [openUrl])
 
   return (
-    <Suspense fallback={(
-      <Box sx={{
-        display: 'flex',
-        width: '100%',
-        height: '100vh',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      >
-        Loading...
-      </Box>
+    <Suspense
+      fallback={(
+        <Loading />
       )}
     >
       <B3LayoutTip />
diff --git a/apps/storefront/src/components/loadding/B3PageMask.tsx b/apps/storefront/src/components/loadding/B3PageMask.tsx
new file mode 100644
index 00000000..a221ee49
--- /dev/null
+++ b/apps/storefront/src/components/loadding/B3PageMask.tsx
@@ -0,0 +1,40 @@
+import {
+  useContext,
+} from 'react'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  DispatchProps,
+} from '@/shared/global/context/config'
+
+import Loading from './Loading'
+
+export const B3PageMask = () => {
+  const {
+    state: {
+      showPageMask,
+    },
+  } = useContext(GlobaledContext)
+
+  return (
+    <>
+      {
+        showPageMask && (
+          <Loading />
+        )
+      }
+    </>
+  )
+}
+
+export const showPageMask = (dispatch: DispatchProps, isShow: boolean) => {
+  dispatch({
+    type: 'common',
+    payload: {
+      showPageMask: isShow,
+    },
+  })
+}
diff --git a/apps/storefront/src/components/loadding/Loading.tsx b/apps/storefront/src/components/loadding/Loading.tsx
new file mode 100644
index 00000000..d23ce67d
--- /dev/null
+++ b/apps/storefront/src/components/loadding/Loading.tsx
@@ -0,0 +1,35 @@
+import {
+  Box,
+  Typography,
+} from '@mui/material'
+
+const Loading = () => (
+  <Box
+    sx={{
+      width: '100%',
+      height: '100%',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      backgroundColor: '#fef9f5',
+      zIndex: 120000,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Typography
+      sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        color: 'black',
+      }}
+    >
+      Loading...
+    </Typography>
+  </Box>
+)
+
+export default Loading
diff --git a/apps/storefront/src/components/loadding/index.ts b/apps/storefront/src/components/loadding/index.ts
new file mode 100644
index 00000000..94026a28
--- /dev/null
+++ b/apps/storefront/src/components/loadding/index.ts
@@ -0,0 +1,10 @@
+import Loading from './Loading'
+
+export {
+  B3PageMask,
+  showPageMask,
+} from './B3PageMask'
+
+export {
+  Loading,
+}
diff --git a/apps/storefront/src/components/pageMask/B3PageMask.tsx b/apps/storefront/src/components/pageMask/B3PageMask.tsx
deleted file mode 100644
index 524fc223..00000000
--- a/apps/storefront/src/components/pageMask/B3PageMask.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
-  useContext,
-} from 'react'
-
-import {
-  Box,
-  Typography,
-} from '@mui/material'
-
-import {
-  GlobaledContext,
-} from '@/shared/global'
-
-import {
-  DispatchProps,
-} from '@/shared/global/context/config'
-
-export const B3PageMask = () => {
-  const {
-    state: {
-      showPageMask,
-    },
-  } = useContext(GlobaledContext)
-
-  return (
-    <>
-      {
-        showPageMask && (
-          <Box
-            sx={{
-              width: '100%',
-              height: '100%',
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              backgroundColor: '#fef9f5',
-              zIndex: 120000,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            <Typography
-              sx={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                color: 'black',
-              }}
-            >
-              Loading...
-            </Typography>
-          </Box>
-        )
-      }
-    </>
-  )
-}
-
-export const showPageMask = (dispatch: DispatchProps, isShow: boolean) => {
-  dispatch({
-    type: 'common',
-    payload: {
-      showPageMask: isShow,
-    },
-  })
-}