diff --git a/package-lock.json b/package-lock.json
index 471fb08..8de0edc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "eslint-config-next": "15.5.4",
         "jsdom": "^27.4.0",
         "tailwindcss": "^4",
-        "typescript": "5.9.3",
+        "typescript": "^5",
         "vitest": "^4.0.16"
       }
     },
@@ -6045,9 +6045,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7945,11 +7945,11 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
-      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+      "version": "7.5.6",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.6.tgz",
+      "integrity": "sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==",
       "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index c82fbe5..5dd6d5e 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import Image from 'next/image';
 import { FiUsers, FiBarChart, FiShield, FiMessageCircle, FiGithub, FiClock, FiBell, FiWifi, FiCode, FiChevronLeft, FiChevronRight, FiZap } from 'react-icons/fi';
 import { FaTrophy } from 'react-icons/fa';
@@ -103,28 +103,40 @@ const FeaturesSection = () => {
     }
   ];
 
-  useEffect(() => {
+
+  const startAutoScroll = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+  
     intervalRef.current = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % features.length);
-    }, 4000);
+    }, 10000);
+  }, [features.length]);
+
+  useEffect(() => {
+    startAutoScroll();
 
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
-  }, [features.length]);
+  }, [startAutoScroll]);
 
   const nextSlide = () => {
     setCurrentIndex((prev) => (prev + 1) % features.length);
+    startAutoScroll();
   };
 
   const prevSlide = () => {
     setCurrentIndex((prev) => (prev - 1 + features.length) % features.length);
+    startAutoScroll();
   };
 
   const goToSlide = (index: number) => {
     setCurrentIndex(index);
+    startAutoScroll();
   };
 
   return (
@@ -142,7 +154,7 @@ const FeaturesSection = () => {
             <span className="text-blue-300 font-semibold text-lg">Open Source</span>
             <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
           </div>
-          
+
           <h2 className="text-6xl md:text-7xl font-bold mb-8 leading-tight">
             <span className="text-white">The Future of </span>
             <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
@@ -159,7 +171,7 @@ const FeaturesSection = () => {
               vibrant social experience
             </span>
           </p>
-          
+
           {/* Open Source Badge */}
           <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4 bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl px-4 py-3 mb-12 text-sm sm:text-base">
             <div className="flex items-center space-x-2">
@@ -190,7 +202,7 @@ const FeaturesSection = () => {
                 {/* Card */}
                 <div className="hidden lg:block">
                   {features[(currentIndex - 1 + features.length) % features.length] && (
-                    <div 
+                    <div
                       className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
                       onClick={prevSlide}
                     >
@@ -221,7 +233,7 @@ const FeaturesSection = () => {
                         {features[currentIndex].category}
                       </span>
                     </div>
-                    
+
                     <div className={`relative w-16 h-16 sm:w-20 sm:h-20 rounded-3xl bg-gradient-to-br ${features[currentIndex].gradient} flex items-center justify-center mb-3 sm:mb-4 mx-auto shadow-2xl`}>
                       <div className="text-white scale-110">
                         {features[currentIndex].icon}
@@ -232,7 +244,7 @@ const FeaturesSection = () => {
                     <h3 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2 sm:mb-3">
                       {features[currentIndex].title}
                     </h3>
-                    
+
                     <p className="text-base sm:text-lg text-gray-300 leading-relaxed mb-4 sm:mb-6 max-w-lg mx-auto px-2 sm:px-0">
                       {features[currentIndex].detailedDescription}
                     </p>
@@ -264,7 +276,7 @@ const FeaturesSection = () => {
                 {/* Side Card */}
                 <div className="hidden lg:block">
                   {features[(currentIndex + 1) % features.length] && (
-                    <div 
+                    <div
                       className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
                       onClick={nextSlide}
                     >
@@ -305,11 +317,10 @@ const FeaturesSection = () => {
               <button
                 key={index}
                 onClick={() => goToSlide(index)}
-                className={`w-3 h-3 rounded-full transition-all duration-300 ${
-                  index === currentIndex
+                className={`w-3 h-3 rounded-full transition-all duration-300 ${index === currentIndex
                     ? `bg-gradient-to-r ${features[currentIndex].gradient} scale-125`
                     : 'bg-gray-600 hover:bg-gray-500'
-                }`}
+                  }`}
               />
             ))}
           </div>
@@ -327,19 +338,19 @@ const FeaturesSection = () => {
               Show your support and help us reach more users by upvoting BrowsePing on Product Hunt!
             </p>
           </div>
-          
+
           <div className="flex justify-center">
-            <a 
-              href="https://www.producthunt.com/products/browseping?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-browseping" 
-              target="_blank" 
+            <a
+              href="https://www.producthunt.com/products/browseping?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-browseping"
+              target="_blank"
               rel="noopener noreferrer"
               className="inline-block hover:scale-105 transition-transform duration-300 group"
             >
-              <Image 
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748" 
-                alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt" 
-                width={250} 
-                height={54} 
+              <Image
+                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
+                width={250}
+                height={54}
                 className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-700/50 hover:border-orange-500/50"
               />
             </a>
@@ -353,7 +364,7 @@ const FeaturesSection = () => {
               <div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-full blur-3xl"></div>
               <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/15 to-cyan-500/15 rounded-full blur-2xl"></div>
             </div>
-            
+
             <div className="relative bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-2xl border border-green-500/30 rounded-3xl p-6 lg:p-8 xl:p-10 shadow-2xl">
               <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
                 {/* Content section */}
@@ -369,12 +380,12 @@ const FeaturesSection = () => {
                       {' '}Community
                     </h3>
                   </div>
-                  
+
                   <p className="text-base lg:text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                     Join developers building the future of social browsing. Contribute and help shape the project.
                   </p>
                 </div>
-                
+
                 {/* Button section */}
                 <div className="flex justify-center lg:justify-end lg:ml-8">
                   <a
@@ -396,4 +407,4 @@ const FeaturesSection = () => {
   );
 };
 
-export default FeaturesSection;
\ No newline at end of file
+export default FeaturesSection;