@@ -97,6 +97,8 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 
 	const [lastName, setLastName] = useState('')
 
+	const [userName, setUserName] = useState('')
+
 	const fileInputRef = useRef(null)
 
 	const [loading, setLoading] = useState(false)
@@ -178,7 +180,12 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 			showError('Укажите одинаковые новы пароли!', true)
 			return
 		}
-		const status = await accountApi.changePassword(token, newPassword1, newPassword2, currentPassword)
+		const status = await accountApi.changePassword(
+			token,
+			newPassword1,
+			newPassword2,
+			currentPassword
+		)
 
 		if (status === 200) {
 			showError('Пароль успешно изменён!')
@@ -195,13 +202,23 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 	function body() {
 		if (type === 'regular') {
 			return (
-				<Box width='80vw' height='60vh' display='flex' alignItems='center' justifyContent='center'>
+				<Box
+					width='80vw'
+					height='60vh'
+					display='flex'
+					alignItems='center'
+					justifyContent='center'
+				>
 					<ScreenForInactive />
 				</Box>
 			)
 		}
 		if (type === 'business_account') {
-			return <Box className={styles.main}>Информация о корп.аккаунте доступна только владельцу и администраторам.</Box>
+			return (
+				<Box className={styles.main}>
+					Информация о корп.аккаунте доступна только владельцу и администраторам.
+				</Box>
+			)
 		}
 		if (type === 'business_host') {
 			return <BusinessHost />
@@ -233,7 +250,10 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 		}
 	}
 
-	const isUserDataChange = useMemo(() => name !== first_name || last_name !== lastName, [name, lastName])
+	const isUserDataChange = useMemo(
+		() => name !== first_name || last_name !== lastName || username !== userName,
+		[name, lastName, userName]
+	)
 
 	const promocodeActivate = async () => {
 		if (!promocode.trim()) {
@@ -277,7 +297,7 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 			await axios.put(
 				API_URL + '/auth/user-data',
 				{
-					username: username,
+					username: userName,
 					email: email,
 					first_name: name,
 					last_name: lastName,
@@ -305,7 +325,8 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 	useEffect(() => {
 		setName(first_name)
 		setLastName(last_name)
-	}, [first_name, last_name])
+		setUserName(username)
+	}, [first_name, last_name, username])
 
 	return (
 		<Layout titlePage={'Аккаунт'} device={device}>
@@ -333,7 +354,9 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 							height: '100%',
 						}}
 					>
-						<Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>Ваш аккаунт</Typography>
+						<Typography sx={{ fontSize: 24, fontWeight: 'bold' }}>
+							Ваш аккаунт
+						</Typography>
 						<Tabs
 							value={scope}
 							variant='scrollable'
@@ -354,7 +377,11 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 										disableRipple
 										onClick={() => changeScope(el.scope)}
 										key={el.title}
-										className={scope === el.scope ? styles2.wrap_toggle_button_active : styles2.wrap_toggle_button}
+										className={
+											scope === el.scope
+												? styles2.wrap_toggle_button_active
+												: styles2.wrap_toggle_button
+										}
 										value={el.scope}
 										label={el.title}
 									/>
@@ -364,10 +391,18 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 						{scope === 'setting' ? (
 							<>
 								<Box className={styles2.wrap_block}>
-									<Typography className='title-block'>Основные</Typography>
+									<Typography className='title-block'>
+										Основные
+									</Typography>
 									<Box className={styles2.main_block}>
 										<Box sx={{ marginRight: 2 }}>
-											<Box onClick={handleDivClick} sx={{ cursor: 'pointer', position: 'relative' }}>
+											<Box
+												onClick={handleDivClick}
+												sx={{
+													cursor: 'pointer',
+													position: 'relative',
+												}}
+											>
 												<input
 													type='file'
 													ref={fileInputRef}
@@ -383,14 +418,24 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 														right: '37px',
 													}}
 												>
-													{!loading || !(userInfoLoaded === 'succeeded') ? (
-														<Image src={'/Edit.svg'} height={30} width={30} alt={'Image change'} />
+													{!loading ||
+													!(
+														userInfoLoaded === 'succeeded'
+													) ? (
+														<Image
+															src={'/Edit.svg'}
+															height={30}
+															width={30}
+															alt={'Image change'}
+														/>
 													) : (
 														<Loader />
 													)}
 												</Box>
 												<Avatar
-													src={profile_picture_link as string}
+													src={
+														profile_picture_link as string
+													}
 													sx={{
 														width: 110,
 														height: 110,
@@ -403,32 +448,66 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 										</Box>
 										<Box width='100%' sx={{ marginLeft: '30px' }}>
 											<Box sx={{ marginTop: '0px' }}>
-												<Typography className={styles2.input_title}>Имя</Typography>
+												<Typography
+													className={styles2.input_title}
+												>
+													Имя
+												</Typography>
 												<Input
 													inputProps={{ maxLength: 15 }}
 													value={name}
-													onChange={(e) => setName(e.target.value)}
+													onChange={(e) =>
+														setName(e.target.value)
+													}
 													fullWidth
 												/>
 											</Box>
 											<Box sx={{ marginTop: '15px' }}>
-												<Typography className={styles2.input_title}>Фамилия</Typography>
+												<Typography
+													className={styles2.input_title}
+												>
+													Фамилия
+												</Typography>
 												<Input
 													inputProps={{ maxLength: 15 }}
 													value={lastName}
-													onChange={(e) => setLastName(e.target.value)}
+													onChange={(e) =>
+														setLastName(e.target.value)
+													}
 													fullWidth
 												/>
 											</Box>
 											<Box sx={{ marginTop: '15px' }}>
-												<Box display='flex' alignItems='center' justifyContent='space-between'>
-													<Typography className={styles2.input_title}>Email</Typography>
-													<Box display='flex' alignItems='center' sx={{ marginBottom: '5px' }}>
+												<Box
+													display='flex'
+													alignItems='center'
+													justifyContent='space-between'
+												>
+													<Typography
+														className={
+															styles2.input_title
+														}
+													>
+														Email
+													</Typography>
+													<Box
+														display='flex'
+														alignItems='center'
+														sx={{ marginBottom: '5px' }}
+													>
 														<SwitchCustom
-															checked={is_subscribed_to_emails}
+															checked={
+																is_subscribed_to_emails
+															}
 															onChange={async () => {
-																await dispatch(unfollowEmail(token))
-																showError('Данные изменены!')
+																await dispatch(
+																	unfollowEmail(
+																		token
+																	)
+																)
+																showError(
+																	'Данные изменены!'
+																)
 															}}
 														/>
 														<Typography
@@ -445,10 +524,25 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 												<Input value={email} fullWidth />
 											</Box>
 											<Box sx={{ marginTop: '15px' }}>
-												<Typography className={styles2.input_title}>Никнейм</Typography>
-												<Input value={username} fullWidth />
+												<Typography
+													className={styles2.input_title}
+												>
+													Никнейм
+												</Typography>
+												<Input
+													inputProps={{ maxLength: 15 }}
+													value={userName}
+													onChange={(e) =>
+														setUserName(e.target.value)
+													}
+													fullWidth
+												/>
 											</Box>
-											<ButtonUI onClick={changeUserData} sx={{ marginTop: '20px' }} text={'Сохранить'} />
+											<ButtonUI
+												onClick={changeUserData}
+												sx={{ marginTop: '20px' }}
+												text={'Сохранить'}
+											/>
 											{/*referral_code.code.trim() && (
 												<Box marginTop={1} display='flex'>
 													<Typography className='text'>Ваша реферальная ссылка:</Typography>
@@ -468,46 +562,91 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 									</Box>
 								</Box>
 								<Stack spacing={2} className={styles2.wrap_block}>
-									<Typography className='title-block'>Активация промокода</Typography>
+									<Typography className='title-block'>
+										Активация промокода
+									</Typography>
 									<Input
 										placeholder='Введите ваш промокод'
 										value={promocode}
 										onChange={(e) => setPromocode(e.target.value)}
 										fullWidth
 									/>
-									<Button onClick={promocodeActivate} className='btn-classic'>
+									<Button
+										onClick={promocodeActivate}
+										className='btn-classic'
+									>
 										Активировать
 									</Button>
 								</Stack>
 								{!is_social && (
 									<Box className={styles2.wrap_block}>
-										<Typography className='title-block'>Изменить пароль</Typography>
-										<Box className={styles2.main_block} flexDirection='column'>
+										<Typography className='title-block'>
+											Изменить пароль
+										</Typography>
+										<Box
+											className={styles2.main_block}
+											flexDirection='column'
+										>
 											<Box sx={{ width: '100%' }}>
-												<Typography className={styles2.input_title}>Текущий пароль</Typography>
+												<Typography
+													className={styles2.input_title}
+												>
+													Текущий пароль
+												</Typography>
 												<Input
 													placeholder='Укажите текущий пароль'
 													value={currentPassword}
-													onChange={(e) => setCurrentPassword(e.target.value)}
+													onChange={(e) =>
+														setCurrentPassword(
+															e.target.value
+														)
+													}
 													fullWidth
 												/>
 											</Box>
-											<Box display='flex' justifyContent='space-between' sx={{ width: '100%', marginTop: '15px' }}>
+											<Box
+												display='flex'
+												justifyContent='space-between'
+												sx={{
+													width: '100%',
+													marginTop: '15px',
+												}}
+											>
 												<Box sx={{ width: '48%' }}>
-													<Typography className={styles2.input_title}>Новый пароль</Typography>
+													<Typography
+														className={
+															styles2.input_title
+														}
+													>
+														Новый пароль
+													</Typography>
 													<Input
 														placeholder='Укажите новый пароль'
 														value={newPassword1}
-														onChange={(e) => setNewPassword1(e.target.value)}
+														onChange={(e) =>
+															setNewPassword1(
+																e.target.value
+															)
+														}
 														fullWidth
 													/>
 												</Box>
 												<Box sx={{ width: '48%' }}>
-													<Typography className={styles2.input_title}>Подтвердить пароль</Typography>
+													<Typography
+														className={
+															styles2.input_title
+														}
+													>
+														Подтвердить пароль
+													</Typography>
 													<Input
 														placeholder='Укажите новый пароль ещё раз'
 														value={newPassword2}
-														onChange={(e) => setNewPassword2(e.target.value)}
+														onChange={(e) =>
+															setNewPassword2(
+																e.target.value
+															)
+														}
 														fullWidth
 													/>
 												</Box>
@@ -521,9 +660,17 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 										</Box>
 									</Box>
 								)}
-								<Stack spacing={2} className={styles2.wrap_block} sx={{ marginBottom: 5 }}>
-									<Typography className='title-block'>Удаление аккаунта</Typography>
-									<Typography className='text'>Удаление аккаунта приведет к потере всех настроек</Typography>
+								<Stack
+									spacing={2}
+									className={styles2.wrap_block}
+									sx={{ marginBottom: 5 }}
+								>
+									<Typography className='title-block'>
+										Удаление аккаунта
+									</Typography>
+									<Typography className='text'>
+										Удаление аккаунта приведет к потере всех настроек
+									</Typography>
 									<ButtonUI
 										fullWidth
 										onClick={() => setConfirmDeleteModal(true)}
@@ -537,11 +684,23 @@ const Account: React.FC<IAccountProps> = ({ device, token, plans }) => {
 									/>
 								</Stack>
 
-								<Modal open={confirmDeleteModal} onClose={() => setConfirmDeleteModal(false)}>
+								<Modal
+									open={confirmDeleteModal}
+									onClose={() => setConfirmDeleteModal(false)}
+								>
 									<Stack spacing={2}>
-										<Typography className='title-struct'>Удаление аккаунта</Typography>
-										<Typography className='text'>Вы действительно хотите удалить ваш аккаунт?</Typography>
-										<Button onClick={deleteAccount} fullWidth sx={{ marginTop: 3 }} className='btn-danger'>
+										<Typography className='title-struct'>
+											Удаление аккаунта
+										</Typography>
+										<Typography className='text'>
+											Вы действительно хотите удалить ваш аккаунт?
+										</Typography>
+										<Button
+											onClick={deleteAccount}
+											fullWidth
+											sx={{ marginTop: 3 }}
+											className='btn-danger'
+										>
 											Удалить
 										</Button>
 									</Stack>