@@ -0,0 +1,3 @@
+.selectTransparent {
+	background-color: transparent;
+}
@@ -5,6 +5,8 @@ import { MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/mat
 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
@@ -43,9 +45,7 @@ export const SelectFilter = ({ selects, filters, item_key, name, description, se
 							sx: { backgroundColor: '#151518', color: '#A6A5A5' },
 						},
 					}}
-					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>>
@@ -37,9 +39,7 @@ export const ChatSelect: React.FC<ISelect> = ({ value, setValue, list, setDefaul
 						sx: { backgroundColor: '#151518', color: '#A6A5A5' },
 					},
 				}}
-				style={{
-					backgroundColor: 'transparent',
-				}}
+				className={styles.selectTransparent}
 				sx={{
 					boxShadow: 'none',
 					borderRadius: '13px',
@@ -0,0 +1,3 @@
+.sectionSpacing {
+	margin-top: 15px;
+}
@@ -7,6 +7,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 { getDaysLeft } from '#/shared/lib/helpers/date-helper'
@@ -189,7 +191,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={''} />
@@ -202,7 +204,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}>
@@ -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>
@@ -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 {
@@ -75,6 +75,10 @@
 		&_secondary {
 			background-color: #373737;
 		}
+
+		&_customBg {
+			background-color: var(--template-content-bg, var(--new-ui-main-color));
+		}
 	}
 
 	// &__header {
@@ -60,9 +60,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;
@@ -4,6 +4,7 @@ import { TextFieldProps } from '@mui/material/TextField/TextField'
 import { LoadImage } from '#/app/components/input_components/load_image'
 import { SendBtn } from '#/app/components/input_components/send_button'
 import { IModelInputs } from '#/shared/api/models/models'
+import { c } from '#/shared/lib/helpers'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 
 import { PredictPrice } from './predict-price'
@@ -232,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,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%;
 
@@ -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/pretto-slider'
 
+import styles from './slider.module.scss'
+
 export const Slider = ({
 	value,
 	title,
@@ -41,7 +43,7 @@ export const Slider = ({
 			<Box sx={{ px: '8px' }}>
 				<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
@@ -45,10 +49,9 @@ 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 } : {}),
-		...(wrapperWidth ? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 } : {}),
-	}
+	const triggerSpanStyle: React.CSSProperties | undefined = wrapperWidth
+		? { display: 'block', width: wrapperWidth, maxWidth: '100%', minWidth: 0 }
+		: undefined
 
 	const tooltip = (
 		<Tooltip
@@ -90,6 +93,7 @@ export const TooltipCustom: React.FC<Props> = ({
 			placement={placement}
 		>
 			<span
+				className={fullWidthTrigger ? styles.triggerFullWidth : undefined}
 				style={triggerSpanStyle}
 				onClick={
 					tapMode
@@ -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'
@@ -325,7 +327,7 @@ const Account: NextPageWithLayout = () => {
 											<input
 												type='file'
 												ref={fileInputRef}
-												style={{ display: 'none' }}
+												className={accountStyles.fileInputHidden}
 												onChange={handleFileChange}
 												accept='image/*'
 											/>
@@ -459,7 +461,7 @@ const Account: NextPageWithLayout = () => {
 											onClick={changePassword}
 											sx={{ marginTop: '20px' }}
 											text={'Изменить пароль'}
-											style={{ width: '150px' }}
+											className={accountStyles.changePasswordButton}
 										/>
 									</Box>
 								</Box>
@@ -472,11 +474,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 { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
 import { InputStyleSmallDark } from '#/shared/ui/input'
@@ -135,7 +136,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;
+}
@@ -9,6 +9,8 @@ import { getApiUrl } from '#/shared/lib/constants'
 import { getApiDetail } from '#/shared/lib/helpers/decode-error'
 import { NextPageWithLayout } from '#/pages/_app'
 
+import styles from './confirm.module.scss'
+
 const CONFIRM_FAILED_MESSAGE =
 	'Не удалось подтвердить почту. Попробуйте позже или войдите вручную.'
 
@@ -91,7 +93,7 @@ const Confirm: NextPageWithLayout = () => {
 						<Typography sx={{ color: '#7F7DF3', fontSize: 17 }}>
 							{errorMessage ?? CONFIRM_FAILED_MESSAGE}
 						</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',
@@ -277,7 +270,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
@@ -127,7 +127,7 @@ const Login: NextPageWithLayout = () => {
 			>
 				{!desktop && (
 					<Image
-						style={{ marginTop: desktop ? 0 : '80px' }}
+						className={styles.logoMobile}
 						src={'/logo.svg'}
 						alt={''}
 						width={50}
@@ -231,13 +231,7 @@ const Login: NextPageWithLayout = () => {
 												fontWeight: '500',
 											}}
 										>
-											<Link
-												href='/reset'
-												style={{
-													textDecoration: 'none',
-													color: '#7F7DF3',
-												}}
-											>
+											<Link href='/reset' className={styles.linkAccent}>
 												Забыли пароль?
 											</Link>
 										</Typography>
@@ -253,11 +247,7 @@ const Login: NextPageWithLayout = () => {
 													onClick={() =>
 														showPassword((x) => !x)
 													}
-													style={{
-														cursor: 'pointer',
-														display: 'flex',
-														alignItems: 'center',
-													}}
+													className={styles.passwordToggle}
 												>
 													{passwordShowed ? (
 														<ClosedEyeSvg
@@ -285,9 +275,7 @@ const Login: NextPageWithLayout = () => {
 									{!loading ? (
 										<Button
 											variant='contained'
-											style={{
-												marginTop: '15px',
-											}}
+											className={styles.loginSubmitButton}
 											sx={{
 												backgroundColor: '#7F7DF3',
 												color: '#FFFFFF',
@@ -308,13 +296,7 @@ const Login: NextPageWithLayout = () => {
 											Войти
 										</Button>
 									) : (
-										<Box
-											style={{
-												margin: '25px auto',
-												display: 'flex',
-												justifyContent: 'center',
-											}}
-										>
+										<Box className={styles.loginLoader}>
 											<CircularProgress
 												size={30}
 												thickness={5}
@@ -329,13 +311,7 @@ const Login: NextPageWithLayout = () => {
 											marginTop: '15px',
 										}}
 									>
-										<Link
-											href='/register'
-											style={{
-												textDecoration: 'none',
-												color: '#7F7DF3',
-											}}
-										>
+										<Link href='/register' className={styles.linkAccent}>
 											Зарегистрироваться
 										</Link>
 									</Box>
@@ -356,7 +332,7 @@ const Login: NextPageWithLayout = () => {
 						}}
 					>
 						<Image
-							style={{ position: 'absolute', top: 35, left: 35 }}
+							className={styles.imageboxLogo}
 							src={'/svg/logo.svg'}
 							alt={''}
 							width={42}
@@ -367,15 +343,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
@@ -63,7 +63,7 @@ const Register: NextPageWithLayout = () => {
 		>
 			{!desktop && (
 				<Image
-					style={{ marginTop: desktop ? 0 : '20px' }}
+					className={styles.logoMobile}
 					src={'/logo.svg'}
 					alt={''}
 					width={50}
@@ -143,7 +143,7 @@ const Register: NextPageWithLayout = () => {
 					}}
 				>
 					<Image
-						style={{ position: 'absolute', top: 35, left: 35 }}
+						className={styles.imageboxLogo}
 						src={'/svg/logo.svg'}
 						alt={''}
 						width={42}
@@ -154,15 +154,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>
 			)}
@@ -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}>
+			<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',
@@ -286,7 +279,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;
+}
@@ -128,7 +128,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}
@@ -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%;
@@ -18,13 +18,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}
         >
         </div>
       </div>
@@ -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()
 
@@ -122,7 +124,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,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,24 @@
+.copyIcon {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	position: absolute;
+	right: 10px;
+}
+
+.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'
 }
@@ -123,13 +125,7 @@ export const Referral = ({ device }: IProps) => {
 								<Image
 									src={'/svg/copy.svg'}
 									alt={''}
-									style={{
-										width: '20px',
-										height: '20px',
-										cursor: 'pointer',
-										position: 'absolute',
-										right: '10px',
-									}}
+									className={styles.copyIcon}
 									width={100}
 									height={100}
 									onClick={() => {
@@ -149,7 +145,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}
 									/>
@@ -165,7 +161,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}
 									/>
@@ -199,7 +195,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}
 								/>
@@ -224,7 +220,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}
 								/>
@@ -249,7 +245,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}
 								/>
@@ -291,12 +287,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
@@ -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;
+}
@@ -188,17 +188,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}
@@ -323,7 +316,7 @@ export function MenuItem(props: MenuItemProps) {
 							px: 0.8,
 							display: 'flex',
 						}}
-						style={{ backgroundColor: 'transparent' }}
+						className={styles.listItemTransparent}
 					>
 						<ListItem
 							component='div'
@@ -343,11 +336,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={''}
 										/>