@@ -0,0 +1,6 @@
+<svg viewBox="0 0 12 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.1876 5.24984V17.229C10.1876 19.5311 8.323 21.3957 6.02091 21.3957C3.71883 21.3957 1.85425 19.5311 1.85425 17.229V4.20817C1.85425 2.77067 3.02091 1.604 4.45841 1.604C5.89591 1.604 7.06258 2.77067 7.06258 4.20817V15.1457C7.06258 15.7186 6.59383 16.1873 6.02091 16.1873C5.448 16.1873 4.97925 15.7186 4.97925 15.1457V5.24984H3.41675V15.1457C3.41675 16.5832 4.58341 17.7498 6.02091 17.7498C7.45841 17.7498 8.62508 16.5832 8.62508 15.1457V4.20817C8.62508 1.90609 6.7605 0.0415039 4.45841 0.0415039C2.15633 0.0415039 0.291748 1.90609 0.291748 4.20817V17.229C0.291748 20.3957 2.85425 22.9582 6.02091 22.9582C9.18758 22.9582 11.7501 20.3957 11.7501 17.229V5.24984H10.1876Z"
+    fill="currentColor" />
+</svg>
+  
\ No newline at end of file
@@ -150,7 +150,7 @@
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
 	padding: 20px;
-	z-index: 10000;
+	z-index: 1000;
 	&:hover {
 		outline: 4px solid #8280ff66;
 		outline-offset: -3px;
@@ -148,7 +148,7 @@
 	background-color: rgba(0, 0, 0, 0.7);
 	border-radius: 15px;
 	padding: 20px;
-	z-index: 10000;
+	z-index: 1000;
 	&:hover {
 		outline: 4px solid #8280ff66;
 		outline-offset: -3px;
@@ -0,0 +1,17 @@
+import { api } from '#/shared/api'
+
+interface SendReport {
+  errorMessage: string
+  email: string
+  file?: File
+} 
+
+export async function sendReport({errorMessage, email, file}: SendReport) {
+	let formData = new FormData()
+
+	formData.append('report_text', `${email}: ${errorMessage}`)
+	if (file) {
+		formData.append('images', file)
+	}
+	return await api.post('/reports/', formData)
+}
@@ -0,0 +1 @@
+export * from './error-report.api'
\ No newline at end of file
@@ -0,0 +1,64 @@
+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'
+
+export const useErrorReport = () => {
+
+	const { showMessage } = useShowDataStore()
+	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 email = useAppSelector((state) => state.user.email)
+
+	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files) {
+			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
+		}
+	}
+
+	const sendError = makePrivateRequest(async () => {
+		if (errorMessage.trim() === '') {
+			showMessage("Поле не должно быть пустым.")
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+			return
+		}
+
+		try {
+			const { status } = await sendReport({ errorMessage, email, file })
+
+			if (status === 201) {
+				setErrorMessage('')
+				setIsSend(true)
+				setTimeout(() => {
+					setIsSend(false)
+				}, 4000)
+			}
+		} catch (err) {
+			setError(true)
+			setTimeout(() => setError(false), 3000)
+		}
+	})
+
+	return {
+		isSend,
+		setErrorMessage,
+		handleFileChange,
+		file,
+		setFile,
+		sendError,
+		error,
+	}
+}
@@ -0,0 +1,78 @@
+.container {
+	width: 589px;
+	height: auto;
+	background-color: var(--background-color-additional);
+	padding: 32px;
+	border-radius: 20px;
+
+	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;
+
+	&_sended {
+		display: flex;
+		gap: 16px;
+		flex-direction: column;
+		width: 300px;
+		text-align: center;
+	}
+
+	&__buttons {
+		display: flex;
+		justify-content: flex-end;
+		flex-direction: row;
+		align-items: flex-end;
+		margin-top: 12px;
+		gap: 8px;
+	}
+
+	&__close {
+		transform: rotate(45deg);
+		margin-left: 8px;
+    color: var(--new-ui-gray-color);
+	}
+}
+
+.text {
+	color: #868686;
+	font-size: 17px;
+	line-height: 1.5;
+
+	&_accent {
+		color: #22b47f;
+		font-size: 23px;
+	}
+
+	&_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;
+	}
+}
@@ -0,0 +1,92 @@
+import '@testing-library/jest-dom'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { jestRender } from '#/../jest/utils/render'
+import { windowMock } from '#/../jest/utils/window-mock'
+import { ERROR_REPORT, PLATE_CHANGE_PASSWORD } from '#/features/modals'
+import { getModalTest } from '#/../jest/utils/modal-tester'
+import { api } from '#/shared/api/instance'
+import { ErrorReportPlate } from './error-report'
+import axios from 'axios'
+import { sendReport } from '../api'
+
+jest.mock('next/router')
+jest.mock('@sentry/nextjs')
+
+jest.mock('../api')
+
+const showMessageMock = jest.fn()
+const useSessionMock = jest.fn()
+
+jest.mock('next-auth/react', () => {
+	return {
+		useSession: () => useSessionMock(),
+	}
+})
+
+jest.mock('#/shared/lib/hooks/use-show-data', () => {
+	return {
+		useShowDataStore: jest.fn(() => {
+			return {
+				showMessage: showMessageMock,
+			}
+		}),
+	}
+})
+
+useSessionMock.mockReturnValue({
+	data: {
+		access: 'something access',
+	},
+})
+
+windowMock()
+
+describe('error-report', () => {
+	it('successfully show modal', async () => {
+		jestRender(<ErrorReportPlate />)
+
+		const modal = await getModalTest(ERROR_REPORT)
+
+		act(() => {
+			modal.setState(true)
+		})
+		;(sendReport as jest.Mock).mockResolvedValue({
+			status: 201,
+			data: { detail: 'error report sent' },
+		})
+
+		const textarea = screen.getByPlaceholderText('Опишите детально возникшую проблему')
+		const button = screen.getByText('Отправить')
+
+		fireEvent.change(textarea, { target: { value: 'О нет все пропало' } })
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(sendReport).toHaveBeenCalledWith({ errorMessage: 'О нет все пропало', email: '' })
+		})
+	})
+
+	it('empty textarea', async () => {
+		jestRender(<ErrorReportPlate />)
+
+		const modal = await getModalTest(ERROR_REPORT)
+
+		act(() => {
+			modal.setState(true)
+		})
+
+		const textarea = screen.getByPlaceholderText('Опишите детально возникшую проблему')
+		const button = screen.getByText('Отправить')
+
+		act(() => {
+			fireEvent.click(button)
+		})
+
+		await waitFor(() => {
+			expect(showMessageMock).toHaveBeenCalledWith("Поле не должно быть пустым.")
+		})
+	})
+})
@@ -0,0 +1,73 @@
+import * as React from 'react'
+import AttachSvg from '#/assets/svg/attach.svg?react'
+import PlusSvg from '#/assets/svg/plus.svg?react'
+import { ERROR_REPORT, getModalById, PlateTemplate } from '#/features/modals'
+
+import styles from './error-report.module.scss'
+import { c } from '#/shared'
+import { CommonTextArea } from '#/shared/ui/common-textarea'
+import { CommonButton } from '#/shared/ui/button'
+import { useErrorReport } from '../model/use-error-report'
+
+export const ErrorReportPlate = () => {
+	const modal = getModalById(ERROR_REPORT)
+
+	const { error, isSend, setErrorMessage, handleFileChange, file, setFile, sendError } = useErrorReport()
+
+	return (
+		<PlateTemplate id={ERROR_REPORT} variant='secondary' hasTemplate={false}>
+			{isSend ? (
+				<div className={c(styles.container, styles.container_sended)}>
+					<p className={styles.text_accent}>Спасибо!</p>
+					<p className={styles.text}>Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при регистрации</p>
+				</div>
+			) : (
+				<div className={styles.container} onClick={(e) => e.stopPropagation()}>
+					<p className={styles.text_heading}>Сообщить об ошибке</p>
+					<CommonTextArea
+						showError={false}
+						error={error ? { message: 'Поле не должно быть пустым.', type: 'required' } : undefined}
+						rows={4}
+						className={styles.textarea}
+						placeholder='Опишите детально возникшую проблему'
+						onChange={(evt) => setErrorMessage(evt.target.value)}
+						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='#868686' />
+									</label>
+								</button>
+							</>
+						}
+					/>
+					{file && (
+						<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>
+					)}
+
+					<div className={styles.container__buttons}>
+						<CommonButton variant='gray' onClick={() => modal.setState(false)}>
+							Отмена
+						</CommonButton>
+						<CommonButton variant='primary' onClick={sendError}>
+							Отправить
+						</CommonButton>
+					</div>
+				</div>
+			)}
+		</PlateTemplate>
+	)
+}
@@ -0,0 +1 @@
+export * from './error-report'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
\ No newline at end of file
@@ -1,2 +1,3 @@
 export const PLATE_CHANGE_PASSWORD = 'plate-change-password'
 export const RESEND_INVATION_PASSWORD = 'resend-invation-password'
