diff --git a/src/2_widgets/FooterLayout/FooterLayout.module.scss b/src/2_widgets/FooterLayout/FooterLayout.module.scss
index 49a1ee0..d558ef4 100644
--- a/src/2_widgets/FooterLayout/FooterLayout.module.scss
+++ b/src/2_widgets/FooterLayout/FooterLayout.module.scss
@@ -1,11 +1,15 @@
 @import '@styles/colors.scss';
 @import '@styles/mixins/font.scss';
 @import '@styles/mixins/media.scss';
+@import '@styles/mixins/btn';
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 35px;
 
-footer {
-	grid-column: 1/3;
 	@include media($min-width: 960px) {
-		padding: 0 100px;
+		padding: 30px 100px;
 	}
 
 	@include media($max-width: 960px) {
@@ -13,21 +17,112 @@ footer {
 	}
 }
 
-.links {
+.logoBlock {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
+.logoPicture {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	color: #202020;
+}
+
+.logoImg {
+	display: flex;
+	align-items: center;
+}
+
+.logoText {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	text-decoration: none;
+}
+
+.logoName {
+	@include font-source-sans(20px, $neutral-text-main-color, 500, 24px, 'Fredoka');
+}
+
+.logoSlogan {
+	@include font-source-sans(12px, $neutral-text-dark-color, 400, 16px, 'Fredoka');
+}
+
+.svg {
+	width: 40px;
+	height: 38px;
+}
+
+.nav {
 	display: flex;
 	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
 	list-style: none;
-	justify-content: center;
-	align-items: center;
-	gap: 14px;
-	padding: 2em;
+	justify-content: space-between;
+	align-items: flex-start;
 
 	@include media($max-width: 835px) {
 		flex-direction: column;
 	}
 }
 
+.links {
+	display: flex;
+	flex-direction: column;
+	row-gap: 16px;
+	flex-wrap: wrap;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	row-gap: 16px;
+	margin-bottom: 16px;
+}
+
+.inputGroup {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 16px;
+}
+
+.input {
+	width: 303px;
+	padding: 10px 20px;
+	font-size: 14px;
+	line-height: 16px;
+	border-radius: 10px;
+}
+
+.form ::placeholder {
+	font-size: 14px;
+	line-height: 16px;
+	color: $neutral-text-light-color;
+}
+
 .link,
+.label,
 .copyright {
 	@include font-source-sans(14px, $neutral-text-dark-color, 400, 16px);
 }
+
+.submitBtn {
+	@include primary-btn;
+
+	padding: 10px 24px;
+	font-size: 12px;
+	border-radius: 10px;
+}
+
+.copyright {
+	margin: 0;
+	padding: 0;
+	font-size: 12px;
+}
diff --git a/src/2_widgets/FooterLayout/FooterLayout.tsx b/src/2_widgets/FooterLayout/FooterLayout.tsx
index 2dca6eb..3ea32a6 100644
--- a/src/2_widgets/FooterLayout/FooterLayout.tsx
+++ b/src/2_widgets/FooterLayout/FooterLayout.tsx
@@ -1,29 +1,67 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SocialsList from './SocialsList/SocialsList';
 import { CustomLink } from '../../5_shared/ui';
-import { ABOUT_ROUTE, CONTACTS_ROUTE, POLICY_ROUTE, TERMS_ROUTE } from '@shared/lib/routes';
-import styles from './FooterLayout.module.scss';
+import { Input } from '../../5_shared/ui';
 
-const links = [
-	{
-		title: 'О проекте',
-		href: ABOUT_ROUTE,
-	},
-	{
-		title: 'Контакты',
-		href: CONTACTS_ROUTE,
-	},
-	{
-		title: 'Политика конфиденциальности',
-		href: POLICY_ROUTE,
-	},
-	{
-		title: 'Условия пользования',
-		href: TERMS_ROUTE,
-	},
-];
+import SvgIconLogo from '@assets/icons/logo.svg?react';
+
+import {
+	MAIN_ROUTE,
+	ABOUT_ROUTE,
+	CONTACTS_ROUTE,
+	POLICY_ROUTE,
+	TERMS_ROUTE,
+	FEEDBACK_ROUTE,
+	DPA_ROUTE,
+} from '@shared/lib/routes';
+import styles from './FooterLayout.module.scss';
 
 export default function FooterLayout() {
-	const footerLinks = links.map((link, idx) => (
-		<li key={idx}>
+	const [inputText, setInputText] = useState('');
+	const { t } = useTranslation('header');
+
+	const leftLinks = [
+		{
+			title: 'О платформе',
+			href: ABOUT_ROUTE,
+		},
+		{
+			title: 'Контакты',
+			href: CONTACTS_ROUTE,
+		},
+		{
+			title: 'Отзывы',
+			href: FEEDBACK_ROUTE,
+		},
+	];
+
+	const rightLinks = [
+		{
+			title: 'Правила и условия',
+			href: TERMS_ROUTE,
+		},
+		{
+			title: 'Политика конфиденциальности',
+			href: POLICY_ROUTE,
+		},
+		{
+			title: 'Согласие на обработку персональных данных',
+			href: DPA_ROUTE,
+		},
+	];
+
+	const footerLeftLinks = leftLinks.map((link, index) => (
+		<li key={index}>
+			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
+				{link.title}
+			</CustomLink>
+		</li>
+	));
+
+	const footerRightLinks = rightLinks.map((link, index) => (
+		<li key={index}>
 			<CustomLink apperance="underline" target="_blank" href={link.href} className={styles.link}>
 				{link.title}
 			</CustomLink>
@@ -31,11 +69,56 @@ export default function FooterLayout() {
 	));
 
 	return (
-		<footer>
-			<ul className={styles.links}>
-				<li className={styles.copyright}>© 2023 Linguista</li>
-				{footerLinks}
+		<footer className={styles.footer}>
+			<div className={styles.logoBlock}>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoPicture}
+					onClick={() => console.log('click')}
+				>
+					<div className={styles.logoImg}>
+						<SvgIconLogo className={styles.svg} />
+					</div>
+				</CustomLink>
+				<CustomLink
+					href={MAIN_ROUTE}
+					target="_self"
+					className={styles.logoText}
+					onClick={() => console.log('click')}
+				>
+					<span className={styles.logoName}>{t('projectName')}</span>
+					<span className={styles.logoSlogan}>{t('projectSlogan')}</span>
+				</CustomLink>
+			</div>
+
+			<ul className={styles.nav}>
+				<li>
+					<ul className={styles.links}>{footerLeftLinks}</ul>
+				</li>
+				<li>
+					<ul className={styles.links}>{footerRightLinks}</ul>
+				</li>
+				<li>
+					<form className={styles.form}>
+						<label className={styles.label}>Нашли ошибку? – Напишите нам!</label>
+						<div className={styles.inputGroup}>
+							<Input
+								className={styles.input}
+								type="text"
+								placeholder="Сообщить об ошибке"
+								value={inputText}
+								onChange={(evt) => setInputText(evt.target.value)}
+							></Input>
+							<button className={styles.submitBtn} type="submit">
+								Отправить
+							</button>
+						</div>
+					</form>
+					<SocialsList />
+				</li>
 			</ul>
+			<p className={styles.copyright}>© 2023 Linguista. Все права защищены.</p>
 		</footer>
 	);
 }
diff --git a/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss b/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss
new file mode 100644
index 0000000..78dca86
--- /dev/null
+++ b/src/2_widgets/FooterLayout/SocialsList/SocialsList.module.scss
@@ -0,0 +1,18 @@
+.socials {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.icon {
+	padding-right: 0;
+	padding-left: 0;
+}
+
+.svg {
+	width: 32px;
+	height: 32px;
+}
diff --git a/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx b/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx
new file mode 100644
index 0000000..4aa49cf
--- /dev/null
+++ b/src/2_widgets/FooterLayout/SocialsList/SocialsList.tsx
@@ -0,0 +1,52 @@
+import { CustomLink } from '../../../5_shared/ui';
+import { ButtonIcon } from '../../../5_shared/ui';
+
+import SvgIconYoutube from '@assets/icons/socials/youtube.svg?react';
+import SvgIconTelegram from '@assets/icons/socials/telegram.svg?react';
+import SvgIconVk from '@assets/icons/socials/vk.svg?react';
+import SvgIconDiscord from '@assets/icons/socials/discord.svg?react';
+import SvgIconGithub from '@assets/icons/socials/github.svg?react';
+
+import styles from './SocialsList.module.scss';
+
+export default function SocialsList() {
+	return (
+		<ul className={styles.socials}>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconYoutube className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconTelegram className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconVk className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconDiscord className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+			<li>
+				<CustomLink apperance="regular" href="#" target="_blank">
+					<ButtonIcon className={styles.icon}>
+						<SvgIconGithub className={styles.svg} />
+					</ButtonIcon>
+				</CustomLink>
+			</li>
+		</ul>
+	);
+}
diff --git a/src/2_widgets/MainLayout/MainLayout.tsx b/src/2_widgets/MainLayout/MainLayout.tsx
index 2c0a7ae..5eea379 100644
--- a/src/2_widgets/MainLayout/MainLayout.tsx
+++ b/src/2_widgets/MainLayout/MainLayout.tsx
@@ -17,8 +17,8 @@ const MainLayout = () => {
 				<main className={styles.inner} style={{ width: resize }}>
 					<Outlet />
 				</main>
-				<FooterLayout />
 			</div>
+			<FooterLayout />
 		</>
 	);
 };
diff --git a/src/5_shared/assets/icons/actions/tick.svg b/src/5_shared/assets/icons/actions/tick.svg
index cea3353..a2fcc91 100644
--- a/src/5_shared/assets/icons/actions/tick.svg
+++ b/src/5_shared/assets/icons/actions/tick.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="#272932"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="currentColor"/>
 </svg>
diff --git a/src/5_shared/lib/routes.ts b/src/5_shared/lib/routes.ts
index 6606e93..7957c06 100644
--- a/src/5_shared/lib/routes.ts
+++ b/src/5_shared/lib/routes.ts
@@ -20,3 +20,5 @@ export const WORD_ROUTE = '/vocabulary/:slugWord';
 export const CONTACTS_ROUTE = '/contacts';
 export const POLICY_ROUTE = '/privacy-policy';
 export const TERMS_ROUTE = '/terms-of-use';
+export const FEEDBACK_ROUTE = '/feedback';
+export const DPA_ROUTE = 'data-processing-agreement';
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
new file mode 100644
index 0000000..f7a6ee4
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
@@ -0,0 +1,71 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.checkbox {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 6px;
+	color: rgb(255, 255, 255, 0);
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 1px solid $danger-bright-color;
+	}
+}
+
+label:hover .icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+	color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-text-light-color;
+	color: $neutral-text-light-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
new file mode 100644
index 0000000..d816df8
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -0,0 +1,71 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import SvgIconTick from '@assets/icons/actions/tick.svg?react';
+
+import styles from './CustomCheckbox.module.scss';
+
+interface CustomCheckboxProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+	children?: JSX.Element | string;
+}
+
+export const CustomCheckbox = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+	children,
+}: CustomCheckboxProps) => {
+	return (
+		<label
+			className={cx(styles.checkbox, labelClassName, {
+				[styles['checkbox--right']]: isPositionRight,
+			})}
+		>
+			<input
+				type="checkbox"
+				value={value}
+				name={name}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{children}</span>
+					<span
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
+					>
+						<SvgIconTick />
+					</span>
+				</>
+			) : (
+				<>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}>
+						<SvgIconTick />
+					</span>
+					<span className={styles.label}>{children}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
new file mode 100644
index 0000000..0f2dfc6
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
@@ -0,0 +1,85 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.radio {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-background-main-color;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 50%;
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 1px solid $danger-bright-color;
+	}
+}
+
+label:hover .icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+}
+
+input:checked ~ .icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-background-main-color;
+	border: 1px solid $neutral-text-light-color;
+}
+
+input:checked:disabled ~ .icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-text-light-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.tsx b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
new file mode 100644
index 0000000..12ab1a7
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
@@ -0,0 +1,63 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomRadio.module.scss';
+
+interface CustomRadioProps {
+	name: string;
+	value: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+}
+
+export const CustomRadio = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+}: CustomRadioProps) => {
+	return (
+		<label
+			className={cx(styles.radio, labelClassName, { [styles['radio--right']]: isPositionRight })}
+		>
+			<input
+				type="radio"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{labelText}</span>
+					<span
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
+					></span>
+				</>
+			) : (
+				<>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}></span>
+					<span className={styles.label}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
new file mode 100644
index 0000000..02dc4ac
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
@@ -0,0 +1,105 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.toggle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	position: relative;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 12px;
+
+	&--right {
+		margin-right: 0;
+	}
+}
+
+.icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+}
+
+input:checked ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-line-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:disabled ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-line-color;
+	border: 1px solid$neutral-line-color;
+}
+
+input:checked:disabled ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.tsx b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
new file mode 100644
index 0000000..724028d
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
@@ -0,0 +1,59 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomToggle.module.scss';
+
+interface CustomToggleProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+}
+
+export const CustomToggle = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+}: CustomToggleProps) => {
+	return (
+		<label
+			className={cx(styles.toggle, labelClassName, { [styles['toggle--right']]: isPositionRight })}
+		>
+			<input
+				type="checkbox"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{labelText}</span>
+					<span className={cx(styles.icon, styles['icon--right'])}></span>
+				</>
+			) : (
+				<>
+					<span className={styles.icon}></span>
+					<span className={styles.label}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};