diff --git a/public/images/CCNZ-bg.png b/public/images/CCNZ-bg.png
new file mode 100644
index 0000000..07bebd4
Binary files /dev/null and b/public/images/CCNZ-bg.png differ
diff --git a/public/images/harry.png b/public/images/harry.png
new file mode 100644
index 0000000..27ed1c8
Binary files /dev/null and b/public/images/harry.png differ
diff --git a/public/images/hilton-auckland.jpg b/public/images/hilton-auckland.jpg
new file mode 100644
index 0000000..732dbe7
Binary files /dev/null and b/public/images/hilton-auckland.jpg differ
diff --git a/src/components/CCNZSection.tsx b/src/components/CCNZSection.tsx
index 588c5a0..80c69a3 100644
--- a/src/components/CCNZSection.tsx
+++ b/src/components/CCNZSection.tsx
@@ -1,5 +1,4 @@
-import { FC } from 'react'
-import AnimatedGridPattern from './AnimatedGridPattern'
+import { FC, useState, useEffect } from 'react'
 
 interface ConsultingFeature {
     title: string
@@ -21,35 +20,47 @@ const consultingFeatures: ConsultingFeature[] = [
     }
 ]
 
+const backgroundImages = ['./images/CCNZ-bg.png', './images/harry.png', './images/expo2024.jpg']
+
 const ConsultingSection: FC = () => {
-    return (
-        <div className="relative w-full min-h-[90vh] flex flex-col lg:flex-row items-stretch">
-            <AnimatedGridPattern />
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [isTransitioning, setIsTransitioning] = useState(false)
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setIsTransitioning(true)
+            setTimeout(() => {
+                setCurrentImageIndex((prevIndex) => (prevIndex === backgroundImages.length - 1 ? 0 : prevIndex + 1))
+                setIsTransitioning(false)
+            }, 500)
+        }, 5000)
 