+export const ERROR_REPORT = 'error-report'
@@ -12,7 +12,6 @@ export interface CommonInputProps extends React.InputHTMLAttributes<HTMLInputEle
 	error?: FieldError
 	rightSlot?: React.ReactNode
 	trim?: boolean
-	ref?: ForwardedRef<HTMLInputElement>
 }
 
 export const CommonInput = forwardRef<HTMLInputElement, CommonInputProps>(
@@ -0,0 +1,120 @@
+.box {
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	&__error {
+		transform: translateY(16px);
+		color: #ff2372;
+		font-size: 13px;
+		opacity: 0;
+		transition: all 300ms;
+		margin-top: 8px;
+
+		&_visible {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+}
+
+.label {
+	color: #a6a5a5;
+	font-size: 14px;
+	margin-bottom: 8px;
+	width: 100%;
+
+	&_error {
+		color: #97989f;
+		font-size: 14px;
+		margin-bottom: 8px;
+	}
+}
+
+.textarea {
+	line-height: 28px;
+	padding: 0;
+	resize: none;
+	background-color: transparent;
+	border: none;
+	outline: none;
+	font-size: 16px;
+	width: 100%;
+	font-family: '__Raleway_9d395e' !important;
+
+	&:focus {
+		border: none;
+		outline: none;
+	}
+
+	&_default {
+		font-size: 19px;
+		color: var(--new-ui-text-color) !important;
+	}
+
+	&_error {
+		color: #ff2372 !important;
+		&::placeholder {
+			color: #ff2372 !important;
+		}
+	}
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	transition: all 0.3 ease-in;
+
+	&_default {
+		color: var(--new-ui-text-color) !important;
+		padding: 16.5px 14px;
+		background-color: rgb(61, 61, 61);
+		border: 1px solid var(--border-color2);
+		border-radius: 8px;
+
+		&:hover {
+			border-color: var(--border-color);
+		}
+
+		&::placeholder {
+			color: var(--border-color2) !important;
+		}
+	}
+
+	&_error {
+		border-color: #ff2372;
+
+		&::placeholder {
+			color: #ff2372 !important;
+		}
+
+		&:focus {
+			border: 2px solid #ff2372;
+		}
+	}
+}
+
+html[data-theme='light'] {
+	.wrapper {
+		&_error {
+			border-color: #ff76a7 !important;
+			&::placeholder {
+				color: #ff76a7 !important;
+			}
+			&:focus {
+				border: 2px solid #ff76a7 !important;
+			}
+		}
+
+		&_default {
+			background-color: white;
+		}
+	}
+}
@@ -0,0 +1,55 @@
+import { c } from '#/shared/lib/helpers'
+import { FieldError } from 'react-hook-form'
+import styles from './common-textarea.module.scss'
+import React, { ForwardedRef, forwardRef, useEffect } from 'react'
+
+export type TextAreaVariant = 'default'
+
+export interface CommonTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	children?: React.ReactNode
+	variant?: TextAreaVariant
+	label?: string | React.ReactNode
+	error?: FieldError
+	buttomSlot?: React.ReactNode
+	trim?: boolean
+	showError?: boolean 
+}
+
+export const CommonTextArea = forwardRef<HTMLTextAreaElement, CommonTextAreaProps>(
+	({ showError = true, buttomSlot, label, error, className, disabled, trim = false, variant = 'default', ...props }, ref) => {
+		const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+			event.target.value = trim ? event.target.value.trim() : event.target.value
+		}
+
+		return (
+			<div className={c(styles.box, className)}>
+				<div className={styles.header}>
+					{label && <label className={c(styles.label, styles[`label_${variant}`], error && styles.label_error)}>{label}</label>}
+				</div>
+				<div
+					className={c(
+						styles.wrapper,
+						styles[`wrapper_${variant}`],
+						disabled && styles[`wrapper_${variant}_disabled`],
+						error && styles.wrapper_error
+					)}
+				>
+					<textarea
+						ref={ref}
+						className={c(
+							styles.textarea,
+							styles[`textarea_${variant}`],
+							disabled && styles[`textarea_${variant}_disabled`],
+							error && styles.textarea_error
+						)}
+						onChange={onChange}
+						disabled={disabled}
+						{...props}
+					/>
+					{buttomSlot}
+				</div>
+				{showError && <p className={c(styles.header__error, error && styles.header__error_visible)}>{error ? error?.message : ''}</p>}
+			</div>
+		)
+	}
+)
@@ -0,0 +1 @@
+export * from './common-textarea'
\ No newline at end of file
@@ -0,0 +1 @@
+export * from './ui'
@@ -1,300 +0,0 @@
-import * as React from 'react'
-import { ChangeEvent, useState } from 'react'
-import AttachFileIcon from '@mui/icons-material/AttachFile'
-import CloseIcon from '@mui/icons-material/Close'
-import { Box, Button, Modal, 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'
-
-const style = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	width: 589,
-	height: 'auto',
-	bgcolor: 'background.paper',
-	borderRadius: 5,
-	boxShadow: 16,
-	p: 4,
-}
-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 = {
-	position: 'absolute' as 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	bgcolor: 'background.paper',
-	p: 4,
-	zIndex: 99,
-}
-
-interface IErrorModal {
-	open: boolean
-	handleClose: () => void
-	device: 'mobile' | 'desktop'
-}
-
-const ErrorModal: React.FC<IErrorModal> = ({ open, handleClose, device }) => {
-	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 email = useAppSelector((state) => state.user.email)
-
-	const theme = useAppSelector((state) => state.theme.theme)
-
-	const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-		if (e.target.files) {
-			if (4500000 > e.target.files[0].size) setFile(e.target.files[0])
-		}
-	}
-	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)
-					handleClose()
-				}, 4000)
-			}
-		} catch (err) {
-			setError(true)
-			setTimeout(() => setError(false), 3000)
-		}
-	}
-
-	return (
-		<Modal
-			sx={{
-				'.css-hqvkjc': {
-					backgroundColor: theme === 'light' ? '' : '#373737',
-					border: 'none',
-				},
-			}}
-			open={open}
-			onClose={handleClose}
-			aria-labelledby='modal-modal-title'
-			aria-describedby='modal-modal-description'
-		>
-			{isSend ? (
-				<Box sx={theme === 'light' ? styleSend : styleSendDark}>
-					<Typography sx={{ color: '#22B47F', fontSize: '23px' }}>Спасибо!</Typography>
-					<Typography
-						sx={{
-							fontSize: '17px',
-							marginTop: 2,
-							color: '#868686',
-						}}
-					>
-						Ваше сообщение направлено нашим специалистам. Ответ придет на почту, указанную при
-						регистрации
-					</Typography>
-				</Box>
-			) : (
-				<Box sx={device === 'desktop' ? style : 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
-						rows={4}
-						placeholder='Опишите детально возникшую проблему'
-						fullWidth
-						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: '#8853FA' },
-							backgroundColor: theme === 'light' ? 'transparent' : '#3D3D3D',
-							'& .MuiOutlinedInput-input': {
-								color: theme === 'light' ? '#272727' : '#E1E1E1',
-							},
-						}}
-					/>
-					{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>
-					)}
-
-					<Stack
-						direction={device === 'desktop' ? 'row' : 'column-reverse'}
-						justifyContent='flex-end'
-						alignItems='flex-end'
-						spacing={1}
-						sx={{ marginTop: 1.5 }}
-					>
-						<Button
-							fullWidth={device === 'mobile'}
-							onClick={() => handleClose()}
-							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: device === 'desktop' ? 0 : 1,
-							}}
-						>
-							Отмена
-						</Button>
-						<Button
-							fullWidth={device === 'mobile'}
-							variant='contained'
-							onClick={sendError}
-							sx={{
-								color: 'white',
-								backgroundColor: '#7F7DF3',
-								fontWeight: 500,
-								fontSize: '16px',
-								textTransform: 'none',
-								padding: '7px 12px',
-								borderRadius: '13px',
-								border: 'none',
-								cursor: 'pointer',
-							}}
-						>
-							Отправить
-						</Button>
-					</Stack>
-				</Box>
-			)}
-		</Modal>
-	)
-}
-
-export default ErrorModal
@@ -111,9 +111,6 @@
 	}
 }
 
