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/GetStartedButton.experiment.tsx b/src/components/GetStartedButton.experiment.tsx
new file mode 100644
index 00000000..0c71ac98
--- /dev/null
+++ b/src/components/GetStartedButton.experiment.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface GetStartedButtonProps {
+  label?: string
+  large?: boolean
+}
+
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free Today', large = false }) => {
+  return (
+    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+      {label}
+    </button>
+  )
+}
+
+export default GetStartedButton
\ No newline at end of file
diff --git a/src/components/GetStartedButton.original.tsx b/src/components/GetStartedButton.original.tsx
new file mode 100644
index 00000000..1a1173af
--- /dev/null
+++ b/src/components/GetStartedButton.original.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface GetStartedButtonProps {
+  label?: string
+  large?: boolean
+}
+
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
+  return (
+    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+      {label}
+    </button>
+  )
+}
+
+export default GetStartedButton
diff --git a/src/components/GetStartedButton.tsx b/src/components/GetStartedButton.tsx
index 1a1173af..de9d46ee 100644
--- a/src/components/GetStartedButton.tsx
+++ b/src/components/GetStartedButton.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+"use client";
+import { ProbatProviderClient, Experiment } from "@probat/react";
+import OriginalComponent from "./GetStartedButton.original";
+import ExperimentVariant from "./GetStartedButton.experiment";
 
-interface GetStartedButtonProps {
-  label?: string
-  large?: boolean
-}
-
-const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
+export default function GetStartedButton(props: any) {
   return (
-    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
-      {label}
-    </button>
-  )
+    <ProbatProviderClient userId="f3a91e3e-da2b-4b49-a487-8202d07182c0">
+      <Experiment
+        id="003be10a-9326-4022-b814-2219574bc044"
+        control={<OriginalComponent {...props} />}
+        variants={{ experiment: <ExperimentVariant {...props} /> }}
+      />
+    </ProbatProviderClient>
+  );
 }
-
-export default GetStartedButton
diff --git a/src/components/Hero.experiment.tsx b/src/components/Hero.experiment.tsx
new file mode 100644
index 00000000..2e220434
--- /dev/null
+++ b/src/components/Hero.experiment.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import './Hero.css'
+import GetStartedButton from './GetStartedButton'
+
+const Hero: React.FC = () => {
+  return (
+    <section className="hero" id="home">
+      <div className="container">
+        <div className="hero-content">
+          <div className="hero-text">
+            <h1 className="hero-title">
+              Build Something
+              <span className="gradient-text"> Amazing</span>
+            </h1>
+            <p className="hero-description">
+              Join over 10,000 developers building the future with our platform. 
+              Our cutting-edge tools and 99.9% uptime guarantee help you create 
+              stunning websites and applications faster than ever.
+            </p>
+            <div className="hero-actions">
+              <GetStartedButton large />
+              <button className="btn btn-outline btn-large">
+                Watch Demo
+              </button>
+            </div>
+            <div className="hero-stats">
+              <div className="stat">
+                <span className="stat-number">10K+</span>
+                <span className="stat-label">Active Users</span>
+              </div>
+              <div className="stat">
+                <span className="stat-number">99.9%</span>
+                <span className="stat-label">Uptime</span>
+              </div>
+              <div className="stat">
+                <span className="stat-number">24/7</span>
+                <span className="stat-label">Support</span>
+              </div>
+            </div>
+          </div>
+          <div className="hero-visual">
+            <div className="hero-card">
+              <div className="card-header">
+                <div className="card-dots">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </div>
+              <div className="card-content">
+                <div className="code-line"></div>
+                <div className="code-line"></div>
+                <div className="code-line"></div>
+                <div className="code-line short"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/src/components/Hero.original.tsx b/src/components/Hero.original.tsx
new file mode 100644
index 00000000..8ec1a4f3
--- /dev/null
+++ b/src/components/Hero.original.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import './Hero.css'
+import GetStartedButton from './GetStartedButton'
+
+const Hero: React.FC = () => {
+  return (
+    <section className="hero" id="home">
+      <div className="container">
+        <div className="hero-content">
+          <div className="hero-text">
+            <h1 className="hero-title">
+              Build Something
+              <span className="gradient-text"> Amazing</span>
+            </h1>
+            <p className="hero-description">
+              Create stunning websites and applications with our modern tools and 
+              cutting-edge technology. Join thousands of developers who trust our platform.
+            </p>
+            <div className="hero-actions">
+              <GetStartedButton large />
+              <button className="btn btn-outline btn-large">
+                Watch Demo
+              </button>
+            </div>
+            <div className="hero-stats">
+              <div className="stat">
+                <span className="stat-number">10K+</span>
+                <span className="stat-label">Active Users</span>
+              </div>
+              <div className="stat">
+                <span className="stat-number">99.9%</span>
+                <span className="stat-label">Uptime</span>
+              </div>
+              <div className="stat">
+                <span className="stat-number">24/7</span>
+                <span className="stat-label">Support</span>
+              </div>
+            </div>
+          </div>
+          <div className="hero-visual">
+            <div className="hero-card">
+              <div className="card-header">
+                <div className="card-dots">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </div>
+              <div className="card-content">
+                <div className="code-line"></div>
+                <div className="code-line"></div>
+                <div className="code-line"></div>
+                <div className="code-line short"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 8ec1a4f3..37ff214a 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,63 +1,16 @@
-import React from 'react'
-import './Hero.css'
-import GetStartedButton from './GetStartedButton'
+"use client";
+import { ProbatProviderClient, Experiment } from "@probat/react";
+import OriginalComponent from "./Hero.original";
+import ExperimentVariant from "./Hero.experiment";
 
-const Hero: React.FC = () => {
+export default function Hero(props: any) {
   return (
-    <section className="hero" id="home">
-      <div className="container">
-        <div className="hero-content">
-          <div className="hero-text">
-            <h1 className="hero-title">
-              Build Something
-              <span className="gradient-text"> Amazing</span>
-            </h1>
-            <p className="hero-description">
-              Create stunning websites and applications with our modern tools and 
-              cutting-edge technology. Join thousands of developers who trust our platform.
-            </p>
-            <div className="hero-actions">
-              <GetStartedButton large />
-              <button className="btn btn-outline btn-large">
-                Watch Demo
-              </button>
-            </div>
-            <div className="hero-stats">
-              <div className="stat">
-                <span className="stat-number">10K+</span>
-                <span className="stat-label">Active Users</span>
-              </div>
-              <div className="stat">
-                <span className="stat-number">99.9%</span>
-                <span className="stat-label">Uptime</span>
-              </div>
-              <div className="stat">
-                <span className="stat-number">24/7</span>
-                <span className="stat-label">Support</span>
-              </div>
-            </div>
-          </div>
-          <div className="hero-visual">
-            <div className="hero-card">
-              <div className="card-header">
-                <div className="card-dots">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </div>
-              </div>
-              <div className="card-content">
-                <div className="code-line"></div>
-                <div className="code-line"></div>
-                <div className="code-line"></div>
-                <div className="code-line short"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
+    <ProbatProviderClient userId="f3a91e3e-da2b-4b49-a487-8202d07182c0">
+      <Experiment
+        id="356923ec-5947-40ac-90b0-1dbd4f82a80c"
+        control={<OriginalComponent {...props} />}
+        variants={{ experiment: <ExperimentVariant {...props} /> }}
+      />
+    </ProbatProviderClient>
+  );
 }
-
-export default Hero