Improve tab scrolling with arrows

frontend/src/pages/Feature1.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from '../contexts/LanguageContext';
 import { useSidebar } from '../contexts/SidebarContext';
+import TabsScroller from '../components/TabsScroller';
 import '../styles/AdminPanel.css';
 
 export default function Feature1() {
@@ -9,14 +10,14 @@ export default function Feature1() {
     return (
         <main className="main-content">
             <div className="page-tabs-container">
-                <div className="page-tabs-slider">
+                <TabsScroller className="page-tabs-slider">
                     <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
                         <span className="material-symbols-outlined">menu</span>
                     </button>
                     <div className="page-title-section">
                         <span className="page-title-text">{t.feature1.title}</span>
                     </div>
-                </div>
+                </TabsScroller>
             </div>
 
             <div className="page-content">