diff --git a/src/components/home/LearningPaths.tsx b/src/components/home/LearningPaths.tsx
index 3ab3e92..c5dfd25 100644
--- a/src/components/home/LearningPaths.tsx
+++ b/src/components/home/LearningPaths.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Clock, BookOpen, ArrowRight, Bell } from 'lucide-react';
 import Button from '../ui/Button';
 import ComingSoonBadge from '../features/ComingSoonBadge';
@@ -65,6 +65,30 @@ export default function LearningPaths() {
     const [selectedPath, setSelectedPath] = useState<string>("");
     const [email, setEmail] = useState("");
     const [isSubmitted, setIsSubmitted] = useState(false);
+    
+    // Horizontal Infinite Scroll State Configuration
+    const [visibleCount, setVisibleCount] = useState(2); 
+    const observerAnchorRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const targetAnchor = observerAnchorRef.current;
+        if (!targetAnchor) return;
+
+        const scrollObserver = new IntersectionObserver((intersectEntries) => {
+            if (intersectEntries[0].isIntersecting && visibleCount < paths.length) {
+                // Smoothly load next horizontal elements block
+                setVisibleCount((prevValue) => Math.min(prevValue + 1, paths.length));
+            }
+        }, { 
+            root: targetAnchor.parentElement, // Tracks scrolling within the carousel container box
+            threshold: 0.1 
+        });
+
+        scrollObserver.observe(targetAnchor);
+        return () => {
+            if (targetAnchor) scrollObserver.unobserve(targetAnchor);
+        };
+    }, [visibleCount]);
 
     const handlePathClick = (path: Path) => {
         if (path.status === 'coming-soon') {
@@ -77,7 +101,6 @@ export default function LearningPaths() {
 
     const handleNotifySubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        // Simulate API call
         setTimeout(() => {
             setIsSubmitted(true);
         }, 1000);
@@ -92,12 +115,12 @@ export default function LearningPaths() {
                 </p>
             </div>
 
-            <div className={styles.carousel}>
-                {paths.map((path, index) => (
+            <div className={styles.carousel} style={{ display: 'flex', overflowX: 'auto', gap: '16px', alignItems: 'center' }}>
+                {paths.slice(0, visibleCount).map((path, index) => (
                     <div
                         key={index}
                         className={`${styles.pathCard} ${path.status === 'coming-soon' ? styles.comingSoon : ''}`}
-                        style={{ background: path.color }}
+                        style={{ background: path.color, flexShrink: 0 }}
                         onClick={() => handlePathClick(path)}
                     >
                         {path.status === 'coming-soon' && <ComingSoonBadge />}
@@ -145,6 +168,15 @@ export default function LearningPaths() {
                         </div>
                     </div>
                 ))}
+
+                {/* Horizontal Interceptor Trigger Target Element (placed at the right end inside the slider container) */}
+                <div ref={observerAnchorRef} style={{ width: '40px', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+                    {visibleCount < paths.length ? (
+                        <span style={{ fontSize: '20px', color: '#6B7280' }}>🔄</span>
+                    ) : (
+                        <span style={{ fontSize: '20px', color: '#10B981' }}>🎉</span>
+                    )}
+                </div>
             </div>
 
             {showNotifyModal && (
@@ -185,3 +217,4 @@ export default function LearningPaths() {
         </section>
     );
 }
+