+        return () => clearInterval(timer)
+    }, [])
+
+    return (
+        <div className="relative w-full min-h-screen flex">
             {/* Left Content Side */}
-            <div className="relative z-10 w-full lg:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-20">
+            <div className="relative z-10 w-full lg:w-2/5 flex flex-col justify-center px-6 lg:px-12 py-16">
                 <div className="max-w-xl">
                     <div className="mb-12">
-                        <h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
-                            Need Professional
-                            <span className="alegreya text-green-500 block mt-2">Crypto Guidance?</span>
-                        </h2>
-                        <p className="text-gray-300 text-lg">Get expert cryptocurrency consulting services designed specifically for New Zealand investors</p>
-                    </div>
-
-                    <div className="space-y-6 mb-12">
-                        {consultingFeatures.map((feature, index) => (
-                            <div
-                                key={index}
-                                className="border border-green-500/30 
-                                         rounded-xl p-6 transition-all duration-300
-                                         hover:border-green-400/70 hover:bg-green-500/10 
-                                         hover:shadow-[0_0_25px_rgba(74,222,128,0.3)]"
-                            >
-                                <h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
-                                <p className="text-gray-300">{feature.description}</p>
+                        <div className="flex items-center gap-8">
+                            <h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold">
+                                Need Professional
+                                <span className="alegreya text-green-500 block mt-2">Crypto Guidance?</span>
+                            </h2>
+                            {/* Logo next to title */}
+                            <div className="overflow">
+                                <div
+                                    className="w-24 h-24 md:w-32 md:h-32 bg-black/80 rounded-3xl p-6 backdrop-blur-xl
+                                          border border-green-500/30 shadow-[0_0_50px_rgba(74,222,128,0.3)]
+                                          transform hover:scale-105 transition-transform duration-500"
+                                >
+                                    <img src="./images/Crypto-Consulting-NZ.png" alt="Crypto Consulting NZ Logo" className="w-full h-full text-green-500" />
+                                </div>
                             </div>
-                        ))}
+                        </div>
+                        <p className="text-gray-300 text-lg mt-6">Expert cryptocurrency consulting services designed specifically for New Zealand investors</p>
                     </div>
 
                     <div className="flex flex-col sm:flex-row items-start gap-6">
@@ -77,61 +88,31 @@ const ConsultingSection: FC = () => {
                             Professional consultants available now
                         </div>
                     </div>
-                </div>
-            </div>
 
-            {/* Right Visual Side */}
-            <div className="relative w-full lg:w-1/2 min-h-[50vh] lg:min-h-full flex items-center justify-center overflow-hidden">
-                {/* Gradient Overlay */}
-                <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 via-transparent to-black/50" />
-
-                {/* Decorative Elements */}
-                <div className="absolute inset-0">
-                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] opacity-30">
-                        <svg viewBox="0 0 100 100" className="w-full h-full animate-spin-slow">
-                            <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-500" />
-                            <circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-400" />
-                            <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-300" />
-                        </svg>
+                    <div className="space-y-6 mt-12">
+                        {consultingFeatures.map((feature, index) => (
+                            <div
+                                key={index}
+                                className="border border-green-500/30 
+                                         rounded-xl p-6 transition-all duration-300
+                                         hover:border-green-400/70 hover:bg-green-500/10 
+                                         hover:shadow-[0_0_25px_rgba(74,222,128,0.3)]"
+                            >
+                                <h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
+                                <p className="text-gray-300">{feature.description}</p>
+                            </div>
+                        ))}
                     </div>
                 </div>
+            </div>
 
-                {/* Main Image Container */}
-                <div className="relative z-10 flex flex-col items-center gap-8 p-8">
-                    {/* Consulting Logo */}
-                    <div
-                        className="w-32 h-32 bg-black/80 rounded-2xl p-6 backdrop-blur-xl
-                                  border border-green-500/30 shadow-[0_0_50px_rgba(74,222,128,0.3)]"
-                    >
-                        <img src="./images/Crypto-Consulting-NZ.png" className="w-full h-full text-green-500" />
-                    </div>
-
-                    {/* 3D Card Effect */}
-                    <div className="relative group">
-                        <div
-                            className="absolute -inset-1 bg-gradient-to-r from-green-500 to-green-300 
-                                      rounded-lg blur opacity-50 group-hover:opacity-75 transition duration-1000"
-                        ></div>
-                        <div
-                            className="relative bg-black/90 backdrop-blur-xl p-6 rounded-lg 
-                                      border border-green-500/30"
-                        >
-                            <p className="text-xl font-semibold text-green-400 mb-2">Crypto Consulting NZ</p>
-                            <p className="text-gray-300 text-sm">Professional Guidance for Your Crypto Journey</p>
-                        </div>
-                    </div>
+            {/* Background Image */}
+            <div className="absolute inset-0 w-full h-full -z-10">
+                <div className={`absolute bg-cover inset-0 bg-center transition-opacity duration-1000 ${isTransitioning ? 'opacity-0' : 'opacity-100'}`} style={{ backgroundImage: `url(${backgroundImages[currentImageIndex]})` }}>
+                    <div className="absolute inset-0 bg-gradient-to-r from-black via-black/60 to-transparent" />
+                    <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-transparent to-black/30" />
                 </div>
             </div>
-
-            <style>{`
-                @keyframes spin-slow {
-                    from { transform: translate(-50%, -50%) rotate(0deg); }
-                    to { transform: translate(-50%, -50%) rotate(360deg); }
-                }
-                .animate-spin-slow {
-                    animation: spin-slow 20s linear infinite;
-                }
-            `}</style>
         </div>
     )
 }
