diff --git a/package-lock.json b/package-lock.json
index 2889f2b..0a74f4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
         "react-select": "^5.7.7",
+        "react-toastify": "^9.1.3",
         "redux-persist": "^6.0.0",
         "web-vitals": "^2.1.4"
       },
@@ -15643,6 +15644,26 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-toastify/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 4f037a7..6ff14b3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.7",
+    "react-toastify": "^9.1.3",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/pages/Catalog/Catalog.jsx b/src/pages/Catalog/Catalog.jsx
index b34a61e..06c7ace 100644
--- a/src/pages/Catalog/Catalog.jsx
+++ b/src/pages/Catalog/Catalog.jsx
@@ -1,19 +1,27 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CarItem from 'components/CarItem/CarItem';
-import { WrapperFilter, WrapperList, LoadMoreButton } from './Catalog.styled'; // Добавьте импорт для кнопки LoadMore
+import { WrapperFilter, WrapperList, LoadMore } from './Catalog.styled'; // Добавьте импорт для кнопки LoadMore
 import Filter from 'components/Filter/Filter';
 
 import { useGetCarsByPageQuery } from '../../redux/operations';
+import { Loader } from 'components/Loader/Loader';
 
 export default function Catalog() {
   const [page, setPage] = useState(1);
+  const [allCars, setAllCars] = useState([]); // Стейт для хранения всех карточек
+
   const { data, error, isLoading, isFetching } = useGetCarsByPageQuery(page);
 
   const loadMore = () => {
     setPage(page + 1);
   };
 
-  const allCars = data ? data.reduce((acc, curr) => acc.concat(curr), []) : [];
+  useEffect(() => {
+    if (data) {
+      // Обновляем стейт allCars, добавляя новые карточки
+      setAllCars(prevCars => [...prevCars, ...data]);
+    }
+  }, [data]);
 
   return (
     <>
@@ -22,9 +30,9 @@ export default function Catalog() {
       </WrapperFilter>
       <WrapperList>
         {error ? (
-          <>Ой, произошла ошибка</>
+          <>Oops, there was an error...</>
         ) : isLoading ? (
-          <>Загрузка...</>
+          <Loader />
         ) : allCars.length > 0 ? (
           <>
             {allCars.map(car => (
@@ -34,9 +42,9 @@ export default function Catalog() {
         ) : null}
       </WrapperList>
       {data && data.length >= 8 && (
-        <LoadMoreButton onClick={loadMore} disabled={isFetching}>
-          Load More
-        </LoadMoreButton>
+        <LoadMore onClick={loadMore} disabled={isFetching}>
+          Load more
+        </LoadMore>
       )}
     </>
   );
diff --git a/src/pages/Catalog/Catalog.styled.jsx b/src/pages/Catalog/Catalog.styled.jsx
index 9c1e6a3..0944081 100644
--- a/src/pages/Catalog/Catalog.styled.jsx
+++ b/src/pages/Catalog/Catalog.styled.jsx
@@ -18,23 +18,22 @@ export const WrapperList = styled.div`
   margin-top: 50px;
 `;
 
-export const LoadMoreButton = styled.button`
-  background-color: #007bff;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  cursor: pointer;
+export const LoadMore = styled.a`
+  color: #3470ff;
+  font-family: 'Manrope';
   font-size: 16px;
-  border-radius: 5px;
-  margin-top: 20px;
-  transition: background-color 0.3s ease;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5;
+  text-decoration-line: underline;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100px;
+  padding-bottom: 100px;
+  cursor: pointer;
 
   &:hover {
-    background-color: #0056b3;
-  }
-
-  &:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
+    color: #0b44cd;
   }
 `;