diff --git a/package-lock.json b/package-lock.json
index 14029b1a..af402f03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "formik": "^2.4.5",
         "leaflet": "^1.9.4",
         "normalize-scss": "7.0.1",
+        "qs": "^6.12.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-input-mask": "^2.0.4",
@@ -9351,6 +9352,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/body-parser/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/bonjour-service": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
@@ -11932,6 +11948,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/express/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -17076,11 +17107,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+      "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -20132,21 +20163,6 @@
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
       "dev": true
     },
-    "node_modules/url/node_modules/qs": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-      "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
-      "dev": true,
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/use-callback-ref": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
@@ -27477,6 +27493,15 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -29429,6 +29454,15 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -33168,11 +33202,11 @@
       }
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+      "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
       "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       }
     },
     "queue-microtask": {
@@ -35419,15 +35453,6 @@
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
           "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
           "dev": true
-        },
-        "qs": {
-          "version": "6.12.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-          "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
-          "dev": true,
-          "requires": {
-            "side-channel": "^1.0.6"
-          }
         }
       }
     },
diff --git a/package.json b/package.json
index 9b34efbf..c20acf9c 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "formik": "^2.4.5",
     "leaflet": "^1.9.4",
     "normalize-scss": "7.0.1",
+    "qs": "^6.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-input-mask": "^2.0.4",
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
index 6ea38170..c32743ec 100644
--- a/src/app/providers/StoreProvider/config/StateSchema.ts
+++ b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -19,6 +19,7 @@ import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import { ICartSchema } from '@/pages/CartPage/model/types'
 import { IProductAmountStateSchema } from '@/features/CartEdit/model/types'
 import { IFeedbackSchema } from '@/features/Reviews/model/types/types'
+import { TNumberOfPageSchema } from '@/components/Pagination/types/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -44,6 +45,7 @@ export interface StateSchema {
   categoryFilters: ICategoryFiltersSchema
   productAmount: IProductAmountStateSchema
   feedbacks: IFeedbackSchema