diff --git a/src/components/ExpoSection.tsx b/src/components/ExpoSection.tsx
index 03dccfb..6458dfb 100644
--- a/src/components/ExpoSection.tsx
+++ b/src/components/ExpoSection.tsx
@@ -28,17 +28,19 @@ const expoFeatures: ExpoFeature[] = [
 
 const ExpoSection: FC = () => {
     return (
-        <div className="relative w-full min-h-[90vh] flex flex-col lg:flex-row items-stretch">
+      <div className="relative w-full min-h-screen flex flex-col lg:flex-row items-stretch">
             <AnimatedGridPattern />
 
             {/* Visual Side (Now Left) */}
-            <div className="relative w-full lg:w-1/2 min-h-[50vh] lg:min-h-full flex items-center justify-center overflow-hidden">
+            <div className="relative w-full lg:w-3/5 min-h-[60vh] lg:min-h-full flex items-center justify-center overflow-hidden">
+              
                 {/* Gradient Overlay */}
                 <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 via-transparent to-black/50" />
 
                 {/* Hexagon Grid Background */}
                 <div className="absolute inset-0 opacity-20">
-                    {[...Array(6)].map((_, i) => (
+                    {[...Array(8)].map((_, i) => (
+
                         <div
                             key={i}
                             className="absolute"
@@ -48,7 +50,8 @@ const ExpoSection: FC = () => {
                                 transform: `rotate(${Math.random() * 360}deg)`
                             }}
                         >
-                            <svg width="100" height="100" viewBox="0 0 100 100">
+                            <svg width="120" height="120" viewBox="0 0 100 100">
+
                                 <path d="M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-500" />
                             </svg>
                         </div>
@@ -57,10 +60,10 @@ const ExpoSection: FC = () => {
 
                 {/* Floating Elements */}
                 <div className="absolute inset-0">
-                    {[...Array(3)].map((_, i) => (
+                    {[...Array(5)].map((_, i) => (
                         <div
                             key={i}
-                            className="absolute w-4 h-4 bg-green-500/30 rounded-full"
+                            className="absolute w-6 h-6 bg-green-500/30 rounded-full"
                             style={{
                                 top: `${Math.random() * 100}%`,
                                 left: `${Math.random() * 100}%`,
@@ -71,13 +74,13 @@ const ExpoSection: FC = () => {
                 </div>
 
                 {/* Main Visual Content */}
-                <div className="relative z-10 flex flex-col items-center gap-8 p-8">
+                <div className="relative z-10 flex flex-col items-center gap-8 p-8 w-full h-full">
                     {/* Expo Logo with Glow Effect */}
                     <div
                         className="absolute inset-0 bg-cover bg-center"
                         style={{
                             backgroundImage: 'url(./images/expo2024.jpg)',
-                            height: '70vh'
+                            height: '85vh'
                         }}
                     >
                         {/* Gradient overlay */}
@@ -85,7 +88,7 @@ const ExpoSection: FC = () => {
                     </div>
 
                     {/* 3D Card with Animated Border */}
-                    <div className="relative group perspective-1000">
+                    <div className="relative group perspective-1000 mt-16">
                         {/* Animated Background Glow */}
                         <div
                             className="absolute -inset-4 bg-gradient-to-r from-green-500 to-green-300 
@@ -95,7 +98,7 @@ const ExpoSection: FC = () => {
 
                         {/* Main Card */}
                         <div
-                            className="relative bg-black/90 backdrop-blur-xl p-8 rounded-lg 
+                            className="relative bg-black/60  p-12 rounded-lg 
                                       border border-green-500/30 
                                       transform transition-all duration-700
                                       group-hover:rotate-y-12 group-hover:scale-105
@@ -110,12 +113,12 @@ const ExpoSection: FC = () => {
 
                             {/* Corner Accents */}
                             <div
-                                className="absolute top-0 left-0 w-16 h-16 border-t-2 border-l-2 border-green-500/50 
+                                className="absolute top-0 left-0 w-20 h-20 border-t-2 border-l-2 border-green-500/50 
                                           rounded-tl-lg transform -translate-x-1 -translate-y-1
                                           group-hover:border-green-400 group-hover:scale-105 transition-all duration-700"
                             />
                             <div
-                                className="absolute bottom-0 right-0 w-16 h-16 border-b-2 border-r-2 border-green-500/50 
+                                className="absolute bottom-0 right-0 w-20 h-20 border-b-2 border-r-2 border-green-500/50 
                                           rounded-br-lg transform translate-x-1 translate-y-1
                                           group-hover:border-green-400 group-hover:scale-105 transition-all duration-700"
                             />
@@ -123,40 +126,49 @@ const ExpoSection: FC = () => {
                             {/* Content Container */}
                             <div className="relative z-10">
                                 {/* Title with Gradient */}
-                                <div className="mb-6">
+                                <div className="mb-8">
+                                    <p
+                                        className="alegreya text-3xl font-bold bg-white
+                                                bg-clip-text text-transparent transform 
+                                                group-hover:scale-105 transition-transform duration-700"
+                                    >
+                                        Decentralized NZ++
+                                    </p>
+                                </div>
+                                <div className="mb-8">
                                     <p
-                                        className="text-3xl font-bold bg-gradient-to-r from-green-400 to-green-300 
+                                        className="alegreya text-4xl font-bold bg-gradient-to-r from-green-400 to-green-300 
                                                 bg-clip-text text-transparent transform 
                                                 group-hover:scale-105 transition-transform duration-700"
                                     >
-                                        NZ Web3 Expo 2025
+                                        Crypto & Blockchain Expo 25'
                                     </p>
                                 </div>
 
                                 {/* Location & Date with Icons */}
-                                <div className="space-y-3">
+                                <div className="space-y-4">
                                     <div
-                                        className="flex items-center gap-3 text-gray-300 group-hover:text-gray-200 
+                                        className="flex items-center gap-4 text-gray-300 group-hover:text-gray-200 
                                                   transition-colors duration-700"
                                     >
-                                        <div className="w-5 h-5 text-green-400">
+                                        <div className="w-6 h-6 text-green-400">
                                             <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                             </svg>
                                         </div>
-                                        <p className="text-lg">Auckland Convention Centre</p>
+                                        <p className="text-xl">Auckland Convention Centre</p>
                                     </div>
                                     <div
-                                        className="flex items-center gap-3 text-gray-300 group-hover:text-gray-200 
+                                        className="flex items-center gap-4 text-gray-300 group-hover:text-gray-200 
                                                   transition-colors duration-700"
                                     >
-                                        <div className="w-5 h-5 text-green-400">
+                                        <div className="w-6 h-6 text-green-400">
                                             <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                             </svg>
                                         </div>
-                                        <p className="text-lg">March 15-17</p>
+                                        <p className="text-xl">Coming September 2025</p>
                                     </div>
                                 </div>
                             </div>
@@ -166,8 +178,8 @@ const ExpoSection: FC = () => {
             </div>
 
             {/* Content Side (Now Right) */}
-            <div className="relative z-10 w-full lg:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-20">
-                <div className="max-w-xl ml-auto">
+            <div className="relative z-10 w-full lg:w-2/5 flex flex-col justify-center px-6 lg:px-12 py-16">
+                <div className="max-w-xl mx-auto">
                     <div className="mb-12">
                         <h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
                             Join NZ's Premier
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cc5dad2..8310c44 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -39,7 +39,7 @@ const Footer: FC = () => {
                         </div>
                         <br />
                         <div className="w-1/2 h-auto flex items-center justify-center text-gray-600">
-                            <img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-10" />
+                            <img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-10 animate-shake" />
                         </div>
                     </div>
 
@@ -158,6 +158,17 @@ const Footer: FC = () => {
                     </div>
                 </div>
             </div>
+            <style>{`
+                @keyframes shake {
+                    0%, 50%, 100% { transform: rotate(0deg); }
+                    5%, 15% { transform: rotate(-5deg); }
+                    10%, 20% { transform: rotate(5deg); }
+                }
+                
+                .animate-shake {
+                    animation: shake 10s ease-in-out infinite;
+                }
+            `}</style>
         </footer>
     )
 }
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index 07f1d5c..f2db9fe 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -1,4 +1,5 @@
-import { FC } from 'react'
+import { FC, useState, useEffect } from 'react'
+import { Heart, Users, Sparkles } from 'lucide-react'
 
 interface GalleryItem {
     category: string
@@ -7,6 +8,50 @@ interface GalleryItem {
     image: string
 }
 
+interface AnimatedCounterProps {
+    end: number
+    duration?: number
+}
+
+interface StatBoxProps {
+    icon: React.ReactNode
+    label: string
+    value: number
+}
+
+const AnimatedCounter: FC<AnimatedCounterProps> = ({ end, duration = 2000 }) => {
+    const [count, setCount] = useState<number>(0)
+
+    useEffect(() => {
+        let startTimestamp: number | null = null
+        const step = (timestamp: number) => {
+            if (!startTimestamp) startTimestamp = timestamp
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1)
+
+            // Easing function for smooth deceleration
+            const easeOutQuart = (x: number): number => 1 - Math.pow(1 - x, 4)
+            const easedProgress = easeOutQuart(progress)
+
+            setCount(Math.round(easedProgress * end))
+
+            if (progress < 1) {
+                window.requestAnimationFrame(step)
+            }
+        }
+        window.requestAnimationFrame(step)
+    }, [end, duration])
+
+    return <span className="text-2xl font-bold text-green-400 tabular-nums">{count.toLocaleString()}</span>
+}
+
+const StatBox: FC<StatBoxProps> = ({ icon, label, value }) => (
+    <div className="flex flex-col items-center justify-center px-2 py-4 bg-black/30 rounded-lg border border-green-400/30 text-center">
+        {icon}
+        <AnimatedCounter end={value} />
+        <span className="text-xs text-green-100 mt-1 w-full text-center whitespace-normal leading-tight">{label}</span>
+    </div>
+)
+
 const Gallery: FC = () => {
     const items: GalleryItem[] = [
         {
@@ -56,38 +101,84 @@ const Gallery: FC = () => {
                     <p className="text-green-100 text-center text-sm md:text-base mb-6">Discover the dynamic evolution of Aotearoa's cryptocurrency, blockchain, and Web3 ecosystem, blending social impact, industry growth, investment opportunities, and futuristic innovation.</p>
                 </div>
 
-                {/* Gallery Grid */}
-                <div className="relative max-w-4xl mx-auto">
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
-                        {items.map((item, index) => (
-                            <div
-                                key={index}
-                                className="relative group bg-white/10 backdrop-blur-sm rounded-lg overflow-hidden
-                                         border border-green-400/30 hover:border-green-400/70 
-                                         transition-all duration-300 hover:shadow-[0_0_25px_rgba(74,222,128,0.4)]"
-                                data-category={item.category}
-                            >
-                                <div className="h-56 w-full">
-                                    <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
-
-                                    {/* Dark overlay for better text readability */}
-                                    <div className="absolute inset-0 bg-black opacity-20" />
-
-                                    {/* Hover overlay */}
-                                    <div
-                                        className="absolute inset-0 bg-gradient-to-br from-green-500 to-green-600 
-                                                  opacity-0 group-hover:opacity-90 transition-opacity duration-300 
-                                                  flex flex-col items-center justify-center p-4"
-                                    >
-                                        <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
-                                            <span className="block text-green-100 text-xs font-medium mb-1">{item.category}</span>
-                                            <h3 className="text-white text-lg font-bold mb-1">{item.title}</h3>
-                                            <p className="text-green-50 text-xs">{item.description}</p>
+                {/* Main Content Container */}
+                <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-8">
+                    {/* Gallery Grid */}
+                    <div className="lg:w-2/3">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            {items.map((item, index) => (
+                                <div
+                                    key={index}
+                                    className="relative group bg-white/10 backdrop-blur-sm rounded-lg overflow-hidden
+                                             border border-green-400/30 hover:border-green-400/70 
+                                             transition-all duration-300 hover:shadow-[0_0_25px_rgba(74,222,128,0.4)]"
+                                    data-category={item.category}
+                                >
+                                    <div className="h-56 w-full">
+                                        <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
+
+                                        {/* Dark overlay for better text readability */}
+                                        <div className="absolute inset-0 bg-black opacity-20" />
+
+                                        {/* Hover overlay */}
+                                        <div
+                                            className="absolute inset-0 bg-gradient-to-br from-green-500 to-green-600 
+                                                      opacity-0 group-hover:opacity-90 transition-opacity duration-300 
+                                                      flex flex-col items-center justify-center p-4"
+                                        >
+                                            <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                                                <span className="block text-green-100 text-xs font-medium mb-1">{item.category}</span>
+                                                <h3 className="text-white text-lg font-bold mb-1">{item.title}</h3>
+                                                <p className="text-green-50 text-xs">{item.description}</p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Action Buttons and Stats Container */}
+                    <div className="lg:w-1/3 flex flex-col justify-start gap-6 lg:pl-8">
+                        {/* Support Us Button */}
+                        <button className="group relative w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500 to-green-600 p-[1px] transition-all duration-300 hover:from-green-400 hover:to-green-500 hover:shadow-[0_0_35px_rgba(74,222,128,0.5)]">
+                            <div className="relative bg-black/90 backdrop-blur-xl px-8 py-4 rounded-lg transition-all duration-300 group-hover:bg-black/80">
+                                <div className="flex items-center justify-center gap-3">
+                                    <Heart className="w-5 h-5 text-green-400" />
+                                    <span className="text-white font-semibold">Support Us</span>
+                                </div>
+                                <div className="absolute inset-0 bg-gradient-to-r from-green-400/20 via-green-300/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                            </div>
+                        </button>
+
+                        {/* Start Meetup Button */}
+                        <button className="group relative w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500 to-green-600 p-[1px] transition-all duration-300 hover:from-green-400 hover:to-green-500 hover:shadow-[0_0_35px_rgba(74,222,128,0.5)]">
+                            <div className="relative bg-black/90 backdrop-blur-xl px-8 py-4 rounded-lg transition-all duration-300 group-hover:bg-black/80">
+                                <div className="flex items-center justify-center gap-3">
+                                    <Sparkles className="w-5 h-5 text-green-400" />
+                                    <span className="text-white font-semibold">Start Your Own Meetup</span>
+                                </div>
+                                <div className="absolute inset-0 bg-gradient-to-r from-green-400/20 via-green-300/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                            </div>
+                        </button>
+
+                        {/* Join Community Button */}
+                        <button className="group relative w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500 to-green-600 p-[1px] transition-all duration-300 hover:from-green-400 hover:to-green-500 hover:shadow-[0_0_35px_rgba(74,222,128,0.5)]">
+                            <div className="relative bg-black/90 backdrop-blur-xl px-8 py-4 rounded-lg transition-all duration-300 group-hover:bg-black/80">
+                                <div className="flex items-center justify-center gap-3">
+                                    <Users className="w-5 h-5 text-green-400" />
+                                    <span className="text-white font-semibold">Join Community</span>
+                                </div>
+                                <div className="absolute inset-0 bg-gradient-to-r from-green-400/20 via-green-300/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                             </div>
-                        ))}
+                        </button>
+
+                        {/* Stats Container */}
+                        <div className="mt-8 grid grid-cols-3 gap-4">
+                            <StatBox icon={<Users className="w-6 h-6 text-green-400 mb-2" />} label="Total Attendees" value={1234} />
+                            <StatBox icon={<Sparkles className="w-6 h-6 text-green-400 mb-2" />} label="Total Events" value={126} />
+                            <StatBox icon={<Heart className="w-6 h-6 text-green-400 mb-2" />} label="Sponsorships" value={11} />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 298fdef..e228a5c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -65,7 +65,7 @@ const Navbar: FC = () => {
                 <div className="flex justify-between items-center h-16">
                     {/* Logo */}
                     <div className="w-16 md:w-20 lg:w-22 pr-2 md:pr-4 h-auto flex items-center justify-center text-gray-600">
-                        <img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-2 md:ml-2 lg:ml-4" />
+                        <img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-2 md:ml-2 lg:ml-4 animate-shake" />
                     </div>
                     <div className="flex-shrink-0">
                         <h1 className="alegreya font-bold text-xl sm:text-2xl md:text-3xl lg:text-4xl">
@@ -194,17 +194,28 @@ const Navbar: FC = () => {
                         className="block px-4 py-2 rounded-lg text-gray-300 hover:text-white 
                                        hover:bg-green-500/10 transition-colors text-sm sm:text-base"
                     >
-                        About us
+                        About Us
                     </a>
                     <a
                         href={CNZ_URL + 'get-help'}
                         className="block px-4 py-2 rounded-lg text-gray-300 hover:text-white 
                                        hover:bg-green-500/10 transition-colors text-sm sm:text-base"
                     >
-                        Get help
+                        Get Help
                     </a>
                 </div>
             </div>
+            <style>{`
+             @keyframes shake {
+                    0%, 50%, 100% { transform: rotate(0deg); }
+                    5%, 15% { transform: rotate(-5deg); }
+                    10%, 20% { transform: rotate(5deg); }
+                }
+                
+                .animate-shake {
+                    animation: shake 5s ease-in-out infinite;
+                }
+            `}</style>
         </nav>
     )
 }