@@ -1,36 +1,37 @@
 import { useAppSelector } from '#/app/store/store'
-import { API_URL } from '#/shared/lib/constants'
-import axios from 'axios'
-import { useSession } from 'next-auth/react'
+
 import React, { ChangeEvent } from 'react'
 import { sendReport } from '../api'
 import { makePrivateRequest } from '#/shared/api'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+import { useRouter } from 'next/router'
+
+const MAX_FILE_SIZE = 4.5 * 1024 * 1024 // 4.5 MB
 
 export const useErrorReport = () => {
+	const email = useAppSelector((state) => state.user.email)
+	const [file, setFile] = React.useState<File>()
 
 	const { showMessage } = useShowDataStore()
 	const [errorMessage, setErrorMessage] = React.useState<string>('')
-
 	const [error, setError] = React.useState(false)
 
 	const [isSend, setIsSend] = React.useState(false)
+	const router = useRouter()
 
-	const [file, setFile] = React.useState<File>()
-
-	const { data: session } = useSession()
-
-	const email = useAppSelector((state) => state.user.email)
+	const handleGoBackPage = () => {
+		router.back()
+	}
 
 	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
 		if (e.target.files) {
-			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
+			if (MAX_FILE_SIZE > e.target.files[0].size) setFile(e.target.files[0])
 		}
 	}
 
 	const sendError = makePrivateRequest(async () => {
 		if (errorMessage.trim() === '') {
-			showMessage("Поле не должно быть пустым.")
+			showMessage('Поле не должно быть пустым.')
 			setError(true)
 			setTimeout(() => setError(false), 3000)
 			return
@@ -60,5 +61,6 @@ export const useErrorReport = () => {
 		setFile,
 		sendError,
 		error,
+		handleGoBackPage,
 	}
 }
@@ -42,7 +42,7 @@ export const ErrorReportPlate = () => {
 										id='file-input'
 									/>
 									<label htmlFor='file-input' style={{ cursor: 'pointer' }}>
-										<AttachSvg width={25} height={25} color='#868686' />
+										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
 									</label>
 								</button>
 							</>
@@ -84,7 +84,7 @@
 		}
 
 		&::placeholder {
-			color: var(--border-color2) !important;
+			color: var(--border-color2);
 		}
 	}
 
@@ -95,8 +95,8 @@
 			color: #ff2372 !important;
 		}
 
-		&:focus {
-			border: 2px solid #ff2372;
+		&:hover {
+			border-color: #ff2372 !important;
 		}
 	}
 }
@@ -0,0 +1,86 @@
+.container {
+	position: absolute;
+	top: 35%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100dvw;
+	padding: 32px;
+
+	&_sended {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -65%);
+		width: 300px;
+		text-align: center;
+		border-radius: 20px;
+		background-color: var(--background-color-additional);
+		box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
+	}
+
+	&__buttons {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		margin-top: 22px;
+		gap: 8px;
+	}
+
+	&__close {
+		transform: rotate(45deg);
+		margin-left: 8px;
+		color: var(--new-ui-gray-color);
+	}
+}
+
+.button {
+	text-align: center;
+	font-size: 16px;
+}
+
+.text {
+	color: #868686;
+	font-size: 17px;
+	line-height: 1.5;
+
+	&_accent {
+		color: #22b47f;
+		font-size: 23px;
+		margin-bottom: 16px;
+	}
+
+	&_heading {
+		font-size: 21px;
+		font-weight: 500;
+	}
+
+	&_file {
+		font-size: 15px;
+	}
+}
+
+.textarea {
+	position: relative;
+	margin: 20px 0px 9.6px 0px;
+
+	&__button {
+		position: absolute;
+		padding: 0;
+		bottom: 16px;
+		left: 8px;
+		background-color: transparent;
+		box-shadow: none;
+		margin: 0;
+		rotate: 30deg;
+
+		&:hover {
+			background-color: transparent;
+			box-shadow: none;
+		}
+	}
+
+	&__file {
+		display: flex;
+		align-items: center;
+	}
+}
@@ -1,257 +1,69 @@
-import React, { ChangeEvent } from 'react'
-import AttachFileIcon from '@mui/icons-material/AttachFile'
-import CloseIcon from '@mui/icons-material/Close'
-import { Box, Button, Stack, TextField, Typography } from '@mui/material'
-import axios from 'axios'
-import { useSession } from 'next-auth/react'
-
-import { useAppSelector } from '#/app/store/store'
-import { API_URL } from '#/shared/lib/constants/constants'
+import React from 'react'
 import { NextPageWithLayout } from '#/pages/_app'
