diff --git a/config/storybook/decorators/StoreDecorator.js b/config/storybook/decorators/StoreDecorator.js
index 3094a499..cb6e3cb8 100644
--- a/config/storybook/decorators/StoreDecorator.js
+++ b/config/storybook/decorators/StoreDecorator.js
@@ -1,4 +1,4 @@
-import {StoreProvider} from "../../../src/app/providers/SroreProvider/index.ts";
+import {StoreProvider} from "../../../src/app/providers/StoreProvider/index.ts";
 
 export const StoreDecorator = (initialState) => (Story) =>
 (  <StoreProvider initialState={initialState}>
diff --git a/src/app/providers/SroreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
similarity index 69%
rename from src/app/providers/SroreProvider/config/StateSchema.ts
rename to src/app/providers/StoreProvider/config/StateSchema.ts
index 7f7cb585..68f23cdb 100644
--- a/src/app/providers/SroreProvider/config/StateSchema.ts
+++ b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -1,12 +1,16 @@
 import { CategorySchema } from '@/entities/Category/types/types'
+import { SearchResultSchema } from '@/features/SearchProduct/types/types'
 import { LoginSchema } from '@/features/login/model/types/types'
 import { BrandSchema } from '@/widgets/BrandBlock/types/types'
 import { ApiInstance } from '@/shared/api/api'
+import { StoreReviewsSchema } from '@/widgets/ReviewsBlock/model/types/types'
 
 export interface StateSchema {
   login: LoginSchema
+  storeReviews: StoreReviewsSchema
   category: CategorySchema
   brand: BrandSchema
+  searchResult: SearchResultSchema
 }
 
 export interface ThunkExtraArg {
diff --git a/src/app/providers/SroreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
similarity index 69%
rename from src/app/providers/SroreProvider/config/store.ts
rename to src/app/providers/StoreProvider/config/store.ts
index c0273043..8219c22a 100644
--- a/src/app/providers/SroreProvider/config/store.ts
+++ b/src/app/providers/StoreProvider/config/store.ts
@@ -4,16 +4,20 @@ import { StateSchema, ThunkExtraArg } from './StateSchema'
 import { $api } from '@/shared/api/api'
 import categorySlice from '@/entities/Category/slice/categorySlice'
 import brandSlice from '@/widgets/BrandBlock/slice/brandSlice'
+import searchProductSlice from '@/features/SearchProduct/slice/searchProductSlice'
+import { storeReviewsReducer } from '@/widgets/ReviewsBlock/model/slice/reviewsSlice'
 
 export type RootState = StateSchema
 
-const rootReducer: ReducersMapObject<StateSchema> = {
+const rootReducer: ReducersMapObject<RootState> = {
   login: loginReducer,
   category: categorySlice,
-  brand: brandSlice
+  brand: brandSlice,
+  searchResult: searchProductSlice,
+  storeReviews: storeReviewsReducer
 }
 
-export function createReduxStore(initialState: StateSchema) {
+export function createReduxStore(initialState: RootState) {
   const extraArg: ThunkExtraArg = {
     api: $api
   }
diff --git a/src/app/providers/SroreProvider/index.ts b/src/app/providers/StoreProvider/index.ts
similarity index 100%
rename from src/app/providers/SroreProvider/index.ts
rename to src/app/providers/StoreProvider/index.ts
diff --git a/src/app/providers/SroreProvider/ui/StoreProvider.tsx b/src/app/providers/StoreProvider/ui/StoreProvider.tsx
similarity index 100%
rename from src/app/providers/SroreProvider/ui/StoreProvider.tsx
rename to src/app/providers/StoreProvider/ui/StoreProvider.tsx
diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index 416bf6a7..28420af7 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -9,6 +9,7 @@ import LoginPage from '@/pages/LoginPage/LoginPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
+import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
 
 export const AppRouter = createBrowserRouter([
   {
@@ -48,6 +49,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.CART,
         element: <CartPage />
+      },
+      {
+        path: Routes.SEARCH,
+        element: <SearchResultsPage />
       }
     ]
   }
diff --git a/src/components/CardPreview/CardPreview.tsx b/src/components/CardPreview/CardPreview.tsx
index 90c5f8b8..0a43987c 100644
--- a/src/components/CardPreview/CardPreview.tsx
+++ b/src/components/CardPreview/CardPreview.tsx
@@ -17,6 +17,7 @@ export const CardPreview: FC = () => {
   const [isLiked, setIsLiked] = useState<boolean>(false)
   const [isInCompared, setIsInCompared] = useState<boolean>(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
 
   const handleAddToCart = () => {
     setIsInCart(!isInCart)
@@ -45,9 +46,13 @@ export const CardPreview: FC = () => {
   return (
     <>
       {isModalOpen && (
-        <Modal isModalOpen={isModalOpen} onClose={changeModalState}>
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
-            <LazyQuickPurchaseForm />
+            <LazyQuickPurchaseForm setIsModalClosing={setIsModalClosing} />
           </Suspense>
         </Modal>
       )}
diff --git a/src/components/HeaderAccount/HeaderAccount.tsx b/src/components/HeaderAccount/HeaderAccount.tsx
index 2036faa0..d450c9f7 100644
--- a/src/components/HeaderAccount/HeaderAccount.tsx
+++ b/src/components/HeaderAccount/HeaderAccount.tsx
@@ -28,6 +28,7 @@ const LazyLoginForm = lazy(() => import('@/features/login/index'))
  */
 const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
 
   const dispatch = useAppDispatch()
   const isAuth = useSelector(getUserAuthStatus)
@@ -54,7 +55,11 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   return (
     <>
       {isModalOpen && (
-        <Modal isModalOpen={isModalOpen} onClose={changeModalState}>
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
             <LazyLoginForm />
           </Suspense>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 5518edd5..6fcef70a 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -17,7 +17,7 @@ import { linkItems } from '@/mockData/catalogListData'
 import styles from './header.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
 import { fetchCategories } from '@/entities/Category/slice/categorySlice'
-import { AppDispatch } from '@/app/providers/SroreProvider/config/store'
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 import { selectCategories, selectDisplayedCategories } from '@/entities/Category/selectors/categorySelectors'
 import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem'
 import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
diff --git a/src/entities/BlogCard/BlogCard.module.scss b/src/entities/BlogCard/BlogCard.module.scss
new file mode 100644
index 00000000..5ee6b802
--- /dev/null
+++ b/src/entities/BlogCard/BlogCard.module.scss
@@ -0,0 +1,36 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  min-width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }
+
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+ 
+}
\ No newline at end of file
diff --git a/src/entities/BlogCard/BlogCard.stories.tsx b/src/entities/BlogCard/BlogCard.stories.tsx
new file mode 100644
index 00000000..52f4421e
--- /dev/null
+++ b/src/entities/BlogCard/BlogCard.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BlogCard from './BlogCard'
+import Img1 from '@/assets/images/blog/img-blog-01.png'
+
+const meta = {
+  title: 'entities/BlogCard',
+  component: BlogCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof BlogCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      src: Img1,
+      alt: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      date: '8 Мая, 2022'
+    }
+  }
+}
diff --git a/src/entities/BlogCard/BlogCard.tsx b/src/entities/BlogCard/BlogCard.tsx
new file mode 100644
index 00000000..f4f64202
--- /dev/null
+++ b/src/entities/BlogCard/BlogCard.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { TCard } from '@/models/CardModel'
+import styles from './BlogCard.module.scss'
+import Link from '@/shared/ui/Link/Link'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока блог
+ * @param {TCard} card - параметры карточки из блога
+ */
+
+const BlogCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+      <Heading type={HeadingType.NORMAL} className={styles.heading}>
+        {card.title}
+      </Heading>
+      <span>{card.date}</span>
+    </Link>
+  )
+}
+
+export default BlogCard
diff --git a/src/entities/BrandCard/BrandCard.module.scss b/src/entities/BrandCard/BrandCard.module.scss
index 677de855..d7137d83 100644
--- a/src/entities/BrandCard/BrandCard.module.scss
+++ b/src/entities/BrandCard/BrandCard.module.scss
@@ -49,9 +49,5 @@
 
 .img {
   display: block;
-
-  @include media.respond-to('small') {
-    width: 120px;
-    height: 120px;
-  }
+  max-width: 100%;
 }
diff --git a/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx b/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx
index c45fa99b..1289f31a 100644
--- a/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx
+++ b/src/entities/CardReview/ui/CardReview/CardReview.stories.tsx
@@ -15,12 +15,10 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    review: {
-      id: 1,
-      name: 'Рейтинг нашего магазина',
-      score: '4.3',
-      text: 'Мы очень ним гордимся, это результат упорного труда в течении длительного времени и сейчас наша команда ежедневно работает над улучшением сервиса.',
-      date: ''
-    }
+    pk: 1,
+    name: 'Рейтинг нашего магазина',
+    score: 4.3,
+    text: 'Мы очень ним гордимся, это результат упорного труда в течении длительного времени и сейчас наша команда ежедневно работает над улучшением сервиса.',
+    date: '2024-01-22T09:42:35.242681+03:00'
   }
 }
diff --git a/src/entities/CardReview/ui/CardReview/CardReview.tsx b/src/entities/CardReview/ui/CardReview/CardReview.tsx
index b77adfb1..1181d05a 100644
--- a/src/entities/CardReview/ui/CardReview/CardReview.tsx
+++ b/src/entities/CardReview/ui/CardReview/CardReview.tsx
@@ -1,32 +1,52 @@
 import { FC, useMemo } from 'react'
-import { TReview } from '@/models/ReviewModel'
 import IconStar from '@/assets/icons/IconStar'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
 import styles from './cardReview.module.scss'
+import Subheading from '@/shared/ui/Subheading/Subheading'
 
 export type Props = {
-  review: TReview
+  pk: number
+  text: string
+  date: string
+  score: number
+  name: string
 }
 
-const CardReview: FC<Props> = props => {
-  const { review } = props
+/**
+ * Отзыв
+ * @param {number} pk - id отзыва
+ * @param {string} text - текст отзыва
+ * @param {string} date - дата отзыва
+ * @param {number} score - очко рейтинга отзыва
+ * @param {string} name - имя оставившего отзыв
+ */
+
+const CardReview: FC<Props> = ({ pk, text, date, score, name }) => {
   const initials = useMemo(() => {
-    return review.name.slice(0, 1)
+    return name.slice(0, 1)
   }, [0, 1])
   const linkTextStyle = styles.link__text
 
+  const newDate = useMemo(() => {
+    const _parsedDate = new Date(date)
+    const year = _parsedDate.getFullYear()
+    const formatter = new Intl.DateTimeFormat('ru', { month: 'long', day: 'numeric' }).format(_parsedDate)
+
+    return `${formatter}, ${year}`
+  }, [date])
+
   return (
     <article className={styles.review}>
-      {review.id === 0 ? (
+      {pk === 0 ? (
         <>
           <Heading type={HeadingType.SMALL} className={styles.title}>
-            {review.name} - {review.score}
+            {name} - {score}
             <IconStar></IconStar>
           </Heading>
 
-          <p>{review.text}</p>
+          <p>{text}</p>
           <p className={styles.subtitle}>
             Вы можете{' '}
             <Link to="#" className={styles.link__text}>
@@ -44,16 +64,16 @@ const CardReview: FC<Props> = props => {
           <div className={styles.review__header}>
             <div className={styles.review__initials}>{initials}</div>
             <div>
-              <Heading type={HeadingType.SMALL}>{review.name}</Heading>
+              <Heading type={HeadingType.SMALL}>{name}</Heading>
               <span>
-                Оценил(а) магазин на {review.score}
-                <IconStar></IconStar>
+                Оценил(а) магазин на {score}
+                <IconStar />
               </span>
             </div>
           </div>
           <div className={styles.review__data}>
-            <Paragraph>{review.text}</Paragraph>
-            <span>{review.date}</span>
+            <Paragraph>{text}</Paragraph>
+            <Subheading>{newDate}</Subheading>
           </div>
           <Link to="#" className={linkTextStyle}>
             Читать полный отзыв
diff --git a/src/entities/Category/selectors/categorySelectors.ts b/src/entities/Category/selectors/categorySelectors.ts
index 5f33d316..05535e0b 100644
--- a/src/entities/Category/selectors/categorySelectors.ts
+++ b/src/entities/Category/selectors/categorySelectors.ts
@@ -1,4 +1,4 @@
-import { RootState } from '@/app/providers/SroreProvider/config/store'
+import { RootState } from '@/app/providers/StoreProvider/config/store'
 
 export const selectCategories = (state: RootState) => state.category.categories
 export const selectDisplayedCategories = (state: RootState) => state.category.displayedCategories
diff --git a/src/entities/Category/slice/categorySlice.ts b/src/entities/Category/slice/categorySlice.ts
index d25d5dc3..cc77499a 100644
--- a/src/entities/Category/slice/categorySlice.ts
+++ b/src/entities/Category/slice/categorySlice.ts
@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
-import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
 import { Category, CategorySchema } from '../types/types'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
 import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
diff --git a/src/entities/NewsCard/NewsCard.module.scss b/src/entities/NewsCard/NewsCard.module.scss
new file mode 100644
index 00000000..84722723
--- /dev/null
+++ b/src/entities/NewsCard/NewsCard.module.scss
@@ -0,0 +1,49 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  min-width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }
+
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+  .promo {
+    display: inline-block;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: var.$promo-color;
+    border-radius: 5px;
+    padding: 5px 10px;
+    color: var.$white;
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+  }
+}
\ No newline at end of file
diff --git a/src/entities/NewsCard/NewsCard.stories.tsx b/src/entities/NewsCard/NewsCard.stories.tsx
new file mode 100644
index 00000000..5b63741a
--- /dev/null
+++ b/src/entities/NewsCard/NewsCard.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import NewsCard from './NewsCard'
+import Img1 from '@/assets/images/news/img-news-01.png'
+
+const meta = {
+  title: 'entities/NewsCard',
+  component: NewsCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof NewsCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      src: Img1,
+      alt: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      date: '15 Мая, 2022',
+      promo: true
+    }
+  }
+}
diff --git a/src/entities/NewsCard/NewsCard.tsx b/src/entities/NewsCard/NewsCard.tsx
new file mode 100644
index 00000000..006c6674
--- /dev/null
+++ b/src/entities/NewsCard/NewsCard.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { TCard } from '@/models/CardModel'
+import { TEXT_PROMO } from '@/shared/constants/constants'
+import styles from './NewsCard.module.scss'
+import Link from '@/shared/ui/Link/Link'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока группы новостей
+ * @param {TCard} card - параметры карточки из группы новостей
+ */
+
+const NewsCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+      <Heading type={HeadingType.NORMAL} className={styles.heading}>
+        {card.title}
+      </Heading>
+      <span>{card.date}</span>
+      {card.promo ? <span className={styles.promo}>{TEXT_PROMO}</span> : null}
+    </Link>
+  )
+}
+
+export default NewsCard
diff --git a/src/entities/Payments/Payments.stories.ts b/src/entities/Payments/Payments.stories.ts
index ba7cf140..eec9be77 100644
--- a/src/entities/Payments/Payments.stories.ts
+++ b/src/entities/Payments/Payments.stories.ts
@@ -17,7 +17,7 @@ const data = {
       }
     ],
     support: {
-      name: 'Обрантый звонок',
+      name: 'Обратный звонок',
       phone_number: '+7 977 848-02-28'
     }
   }
diff --git a/src/features/CallBack/index.ts b/src/features/CallBack/index.ts
new file mode 100644
index 00000000..9ffed0b8
--- /dev/null
+++ b/src/features/CallBack/index.ts
@@ -0,0 +1,2 @@
+import { CallBack } from './ui/CallBack/CallBack'
+export default CallBack
diff --git a/src/features/CallBack/models/types/types.ts b/src/features/CallBack/models/types/types.ts
new file mode 100644
index 00000000..f16629ed
--- /dev/null
+++ b/src/features/CallBack/models/types/types.ts
@@ -0,0 +1,5 @@
+export interface CallBackData {
+  name: string
+  phoneNumber: string
+  comment?: string
+}
diff --git a/src/features/CallBack/models/validation/validation.ts b/src/features/CallBack/models/validation/validation.ts
new file mode 100644
index 00000000..e0f63acc
--- /dev/null
+++ b/src/features/CallBack/models/validation/validation.ts
@@ -0,0 +1,12 @@
+import * as Yup from 'yup'
+
+export const validationSchema = Yup.object().shape({
+  name: Yup.string()
+    .required('Введите имя')
+    .min(1, 'Минимальная длина имена 1 символ')
+    .max(32, 'Максимальная длина имени 32 символа'),
+  phoneNumber: Yup.string()
+    .required('Введите номер телефона')
+    .matches(/^\+7 \([0-9]{3}\) [0-9]{3}-[0-9]{2}-[0-9]{2}$/, 'Укажите корректный номер телефона'),
+  comment: Yup.string().max(255, 'Максимальная длина комментария 255 символов')
+})
diff --git a/src/features/CallBack/ui/CallBack/CallBack.module.scss b/src/features/CallBack/ui/CallBack/CallBack.module.scss
new file mode 100644
index 00000000..0af86877
--- /dev/null
+++ b/src/features/CallBack/ui/CallBack/CallBack.module.scss
@@ -0,0 +1,69 @@
+@use '../../../../shared/styles/utils/variables' as var;
+
+.form {
+  position: relative;
+  margin: 0 auto;
+  padding: 30px;
+  width: 450px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var.$white;
+  border-radius: 5px;
+}
+
+.heading {
+  margin-bottom: 20px;
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.cross-button {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+
+  path {
+    width: 100%;
+    height: 100%;
+    fill: var.$black;
+    transition: fill 300ms;
+  }
+
+  &:hover {
+    path {
+      fill: var.$theme-primary-color;
+    }
+  }
+}
+
+.input,
+.textarea {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 10px 16px;
+  border-radius: 5px;
+  background-color: var.$body-bg;
+  font-size: 16px;
+}
+
+.input:focus,
+.textarea:focus {
+  outline: 2px solid var.$theme-primary-color;
+}
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.button {
+  width: 100%;
+  height: 56px;
+}
diff --git a/src/features/CallBack/ui/CallBack/CallBack.tsx b/src/features/CallBack/ui/CallBack/CallBack.tsx
new file mode 100644
index 00000000..053d0a5b
--- /dev/null
+++ b/src/features/CallBack/ui/CallBack/CallBack.tsx
@@ -0,0 +1,112 @@
+import React, { useCallback } from 'react'
+import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
+import IconClose from '@/assets/icons/IconClose.svg'
+import { Input } from '@/shared/ui/Input/Input'
+import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
+import { Textarea } from '@/shared/ui/Textarea/Textarea'
+import Heading from '@/shared/ui/Heading/Heading'
+import Paragraph, { ParagraphTheme } from '@/shared/ui/Paragraph/Paragraph'
+import Label from '@/shared/ui/Label/Label'
+import Span from '@/shared/ui/Span/Span'
+import { validationSchema } from '@/features/CallBack/models/validation/validation'
+import { CallBackData } from '@/features/CallBack/models/types/types'
+import styles from './CallBack.module.scss'
+
+interface CallBackProps {
+  setIsModalClosing: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+/**
+ * Форма обратного звонка
+ * Используется как children в компоненте модального окна.
+ * После заполнения формы отправляет данные в CRM.
+ * Для создания формы используется Formik, для валидации - Yup.
+ * setIsModalClosing - функция установки булевого значения, для обозначения состояние процесса закрытия модального окна
+ */
+export const CallBack: React.FC<CallBackProps> = ({ setIsModalClosing }) => {
+  const initialValues: CallBackData = {
+    name: '',
+    phoneNumber: '',
+    comment: ''
+  }
+
+  const handleClose = useCallback(() => {
+    setIsModalClosing(true)
+  }, [])
+
+  const handleSubmit = async (values: CallBackData, helpers: FormikHelpers<CallBackData>) => {
+    setTimeout(() => {
+      helpers.resetForm()
+    }, 1000)
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validationSchema}
+      validateOnBlur={true}>
+      {({ isValid, dirty, isSubmitting }) => (
+        <Form className={styles.form}>
+          <Button className={styles['cross-button']} onClick={handleClose}>
+            <IconClose viewBox="0 0 34 34" />
+          </Button>
+          <Heading className={styles.heading}>Заказать обратный звонок</Heading>
+          <Label htmlFor="name">
+            <Span>*</Span> Ваше имя:
+            <Field id="name" className={styles.input} as={Input} label="Ваше имя" name="name" />
+            <ErrorMessage name="name">
+              {msg => (
+                <Paragraph className={styles.error} theme={ParagraphTheme.ERROR}>
+                  {msg}
+                </Paragraph>
+              )}
+            </ErrorMessage>
+          </Label>
+
+          <Label htmlFor="phoneNumber">
+            <Span>*</Span> Ваш телефон:
+            <Field
+              id="phoneNumber"
+              className={styles.input}
+              as={Input}
+              label="Телефон"
+              name="phoneNumber"
+              type="tel"
+              inputMode="tel"
+              mask="+7 (999) 999-99-99"
+            />
+            <ErrorMessage name="phoneNumber">
+              {msg => (
+                <Paragraph className={styles.error} theme={ParagraphTheme.ERROR}>
+                  {msg}
+                </Paragraph>
+              )}
+            </ErrorMessage>
+          </Label>
+
+          <Label htmlFor="comment">
+            Комментарий:
+            <Field
+              id="comment"
+              className={styles.textarea}
+              as={Textarea}
+              label="Комментарий"
+              name="comment"
+              rows={5}
+            />
+          </Label>
+
+          <Button
+            size={ButtonSize.S}
+            theme={ButtonTheme.PRIMARY}
+            className={styles.button}
+            type="submit"
+            disabled={!isValid || !dirty || isSubmitting}>
+            Отправить
+          </Button>
+        </Form>
+      )}
+    </Formik>
+  )
+}
diff --git a/src/features/Contacts/contacts.module.scss b/src/features/Contacts/contacts.module.scss
index 1c32fb54..e8ada6e4 100644
--- a/src/features/Contacts/contacts.module.scss
+++ b/src/features/Contacts/contacts.module.scss
@@ -4,7 +4,7 @@
   position: fixed;
   right: 20px;
   bottom: 20px;
-  z-index: 999;
+  z-index: 2;
 }
 
 .contactsMenu {
diff --git a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss
index c28eb409..2181e2c0 100644
--- a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss
+++ b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss
@@ -1,42 +1,69 @@
 @use '../../../../shared/styles/utils/variables' as var;
 
 .form {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 16px;
   margin: 0 auto;
   background-color: var.$white;
-  padding: 32px 24px;
+  padding: 30px;
   width: 420px;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 
-.label {
-  position: relative;
+.heading {
+  margin-bottom: 20px;
+  font-weight: 500;
+  font-size: 20px;
 }
 
-.span {
-  color: var.$promo-color;
-  font-weight: 100;
+.cross-button {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+
+  path {
+    width: 100%;
+    height: 100%;
+    fill: var.$black;
+    transition: fill 300ms;
+  }
+
+  &:hover {
+    path {
+      fill: var.$theme-primary-color;
+    }
+  }
 }
 
 .input,
 .textarea {
-  margin: 12px 0 24px;
+  margin: 10px 0 20px;
   padding: 12px;
   border-radius: 10px;
   background-color: var.$body-bg;
-  border: 1px solid var.$border-color;
+  font-size: 16px;
 }
 
 .input:focus,
 .textarea:focus {
-  border: 1px solid var.$theme-primary-color;
+  outline: 2px solid var.$theme-primary-color;
 }
 
 .error {
   position: absolute;
-  top: 80px;
+  top: 65px;
   left: 0;
 }
+
+.button {
+  width: 100%;
+  height: 56px
+}
diff --git a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.tsx b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.tsx
index f94a9800..dace388c 100644
--- a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.tsx
+++ b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.tsx
@@ -1,26 +1,38 @@
+import React, { useCallback } from 'react'
 import { Formik, Field, Form, ErrorMessage, FormikHelpers } from 'formik'
+import IconClose from '@/assets/icons/IconClose.svg'
 import { Input } from '@/shared/ui/Input/Input'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 import { Textarea } from '@/shared/ui/Textarea/Textarea'
 import Heading from '@/shared/ui/Heading/Heading'
 import Paragraph, { ParagraphTheme } from '@/shared/ui/Paragraph/Paragraph'
-import { validationSchema } from '../../model/validation/validation'
-import { IFormValues } from '../../model/types/types'
+import Label from '@/shared/ui/Label/Label'
+import Span from '@/shared/ui/Span/Span'
+import { validationSchema } from '@/features/QuickPurchase/model/validation/validation'
+import { IFormValues } from '@/features/QuickPurchase/model/types/types'
 import styles from './QuickPurchaseForm.module.scss'
 
+interface QuickPurchaseProps {
+  setIsModalClosing: React.Dispatch<React.SetStateAction<boolean>>
+}
+
 /**
  * Форма быстрого оформления заказа.
  * Используется как children в компоненте модального окна.
  * После заполнения формы отправляет данные в CRM.
  * Для создания формы используется Formik, для валидации - Yup.
  */
-export const QuickPurchaseForm: React.FC = () => {
+export const QuickPurchaseForm: React.FC<QuickPurchaseProps> = ({ setIsModalClosing }) => {
   const initialValues: IFormValues = {
     name: '',
     phoneNumber: '',
     comment: ''
   }
 
+  const handleClose = useCallback(() => {
+    setIsModalClosing(true)
+  }, [])
+
   const handleSubmit = (values: IFormValues, helpers: FormikHelpers<IFormValues>) => {
     setTimeout(() => {
       helpers.resetForm()
@@ -35,10 +47,13 @@ export const QuickPurchaseForm: React.FC = () => {
       validateOnBlur={true}>
       {({ isValid, dirty, isSubmitting }) => (
         <Form className={styles.form}>
-          <Heading>Быстрый заказ</Heading>
-          <label htmlFor="name" className={styles.label}>
-            <span className={styles.span}>*</span> Имя
-            <Field className={styles.input} as={Input} label="Имя" name="name" placeholder="Имя" />
+          <Button className={styles['cross-button']} onClick={handleClose}>
+            <IconClose viewBox="0 0 34 34" />
+          </Button>
+          <Heading className={styles.heading}>Быстрый заказ</Heading>
+          <Label htmlFor="name">
+            <Span>*</Span> Имя
+            <Field id="name" className={styles.input} as={Input} label="Имя" name="name" placeholder="Имя" />
             <ErrorMessage name="name">
               {msg => (
                 <Paragraph className={styles.error} theme={ParagraphTheme.ERROR}>
@@ -46,11 +61,12 @@ export const QuickPurchaseForm: React.FC = () => {
                 </Paragraph>
               )}
             </ErrorMessage>
-          </label>
+          </Label>
 
-          <label htmlFor="phoneNumber" className={styles.label}>
-            <span className={styles.span}>*</span> Телефон
+          <Label htmlFor="phoneNumber">
+            <Span>*</Span> Телефон
             <Field
+              id="phoneNumber"
               className={styles.input}
               as={Input}
               label="Телефон"
@@ -67,11 +83,12 @@ export const QuickPurchaseForm: React.FC = () => {
                 </Paragraph>
               )}
             </ErrorMessage>
-          </label>
+          </Label>
 
-          <label htmlFor="comment" className={styles.label}>
+          <Label htmlFor="comment">
             Комментарий
             <Field
+              id="comment"
               className={styles.textarea}
               as={Textarea}
               label="Напишите комментарий к заказу"
@@ -79,12 +96,12 @@ export const QuickPurchaseForm: React.FC = () => {
               placeholder="Текст комментария"
               rows={4}
             />
-          </label>
+          </Label>
 
           <Button
             size={ButtonSize.S}
             theme={ButtonTheme.PRIMARY}
-            className="button"
+            className={styles.button}
             type="submit"
             disabled={!isValid || !dirty || isSubmitting}>
             Отправить заказ
diff --git a/src/features/SearchProduct/selectors/searchProductSelectors.ts b/src/features/SearchProduct/selectors/searchProductSelectors.ts
new file mode 100644
index 00000000..1ae2fa5e
--- /dev/null
+++ b/src/features/SearchProduct/selectors/searchProductSelectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider/config/store'
+
+export const selectSearchResult = (state: RootState) => state.searchResult
diff --git a/src/features/SearchProduct/slice/searchProductSlice.ts b/src/features/SearchProduct/slice/searchProductSlice.ts
new file mode 100644
index 00000000..c8de78c1
--- /dev/null
+++ b/src/features/SearchProduct/slice/searchProductSlice.ts
@@ -0,0 +1,55 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { SearchResultSchema } from '../types/types'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+import { Category } from '@/entities/Category/types/types'
+import { TProduct } from '@/shared/model/types/common'
+
+type SearchPayload = {
+  category: Category[]
+  product: { results: TProduct[] }
+}
+
+const initialState: SearchResultSchema = {
+  categories: [],
+  products: [],
+  error: undefined
+}
+
+export const search = createAsyncThunk<SearchPayload, string, ThunkConfig<ApiError>>(
+  'catalogue/search',
+  async (query: string, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+
+    try {
+      const { data } = await extra.api.get(`api/${ApiRoutes.SEARCH}/?search=${query}`)
+      return data
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.AUTH_ERROR)) as ApiError
+    }
+  }
+)
+
+const searchProductSlice = createSlice({
+  name: 'searchResult',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(search.pending, state => {
+        state.error = undefined
+      })
+      .addCase(search.fulfilled, (state, action) => {
+        const { category, product } = action.payload
+        state.categories = category || []
+        state.products = product.results || []
+      })
+      .addCase(search.rejected, (state, { payload }) => {
+        state.error = rejectedPayloadHandle(payload)
+      })
+  }
+})
+
+export default searchProductSlice.reducer
diff --git a/src/features/SearchProduct/types/types.ts b/src/features/SearchProduct/types/types.ts
new file mode 100644
index 00000000..6007aa82
--- /dev/null
+++ b/src/features/SearchProduct/types/types.ts
@@ -0,0 +1,8 @@
+import { Category } from '@/entities/Category/types/types'
+import { TProduct } from '@/shared/model/types/common'
+
+export interface SearchResultSchema {
+  categories: Category[]
+  products: TProduct[]
+  error?: string | string[]
+}
diff --git a/src/features/SearchProduct/ui/SearchProduct.tsx b/src/features/SearchProduct/ui/SearchProduct.tsx
index 2760a33c..bad5ff08 100644
--- a/src/features/SearchProduct/ui/SearchProduct.tsx
+++ b/src/features/SearchProduct/ui/SearchProduct.tsx
@@ -5,6 +5,8 @@ import SearchResult from '@/widgets/SearchResult/SearchResult'
 import { Input, InputSize, InputTheme } from '@/shared/ui/Input/Input'
 import { Button, ButtonDesign, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 import styles from './SearchProduct.module.scss'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { useNavigate } from 'react-router-dom'
 
 // @TODO: Перевести форму на Formik + Yup
 // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/92
@@ -17,6 +19,7 @@ const SearchProduct = () => {
   const [resultData, setResultData] = useState<TResultData>({ data: [], success: false })
   const [query, setQuery] = useState('')
   const searchResultRef = useRef(null)
+  const navigate = useNavigate()
 
   // @TODO: Добавить интеграцию с бэком - подсказки в поиске при вводе текста
   // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/172
@@ -26,6 +29,15 @@ const SearchProduct = () => {
     setQuery(value)
   }
 
+  const formSubmitHandler = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (query.length > 0) {
+      const route = Routes.SEARCH.replace(':query', query)
+      navigate(route)
+      setVisibility(false)
+    }
+  }
+
   const closeContextMenuHandler = (e: Event) => {
     const searchResultNode = searchResultRef.current
 
@@ -54,7 +66,7 @@ const SearchProduct = () => {
   }, [])
 
   return (
-    <form className={styles.form}>
+    <form className={styles.form} onSubmit={formSubmitHandler}>
       <Input
         name="search"
         placeholder="Поиск по товарам и категориям"
@@ -62,9 +74,8 @@ const SearchProduct = () => {
         theme={InputTheme.ACCENT}
         onChange={inputEventHandler}
       />
-      {/* @TODO: Добавить onClick-интеграцию с бэком для отправки поискового запроса
-      https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/173 */}
       <Button
+        type="submit"
         theme={ButtonTheme.PRIMARY}
         design={ButtonDesign.SQUARE}
         size={ButtonSize.XS}
diff --git a/src/features/login/model/selectors/getUserAuthStatus.ts b/src/features/login/model/selectors/getUserAuthStatus.ts
index 5f3de71c..c387789c 100644
--- a/src/features/login/model/selectors/getUserAuthStatus.ts
+++ b/src/features/login/model/selectors/getUserAuthStatus.ts
@@ -1,4 +1,4 @@
-import { StateSchema } from '@/app/providers/SroreProvider'
+import { StateSchema } from '@/app/providers/StoreProvider'
 
 export const getUserAuthStatus = (state: StateSchema) => state.login.isAuth
 export const getLoadingAuthStatus = (state: StateSchema) => state.login.isLoading
diff --git a/src/features/login/model/services/loginByUsername/loginByUsername.ts b/src/features/login/model/services/loginByUsername/loginByUsername.ts
index 65b5e940..53e28d59 100644
--- a/src/features/login/model/services/loginByUsername/loginByUsername.ts
+++ b/src/features/login/model/services/loginByUsername/loginByUsername.ts
@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
 import { LoginAuthData, LoginTokenData } from '../../../model/types/types'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
diff --git a/src/features/login/model/services/logout/logout.ts b/src/features/login/model/services/logout/logout.ts
index 860e6a76..7cc2dd80 100644
--- a/src/features/login/model/services/logout/logout.ts
+++ b/src/features/login/model/services/logout/logout.ts
@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit'
-import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
 import { LOCAL_STORAGE_TOKEN_KEY } from '@/shared/constants/localStorage'
diff --git a/src/index.tsx b/src/index.tsx
index b105c3b7..13b3bd19 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './app/styles/index.scss'
 import App from './app/App'
-import { StoreProvider } from '@/app/providers/SroreProvider'
+import { StoreProvider } from '@/app/providers/StoreProvider'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
diff --git a/src/mockData/coreBaseData.ts b/src/mockData/coreBaseData.ts
index f9382532..dc146c8a 100644
--- a/src/mockData/coreBaseData.ts
+++ b/src/mockData/coreBaseData.ts
@@ -6,7 +6,7 @@ export const coreBaseData = {
       title: 'Интернет-магазин «Maxboom.ru»'
     },
     support: {
-      name: 'Обрантый звонок',
+      name: 'Обратный звонок',
       phone_number: '+7 977 848-02-28'
     }
   },
@@ -47,7 +47,7 @@ export const coreBaseData = {
       }
     ],
     support: {
-      callback: 'Обрантый звонок',
+      callback: 'Обратный звонок',
       phone_number: '+7 977 848-02-28'
     }
   }
diff --git a/src/models/SvgModel.ts b/src/models/SvgModel.ts
index 3e509370..fe3dcdcf 100644
--- a/src/models/SvgModel.ts
+++ b/src/models/SvgModel.ts
@@ -1,3 +1,4 @@
 export type TProps = {
   styles?: Array<string> | string
+  className?: string
 }
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 3a890f3e..2dced637 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -1,24 +1,15 @@
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import ContainerCards from '@/components/ContainerCards/ContainerCards'
 import SliderBlock from '@/components/SliderBlock/SliderBlock'
 import BrandsBlock from '@/widgets/BrandBlock/ui/BrandBlock/BrandBlock'
 import { storiesData } from '@/mockData/storiesData'
-import { blogData } from '@/mockData/blogData'
-import { newsData } from '@/mockData/newsData'
-import { reviewsData } from '@/mockData/reviews.Data'
-import {
-  TEXT_STORIES,
-  TEXT_BLOG,
-  TEXT_NEWS,
-  LINK_SHOW_ALL,
-  LINK_NEWS_ALL,
-  TEXT_CUSTOMERS_ABOUT_US,
-  LINK_REVIEWS_ALL
-} from '@/shared/constants/constants'
+import { TEXT_STORIES, TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants'
 import ArticleBlock from '@/components/ArticleBlock/ArticleBlock'
 import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid'
 import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
+import NewsBlock from '@/widgets/NewsBlock/ui/NewsBlock'
+import ContainerCards from '@/components/ContainerCards/ContainerCards'
+import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'
 
 const MainPage = () => {
   return (
@@ -26,10 +17,10 @@ const MainPage = () => {
       <SliderBlock />
       <WrapperForMainContent>
         <ContainerCards title={TEXT_STORIES} cards={storiesData} />
-        <ContainerCards title={TEXT_BLOG} linkText={LINK_SHOW_ALL} cards={blogData} />
-        <ContainerCards title={TEXT_NEWS} linkText={LINK_NEWS_ALL} cards={newsData} />
+        <BlogBlock />
+        <NewsBlock />
         <CategoryGrid />
-        <ReviewsBlock title={TEXT_CUSTOMERS_ABOUT_US} linkText={LINK_REVIEWS_ALL} reviews={reviewsData} />
+        <ReviewsBlock title={TEXT_CUSTOMERS_ABOUT_US} linkText={LINK_REVIEWS_ALL} />
         <BrandsBlock />
         <Advantages />
         <ArticleBlock />
diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx
index d3794ff9..83cfa7dc 100644
--- a/src/pages/ProductsPage/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ProductsPage.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useParams } from 'react-router'
 import Modal from '@/shared/ui/Modal/Modal'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import { CategoryList } from '@/components/CategoryList/CategoryList'
@@ -23,6 +22,7 @@ export const ProductsPage = () => {
   const [cardView, setCardView] = useState<ECardView>(ECardView.GRID)
   const [currentPage, setCurrentPage] = useState(1)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
 
   const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
     // Handle sort change logic here
@@ -61,7 +61,11 @@ export const ProductsPage = () => {
   return (
     <>
       {isModalOpen && (
-        <Modal isModalOpen={isModalOpen} onClose={changeModalState}>
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
           <CardPreview />
         </Modal>
       )}
diff --git a/src/pages/SearchResultsPage/SearchResultsPage.module.scss b/src/pages/SearchResultsPage/SearchResultsPage.module.scss
new file mode 100644
index 00000000..a97c1975
--- /dev/null
+++ b/src/pages/SearchResultsPage/SearchResultsPage.module.scss
@@ -0,0 +1,3 @@
+.heading {
+  align-self: flex-start;
+}
diff --git a/src/pages/SearchResultsPage/SearchResultsPage.tsx b/src/pages/SearchResultsPage/SearchResultsPage.tsx
new file mode 100644
index 00000000..c848a4e9
--- /dev/null
+++ b/src/pages/SearchResultsPage/SearchResultsPage.tsx
@@ -0,0 +1,48 @@
+import { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { useParams } from 'react-router-dom'
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Heading from '@/shared/ui/Heading/Heading'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+import styles from './SearchResultsPage.module.scss'
+import { search } from '@/features/SearchProduct/slice/searchProductSlice'
+import { selectSearchResult } from '@/features/SearchProduct/selectors/searchProductSelectors'
+import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
+import { RootState } from '@/app/providers/StoreProvider/config/store'
+import { ThunkExtraArg } from '@/app/providers/StoreProvider/config/StateSchema'
+
+/**
+ * Страница с результатами поискового запроса
+ * @TODO Сверстать страницу SearchResults, разбить на компоненты
+ * https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/201
+ */
+const SearchResultsPage = () => {
+  const { query } = useParams()
+  const searchResult = useSelector(selectSearchResult)
+  const dispatch = useDispatch<ThunkDispatch<RootState, ThunkExtraArg, AnyAction>>()
+
+  useEffect(() => {
+    if (query && query.length > 0) {
+      dispatch(search(query))
+    }
+  }, [query, dispatch])
+
+  return (
+    <WrapperForMainContent>
+      <Heading className={styles.heading}>Результаты поиска</Heading>
+      <Subheading>В разработке</Subheading>
+      <ul>
+        {searchResult &&
+          searchResult.categories.map(category => {
+            return <li key={category.slug}>{category.name}</li>
+          })}
+        {searchResult &&
+          searchResult.products.map(product => {
+            return <li key={product.slug}>{product.name}</li>
+          })}
+      </ul>
+    </WrapperForMainContent>
+  )
+}
+
+export default SearchResultsPage
diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts
index b9cf59ce..1881fa20 100644
--- a/src/shared/api/types.ts
+++ b/src/shared/api/types.ts
@@ -1,8 +1,10 @@
 export enum ApiRoutes {
   LOGIN = 'token/login',
   LOGOUT = 'token/logout',
-  CATEGORIES = 'catalogue/category',
-  BRANDS = 'catalogue/brand'
+  BRANDS = 'catalogue/brand',
+  SEARCH = 'search',
+  STORE_REVIEWS = 'store-reviews',
+  CATEGORIES = 'catalogue/category'
 }
 
 export enum ApiErrorTypes {
diff --git a/src/shared/config/routerConfig/routes.ts b/src/shared/config/routerConfig/routes.ts
index 912650f6..ed581a30 100644
--- a/src/shared/config/routerConfig/routes.ts
+++ b/src/shared/config/routerConfig/routes.ts
@@ -13,5 +13,6 @@ export enum Routes {
   COMPARE = '/compare',
   FAVORITES = '/favorites',
   LOGIN = '/login',
-  BRANDS = '/brands'
+  BRANDS = '/brands',
+  SEARCH = '/search/:query'
 }
diff --git a/src/shared/libs/hooks/store.ts b/src/shared/libs/hooks/store.ts
index 192d9d8d..a1d79179 100644
--- a/src/shared/libs/hooks/store.ts
+++ b/src/shared/libs/hooks/store.ts
@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux'
-import type { AppDispatch } from '@/app/providers/SroreProvider/config/store'
+import type { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 
 // export type AppStoreState = ReturnType<typeof store.getState>
 export const useAppDispatch: () => AppDispatch = useDispatch
diff --git a/src/shared/ui/Label/Label.module.scss b/src/shared/ui/Label/Label.module.scss
new file mode 100644
index 00000000..47539aff
--- /dev/null
+++ b/src/shared/ui/Label/Label.module.scss
@@ -0,0 +1,9 @@
+@use '../../styles/utils/variables' as var;
+
+.label {
+  position: relative;
+  color: var.$body-color;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 28px;
+}
diff --git a/src/shared/ui/Label/Label.stories.tsx b/src/shared/ui/Label/Label.stories.tsx
new file mode 100644
index 00000000..6386e4e3
--- /dev/null
+++ b/src/shared/ui/Label/Label.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Label from './Label'
+
+const meta = {
+  title: 'shared/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    htmlFor: 'htmlFor',
+    children:
+      'Используется совместно с полями ввода текста, для их подписи. Для связи поля ввода текста с подписью, id поля ввода текста и htmlFor у лейбла должны быть одинаковые'
+  }
+}
diff --git a/src/shared/ui/Label/Label.tsx b/src/shared/ui/Label/Label.tsx
new file mode 100644
index 00000000..a473641d
--- /dev/null
+++ b/src/shared/ui/Label/Label.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+import styles from './Label.module.scss'
+
+type TLabelProps = React.HTMLAttributes<HTMLElement> & {
+  htmlFor: string
+  className?: string
+}
+
+/**
+ * @param {string} className - для передачи дополнительных параметров стиля
+ */
+const Label: FC<TLabelProps> = ({ htmlFor, children, className, ...props }) => {
+  return (
+    <label htmlFor={htmlFor} className={`${styles.label} ${className}`} {...props}>
+      {children}
+    </label>
+  )
+}
+
+export default Label
diff --git a/src/shared/ui/Modal/Modal.module.scss b/src/shared/ui/Modal/Modal.module.scss
index a89b3a48..994fdc0a 100644
--- a/src/shared/ui/Modal/Modal.module.scss
+++ b/src/shared/ui/Modal/Modal.module.scss
@@ -29,17 +29,6 @@
   &.modal-zoom-out {
     animation: zoom-out 300ms ease-in-out;
   }
-
-  .cross-button {
-    cursor: pointer;
-    position: absolute;
-    top: 50px;
-    right: 56px;
-
-    path {
-      fill: var.$white;
-    }
-  }
 }
 
 @keyframes zoom-in {
diff --git a/src/shared/ui/Modal/Modal.tsx b/src/shared/ui/Modal/Modal.tsx
index 01176d0a..25d57739 100644
--- a/src/shared/ui/Modal/Modal.tsx
+++ b/src/shared/ui/Modal/Modal.tsx
@@ -1,20 +1,18 @@
-import React, { HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
+import React, { HTMLAttributes, useCallback, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { createFocusTrap } from 'focus-trap'
 import { createPortal } from 'react-dom'
-import IconClose from '@/assets/icons/IconClose.svg'
 import styles from './Modal.module.scss'
-import { Button } from '@/shared/ui/Button/Button'
 
 interface IModalProps extends HTMLAttributes<HTMLElement> {
   isModalOpen: boolean
+  isModalClosing: boolean
+  setIsModalClosing: React.Dispatch<React.SetStateAction<boolean>>
   onClose: VoidFunction
   className?: string | undefined
 }
 
 // Поменял импорт на дефолтный, чтобы можно было использовать React.lazy
-// @TODO: Ограничить перемещение табом внутри одного поп-апа
-// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/106
 
 /**
  * Functional component for a modal window.
@@ -23,10 +21,15 @@ interface IModalProps extends HTMLAttributes<HTMLElement> {
  * @param {function} onClose - handler function to close the modal.
  * @param {string} className - styles passed from the parent component.
  */
-export default function Modal({ isModalOpen, onClose, className, children }: IModalProps) {
+export default function Modal({
+  isModalOpen,
+  isModalClosing,
+  setIsModalClosing,
+  onClose,
+  className,
+  children
+}: IModalProps) {
   const modalRef = useRef<HTMLDivElement>(null)
-  const [isModalClosing, setIsModalClosing] = useState(false)
-  const closeDelayTimeout = useRef<number | null>(null)
 
   const handleClose = useCallback(() => {
     setIsModalClosing(true)
@@ -45,8 +48,6 @@ export default function Modal({ isModalOpen, onClose, className, children }: IMo
     className
   )
 
-  // @TODO: Не работает клик по wrapper для закрытия модалки
-  // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/118
   const handleContentClick = useCallback((event: React.MouseEvent) => {
     event.stopPropagation()
   }, [])
@@ -65,32 +66,61 @@ export default function Modal({ isModalOpen, onClose, className, children }: IMo
     [handleClose, isModalOpen]
   )
 
+  const handleClickWrapper = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target && isModalOpen) {
+        const neighboringModals = document.querySelectorAll(`.${styles['modal-container']}`)
+        const lastNeighboringModal = neighboringModals[neighboringModals.length - 1]
+        const isLastModal = lastNeighboringModal && lastNeighboringModal.contains(modalRef.current)
+        if (isLastModal) {
+          handleClose()
+        }
+      }
+    },
+    [handleClose, isModalOpen]
+  )
+
   // Для добавления слушателей событий при открытии модального окна и их удаления при его закрытии
   // Позволяет избежать возможных проблем с утечками памяти или продолжительной работы слушателей, когда они больше не нужны
   // useEffect обеспечивает активацию и деактивацию (через return) обработчиков событий
   useEffect(() => {
+    document.addEventListener('mousedown', handleClickWrapper)
     document.addEventListener('keydown', handleKeyDown)
 
     return () => {
+      document.removeEventListener('mousedown', handleClickWrapper)
       document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [handleKeyDown])
+  }, [handleKeyDown, handleClickWrapper])
 
   // Таймер затираем на стадии размонтирования, т.к. реакт много раз рендерится и глобальная область заполняется
   useEffect(() => {
+    let closeTimeout: NodeJS.Timeout
     if (isModalClosing) {
-      closeDelayTimeout.current = window.setTimeout(() => {
+      closeTimeout = setTimeout(() => {
         closeModal()
+        setIsModalClosing(false)
       }, 300)
-    } else if (closeDelayTimeout.current) {
-      clearTimeout(closeDelayTimeout.current)
-      closeDelayTimeout.current = null
+    }
+
+    return () => {
+      clearTimeout(closeTimeout)
     }
   }, [isModalClosing, closeModal])
 
   useEffect(() => {
     const trap = createFocusTrap(modalRef.current as HTMLDivElement, {
-      allowOutsideClick: true
+      allowOutsideClick: true,
+      checkCanFocusTrap: async (): Promise<void> => {
+        await new Promise<void>(resolve => {
+          // Таймер для включения ловушки фокуса. Без него выпадает ошибка для вложенных модальных окон
+          // о том что необходим хотя бы один node для фокусировки. Также решалось добавлением пустой кнопки,
+          // но на неё можно было табом перейти
+          setTimeout(() => {
+            resolve()
+          }, 400)
+        })
+      }
     })
 
     if (isModalOpen) {
@@ -105,9 +135,6 @@ export default function Modal({ isModalOpen, onClose, className, children }: IMo
   return createPortal(
     <div className={styles['modal-wrapper']} onClick={handleClose}>
       <div ref={modalRef} className={modalContainerClass} onClick={handleContentClick}>
-        <Button className={styles['cross-button']}>
-          <IconClose onClick={handleClose} />
-        </Button>
         {children}
       </div>
     </div>,
diff --git a/src/shared/ui/Scroll/Scroll.module.scss b/src/shared/ui/Scroll/Scroll.module.scss
new file mode 100644
index 00000000..9847bb0d
--- /dev/null
+++ b/src/shared/ui/Scroll/Scroll.module.scss
@@ -0,0 +1,33 @@
+@use '@/app/styles/index' as var;
+
+.extra {    
+    background-color: orange;
+    min-width: 200px;
+}
+
+.additional {
+    width: 1000px;
+    height: 100px;
+}
+
+.scroll {
+    display: flex;    
+    gap: 20px;
+    padding: 0 10px 20px;
+    overflow: auto hidden;
+    cursor: grab;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var.$theme-primary-color;
+      cursor: grab;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
\ No newline at end of file
diff --git a/src/shared/ui/Scroll/Scroll.stories.tsx b/src/shared/ui/Scroll/Scroll.stories.tsx
new file mode 100644
index 00000000..0c28653e
--- /dev/null
+++ b/src/shared/ui/Scroll/Scroll.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FC } from 'react'
+import Scroll from './Scroll'
+import styles from './Scroll.module.scss'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <Scroll className={styles.additional}>
+      <div className={styles.extra}></div>
+      <div className={styles.extra}></div>
+      <div className={styles.extra}></div>
+      <div className={styles.extra}></div>
+      <div className={styles.extra}></div>
+    </Scroll>
+  )
+}
+
+const meta = {
+  title: 'shared/Scroll',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: <div></div>
+  }
+}
diff --git a/src/shared/ui/Scroll/Scroll.tsx b/src/shared/ui/Scroll/Scroll.tsx
new file mode 100644
index 00000000..eb0114a6
--- /dev/null
+++ b/src/shared/ui/Scroll/Scroll.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react'
+import styles from './Scroll.module.scss'
+
+export type TProps = {
+  className?: string
+  children: React.ReactNode
+}
+
+/**
+ * Scrollbar
+ * @param {string} className - для дополнительных свойств
+ * @param {React.ReactNode} children - элементы внутри компонента
+ */
+const Scroll: FC<TProps> = ({ className, children }) => {
+  return <div className={`${styles.scroll} ${className}`}>{children}</div>
+}
+
+export default Scroll
diff --git a/src/shared/ui/Span/Span.module.scss b/src/shared/ui/Span/Span.module.scss
new file mode 100644
index 00000000..346ac699
--- /dev/null
+++ b/src/shared/ui/Span/Span.module.scss
@@ -0,0 +1,16 @@
+@use '../../styles/utils/variables' as var;
+
+.span {
+  color: var.$promo-color;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 28px;
+
+  // theme
+  &.error {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 100;
+    color: var.$promo-color;
+  }
+}
diff --git a/src/shared/ui/Span/Span.stories.tsx b/src/shared/ui/Span/Span.stories.tsx
new file mode 100644
index 00000000..25a74a06
--- /dev/null
+++ b/src/shared/ui/Span/Span.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Span from './Span'
+
+const meta = {
+  title: 'shared/Span',
+  component: Span,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Span>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: '*'
+  }
+}
diff --git a/src/shared/ui/Span/Span.tsx b/src/shared/ui/Span/Span.tsx
new file mode 100644
index 00000000..ec9fc49c
--- /dev/null
+++ b/src/shared/ui/Span/Span.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react'
+import styles from './Span.module.scss'
+
+type TSpanProps = React.HTMLAttributes<HTMLElement> & {
+  className?: string
+}
+
+/**
+ * @param {string} className - для передачи дополнительных параметров стиля
+ */
+const Span: FC<TSpanProps> = ({ children, className, ...props }) => {
+  return (
+    <span className={`${styles.span} ${className}`} {...props}>
+      {children}
+    </span>
+  )
+}
+
+export default Span
diff --git a/src/widgets/BlogBlock/ui/BlogBlock.module.scss b/src/widgets/BlogBlock/ui/BlogBlock.module.scss
new file mode 100644
index 00000000..3409d113
--- /dev/null
+++ b/src/widgets/BlogBlock/ui/BlogBlock.module.scss
@@ -0,0 +1,65 @@
+@use '@/app/styles/index' as var;
+
+.storybook {
+  width: 1080px;
+}
+
+.wrapper {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  h2 {
+    font-size: #{'min(max(18px, 1.6vw), 20px)'};
+    line-height: 115%;
+    font-weight: 500;
+  }
+
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 10px;
+  }
+
+  .link {
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .svg {
+    width: 1.25rem;
+    height: 0.5625rem;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
+
+  ul {
+    display: flex;
+    gap: 20px;
+    padding: 0 10px 20px;
+    overflow: auto hidden;
+    cursor: grab;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var.$theme-primary-color;
+      cursor: grab;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx b/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx
new file mode 100644
index 00000000..1c9ee805
--- /dev/null
+++ b/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import styles from './BlogBlock.module.scss'
+import { FC } from 'react'
+import BlogBlock from './BlogBlock'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <BlogBlock />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/BlogBlock',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/widgets/BlogBlock/ui/BlogBlock.tsx b/src/widgets/BlogBlock/ui/BlogBlock.tsx
new file mode 100644
index 00000000..a7188d5e
--- /dev/null
+++ b/src/widgets/BlogBlock/ui/BlogBlock.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import IconLink from '@/assets/icons/IconLink'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
+import styles from './BlogBlock.module.scss'
+import Scroll from '@/shared/ui/Scroll/Scroll'
+import { blogData } from '@/mockData/blogData'
+import BlogCard from '@/entities/BlogCard/BlogCard'
+
+/**
+ * Блок группы карточек блога
+ */
+
+const BlogBlock: FC = () => {
+  return (
+    <section className={styles.wrapper}>
+      <article>
+        <Heading type={HeadingType.NORMAL}>Блог</Heading>
+        <Link to={'#'} className={styles.link}>
+          Показать все
+          <IconLink styles={styles.svg}></IconLink>
+        </Link>
+      </article>
+      <Scroll>
+        {blogData.map(item => (
+          <BlogCard key={item.id} card={item} />
+        ))}
+      </Scroll>
+    </section>
+  )
+}
+
+export default BlogBlock
diff --git a/src/widgets/BrandBlock/selectors/selectors.ts b/src/widgets/BrandBlock/selectors/selectors.ts
index 84442082..4529e743 100644
--- a/src/widgets/BrandBlock/selectors/selectors.ts
+++ b/src/widgets/BrandBlock/selectors/selectors.ts
@@ -1,3 +1,3 @@
-import { StateSchema } from '@/app/providers/SroreProvider'
+import { StateSchema } from '@/app/providers/StoreProvider'
 
 export const brandSelector = (state: StateSchema) => state.brand.brands
diff --git a/src/widgets/BrandBlock/slice/brandSlice.ts b/src/widgets/BrandBlock/slice/brandSlice.ts
index c5b876b0..df80ce9c 100644
--- a/src/widgets/BrandBlock/slice/brandSlice.ts
+++ b/src/widgets/BrandBlock/slice/brandSlice.ts
@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
-import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
 import { Brand, BrandSchema } from '../types/types'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
 import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
diff --git a/src/widgets/BrandBlock/ui/BrandBlock/BrandBlock.tsx b/src/widgets/BrandBlock/ui/BrandBlock/BrandBlock.tsx
index 65aba522..7e5aa95f 100644
--- a/src/widgets/BrandBlock/ui/BrandBlock/BrandBlock.tsx
+++ b/src/widgets/BrandBlock/ui/BrandBlock/BrandBlock.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { brandSelector } from '../../selectors/selectors'
 import { fetchBrands } from '../../slice/brandSlice'
-import { AppDispatch } from '@/app/providers/SroreProvider/config/store'
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 import IconLink from '@/assets/icons/IconLink'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx
index 57575fe8..c1be99dc 100644
--- a/src/widgets/Footer/Footer.tsx
+++ b/src/widgets/Footer/Footer.tsx
@@ -1,62 +1,88 @@
+import { useState } from 'react'
 import { coreBaseData } from '@/mockData/coreBaseData'
 import Logo from '@/shared/ui/logo/Logo'
 import Link from '@/shared/ui/Link/Link'
+import { Button } from '@/shared/ui/Button/Button'
+import Modal from '@/shared/ui/Modal/Modal'
+import Payments from '@/entities/Payments/Payments'
 import SubscribeForm from '@/features/SubscribeForm/SubscribeForm'
+import CallBack from '@/features/CallBack'
 import styles from './footer.module.scss'
-import Payments from '@/entities/Payments/Payments'
-import { Button } from '@/shared/ui/Button/Button'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
 function Footer() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
   const onSubmitHandler = () => {}
   return (
-    <footer className={styles.footer}>
-      <div className={styles.footer__container}>
-        <div className={styles.footer__middle}>
-          <div className={styles['footer__col-one']}>
-            <Logo
-              image={coreBaseData.footer.main_logo.image}
-              title={coreBaseData.footer.main_logo.title}
-              url={coreBaseData.footer.main_logo.url}
-              width="114px"
-              height="38px"
-            />
-            <p className={styles.footer__caption}>{coreBaseData.footer.company_info}</p>
-          </div>
-          <div className={styles['footer__col-two']}>
-            <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>
-          </div>
-          <div className={styles['footer__col-three']}>
-            <p className={styles['footer__support-text']}>Поддержка</p>
-            <div className={styles.footer__wrapper}>
-              <ul className={styles.footer__nav}>
-                <li className={styles.footer__phone}>
-                  <Link
-                    to={`tel:${coreBaseData.footer.support.phone_number}`}
-                    className={styles.footer__link}>
-                    {coreBaseData.footer.support.phone_number}
-                  </Link>
-                </li>
-                <li className={styles.footer__item}>
-                  <Button className={styles.footer__callback}> {coreBaseData.footer.support.callback}</Button>
-                </li>
-              </ul>
-              <p className={styles.footer__hours}>{coreBaseData.footer.support_work_time}</p>
+    <>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <CallBack setIsModalClosing={setIsModalClosing} />
+        </Modal>
+      )}
+      <footer className={styles.footer}>
+        <div className={styles.footer__container}>
+          <div className={styles.footer__middle}>
+            <div className={styles['footer__col-one']}>
+              <Logo
+                image={coreBaseData.footer.main_logo.image}
+                title={coreBaseData.footer.main_logo.title}
+                url={coreBaseData.footer.main_logo.url}
+                width="114px"
+                height="38px"
+              />
+              <Paragraph className={styles.footer__caption}>{coreBaseData.footer.company_info}</Paragraph>
+            </div>
+            <div className={styles['footer__col-two']}>
+              <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>
+            </div>
+            <div className={styles['footer__col-three']}>
+              <Paragraph className={styles['footer__support-text']}>Поддержка</Paragraph>
+              <div className={styles.footer__wrapper}>
+                <ul className={styles.footer__nav}>
+                  <li className={styles.footer__phone}>
+                    <Link
+                      to={`tel:${coreBaseData.footer.support.phone_number}`}
+                      className={styles.footer__link}>
+                      {coreBaseData.footer.support.phone_number}
+                    </Link>
+                  </li>
+                  <li className={styles.footer__item}>
+                    <Button className={styles.footer__callback} onClick={changeModalState}>
+                      {' '}
+                      {coreBaseData.footer.support.callback}
+                    </Button>
+                  </li>
+                </ul>
+                <Paragraph className={styles.footer__hours}>
+                  {coreBaseData.footer.support_work_time}
+                </Paragraph>
+              </div>
             </div>
           </div>
-        </div>
-        <div className={styles.footer__bottom}>
-          <div className={styles['footer__bottom-wrapper']}>
-            <p className={styles.footer__copyright}>
-              Created by{' '}
-              <Link to={'/'} className={styles['footer__copyright-link']}>
-                maxboom.ru
-              </Link>
-            </p>
-            <Payments data={coreBaseData} />
+          <div className={styles.footer__bottom}>
+            <div className={styles['footer__bottom-wrapper']}>
+              <Paragraph className={styles.footer__copyright}>
+                Created by{' '}
+                <Link to={'/'} className={styles['footer__copyright-link']}>
+                  maxboom.ru
+                </Link>
+              </Paragraph>
+              <Payments data={coreBaseData} />
+            </div>
           </div>
         </div>
-      </div>
-    </footer>
+      </footer>
+    </>
   )
 }
 
diff --git a/src/widgets/NewsBlock/ui/NewsBlock.module.scss b/src/widgets/NewsBlock/ui/NewsBlock.module.scss
new file mode 100644
index 00000000..3409d113
--- /dev/null
+++ b/src/widgets/NewsBlock/ui/NewsBlock.module.scss
@@ -0,0 +1,65 @@
+@use '@/app/styles/index' as var;
+
+.storybook {
+  width: 1080px;
+}
+
+.wrapper {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  h2 {
+    font-size: #{'min(max(18px, 1.6vw), 20px)'};
+    line-height: 115%;
+    font-weight: 500;
+  }
+
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 10px;
+  }
+
+  .link {
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .svg {
+    width: 1.25rem;
+    height: 0.5625rem;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
+
+  ul {
+    display: flex;
+    gap: 20px;
+    padding: 0 10px 20px;
+    overflow: auto hidden;
+    cursor: grab;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var.$theme-primary-color;
+      cursor: grab;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/widgets/NewsBlock/ui/NewsBlock.stories.tsx b/src/widgets/NewsBlock/ui/NewsBlock.stories.tsx
new file mode 100644
index 00000000..3b80068a
--- /dev/null
+++ b/src/widgets/NewsBlock/ui/NewsBlock.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import styles from './NewsBlock.module.scss'
+import { FC } from 'react'
+import NewsBlock from './NewsBlock'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <NewsBlock />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/NewsBlock',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/widgets/NewsBlock/ui/NewsBlock.tsx b/src/widgets/NewsBlock/ui/NewsBlock.tsx
new file mode 100644
index 00000000..521490da
--- /dev/null
+++ b/src/widgets/NewsBlock/ui/NewsBlock.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react'
+import IconLink from '@/assets/icons/IconLink'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
+import styles from './NewsBlock.module.scss'
+import NewsCard from '@/entities/NewsCard/NewsCard'
+import { newsData } from '@/mockData/newsData'
+import Scroll from '@/shared/ui/Scroll/Scroll'
+
+/**
+ * Блок группы новостей
+ */
+const NewsBlock: FC = () => {
+  return (
+    <section className={styles.wrapper}>
+      <article>
+        <Heading type={HeadingType.NORMAL}>Новости</Heading>
+        <Link to={'#'} className={styles.link}>
+          Все новости
+          <IconLink styles={styles.svg}></IconLink>
+        </Link>
+      </article>
+      <Scroll>
+        {newsData.map(item => (
+          <NewsCard key={item.id} card={item} />
+        ))}
+      </Scroll>
+    </section>
+  )
+}
+
+export default NewsBlock
diff --git a/src/widgets/ReviewsBlock/model/selectors/selectors.ts b/src/widgets/ReviewsBlock/model/selectors/selectors.ts
new file mode 100644
index 00000000..a851295d
--- /dev/null
+++ b/src/widgets/ReviewsBlock/model/selectors/selectors.ts
@@ -0,0 +1,5 @@
+import { StateSchema } from '@/app/providers/StoreProvider'
+
+export const getStoreReviewsSelector = (state: StateSchema) => {
+  return state.storeReviews.reviews
+}
diff --git a/src/widgets/ReviewsBlock/model/services/getStoreReviews.ts b/src/widgets/ReviewsBlock/model/services/getStoreReviews.ts
new file mode 100644
index 00000000..798312fc
--- /dev/null
+++ b/src/widgets/ReviewsBlock/model/services/getStoreReviews.ts
@@ -0,0 +1,21 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { StoreReviewData } from '../types/types'
+
+export const getStoreReviews = createAsyncThunk<StoreReviewData[], void, ThunkConfig<ApiError>>(
+  //void1- выходные данные, void2- входные данные , thunkConfig- тип store
+  'store-reviews', // action type, первый аргумент
+  async (_, thunkAPI) => {
+    // второй аргумент- асинхронная функция , кот вызовет dispatch в компоненте
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.get(ApiRoutes.STORE_REVIEWS)
+
+      return data.results
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)
diff --git a/src/widgets/ReviewsBlock/model/slice/reviewsSlice.ts b/src/widgets/ReviewsBlock/model/slice/reviewsSlice.ts
new file mode 100644
index 00000000..1792dc3b
--- /dev/null
+++ b/src/widgets/ReviewsBlock/model/slice/reviewsSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { StoreReviewsSchema } from '../types/types'
+import { getStoreReviews } from '../services/getStoreReviews'
+
+const initialState: StoreReviewsSchema = {
+  isLoading: false,
+  reviews: []
+}
+
+export const reviewsSlice = createSlice({
+  name: 'storeReviews',
+  initialState,
+  reducers: {
+    // для обычных  actions, не thunk
+  },
+  extraReducers: builder => {
+    // для thunk actions
+    builder
+      .addCase(getStoreReviews.pending, state => {
+        state.isLoading = true
+      })
+      .addCase(getStoreReviews.fulfilled, (state, { payload }) => {
+        state.isLoading = false
+        state.reviews = payload
+        //state.reviews = payload.test2 // StoreeviewsData с сервера переклыдвается в StoreReviewsSchema (наше Redux хранилище)
+      })
+      .addCase(getStoreReviews.rejected, state => {
+        state.isLoading = false
+      })
+  }
+})
+
+export const { actions: reviewsActions, reducer: storeReviewsReducer } = reviewsSlice
diff --git a/src/widgets/ReviewsBlock/model/types/types.ts b/src/widgets/ReviewsBlock/model/types/types.ts
new file mode 100644
index 00000000..ad286611
--- /dev/null
+++ b/src/widgets/ReviewsBlock/model/types/types.ts
@@ -0,0 +1,29 @@
+export interface GetStoreReviewsResponse {
+  count: number
+  previous: string
+  next: string
+  results: StoreReviewData[]
+}
+
+export interface StoreReviewData {
+  pk: number
+  text: string
+  pub_date: string
+  author_name: string
+  author_email: string
+  average_score: number
+  delivery_speed_score: number
+  quality_score: number
+  price_score: number
+  replay: StoreReviewReplay
+}
+export interface StoreReviewReplay {
+  text: string
+  pub_date: string
+  name: string
+}
+
+export interface StoreReviewsSchema {
+  isLoading: boolean
+  reviews: StoreReviewData[]
+}
diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx
index 82c25356..da46ff64 100644
--- a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx
+++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import ReviewsBlock from './ReviewsBlock'
-import { reviewsData } from '@/mockData/reviews.Data'
 import { LINK_REVIEWS_ALL, TEXT_CUSTOMERS_ABOUT_US } from '@/shared/constants/constants'
 
 const meta = {
@@ -18,7 +17,6 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     title: TEXT_CUSTOMERS_ABOUT_US,
-    reviews: reviewsData,
     linkText: LINK_REVIEWS_ALL
   }
 }
diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx
index fa75e9ce..629ed3e5 100644
--- a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx
+++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx
@@ -1,17 +1,19 @@
-import { type FC } from 'react'
-import { TReview } from '@/models/ReviewModel'
+import { getStoreReviewsSelector } from '../../model/selectors/selectors'
+import { useSelector } from 'react-redux'
+import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { useEffect, type FC } from 'react'
 import IconHand from '@/assets/images/img-hand.png.png'
 import IconLink from '@/assets/icons/IconLink'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
 import styles from './reviewsBlock.module.scss'
 import CardReview from '@/entities/CardReview/ui/CardReview/CardReview'
+import { getStoreReviews } from '../../model/services/getStoreReviews'
 
 export type Props = {
   title: string
   linkText?: string
   linkPath?: string
-  reviews: TReview[]
 }
 
 /**
@@ -19,12 +21,18 @@ export type Props = {
  * @param {string} title - загаловок контейнера
  * @param {string} linkText - загаловок ссылки
  * @param {string} linkPath - адрес ссылки
- * @param {array} reviews - массив отзывов
  */
 const ReviewsBlock: FC<Props> = props => {
-  const { title, linkText = '', linkPath = '', reviews } = props
+  const { title, linkText = '', linkPath = '' } = props
   const linkTextStyle = styles.link
 
+  const dispatch = useAppDispatch()
+  const reviews = useSelector(getStoreReviewsSelector)
+
+  useEffect(() => {
+    dispatch(getStoreReviews())
+  }, [])
+
   return (
     <section className={styles.wrapper}>
       <article className={styles.header}>
@@ -40,7 +48,14 @@ const ReviewsBlock: FC<Props> = props => {
       </article>
       <ul>
         {reviews.map(item => (
-          <CardReview key={item.id} review={item} />
+          <CardReview
+            key={item.pk}
+            pk={item.pk}
+            text={item.text}
+            date={item.pub_date}
+            score={item.average_score}
+            name={item.author_name}
+          />
         ))}
       </ul>
     </section>