Binary files a/public/images/dashboard.png and b/public/images/dashboard.png differ
@@ -22,9 +22,10 @@ import { useDeviceType } from '#/shared/lib/hooks/use-device-type'
 
 interface IRegisterEmailFormProps {
 	successLogin: () => void
+	inputClassName?: string
 }
 
-export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLogin }) => {
+export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLogin, inputClassName }) => {
 	const { register, handleSubmit, reset, watch } = useForm()
 
 	const { desktop } = useDeviceType()
@@ -94,45 +95,19 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 
 	return (
 		<form onKeyDown={handleKeyDown}>
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Email
-			</Typography>
 			<TextField
 				fullWidth
+				placeholder='Email'
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('email', emailOptions)}
 				onChange={handleInputChangeTrim}
 			/>
 
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Пароль
-			</Typography>
-
 			<TextField
 				type={passwordShowed ? 'text' : 'password'}
 				fullWidth
+				placeholder='Пароль'
 				InputProps={{
 					endAdornment: (
 						<InputAdornment position='start'>
@@ -153,30 +128,18 @@ export const RegisterEmailForm: React.FC<IRegisterEmailFormProps> = ({ successLo
 						</InputAdornment>
 					),
 				}}
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('password1', {
 					...PasswordOptions,
 				})}
 			/>
 
-			<Typography
-				variant='body2'
-				sx={{
-					color: '#A6A5A5',
-					lineHeight: '19.6px',
-					fontSize: '14px',
-					fontWeight: '550',
-					paddingTop: 1,
-					width: '100%',
-					marginBottom: 1.5,
-				}}
-			>
-				Подтвердите пароль
-			</Typography>
-
 			<TextField
 				type={passwordShowed ? 'text' : 'password'}
 				fullWidth
+				placeholder='Подтвердите пароль'
+				className={inputClassName}
 				sx={{ ...InputStyleDark }}
 				{...register('password2', {
 					...PasswordOptions,
@@ -1,11 +1,216 @@
+.container {
+	overflow: hidden;
+	padding: 0;
+	background-color: #151518;
+
+	@media screen and (max-width: 1000px) {
+		margin: 0 auto;
+	}
+}
+
+.registerLinkText {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+}
+
+.form {
+	width: 50%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		width: 100%;
+		align-items: flex-start;
+		margin-top: 10px;
+	}
+}
+
+.formInner {
+	width: 40vh;
+	height: 100%;
+
+	@media screen and (max-width: 1000px) {
+		margin-top: 40%;
+	}
+}
+
+.logoMobile {
+	margin-top: 20px;
+}
+
+.title {
+	color: #e1e1e1;
+	line-height: 36.4px;
+	font-size: 26px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.orEmail {
+	flex: 1;
+	font-size: 15px;
+	color: #a4aab5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
+.orEmailWrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.orEmailLine {
+	height: 1px;
+	flex: 1;
+	background-color: #44444A;
+}
+
+
+.inputField {
+	:global(.MuiInputBase-input) {
+		padding: 12px 12px 14px 16px;
+		&::placeholder {
+			color: #a4aab5;
+			opacity: 1;
+		}
+	}
+}
+
+.labelEmail {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+	padding-top: 8px;
+	padding-right: 90%;
+}
+
+.passwordRow {
+	padding-top: 4px;
+	width: 100%;
+	justify-content: space-between;
+	display: flex;
+}
+
+.labelPassword {
+	color: #a4aab5;
+	line-height: 19.6px;
+	font-size: 14px;
+}
+
+.forgotPassword {
+	color: #8153fb;
+	line-height: 19.6px;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.forgotPasswordLink {
+	text-decoration: none;
+	color: #7f7df3;
+}
+
+.eyeToggle {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+
+.buttonWrapper {
+	height: 50px;
+	width: 100%;
+}
+
+.submitButton {
+	margin-top: 15px;
+	background-color: #7f7df3;
+	color: #ffffff;
+	line-height: 20px;
+	font-size: 16px;
+	font-weight: 600;
+	border-radius: 13px;
+	text-transform: none;
+	width: 100%;
+	height: 48px;
+
+	&:hover {
+		background-color: #7f7df3;
+		opacity: 0.9;
+	}
+}
+
+.loadingWrapper {
+	margin: 25px auto;
+	display: flex;
+	justify-content: center;
+	color: #7f7df3;
+}
+
+.registerLink {
+	width: 100%;
+	text-align: center;
+	margin-top: 15px;
+}
+
+.registerLinkAnchor {
+	text-decoration: none;
+	color: #7f7df3;
+}
+
 .imagebox {
+	width: 50%;
+	height: 100vh;
+	background-color: #8280ff;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	@media screen and (max-width: 1000px) {
 		display: none;
 	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
-    width: 100%;
-	}
+.imageboxLogo {
+	position: absolute;
+	top: 35px;
+	left: 35px;
+}
+
+.dashboardImage {
+	position: absolute;
+	transform: scale(1.15);
+	bottom: 60px;
+	transform-origin: center;
+}
+
+.imageboxLogoContent {
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageboxLogoText {
+	font-weight: 800;
+	font-size: 48px;
+	color: #ffffff;
+}
+
+.imageboxLogoSubText {
+	font-weight: 400;
+	font-style: Regular;
+	line-height: 24px;
+	font-size: 20px;
+	text-align: center;
+	white-space: pre-line;
 }
\ No newline at end of file
@@ -21,11 +21,10 @@ import { ERROR_MAPPING, ERRROR_YANDEX_TRANSLATE_MAPPING } from '#/pages/api/auth
 import { emailOptions } from '#/shared'
 import { getDeviceType } from '#/shared/lib/helpers'
 import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
-import { InputStyleDark, InputStyleLight } from '#/shared/ui/input'
+import { InputStyleDark } from '#/shared/ui/input'
 
 const Login: NextPageWithLayout = () => {
-	const device = getDeviceType()
-
+	const [desktop, setDesktop] = React.useState(true)
 	const { query, push } = useRouter()
 
 	const [, setCookie] = useCookies()
@@ -34,14 +33,16 @@ const Login: NextPageWithLayout = () => {
 		Object.entries(query).forEach(([key, value]) => setCookie(key, value))
 	}, [])
 
+	React.useEffect(() => {
+		setDesktop(getDeviceType() === 'desktop')
+	}, [])
+
 	const { showMessage } = useShowDataStore()
 
 	const [loading, setLoading] = React.useState(false)
 
 	const [passwordShowed, showPassword] = React.useState(false)
 
-	const desktop = device === 'desktop'
-
 	const { register, handleSubmit } = useForm()
 
 	useEffect(() => {
@@ -96,40 +97,20 @@ const Login: NextPageWithLayout = () => {
 				direction={desktop ? 'row' : 'column'}
 				alignItems='center'
 				justifyContent={desktop ? 'space-between' : 'center'}
-				sx={{
-					overflow: 'hidden',
-					padding: 0,
-					margin: desktop ? 0 : '0px auto',
-					backgroundColor: '#303035',
-				}}
 			>
 				{!desktop && (
 					<Image
-						style={{ marginTop: desktop ? 0 : '80px' }}
+						className={styles.logoMobile}
 						src={'/logo.svg'}
 						alt={''}
 						width={50}
 						height={50}
 					/>
 				)}
-				<Box
-					className={styles.form}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: desktop ? 'center' : 'start',
-						marginTop: desktop ? 0 : '10px',
-					}}
-				>
+				<Box className={styles.form}>
 					<form onKeyDown={handleKeyDown} autoComplete={'off'}>
 						<Box
-							sx={{
-								width: '40vh',
-								height: '100%',
-								marginTop: desktop ? 0 : 5,
-							}}
+							className={styles.formInner}
 							onKeyDown={async (e) => {
 								if (e.key === 'Enter') {
 									await handleSubmit(onSubmit, checkError)
@@ -142,98 +123,32 @@ const Login: NextPageWithLayout = () => {
 								alignItems='center'
 								spacing={2}
 							>
-								<Typography
-									sx={{
-										color: '#E1E1E1',
-										lineHeight: '36.4px',
-										fontSize: '26px',
-										fontWeight: 'bold',
-										marginBottom: '20px',
-									}}
-								>
-									Вход
-								</Typography>
+								<Typography className={styles.title}>Вход</Typography>
 								<YandexAuthButton />
-								<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-									или email
-								</Typography>
-								<Typography
-									variant='body2'
-									sx={{
-										color: '#A4AAB5',
-										lineHeight: '19.6px',
-										fontSize: '14px',
-										paddingTop: 1,
-										paddingRight: '90%',
-									}}
-								>
-									Email
-								</Typography>
+								<Box className={styles.orEmailWrapper}>
+									<div className={styles.orEmailLine} ></div>
+									<Typography className={styles.orEmail}>или email</Typography>
+									<div className={styles.orEmailLine}></div>
+								</Box>
+								
 								<TextField
 									fullWidth
+									placeholder='Email'
+									className={styles.inputField}
 									sx={{ ...InputStyleDark }}
 									{...register('email', emailOptions)}
 									onChange={handleInputChangeTrim}
 								/>
-
-								<Box
-									sx={{
-										width: '100%',
-										justifyContent: 'space-between',
-										display: 'flex',
-									}}
-								>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#A4AAB5',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-											}}
-										>
-											Пароль
-										</Typography>
-									</Box>
-									<Box>
-										<Typography
-											variant='body2'
-											display='inline'
-											sx={{
-												color: '#8153FB',
-												lineHeight: '19.6px',
-												fontSize: '14px',
-												fontWeight: '500',
-											}}
-										>
-											<Link
-												href='/reset'
-												style={{
-													textDecoration: 'none',
-													color: '#7F7DF3',
-												}}
-											>
-												Забыли пароль?
-											</Link>
-										</Typography>
-									</Box>
-								</Box>
 								<TextField
 									type={passwordShowed ? 'text' : 'password'}
 									fullWidth
+									placeholder='Пароль'
 									InputProps={{
 										endAdornment: (
 											<InputAdornment position='start'>
 												<div
-													onClick={() =>
-														showPassword((x) => !x)
-													}
-													style={{
-														cursor: 'pointer',
-														display: 'flex',
-														alignItems: 'center',
-													}}
+													className={styles.eyeToggle}
+													onClick={() => showPassword((x) => !x)}
 												>
 													{passwordShowed ? (
 														<ClosedEyeSvg
@@ -252,66 +167,37 @@ const Login: NextPageWithLayout = () => {
 											</InputAdornment>
 										),
 									}}
+									
+									className={styles.inputField}
 									sx={{ ...InputStyleDark }}
 									{...register('password', {
 										...PasswordOptions,
 									})}
 								/>
-								<Box sx={{ height: '50px', width: '100%' }}>
+								<Box className={styles.passwordRow}>
+									<Typography variant='body2' display='inline' className={styles.forgotPassword}>
+										<Link href='/reset' className={styles.forgotPasswordLink}>
+											Забыли пароль?
+										</Link>
+									</Typography>
+								</Box>
+								<Box className={styles.buttonWrapper}>
 									{!loading ? (
 										<Button
 											variant='contained'
-											style={{
-												marginTop: '15px',
-											}}
-											sx={{
-												backgroundColor: '#7F7DF3',
-												color: '#FFFFFF',
-												lineHeight: '20px',
-												fontSize: '16px',
-												fontWeight: '600px',
-												borderRadius: '13px',
-												textTransform: 'none',
-												width: '100%',
-												height: 48,
-												'&:hover': {
-													backgroundColor: '#7F7DF3',
-													opacity: [0.9, 0.8, 0.7],
-												},
-											}}
+											className={styles.submitButton}
 											onClick={handleSubmit(onSubmit, checkError)}
 										>
 											Войти
 										</Button>
 									) : (
-										<Box
-											style={{
-												margin: '25px auto',
-												display: 'flex',
-												justifyContent: 'center',
-											}}
-										>
-											<CircularProgress
-												size={30}
-												thickness={5}
-												sx={{ color: '#7F7DF3' }}
-											/>
+										<Box className={styles.loadingWrapper}>
+											<CircularProgress size={30} thickness={5} color='inherit' />
 										</Box>
 									)}
-									<Box
-										sx={{
-											width: '100%',
-											textAlign: 'center',
-											marginTop: '15px',
-										}}
-									>
-										<Link
-											href='/register'
-											style={{
-												textDecoration: 'none',
-												color: '#7F7DF3',
-											}}
-										>
+									<Box className={styles.registerLink}>
+										<Typography variant='body2' display='inline' className={styles.registerLinkText}>Нет аккаунта? </Typography>
+										<Link href='/register' className={styles.registerLinkAnchor}>
 											Зарегистрироваться
 										</Link>
 									</Box>
@@ -321,38 +207,29 @@ const Login: NextPageWithLayout = () => {
 					</form>
 				</Box>
 				{desktop && (
-					<Box
-						className={styles.imagebox}
-						sx={{
-							width: '50%',
-							height: '100vh',
-							backgroundColor: '#8280FF',
-							overflow: 'hidden',
-							position: 'relative',
-						}}
-					>
+					<Box className={styles.imagebox}>
 						<Image
-							style={{ position: 'absolute', top: 35, left: 35 }}
-							src={'/svg/logo.svg'}
+							className={styles.dashboardImage}
+							src={'/images/dashboard.png'}
 							alt={''}
-							width={42}
-							height={42}
+							width={1275}
+							height={871}
 						/>
 						<Image
-							src={'/images/dashboard.png'}
+							className={styles.imageboxLogo}
+							src={'/svg/logo.svg'}
 							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)',
-							}}
+							width={42}
+							height={42}
 						/>
+						<Box className={styles.imageboxLogoContent}>
+						<Typography className={styles.imageboxLogoText}>
+							Творчество. Технологии. Ты.
+						</Typography>
+						<Typography className={styles.imageboxLogoSubText}>
+							{`Создавай уникальный контент и общайся с продвинутыми чат-ботами,\n используя современные нейросети.`}
+						</Typography>
+						</Box>
 					</Box>
 				)}
 			</Stack>
@@ -1,11 +1,139 @@
+.container {
+	overflow: hidden;
+	padding: 0;
+	background-color: #151518;
+
+	@media screen and (max-width: 1000px) {
+		margin: 0 auto;
+	}
+}
+
+.form {
+	width: 50%;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		width: 100%;
+		align-items: flex-start;
+		margin-top: 10px;
+	}
+}
+
+.formInner {
+	width: 40vh;
+	height: 80%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@media screen and (max-width: 1000px) {
+		margin-top: 16px;
+	}
+}
+
+.logoMobile {
+	margin-top: 20px;
+}
+
+.title {
+	color: #e1e1e1;
+	line-height: 36.4px;
+	font-size: 26px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.orEmailWrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.orEmailLine {
+	height: 1px;
+	flex: 1;
+	background-color: #44444a;
+}
+
+.orEmail {
+	flex: 1;
+	font-size: 15px;
+	color: #a4aab5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.successText {
+	text-align: center;
+	color: #e1e1e1;
+}
+
 .imagebox {
+	width: 50%;
+	height: 100vh;
+	background-color: #8280ff;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	@media screen and (max-width: 1000px) {
 		display: none;
 	}
 }
 
-.form{
-  @media screen and (max-width: 1000px) {
-    width: 100%;
+.imageboxLogo {
+	position: absolute;
+	top: 35px;
+	left: 35px;
+}
+
+.dashboardImage {
+	position: absolute;
+	transform: scale(1.15);
+	bottom: 60px;
+	transform-origin: center;
+}
+
+.imageboxLogoContent {
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageboxLogoText {
+	font-weight: 800;
+	font-size: 48px;
+	color: #ffffff;
+}
+
+.imageboxLogoSubText {
+	font-weight: 400;
+	font-style: Regular;
+	line-height: 24px;
+	font-size: 20px;
+	text-align: center;
+	white-space: pre-line;
+}
+
+.inputField {
+	margin-bottom: 16px;
+
+	:global(.MuiInputBase-input) {
+		padding-block: 10px;
+
+		&::placeholder {
+			color: #a4aab5;
+			opacity: 1;
+		}
 	}
 }
\ No newline at end of file
@@ -17,11 +17,12 @@ import { getDeviceType } from '#/shared/lib/helpers'
 import styles from './register.module.scss'
 
 const Register: NextPageWithLayout = () => {
-	const device = getDeviceType()
-
-	const desktop = device === 'desktop'
-
+	const [desktop, setDesktop] = useState(true)
 	const [success, setSuccess] = useState(false)
+
+	React.useEffect(() => {
+		setDesktop(getDeviceType() === 'desktop')
+	}, [])
 	const [isReferral, setIsReferral] = useState<boolean>(true)
 
 	const referral = useAppSelector((state) => state.user.referral)
@@ -45,49 +46,25 @@ const Register: NextPageWithLayout = () => {
 
 	return (
 		<Stack
+			className={styles.container}
 			direction={desktop ? 'row' : 'column'}
 			alignItems='center'
 			justifyContent={desktop ? 'space-between' : 'center'}
-			sx={{
-				overflow: 'hidden',
-				padding: 0,
-				margin: desktop ? 0 : '0px auto',
-				backgroundColor: '#303035',
-			}}
 		>
 			{!desktop && (
 				<Image
-					style={{ marginTop: desktop ? 0 : '20px' }}
+					className={styles.logoMobile}
 					src={'/logo.svg'}
 					alt={''}
 					width={50}
 					height={50}
 				/>
 			)}
-			<Box
-        className={styles.form}
-				sx={{
-					width: desktop ? '50%' : '100%',
-					height: '100vh',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-					marginTop: desktop ? 0 : '10px',
-				}}
-			>
-				<Box
-					sx={{
-						width: '40vh',
-						height: '100%',
-						marginTop: desktop ? 0 : 2,
-						justifyContent: 'center',
-						alignItems: 'center',
-						display: 'flex',
-					}}
-				>
+			<Box className={styles.form}>
+				<Box className={styles.formInner}>
 					{success ? (
-						<Box textAlign='center'>
-							<Typography className='text'>
+						<Box className={styles.successText}>
+							<Typography>
 								Вы успешно зарегистрированы.
 								<br />
 								Мы отправили письмо для верификации на ваш email. В случае отсутствия, проверьте
@@ -100,66 +77,49 @@ const Register: NextPageWithLayout = () => {
 						</Box>
 					) : (
 						<Stack direction='column' justifyContent='center' alignItems='center' spacing={2}>
-							<Typography
-								sx={{
-									color: '#E1E1E1',
-									lineHeight: '36.4px',
-									fontSize: '26px',
-									fontWeight: 'bold',
-									marginBottom: '20px',
-								}}
-							>
-								Регистрация
-							</Typography>
+							<Typography className={styles.title}>Регистрация</Typography>
 
 							{referral === '' && isReferral && (
 								<>
 									<YandexAuthButton />
-									<Typography sx={{ fontSize: '15px', color: '#A4AAB5' }}>
-										или email
-									</Typography>
+									<Box className={styles.orEmailWrapper}>
+										<div className={styles.orEmailLine} />
+										<Typography className={styles.orEmail}>или email</Typography>
+										<div className={styles.orEmailLine} />
+									</Box>
 								</>
 							)}
-							<RegisterEmailForm successLogin={onSuccessRegister} />
+							<RegisterEmailForm successLogin={onSuccessRegister} inputClassName={styles.inputField} />
 						</Stack>
 					)}
 				</Box>
 			</Box>
 			{desktop && (
-				<Box
-          className={styles.imagebox}
-					sx={{
-						width: '50%',
-						height: '100vh',
-						backgroundColor: '#8280FF',
-						overflow: 'hidden',
-						position: 'relative',
-					}}
-				>
-					<Image
-						style={{ position: 'absolute', top: 35, left: 35 }}
-						src={'/svg/logo.svg'}
-						alt={''}
-						width={42}
-						height={42}
-					/>
-					<Image
-						src={'/images/dashboard.png'}
-						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)',
-						}}
-					/>
-				</Box>
-			)}
+					<Box className={styles.imagebox}>
+						<Image
+							className={styles.dashboardImage}
+							src={'/images/dashboard.png'}
+							alt={''}
+							width={1275}
+							height={871}
+						/>
+						<Image
+							className={styles.imageboxLogo}
+							src={'/svg/logo.svg'}
+							alt={''}
+							width={42}
+							height={42}
+						/>
+						<Box className={styles.imageboxLogoContent}>
+						<Typography className={styles.imageboxLogoText}>
+							Творчество. Технологии. Ты.
+						</Typography>
+						<Typography className={styles.imageboxLogoSubText}>
+							{`Создавай уникальный контент и общайся с продвинутыми чат-ботами,\n используя современные нейросети.`}
+						</Typography>
+						</Box>
+					</Box>
+				)}
 		</Stack>
 	)
 }