diff --git a/src/components/Button/button.module.scss b/src/components/button-default/button.module.scss
similarity index 100%
rename from src/components/Button/button.module.scss
rename to src/components/button-default/button.module.scss
diff --git a/src/components/Button/index.tsx b/src/components/button-default/index.tsx
similarity index 85%
rename from src/components/Button/index.tsx
rename to src/components/button-default/index.tsx
index da9e54e8..08535b98 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/button-default/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import styles from './button.module.scss';
 
-export type ButtonProps = {
+export type ButtonDefaultProps = {
 	buttonText: string;
 	buttonStyle:
 		| 'green-border-button'
@@ -15,7 +15,7 @@ export type ButtonProps = {
 	type?: 'button' | 'submit' | 'reset';
 };
 
-const Button = ({
+const ButtonDefault = ({
 	buttonText,
 	buttonStyle,
 	classNameActive,
@@ -23,7 +23,7 @@ const Button = ({
 	disabled,
 	classNames,
 	type,
-}: ButtonProps) => {
+}: ButtonDefaultProps) => {
 	return (
 		<button
 			type={type ? type : 'button'}
@@ -40,4 +40,4 @@ const Button = ({
 	);
 };
 
-export default Button;
+export default ButtonDefault;
diff --git a/src/components/energy-value/energy-value.module.scss b/src/components/energy-value/energy-value.module.scss
index d805f289..0662941f 100644
--- a/src/components/energy-value/energy-value.module.scss
+++ b/src/components/energy-value/energy-value.module.scss
@@ -36,7 +36,7 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.energy-value {
 		width: calc(100% - 16px);
 		max-width: 100%;
diff --git a/src/components/making-order-btn/index.tsx b/src/components/making-order-btn/index.tsx
index 8c6c7922..3f5fde61 100644
--- a/src/components/making-order-btn/index.tsx
+++ b/src/components/making-order-btn/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './making-order-btn.module.scss';
-import Button from '@components/Button';
-import type { ButtonProps } from '@components/Button';
+import Button from '@components/button-default';
+import type { ButtonDefaultProps } from '@components/button-default';
 
-interface MakingOrderBtnProps extends Pick<ButtonProps, 'disabled' | 'onClick'> {}
+interface MakingOrderBtnProps extends Pick<ButtonDefaultProps, 'disabled' | 'onClick'> {}
 
 const MakingOrderBtn: React.FC<MakingOrderBtnProps> = ({ onClick, disabled }) => {
 	return (
diff --git a/src/components/payment-button/index.tsx b/src/components/payment-button/index.tsx
index aa1b6884..9bff507f 100644
--- a/src/components/payment-button/index.tsx
+++ b/src/components/payment-button/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import api from '@services/api';
-import Button from '@components/Button';
+import Button from '@components/button-default';
 import styles from './payment-button.module.scss';
 
 type PaymentButtonProps = {
diff --git a/src/components/ratings-and-reviews-components/review-and-rating-post-form/index.tsx b/src/components/ratings-and-reviews-components/review-and-rating-post-form/index.tsx
index 87a7f9cf..311025b6 100644
--- a/src/components/ratings-and-reviews-components/review-and-rating-post-form/index.tsx
+++ b/src/components/ratings-and-reviews-components/review-and-rating-post-form/index.tsx
@@ -2,7 +2,7 @@ import React, { SyntheticEvent, useEffect } from 'react';
 import api from '@services/api';
 import { useFormAndValidation } from '@hooks/use-form-and-validation';
 import RatingInput from '@components/ratings-and-reviews-components/rating-input';
-import Button from '@components/button';
+import Button from '@components/button-default';
 import { dateOptions } from '../utils/constants';
 import { IRatingsAndReviews, IReview, TRating, TReviewNullable } from '../utils/types';
 import styles from './review-and-rating-post-form.module.scss';
diff --git a/src/components/recipes-components/ingredients-list-popup/index.tsx b/src/components/recipes-components/ingredients-list-popup/index.tsx
index 9d346363..9716eaef 100644
--- a/src/components/recipes-components/ingredients-list-popup/index.tsx
+++ b/src/components/recipes-components/ingredients-list-popup/index.tsx
@@ -17,7 +17,7 @@ const IngredientsListPopup: React.FC<RecipeIngredientsProps> = ({
 								onClick={() => handleClick(ingredient.id)}
 								className={styles['popup-ingredients__name']}
 							>
-								{ingredient?.name}
+								{`${ingredient?.name}`}
 							</span>
 							<span className={styles['popup-ingredients__weight']}>
 								{ingredient.quantity_in_recipe_measure}
diff --git a/src/components/recipes-components/ingredients-list/index.tsx b/src/components/recipes-components/ingredients-list/index.tsx
index 6210a0ee..7f23b302 100644
--- a/src/components/recipes-components/ingredients-list/index.tsx
+++ b/src/components/recipes-components/ingredients-list/index.tsx
@@ -33,7 +33,7 @@ const IngredientsList: React.FC<RecipeIngredientsProps> = ({
 						<p
 							onClick={() => handleClick(ingredient.id)}
 							className={styles.ingredient__name}
-						>{`${ingredient.name}, ${ingredient.amount + ingredient.measure_unit}`}</p>
+						>{`${ingredient.name}`}</p>
 						<p className={styles.ingredient__weight}>
 							{ingredient.quantity_in_recipe_measure}
 						</p>
diff --git a/src/components/recipes-components/ingredients-list/ingredients-list.module.scss b/src/components/recipes-components/ingredients-list/ingredients-list.module.scss
index 82d474e7..5b9157b7 100644
--- a/src/components/recipes-components/ingredients-list/ingredients-list.module.scss
+++ b/src/components/recipes-components/ingredients-list/ingredients-list.module.scss
@@ -7,7 +7,7 @@
 	font-family: $ubuntu-font;
 	color: $active-text-color;
 
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		max-width: 100%;
 		width: 100%;
 	}
@@ -39,7 +39,7 @@
 		grid-column: span 3;
 		padding: 8px 0;
 
-		@media screen and (width <= 768px) {
+		@media screen and (width <= 1024px) {
 			// width: 100%;
 			display: flex;
 			justify-content: space-between;
@@ -48,7 +48,7 @@
 }
 
 .ingredient {
-	@media screen and (width <= 768px) {
+	@media screen and (width <= 1024px) {
 		width: 100%;
 	}
 
@@ -99,9 +99,12 @@
 	}
 }
 
-@media screen and (width <= 768px) {
+@media screen and (width <= 1024px) {
 	.ingredients__list {
+		display: flex;
+		flex-direction: column;
 		gap: 16px;
-		margin: 8px;
+		padding: 8px;
+		margin: 0;
 	}
 }
diff --git a/src/components/recipes-components/products-list-popup/index.tsx b/src/components/recipes-components/products-list-popup/index.tsx
index b874f320..5e063983 100644
--- a/src/components/recipes-components/products-list-popup/index.tsx
+++ b/src/components/recipes-components/products-list-popup/index.tsx
@@ -70,7 +70,7 @@ const ProductsListPopup: React.FC<RecipeIngredientsProps> = ({
 								<p
 									className={styles.product__name}
 									onClick={() => handleClick(product.id)}
-								>{`${product.name}`}</p>
+								>{`${product.name}, ${product.amount + product.measure_unit}`}</p>
 
 								<div className={clsx(styles.product__counter, styles.counter)}>
 									<button
diff --git a/src/components/recipes-components/products-list-popup/products-list-popup.module.scss b/src/components/recipes-components/products-list-popup/products-list-popup.module.scss
index 22ebd03a..451ad822 100644
--- a/src/components/recipes-components/products-list-popup/products-list-popup.module.scss
+++ b/src/components/recipes-components/products-list-popup/products-list-popup.module.scss
@@ -164,4 +164,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
+	align-items: center;
+	text-align: center;
 }
diff --git a/src/components/top-selling-this-week/index.tsx b/src/components/top-selling-this-week/index.tsx
index cf61bbcd..6480de43 100644
--- a/src/components/top-selling-this-week/index.tsx
+++ b/src/components/top-selling-this-week/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import api from '@services/api';
 import type { Product } from '@services/generated-api/data-contracts';
-import Button from '@components/Button';
+import Button from '@components/button-default';
 import ProductCard from '@components/product-card';
 import styles from './top-selling-this-week.module.scss';
 
@@ -77,7 +77,7 @@ const TopSellingThisWeek: React.FC = () => {
 		<div className={styles.topSellingThisWeek}>
 			<h2 className={styles.topSellingThisWeek__title}>Лидеры продаж этой недели</h2>
 			<div className={styles.topSellingThisWeek__scrollContainer}>
-				<ul className={styles.topSellingThisWeek__buttonContainers}>
+				<ul className={styles.topSellingThisWeek__buttonContainer}>
 					<li>
 						<Button
 							buttonText="Все категории"
diff --git a/src/components/top-selling-this-week/top-selling-this-week.module.scss b/src/components/top-selling-this-week/top-selling-this-week.module.scss
index 94bddc25..5a0b2d2b 100644
--- a/src/components/top-selling-this-week/top-selling-this-week.module.scss
+++ b/src/components/top-selling-this-week/top-selling-this-week.module.scss
@@ -27,11 +27,11 @@
 	}
 }
 
-.topSellingThisWeek__buttonContainers {
+.topSellingThisWeek__buttonContainer {
 	margin: 0;
 	padding: 16px 0;
 	display: flex;
-	flex-wrap: wrap;
+	overflow-x: scroll;
 	justify-content: center;
 	gap: 16px;
 
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index a2b0c218..0da4ed34 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -9,7 +9,7 @@ type InputProps = {
 } & React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input: React.FC<InputProps> = (props: InputProps) => {
-	const { inputNameSpan, error, isValid, withErrorSpan, ...inputProps } = props;
+	const { inputNameSpan, error, isValid, withErrorSpan, value, ...inputProps } = props;
 	const hasError = error && error[inputProps.name || ''];
 
 	return (
@@ -19,7 +19,7 @@ const Input: React.FC<InputProps> = (props: InputProps) => {
 				className={`${styles.input_type_normal} ${
 					hasError && !isValid ? `${styles.input_type_error}` : ''
 				}`}
-				value={inputProps.value !== undefined ? String(inputProps.value) : ''}
+				value={value ? String(value) : ''}
 				{...inputProps}
 			/>
 			{withErrorSpan && <span className={styles.spanAfter}>{hasError as string}</span>}
diff --git a/src/contexts/cart-context.tsx b/src/contexts/cart-context.tsx
index 2ddcabd9..03f009f0 100644
--- a/src/contexts/cart-context.tsx
+++ b/src/contexts/cart-context.tsx
@@ -30,6 +30,8 @@ type CartDataItem = {
 	count_of_products: number;
 	products: ProductItem[];
 	total_price: number;
+	coupon_code?: string;
+	discount_amount?: number;
 };
 
 type ResponseText = {
diff --git a/src/pages/checkout/checkout.module.scss b/src/pages/checkout/checkout.module.scss
index da31378d..95e7ad3e 100644
--- a/src/pages/checkout/checkout.module.scss
+++ b/src/pages/checkout/checkout.module.scss
@@ -150,6 +150,21 @@
 	}
 }
 
+.summary__promoError {
+	font-family: $ubuntu-font;
+	min-height: 20px;
+	text-align: center;
+	color: $error-color;
+	font-size: 13px;
+	font-weight: 300;
+	line-height: 140%;
+
+	@media screen and (width <= 768px) {
+		font-size: 12px;
+		min-height: 17px;
+	}
+}
+
 .summary__sale {
 	max-height: 56px;
 	display: flex;
diff --git a/src/pages/checkout/index.tsx b/src/pages/checkout/index.tsx
index 4de63605..8a983bc9 100644
--- a/src/pages/checkout/index.tsx
+++ b/src/pages/checkout/index.tsx
@@ -46,6 +46,8 @@ const Checkout: React.FC = () => {
 	const [comment, setComment] = React.useState<string>('');
 	const [popupText, setPopupText] = useState('');
 	const [isAgreed, setIsAgreed] = useState(false);
+	const [promocodeError, setPromocodeError] = useState('');
+	const [inputPromoValue, setInputPromoValue] = useState('');
 
 	const openInfoPopup = (text: string) => {
 		setPopupText(text);
@@ -141,6 +143,25 @@ const Checkout: React.FC = () => {
 				}
 			});
 	};
+
+	const handleDiscount = (e: React.MouseEvent<HTMLButtonElement>) => {
+		api
+			.usersShoppingCartCouponApply({ code: inputPromoValue })
+			.then(() => {
+				setPromocodeError('');
+				loadCartData();
+			})
+			.catch((error) => {
+				setPromocodeError(error.errors[0].detail);
+				loadCartData();
+			});
+		e.preventDefault();
+	};
+
+	const handleInputPromoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputPromoValue(e.target.value);
+	};
+
 	const handlePaymentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		setSelectedPayment(event.target.value);
 	};
@@ -460,15 +481,32 @@ const Checkout: React.FC = () => {
 								</p>
 								<p className={`text_type_u ${styles.pricelist__price}`}>0 руб.</p>
 							</div>
+							<div className={styles.pricelist__item}>
+								<p className={`text_type_u ${styles.summary__title}`}>Скидка</p>
+								<p className={`text_type_u ${styles.pricelist__price}`}>
+									{cartData.coupon_code ? cartData.discount_amount : 0} руб.
+								</p>
+							</div>
 							<hr className={styles.pricelist__divider} />
 						</div>
 					</div>
 					<div className={styles.summary__promo}>
 						<p className={`text_type_u`}>Промокод</p>
 						<form className={styles.summary__sale} noValidate>
-							<input type="text" className={`${styles.summary__input_type_sale}`}></input>
-							<button className={`${styles.summary__btn_type_submit}`}>Применить</button>
+							<input
+								value={inputPromoValue}
+								onChange={handleInputPromoChange}
+								type="text"
+								className={`${styles.summary__input_type_sale}`}
+							></input>
+							<button
+								className={`${styles.summary__btn_type_submit}`}
+								onClick={(e) => handleDiscount(e)}
+							>
+								Применить
+							</button>
 						</form>
+						<span className={styles.summary__promoError}>{promocodeError}</span>
 					</div>
 					<div className={styles.orderse}>
 						<button
diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx
index ad968d9a..b73c1a95 100644
--- a/src/pages/product/index.tsx
+++ b/src/pages/product/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import styles from './product.module.scss';
-import Button from '@components/Button';
+import Button from '@components/button-default';
 import { useParams } from 'react-router';
 import api from '@services/api.ts';
 import Preloader from '@components/preloader';
diff --git a/src/pages/profile/profile-user/index.tsx b/src/pages/profile/profile-user/index.tsx
index 7428ef01..fb28517c 100644
--- a/src/pages/profile/profile-user/index.tsx
+++ b/src/pages/profile/profile-user/index.tsx
@@ -63,8 +63,9 @@ export default function ProfileUser() {
 				first_name: `${values.profile_firstName}`,
 				last_name: `${values.profile_lastName}`,
 				// city: `${values.profile_city}`,
-				birth_date:
-					values.profile_birthDate === '' ? null : `${values.profile_birthDate}`,
+				...(values.profile_birthDate !== null && {
+					birth_date: `${values.profile_birthDate}`,
+				}),
 				phone_number: `${values.profile_phoneNumber}`,
 			})
 			.then((data) => {
@@ -97,7 +98,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_firstName}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan="Фамилия"
@@ -109,7 +109,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_lastName}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan={`Email* (Почтовый адрес)`}
@@ -133,7 +132,6 @@ export default function ProfileUser() {
 					type="phone"
 					value={values.profile_phoneNumber}
 					withErrorSpan={true}
-					required
 				/>
 				<Input
 					inputNameSpan="Username"
@@ -157,7 +155,6 @@ export default function ProfileUser() {
 					type="text"
 					value={values.profile_birthDate || ''}
 					withErrorSpan={true}
-					required
 				/>
 				{/* <Input
 					inputNameSpan="Город"
diff --git a/src/pages/recipe-list/receipt-list.module.scss b/src/pages/recipe-list/receipt-list.module.scss
index 1b7421c9..a90da537 100644
--- a/src/pages/recipe-list/receipt-list.module.scss
+++ b/src/pages/recipe-list/receipt-list.module.scss
@@ -3,6 +3,11 @@
 	width: calc(100% - 128px * 2);
 	display: flex;
 	flex-direction: column;
+	padding: 48px 0;
+
+	@media screen and (width <= 768px) {
+		width: calc(100% - 50px * 2);
+	}
 }
 
 .recipelist__container {
@@ -21,4 +26,22 @@
 	columns: 20px;
 	grid-template-columns: repeat(3, calc(100% / 3 - 40px));
 	grid-auto-rows: 380px;
+
+	@media screen and (width <= 1100px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 768px) {
+		grid-auto-rows: 150px;
+		justify-items: center;
+		grid-template-columns: repeat(3, calc(30% - 20px));
+	}
+
+	@media screen and (width <= 500px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 350px) {
+		grid-template-columns: 1fr;
+	}
 }
diff --git a/src/pages/recipe/recipe.module.scss b/src/pages/recipe/recipe.module.scss
index 1306d527..638ae978 100644
--- a/src/pages/recipe/recipe.module.scss
+++ b/src/pages/recipe/recipe.module.scss
@@ -5,17 +5,23 @@
 	font-family: $ubuntu-font;
 	color: $active-text-color;
 	width: calc(100% - 20px * 2);
+	margin: 0 auto;
 
 	@media screen and (width <= 768px) {
-		max-width: calc(100% - 20px * 2);
+		max-width: 100%;
 		width: 100%;
 		margin: 0 auto;
 	}
 
 	&__container {
-		max-width: calc(1024px - 40px * 2);
+		max-width: calc(1024px - 20px * 2);
 		margin: 0 auto;
 
+		@media screen and (width <= 1024px) {
+			width: calc(100% - 20px * 2);
+			margin: 0 auto;
+		}
+
 		@media screen and (width <= 768px) {
 			width: calc(100% - 20px * 2);
 			max-width: 100%;
@@ -32,6 +38,11 @@
 		grid-template-columns: 500px auto;
 		column-gap: 107px;
 
+		@media screen and (width <= 1024px) {
+			column-gap: 15px;
+			grid-template-columns: 2fr 1fr;
+		}
+
 		@media screen and (width <= 768px) {
 			width: 100%;
 			margin: 0 auto;
diff --git a/src/services/api.ts b/src/services/api.ts
index 25364268..b57c2c0c 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -21,6 +21,7 @@ import type {
 	ReviewCreate,
 	ReviewUpdate,
 	Payment,
+	Coupon,
 } from './generated-api/data-contracts';
 import { BACKEND_URL } from '@data/constants.ts';
 import Cookies from 'js-cookie';
@@ -330,6 +331,17 @@ class Api {
 		});
 	}
 
+	usersShoppingCartCouponApply(data: Coupon) {
+		return this._request(`shopping_cart/coupon_apply/`, {
+			method: 'POST',
+			credentials: 'include',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify(data),
+		});
+	}
+
 	/* ----------------------------- Products ----------------------------- */
 	productsList(slug: string) {
 		const headers: HeadersInit = {
diff --git a/src/services/generated-api/data-contracts.ts b/src/services/generated-api/data-contracts.ts
index 47d3ec3b..b31724a1 100644
--- a/src/services/generated-api/data-contracts.ts
+++ b/src/services/generated-api/data-contracts.ts
@@ -1133,3 +1133,24 @@ export interface OrderCheck {
 export type Payment = {
 	stripe_session_id: string;
 };
+
+export interface Coupon {
+	code: string;
+}
+
+export type Promo = {
+	code: string;
+	conditions: string;
+	discount: number;
+	discount_amount: number;
+	end_time: null;
+	id: number;
+	image: null;
+	is_active: boolean;
+	is_constant: boolean;
+	name: string;
+	new_total_price: number;
+	promotion_type: string;
+	slug: string;
+	start_time: string;
+};