diff --git a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
index 8f85e500..0c6e658d 100644
--- a/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
+++ b/apps/xi.land/components/main/Capabilities/CapabilitiesBlock.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronSmallRight } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { motion, useReducedMotion } from 'motion/react';
+import { ScrollArea } from '@xipkg/scrollarea';
 
 import {
   CAPABILITIES_HEADING,
@@ -165,53 +166,30 @@ export const CapabilitiesBlock = () => {
               aria-hidden
             />
 
-            <motion.div
-              className={cn(
-                'pointer-events-none absolute bottom-3 right-1 z-20 flex items-center justify-center rounded-full bg-white/90 p-1.5 shadow-md ring-1 ring-gray-900/5 transition-opacity duration-300 dark:bg-gray-90/95 dark:ring-gray-0/10',
-                !(fadeRightEdge && showBounceHint) && 'opacity-0',
-              )}
-              animate={
-                reduceMotion || !fadeRightEdge || !showBounceHint ? undefined : { x: [0, 6, 0] }
-              }
-              transition={
-                reduceMotion || !fadeRightEdge || !showBounceHint
-                  ? undefined
-                  : { repeat: Infinity, duration: 2.1, ease: 'easeInOut' }
-              }
-              aria-hidden
-            >
-              <ChevronSmallRight className="size-5 shrink-0 fill-fuchsia-600 dark:fill-fuchsia-400" />
-            </motion.div>
-
-            <div
-              ref={scrollRef}
-              role="region"
-              aria-label={`${CAPABILITIES_TITLE_FULL}. Прокрутите по\u00A0горизонтали, чтобы увидеть все возможности`}
-              onScroll={updateScrollHint}
-              onWheel={dismissBounceHint}
-              onTouchStart={dismissBounceHint}
-              className={cn(
-                'flex snap-x snap-mandatory gap-7 overflow-x-auto overscroll-x-contain pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                '-mx-1 px-1 touch-pan-x',
-              )}
-            >
-              {CAPABILITY_CARDS.map((card, index) => (
-                <motion.div
-                  key={card.id}
-                  className="w-[min(calc(100vw-3rem),24rem)] min-w-[min(calc(100vw-3rem),24rem)] shrink-0 snap-start"
-                  initial={
-                    reduceMotion
-                      ? { opacity: 1, y: 0, scale: 1 }
-                      : { opacity: 0, y: 28, scale: 0.96 }
-                  }
-                  whileInView={{ opacity: 1, y: 0, scale: 1 }}
-                  viewport={{ once: true, amount: 0.35, margin: '0px 0px -40px 0px' }}
-                  transition={cardRevealTransition(index, reduceMotion)}
-                >
-                  <CapabilityCard card={card} className="h-full w-full" />
-                </motion.div>
-              ))}
-            </div>
+            <ScrollArea scrollBarProps={{ orientation: 'horizontal', forceMount: true }}>
+              <div
+                ref={scrollRef}
+                role="region"
+                aria-label={`${CAPABILITIES_TITLE_FULL}. Прокрутите по\u00A0горизонтали, чтобы увидеть все возможности`}
+                onScroll={updateScrollHint}
+                onWheel={dismissBounceHint}
+                onTouchStart={dismissBounceHint}
+                className={cn(
+                  'flex snap-x snap-mandatory gap-7 pb-1',
+                  '-ml-1 px-1 touch-pan-x',
+                  'mb-3',
+                )}
+              >
+                {CAPABILITY_CARDS.map((card, index) => (
+                  <div
+                    key={card.id}
+                    className="w-[min(calc(100vw-3rem),24rem)] min-w-[min(calc(100vw-3rem),24rem)] shrink-0 snap-start"
+                  >
+                    <CapabilityCard card={card} className="h-full w-full" />
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
           </div>
         </div>
       </div>
diff --git a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
index 52039e6c..c403a6d5 100644
--- a/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
+++ b/apps/xi.land/components/main/TutorIdeas/TutorIdeasBlock.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { ChevronSmallRight } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { motion, useReducedMotion } from 'motion/react';
+import { ScrollArea } from '@xipkg/scrollarea';
 
 import {
   TUTOR_IDEA_CARDS,
@@ -162,51 +163,30 @@ export const TutorIdeasBlock = () => {
             aria-hidden
           />
 
-          <motion.div
-            className={cn(
-              'pointer-events-none absolute bottom-3 right-1 z-20 flex items-center justify-center rounded-full bg-white/90 p-1.5 shadow-md ring-1 ring-gray-900/5 transition-opacity duration-300 dark:bg-gray-90/95 dark:ring-gray-0/10',
-              !(fadeRightEdge && showBounceHint) && 'opacity-0',
-            )}
-            animate={
-              reduceMotion || !fadeRightEdge || !showBounceHint ? undefined : { x: [0, 6, 0] }
-            }
-            transition={
-              reduceMotion || !fadeRightEdge || !showBounceHint
-                ? undefined
-                : { repeat: Infinity, duration: 2.1, ease: 'easeInOut' }
-            }
-            aria-hidden
-          >
-            <ChevronSmallRight className="size-5 shrink-0 fill-brand-100 dark:fill-brand-20" />
-          </motion.div>
-
-          <div
-            ref={scrollRef}
-            role="region"
-            aria-label={`${TUTOR_IDEAS_TITLE_FULL}. Прокрутите по\u00A0горизонтали`}
-            onScroll={updateScrollHint}
-            onWheel={dismissBounceHint}
-            onTouchStart={dismissBounceHint}
-            className={cn(
-              'flex snap-x snap-mandatory gap-7 overflow-x-auto overscroll-x-contain pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-              '-mx-1 px-1 touch-pan-x',
-            )}
-          >
-            {TUTOR_IDEA_CARDS.map((card, index) => (
-              <motion.div
-                key={card.id}
-                className="w-[min(calc(100vw-3rem),384px)] min-w-[min(calc(100vw-3rem),384px)] shrink-0 snap-start"
-                initial={
-                  reduceMotion ? { opacity: 1, y: 0, scale: 1 } : { opacity: 0, y: 28, scale: 0.96 }
-                }
-                whileInView={{ opacity: 1, y: 0, scale: 1 }}
-                viewport={{ once: true, amount: 0.35, margin: '0px 0px -40px 0px' }}
-                transition={cardRevealTransition(index, reduceMotion)}
-              >
-                <IdeaCard card={card} className="h-full w-full" />
-              </motion.div>
-            ))}
-          </div>
+          <ScrollArea scrollBarProps={{ orientation: 'horizontal', forceMount: true }}>
+            <div
+              ref={scrollRef}
+              role="region"
+              aria-label={`${TUTOR_IDEAS_TITLE_FULL}. Прокрутите по\u00A0горизонтали`}
+              onScroll={updateScrollHint}
+              onWheel={dismissBounceHint}
+              onTouchStart={dismissBounceHint}
+              className={cn(
+                'flex snap-x snap-mandatory gap-7  pb-1',
+                '-ml-1 px-1 touch-pan-x',
+                'mb-3',
+              )}
+            >
+              {TUTOR_IDEA_CARDS.map((card, index) => (
+                <div
+                  key={card.id}
+                  className="w-[min(calc(100vw-3rem),384px)] min-w-[min(calc(100vw-3rem),384px)] shrink-0 snap-start"
+                >
+                  <IdeaCard card={card} className="h-full w-full" />
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
         </div>
       </div>
     </section>