diff --git a/package.json b/package.json
index 613edc15..9e547d2b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@probat/react": "^0.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
diff --git a/src/components/Features.experiment.tsx b/src/components/Features.experiment.tsx
new file mode 100644
index 00000000..28ac98b5
--- /dev/null
+++ b/src/components/Features.experiment.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import './Features.css';
+
+interface Feature {
+  icon: string
+  title: string
+  description: string
+}
+
+const Features: React.FC = () => {
+  const features: Feature[] = [
+    {
+      icon: '⚡',
+      title: 'Lightning Fast',
+      description: 'Built for speed with optimized performance and minimal loading times.'
+    },
+    {
+      icon: '🔒',
+      title: 'Secure',
+      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
+    },
+    {
+      icon: '📱',
+      title: 'Responsive',
+      description: 'Perfect experience across all devices and screen sizes.'
+    },
+    {
+      icon: '🎨',
+      title: 'Customizable',
+      description: 'Fully customizable themes and components to match your brand.'
+    },
+    {
+      icon: '🚀',
+      title: 'Scalable',
+      description: 'Grows with your business from startup to enterprise scale.'
+    },
+    {
+      icon: '💬',
+      title: 'Support',
+      description: '24/7 customer support with dedicated success managers.'
+    }
+  ]
+
+  return (
+    <section className="features" id="features">
+      <div className="container">
+        <div className="section-header">
+          <h2 className="section-title">Everything You Need to Succeed</h2>
+          <p className="section-description">
+            Powerful tools trusted by thousands of teams — simple enough to start today.
+          </p>
+        </div>
+        
+        <div className="features-grid">
+          {features.map((feature, index) => (
+            <div key={index} className="feature-card">
+              <div className="feature-icon">
+                {feature.icon}
+              </div>
+              <h3 className="feature-title">{feature.title}</h3>
+              <p className="feature-description">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="features-cta-wrapper" style={{
+          textAlign: 'center',
+          marginTop: '3rem'
+        }}>
+          <a
+            href="#get-started"
+            className="features-cta-button"
+            style={{
+              display: 'inline-block',
+              padding: '1rem 2.5rem',
+              backgroundColor: '#667eea',
+              color: '#ffffff',
+              fontSize: '1.125rem',
+              fontWeight: 700,
+              borderRadius: '8px',
+              textDecoration: 'none',
+              transition: 'all 0.3s ease',
+              boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = '#5a6fd6';
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = '0 8px 25px rgba(102, 126, 234, 0.5)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = '#667eea';
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)';
+            }}
+          >
+            Start Your Free Trial
+          </a>
+          <p style={{
+            marginTop: '0.75rem',
+            color: '#718096',
+            fontSize: '0.875rem'
+          }}>
+            No credit card required · Free 14-day trial
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features;
diff --git a/src/components/Features.original.tsx b/src/components/Features.original.tsx
new file mode 100644
index 00000000..658cf56d
--- /dev/null
+++ b/src/components/Features.original.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import './Features.css';
+
+interface Feature {
+  icon: string
+  title: string
+  description: string
+}
+
+const Features: React.FC = () => {
+  const features: Feature[] = [
+    {
+      icon: '⚡',
+      title: 'Lightning Fast',
+      description: 'Built for speed with optimized performance and minimal loading times.'
+    },
+    {
+      icon: '🔒',
+      title: 'Secure',
+      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
+    },
+    {
+      icon: '📱',
+      title: 'Responsive',
+      description: 'Perfect experience across all devices and screen sizes.'
+    },
+    {
+      icon: '🎨',
+      title: 'Customizable',
+      description: 'Fully customizable themes and components to match your brand.'
+    },
+    {
+      icon: '🚀',
+      title: 'Scalable',
+      description: 'Grows with your business from startup to enterprise scale.'
+    },
+    {
+      icon: '💬',
+      title: 'Support',
+      description: '24/7 customer support with dedicated success managers.'
+    }
+  ]
+
+  return (
+    <section className="features" id="features">
+      <div className="container">
+        <div className="section-header">
+          <h2 className="section-title">Why Choose Us?</h2>
+          <p className="section-description">
+            Discover the features that make our platform the best choice for your needs.
+          </p>
+        </div>
+        
+        <div className="features-grid">
+          {features.map((feature, index) => (
+            <div key={index} className="feature-card">
+              <div className="feature-icon">
+                {feature.icon}
+              </div>
+              <h3 className="feature-title">{feature.title}</h3>
+              <p className="feature-description">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features;
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 658cf56d..59dfdecb 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -1,70 +1,16 @@
-import React from "react";
-import './Features.css';
-
-interface Feature {
-  icon: string
-  title: string
-  description: string
-}
-
-const Features: React.FC = () => {
-  const features: Feature[] = [
-    {
-      icon: '⚡',
-      title: 'Lightning Fast',
-      description: 'Built for speed with optimized performance and minimal loading times.'
-    },
-    {
-      icon: '🔒',
-      title: 'Secure',
-      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
-    },
-    {
-      icon: '📱',
-      title: 'Responsive',
-      description: 'Perfect experience across all devices and screen sizes.'
-    },
-    {
-      icon: '🎨',
-      title: 'Customizable',
-      description: 'Fully customizable themes and components to match your brand.'
-    },
-    {
-      icon: '🚀',
-      title: 'Scalable',
-      description: 'Grows with your business from startup to enterprise scale.'
-    },
-    {
-      icon: '💬',
-      title: 'Support',
-      description: '24/7 customer support with dedicated success managers.'
-    }
-  ]
+"use client";
+import { ProbatProviderClient, Experiment } from "@probat/react";
+import OriginalComponent from "./Features.original";
+import ExperimentVariant from "./Features.experiment";
 
+export default function Features(props: any) {
   return (
-    <section className="features" id="features">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title">Why Choose Us?</h2>
-          <p className="section-description">
-            Discover the features that make our platform the best choice for your needs.
-          </p>
-        </div>
-        
-        <div className="features-grid">
-          {features.map((feature, index) => (
-            <div key={index} className="feature-card">
-              <div className="feature-icon">
-                {feature.icon}
-              </div>
-              <h3 className="feature-title">{feature.title}</h3>
-              <p className="feature-description">{feature.description}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
+    <ProbatProviderClient userId="f3a91e3e-da2b-4b49-a487-8202d07182c0">
+      <Experiment
+        id="d04b82d9-9f0a-4db2-a2de-67c34c5e7e14"
+        control={<OriginalComponent {...props} />}
+        variants={{ experiment: <ExperimentVariant {...props} /> }}
+      />
+    </ProbatProviderClient>
+  );
 }
-
-export default Features;