diff --git a/frontend/public/ethpandaops.png b/frontend/public/ethpandaops.png
new file mode 100644
index 00000000..d44f108f
Binary files /dev/null and b/frontend/public/ethpandaops.png differ
diff --git a/frontend/public/header.png b/frontend/public/header.png
new file mode 100644
index 00000000..52c2b5f9
Binary files /dev/null and b/frontend/public/header.png differ
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 7257cb95..d0e36ba2 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -39,7 +39,7 @@ export const Header = ({ onToggleSidebar }: HeaderProps) => {
             </button>
             <Link to="/" className="flex items-center space-x-3">
               <img
-                src="/ethpandaops-logo.svg"
+                src="/ethpandaops.png"
                 alt="EthPandaOps Logo"
                 className="h-8 w-8"
               />
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 0cd8f945..0971a92a 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -3,39 +3,18 @@ import { Github, ExternalLink } from 'lucide-react'
 export const About = () => {
   return (
     <div className="space-y-8 max-w-4xl">
-      <h2 className="text-2xl font-bold">About EthPandaOps Lab</h2>
+      <h2 className="text-2xl font-bold">About The Lab</h2>
 
       <div className="prose dark:prose-invert max-w-none">
         <p className="text-lg">
-          EthPandaOps Lab is an experimental platform that provides insights into the Ethereum network. 
-          We collect, analyze, and visualize data from various sources to help understand the network's health, 
-          client diversity, and overall ecosystem.
+          The Lab is an experimental platform that provides insights into Ethereum.
+          Here we present data and visualizations that we've collected. All of our data is public and open source.
         </p>
+      </div>
 
-        <h3>Our Data Sources</h3>
-        <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 space-y-4">
-          <div>
-            <h4 className="text-lg font-semibold mb-2">Xatu</h4>
-            <p className="text-gray-600 dark:text-gray-300">
-              A beacon chain event collector and metrics exporter. Xatu helps monitor the Ethereum network by collecting:
-            </p>
-            <div className="mt-4">
-              <a
-                href="https://github.com/ethpandaops/xatu"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-              >
-                <Github className="h-5 w-5 mr-2" />
-                View Xatu on GitHub
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <h2 className="mt-8">About EthPandaOps</h2>
-        <p>
-          Check out our main website for more information:
+      <h2 className="mt-8">About EthPandaOps</h2>
+      <p>
+        Check out our main website for more information:
         </p>
 
         <div className="flex flex-col sm:flex-row gap-4 mt-8">
@@ -55,9 +34,8 @@ export const About = () => {
             className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-indigo-600 bg-indigo-100 hover:bg-indigo-200 dark:text-white dark:bg-indigo-900 dark:hover:bg-indigo-800 rounded-lg transition-colors"
           >
             <Github className="h-5 w-5 mr-2" />
-            View Our Projects
-          </a>
-        </div>
+          View Our Projects
+        </a>
       </div>
     </div>
   )
diff --git a/frontend/src/pages/ClientStats.tsx b/frontend/src/pages/ClientStats.tsx
deleted file mode 100644
index e886bb92..00000000
--- a/frontend/src/pages/ClientStats.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react'
-
-interface ClientVersion {
-  client_name: string
-  client_version: string
-  count: number
-}
-
-export const ClientStats = () => {
-  const [data, setData] = useState<ClientVersion[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    fetch('/api/data/xatu-public-contributors/top_client_versions.json')
-      .then((res) => {
-        if (!res.ok) throw new Error('Failed to fetch data')
-        return res.json()
-      })
-      .then(setData)
-      .catch((err) => setError(err.message))
-      .finally(() => setLoading(false))
-  }, [])
-
-  if (loading) return <div>Loading...</div>
-  if (error) return <div>Error: {error}</div>
-  if (!data.length) return <div>No data available</div>
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-2xl font-bold">Client Statistics</h2>
-      <div className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-          <thead className="bg-gray-50 dark:bg-gray-700">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                Client
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                Version
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                Count
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-            {data.map((item, index) => (
-              <tr key={index}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
-                  {item.client_name}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                  {item.client_version}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
-                  {item.count}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-} 
\ No newline at end of file
diff --git a/frontend/src/pages/Contributors.tsx b/frontend/src/pages/Contributors.tsx
deleted file mode 100644
index b8aefcef..00000000
--- a/frontend/src/pages/Contributors.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react'
-
-interface ContributorData {
-  dates: string[]
-  contributors: number[]
-}
-
-export const Contributors = () => {
-  const [data, setData] = useState<ContributorData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    fetch('/api/data/xatu-public-contributors/contributors_over_time.json')
-      .then((res) => {
-        if (!res.ok) throw new Error('Failed to fetch data')
-        return res.json()
-      })
-      .then(setData)
-      .catch((err) => setError(err.message))
-      .finally(() => setLoading(false))
-  }, [])
-
-  if (loading) return <div>Loading...</div>
-  if (error) return <div>Error: {error}</div>
-  if (!data) return <div>No data available</div>
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-2xl font-bold">Xatu Contributors</h2>
-      <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
-        <div className="text-4xl font-bold text-gray-900 dark:text-white">
-          {data.contributors[data.contributors.length - 1]}
-        </div>
-        <div className="text-sm text-gray-500 dark:text-gray-400">
-          Active contributors in the last 24 hours
-        </div>
-      </div>
-      {/* Add chart here once we have a charting library */}
-    </div>
-  )
-} 
\ No newline at end of file
diff --git a/frontend/src/pages/Gallery.tsx b/frontend/src/pages/Gallery.tsx
deleted file mode 100644
index a2dcaeb1..00000000
--- a/frontend/src/pages/Gallery.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import getFruits from 'api/getFruits'
-import Fruit from 'components/Fruit'
-import Head from 'components/Head'
-import LoadingOrError from 'components/LoadingOrError'
-import type { ReactElement } from 'react'
-
-export default function GalleryPage(): ReactElement {
-	const { isPending, isError, error, data } = useQuery({
-		queryKey: ['fruits'],
-		queryFn: getFruits
-	})
-	if (isPending || isError) {
-		return <LoadingOrError error={error as Error} />
-	}
-
-	return (
-		<>
-			<Head title='Vitamin' />
-			<div className='m-2 grid min-h-screen grid-cols-[minmax(0,384px)] place-content-center gap-2 md:m-0 md:grid-cols-[repeat(2,minmax(0,384px))] xl:grid-cols-[repeat(3,384px)]'>
-				{data.map((fruit, index) => (
-					<Fruit key={`FruitCard-${fruit.name}`} fruit={fruit} index={index} />
-				))}
-			</div>
-		</>
-	)
-}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index a6430fec..a67d84ae 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -3,25 +3,35 @@ import { Link } from 'react-router-dom'
 
 export const Home = () => {
   return (
-    <div className="flex flex-col items-center justify-center min-h-[80vh] text-center px-4">
-      <img
-        src="/ethpandaops-logo.svg"
-        alt="EthPandaOps Logo"
-        className="w-48 h-48 mb-8"
-      />
-      <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Welcome to EthPandaOps Lab
-      </h1>
-      <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl">
-        The Lab is our experimental platform for exploring Ethereum. 
-      </p>
-      <Link
-        to="/xatu/contributors"
-        className="inline-flex items-center px-6 py-3 text-lg font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
-      >
-        Explore Data
-        <ArrowRight className="ml-2 h-5 w-5" />
-      </Link>
+    <div className="relative min-h-[80vh]">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <img
+          src="/header.png"
+          alt=""
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/80" />
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4">
+        <div className="bg-black/20 backdrop-blur-sm p-12 rounded-3xl max-w-3xl border border-white/10">
+          <h1 className="text-5xl font-bold text-white mb-6">
+            Welcome to The Lab
+          </h1>
+          <p className="text-xl text-gray-100 mb-10 max-w-2xl">
+            The Lab is our experimental platform for exploring Ethereum
+          </p>
+          <Link
+            to="/xatu/contributors"
+            className="inline-flex items-center px-8 py-4 text-lg font-medium text-white bg-indigo-600/90 hover:bg-indigo-700 rounded-xl transition-all hover:scale-105"
+          >
+            Explore
+            <ArrowRight className="ml-2 h-5 w-5" />
+          </Link>
+        </div>
+      </div>
     </div>
   )
 } 
\ No newline at end of file
diff --git a/frontend/src/utils/data.ts b/frontend/src/utils/data.ts
index a14031f2..03b6d036 100644
--- a/frontend/src/utils/data.ts
+++ b/frontend/src/utils/data.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { getDataUrl } from '../config'
 
 export const fetchData = async <T>(path: string): Promise<T> => {
@@ -10,25 +10,10 @@ export const fetchData = async <T>(path: string): Promise<T> => {
 }
 
 export const useDataFetch = <T>(path: string) => {
-  const [data, setData] = useState<T | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    const fetchDataFromPath = async () => {
-      try {
-        setLoading(true)
-        const result = await fetchData<T>(path)
-        setData(result)
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown error occurred'))
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchDataFromPath()
-  }, [path])
+  const { data, isLoading: loading, error } = useQuery<T, Error>({
+    queryKey: ['data', path],
+    queryFn: () => fetchData<T>(path),
+  })
 
   return { data, loading, error }
 } 
\ No newline at end of file