diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
index 799ac15..018beda 100644
--- a/src/app/timeline/page.tsx
+++ b/src/app/timeline/page.tsx
@@ -1,47 +1,18 @@
 "use client";
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
-import { useState } from "react";
-import { ChevronLeft, ChevronRight, Calendar } from "lucide-react";
 
-interface TimelineEvent {
-  id: string;
-  date: string;
-  title: string;
-  description: string;
-  metrics: string[];
-}
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
-const TimelinePage = () => {
-  const [selectedDate, setSelectedDate] = useState("2024-01");
-
-  const timelineEvents: TimelineEvent[] = [
-    {
-      id: "1",      date: "2024-01",      title: "January Launch",      description: "Platform launched with core features",      metrics: ["50K users", "99.5% uptime", "12 features"],
-    },
-    {
-      id: "2",      date: "2024-02",      title: "First Milestone",      description: "Reached 100K active users",      metrics: ["100K users", "99.7% uptime", "15 features"],
-    },
-    {
-      id: "3",      date: "2024-03",      title: "Feature Expansion",      description: "Added advanced analytics and reporting",      metrics: ["200K users", "99.8% uptime", "22 features"],
-    },
-    {
-      id: "4",      date: "2024-04",      title: "Enterprise Release",      description: "Enterprise tier with dedicated support",      metrics: ["350K users", "99.9% uptime", "28 features"],
-    },
-    {
-      id: "5",      date: "2024-05",      title: "Global Expansion",      description: "Launched in 15 new countries",      metrics: ["500K users", "99.95% uptime", "35 features"],
-    },
-    {
-      id: "6",      date: "2024-06",      title: "AI Integration",      description: "Introduced AI-powered insights",      metrics: ["750K users", "99.95% uptime", "42 features"],
-    },
-  ];
-
-  const selectedEvent = timelineEvents.find((e) => e.date === selectedDate);
+const testCarImages = [
+  'https://images.unsplash.com/photo-1552519507-da3a142c6e3d?w=800&q=80',
+  'https://images.unsplash.com/photo-1494976866105-d32a481b81b4?w=800&q=80',
+  'https://images.unsplash.com/photo-1527524330007-3ea4e06ed667?w=800&q=80',
+];
 
+export default function TimelinePage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
@@ -50,129 +21,26 @@ const TimelinePage = () => {
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="normal"
     >
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Compare", id: "/compare" },
-          { name: "Timeline", id: "/timeline" },
-          { name: "Testimonials", id: "#testimonials" },
-          { name: "Contact", id: "#contact" },
-        ]}
-        brandName="InsightHub"
-        button={{ text: "Get Started", href: "https://example.com" }}
-      />
-
-      <div className="pt-32">
-        <HeroSplitTestimonial
-          background={{ variant: "glowing-orb" }}
-          title="Interactive Timeline Explorer"
-          description="Explore historical data, track trends, and visualize growth metrics across time periods with interactive controls."
-          tag="Timeline Tool"
-          imagePosition="right"
-          imageSrc="https://images.unsplash.com/photo-1460925895917-afdab655c891?w=800&q=80"
-          imageAlt="Timeline visualization"
-          testimonials={[
-            {
-              name: "Marcus Johnson",              handle: "Director, Analytics Pro",              testimonial: "The timeline explorer is perfect for analyzing historical trends and patterns.",              rating: 5,
-              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"},
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Browse", id: "browse" },
+            { name: "Compare", id: "compare" },
           ]}
-          buttons={[
-            { text: "View Full History", onClick: () => alert("Full history view coming soon") },
-            { text: "Back to Home", href: "/" },
-          ]}
-          mediaAnimation="slide-up"
-          buttonAnimation="slide-up"
+          brandName="Webild"
+          button={{ text: "Search", href: "search" }}
         />
       </div>
 
-      <div className="my-20 px-4">
-        <div className="max-w-4xl mx-auto">
-          <div className="mb-12">
-            <h2 className="text-3xl font-bold mb-8">Platform Growth Timeline</h2>
-
-            {/* Timeline Slider */}
-            <div className="mb-8">
-              <div className="flex items-center gap-4 mb-6">
-                <button className="p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white">
-                  <ChevronLeft size={20} />
-                </button>
-                <div className="flex-1 bg-gray-700 h-2 rounded-full relative">
-                  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-blue-500 rounded-full cursor-pointer"></div>
-                </div>
-                <button className="p-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white">
-                  <ChevronRight size={20} />
-                </button>
-              </div>
-
-              {/* Timeline months */}
-              <div className="flex justify-between mb-8 text-sm text-gray-400">
-                {timelineEvents.map((event) => (
-                  <button
-                    key={event.id}
-                    onClick={() => setSelectedDate(event.date)}
-                    className={`px-3 py-1 rounded ${
-                      selectedDate === event.date
-                        ? "bg-blue-600 text-white"
-                        : "hover:bg-gray-700"
-                    }`}
-                  >
-                    {event.date}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Selected Event Details */}
-            {selectedEvent && (
-              <div className="p-8 rounded-lg bg-gradient-to-r from-blue-900 to-blue-800 border border-blue-700">
-                <div className="flex items-start gap-4 mb-4">
-                  <Calendar className="text-blue-300 mt-1" size={24} />
-                  <div className="flex-1">
-                    <h3 className="text-2xl font-bold mb-2">{selectedEvent.title}</h3>
-                    <p className="text-gray-300 mb-4">{selectedEvent.description}</p>
-                  </div>
-                  <div className="text-right text-2xl font-bold text-blue-300">{selectedEvent.date}</div>
-                </div>
-
-                <div className="grid grid-cols-3 gap-4 pt-4 border-t border-blue-700">
-                  {selectedEvent.metrics.map((metric, idx) => (
-                    <div key={idx} className="text-center">
-                      <p className="text-blue-200 text-sm">{metric}</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Full Timeline View */}
-          <div className="space-y-4">
-            {timelineEvents.map((event, idx) => (
-              <div
-                key={event.id}
-                className={`p-4 rounded-lg border transition-all ${
-                  selectedDate === event.date
-                    ? "bg-blue-900 bg-opacity-30 border-blue-500"
-                    : "bg-gray-900 bg-opacity-30 border-gray-700 hover:border-gray-600"
-                } cursor-pointer`}
-                onClick={() => setSelectedDate(event.date)}
-              >
-                <div className="flex items-center gap-4">
-                  <div className="text-lg font-bold text-blue-400 min-w-fit">{event.date}</div>
-                  <div className="flex-1">
-                    <h4 className="font-semibold">{event.title}</h4>
-                    <p className="text-sm text-gray-400">{event.description}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Vehicle Timeline</h1>
+          <p className="text-lg text-gray-600">Historical vehicle data and model evolution</p>
         </div>
       </div>
     </ThemeProvider>
   );
-};
-
-export default TimelinePage;
+}