diff --git a/components/FeaturesSection.tsx b/components/FeaturesSection.tsx
index 121fa9f..918ee18 100644
--- a/components/FeaturesSection.tsx
+++ b/components/FeaturesSection.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import useIsMobile from '../hooks/useIsMobile'; 
 import { 
   Monitor, 
   Bell, 
@@ -10,7 +11,13 @@ import {
 } from 'lucide-react';
 import FeatureCard from './FeatureCard';
 
+const MOBILE_VISIBLE_COUNT = 4; 
+
 const FeaturesSection: React.FC = () => {
+  const isMobile = useIsMobile(); 
+  
+  const [isExpanded, setIsExpanded] = useState(false); 
+
   const features = [
     {
       icon: Monitor,
@@ -54,10 +61,20 @@ const FeaturesSection: React.FC = () => {
     }
   ];
 
+  const featuresToDisplay = 
+      (isMobile && !isExpanded) 
+          ? features.slice(0, MOBILE_VISIBLE_COUNT) 
+          : features; 
+  
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  
+  const requiresToggle = isMobile && (features.length > MOBILE_VISIBLE_COUNT);
+
   return (
     <section id="features" className="py-16 features-section">
       <div className="container-max">
-        {/* Section Header */}
         <div className="text-center mb-12">
           <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-surface-100 mb-3">
             Everything You Need to{' '}
@@ -69,9 +86,8 @@ const FeaturesSection: React.FC = () => {
           </p>
         </div>
 
-        {/* Features Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {features.map((feature, index) => (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"> 
+          {featuresToDisplay.map((feature, index) => ( 
             <FeatureCard
               key={index}
               icon={feature.icon}
@@ -81,10 +97,20 @@ const FeaturesSection: React.FC = () => {
           ))}
         </div>
 
+        {requiresToggle && (
+            <div className="flex justify-center mt-8 md:hidden"> 
+                <button
+                    onClick={handleToggle}
+                    className="py-2 px-6 text-sm font-semibold rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors duration-300"
+                >
+                    {isExpanded ? 'Show Less Features' : 'Show More Features'}
+                </button>
+            </div>
+        )}
 
       </div>
     </section>
   );
 };
 
-export default FeaturesSection;
+export default FeaturesSection;
\ No newline at end of file
diff --git a/hooks/useIsMobile.ts b/hooks/useIsMobile.ts
new file mode 100644
index 0000000..a272039
--- /dev/null
+++ b/hooks/useIsMobile.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+const useIsMobile = (breakpoint = 768) => {
+  const [isMobile, setIsMobile] = useState(
+      typeof window !== 'undefined' ? window.innerWidth < breakpoint : false
+  );
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+
+    window.addEventListener('resize', checkMobile);
+    checkMobile();
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, [breakpoint]);
+
+  return isMobile;
+};
+
+export default useIsMobile;
\ No newline at end of file