diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss
index 8c10f0d4..55e6ef01 100644
--- a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss
+++ b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss
@@ -1,56 +1,58 @@
-@use '../../../../shared/styles/utils/variables' as var;
-@use '../../../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
-.description {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  background: var.$white;
-  border-radius: 10px;
-  height: 110px;
-  width: 60%;
-}
-
-.frame {
-  width: 90px;
-  height: 90px;
-  display: flex;
+.productEntity {
+  grid-area: productEntity;
+  display: grid;
+  grid-template-columns: 40% 1fr;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  margin: 0 20px 0 0;
-  background: var.$white;
-  border-radius: 5px;
+  gap: 20px;
+  width: 100%;
+  max-width: 500px;
 
   @include media.respond-to('large') {
-    border: 1px solid var.$light-grey;
+    max-width: 100%;
+  }
+
+  @include media.respond-to('middle') {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  &__imageBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
 .image {
-  display: flex;
-  max-height: 100%;
-  width: 70px;
-  height: 70px;
+  width: 100px;
   object-fit: cover;
 }
 
-.description_wrapper {
+.description {
   display: flex;
   flex-direction: column;
-  max-height: 80px;
+  gap: 2px;
+  width: 100%;
+
+  @include media.respond-to('middle') {
+    flex-direction: column;
+    max-width: 100%;
+  }
 }
 
 .name {
   display: flex;
   font-size: 15px;
-  line-height: 1.35;
   font-weight: 700;
   color: var.$body-color;
   text-overflow: ellipsis;
   overflow: hidden;
- 
-  @include media.respond-to('large') {
-    width: 100%;
+  transition: 0.25s;
+
+  &:hover {
+    color: var.$theme-primary-color;
   }
 }
diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx
index 321033e9..1cd8beb0 100644
--- a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx
+++ b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx
@@ -1,6 +1,7 @@
 import { type FC } from 'react'
 
 import { IProduct } from '@/shared/model/types/ProductModel'
+import Link from '@/shared/ui/Link/Link'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './ProductEntity.module.scss'
@@ -9,23 +10,24 @@ import styles from './ProductEntity.module.scss'
  * Компонент служит для отображения товаров, пришедших с сервера.
  * @param {IImagesData[]} images-картика с изображением продукта;
  * @param {string} name- название продукта;
- * @param {number} id -артикул продукта;
+ * @param {number} code -артикул продукта;
  * @param {number} price -стоимость продукта;
  * @param {string} currency - валюта, в которой обозначена стоимость;
  */
 
-export const ProductEntity: FC<IProduct> = product => {
+export const ProductEntity: FC<IProduct> = ({ ...product }) => {
   return (
-    <div className={`${styles.description}`}>
-      <div className={`${styles.frame}`}>
-        {(product.images.length > 0 && (
-          <img src={product.images[0].image} alt={'product'} className={styles.image} />
-        )) || <></>}
-      </div>
-      <div className={`${styles.description_wrapper}`}>
-        <Subheading>{product.id}</Subheading>
-        <a className={`${styles.name}`}>{product.name}</a>
+    <div className={styles.productEntity}>
+      <div className={styles.productEntity__imageBox}>
+        <img src={product.images[0].image} alt="product" className={styles.image} />
       </div>
+
+      <article className={styles.description}>
+        <Subheading className={styles.code}>{product.code}</Subheading>
+        <Link to={'#'} className={styles.name}>
+          {product.name}
+        </Link>
+      </article>
     </div>
   )
 }
diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss
index 0829ec83..5ffc5991 100644
--- a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss
+++ b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss
@@ -1,116 +1,84 @@
-@use '../../../../shared/styles/utils/variables' as var;
-@use '../../../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/z-index' as z-index;
 
-.container {
-  display: flex;
+.cartEdit {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 20% 20%;
+  grid-template-areas: 'productEntity count sumWrapper';
   align-items: center;
+  gap: 20px;
   width: 100%;
-  min-width: 500px;
-  height: 140px;
-  background-color: var.$white;
+  min-height: 140px;
+  background: var.$white;
   border-radius: 10px;
   padding: 20px;
-  position: relative;
 
-  @include media.respond-to('large') {
-    width: 100%;
-    flex-direction: column;
-    height: 200px;
-    row-gap: 20px;
-    padding-right: 20px;
-  }
-}
-
-.product {
-  display: flex;
-  align-items: center;
-  width: 70%;
-
-  @include media.respond-to('large') {
-    width: 100%;
+  @include media.respond-to('middle') {
+    grid-template-columns: 40% 1fr;
+    grid-template-areas:
+      'productEntity productEntity'
+      'count sumWrapper';
+    gap: 5px;
   }
 }
 
 .input {
-  display: flex;
+  width: 100%;
+  max-width: 40px;
   font-size: 18px;
-  line-height: 28px;
   font-weight: 500;
   letter-spacing: 0.1px;
-  background: inherit;
-  height: 100%;
-  min-width: 20px;
-  max-width: 40px;
   text-align: center;
-  appearance: none;
-  outline: none;
-  margin-left: 1px;
-  margin-right: 1px;
 }
 
 .counter {
+  grid-area: count;
+  display: flex;
+  justify-self: center;
+  height: 50px;
   border: 1px solid var.$light-grey;
   border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: inherit;
   padding: 4px;
-  height: 48px;
-
-  @include media.respond-to('large') {
-    width: 100%;
-  }
 }
 
 .button {
-  border: none;
-  background: none;
-  padding: 0;
-  font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет
+  width: 22px;
   height: 100%;
-  transition: background 0.25s;
+  padding: 0;
+  transition: 0.25s;
 }
 
 .button_decrease:hover {
-  background-color: var.$light-grey;
+  background: var.$light-grey;
   border-radius: 4px 0 0 4px;
 }
 
 .button_increase:hover {
-  background-color: var.$light-grey;
+  background: var.$light-grey;
   border-radius: 0 4px 4px 0;
 }
 
-.sum_wrapper {
+.sumWrapper {
+  grid-area: sumWrapper;
   display: flex;
   flex-direction: column;
-  padding-left: 3%;
-  margin-right: 5%;
-
-  @include media.respond-to('large') {
-    width: 25%;
-  }
 }
 
 .sum {
   font-size: 18px;
-  white-space: nowrap;
 }
 
 .price {
-  font-size: 13.5px;
-  color: var.$body-color-light-grey;
-  line-height: 1.2;
-  font-weight: 400;
+  font-size: 13px;
   white-space: nowrap;
 }
 
-.button_dots {
+.buttonDots {
   position: absolute;
   z-index: 90;
   top: 0;
@@ -125,11 +93,11 @@
   box-shadow: 0 0 20px rgba(170 189 206 /25%);
   border-radius: 5px;
   padding: 15px;
-  min-width: 228px;
+  width: 228px;
   transition:
     opacity 0.25s,
     visibility 0.25s;
-  z-index: 100;
+  z-index: z-index.$three;
 
   @include media.respond-to('large') {
     top: 60px;
@@ -137,21 +105,6 @@
   }
 }
 
-.menu {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  white-space: nowrap;
-}
-
-.line {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  height: 1px;
-  width: 100%;
-  color: var.$body-color-light-grey;
-}
-
 .item {
   &:first-child {
     border-bottom: 1px solid var.$body-color-light-grey;
@@ -162,9 +115,7 @@
 
 .menu_button {
   font-size: 15px;
-  line-height: 1.2;
-  font-weight: 400;
-  margin:0;
+  line-height: 1;
   padding: 0;
 
   &:hover {
@@ -172,6 +123,10 @@
   }
 }
 
-.arrowIcon {
-  rotate: 180deg;
+.arrowLeft {
+  rotate: 90deg;
+}
+
+.arrowRight {
+  rotate: 270deg;
 }
diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.tsx b/src/features/CartEdit/ui/CartEdit/CartEdit.tsx
index 14dc4f1c..6781ac9b 100644
--- a/src/features/CartEdit/ui/CartEdit/CartEdit.tsx
+++ b/src/features/CartEdit/ui/CartEdit/CartEdit.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import ArrowIcon from '@/assets/images/cart/arrow-right.svg'
+import ArrowIcon from '@/assets/images/sideBarMenu/IconArrowDown.svg'
 import { putDecreaseProductAmount } from '@/entities/CartEntity/model/services/putDecreaseProductAmount'
 import { putIncreaseProductAmount } from '@/entities/CartEntity/model/services/putIncreaseProductAmount'
 import { putRemoveProduct } from '@/entities/CartEntity/model/services/putRemoveProduct'
@@ -28,7 +28,7 @@ export type TCartEditProps = {
  * Компонент используется для отображения добавленных в корзину продуктов, изменения кол-ва продуктов в корзине,
  * для удаления продуктов из корзины, для добавления продуктов в закладки
  * @param {number} cartId - id корзины
- * @param {IProductCartList}   productWithInfo - это корзина с количеством товара, общей стоимостью и весом
+ * @param {IProductCartList} productWithInfo - это корзина с количеством товара, общей стоимостью и весом
  */
 
 export const CartEdit: React.FC<TCartEditProps> = ({ cartId, productWithInfo }: TCartEditProps) => {
@@ -78,64 +78,55 @@ export const CartEdit: React.FC<TCartEditProps> = ({ cartId, productWithInfo }:
   }
 
   return (
-    <>
-      <div className={styles.container}>
-        <div className={styles.product}>
-          <ProductEntity {...productWithInfo.product} />
-          <div className={`${styles.sum_wrapper}`}>
-            <Paragraph className={`${styles.sum}`}>
-              {' '}
-              {(productWithInfo.amount * Number(productWithInfo.product.price)).toFixed(2)}{' '}
-              {productWithInfo.product.brand}
-              {calculateProductPrice(productWithInfo.amount, String(productWithInfo.product.price))}{' '}
-              {productWithInfo.product.brand}
-              {/* currency, not brand, c Number непонятно пока*/}
-            </Paragraph>
-            <Subheading className={`${styles.price}`}>
-              {' '}
-              {productWithInfo.product.price} {productWithInfo.product.brand}/шт
-              {/* currency, not brand */}
-            </Subheading>
-          </div>
-        </div>
-        <div className={`${styles.counter}`}>
-          <Button
-            className={`${styles.button} ${styles.button_decrease}`}
-            id="button-decrease"
-            onClick={decreaseAmountHandler}>
-            <ArrowIcon className={styles.arrowIcon} />
-          </Button>
-          <input
-            value={productWithInfo.amount}
-            min={MIN_AMOUNT}
-            max={MAX_AMOUNT}
-            type="text"
-            className={`${styles.input}`}
-            onChange={setAmountHandler}></input>
-          <Button
-            className={`${styles.button} ${styles.button_increase}`}
-            id="button-increase"
-            onClick={increaseAmountHandler}>
-            <ArrowIcon />
-          </Button>
-        </div>
-        <ButtonDots className={styles.button_dots} isMenuOpen={needToOpenContextMenuButtonDots}>
-          <div className={styles.wrapper}>
-            <ul className={styles.menu}>
-              <li className={styles.item}>
-                <Button type="button" className={styles.menu_button} onClick={addToFavoritesHandler}>
-                  {isLiked ? 'Из закладок' : 'В закладки'}
-                </Button>
-              </li>
-              <li>
-                <Button type="button" className={styles.menu_button} onClick={deleteProductHandler}>
-                  Удалить
-                </Button>
-              </li>
-            </ul>
-          </div>
-        </ButtonDots>
+    <li className={styles.cartEdit}>
+      <ProductEntity {...productWithInfo.product} />
+
+      <div className={styles.counter}>
+        <Button
+          className={`${styles.button} ${styles.button_decrease}`}
+          id="button-decrease"
+          onClick={decreaseAmountHandler}>
+          <ArrowIcon className={styles.arrowLeft} />
+        </Button>
+        <input
+          value={productWithInfo.amount}
+          min={MIN_AMOUNT}
+          max={MAX_AMOUNT}
+          type="text"
+          className={styles.input}
+          onChange={setAmountHandler}></input>
+        <Button
+          className={`${styles.button} ${styles.button_increase}`}
+          id="button-increase"
+          onClick={increaseAmountHandler}>
+          <ArrowIcon className={styles.arrowRight} />
+        </Button>
       </div>
-    </>
+
+      <div className={styles.sumWrapper}>
+        <Paragraph className={styles.sum}>
+          {calculateProductPrice(productWithInfo.amount, String(productWithInfo.product.price))}
+          &nbsp;₽
+        </Paragraph>
+        <Subheading className={styles.price}>{productWithInfo.product.price}&nbsp;₽/шт</Subheading>
+      </div>
+
+      <ButtonDots className={styles.buttonDots} isMenuOpen={needToOpenContextMenuButtonDots}>
+        <div className={styles.wrapper}>
+          <ul>
+            <li className={styles.item}>
+              <Button type="button" className={styles.menu_button} onClick={addToFavoritesHandler}>
+                {isLiked ? 'Из закладок' : 'В закладки'}
+              </Button>
+            </li>
+            <li>
+              <Button type="button" className={styles.menu_button} onClick={deleteProductHandler}>
+                Удалить
+              </Button>
+            </li>
+          </ul>
+        </div>
+      </ButtonDots>
+    </li>
   )
 }
diff --git a/src/pages/CartPage/CartPage.module.scss b/src/pages/CartPage/CartPage.module.scss
index a942fbb7..887146bc 100644
--- a/src/pages/CartPage/CartPage.module.scss
+++ b/src/pages/CartPage/CartPage.module.scss
@@ -1,9 +1,21 @@
-@use '../../shared/styles/utils/variables' as var;
-@use '../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+
+.titleBox {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.heading {
+  padding-top: 20px;
+}
 
 .container {
   display: flex;
   column-gap: 20px;
+  margin-top: -18px;
   margin-bottom: 160px;
   width: 100%;
 
@@ -26,10 +38,6 @@
   row-gap: 10px;
 }
 
-.heading {
-  margin-top: 20px;
-}
-
 .titles {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
index be6ac7f7..b25ce2b9 100644
--- a/src/pages/CartPage/CartPage.tsx
+++ b/src/pages/CartPage/CartPage.tsx
@@ -1,17 +1,22 @@
 import { useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
 
 import { getCartSelector } from '@/entities/CartEntity/model/selectors/selectors'
 import type { ICartEntity } from '@/entities/CartEntity/model/types/types'
 import { CartCouponApply } from '@/features/CartCouponApply/ui/CartCouponApply/CartCouponApply'
 import { CartEdit } from '@/features/CartEdit/ui/CartEdit/CartEdit'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import Subheading from '@/shared/ui/Subheading/Subheading'
 import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 import { MakeOrder } from '@/widgets/MakeOrder/ui/MakeOrder/MakeOrder'
 
 import styles from './CartPage.module.scss'
 
+const links = [
+  { heading: 'Главная', href: Routes.HOME },
+  { heading: 'Корзина покупок', href: '' }
+]
+
 /**
  * Компонент страница корзины. На странице отображаются товары в корзине, можно изменять кол-во товаров в корзине,
  * сразу происходит изменение стоимости. Также можно добавить сертификат или купон на скидку, есть опция оформения быстрого и обычного заказа
@@ -21,27 +26,21 @@ const CartPage = () => {
 
   return (
     <WrapperForMainContent>
-      <div className={styles.titles}>
-        <Heading>
-          Оформление заказа ({cart.cart_full_weight.toFixed(2)} кг)
-          {/* Кг приходит с бека или нет, tbd */}
-        </Heading>
-        <Subheading>
-          <Link to={'/'} className={styles.link}>
-            Главная
-          </Link>{' '}
-          / Корзина покупок
-        </Subheading>
-        <Heading className={styles.heading} type={HeadingType.NORMAL}>
+      <article className={styles.titleBox}>
+        <Heading type={HeadingType.MAIN}>Оформление заказа ({cart.cart_full_weight.toFixed(2)} кг)</Heading>
+        <Breadcrumbs links={links} />
+        <Heading type={HeadingType.NORMAL} className={styles.heading}>
           Ваши покупки
         </Heading>
-      </div>
+      </article>
+
       <div className={styles.container}>
-        <div className={styles.cards}>
-          {cart.products.map(item => {
-            return <CartEdit key={item.product.id} cartId={cart.id} productWithInfo={item} />
-          })}
-        </div>
+        <ul className={styles.cards}>
+          {cart.products.map(item => (
+            <CartEdit key={item.product.id} cartId={cart.id} productWithInfo={item} />
+          ))}
+        </ul>
+
         <div className={styles.wrapper}>
           <MakeOrder
             amount={cart.products.reduce((total, item) => total + item.amount, 0)}