+  pagination: TNumberOfPageSchema
 }
 
 export interface ThunkExtraArg {
diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
index c7b915e4..537d13c5 100644
--- a/src/app/providers/StoreProvider/config/store.ts
+++ b/src/app/providers/StoreProvider/config/store.ts
@@ -24,6 +24,7 @@ import { cartReducer } from '@/pages/CartPage/model/slice'
 import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { productAmountReducer } from '@/features/CartEdit/model/slice/productAmountSlice'
 import { feedbacksReducer } from '@/features/Reviews/model/slice/feedbacksSlice'
+import { paginationSliceReducer } from '@/components/Pagination/slice/paginationSlice'
 
 export type RootState = StateSchema
 
@@ -50,7 +51,8 @@ const rootReducer: ReducersMapObject<RootState> = {
   cartEntity: cartEntityReducer,
   cart: cartReducer,
   categoryFilters: categoryFiltersSliceReducer,
-  productAmount: productAmountReducer
+  productAmount: productAmountReducer,
+  pagination: paginationSliceReducer
 }
 
 export function createReduxStore(initialState: RootState) {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 1101be7b..b55b2937 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -8,6 +8,7 @@ interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
   items: TSortOptions[]
   defaultItem?: string
   onSelect: React.ChangeEventHandler<HTMLSelectElement>
+  changeValue?: string
 }
 
 /**
@@ -15,8 +16,15 @@ interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
  * @param {array} items - список элементов выпадающего списка для выбора;
  * @param {string} defaultItem - выбранный по умолчанию элемент списка;
  * @param {function} onSelect - функция, применяющая выбранное из списка значение;
+ * @param {string} changeValue - выбранное название фильтра;
  */
-export const Dropdown: React.FC<DropdownProps> = ({ items, defaultItem, onSelect, ...props }) => {
+export const Dropdown: React.FC<DropdownProps> = ({
+  items,
+  defaultItem,
+  onSelect,
+  changeValue,
+  ...props
+}) => {
   const [selectedItem, setSelectedItem] = useState<string>(defaultItem || '')
 
   const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -26,7 +34,11 @@ export const Dropdown: React.FC<DropdownProps> = ({ items, defaultItem, onSelect
   }
 
   return (
-    <select className={styles.select} value={selectedItem} onChange={handleSelect} {...props}>
+    <select
+      className={styles.select}
+      value={changeValue ? changeValue : selectedItem}
+      onChange={handleSelect}
+      {...props}>
       {items.map(item => (
         <option value={item.name} key={item.name}>
           {item.name}
diff --git a/src/components/PageControls/PageControls.tsx b/src/components/PageControls/PageControls.tsx
index df371bd6..54d1d688 100644
--- a/src/components/PageControls/PageControls.tsx
+++ b/src/components/PageControls/PageControls.tsx
@@ -20,6 +20,8 @@ type TPageControls = {
   handleSortChange: ChangeEventHandler<HTMLSelectElement>
   itemPerPageOptions: TSortOptions[]
   sortOptions: TSortOptions[]
+  changeValueToFilterProducts?: string
+  changeValueToQuantityProducts?: string
 }
 
 /**
@@ -30,6 +32,8 @@ type TPageControls = {
  * @param {function} handleSortChange - функция управления порядком сортировки карточек;
  * @param {array} itemPerPageOptions - текущее кол-во отображаемых карточек на странице;
  * @param {array} sortOptions - текущий выбранный порядок сортировки карточек;
+ * @param {string} changeValueToFilterProducts - наименование выбранного фильтра товаров по Названию/Цене/Модели
+ * @param {string} changeValueToQuantityProducts - наименование выбранного фильтра товаров по количеству в листинге
  */
 export const PageControls: FC<TPageControls> = ({
   cardView,
@@ -37,13 +41,19 @@ export const PageControls: FC<TPageControls> = ({
   handleItemsPerPageChange,
   handleSortChange,
   itemPerPageOptions,
-  sortOptions
+  sortOptions,
+  changeValueToFilterProducts,
+  changeValueToQuantityProducts
 }) => {
   return (
     <div className={styles['page-controls']}>
       <div className={styles.dropdowns}>
-        <Dropdown items={sortOptions} onSelect={handleSortChange} />
-        <Dropdown items={itemPerPageOptions} onSelect={handleItemsPerPageChange} />
+        <Dropdown items={sortOptions} onSelect={handleSortChange} changeValue={changeValueToFilterProducts} />
+        <Dropdown
+          items={itemPerPageOptions}
+          onSelect={handleItemsPerPageChange}
+          changeValue={changeValueToQuantityProducts}
+        />
       </div>
       <ul className={styles['cards-controls']}>
         <li
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 41366253..2d9d8d3f 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { type FC } from 'react'
 
 import styles from './Pagination.module.scss'
 
diff --git a/src/components/Pagination/selectors/selectors.tsx b/src/components/Pagination/selectors/selectors.tsx
new file mode 100644
index 00000000..d6979b47
--- /dev/null
+++ b/src/components/Pagination/selectors/selectors.tsx
@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider/config/store'
+
+export const selectNumberOfPage = (state: RootState) => state.pagination.numberOfPage
diff --git a/src/components/Pagination/slice/paginationSlice.tsx b/src/components/Pagination/slice/paginationSlice.tsx
new file mode 100644
index 00000000..7461998e
--- /dev/null
+++ b/src/components/Pagination/slice/paginationSlice.tsx
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import type { TNumberOfPageSchema } from '@/components/Pagination/types/types'
+
+const initialState: TNumberOfPageSchema = {
+  numberOfPage: 1
+}
+
+const paginationSlice = createSlice({
+  name: 'pagination',
+  initialState,
+  reducers: {
+    setNumberOfPage(state, action) {
+      state.numberOfPage = action.payload
+    }
+  }
+})
+
+export const { reducer: paginationSliceReducer } = paginationSlice
+
+export const { setNumberOfPage } = paginationSlice.actions
diff --git a/src/components/Pagination/types/types.ts b/src/components/Pagination/types/types.ts
new file mode 100644
index 00000000..3f132478
--- /dev/null
+++ b/src/components/Pagination/types/types.ts
@@ -0,0 +1,3 @@
+export type TNumberOfPageSchema = {
+  numberOfPage: number
+}
diff --git a/src/features/CategoryItem/CategoryItem.tsx b/src/features/CategoryItem/CategoryItem.tsx
index b853861c..b7bcfe64 100644
--- a/src/features/CategoryItem/CategoryItem.tsx
+++ b/src/features/CategoryItem/CategoryItem.tsx
@@ -26,7 +26,7 @@ export const CategoryItem: FC<Props> = ({ name, slug, count, id }) => {
   return (
     <li className={styles['category-list__item']}>
       <Link
-        to={`${Routes.CATEGORIES}/${slug}?id=${id}`}
+        to={`${Routes.CATEGORIES}/${slug}`}
         className={styles['category-list__link']}
         onClick={() => {
           dispatch(setCategoryId(id))
diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx
index a6778b27..b134f9aa 100644
--- a/src/pages/ProductsPage/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ProductsPage.tsx
@@ -1,6 +1,8 @@
-import { useEffect, useState } from 'react'
+import qs from 'qs'
+import { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
+import { useNavigate } from 'react-router-dom'
 
 import { selectFilterProducts, selectFilterQuantity } from '@/components/Dropdown/selectors/selectors'
 import { setFilterProducts, setProductQuantityFilter } from '@/components/Dropdown/slice/filtersSlice'
@@ -9,13 +11,17 @@ import { PageControlsSkeletons } from '@/components/PageControls/PageControlsSke
 import { PageDescription } from '@/components/PageDescription/PageDescription'
 import { PageDescriptionSkeleton } from '@/components/PageDescription/PageDescriptionSkeleton/PageDescriptionSkeleton'
 import { Pagination } from '@/components/Pagination/Pagination'
+import { selectNumberOfPage } from '@/components/Pagination/selectors/selectors'
+import { setNumberOfPage } from '@/components/Pagination/slice/paginationSlice'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import { selectCategorySlug } from '@/entities/Category/selectors/categorySelectors'
-import { TOTAL_PAGES } from '@/mockData/productsPageOptions'
+import { selectCategoryId, selectCategorySlug } from '@/entities/Category/selectors/categorySelectors'
+import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
 import { getLoading, getProductsOfCategorySelector } from '@/pages/ProductsPage/selectors/selectors'
 import { getProducts } from '@/pages/ProductsPage/services/getProducts'
 import { ITEMS_PER_PAGE_OPTION, NUMBER_OF_PRODUCTS, SORT_OPTION } from '@/shared/constants/constants'
+import { totalPagesHandler } from '@/shared/libs/helpers/totalPagesHandler'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { useReplaceValueFromLocation } from '@/shared/libs/hooks/useReplaceValueFromLocation'
 import { ECardView } from '@/shared/model/types/common'
 import { CategoryList } from '@/widgets/CategoryList/CategoryList'
 import { ProductSkeleton } from '@/widgets/ProductItem/ProductSkeleton/ProductSkeleton'
@@ -34,23 +40,39 @@ export const ProductsPage = () => {
   const [cardView, setCardView] = useState<ECardView>(ECardView.GRID)
   const [currentPage, setCurrentPage] = useState(1)
 
+  const location = useLocation()
+  const navigate = useNavigate()
   const dispatch = useAppDispatch()
 
+  const isMount = useRef(false)
+  const isRender = useRef(false)
+
+  const numberOfPage = useSelector(selectNumberOfPage)
+  const idOfCategory = useSelector(selectCategoryId)
   const categoriesProducts = useSelector(getProductsOfCategorySelector)
   const categorySlug = useSelector(selectCategorySlug)
 
-  const location = useLocation()
-
-  const categoryId = Number(location.search.replace('?id=', ''))
+  //For GET products in dispatch
+  const id = Number(useReplaceValueFromLocation('?id=', '', `&page=${numberOfPage}`, ''))
+  const categoryId = idOfCategory ? `?category=${idOfCategory}` : `?category=${id}`
 
+  //For filter products on page (to GET in dispatch)
   const selectProductsFilter = useSelector(selectFilterProducts)
   const filterProducts = selectProductsFilter ? `&ordering=${selectProductsFilter.value}` : ''
-
   const selectQuantityFilter = useSelector(selectFilterQuantity)
   const filterQuantity = selectQuantityFilter ? `&limit=${selectQuantityFilter.value}` : ''
 
+  //Skeletons
   const isLoading = useSelector(getLoading)
 
+  //Pagination
+  const totalPages = totalPagesHandler(categoriesProducts.count, Number(selectQuantityFilter.value))
+  const page = Number(useReplaceValueFromLocation(`?id=${idOfCategory}`, '', '&page=', ''))
+  const productsQuantityPerPage =
+    numberOfPage > 1
+      ? `&offset=${(numberOfPage - 1) * Number(selectQuantityFilter.value)}`
+      : `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
+
   const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
     const selectedOption = event.target.value
     const setCategoryFilters = SORT_OPTION.find(item => item.name === selectedOption)
@@ -64,26 +86,58 @@ export const ProductsPage = () => {
   }
 
   const handleCardViewChange = (view: ECardView) => {
-    // Handle card view change logic here
     setCardView(view)
   }
 
   const handlePageChange = (pageNumber: number) => {
-    // Handle page change logic here
     setCurrentPage(pageNumber)
+    dispatch(setNumberOfPage(pageNumber))
   }
 
-  // Calculate total number of pages based on total number of items and items per page
-  // const totalPages = Math.ceil(totalItems / itemsPerPage)
-
   const handleShowMore = () => {
-    // ...
-    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1)
+    if (currentPage < totalPages) setCurrentPage(currentPage + 1)
+    dispatch(setNumberOfPage(currentPage + 1))
   }
 
   useEffect(() => {
-    dispatch(getProducts({ categoryId, filterProducts, filterQuantity }))
-  }, [categoryId, categorySlug, filterProducts, filterQuantity])
+    dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
+  }, [numberOfPage, categorySlug, filterProducts, filterQuantity])
+
+  useEffect(() => {
+    if (window.location.search) {
+      const params = qs.parse(window.location.search.substring(1))
+      dispatch(setCategoryId(params.id))
+      dispatch(setNumberOfPage(params.page === undefined ? 1 : Number(params.page)))
+      setCurrentPage(params.page === undefined ? 1 : Number(params.page))
+    }
+    isMount.current = true
+  }, [])
+
+  useEffect(() => {
+    let page
+    if (numberOfPage > 1) {
+      page = numberOfPage
+    } else {
+      page = undefined
+    }
+    const id = idOfCategory
+    if (isRender.current) {
+      const queryString = qs.stringify({
+        id,
+        page
+      })
+      navigate(`${location.pathname}?${queryString}`)
+    }
+    isRender.current = true
+  }, [numberOfPage, categorySlug])
+
+  useEffect(() => {
+    if (!isMount.current) {
+      dispatch(setNumberOfPage(1))
+      setCurrentPage(1)
+    }
+    isMount.current = false
+  }, [categorySlug, filterProducts, filterQuantity])
 
   return (
     <>
@@ -115,6 +169,8 @@ export const ProductsPage = () => {
                     handleSortChange={handleSortChange}
                     itemPerPageOptions={ITEMS_PER_PAGE_OPTION}
                     sortOptions={SORT_OPTION}
+                    changeValueToFilterProducts={selectProductsFilter.name}
+                    changeValueToQuantityProducts={selectQuantityFilter.name}
                   />
                   <ProductsList items={categoriesProducts} cardView={cardView} />
                 </>
@@ -124,7 +180,7 @@ export const ProductsPage = () => {
             </section>
             <Pagination
               currentPage={currentPage}
-              totalPages={TOTAL_PAGES}
+              totalPages={totalPages}
               handlePageChange={handlePageChange}
               handleShowMore={handleShowMore}
             />
diff --git a/src/pages/ProductsPage/services/getProducts.ts b/src/pages/ProductsPage/services/getProducts.ts
index ec9ec5d7..f575bfe2 100644
--- a/src/pages/ProductsPage/services/getProducts.ts
+++ b/src/pages/ProductsPage/services/getProducts.ts
@@ -7,21 +7,14 @@ import { ACTION_GET_PRODUCTS_OF_CATEGORY } from '@/shared/constants/constants'
 
 import { ProductsInfo } from '../types/types'
 
-type Params = {
-  categoryId: number
-  filterProducts: string
-  filterQuantity: string
-}
-export const getProducts = createAsyncThunk<ProductsInfo, Params, ThunkConfig<ApiError>>(
+export const getProducts = createAsyncThunk<ProductsInfo, Record<string, string>, ThunkConfig<ApiError>>(
   ACTION_GET_PRODUCTS_OF_CATEGORY,
   async (params, thunkAPI) => {
-    const { categoryId, filterProducts, filterQuantity } = params
+    const { categoryId, filterProducts, filterQuantity, productsQuantityPerPage } = params
     const { rejectWithValue, extra } = thunkAPI
     try {
       const { data } = await extra.api.get(
-        `api/${ApiRoutes.PRODUCT}${
-          categoryId > 0 ? `?category=${categoryId}` : ''
-        }${filterProducts}${filterQuantity}`
+        `api/${ApiRoutes.PRODUCT}${categoryId}${filterProducts}${filterQuantity}${productsQuantityPerPage}`
       )
       return data
     } catch (error) {
diff --git a/src/shared/libs/helpers/totalPagesHandler.ts b/src/shared/libs/helpers/totalPagesHandler.ts
new file mode 100644
index 00000000..eb52e315
--- /dev/null
+++ b/src/shared/libs/helpers/totalPagesHandler.ts
@@ -0,0 +1,8 @@
+/**
+ * Функция вычисления количества страниц, исходя из общего количества юнитов и количества, которое нужно вывести на одной странице
+ * @param {number} totalAmount - общее количество юнитов;
+ * @param {number} quantitPerPage - количество, которое нужно вывести на одной странице;
+ */
+export const totalPagesHandler = (totalAmount: number, quantitPerPage: number) => {
+  return Math.ceil(totalAmount / quantitPerPage)
+}
diff --git a/src/shared/libs/hooks/useReplaceValueFromLocation.ts b/src/shared/libs/hooks/useReplaceValueFromLocation.ts
new file mode 100644
index 00000000..48e19ae6
--- /dev/null
+++ b/src/shared/libs/hooks/useReplaceValueFromLocation.ts
@@ -0,0 +1,11 @@
+import { useLocation } from 'react-router'
+
+/**
+ * Функция извлечения нужных параметров из URL с помощью useLocation
+ * @param {string} varN - значение, которое нужно заменить;
+ * @param {string} changeN - на чт нужно заменить;
+ */
+export const useReplaceValueFromLocation = (var1: string, change1: string, var2: string, change2: string) => {
+  const location = useLocation()
+  return location.search.replace(var1, change1)?.replace(var2, change2)
+}
diff --git a/src/shared/ui/CategoryCard/ui/CategoryCard.tsx b/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
index 0c23c183..7e177b5d 100644
--- a/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
+++ b/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
@@ -1,5 +1,9 @@
 import { type FC } from 'react'
+import { useDispatch } from 'react-redux'
 
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
+import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
+import { setCategorySlug } from '@/entities/Category/slice/categorySlugSlice'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { TCategory } from '@/shared/model/types/CategoryModel'
 import Link from '@/shared/ui/Link/Link'
@@ -20,10 +24,15 @@ interface CategoryCardProps {
  * @param {number} index - индекс элемента массива категорий для выбора цвета;
  */
 const CategoryCard: FC<CategoryCardProps> = ({ card, index }) => {
+  const dispatch = useDispatch<AppDispatch>()
   return (
     <li>
       <Link
-        to={`${Routes.PRODUCTS}${card.slug}`}
+        to={`${Routes.CATEGORIES}/${card.slug}`}
+        onClick={() => {
+          dispatch(setCategoryId(card.id))
+          dispatch(setCategorySlug(card.slug))
+        }}
         className={styles.div}
         style={{ backgroundColor: COLORS[index], backgroundImage: `url(${card.image})` }}>
         <Subheading className={styles.subheading}>{card.name}</Subheading>
diff --git a/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx b/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
index cf4cae0d..5f3dc71f 100644
--- a/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
+++ b/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
@@ -32,7 +32,7 @@ const CatalogNodeItem: FC<Props> = ({ slug, name, id }: Category) => {
         dispatch(setCategoryId(id))
         dispatch(setCategorySlug(slug))
       }}>
-      <Link to={`${Routes.CATEGORIES}/${slug}?id=${id}`} className={styles.link}>
+      <Link to={`${Routes.CATEGORIES}/${slug}`} className={styles.link}>
         {name}
       </Link>
     </li>
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
index 288efd36..a73c9941 100644
--- a/src/widgets/Header/Header.tsx
+++ b/src/widgets/Header/Header.tsx
@@ -260,7 +260,7 @@ const Header: FC = () => {
                   <CatalogLink
                     key={category.id}
                     categorySlug={category.slug}
-                    to={`${Routes.CATEGORIES}/${category.slug}?id=${category.id}`}
+                    to={`${Routes.CATEGORIES}/${category.slug}`}
                     categoryId={category.id}>
                     {category.name}
                   </CatalogLink>