diff --git a/src/components/BannersList/styles.module.css b/src/components/BannersList/styles.module.css
index f389b1f..1314627 100644
--- a/src/components/BannersList/styles.module.css
+++ b/src/components/BannersList/styles.module.css
@@ -4,4 +4,11 @@
   width: 100%;
   gap: 12px;
   box-sizing: border-box;
+}
+
+@media (min-width: 768px) {
+  .banners {
+    max-height: 1200px;
+    overflow-y: auto;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Categories/Categories.jsx b/src/components/Categories/Categories.jsx
index 0d56a6e..37078da 100644
--- a/src/components/Categories/Categories.jsx
+++ b/src/components/Categories/Categories.jsx
@@ -1,8 +1,9 @@
 import styles from './styles.module.css';
+import { forwardRef } from 'react';
 
-const Categories = ({ categories, selectedCategory, setSelectedCategories }) => {
+const Categories = forwardRef(({ categories, selectedCategory, setSelectedCategories }, ref) => {
   return (
-    <div className={styles.categories}>
+    <div ref={ref} className={styles.categories}>
       <button
         className={!selectedCategory ? styles.active : styles.item}
         onClick={() => setSelectedCategories(null)}
@@ -22,6 +23,8 @@ const Categories = ({ categories, selectedCategory, setSelectedCategories }) =>
       }
     </div>
   );
-};
+});
+
+Categories.displayName = 'Categories';
 
 export default Categories;
diff --git a/src/components/NewsFilters/NewsFilters.jsx b/src/components/NewsFilters/NewsFilters.jsx
index b451cf1..bce041a 100644
--- a/src/components/NewsFilters/NewsFilters.jsx
+++ b/src/components/NewsFilters/NewsFilters.jsx
@@ -3,6 +3,7 @@ import Categories from '../Categories/Categories.jsx';
 import Search from '../Search/Search.jsx';
 import { getCategories } from '../../api/news.js';
 import { useFetch } from '../../helpers/hooks/useFetch.js';
+import Slider from '../Slider/Slider.jsx';
 
 const NewsFilters = ({ filters, changeFilters }) => {
   const { data: dataCategories } = useFetch(getCategories);
@@ -10,13 +11,15 @@ const NewsFilters = ({ filters, changeFilters }) => {
   return (
     <div className={styles.filters}>
       {dataCategories
-        ? <Categories
-          categories={dataCategories?.categories}
-          selectedCategory={filters.category}
-          setSelectedCategories={(category) => changeFilters('category', category)}
-        />
-        : null
-      }
+        ? (
+        <Slider>
+          <Categories
+            categories={dataCategories?.categories}
+            selectedCategory={filters.category}
+            setSelectedCategories={(category) => changeFilters('category', category)}
+          />
+        </Slider>
+      ) : null}
 
       <Search
         keywords={filters.keywords}
diff --git a/src/components/Slider/Slider.jsx b/src/components/Slider/Slider.jsx
new file mode 100644
index 0000000..dc048a9
--- /dev/null
+++ b/src/components/Slider/Slider.jsx
@@ -0,0 +1,24 @@
+import { useRef, cloneElement } from "react";
+import styles from "./styles.module.css";
+
+const Slider = ({ children, step = 150 }) => {
+  const sliderRef = useRef(null);
+
+  const scrollLeft = () => {
+    sliderRef.current.scrollLeft -= step;
+  };
+
+  const scrollRight = () => {
+    sliderRef.current.scrollLeft += step;
+  };
+
+  return (
+    <div className={styles.slider}>
+      <button onClick={scrollLeft} className={styles.arrow}>{`<`}</button>
+      {cloneElement(children, { ref: sliderRef })}
+      <button onClick={scrollRight} className={styles.arrow}>{`>`}</button>
+    </div>
+  );
+};
+
+export default Slider;
\ No newline at end of file
diff --git a/src/components/Slider/styles.module.css b/src/components/Slider/styles.module.css
new file mode 100644
index 0000000..84242dc
--- /dev/null
+++ b/src/components/Slider/styles.module.css
@@ -0,0 +1,12 @@
+.slider {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+}
+
+.arrow {
+  border: none;
+  background-color: white;
+  cursor: pointer;
+}
\ No newline at end of file