@@ -0,0 +1,3 @@
+.selectTransparent {
+	background-color: transparent;
+}
@@ -7,6 +7,8 @@ import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import { baseColor } from '#/shared/lib/constants/colors'
 import TooltipModelTypes from '#/widgets/filters-gpt/ui/tooltip-model-types'
 
+import styles from './select_filter.module.scss'
+
 interface IProps {
 	selects: { availables: string[]; default: any; end: number; start: number; step: number }
 	name: string
@@ -48,9 +50,7 @@ export const SelectFilter = ({ selects, filters, item_key, name, description, se
 							},
 						},
 					}}
-					style={{
-						backgroundColor: 'transparent',
-					}}
+					className={styles.selectTransparent}
 					sx={{
 						boxShadow: 'none',
 						borderRadius: '13px',
@@ -0,0 +1,3 @@
+.selectTransparent {
+	background-color: transparent;
+}
@@ -6,6 +6,8 @@ import { IModelVersions } from '#/shared/api/models/models'
 import { baseColor } from '#/shared/lib/constants/colors'
 import TooltipModelTypes from '#/widgets/filters-gpt/ui/tooltip-model-types'
 
+import styles from './chat_select.module.scss'
+
 interface ISelect {
 	value: string
 	setValue: React.Dispatch<React.SetStateAction<string>>
@@ -38,9 +40,7 @@ export const ChatSelect: React.FC<ISelect> = ({ value, setValue, list, setDefaul
 						},
 					},
 				}}
-				style={{
-					backgroundColor: 'transparent',
-				}}
+				className={styles.selectTransparent}
 				sx={{
 					boxShadow: 'none',
 					borderRadius: '13px',
@@ -0,0 +1,3 @@
+.sectionSpacing {
+	margin-top: 15px;
+}
@@ -8,6 +8,8 @@ import { useRouter } from 'next/router'
 import { signOut } from 'next-auth/react'
 
 import styles from '#/app/layout/styles/styles.module.css'
+
+import infoBarStyles from './info-bar.module.scss'
 import { useAppSelector } from '#/app/store/store'
 import { TooltipCustom } from '#/shared'
 import { useFeatureFlag } from '#/shared/lib/hooks'
@@ -190,7 +192,7 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 											</Typography>
 										</Box>
 									</Link>
-									<Box style={{ marginTop: '15px' }}>
+									<Box className={infoBarStyles.sectionSpacing}>
 										<Link href={'/account?scope=business'}>
 											<Box display='flex' onClick={() => router.push('/account?scope=business')}>
 												<Image src={'/svg/side-menu/corp-acc-off.svg'} width={18} height={18} alt={''} />
@@ -203,7 +205,7 @@ const InfoBar: React.FC<InfoBarProps> = ({ device }) => {
 									</Box>
 
 									{account_type === 'regular' && (
-										<Box style={{ marginTop: '15px' }}>
+										<Box className={infoBarStyles.sectionSpacing}>
 											<Link href={'/account?scope=referral'}>
 												<Box display='flex' onClick={() => router.push('/account?scope=referral')}>
 													<Image src={'/svg/side-menu/referral.svg'} width={18} height={18} alt={''} />
@@ -73,6 +73,14 @@
 				justify-content: flex-start;
 				height: 100%;
 
+				.chartColumn {
+					display: flex;
+					justify-content: flex-start;
+					width: 53%;
+					height: 100%;
+					margin-right: 15px;
+				}
+
 				.list {
 					width: 100%;
 					overflow-y: auto;
@@ -1,3 +1,9 @@
+/* Yandex Metrika noscript pixel (off-screen) */
+.metrika-pixel-hidden {
+	position: absolute;
+	left: -9999px;
+}
+
 :root {
 	--air-color: #8280ff;
 	--background-color-main: #303030;
@@ -34,7 +34,7 @@ export function AudioModelCard({
 
 	return (
 		<Link href={link}>
-			<div className={c(styles.card, blocked && styles.card_blocked)} style={{ userSelect: blocked ? 'none' : 'auto' }}>
+			<div className={c(styles.card, blocked ? styles.card_blocked : styles.card_selectable)}>
 				<div>
 					<Image src={image || '/model-preview.png'} width={400} height={200} alt={title} className={styles.card__image} priority />
 				</div>
@@ -181,3 +181,11 @@
 		letter-spacing: -1%;
 	}
 }
+
+.card_blocked {
+	user-select: none;
+}
+
+.card_selectable {
+	user-select: auto !important;
+}
@@ -179,3 +179,11 @@
 		letter-spacing: -1%;
 	}
 }
+
+.card_blocked {
+	user-select: none;
+}
+
+.card_selectable {
+	user-select: auto !important;
+}
@@ -25,8 +25,7 @@ export function ChatModelCard({ description, image, title, slug, accessed_models
 		<Link href={link}>
 			<div 
 				id={slug === 'chatgpt' ? 'text-models-tour-1' : undefined}
-				className={c(styles.card, blocked && styles.card_blocked)} 
-				style={{ userSelect: blocked ? 'none' : 'auto' }}
+				className={c(styles.card, blocked ? styles.card_blocked : styles.card_selectable)}
 			>
 				<div>
 					<Image src={image || '/model-preview.png'} width={70} height={70} alt={title} className={styles.card__image} />
@@ -25,8 +25,7 @@ export function ImageModelCard({ description, image, title, slug, accessed_model
 		<Link href={link}>
 			<div 
 				id={slug === 'flux' ? 'images-models-tour-1' : undefined}
-				className={c(styles.card, blocked && styles.card_blocked)} 
-				style={{ userSelect: blocked ? 'none' : 'auto' }}
+				className={c(styles.card, blocked ? styles.card_blocked : styles.card_selectable)}
 			>
 				<div>
 					<Image src={image || '/model-preview.png'} width={400} height={200} alt={title} className={styles.card__image} priority />
@@ -23,7 +23,7 @@ export function VideoModelCard({ description, image, title, slug, accessed_model
 
 	return (
 		<Link href={link}>
-			<div className={c(styles.card, blocked && styles.card_blocked)} style={{ userSelect: blocked ? 'none' : 'auto' }}>
+			<div className={c(styles.card, blocked ? styles.card_blocked : styles.card_selectable)}>
 				<div>
 					<Image src={image || '/model-preview.png'} width={400} height={200} alt={title} className={styles.card__image} priority />
 				</div>
@@ -77,7 +77,7 @@ export const LimitModal: React.FC<LimitModalProps> = ({
 			}}
 		>
 			<Typography sx={{ marginBottom: '30px' }} className={styles.titleModalLimit}>
-				Сотрудник <span style={{ color: '#7f7df3' }}>{person?.email}</span>
+				Сотрудник <span className={styles.emailAccent}>{person?.email}</span>
 			</Typography>
 
 			<Box className={styles.modalWrap}>
@@ -79,10 +79,10 @@ export const BusinessErrorReportPlate = () => {
 										onChange={handleFileChange}
 										type='file'
 										accept='.jpg,.jpeg,.png'
-										style={{ display: 'none' }}
+										className={styles.fileInputHidden}
 										id='business-error-report-file-input'
 									/>
-									<label htmlFor='business-error-report-file-input' style={{ cursor: 'pointer' }}>
+									<label htmlFor='business-error-report-file-input' className={styles.fileInputLabel}>
 										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
 									</label>
 								</button>
@@ -120,6 +120,14 @@
 	}
 }
 
+.fileInputHidden {
+	display: none;
+}
+
+.fileInputLabel {
+	cursor: pointer;
+}
+
 .textarea {
 	&__file {
 		background: rgba(255, 255, 255, 0.06);
@@ -40,10 +40,10 @@ export const ErrorReportPlate = () => {
 										onChange={handleFileChange}
 										type='file'
 										accept='.jpg,.jpeg,.png'
-										style={{ display: 'none' }}
+										className={styles.fileInputHidden}
 										id='file-input'
 									/>
-									<label htmlFor='file-input' style={{ cursor: 'pointer' }}>
+									<label htmlFor='file-input' className={styles.fileInputLabel}>
 										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
 									</label>
 								</button>
@@ -60,27 +60,10 @@ export default function FullScreenModal({
 
 	return (
 		<div
-			style={{
-				position: 'fixed',
-				zIndex: 1201,
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				display: modal ? 'block' : 'none',
-			}}
+			className={c(styles.overlayRoot, modal ? styles.overlayRoot_open : styles.overlayRoot_closed)}
 			onClick={() => setModal(false)}
 		>
-			<div
-				style={{
-					position: 'absolute',
-					zIndex: 101,
-					width: '100%',
-					height: '100%',
-					backgroundColor: '#000000',
-					opacity: 0.9,
-				}}
-			></div>
+			<div className={styles.overlayBackdrop}></div>
 			<div className={styles.actions}>
 				<div>
 					<svg
@@ -1,3 +1,29 @@
+.overlayRoot {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1201;
+}
+
+.overlayRoot_open {
+	display: block;
+}
+
+.overlayRoot_closed {
+	display: none;
+}
+
+.overlayBackdrop {
+	position: absolute;
+	z-index: 101;
+	width: 100%;
+	height: 100%;
+	background-color: #000000;
+	opacity: 0.9;
+}
+
 .close_block {
 }
 .download {
@@ -3,6 +3,8 @@ import Image from 'next/image'
 
 import styles from './modal-styles.module.scss'
 
+import { c } from '#/shared/lib/helpers'
+
 interface IProps {
 	modal: boolean
 	setModal: Dispatch<SetStateAction<boolean>>
@@ -15,27 +17,8 @@ export default function FullScreenModal({ modal, setModal, image }: IProps) {
 	}, [])
 
 	return (
-		<div
-			style={{
-				position: 'fixed',
-				zIndex: 102,
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				display: modal ? 'block' : 'none',
-			}}
-		>
-			<div
-				style={{
-					position: 'absolute',
-					zIndex: 101,
-					width: '100%',
-					height: '100%',
-					backgroundColor: '#000000',
-					opacity: 0.9,
-				}}
-			></div>
+		<div className={c(styles.overlayRoot, modal ? styles.overlayRoot_open : styles.overlayRoot_closed)}>
+			<div className={styles.overlayBackdrop}></div>
 			<div className={styles.close_block} onClick={() => setModal(false)}>
 				<svg
 					width='20'
@@ -19,6 +19,32 @@
     height: fit-content;
 }
 
+.overlayRoot {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 102;
+}
+
+.overlayRoot_open {
+	display: block;
+}
+
+.overlayRoot_closed {
+	display: none;
+}
+
+.overlayBackdrop {
+	position: absolute;
+	z-index: 101;
+	width: 100%;
+	height: 100%;
+	background-color: #000000;
+	opacity: 0.9;
+}
+
 .image_style{
     position: relative;
     width: 100%;
@@ -75,6 +75,10 @@
 		&_secondary {
 			background-color: #373737;
 		}
+
+		&_customBg {
+			background-color: var(--template-content-bg, var(--new-ui-main-color));
+		}
 	}
 
 	// &__header {
@@ -65,9 +65,14 @@ export default function PlatesTemplate({
 						styles['template__content'],
 						animationClass,
 						modal.state ? '' : animationBehaviorClass,
-						styles[`template__content_${variant}`]
+						styles[`template__content_${variant}`],
+						contentBackgroundColor && styles['template__content_customBg']
 					)}
-					style={contentBackgroundColor ? { backgroundColor: contentBackgroundColor } : undefined}
+					style={
+						contentBackgroundColor
+							? ({ '--template-content-bg': contentBackgroundColor } as React.CSSProperties)
+							: undefined
+					}
 					onClick={(e) => e.stopPropagation()}
 				>
 					<button
@@ -8,6 +8,14 @@
 	border: 2px solid rgb(66, 66, 72) !important;
 }
 
+.wrapperImages {
+	background-color: #151518;
+}
+
+.wrapperTransparent {
+	background-color: transparent;
+}
+
 .settingsIcon {
 	min-width: 21px;
 	min-height: 21px;
@@ -2,6 +2,8 @@ import React, { FC, useCallback, useEffect, useRef } from 'react'
 import { TextFieldProps } from '@mui/material/TextField/TextField'
 
 import classes from './model-input.module.scss'
+
+import { c } from '#/shared/lib/helpers'
 import { PredictPrice } from './predict-price'
 
 import { LoadImage } from '#/app/components/input_components/load_image'
@@ -231,10 +233,7 @@ export const ModelInput: FC<Input & TextFieldProps> = ({
 	return (
 		<>
 		<div
-			className={classes.wrapper}
-			style={{
-				backgroundColor: styles === 'images' ? '#151518' : 'transparent',
-			}}
+			className={c(classes.wrapper, styles === 'images' ? classes.wrapperImages : classes.wrapperTransparent)}
 		>
 			{!desktop && (
 				<svg
@@ -0,0 +1,30 @@
+.passwordToggle {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+
+.formLoader {
+	margin: 25px auto;
+	display: flex;
+	justify-content: center;
+}
+
+.submitButton {
+	margin-top: 25px;
+}
+
+.agreementText {
+	margin-top: 15px;
+	font-size: 15px;
+	color: #868686;
+}
+
+.policyLink {
+	color: var(--air-color);
+}
+
+.loginLink {
+	text-decoration: none;
+	color: #7f7df3;
+}
@@ -20,6 +20,8 @@ import { getApiUrl } from '#/shared/lib/constants'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { useDeviceType } from '#/shared/lib/hooks/use-device-type'
 
+import styles from './register-email-form.module.scss'
+
 interface IRegisterEmailFormProps {
 	successLogin: () => void
 }
@@ -136,14 +138,7 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 				InputProps={{
 					endAdornment: (
 						<InputAdornment position='start'>
-							<div
-								onClick={() => showPassword((x) => !x)}
-								style={{
-									cursor: 'pointer',
-									display: 'flex',
-									alignItems: 'center',
-								}}
-							>
+							<div onClick={() => showPassword((x) => !x)} className={styles.passwordToggle}>
 								{passwordShowed ? (
 									<ClosedEyeSvg width={24} height={24} color='grey' />
 								) : (
@@ -191,21 +186,13 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 
 			<Box sx={{ width: '100%' }}>
 				{loading ? (
-					<Box
-						style={{
-							margin: '25px auto',
-							display: 'flex',
-							justifyContent: 'center',
-						}}
-					>
+					<Box className={styles.formLoader}>
 						<CircularProgress size={30} thickness={5} sx={{ color: '#7F7DF3' }} />
 					</Box>
 				) : (
 					<Button
 						variant='contained'
-						style={{
-							marginTop: '25px',
-						}}
+						className={styles.submitButton}
 						sx={{
 							backgroundColor: '#7F7DF3',
 							color: '#FFFFFF',
@@ -227,13 +214,13 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 					</Button>
 				)}
 			</Box>
-			<p style={{ marginTop: '15px', fontSize: 15, color: '#868686' }}>
+			<p className={styles.agreementText}>
 				<span>Регистрируясь, вы соглашаетесь с условиями&nbsp;</span>
-				<Link style={{ color: 'var(--air-color)' }} href='https://air.fail/personal'>
+				<Link className={styles.policyLink} href='https://air.fail/personal'>
 					Политики обработки персональных данных&nbsp;
 				</Link>
 				<span>и&nbsp;</span>
-				<Link style={{ color: 'var(--air-color)' }} href='https://air.fail/offer'>
+				<Link className={styles.policyLink} href='https://air.fail/offer'>
 					Публичной офертой
 				</Link>
 			</p>
@@ -245,13 +232,7 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 					}}
 				>
 					Есть аккаунт?{' '}
-					<Link
-						href='/login'
-						style={{
-							textDecoration: 'none',
-							color: '#7F7DF3',
-						}}
-					>
+					<Link href='/login' className={styles.loginLink}>
 						Войти
 					</Link>
 				</Typography>
@@ -10,3 +10,13 @@
 		}
 	}
 }
+
+.titleActions {
+	display: flex;
+	align-items: center;
+	gap: 20px;
+}
+
+.titleActionsInner {
+	width: 100%;
+}
@@ -26,8 +26,8 @@ export default function Title(props: TitleProps) {
 					&nbsp;{props.title}
 				</Typography>
 			</Box>
-			<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
-				<div style={{ width: '100%' }} className={styles['title-box']}>
+			<div className={styles.titleActions}>
+				<div className={`${styles.titleActionsInner} ${styles['title-box']}`}>
 					{props.rightSlot}
 				</div>
 			</div>
@@ -0,0 +1,3 @@
+.tutorialIcon {
+	cursor: pointer;
+}
@@ -7,6 +7,8 @@ import { options, steps } from '../lib/constants'
 
 import TooltipMy from './tooltip'
 
+import styles from './tutorial.module.scss'
+
 export const Tutorial = () => {
 	const [enabled, setEnabled] = React.useState(false)
 
@@ -18,7 +20,7 @@ export const Tutorial = () => {
 	return (
 		<>
 			<TooltipMy begin={() => setEnabled(true)}>
-				<Image style={{ cursor: 'pointer' }} src={'/svg/tutorial.svg'} alt={''} width={25} height={25} />
+				<Image className={styles.tutorialIcon} src={'/svg/tutorial.svg'} alt={''} width={25} height={25} />
 			</TooltipMy>
 
 			<Steps
@@ -0,0 +1,11 @@
+.yandexIcon {
+	margin-right: 15px;
+}
+
+.yandexButton {
+	transition: opacity 0.3s ease-in-out;
+
+	&:hover {
+		opacity: 0.7;
+	}
+}
@@ -1,17 +1,16 @@
 import { Button } from '@mui/material'
 import { signIn } from 'next-auth/react'
 import Image from 'next/image'
-import React, { useState } from 'react'
+import React from 'react'
+
+import styles from './yandex-auth-button.module.scss'
 
 interface YandexAuthButtonProps {}
 
 export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
-	const [hovered, setHovered] = useState(false)
-
 	return (
 		<Button
-			onMouseEnter={() => setHovered(true)}
-			onMouseLeave={() => setHovered(false)}
+			className={styles.yandexButton}
 			data-testid='yandex-auth-button'
 			variant='contained'
 			onClick={async () => {
@@ -20,7 +19,6 @@ export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
 					redirect: false,
 				})
 			}}
-			style={{ opacity: hovered ? 0.7 : 1 }}
 			sx={{
 				backgroundColor: '#1C1C1E',
 				color: 'white',
@@ -40,7 +38,7 @@ export const YandexAuthButton = ({}: YandexAuthButtonProps) => {
 				},
 			}}
 		>
-			<Image src={'/svg/auth/yandex.svg'} alt={''} style={{ marginRight: 15 }} width={26} height={26} />
+			<Image src={'/svg/auth/yandex.svg'} alt={''} className={styles.yandexIcon} width={26} height={26} />
 			Войти с Яндекс ID
 		</Button>
 	)
@@ -29,7 +29,7 @@ export default function Document() {
 					<div>
 						<img
 							src='https://mc.yandex.ru/watch/93475901'
-							style={{ position: 'absolute', left: '-9999px' }}
+							className='metrika-pixel-hidden'
 							alt=''
 						/>
 					</div>
@@ -1,3 +1,7 @@
+.clickableIcon {
+	cursor: pointer;
+}
+
 .wrap {
 	width: 85%;
 
@@ -0,0 +1,3 @@
+.fileInputHidden {
+	display: none;
+}
@@ -9,6 +9,8 @@ import Image from 'next/image'
 import { Calculation } from '#/features/calculation-tokens-gpt'
 import { styleInputWithoutBorderFocus } from '#/shared/ui/input'
 
+import styles from './input-images-models.module.scss'
+
 interface Input {
 	loading: boolean
 	requestImage: () => void
@@ -60,7 +62,7 @@ export const InputImagesModels: FC<Input & TextFieldProps> = ({
 				<input
 					type='file'
 					ref={ref}
-					style={{ display: 'none' }}
+					className={styles.fileInputHidden}
 					accept='image/png, image/jpeg, application/zip'
 					onChange={imageLoad}
 					alt='Загрузка изображения'
@@ -1,3 +1,7 @@
+.searchIcon {
+	margin-right: 15px;
+}
+
 .search {
 	div {
 		border-radius: 15px;
@@ -14,7 +14,7 @@ export const Search = (props: TextFieldProps) => {
 			{...props}
 			InputProps={{
 				endAdornment: (
-					<Image src={'/search.svg'} style={{ marginRight: '15px' }} width={20} height={20} alt={'1'} />
+					<Image src={'/search.svg'} className={styles.searchIcon} width={20} height={20} alt={'1'} />
 				),
 			}}
 		/>
@@ -0,0 +1,3 @@
+.sliderFullWidth {
+	width: 100%;
+}
@@ -4,6 +4,8 @@ import Box from '@mui/material/Box'
 
 import { PrettoSliderDark } from '#/widgets/filters-gpt/ui/filters'
 
+import styles from './slider.module.scss'
+
 export const Slider = ({
 	value,
 	title,
@@ -41,7 +43,7 @@ export const Slider = ({
 			<Box sx={{ marginLeft: 0 }}>
 				<PrettoSliderDark
 					onChangeCommitted={onChangeCommitted}
-					style={{ width: '100%' }}
+					className={styles.sliderFullWidth}
 					value={value}
 					onChange={onChange}
 					max={max}
@@ -0,0 +1,5 @@
+.iconWrap {
+	/* min-width/min-height задаются через CSS-переменные */
+	min-width: var(--icon-min-width);
+	min-height: var(--icon-min-height);
+}
@@ -1,6 +1,8 @@
 import axios from 'axios'
 import { useState, useEffect, HtmlHTMLAttributes } from 'react'
 
+import styles from './dynamic-svg.module.scss'
+
 export interface SvgIconProps extends HtmlHTMLAttributes<HTMLDivElement> {
 	width?: string | number
 	height?: string | number
@@ -26,7 +28,13 @@ export function SvgIcon({ url, color, width, height, ...props }: SvgIconProps) {
 	return (
 		<div
       {...props}
-			style={{ minWidth: width, minHeight: height }}
+			className={styles.iconWrap}
+			style={
+				{
+					'--icon-min-width': typeof width === 'number' ? `${width}px` : width,
+					'--icon-min-height': typeof height === 'number' ? `${height}px` : height,
+				} as React.CSSProperties
+			}
 			dangerouslySetInnerHTML={{
 				__html: `${svgContent}`,
 			}}
@@ -0,0 +1,5 @@
+.triggerFullWidth {
+	display: flex;
+	width: 100%;
+	min-width: 0;
+}
@@ -1,6 +1,10 @@
 import React, { useState } from 'react'
 import { ClickAwayListener, Tooltip, useMediaQuery } from '@mui/material'
 
+import styles from './tooltip.module.scss'
+
+import { c } from '#/shared/lib/helpers'
+
 interface Props {
 	title?: string
 	children: React.ReactNode
@@ -43,10 +47,6 @@ export const TooltipCustom: React.FC<Props> = ({
 	const tapMode = Boolean(tapToOpenOnMobile && isTouchPrimary)
 	const [tapOpen, setTapOpen] = useState(false)
 
-	const triggerSpanStyle: React.CSSProperties | undefined = fullWidthTrigger
-		? { display: 'flex', width: '100%', minWidth: 0 }
-		: undefined
-
 	const tooltip = (
 		<Tooltip
 			open={tapMode ? tapOpen : undefined}
@@ -87,7 +87,7 @@ export const TooltipCustom: React.FC<Props> = ({
 			placement={placement}
 		>
 			<span
-				style={triggerSpanStyle}
+				className={fullWidthTrigger ? styles.triggerFullWidth : undefined}
 				onClick={
 					tapMode
 						? (e) => {
@@ -0,0 +1,3 @@
+.policyLink {
+	color: #7f7df3;
+}
@@ -3,6 +3,8 @@ import { UseFormRegister } from 'react-hook-form/dist/types/form'
 import { Box, Checkbox, FormHelperText, Typography } from '@mui/material'
 import Link from 'next/link'
 
+import styles from './check-box-agree-with-rules.module.scss'
+
 interface ICheckBoxAgreeWithRulesProps {
 	isAgree?: boolean
 	changeAgree?: () => void
@@ -46,21 +48,11 @@ export const CheckBoxAgreeWithRules: React.FC<ICheckBoxAgreeWithRulesProps> = ({
 				>
 					{' '}
 					Я соглашаюсь с условиями{' '}
-					<Link
-						href='https://air.fail/personal'
-						style={{
-							color: '#7F7DF3',
-						}}
-					>
+					<Link href='https://air.fail/personal' className={styles.policyLink}>
 						Политики обработки персональных данных
 					</Link>{' '}
 					и{' '}
-					<Link
-						style={{
-							color: '#7F7DF3',
-						}}
-						href='https://air.fail/offer'
-					>
+					<Link className={styles.policyLink} href='https://air.fail/offer'>
 						Публичной офертой
 					</Link>
 				</Typography>
@@ -0,0 +1,13 @@
+.errorIcon {
+	margin-top: 2.5px;
+}
+
+.errorSnackbar {
+	z-index: 100000;
+	max-width: 335px;
+}
+
+.errorSnackbarDesktop {
+	z-index: 100000;
+	max-width: 500px;
+}
@@ -7,12 +7,14 @@ import { CSSTransition } from 'react-transition-group'
 import { useShowDataStore } from '../lib/hooks/use-show-data'
 import SuccessSvg from '#/assets/svg/success.svg?react'
 
+import styles from './error.module.scss'
+
 export interface IError {
 	handleClose?: () => void
 }
 
 const ErrorIcon = () => {
-	return <Image src={`/error2.svg`} alt={''} width={20} height={20} style={{ marginTop: 2.5 }} />
+	return <Image src={`/error2.svg`} alt={''} width={20} height={20} className={styles.errorIcon} />
 }
 
 export const Error: React.FC<IError> = ({ handleClose }) => {
@@ -23,10 +25,7 @@ export const Error: React.FC<IError> = ({ handleClose }) => {
 	return (
 		<CSSTransition nodeRef={nodeRef} in={isOpened} timeout={400} unmountOnExit classNames='my-node'>
 			<Snackbar
-				style={{ 
-					zIndex: 100000,
-					maxWidth: isDesktop ? '500px' : '335px',
-					 }}
+				className={isDesktop ? styles.errorSnackbarDesktop : styles.errorSnackbar}
 				anchorOrigin={{ vertical: 'top', horizontal:'right' }}
 				open={isOpened}
 				onClose={handleClose}
@@ -0,0 +1,3 @@
+.selectTransparent {
+	background-color: transparent;
+}
@@ -4,6 +4,8 @@ import { MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/mat
 
 import { baseColor } from '#/shared/lib/constants/colors'
 
+import styles from './select.module.scss'
+
 interface ISelect {
 	value: any
 	onChange: (e: SelectChangeEvent<string>) => void
@@ -43,9 +45,7 @@ export const SelectUI: React.FC<ISelect> = ({
 						},
 					},
 				}}
-				style={{
-					backgroundColor: 'transparent',
-				}}
+				className={styles.selectTransparent}
 				sx={{
 					boxShadow: 'none',
 					borderRadius: '13px',
@@ -0,0 +1,6 @@
+.freeTokensAlert {
+	background: linear-gradient(91.87deg, #7f7df3 0%, #d372a1 95.23%);
+	color: white;
+	border-radius: 10px;
+	padding: 7px 16px;
+}
@@ -3,6 +3,8 @@ import CloseIcon from '@mui/icons-material/Close'
 import { Alert, Collapse, IconButton } from '@mui/material'
 import Link from 'next/link'
 
+import styles from './tooltip-free-tokens.module.scss'
+
 export const TooltipFreeTokens = () => {
 	const [open, setOpen] = React.useState(() => {
 		if (typeof window !== 'undefined') {
@@ -39,12 +41,7 @@ export const TooltipFreeTokens = () => {
 			<Link href={'/register'}>
 				<Alert
 					icon={false}
-					style={{
-						background: 'linear-gradient(91.87deg, #7F7DF3 0%, #D372A1 95.23%)',
-						color: 'white',
-						borderRadius: '10px',
-						padding: '7px 16px',
-					}}
+					className={styles.freeTokensAlert}
 					action={
 						<IconButton
 							aria-label='close'
@@ -0,0 +1,13 @@
+.fileInputHidden {
+	display: none;
+}
+
+.changePasswordButton {
+	width: 150px;
+}
+
+.deleteAccountButton {
+	width: 100%;
+	background-color: rgba(255, 35, 114, 0.1);
+	color: #ff2372;
+}
@@ -10,6 +10,8 @@ import { signOut, useSession } from 'next-auth/react'
 import { useAppDispatch, useAppSelector } from '#/app/store/store'
 import styles2 from '#/app/styles/accountTabs.module.css'
 import styles from '#/app/styles/business.module.scss'
+
+import accountStyles from './account.module.scss'
 import { getUserBalance } from '#/entities/balance'
 import { getAllInfo, unfollowEmail } from '#/entities/user-account/model/user-type-slice'
 import { DownloadModal } from '#/features/business-security-download'
@@ -323,7 +325,7 @@ const Account: NextPageWithLayout = () => {
 											<input
 												type='file'
 												ref={fileInputRef}
-												style={{ display: 'none' }}
+												className={accountStyles.fileInputHidden}
 												onChange={handleFileChange}
 												accept='image/*'
 											/>
@@ -457,7 +459,7 @@ const Account: NextPageWithLayout = () => {
 											onClick={changePassword}
 											sx={{ marginTop: '20px' }}
 											text={'Изменить пароль'}
-											style={{ width: '150px' }}
+											className={accountStyles.changePasswordButton}
 										/>
 									</Box>
 								</Box>
@@ -470,11 +472,7 @@ const Account: NextPageWithLayout = () => {
 									onClick={() => setConfirmDeleteModal(true)}
 									sx={{ marginTop: '20px' }}
 									text={'Удалить аккаунт'}
-									style={{
-										width: '100%',
-										backgroundColor: 'rgba(255, 35, 114, 0.10)',
-										color: '#FF2372',
-									}}
+									className={accountStyles.deleteAccountButton}
 								/>
 							</Stack>
 
@@ -4,6 +4,7 @@ import Image from 'next/image'
 import { useSession } from 'next-auth/react'
 
 import { TooltipCustom } from '#/shared'
+import styles from '#/shared/styles/api-keys.module.scss'
 import { getApiUrl } from '#/shared/lib/constants'
 import { InputStyleSmallDark } from '#/shared/ui/input'
 import axios from 'axios'
@@ -127,7 +128,7 @@ export const CopyButton: React.FC<{
 				src={'/svg/copy.svg'}
 				width={20}
 				height={20}
-				style={{ cursor: 'pointer' }}
+				className={styles.clickableIcon}
 				alt={'copy'}
 			/>
 		</TooltipCustom>
@@ -166,7 +166,7 @@ const KeyRow: React.FC<KeyRowProps> = ({ id, name, keyValue, limit, createdAt, e
 						<TooltipCustom title={'Удалить ключ'}>
 							<Image
 								onClick={() => onDelete(name)}
-								style={{ cursor: 'pointer' }}
+								className={styles.clickableIcon}
 								src='/svg/main_menu/trash.svg'
 								width={20}
 								height={20}
@@ -120,7 +120,7 @@ const KeyCard: React.FC<KeyCardProps> = ({ id, name, keyValue, limit, createdAt,
 					<TooltipCustom title={'Удалить ключ'}>
 						<Image
 							onClick={() => onDelete(name)}
-							style={{ cursor: 'pointer' }}
+							className={styles.clickableIcon}
 							src='/svg/main_menu/trash.svg'
 							width={20}
 							height={20}
@@ -16,6 +16,23 @@
 	}
 }
 
+.loaderCenter {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.messagesWrap {
+	position: relative;
+	border-radius: 13px;
+}
+
+.scrollAnchor {
+	position: absolute;
+	top: 300px;
+}
+
 .staticTabsWrapper {
 	display: flex;
 	align-items: center;
@@ -264,18 +264,11 @@ const AudioModelPage: NextPageWithLayout = () => {
 					) : (
 						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
 							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
-								<div
-									style={{
-										position: 'absolute',
-										top: '50%',
-										left: '50%',
-										transform: 'translate(-50%, -50%)',
-									}}
-								>
+								<div className={styles.loaderCenter}>
 									<Loader />
 								</div>
 							</div>
-							<div style={{ position: 'relative', borderRadius: '13px' }}>
+							<div className={styles.messagesWrap}>
 								<Box
 									sx={{
 										padding: '30px',
@@ -288,7 +281,7 @@ const AudioModelPage: NextPageWithLayout = () => {
 									className={'smallScroll'}
 								>
 									<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
-										<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+										<div className={styles.scrollAnchor} ref={refScrollMobile}></div>
 										<AudioMessagesList device={deviceType} audios={messages} getMessagesPagination={fetchMessages} onPromptClick={(content) => setPrompt(content)} />
 									</Box>
 
@@ -0,0 +1,17 @@
+.closeLink {
+	position: absolute;
+	top: 45px;
+	right: 7%;
+	cursor: pointer;
+	font-size: 17px;
+}
+
+.linkAccent {
+	color: #7f7df3;
+	font-size: 17px;
+	text-decoration: none;
+}
+
+.submitButton {
+	margin-top: 18px;
+}
@@ -9,6 +9,8 @@ import { getApiUrl } from '#/shared/lib/constants'
 import { getDeviceType, getRandomImage } from '#/shared/lib/helpers'
 import { NextPageWithLayout } from '#/pages/_app'
 
+import styles from './change-password.module.scss'
+
 const ChangePassword: NextPageWithLayout = () => {
 	const device = getDeviceType()
 
@@ -90,16 +92,7 @@ const ChangePassword: NextPageWithLayout = () => {
 					backgroundColor: '#373737',
 				}}
 			>
-				<Link
-					style={{
-						position: 'absolute',
-						top: 45,
-						right: '7%',
-						cursor: 'pointer',
-						fontSize: 17,
-					}}
-					href={'/'}
-				>
+				<Link className={styles.closeLink} href={'/'}>
 					<Image src={'/x-mark.svg'} width={18} height={18} alt={''} />
 				</Link>
 				{desktop && (
@@ -161,7 +154,7 @@ const ChangePassword: NextPageWithLayout = () => {
 						>
 							Ваш пароль успешно изменён!
 						</Typography>
-						<Link style={{ color: '#7F7DF3', fontSize: 17 }} href={'/login'}>
+						<Link className={styles.linkAccent} href={'/login'}>
 							Войти в аккаунт
 						</Link>
 					</Box>
@@ -251,9 +244,7 @@ const ChangePassword: NextPageWithLayout = () => {
 						<Box>
 							<Button
 								variant='contained'
-								style={{
-									marginTop: '18px',
-								}}
+								className={styles.submitButton}
 								sx={{
 									backgroundColor: '#7F7DF3',
 									color: '#FFFFFF',
@@ -0,0 +1,5 @@
+.linkAccent {
+	color: #7f7df3;
+	font-size: 17px;
+	text-decoration: none;
+}
@@ -6,6 +6,8 @@ import { useRouter } from 'next/router'
 
 import { getApiUrl } from '#/shared/lib/constants'
 import { NextPageWithLayout } from '#/pages/_app'
+
+import styles from './confirm.module.scss'
 import { signIn } from 'next-auth/react'
 
 const Confirm: NextPageWithLayout = () => {
@@ -60,7 +62,7 @@ const Confirm: NextPageWithLayout = () => {
 							<br />
 							Уже получили сообщение об ошибке, пожалуйста - повторите попытку позже
 						</Typography>
-						<Link style={{ color: '#7F7DF3', fontSize: 17 }} href={'/login'}>
+						<Link className={styles.linkAccent} href={'/login'}>
 							Вернуться к авторизации
 						</Link>
 					</>
@@ -32,6 +32,10 @@
 	z-index: 0;
 }
 
+.promoImage {
+	object-fit: cover;
+}
+
 .overlay {
 	position: absolute;
 	top: 0;
@@ -46,7 +46,7 @@ export const PromoCard: React.FC<PromoCardProps> = ({ card, isDesktop, flex = 1
 					fill
 					sizes={isDesktop ? '(max-width: 1200px) 50vw, 33vw' : '100%'}
 					priority
-					style={{ objectFit: 'cover' }}
+					className={styles.promoImage}
 				/>
 				<Box className={styles.overlay} />
 			</Box>
@@ -16,6 +16,23 @@
 	}
 }
 
+.loaderCenter {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.messagesWrap {
+	position: relative;
+	border-radius: 13px;
+}
+
+.scrollAnchor {
+	position: absolute;
+	top: 300px;
+}
+
 .header {
 	display: flex;
 	align-items: center;
@@ -252,18 +252,11 @@ const ImageModelPage: NextPageWithLayout = () => {
 					) : (
 						<Box id='images-models-tour-5' className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
 							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
-								<div
-									style={{
-										position: 'absolute',
-										top: '50%',
-										left: '50%',
-										transform: 'translate(-50%, -50%)',
-									}}
-								>
+								<div className={styles.loaderCenter}>
 									<Loader />
 								</div>
 							</div>
-							<div style={{ position: 'relative', borderRadius: '13px' }}>
+							<div className={styles.messagesWrap}>
 								<Box
 									sx={{
 										padding: '30px',
@@ -278,7 +271,7 @@ const ImageModelPage: NextPageWithLayout = () => {
 								>
 									<Box sx={{ display: scope === 'playground' ? 'block' : 'none', }}>
 
-									<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+									<div className={styles.scrollAnchor} ref={refScrollMobile}></div>
 										<ImageMessagesList
 											isComplete={loading}
 											device={deviceType}
@@ -214,4 +214,39 @@
 	font-size: 20px;
 	text-align: center;
 	white-space: pre-line;
+}
+
+.logoMobile {
+	margin-top: 80px;
+}
+
+.linkAccent {
+	text-decoration: none;
+	color: #7f7df3;
+}
+
+.passwordToggle {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+
+.loginSubmitButton {
+	margin-top: 15px;
+}
+
+.loginLoader {
+	margin: 25px auto;
+	display: flex;
+	justify-content: center;
+}
+
+.promoDashboardImage {
+	border-radius: 20px;
+	position: relative;
+	z-index: 1000;
+	bottom: -260px;
+	right: -390px;
+	border: 10px solid rgba(255, 255, 255, 0.3);
+	transform: rotate(-13deg);
 }
\ No newline at end of file
@@ -114,7 +114,7 @@ const Login: NextPageWithLayout = () => {
 			>
 				{!desktop && (
 					<Image
-						style={{ marginTop: desktop ? 0 : '80px' }}
+						className={styles.logoMobile}
 						src={'/logo.svg'}
 						alt={''}
 						width={50}
@@ -218,13 +218,7 @@ const Login: NextPageWithLayout = () => {
 												fontWeight: '500',
 											}}
 										>
-											<Link
-												href='/reset'
-												style={{
-													textDecoration: 'none',
-													color: '#7F7DF3',
-												}}
-											>
+											<Link href='/reset' className={styles.linkAccent}>
 												Забыли пароль?
 											</Link>
 										</Typography>
@@ -240,11 +234,7 @@ const Login: NextPageWithLayout = () => {
 													onClick={() =>
 														showPassword((x) => !x)
 													}
-													style={{
-														cursor: 'pointer',
-														display: 'flex',
-														alignItems: 'center',
-													}}
+													className={styles.passwordToggle}
 												>
 													{passwordShowed ? (
 														<ClosedEyeSvg
@@ -272,9 +262,7 @@ const Login: NextPageWithLayout = () => {
 									{!loading ? (
 										<Button
 											variant='contained'
-											style={{
-												marginTop: '15px',
-											}}
+											className={styles.loginSubmitButton}
 											sx={{
 												backgroundColor: '#7F7DF3',
 												color: '#FFFFFF',
@@ -295,13 +283,7 @@ const Login: NextPageWithLayout = () => {
 											Войти
 										</Button>
 									) : (
-										<Box
-											style={{
-												margin: '25px auto',
-												display: 'flex',
-												justifyContent: 'center',
-											}}
-										>
+										<Box className={styles.loginLoader}>
 											<CircularProgress
 												size={30}
 												thickness={5}
@@ -316,13 +298,7 @@ const Login: NextPageWithLayout = () => {
 											marginTop: '15px',
 										}}
 									>
-										<Link
-											href='/register'
-											style={{
-												textDecoration: 'none',
-												color: '#7F7DF3',
-											}}
-										>
+										<Link href='/register' className={styles.linkAccent}>
 											Зарегистрироваться
 										</Link>
 									</Box>
@@ -343,7 +319,7 @@ const Login: NextPageWithLayout = () => {
 						}}
 					>
 						<Image
-							style={{ position: 'absolute', top: 35, left: 35 }}
+							className={styles.imageboxLogo}
 							src={'/svg/logo.svg'}
 							alt={''}
 							width={42}
@@ -354,15 +330,7 @@ const Login: NextPageWithLayout = () => {
 							alt={''}
 							width={900}
 							height={1002}
-							style={{
-								borderRadius: '20px',
-								position: 'relative',
-								zIndex: 1000,
-								bottom: -260,
-								right: -390,
-								border: '10px solid rgba(255, 255, 255, 0.30)',
-								transform: 'rotate(-13deg)',
-							}}
+							className={styles.promoDashboardImage}
 						/>
 					</Box>
 				)}
@@ -8,4 +8,24 @@
   @media screen and (max-width: 1000px) {
     width: 100%;
 	}
+}
+
+.logoMobile {
+	margin-top: 20px;
+}
+
+.imageboxLogo {
+	position: absolute;
+	top: 35px;
+	left: 35px;
+}
+
+.promoDashboardImage {
+	border-radius: 20px;
+	position: relative;
+	z-index: 1000;
+	bottom: -260px;
+	right: -390px;
+	border: 10px solid rgba(255, 255, 255, 0.3);
+	transform: rotate(-13deg);
 }
\ No newline at end of file
@@ -57,7 +57,7 @@ const Register: NextPageWithLayout = () => {
 		>
 			{!desktop && (
 				<Image
-					style={{ marginTop: desktop ? 0 : '20px' }}
+					className={styles.logoMobile}
 					src={'/logo.svg'}
 					alt={''}
 					width={50}
@@ -137,7 +137,7 @@ const Register: NextPageWithLayout = () => {
 					}}
 				>
 					<Image
-						style={{ position: 'absolute', top: 35, left: 35 }}
+						className={styles.imageboxLogo}
 						src={'/svg/logo.svg'}
 						alt={''}
 						width={42}
@@ -148,15 +148,7 @@ const Register: NextPageWithLayout = () => {
 						alt={''}
 						width={900}
 						height={1002}
-						style={{
-							borderRadius: '20px',
-							position: 'relative',
-							zIndex: 1000,
-							bottom: -260,
-							right: -390,
-							border: '10px solid rgba(255, 255, 255, 0.30)',
-							transform: 'rotate(-13deg)',
-						}}
+						className={styles.promoDashboardImage}
 					/>
 				</Box>
 			)}
@@ -70,10 +70,10 @@ const BusinessReportsMobile: NextPageWithLayout = () => {
 										onChange={handleFileChange}
 										type='file'
 										accept='.jpg,.jpeg,.png'
-										style={{ display: 'none' }}
+										className={styles.fileInputHidden}
 										id='business-report-file-input'
 									/>
-									<label htmlFor='business-report-file-input' style={{ cursor: 'pointer' }}>
+									<label htmlFor='business-report-file-input' className={styles.fileInputLabel}>
 										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
 									</label>
 								</button>
@@ -151,4 +151,12 @@
 	&__fileInfo svg {
 		color: rgba(245, 245, 247, 0.85);
 	}
+}
+
+.fileInputHidden {
+	display: none;
+}
+
+.fileInputLabel {
+	cursor: pointer;
 }
\ No newline at end of file
@@ -37,10 +37,10 @@ const ReportsMobile: NextPageWithLayout = () => {
 										onChange={handleFileChange}
 										type='file'
 										accept='.jpg,.jpeg,.png'
-										style={{ display: 'none' }}
+										className={styles.fileInputHidden}
 										id='report-file-input'
 									/>
-									<label htmlFor='report-file-input' style={{ cursor: 'pointer' }}>
+									<label htmlFor='report-file-input' className={styles.fileInputLabel}>
 										<AttachSvg width={25} height={25} color={error ? '#ff2372' : '#868686'} />
 									</label>
 								</button>
@@ -0,0 +1,7 @@
+.closeLink {
+	position: absolute;
+	top: 45px;
+	right: 7%;
+	cursor: pointer;
+	font-size: 17px;
+}
@@ -11,6 +11,8 @@ import { getDeviceType, getRandomImage } from '#/shared/lib/helpers'
 import { NextPageWithLayout } from '#/pages/_app'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 
+import styles from './reset.module.scss'
+
 const Reset: NextPageWithLayout = () => {
 	const device = getDeviceType()
 
@@ -120,16 +122,7 @@ const Reset: NextPageWithLayout = () => {
 							</Typography>
 						</Box>
 						<Input onChange={(event) => set_Email(event.target.value)} type={'email'} fullWidth />
-						<Link
-							style={{
-								position: 'absolute',
-								top: 45,
-								right: '7%',
-								cursor: 'pointer',
-								fontSize: 17,
-							}}
-							href={'/'}
-						>
+						<Link className={styles.closeLink} href={'/'}>
 							<Image src={'/x-mark.svg'} width={18} height={18} alt={''} />
 						</Link>
 						<Box marginTop={2} width='100%'>
@@ -56,7 +56,7 @@ export const CurrentPlanAndBalance = ({
 
 	return (
 		<Stack className={styles.balanceContainer} gap={'20px'}>
-			<Box className={styles.balanceBox} style={{ display: !isIndividual ? 'block' : 'none' }}>
+			<Box className={`${styles.balanceBox} ${!isIndividual ? styles.balanceBox_corporate : styles.balanceBox_hidden}`}>
 				<Stack direction='row' justifyContent='space-between' alignItems='flex-start' sx={{ marginBottom: '15px' }}>
 					<Typography
 						className={styles.subTitle}
@@ -27,6 +27,14 @@
 	flex: 1;
 	border-radius: 15px;
 
+	&_hidden {
+		display: none;
+	}
+
+	&_corporate {
+		display: block;
+	}
+
 	.subTitle {
 		font-weight: 600;
 		font-style: Semi Bold;
@@ -16,6 +16,23 @@
 	}
 }
 
+.loaderCenter {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.messagesWrap {
+	position: relative;
+	border-radius: 13px;
+}
+
+.scrollAnchor {
+	position: absolute;
+	top: 300px;
+}
+
 
 .staticTabsWrapper {
 	display: flex;
@@ -262,18 +262,11 @@ const VideoModelPage: NextPageWithLayout = () => {
 					) : (
 						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
 							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
-								<div
-									style={{
-										position: 'absolute',
-										top: '50%',
-										left: '50%',
-										transform: 'translate(-50%, -50%)',
-									}}
-								>
+								<div className={styles.loaderCenter}>
 									<Loader />
 								</div>
 							</div>
-							<div style={{ position: 'relative', borderRadius: '13px' }}>
+							<div className={styles.messagesWrap}>
 								<Box
 									sx={{
 										padding: '30px',
@@ -287,7 +280,7 @@ const VideoModelPage: NextPageWithLayout = () => {
 									className={'smallScroll'}
 								>
 									<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
-										<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+										<div className={styles.scrollAnchor} ref={refScrollMobile}></div>
 										<VideoMessagesList
 											isComplete={loading}
 											device={deviceType}
@@ -291,4 +291,9 @@
 	border-radius: 12px;
 	background-color: #8280FF1A;
 	color: #8280FF;
+}
+
+.previewAudioPlayer {
+	width: 100%;
+	height: 48px;
 }
\ No newline at end of file
@@ -531,10 +531,7 @@ export function AddVoicePlate({ onSuccess }: AddVoicePlateProps) {
 								content={voiceTitle.trim() || DEFAULT_VOICE_TITLE}
 								buttonText='Скачать аудио'
 								device={desktop ? 'desktop' : 'mobile'}
-								style={{
-									width: '100%',
-									height: '48px',
-								}}
+								className={styles.previewAudioPlayer}
 							>
 								<source src={previewUrl!} type={audioMime(pickedFile!)} />
 								Ваш браузер не поддерживает аудио.
@@ -145,3 +145,11 @@
 		border-color: #827fff;
 	}
 }
+
+.iconBlock {
+	display: block;
+}
+
+.selectTransparent {
+	background-color: transparent;
+}
@@ -438,10 +438,10 @@ export function VoiceCloneSelect({
 									width={18}
 									height={14}
 									alt=''
-									style={{ display: 'block' }}
+									className={styles.iconBlock}
 								/>
 							) : (
-								<VoiceEditPencilIcon style={{ display: 'block' }} />
+								<VoiceEditPencilIcon className={styles.iconBlock} />
 							)}
 						</IconButton>
 						<IconButton
@@ -462,7 +462,7 @@ export function VoiceCloneSelect({
 							aria-label='Удалить голос'
 							aria-expanded={deleteConfirm ? getMediaVoiceOrPresetKey(deleteConfirm.voice) === key : false}
 						>
-							<VoiceDeleteBucketIcon style={{ display: 'block' }} />
+							<VoiceDeleteBucketIcon className={styles.iconBlock} />
 						</IconButton>
 					</Box>
 				) : null}
@@ -567,9 +567,7 @@ export function VoiceCloneSelect({
 					)
 				}}
 				MenuProps={VOICE_SELECT_MENU_PROPS}
-				style={{
-					backgroundColor: 'transparent',
-				}}
+				className={styles.selectTransparent}
 				sx={selectSx}
 				fullWidth
 			>
@@ -16,6 +16,35 @@
 	}
 }
 
+.loaderCenter {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.messagesWrap {
+	position: relative;
+	border-radius: 13px;
+}
+
+.messagesWrap_compact {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.scrollAnchor {
+	position: absolute;
+	top: 300px;
+}
+
+.tabsFullWidth {
+	display: block;
+	width: 100%;
+}
+
 .staticTabsWrapper {
 	display: flex;
 	align-items: center;
@@ -249,7 +249,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 						</div>
 				{desktop && (
 									<Stack className={styles.staticTabsWrapper}>
-											<span style={{ display: 'block', width: '100%' }}>
+											<span className={styles.tabsFullWidth}>
 												<StaticTabsVoiceCloning scope={scope} setScope={setScope} />
 											</span>
 									</Stack>)}
@@ -257,7 +257,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 			
 						{!desktop && (
 						<Stack sx={{ display: 'flex', alignItems: 'center', width: '100%', marginTop: '10px' }}>
-								<span style={{ display: 'block', width: '100%' }}>
+								<span className={styles.tabsFullWidth}>
 									<StaticTabsVoiceCloning scope={scope} setScope={setScope} />
 								</span>
 						</Stack>
@@ -339,14 +339,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 										generationsInitialLoading && scope === 'playground' && styles.container_active
 									)}
 								>
-									<div
-										style={{
-											position: 'absolute',
-											top: '50%',
-											left: '50%',
-											transform: 'translate(-50%, -50%)',
-										}}
-									>
+									<div className={styles.loaderCenter}>
 										<Loader />
 									</div>
 								</div>
@@ -399,25 +392,12 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 									generationsInitialLoading && scope === 'playground' && styles.container_active
 								)}
 							>
-								<div
-									style={{
-										position: 'absolute',
-										top: '50%',
-										left: '50%',
-										transform: 'translate(-50%, -50%)',
-									}}
-								>
+								<div className={styles.loaderCenter}>
 									<Loader />
 								</div>
 							</div>
 							<div
-								style={{
-									position: 'relative',
-									borderRadius: '13px',
-									...(compactPlaygroundEmpty
-										? { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }
-										: {}),
-								}}
+								className={c(styles.messagesWrap, compactPlaygroundEmpty && styles.messagesWrap_compact)}
 							>
 								<Box
 									sx={{
@@ -439,7 +419,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 									className={'smallScroll'}
 								>
 									<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
-										<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
+										<div className={styles.scrollAnchor} ref={refScrollMobile}></div>
 										{hasGenerations ? (
 											<AudioMessagesList
 												device={deviceType}
@@ -101,6 +101,10 @@
 	}
 }
 
+.emailAccent {
+	color: #7f7df3;
+}
+
 .logsList {
 	margin-top: 15px;
 	display: flex;
@@ -0,0 +1,3 @@
+.contextGrow {
+	transform-origin: 0 0 0;
+}
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Box, Button, Grow, Menu, Typography } from '@mui/material'
 
+import styles from './context.module.scss'
 
 interface IContext {
 	context: { message: string; uid: string }[]
@@ -106,7 +107,7 @@ const Context: React.FC<IContext> = ({
 					<Grow
 						key={message.uid}
 						in={true}
-						style={{ transformOrigin: '0 0 0' }}
+						className={styles.contextGrow}
 						{...(true ? { timeout: 800 } : {})}
 					>
 						<Box onClick={() => deleteContextMessage(message.uid)} sx={{ width: 'fit-content' }}>
@@ -26,3 +26,8 @@
 		font-weight: 600;
 	}
 }
+
+.tourAnchor {
+	position: relative;
+	z-index: 10;
+}
@@ -130,7 +130,7 @@ function Chat<T>({
 					loading={loading}
 				/>
 
-				<div id='text-models-tour-2' style={{ position: 'relative', zIndex: 10 }}>
+				<div id='text-models-tour-2' className={styles.tourAnchor}>
 					<ModelInput
 						resendValue={resendValue}
 						currentVersion={currentVersion}
@@ -0,0 +1,3 @@
+.settingsButton {
+	margin-top: 15px;
+}
@@ -18,6 +18,8 @@ import TooltipModelTypes from '#/widgets/filters-gpt/ui/tooltip-model-types'
 
 import 'intro.js/introjs.css'
 
+import styles from './filters.module.scss'
+
 interface IFiltersChatGPTMobile {
 	open?: boolean
 	handleOpenFilters?: () => void
@@ -220,7 +222,7 @@ export const Filters: React.FC<IFiltersChatGPT> = memo(
 
 							<Button
 								startIcon={<SettingsSuggestIcon />}
-								style={{ marginTop: '15px' }}
+								className={styles.settingsButton}
 								variant='contained'
 								sx={{
 									width: '100%',
@@ -0,0 +1,3 @@
+.settingsButton {
+	margin-top: 10px;
+}
@@ -16,6 +16,8 @@ import {
 } from '#/widgets/filters-sd/lib/types'
 import { Styles, styles } from '#/widgets/filters-sd/ui/filters'
 
+import filterStyles from './filters-mobile.module.scss'
+
 interface ISDFiltersMobile extends ISDFilters {
 	isOpenDrawer: boolean
 	onCloseDrawer: () => void
@@ -113,7 +115,7 @@ export const FiltersMobile: React.FC<ISDFiltersMobile> = ({
 
 				<Button
 					startIcon={<SettingsSuggestIcon />}
-					style={{ marginTop: '10px' }}
+					className={filterStyles.settingsButton}
 					variant='contained'
 					sx={{
 						width: '90%',
@@ -0,0 +1,39 @@
+.model {
+	position: relative;
+	cursor: pointer;
+}
+
+.model__blocked {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.model__content {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.model__title {
+	font-weight: 600;
+}
+
+.model__description {
+	color: var(--new-ui-gray-color);
+}
+
+.model__badges {
+	display: flex;
+	gap: 8px;
+}
+
+.model__badge {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.model__cost {
+	color: var(--cost-color);
+}
@@ -75,8 +75,8 @@ export const ImagePopupModel = ({
 						</div>
 
 						<div
-							style={{ color: costZone?.color }}
 							className={c(styles.model__badge, styles.model__cost)}
+							style={{ '--cost-color': costZone?.color ?? 'inherit' } as React.CSSProperties}
 						>
 							<LightningSvg fill={costZone?.color} width={10} height={18} />
 							{Number(actual_stat.tokens_cost)}
@@ -10,6 +10,7 @@
   .loaderBar {
     position: relative;
     width: 100%;
+    height: var(--loader-height, 24px);
     background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 100%);
     border-radius: 50px;
     overflow: hidden;
@@ -17,6 +18,7 @@
   }
   
   .progressFill {
+    width: var(--progress-width, 0%);
     height: 100%;
     border-radius: 50px;
     background-size: 200% 100%;
@@ -19,13 +19,13 @@ const LineLoader: React.FC<LoaderProps> = ({
 
   return (
     <div className={`${styles.loaderContainer} ${className}`}>
-      <div 
+      <div
         className={styles.loaderBar}
-        style={{ height: `${height}px` }}
+        style={{ '--loader-height': `${height}px` } as React.CSSProperties}
       >
-        <div 
+        <div
           className={styles.progressFill}
-          style={{ width: `${normalizedProgress}%` }}
+          style={{ '--progress-width': `${normalizedProgress}%` } as React.CSSProperties}
         >
           {/* {normalizedProgress > 0 && (
             <span className={styles.progressTextInside}>
@@ -0,0 +1,4 @@
+.requisitesLink {
+	margin-top: 10px;
+	margin-left: 20px;
+}
@@ -14,6 +14,8 @@ import { getAll, ResponseAllInfo } from '#/entities/user-account/model/user-type
 
 import { menuListMiddle, menuListTop } from '../../side-menu/ui/side-menu'
 
+import styles from './main-menu-mobile.module.scss'
+
 export const MainMenuMobile = memo(() => {
 	const { data, status } = useSession()
 
@@ -129,7 +131,7 @@ export const MainMenuMobile = memo(() => {
 						<Box onClick={() => signOut()}>
 							<MenuItem open={open} pathname={pathname} title={'Выйти из аккаунта'} link={null} icon={'/logout'} />
 						</Box>
-						<Link style={{ marginTop: '10px', marginLeft: '20px' }} href={'https://air.fail/requisites'}>
+						<Link className={styles.requisitesLink} href={'https://air.fail/requisites'}>
 							<Typography className='title-main-gray' sx={{ marginLeft: '15px' }}>
 								Реквизиты
 							</Typography>
@@ -0,0 +1,30 @@
+.logo {
+	cursor: pointer;
+	margin-left: 20px;
+}
+
+.errorIcon {
+	margin-top: 12px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+
+.sleepIcon {
+	margin-top: 12px;
+	margin-right: 5px;
+	cursor: pointer;
+}
+
+.bellIcon {
+	margin-top: 12px;
+	margin-left: 16px;
+	cursor: pointer;
+}
+
+.loginButton {
+	background-color: #555555;
+}
+
+.registerButton {
+	background-color: #514e62;
+}
@@ -11,6 +11,8 @@ import { AccountMenu } from '#/shared'
 import { NotificationMenu } from '#/shared'
 import { TooltipFreeTokens } from '#/shared'
 
+import styles from './main-menu.module.scss'
+
 function a11yProps(index: number) {
 	return {
 		id: `simple-tab-${index}`,
@@ -78,7 +80,7 @@ export const MainMenu: React.FC = memo(() => {
 			<Stack direction='row' spacing={1} alignItems='center' justifyContent='space-between'>
 				{status !== 'authenticated' && <TooltipFreeTokens />}
 				<Image
-					style={{ cursor: 'pointer', marginLeft: 20 }}
+					className={styles.logo}
 					onClick={goToMain}
 					priority
 					src='/logo.svg'
@@ -169,11 +171,7 @@ export const MainMenu: React.FC = memo(() => {
 								errorReport.setState(true)
 							}}
 							priority
-							style={{
-								marginTop: 12,
-								marginRight: 15,
-								cursor: 'pointer',
-							}}
+							className={styles.errorIcon}
 							src='/error_off.svg'
 							height={19}
 							width={19}
@@ -182,11 +180,7 @@ export const MainMenu: React.FC = memo(() => {
 					)}
 
 					<Image
-						style={{
-							marginTop: 12,
-							marginRight: 5,
-							cursor: 'pointer',
-						}}
+						className={styles.sleepIcon}
 						width={19}
 						height={19}
 						src={'/sleep.svg'}
@@ -196,11 +190,7 @@ export const MainMenu: React.FC = memo(() => {
 					{status === 'authenticated' ? (
 						<>
 							<Image
-								style={{
-									marginTop: 12,
-									marginLeft: 16,
-									cursor: 'pointer',
-								}}
+								className={styles.bellIcon}
 								onClick={openMenuNotification as any}
 								priority
 								src='/bell.svg'
@@ -233,9 +223,7 @@ export const MainMenu: React.FC = memo(() => {
 					) : (
 						<>
 							<Button
-								style={{
-									backgroundColor: '#555555',
-								}}
+								className={styles.loginButton}
 								onClick={() => login()}
 								sx={{
 									padding: 1.3,
@@ -251,9 +239,7 @@ export const MainMenu: React.FC = memo(() => {
 								Вход
 							</Button>
 							<Button
-								style={{
-									backgroundColor: '#514E62',
-								}}
+								className={styles.registerButton}
 								onClick={() => register()}
 								sx={{
 									padding: 1.5,
@@ -0,0 +1,3 @@
+.inlineCode {
+	border-radius: 15px;
+}
@@ -3,6 +3,8 @@ import ReactMarkdown from 'react-markdown'
 import dynamic from 'next/dynamic'
 import remarkGfm from 'remark-gfm'
 
+import styles from './markdown.module.scss'
+
 interface IProps {
 	id?: string
 	content: string
@@ -31,7 +33,7 @@ export const Markdown = ({ content, id = 'markdown'}: IProps) => {
 						</>
 					) : (
 						<>
-							<code style={{ borderRadius: 15 }} {...props} className={className}>
+							<code {...props} className={className ? `${styles.inlineCode} ${className}` : styles.inlineCode}>
 								{children}
 							</code>
 						</>
@@ -0,0 +1,4 @@
+.audioPlayer {
+	width: 100%;
+	height: 48px;
+}
@@ -4,6 +4,8 @@ import Box from '@mui/material/Box'
 
 import { AudioPlayer, AudioPlayerRef } from './audio-player'
 
+import styles from './audio-messages-list.module.scss'
+
 import { Message } from '#/entities/message'
 import { TooltipCustom } from '#/shared'
 
@@ -118,10 +120,7 @@ export const AudioMessagesList: React.FC<MessagesList> = memo(({ device, audios,
 										content={message.content}
 										buttonText='Скачать аудио'
 										device={device}
-										style={{
-											width: '100%',
-											height: '48px',
-										}}
+										className={styles.audioPlayer}
 									>
 										<source src={fileUrl} type='audio/mpeg' />
 										<source src={fileUrl} type='audio/wav' />
@@ -3,3 +3,26 @@
 	border: 0;
 	cursor: pointer;
 }
+
+.userMessageImage {
+	object-fit: contain;
+	height: 100%;
+	width: 100%;
+	border-radius: 13px;
+	cursor: pointer;
+	min-width: 100px;
+	min-height: 100px;
+}
+
+.userMessageImageVisible {
+	opacity: 1;
+}
+
+.userMessageImageHidden {
+	opacity: 0;
+}
+
+.resendIcon {
+	cursor: pointer;
+	margin-right: 5px;
+}
@@ -209,6 +209,15 @@
 	}
 }
 
+.copyIcon {
+	cursor: pointer;
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 0.7;
+	}
+}
+
 .fontSizeText {
 	font-weight: 500;
 	font-style: normal;
@@ -319,21 +319,12 @@ export const FullscreenMessageModal: React.FC<FullscreenMessageModalProps> = ({
 					<Box className={styles.copyButton} onClick={handleCopy}>
 						<svg
 							ref={copyIconRef}
+							className={styles.copyIcon}
 							width='20'
 							height='20'
 							viewBox='0 0 19 19'
 							fill='none'
 							xmlns='http://www.w3.org/2000/svg'
-							style={{
-								cursor: 'pointer',
-								transition: 'opacity 0.2s',
-							}}
-							onMouseEnter={(e) => {
-								e.currentTarget.style.opacity = '0.7'
-							}}
-							onMouseLeave={(e) => {
-								e.currentTarget.style.opacity = '1'
-							}}
 						>
 							<g>
 								<rect
@@ -0,0 +1,7 @@
+.menuTrigger {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	z-index: 5;
+}
@@ -2,6 +2,8 @@ import { Box,Grow } from '@mui/material'
 
 import { useImageIcons } from '../model'
 
+import styles from './image-icons.module.scss'
+
 import { TooltipCustom } from '#/shared'
 
 export interface ImageIconsProps {
@@ -66,13 +68,7 @@ export const ImageIcons = ({ uid, url, content, buttonText, onPinImageClick }: I
 			)}
 
 			<svg
-				style={{
-					position: 'absolute',
-					top: '10px',
-					right: '10px',
-					cursor: 'pointer',
-					zIndex: '5',
-				}}
+				className={styles.menuTrigger}
 				onClick={(e) => {
 					e.stopPropagation()
 					toggleMenu(uid)
@@ -45,3 +45,33 @@
 		}
 	}
 }
+
+.imageFront {
+	position: relative;
+	z-index: 2;
+	border-radius: 15px;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+	object-fit: contain;
+}
+
+.imageBlurBg {
+	position: absolute;
+	z-index: 1;
+	border-radius: 15px;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+	object-fit: cover;
+	right: 0;
+	filter: blur(10px) brightness(0.7);
+}
+
+.imageVisible {
+	opacity: 1;
+}
+
+.imageHidden {
+	opacity: 0;
+}
@@ -14,6 +14,7 @@ import styles from './image-messages-list.module.scss'
 import { Message } from '#/entities/message'
 import { ImageModal } from '#/features/image-modal'
 import { ClientOnly, TooltipCustom } from '#/shared'
+import { c } from '#/shared/lib/helpers'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 
 interface MessagesList {
@@ -114,42 +115,20 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 												{!isSvg ? (
 													<>
 														<Image
-															className={styles.image}
+															className={c(styles.image, styles.imageFront, loaded ? styles.imageVisible : styles.imageHidden)}
 															onClick={() => {
 																setChosenImage(message.file as string)
 																setModal(true)
 															}}
 															onLoadingComplete={() => setLoaded(true)}
-															style={{
-																position: 'relative',
-																zIndex: '2',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'contain',
-															}}
 															width={500}
 															height={500}
 															src={(message.file as unknown as string) || ''}
 															alt={'К сожалению, изображение не загрузилось'}
 														/>
 														<Image
-															className={styles.image}
+															className={c(styles.image, styles.imageBlurBg, loaded ? styles.imageVisible : styles.imageHidden)}
 															onLoadingComplete={() => setLoaded(true)}
-															style={{
-																position: 'absolute',
-																zIndex: '1',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'cover',
-																right: 0,
-																filter: 'blur(10px) brightness(0.7)',
-															}}
 															width={10}
 															height={10}
 															src={(message.file as unknown as string) || ''}
@@ -159,39 +138,18 @@ export const ImageMessagesList: React.FC<MessagesList> = memo(({ device, images,
 												) : (
 													<>
 														<img
-															className={styles.image}
+															className={c(styles.image, styles.imageFront)}
 															onClick={() => {
 																setChosenImage(message.file as string)
 																setModal(true)
 															}}
-															style={{
-																position: 'relative',
-																zIndex: '2',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																userSelect: 'none',
-																objectFit: 'contain',
-															}}
 															src={(message.file as unknown as string) || ''}
 															alt='К сожалению, изображение не загрузилось'
 														/>
 														<img
-															className={styles.image}
+															className={c(styles.image, styles.imageBlurBg, loaded ? styles.imageVisible : styles.imageHidden)}
 															width='10px'
 															height='10px'
-															style={{
-																position: 'absolute',
-																zIndex: '1',
-																borderRadius: 15,
-																width: '100%',
-																height: '100%',
-																opacity: loaded ? '100%' : '0%',
-																userSelect: 'none',
-																objectFit: 'cover',
-																right: 0,
-																filter: 'blur(10px) brightness(0.7)',
-															}}
 															src={(message.file as unknown as string) || ''}
 															alt='К сожалению, изображение не загрузилось'
 														/>
@@ -0,0 +1,4 @@
+.instructionText {
+	text-align: center;
+	margin-bottom: 15px;
+}
@@ -2,6 +2,8 @@ import React from 'react'
 import { Box, Typography } from '@mui/material'
 import { IModel } from '#/entities/model-entity'
 
+import styles from './preview-view.module.scss'
+
 const previewMessages = ['Что такое орбитальная механика?', 'Как приготовить омлет?', 'Кто такие Фиксики?']
 
 export interface PreviewViewProps {
@@ -20,8 +22,7 @@ export function PreviewView({ setValue, botParams }: PreviewViewProps) {
 							? botParams.instruction.descriptor.replaceAll('\n', '<br/>')
 							: 'Попробуйте, например, вот так:',
 				}}
-				style={{ textAlign: 'center', marginBottom: '15px' }}
-				className='text'
+				className={`text ${styles.instructionText}`}
 			></p>
 			{botParams && !botParams.instruction && (
 				<Box
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack'
 import Image from 'next/image'
 
 import { TooltipCustom } from '#/shared'
-import { formatDate } from '#/shared/lib/helpers'
+import { c, formatDate } from '#/shared/lib/helpers'
 import { Message } from '#/shared/lib/types/model'
 import { BotMessage } from '#/widgets/messages'
 
@@ -136,16 +136,10 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 														setModal(true)
 													}}
 													onLoadingComplete={() => setLoaded(true)}
-													style={{
-														objectFit: 'contain',
-														height: '100%',
-														width: '100%',
-														borderRadius: '13px',
-														cursor: 'pointer',
-														opacity: loaded ? '100%' : '0%',
-														minWidth: '100px',
-														minHeight: '100px',
-													}}
+													className={c(
+														styles.userMessageImage,
+														loaded ? styles.userMessageImageVisible : styles.userMessageImageHidden
+													)}
 													width={500}
 													height={500}
 													src={props.message.file.toString().split('?type')[0]}
@@ -335,10 +329,7 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 													{!props.message.is_sent && (
 														<Image
 															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
+															className={styles.resendIcon}
 															height={20}
 															width={20}
 															alt='1'
@@ -593,10 +584,7 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 													{!props.message.is_sent && (
 														<Image
 															onClick={resend}
-															style={{
-																cursor: 'pointer',
-																marginRight: '5px',
-															}}
+															className={styles.resendIcon}
 															height={20}
 															width={20}
 															alt='1'
@@ -799,10 +787,7 @@ export const UserMessage = React.memo(function UserMessage({ setCurrentSrc, setM
 											{!props.message.is_sent && (
 												<Image
 													onClick={resend}
-													style={{
-														cursor: 'pointer',
-														marginRight: '5px',
-													}}
+													className={styles.resendIcon}
 													height={20}
 													width={20}
 													alt='1'
@@ -1,4 +1,4 @@
-.model {
+дав.model {
 	position: absolute;
 	top: 12px;
 	left: 12px;
@@ -44,16 +44,13 @@
         
         .background_video{
 			margin: 10px auto;
-			width: 250px;
-			height: 250px;
-			border-radius: 15px !important;
+			width: 100%;
+			height: 100%;
+			border-radius: 15px;
             position: relative;
             z-index: 2;
-            border-radius: 15;
-            width: 100%;
-            height: 100%;
             user-select: none;
-            object-fit: contain;
+            object-fit: cover;
         }
 
 		@media (max-width: 766px) {
@@ -101,12 +101,6 @@ export const VideoMessagesList: React.FC<MessagesList> = memo(({ device, videos,
 													className={styles.background_video}
 													onClick={() => handleVideoClick(message.uid, fileUrl, message.content)}
 													onLoadedData={() => handleVideoLoad(message.uid)}
-													style={{
-														width: '100%',
-														height: '100%',
-														objectFit: 'cover',
-														borderRadius: '15px',
-													}}
 													preload='auto'
 													muted
 													loop
@@ -0,0 +1,13 @@
+.copyCodeIcon {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	z-index: 10;
+	padding: 5px;
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 0.7;
+	}
+}
@@ -1,5 +1,7 @@
 import { Box } from '@mui/material'
 
+import styles from './scope-variants.module.scss'
+
 import { IComponentProps } from '../types'
 
 import { Markdown } from '#/widgets/markdown/markdown'
@@ -55,26 +57,12 @@ const CodeBlock = ({ title, code, id }: { title: string; code: string; id: strin
 			<Box sx={{ position: 'relative' }}>
 				<svg
 					onClick={copy}
+					className={styles.copyCodeIcon}
 					width='24'
 					height='24'
 					viewBox='0 0 19 19'
 					fill='none'
 					xmlns='http://www.w3.org/2000/svg'
-					style={{
-						position: 'absolute',
-						top: '10px',
-						right: '10px',
-						cursor: 'pointer',
-						zIndex: 10,
-						padding: '5px',
-						transition: 'opacity 0.2s',
-					}}
-					onMouseEnter={(e) => {
-						e.currentTarget.style.opacity = '0.7'
-					}}
-					onMouseLeave={(e) => {
-						e.currentTarget.style.opacity = '1'
-					}}
 				>
 					<g id='Group 29094'>
 						<rect
@@ -0,0 +1,22 @@
+.copyIcon {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
+.socialIcon {
+	width: 25px;
+	height: 25px;
+}
+
+.statIcon {
+	width: 30px;
+	height: 30px;
+}
+
+.referralAvatar {
+	width: 50px;
+	height: 50px;
+	border-radius: 100%;
+	object-fit: cover;
+}
@@ -8,6 +8,8 @@ import { getReferral, IReferral } from '#/shared/api/endpoints'
 import { getApiHost } from '#/shared/lib/constants'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { useAppSelector } from '#/app/store/store'
+
+import styles from './referral.module.scss'
 interface IProps {
 	device: 'desktop' | 'mobile'
 }
@@ -102,11 +104,7 @@ export const Referral = ({ device }: IProps) => {
 								<Image
 									src={'/svg/copy.svg'}
 									alt={''}
-									style={{
-										width: '20px',
-										height: '20px',
-										cursor: 'pointer',
-									}}
+									className={styles.copyIcon}
 									width={100}
 									height={100}
 									onClick={() => {
@@ -126,7 +124,7 @@ export const Referral = ({ device }: IProps) => {
 									<Image
 										src={'/svg/referral/vk.svg'}
 										alt={'vk'}
-										style={{ width: '25px', height: '25px' }}
+										className={styles.socialIcon}
 										width={25}
 										height={25}
 									/>
@@ -142,7 +140,7 @@ export const Referral = ({ device }: IProps) => {
 									<Image
 										src={'/svg/referral/tg.svg'}
 										alt={'tg'}
-										style={{ width: '25px', height: '25px' }}
+										className={styles.socialIcon}
 										width={25}
 										height={25}
 									/>
@@ -176,7 +174,7 @@ export const Referral = ({ device }: IProps) => {
 								<Image
 									src={'/svg/referral/register.svg'}
 									alt={''}
-									style={{ width: '30px', height: '30px' }}
+									className={styles.statIcon}
 									width={30}
 									height={30}
 								/>
@@ -201,7 +199,7 @@ export const Referral = ({ device }: IProps) => {
 								<Image
 									src={'/svg/referral/pay.svg'}
 									alt={''}
-									style={{ width: '30px', height: '30px' }}
+									className={styles.statIcon}
 									width={30}
 									height={30}
 								/>
@@ -226,7 +224,7 @@ export const Referral = ({ device }: IProps) => {
 								<Image
 									src={'/svg/referral/bonus.svg'}
 									alt={''}
-									style={{ width: '30px', height: '30px' }}
+									className={styles.statIcon}
 									width={30}
 									height={30}
 								/>
@@ -268,12 +266,7 @@ export const Referral = ({ device }: IProps) => {
 										alt={'avatar'}
 										width={50}
 										height={50}
-										style={{
-											width: '50px',
-											height: '50px',
-											borderRadius: '100%',
-											objectFit: 'cover',
-										}}
+										className={styles.referralAvatar}
 									/>
 									<Box>
 										<Typography
@@ -0,0 +1,22 @@
+.downloadLink {
+	position: absolute;
+	right: 22px;
+	top: 20px;
+	background-color: #373737;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 45px;
+	height: 45px;
+	border-radius: 11px;
+}
+
+.messageImage {
+	border-radius: 15px;
+}
+
+.promptLabel {
+	font-weight: 600;
+	font-size: 16px;
+}
@@ -3,6 +3,8 @@ import { Box, Typography } from '@mui/material'
 import Image from 'next/image'
 
 import { useAutoScroll } from '#/shared/lib/hooks'
+
+import styles from './sd-messages-list.module.scss'
 import { IResponseSD } from '#/shared/lib/types/types-sd'
 
 interface ISDMessagesList {
@@ -42,19 +44,7 @@ export const SdMessagesList: React.FC<ISDMessagesList> = memo(({ messages, devic
 						>
 							<Box sx={{ position: 'relative' }}>
 								<a
-									style={{
-										position: 'absolute',
-										right: 22,
-										top: 20,
-										backgroundColor: '#373737',
-										padding: 0,
-										display: 'flex',
-										alignItems: 'center',
-										justifyContent: 'center',
-										width: '45px',
-										height: '45px',
-										borderRadius: '11px',
-									}}
+									className={styles.downloadLink}
 									href={img.link}
 									download
 								>
@@ -66,7 +56,7 @@ export const SdMessagesList: React.FC<ISDMessagesList> = memo(({ messages, devic
 									/>
 								</a>
 								<Image
-									style={{ borderRadius: 15 }}
+									className={styles.messageImage}
 									width={270}
 									height={320}
 									key={img.link}
@@ -82,12 +72,7 @@ export const SdMessagesList: React.FC<ISDMessagesList> = memo(({ messages, devic
 										color: '#FFFFFF',
 									}}
 								>
-									<span
-										style={{
-											fontWeight: '600',
-											fontSize: 16,
-										}}
-									>
+									<span className={styles.promptLabel}>
 										Запрос:{' '}
 									</span>
 									{img.question}
@@ -9,3 +9,36 @@
 .open .Image {
 	transform: rotate(180deg);
 }
+
+.logoImage {
+	cursor: pointer;
+	margin-left: 23px;
+}
+
+.toggleArrow {
+	cursor: pointer;
+	margin-top: 5px;
+	margin-left: -1px;
+	margin-right: 5px;
+	transition: transform 0.4s ease;
+}
+
+.toggleArrow_closed {
+	transform: rotate(180deg);
+}
+
+.toggleArrow_open {
+	transform: rotate(0deg);
+}
+
+.listItemTransparent {
+	background-color: transparent;
+}
+
+.menuIcon {
+	color: #a4aab5;
+}
+
+.menuIcon_active {
+	color: #8280ff;
+}
@@ -190,17 +190,10 @@ export const SideMenu = ({}) => {
 					}}
 				>
 					<Box onClick={handleToggleOpen} width='100%' display={'flex'} alignItems={'center'} justifyContent='space-between'>
-						<Image style={{ cursor: 'pointer', marginLeft: 23 }} priority src='/logo.svg' height={26} width={31} alt='Error' />
+						<Image className={styles.logoImage} priority src='/logo.svg' height={26} width={31} alt='Error' />
 
 						<Image
-							style={{
-								cursor: 'pointer',
-								marginTop: 5,
-								marginLeft: -1,
-								marginRight: 5,
-								transition: 'transform 0.4s ease',
-								transform: open === 'closed' ? 'rotate(180deg)' : 'rotate(0deg)',
-							}}
+							className={`${styles.toggleArrow} ${open === 'closed' ? styles.toggleArrow_closed : styles.toggleArrow_open}`}
 							src={'/arrow-left.svg'}
 							width={20}
 							height={13}
@@ -338,7 +331,7 @@ export function MenuItem(props: MenuItemProps) {
 							px: 0.8,
 							display: 'flex',
 						}}
-						style={{ backgroundColor: 'transparent' }}
+						className={styles.listItemTransparent}
 					>
 						<ListItem
 							component='div'
@@ -358,11 +351,7 @@ export function MenuItem(props: MenuItemProps) {
 								{typeof props.icon === 'string' ? (
 									<Image src={props.icon + (isActive ? '' : '-off') + '.svg'} width={19} height={19} alt={''} />
 								) : (
-									<div
-										style={{
-											color: isActive ? '#8280FF' : '#A4AAB5',
-										}}
-									>
+									<div className={isActive ? styles.menuIcon_active : styles.menuIcon}>
 										{props.icon}
 									</div>
 								)}
@@ -139,15 +139,7 @@ export const Statistics = (props: any) => {
 								<NoData />
 							) : (
 								<Box className={styles.grMain}>
-									<Box
-										style={{
-											display: 'flex',
-											justifyContent: 'flex-start',
-											width: '53%',
-											height: '100%',
-											marginRight: '15px',
-										}}
-									>
+									<Box className={styles.chartColumn}>
 										<Doughnut
 											data={statsByType as any}
 											options={DoughnutOptions as any}
@@ -167,15 +159,7 @@ export const Statistics = (props: any) => {
 								<NoData />
 							) : (
 								<Box className={styles.grMain}>
-									<Box
-										style={{
-											display: 'flex',
-											justifyContent: 'flex-start',
-											width: '53%',
-											height: '100%',
-											marginRight: '15px',
-										}}
-									>
+									<Box className={styles.chartColumn}>
 										<Doughnut
 											data={statsByModel as any}
 											options={DoughnutOptions as any}
@@ -38,3 +38,12 @@
 		font-size: 16px;
 	}
 }
+
+.fileIcon {
+	margin-top: 2px;
+}
+
+.deleteIcon {
+	margin-top: 7px;
+	cursor: pointer;
+}
@@ -34,13 +34,13 @@ export const Card: React.FC<WhisperResponse & ICard> = ({
 				width='100%'
 			>
 				<Box className={styles.title} display='flex'>
-					<Image style={{ marginTop: 2 }} src={'/file.svg'} alt='' width={20} height={20} />
+					<Image className={styles.fileIcon} src={'/file.svg'} alt='' width={20} height={20} />
 					<Typography>{sliceAudioLink(audio_link)}</Typography>
 				</Box>
 				{isHover && (
 					<Image
 						onClick={() => remove(uid)}
-						style={{ marginTop: 7, cursor: 'pointer' }}
+						className={styles.deleteIcon}
 						src={'/svg/basket.svg'}
 						width={18}
 						height={18}
@@ -4,3 +4,8 @@
 	align-items: center;
 	justify-content: space-between;
 }
+
+.sendIcon {
+	margin-top: 4px;
+	cursor: pointer;
+}
@@ -148,7 +148,7 @@ export const WhisperWidget = () => {
 											onClick={transcript}
 											height={27}
 											width={27}
-											style={{ marginTop: 4, cursor: 'pointer' }}
+											className={styles.sendIcon}
 											src={`/svg/chatgpt/send_message_dark.svg`}
 											alt={''}
 										/>
@@ -193,6 +193,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -2131,6 +2132,7 @@
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
       "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.11.0",
@@ -2171,6 +2173,7 @@
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
       "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.11.0",
@@ -3371,7 +3374,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -3467,6 +3469,7 @@
       "version": "5.14.18",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.18.tgz",
       "integrity": "sha512-y3UiR/JqrkF5xZR0sIKj6y7xwuEiweh9peiN3Zfjy1gXWXhz5wjlaLdoxFfKIEBUFfeQALxr/Y8avlHH+B9lpQ==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@mui/base": "5.0.0-beta.24",
@@ -3594,6 +3597,7 @@
       "version": "5.14.18",
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.18.tgz",
       "integrity": "sha512-hSQQdb3KF72X4EN2hMEiv8EYJZSflfdd1TRaGPoR7CIAG347OxCslpBUwWngYobaxgKvq6xTrlIl+diaactVww==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@mui/private-theming": "^5.14.18",
@@ -4014,6 +4018,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
       "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -4023,6 +4028,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.57.2.tgz",
       "integrity": "sha512-uIX52NnTM0iBh84MShlpouI7UKqkZ7MrUszTmaypHBu4r7NofznSnQRfJ+uUeDtQDj6w8eFGg5KBLDAwAPz1+A==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/api": "^1.3.0"
       },
@@ -6642,6 +6648,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7300,6 +7307,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.38.0.tgz",
       "integrity": "sha512-kocjix+/sSggfJhwXqClZ3i9Y/MI0fp7b+g7kCRm6psy2dsf8uApTRclwG18h8Avm7C9+fnt+O36PspJ/OzoWg==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -7416,6 +7424,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-2.2.0.tgz",
       "integrity": "sha512-qRkLWiUEZNAmYapZ7KGS5C4OmBLcP/H2foXeOEaowYCR0wi89fHejrfYfbuLVCMLp/dWZXKvQusdbUEZjERfwQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
       },
@@ -7428,6 +7437,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.2.0.tgz",
       "integrity": "sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "^1.29.0"
       },
@@ -7443,6 +7453,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.208.0.tgz",
       "integrity": "sha512-Eju0L4qWcQS+oXxi6pgh7zvE2byogAkcsVv0OjHF/97iOz1N/aKE6etSGowYkie+YA1uo6DNwdSxaaNnLvcRlA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/api-logs": "0.208.0",
         "import-in-the-middle": "^2.0.0",
@@ -7460,6 +7471,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.2.0.tgz",
       "integrity": "sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.2.0",
         "@opentelemetry/semantic-conventions": "^1.29.0"
@@ -7476,6 +7488,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.2.0.tgz",
       "integrity": "sha512-xWQgL0Bmctsalg6PaXExmzdedSp3gyKV8mQBwK/j9VGdCDu2fmXIb2gAehBKbkXCpJ4HPkgv3QfoJWRT4dHWbw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.2.0",
         "@opentelemetry/resources": "2.2.0",
@@ -7493,6 +7506,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.38.0.tgz",
       "integrity": "sha512-kocjix+/sSggfJhwXqClZ3i9Y/MI0fp7b+g7kCRm6psy2dsf8uApTRclwG18h8Avm7C9+fnt+O36PspJ/OzoWg==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -8013,6 +8027,7 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -8182,6 +8197,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -8479,7 +8495,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -8490,7 +8505,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -8617,8 +8631,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -8656,7 +8669,8 @@
     "node_modules/@types/node": {
       "version": "18.15.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.2.tgz",
-      "integrity": "sha512-sDPHm2wfx2QhrMDK0pOt2J4KLJMAcerqWNvnED0itPRJWvI+bK+uNHzcH1dFsBlf7G3u8tqXmRF3wkvL9yUwMw=="
+      "integrity": "sha512-sDPHm2wfx2QhrMDK0pOt2J4KLJMAcerqWNvnED0itPRJWvI+bK+uNHzcH1dFsBlf7G3u8tqXmRF3wkvL9yUwMw==",
+      "peer": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
@@ -8692,6 +8706,7 @@
       "version": "18.0.28",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
       "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -8702,6 +8717,7 @@
       "version": "18.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
       "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -8971,7 +8987,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -8981,29 +8996,25 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -9014,15 +9025,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -9035,7 +9044,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -9045,7 +9053,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -9054,15 +9061,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -9079,7 +9084,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -9093,7 +9097,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -9106,7 +9109,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -9121,7 +9123,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -9131,15 +9132,13 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/abab": {
       "version": "2.0.6",
@@ -9154,6 +9153,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -9186,7 +9186,6 @@
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -9242,7 +9241,6 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -9260,7 +9258,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9276,8 +9273,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/ansi-escapes": {
       "version": "5.0.0",
@@ -9823,6 +9819,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -10039,6 +10036,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
       "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -10088,7 +10086,6 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -10654,7 +10651,8 @@
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -10960,6 +10958,7 @@
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
       "integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
+      "peer": true,
       "dependencies": {
         "fbjs": "^2.0.0",
         "immutable": "~3.7.4",
@@ -11164,8 +11163,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
@@ -11275,6 +11273,7 @@
       "version": "8.54.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz",
       "integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -11432,6 +11431,7 @@
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
       "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.7",
         "array.prototype.findlastindex": "^1.2.3",
@@ -11776,7 +11776,6 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -11895,8 +11894,7 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/fastq": {
       "version": "1.15.0",
@@ -12107,7 +12105,6 @@
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.28.1.tgz",
       "integrity": "sha512-72GkO7DS4FfcSjf26wx0v+rzkW8Fhn4Djh04aDbuEg7NYG8X8MhJZc6/5weG/YeEgIP+fCo8FS2y1HnXH8k8fQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "motion-dom": "^12.28.1",
         "motion-utils": "^12.27.2",
@@ -12320,8 +12317,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.2",
@@ -12694,6 +12690,7 @@
           "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
         }
       ],
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -12756,7 +12753,8 @@
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
-      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -14561,7 +14559,6 @@
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -14576,7 +14573,6 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -14586,7 +14582,6 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -14939,7 +14934,6 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -16046,7 +16040,6 @@
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.28.1.tgz",
       "integrity": "sha512-xqgID69syDvXwFJnUd5bW6ajGUAr/qevRoUe/EqpsXUbVIopyWrAOiwQOhpgVQD+B7Ra60zTdj5gVkmwncebMg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "motion-utils": "^12.27.2"
       }
@@ -16055,8 +16048,7 @@
       "version": "12.27.2",
       "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.27.2.tgz",
       "integrity": "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/mri": {
       "version": "1.2.0",
@@ -16105,13 +16097,13 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/next": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/next/-/next-13.2.4.tgz",
       "integrity": "sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==",
+      "peer": true,
       "dependencies": {
         "@next/env": "13.2.4",
         "@swc/helpers": "0.4.14",
@@ -16939,6 +16931,7 @@
       "version": "10.19.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.2.tgz",
       "integrity": "sha512-UA9DX/OJwv6YwP9Vn7Ti/vF80XL+YA5H2l7BpCtUr3ya8LWHFzpiO5R+N7dN16ujpIxhekRFuOOF82bXX7K/lg==",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -16967,6 +16960,7 @@
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -17131,7 +17125,6 @@
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -17140,6 +17133,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -17173,6 +17167,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -17219,6 +17214,7 @@
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
       "integrity": "sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "html-parse-stringify": "^3.0.1"
@@ -17239,7 +17235,8 @@
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "peer": true
     },
     "node_modules/react-markdown": {
       "version": "8.0.7",
@@ -17275,6 +17272,7 @@
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
       "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -17369,6 +17367,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -17583,7 +17582,6 @@
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17795,6 +17793,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
       "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -17899,8 +17898,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
@@ -17926,6 +17924,7 @@
       "version": "1.69.5",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
       "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -17964,7 +17963,6 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -18001,7 +17999,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -18013,8 +18010,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -18029,7 +18025,6 @@
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -18270,7 +18265,6 @@
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -18281,7 +18275,6 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -18581,6 +18574,7 @@
       "version": "5.3.11",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
       "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.0.0",
         "@babel/traverse": "^7.4.5",
@@ -18747,7 +18741,6 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.1.tgz",
       "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -18766,7 +18759,6 @@
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
       "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -18800,8 +18792,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -18849,8 +18840,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
@@ -18923,6 +18913,7 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -19115,6 +19106,7 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
       "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -19346,7 +19338,6 @@
       "resolved": "https://registry.npmjs.org/unleash-proxy-client/-/unleash-proxy-client-3.7.8.tgz",
       "integrity": "sha512-VX0jDcOporeVb1nh4+HGpEZIwcwHl/HP/7cyZxQq3umffN0hx44Tw1u4nmdopmm9s7Hb2BES0pFCIntr/lh3vQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tiny-emitter": "^2.1.0",
         "uuid": "^9.0.1"
@@ -19361,7 +19352,6 @@
         "https://github.com/sponsors/ctavan"
       ],
       "license": "MIT",
-      "peer": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -19569,7 +19559,6 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.0.tgz",
       "integrity": "sha512-e6vZvY6xboSwLz2GD36c16+O/2Z6fKvIf4pOXptw2rY9MVwE/TXc6RGqxD3I3x0a28lwBY7DE+76uTPSsBrrCA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"