@@ -479,4 +479,12 @@ button {
 .fade-enter-active,
 .fade-exit-active{
    transition: opacity 500ms;
+}
+
+@media (max-width: 599px) {
+	.MuiSnackbar-root {
+		left: 50% !important;
+		right: auto !important;
+		transform: translateX(-50%) !important;
+	}
 }
\ No newline at end of file
@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from 'react'
-import { Alert, Slide, Snackbar, Typography } from '@mui/material'
+import React, { useRef } from 'react'
+import { Alert, Snackbar, Typography } from '@mui/material'
+import { getDeviceType } from '#/shared'
 import Image from 'next/image'
 
 import { CSSTransition } from 'react-transition-group'
@@ -15,16 +16,19 @@ const ErrorIcon = () => {
 }
 
 export const Error: React.FC<IError> = ({ handleClose }) => {
-	const { message, variant, isOpened } = useShowDataStore()
+	const { message, variant, isOpened, showMessage } = useShowDataStore()
 	const nodeRef = useRef(null)
+	const isDesktop = getDeviceType() === 'desktop';
 
 	return (
 		<CSSTransition nodeRef={nodeRef} in={isOpened} timeout={400} unmountOnExit classNames='my-node'>
 			<Snackbar
-				style={{ zIndex: 100000 }}
-				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+				style={{ 
+					zIndex: 100000,
+					maxWidth: isDesktop ? '500px' : '335px',
+					 }}
+				anchorOrigin={{ vertical: 'top', horizontal:'right' }}
 				open={isOpened}
-				autoHideDuration={6000}
 				onClose={handleClose}
 			>
 				{variant == 'error' ? (