diff --git a/frontend/public/android-chrome-192x192.png b/frontend/public/android-chrome-192x192.png
deleted file mode 100644
index 0a19823e..00000000
Binary files a/frontend/public/android-chrome-192x192.png and /dev/null differ
diff --git a/frontend/public/android-chrome-512x512.png b/frontend/public/android-chrome-512x512.png
deleted file mode 100644
index bc6f812e..00000000
Binary files a/frontend/public/android-chrome-512x512.png and /dev/null differ
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
deleted file mode 100644
index 98d358c5..00000000
Binary files a/frontend/public/apple-touch-icon.png and /dev/null differ
diff --git a/frontend/src/components/CallToAction.tsx b/frontend/src/components/CallToAction.tsx
new file mode 100644
index 00000000..4206a28e
--- /dev/null
+++ b/frontend/src/components/CallToAction.tsx
@@ -0,0 +1,35 @@
+import { ArrowRight, Share2 } from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+interface CallToActionProps {
+  title: string
+  description: string
+  buttonText: string
+  buttonLink: string
+}
+
+export const CallToAction = ({ title, description, buttonText, buttonLink }: CallToActionProps) => {
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-cyan-400/30 bg-gradient-to-br from-cyan-500/20 via-purple-500/10 to-cyan-500/20 shadow-[0_0_30px_-5px_rgba(6,182,212,0.25)]">
+      <div className="absolute inset-0 bg-grid-white/[0.02]" />
+      <div className="relative p-6">
+        <div className="flex items-center gap-4">
+          <div className="h-12 w-12 rounded-xl bg-cyan-400/20 p-2.5 flex items-center justify-center ring-1 ring-cyan-400/30 shadow-[0_0_15px_-3px_rgba(6,182,212,0.4)]">
+            <Share2 className="h-6 w-6 text-cyan-300" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-purple-400">{title}</h3>
+            <p className="mt-1 text-base text-gray-200">{description}</p>
+          </div>
+          <Link
+            to={buttonLink}
+            className="flex-shrink-0 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-cyan-500/20 to-purple-500/20 hover:from-cyan-500/30 hover:to-purple-500/30 border border-cyan-400/50 rounded-lg transition-all hover:scale-105 shadow-[0_0_15px_-3px_rgba(6,182,212,0.3)]"
+          >
+            {buttonText}
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/frontend/src/components/layout/Navigation.tsx b/frontend/src/components/layout/Navigation.tsx
index 335bbb31..23c3423f 100644
--- a/frontend/src/components/layout/Navigation.tsx
+++ b/frontend/src/components/layout/Navigation.tsx
@@ -43,7 +43,7 @@ export const Navigation = ({ onToggleSidebar, showMenuButton }: NavigationProps)
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
             {showMenuButton && (
@@ -58,9 +58,12 @@ export const Navigation = ({ onToggleSidebar, showMenuButton }: NavigationProps)
             )}
             <Link to="/" className="flex items-center gap-x-3">
               <img src="/ethpandaops.png" alt="Logo" className="h-8 w-auto" />
-              <span className="text-xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
-                The Lab
-              </span>
+              <div className="flex flex-col">
+                <span className="text-xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
+                  The Lab
+                </span>
+                <span className="text-[10px] text-gray-400 -mt-1">by EthPandaOps</span>
+              </div>
             </Link>
           </div>
 
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 1c4ee1d0..bb4e28fc 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -10,6 +10,7 @@ interface SidebarProps {
 
 interface SidebarItem {
   name: string
+  path: string
   items: {
     name: string
     path: string
@@ -23,6 +24,7 @@ interface SidebarItem {
 const sidebarItems: SidebarItem[] = [
   {
     name: 'Experiments',
+    path: '/experiments',
     items: [
       { 
         name: 'Xatu',
@@ -91,7 +93,7 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
       </Transition.Root>
 
       {/* Desktop Sidebar */}
-      <div className="hidden lg:fixed lg:top-20 lg:inset-y-0 lg:z-20 lg:flex lg:w-72">
+      <div className="hidden lg:fixed lg:top-16 lg:inset-y-0 lg:z-20 lg:flex lg:w-72">
         <SidebarContent />
       </div>
     </>
@@ -107,7 +109,9 @@ const SidebarContent = () => {
         <ul role="list" className="flex flex-1 flex-col gap-y-7">
           {sidebarItems.map((section) => (
             <li key={section.name}>
-              <div className="text-xs font-semibold leading-6 text-cyan-400">{section.name}</div>
+              <Link to={section.path} className="block">
+                <div className="text-xs font-semibold leading-6 text-cyan-400 hover:text-cyan-300 transition-colors">{section.name}</div>
+              </Link>
               <ul role="list" className="mt-2 space-y-1">
                 {section.items.map((group) => (
                   <li key={group.name}>
diff --git a/frontend/src/components/xatu/XatuCallToAction.tsx b/frontend/src/components/xatu/XatuCallToAction.tsx
new file mode 100644
index 00000000..d75dfcef
--- /dev/null
+++ b/frontend/src/components/xatu/XatuCallToAction.tsx
@@ -0,0 +1,12 @@
+import { CallToAction } from '../CallToAction'
+
+export const XatuCallToAction = () => {
+  return (
+    <CallToAction
+      title="Contribute to Xatu"
+      description="Help improve Ethereum by contributing your node's data to our research. Data is published openly in a privacy-focused manner and used for research and analysis."
+      buttonText="Contribute"
+      buttonLink="https://docs.google.com/forms/d/e/1FAIpQLSfSCHLZv2xdDKceQ3ajzYbkm2jkQnG0lVBhjEX4c1Jxvf8QfA/viewform"
+    />
+  )
+} 
\ No newline at end of file
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index b1c0b3ed..ca9014a4 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -12,11 +12,11 @@ export const Home = () => {
         <div className="absolute inset-0 bg-black/75" />
         <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/30 via-transparent to-purple-500/30" />
         <div className="relative p-6 md:p-12">
-          <div className="text-center md:text-left">
+          <div className="text-center md:text-left max-w-6xl mx-auto">
             <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3 md:mb-4">The Lab</h1>
             <p className="text-lg md:text-xl text-gray-300 max-w-3xl mb-4">
               The Lab is our experimental platform for exploring Ethereum data. We collect data from various sources 
-              and present it in a way that is easy to understand and visualize.
+              and present it in a way that is easy to understand.
             </p>
             <p className="text-2xl font-mono text-cyan-400 italic opacity-75">&quot;Let the pandas cook 🐼👨‍🍳&quot;</p>
           </div>
@@ -50,7 +50,7 @@ export const Home = () => {
           </div>
           <h3 className="text-lg font-semibold text-white mb-2">Experimental Platform</h3>
           <p className="text-gray-300">
-            A space for testing new ideas, visualizing data, and exploring the Ethereum network in novel ways.
+            A space for testing new ideas, visualizing data, and exploring the Ethereum network in new ways.
           </p>
         </div>
 
@@ -59,9 +59,9 @@ export const Home = () => {
           <div className="w-12 h-12 rounded-lg bg-cyan-500/10 flex items-center justify-center mb-4">
             <Activity className="h-6 w-6 text-cyan-400" />
           </div>
-          <h3 className="text-lg font-semibold text-white mb-2">Network Insights</h3>
+          <h3 className="text-lg font-semibold text-white mb-2">Network Analytics</h3>
           <p className="text-gray-300">
-            Providing valuable insights into network health, client diversity, and blockchain metrics through interactive visualizations.
+            Explore network health and performance through dynamic data visualizations.
           </p>
         </div>
       </div>
@@ -77,7 +77,7 @@ export const Home = () => {
             <div>
               <h3 className="text-lg font-semibold text-white mt-0">Xatu</h3>
               <p className="text-gray-300 mt-2">
-                A comprehensive dataset containing detailed information about the Ethereum network, including beacon chain events, mempool activity, and canonical chain events. Xatu helps monitor network health, track client diversity, and provide insights into network behavior.
+                A comprehensive dataset containing detailed information about the Ethereum network, including beacon chain events, mempool activity, and canonical chain events. Xatu helps monitor network health, and provide insights into network behavior.
               </p>
               <Link
                 to="/experiments/xatu"
diff --git a/frontend/src/pages/xatu/ClientVersions.tsx b/frontend/src/pages/xatu/ClientVersions.tsx
index 55d56a97..289011c1 100644
--- a/frontend/src/pages/xatu/ClientVersions.tsx
+++ b/frontend/src/pages/xatu/ClientVersions.tsx
@@ -14,6 +14,7 @@ import {
   Cell,
   Legend
 } from 'recharts'
+import { XatuCallToAction } from '../../components/xatu/XatuCallToAction'
 
 interface ClientVersion {
   client_name: string
@@ -57,182 +58,185 @@ export const ClientVersions = () => {
   }, [] as { client_name: string; count: number }[])
 
   return (
-    <div className="space-y-6">
-      <h2 className="text-2xl font-bold text-cyan-400">Client Versions</h2>
+    <div className="space-y-8">
+      <XatuCallToAction />
+      <div className="space-y-6">
+        <h2 className="text-2xl font-bold text-cyan-400">Client Versions</h2>
 
-      {/* Summary Card */}
-      <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
-        <div className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
-          {totalNodes.toLocaleString()}
-        </div>
-        <div className="text-sm text-gray-200">
-          Total active nodes
+        {/* Summary Card */}
+        <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
+          <div className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
+            {totalNodes.toLocaleString()}
+          </div>
+          <div className="text-sm text-gray-200">
+            Total active nodes
+          </div>
         </div>
-      </div>
 
-      {/* Charts Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Pie Chart */}
-        <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
-          <h3 className="text-lg font-semibold mb-4 text-cyan-400">Client Distribution</h3>
-          <div className="h-[400px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <PieChart>
-                <Pie
-                  data={clientData}
-                  dataKey="count"
-                  nameKey="client_name"
-                  cx="50%"
-                  cy="50%"
-                  outerRadius={150}
-                  label={({
-                    cx,
-                    cy,
-                    midAngle,
-                    innerRadius,
-                    outerRadius,
-                    value,
-                    name
-                  }) => {
-                    const RADIAN = Math.PI / 180
-                    const radius = 25 + innerRadius + (outerRadius - innerRadius)
-                    const x = cx + radius * Math.cos(-midAngle * RADIAN)
-                    const y = cy + radius * Math.sin(-midAngle * RADIAN)
-                    const percent = ((value / totalNodes) * 100).toFixed(1)
+        {/* Charts Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Pie Chart */}
+          <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
+            <h3 className="text-lg font-semibold mb-4 text-cyan-400">Client Distribution</h3>
+            <div className="h-[400px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={clientData}
+                    dataKey="count"
+                    nameKey="client_name"
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={150}
+                    label={({
+                      cx,
+                      cy,
+                      midAngle,
+                      innerRadius,
+                      outerRadius,
+                      value,
+                      name
+                    }) => {
+                      const RADIAN = Math.PI / 180
+                      const radius = 25 + innerRadius + (outerRadius - innerRadius)
+                      const x = cx + radius * Math.cos(-midAngle * RADIAN)
+                      const y = cy + radius * Math.sin(-midAngle * RADIAN)
+                      const percent = ((value / totalNodes) * 100).toFixed(1)
 
-                    return (
-                      <text
-                        x={x}
-                        y={y}
-                        fill="#e2e8f0"
-                        textAnchor={x > cx ? 'start' : 'end'}
-                        dominantBaseline="central"
-                      >
-                        {name} ({percent}%)
-                      </text>
-                    )
-                  }}
-                >
-                  {clientData.map((entry, index) => (
-                    <Cell
-                      key={entry.client_name}
-                      fill={COLORS[index % COLORS.length]}
-                    />
-                  ))}
-                </Pie>
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: 'rgba(17, 24, 39, 0.95)',
-                    border: '1px solid rgba(75, 85, 99, 0.3)',
-                    borderRadius: '0.5rem',
-                    color: '#e2e8f0'
-                  }}
-                  formatter={(value: number) => [
-                    value.toLocaleString(),
-                    'Nodes'
-                  ]}
-                />
-              </PieChart>
-            </ResponsiveContainer>
+                      return (
+                        <text
+                          x={x}
+                          y={y}
+                          fill="#e2e8f0"
+                          textAnchor={x > cx ? 'start' : 'end'}
+                          dominantBaseline="central"
+                        >
+                          {name} ({percent}%)
+                        </text>
+                      )
+                    }}
+                  >
+                    {clientData.map((entry, index) => (
+                      <Cell
+                        key={entry.client_name}
+                        fill={COLORS[index % COLORS.length]}
+                      />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: 'rgba(17, 24, 39, 0.95)',
+                      border: '1px solid rgba(75, 85, 99, 0.3)',
+                      borderRadius: '0.5rem',
+                      color: '#e2e8f0'
+                    }}
+                    formatter={(value: number) => [
+                      value.toLocaleString(),
+                      'Nodes'
+                    ]}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
           </div>
-        </div>
 
-        {/* Bar Chart */}
-        <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
-          <h3 className="text-lg font-semibold mb-4 text-cyan-400">Version Distribution</h3>
-          <div className="h-[400px]">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart
-                data={data}
-                layout="vertical"
-                margin={{
-                  top: 5,
-                  right: 30,
-                  left: 100,
-                  bottom: 5
-                }}
-              >
-                <CartesianGrid strokeDasharray="3 3" stroke="rgba(148, 163, 184, 0.1)" horizontal={false} />
-                <XAxis
-                  type="number"
-                  tick={{ fill: '#e2e8f0' }}
-                  tickFormatter={(value) => value.toLocaleString()}
-                  stroke="#94a3b8"
-                />
-                <YAxis
-                  type="category"
-                  dataKey="client_version"
-                  tick={{ fill: '#e2e8f0' }}
-                  width={100}
-                  stroke="#94a3b8"
-                />
-                <Tooltip
-                  contentStyle={{
-                    backgroundColor: 'rgba(17, 24, 39, 0.95)',
-                    border: '1px solid rgba(75, 85, 99, 0.3)',
-                    borderRadius: '0.5rem',
-                    color: '#e2e8f0'
-                  }}
-                  formatter={(value: number) => [
-                    value.toLocaleString(),
-                    'Nodes'
-                  ]}
-                />
-                <Bar
-                  dataKey="count"
-                  fill="#22d3ee"
-                  radius={[0, 4, 4, 0]}
-                  label={{
-                    position: 'right',
-                    fill: '#e2e8f0',
-                    formatter: (value: number) =>
-                      `${((value / totalNodes) * 100).toFixed(1)}%`
+          {/* Bar Chart */}
+          <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-6 border border-gray-800 shadow-xl">
+            <h3 className="text-lg font-semibold mb-4 text-cyan-400">Version Distribution</h3>
+            <div className="h-[400px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={data}
+                  layout="vertical"
+                  margin={{
+                    top: 5,
+                    right: 30,
+                    left: 100,
+                    bottom: 5
                   }}
-                />
-              </BarChart>
-            </ResponsiveContainer>
+                >
+                  <CartesianGrid strokeDasharray="3 3" stroke="rgba(148, 163, 184, 0.1)" horizontal={false} />
+                  <XAxis
+                    type="number"
+                    tick={{ fill: '#e2e8f0' }}
+                    tickFormatter={(value) => value.toLocaleString()}
+                    stroke="#94a3b8"
+                  />
+                  <YAxis
+                    type="category"
+                    dataKey="client_version"
+                    tick={{ fill: '#e2e8f0' }}
+                    width={100}
+                    stroke="#94a3b8"
+                  />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: 'rgba(17, 24, 39, 0.95)',
+                      border: '1px solid rgba(75, 85, 99, 0.3)',
+                      borderRadius: '0.5rem',
+                      color: '#e2e8f0'
+                    }}
+                    formatter={(value: number) => [
+                      value.toLocaleString(),
+                      'Nodes'
+                    ]}
+                  />
+                  <Bar
+                    dataKey="count"
+                    fill="#22d3ee"
+                    radius={[0, 4, 4, 0]}
+                    label={{
+                      position: 'right',
+                      fill: '#e2e8f0',
+                      formatter: (value: number) =>
+                        `${((value / totalNodes) * 100).toFixed(1)}%`
+                    }}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Versions Table */}
-      <div className="bg-gray-900/80 backdrop-blur-md rounded-lg overflow-hidden border border-gray-800 shadow-xl">
-        <table className="min-w-full divide-y divide-gray-800">
-          <thead>
-            <tr className="bg-gray-900/50">
-              <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
-                Client
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
-                Version
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
-                Count
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
-                Share
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-800">
-            {data.map((item, index) => (
-              <tr key={index} className="hover:bg-cyan-500/10 transition-colors">
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
-                  {item.client_name}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                  {item.client_version}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                  {item.count.toLocaleString()}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
-                  {((item.count / totalNodes) * 100).toFixed(1)}%
-                </td>
+        {/* Versions Table */}
+        <div className="bg-gray-900/80 backdrop-blur-md rounded-lg overflow-hidden border border-gray-800 shadow-xl">
+          <table className="min-w-full divide-y divide-gray-800">
+            <thead>
+              <tr className="bg-gray-900/50">
+                <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
+                  Client
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
+                  Version
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
+                  Count
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-cyan-400 uppercase tracking-wider">
+                  Share
+                </th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody className="divide-y divide-gray-800">
+              {data.map((item, index) => (
+                <tr key={index} className="hover:bg-cyan-500/10 transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
+                    {item.client_name}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                    {item.client_version}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                    {item.count.toLocaleString()}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
+                    {((item.count / totalNodes) * 100).toFixed(1)}%
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   )
diff --git a/frontend/src/pages/xatu/Contributors.tsx b/frontend/src/pages/xatu/Contributors.tsx
index b9a14ec8..b63e7deb 100644
--- a/frontend/src/pages/xatu/Contributors.tsx
+++ b/frontend/src/pages/xatu/Contributors.tsx
@@ -2,6 +2,7 @@ import { useDataFetch } from '../../utils/data'
 import { LoadingState } from '../../components/common/LoadingState'
 import { ErrorState } from '../../components/common/ErrorState'
 import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
+import { XatuCallToAction } from '../../components/xatu/XatuCallToAction'
 
 interface ContributorsData {
   contributors_over_time: {
@@ -41,6 +42,7 @@ export const Contributors = () => {
 
   return (
     <div className="space-y-8">
+      <XatuCallToAction />
       <div>
         <h2 className="text-2xl font-bold mb-4 text-cyan-400">Contributors Over Time</h2>
         <div className="bg-gray-900/80 backdrop-blur-md rounded-lg p-4 h-[400px] border border-gray-800 shadow-xl">
diff --git a/frontend/src/pages/xatu/index.tsx b/frontend/src/pages/xatu/index.tsx
index fff6f8ef..3856fe2c 100644
--- a/frontend/src/pages/xatu/index.tsx
+++ b/frontend/src/pages/xatu/index.tsx
@@ -1,9 +1,12 @@
 import { Link } from 'react-router-dom'
 import { ArrowRight, Database, Server, Activity, Github } from 'lucide-react'
+import { XatuCallToAction } from '../../components/xatu/XatuCallToAction'
 
 export const Xatu = () => {
   return (
-    <div className="space-y-12 max-w-6xl mx-auto">
+    <div className="space-y-8">
+      <XatuCallToAction />
+      
       {/* Hero Section */}
       <div className="relative rounded-2xl overflow-hidden bg-gray-900/80 backdrop-blur-md border border-gray-800">
         <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 via-transparent to-purple-500/10" />