-.icon {
-}
-
 .blocked {
 	display: flex;
 	align-items: center;
@@ -23,6 +23,7 @@ import { LayoutProps } from '../types'
 import { change } from '#/features/pending'
 import { ChangePasswordPlate } from '#/features/change-password-corp'
 import { ResendInvationPlate } from '#/features/resend-invation-corp '
+import { ErrorReportPlate } from '#/features/error-report'
 
 const freeRoutes = ['/login', '/register', '/reset', '/change-password']
 
@@ -152,6 +153,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, titlePage, title = tit
 
 				<ChangePasswordPlate />
 				<ResendInvationPlate />
+				<ErrorReportPlate />
 			</Box>
 		</>
 	)
@@ -13,6 +13,7 @@ import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import { AccountMenu } from '#/shared'
 import { NotificationMenu } from '#/shared'
 import { TooltipFreeTokens } from '#/shared'
+import { ERROR_REPORT, getModalById } from '#/features/modals'
 
 function a11yProps(index: number) {
 	return {
@@ -73,9 +74,10 @@ export const MainMenu: React.FC = memo(() => {
 
 	const email = useAppSelector((state) => state.user.email)
 
-	const [openErrorModal, setOpenErrorModal] = React.useState(false)
-	const handleOpenErrorModal = () => setOpenErrorModal(true)
-	const handleCloseErrorModal = () => setOpenErrorModal(false)
+	// const [openErrorModal, setOpenErrorModal] = React.useState(false)
+	// const handleOpenErrorModal = () => setOpenErrorModal(true)
+	// const handleCloseErrorModal = () => setOpenErrorModal(false)
+	const errorReport = getModalById(ERROR_REPORT)
 
 	const selectPage = pathname === '/' ? 0 : pathname === '/service-keys' ? 1 : pathname === '/admin' ? 2 : 3
 
@@ -173,7 +175,9 @@ export const MainMenu: React.FC = memo(() => {
 				<Stack direction='row' spacing={1}>
 					{status === 'authenticated' && (
 						<Image
-							onClick={handleOpenErrorModal}
+							onClick={() => {
+								errorReport.setState(true)
+							}}
 							priority
 							style={{
 								marginTop: 12,
@@ -186,13 +190,6 @@ export const MainMenu: React.FC = memo(() => {
 							alt='Error'
 						/>
 					)}
-					{openErrorModal && (
-						<ErrorModalLazy
-							device={'desktop'}
-							open={openErrorModal}
-							handleClose={handleCloseErrorModal}
-						/>
-					)}
 
 					<Image
 						style={{
@@ -26,6 +26,7 @@ import { Device } from '#/shared/lib/types/entities'
 
 import '../styles/styles.module.css'
 import styles from '../styles/styles.module.css'
+import { ERROR_REPORT, getModalById } from '#/features/modals'
 
 export const menuListTop = [
 	{ title: 'Дашборд', link: '/', icon: '/svg/side-menu/market', activeList: [] },
@@ -122,13 +123,7 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 		setOpen(false)
 	}
 
-	const ErrorModalLazy = dynamic(() => import('#/shared/ui/error-modal'), { ssr: false })
-
-	const [openErrorModal, setOpenErrorModal] = React.useState(false)
-
-	const handleOpenErrorModal = () => setOpenErrorModal(true)
-
-	const handleCloseErrorModal = () => setOpenErrorModal(false)
+	const error_report = getModalById(ERROR_REPORT)
 
 	const match = useMediaQuery('(min-height:800px)')
 
@@ -272,7 +267,9 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 						</Box>
 					</List>
 					<Box sx={{ marginTop: 1.5 }}>
-						<Box onClick={handleOpenErrorModal}>
+						<Box onClick={() => {
+							error_report.setState(true)
+						}}>
 							<MenuItem
 								open={open}
 								pathname={pathname}
@@ -293,9 +290,6 @@ export const SideMenu = ({ device, sidemenuDefaultOpen }: { device: Device; side
 					</Box>
 				</>
 			)}
-			{openErrorModal && (
-				<ErrorModalLazy device={'desktop'} open={openErrorModal} handleClose={handleCloseErrorModal} />
-			)}
 			<Box sx={{ position: 'absolute', bottom: 5, width: '100%', left: open ? 25 : 0 }}>
 				{open && (
 					<Box sx={{ width: 'fit-content' }}>