+import { useErrorReport } from '#/features/error-report/model/use-error-report'
 
-const styleSend = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -65%)',
-	width: 300,
-	height: 'auto',
-	bgcolor: 'background.paper',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-	textAlign: 'center',
-}
-
-const styleSendDark = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -65%)',
-	width: 300,
-	height: 'auto',
-	bgcolor: '#2B2828',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-	textAlign: 'center',
-}
-
-const styleMobile = {
-	width: '100%',
-	position: 'absolute' as 'absolute',
-	top: '35%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	p: 4,
-	zIndex: 99,
-}
+import styles from './error-mobile.module.scss'
+import { c } from '#/shared'
+import { CommonTextArea } from '#/shared/ui/common-textarea'
+import AttachSvg from '#/assets/svg/attach.svg?react'
+import PlusSvg from '#/assets/svg/plus.svg?react'
+import { CommonButton } from '#/shared/ui/button/ui'
 
 const ReportsMobile: NextPageWithLayout = () => {
-	const [errorMessage, setErrorMessage] = React.useState<string>('')
-
-	const [error, setError] = React.useState(false)
-
-	const [isSend, setIsSend] = React.useState(false)
-
-	const [file, setFile] = React.useState<File>()
-
-	const { data: session } = useSession()
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	const email = useAppSelector((state) => state.user.email)
-
-	const sendError = async () => {
-		if (errorMessage.trim() === '') {
-			setError(true)
-			setTimeout(() => setError(false), 3000)
-			return
-		}
-
-		let formData: any = new FormData()
-
-		formData.append('report_text', `${email}: ${errorMessage}`) //append the values with key, value pair
-		if (file) {
-			formData.append('images', file)
-		}
-
-		try {
-			const { status } = await axios.post(API_URL + '/reports/', formData, {
-				headers: {
-					'content-type': 'multipart/form-data ',
-					'content-length': file ? `${file.size}` : '',
-					Authorization: `Bearer ${session?.access}`,
-				},
-			})
-
-			if (status === 201) {
-				setErrorMessage('')
-				setIsSend(true)
-				setTimeout(() => {
-					setIsSend(false)
-				}, 4000)
-			}
-		} catch (err) {
-			setError(true)
-			setTimeout(() => setError(false), 3000)
-		}
-	}
-
-	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-		if (e.target.files) {
-			setFile(e.target.files[0])
-		}
-	}
+	const { error, isSend, setErrorMessage, handleFileChange, file, setFile, sendError, handleGoBackPage } = useErrorReport()
 
 	return (
 		<>
 			{isSend ? (
-				<Box sx={theme === 'light' ? styleSend : styleSendDark}>
-					<Typography sx={{ color: '#22B47F', fontSize: '23px' }}>Спасибо!</Typography>
-					<Typography sx={{ fontSize: '17px', marginTop: 2 }}>
-						Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при
-						регистрации
-					</Typography>
-				</Box>
+				<div className={c(styles.container, styles.container_sended)}>
+					<p className={styles.text_accent}>Спасибо!</p>
+					<p className={styles.text}>Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при регистрации</p>
+				</div>
 			) : (
-				<Box sx={styleMobile}>
-					<Typography
-						variant='h6'
-						component='h2'
-						sx={{
-							color: theme === 'light' ? '#5A5A5A' : '#E1E1E1',
-							lineHeight: '28.5px',
-							fontSize: '21px',
-							fontWeight: '600px',
-						}}
-					>
-						Сообщить об ошибке
-					</Typography>
-					<TextField
-						error={error}
-						id='outlined-multiline-static'
-						multiline
+				<div className={styles.container}>
+					<p className={styles.text_heading}>Сообщить об ошибке</p>
+					<CommonTextArea
+						showError={false}
+						error={error ? { message: 'Поле не должно быть пустым.', type: 'required' } : undefined}
 						rows={4}
+						className={styles.textarea}
 						placeholder='Опишите детально возникшую проблему'
-						fullWidth
-						style={{
-							color: theme === 'light' ? '#272727' : '#E1E1E1',
-						}}
 						onChange={(evt) => setErrorMessage(evt.target.value)}
-						InputProps={{
-							startAdornment: (
-								<>
-									<Button
-										variant='contained'
-										component='label'
-										sx={{
-											position: 'absolute',
-											padding: 0,
-											bottom: 13,
-											left: -10,
-											backgroundColor: 'transparent',
-											border: 'none',
-											boxShadow: 'none',
-											margin: 0,
-											rotate: '30deg',
-											'&:hover': {
-												backgroundColor: 'transparent',
-												boxShadow: 'none',
-											},
-										}}
-									>
-										<AttachFileIcon
-											color='info'
-											sx={{
-												cursor: 'pointer',
-												color: '#868686',
-												width: 25,
-												height: 25,
-											}}
-										/>
-										<input
-											onChange={handleFileChange}
-											type='file'
-											hidden
-											accept='.jpg,.jpeg,.png'
-										/>
-									</Button>
-								</>
-							),
-						}}
-						sx={{
-							marginTop: 2.5,
-							marginBottom: 1.2,
-							fontSize: 13,
-							'& label': { color: 'red' },
-							backgroundColor: theme === 'light' ? 'transparent' : '#3D3D3D',
-							input: {
-								color: theme === 'light' ? '#272727' : '#E1E1E1',
-							},
-						}}
+						buttomSlot={
+							<>
+								<button className={styles.textarea__button}>
+									<input
+										onChange={handleFileChange}
+										type='file'
+										accept='.jpg,.jpeg,.png'
+										style={{ display: 'none' }}
+										id='file-input'
+									/>
+									<label htmlFor='file-input' style={{ cursor: 'pointer' }}>
+										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
+									</label>
+								</button>
+							</>
+						}
 					/>
 					{file && (
-						<Box sx={{ display: 'flex', alignItems: 'center' }}>
-							<Typography sx={{ fontSize: '15px' }}>
-								Добавлено 1 изображение: {file.name}
-							</Typography>
-							<CloseIcon
-								onClick={() => setFile(undefined)}
-								sx={{
-									width: '18px',
-									height: '18px',
-									cursor: 'pointer',
-									marginLeft: '3px',
-									marginTop: '2px',
-								}}
-							/>
-						</Box>
+						<div className={styles.textarea__file}>
+							<p className={styles.text_file}>Добавлено 1 изображение: {file.name}</p>
+
+							<button className={styles.container__close} onClick={() => setFile(undefined)}>
+								<PlusSvg width={18} height={18} />
+							</button>
+						</div>
 					)}
-					<Stack
-						direction={'column-reverse'}
-						justifyContent='flex-end'
-						alignItems='flex-end'
-						spacing={1}
-						sx={{ marginTop: 1.5 }}
-					>
-						<Button
-							fullWidth
-							sx={{
-								color: theme === 'light' ? '#5A5A5A' : '#D0D0D0',
-								backgroundColor: theme === 'light' ? '#E8E8E8' : '#5D5A5A',
-								fontWeight: 500,
-								fontSize: '16px',
-								textTransform: 'none',
-								padding: '8px 12px',
-								borderRadius: '13px',
-								border: 'none',
-								cursor: 'pointer',
-								marginTop: 1,
-							}}
-						>
-							Отмена
-						</Button>
-						<Button
-							fullWidth
-							variant='contained'
-							onClick={sendError}
-							sx={{
-								color: 'white',
-								backgroundColor: '#7F7DF3',
-								fontWeight: 500,
-								fontSize: '16px',
-								textTransform: 'none',
-								padding: '7px 12px',
-								borderRadius: '13px',
-								border: 'none',
-								cursor: 'pointer',
-							}}
-						>
+					<div className={styles.container__buttons}>
+						<CommonButton className={styles.button} variant='primary' onClick={sendError}>
 							Отправить
-						</Button>
-					</Stack>
-				</Box>
+						</CommonButton>
+						<CommonButton className={styles.button} variant='gray' onClick={handleGoBackPage}>
+							Отмена
+						</CommonButton>
+					</div>
+				</div>
 			)}
 		</>
 	)