diff --git a/src/app/version/page.tsx b/src/app/version/page.tsx
index 5306496..4774e62 100644
--- a/src/app/version/page.tsx
+++ b/src/app/version/page.tsx
@@ -1,78 +1,16 @@
 "use client";
-import React, { useEffect, useRef, useState } from 'react';
-import VersionCard from './version';
-import { versionData } from './versionData';
+import React from 'react';
 import Header from '@/components/shared/Header';
 import Footer from '@/components/shared/Footer';
 import ScrollToTopButton from '@/components/shared/ScrollUp';
+import Version from '@/components/shared/Version';
 
-const gradientClasses = [
-  'custom-gradient-3',
-  'custom-gradient-4',
-  'custom-gradient-1',
-  'custom-gradient-2',
-];
-
-const Timeline: React.FC = () => {
-  const [activeIndex, setActiveIndex] = useState<number>(-1);
-  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const index = Number(entry.target.getAttribute('data-index'));
-          if (entry.isIntersecting) {
-            setActiveIndex(index);
-          } else if (activeIndex === index) {
-            setActiveIndex(-1);
-          }
-        });
-      },
-      { threshold: 0.5 }
-    );
-
-    cardRefs.current.forEach((ref) => {
-      if (ref) {
-        observer.observe(ref);
-      }
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [activeIndex]);
-
+const Timeline = () => {
   return (
     <>
       <Header />
-      <div className="relative w-full h-48 bg-gradient-to-r from-orange-400 via-neon-500 to-red-500 md:h-64">
-        <div className="absolute inset-0 flex items-center justify-center text-white">
-          <h1 className="text-4xl font-bold md:text-5xl">What&apos;s new?</h1>
-        </div>
-      </div>
-      <div className="container mx-auto p-4">
-        <div className="relative">
-          {versionData.map((version, index) => (
-            <div
-              key={index}
-              className={`relative pb-24 flex flex-row items-center`}
-              //@ts-ignore
-              ref={(el) => (cardRefs.current[index] = el)}
-              data-index={index}
-            >
-              <div className="w-full flex flex-col ml-10">
-                <div className={`vertical-connector ${index !== versionData.length - 1 ? 'h-full' : ''} bg-gray-300`}></div>
-                <VersionCard
-                  {...version}
-                  className={gradientClasses[index % gradientClasses.length]}
-                  isActive={activeIndex === index}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <h1 className="text-4xl font-bold md:text-6xl bg-clip-text text-transparent bg-gradient-to-b from-zinc-50 to-orange-500 bg-opacity-50 text-center p-10">What&apos;s new?</h1>
+      <Version />
       <Footer />
       <ScrollToTopButton/>
     </>
diff --git a/src/app/version/version.tsx b/src/app/version/version.tsx
deleted file mode 100644
index 89fa542..0000000
--- a/src/app/version/version.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-
-interface VersionCardProps {
-  version: string;
-  date: string;
-  changes: string[];
-  bugfixes: string[];
-  className?: string;
-  isActive: boolean; // New prop to indicate active state
-}
-
-const VersionCard: React.FC<VersionCardProps> = ({ version, date, changes, bugfixes, className, isActive }) => {
-  return (
-    <div className="flex flex-col items-start space-x-4 md:flex-row w-full">
-      <div className="w-full text-right mb-4 md:w-1/4 md:mb-0">
-        <p className={`text-gray-500 ${isActive ? 'text-black dark:text-white' : ''}`}>{date}</p>
-      </div>
-      <div className="relative w-full md:w-4/4">
-        <div className="absolute left-0 w-0.5 h-full bg-gray-200 md:h-[calc(100%+2rem)] md:top-[-1rem]" />
-        <Card className={`relative ml-10 overflow-hidden bg-white px-10 shadow-md rounded-3xl p-6 my-6 custom-card w-full ${className} ${isActive ? 'active' : ''} md:max-w-full lg:max-full`}>
-          <div className="absolute inset-0 h-full bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 opacity-20" />
-          <CardHeader>
-            <div className='flex justify-between'>
-              <h1 className="text-xl font-semibold text-gray-700">Version {version}</h1>
-              <h1 className="text-4xl font-semibold text-gray-700">{version}</h1>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              <h3 className="text-lg font-semibold text-gray-700">Improvements & Changes</h3>
-              <ul className="list-disc list-inside text-gray-700">
-                {changes.map((change, index) => (
-                  <li key={index}>{change}</li>
-                ))}
-              </ul>
-              <h3 className="text-lg font-semibold text-gray-700">Bugfixes</h3>
-              <ul className="list-disc list-inside text-gray-700">
-                {bugfixes.map((bug, index) => (
-                  <li key={index}>{bug}</li>
-                ))}
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default VersionCard;
diff --git a/src/app/version/versionData.ts b/src/app/version/versionData.ts
deleted file mode 100644
index 7ef1934..0000000
--- a/src/app/version/versionData.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const versionData = [
-  {
-    version: '1.0',
-    date: '2024-01-01',
-    changes: ['Initial release', 'Added feature A', 'Improved performance'],
-    bugfixes: ['Fixed bug X', 'Resolved issue Y'],
-  },
-  {
-    version: '1.1',
-    date: '2024-02-01',
-    changes: ['Added feature B', 'Improved UI'],
-    bugfixes: ['Fixed bug Z', 'Resolved issue W'],
-  },{
-    version: '1.1',
-    date: '2024-02-01',
-    changes: ['Added feature B', 'Improved UI'],
-    bugfixes: ['Fixed bug Z', 'Resolved issue W'],
-  },{
-    version: '1.1',
-    date: '2024-02-01',
-    changes: ['Added feature B', 'Improved UI'],
-    bugfixes: ['Fixed bug Z', 'Resolved issue W'],
-  },
-  // Add more versions as needed
-];
diff --git a/src/components/shared/Version.tsx b/src/components/shared/Version.tsx
new file mode 100644
index 0000000..44122e4
--- /dev/null
+++ b/src/components/shared/Version.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+const Version = () => {
+  return (
+    <div className="m-6 flex flex-col justify-center items-center mb-24">
+
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.0</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Dec, 2023</time>
+            <div className="text-xl font-bold text-foreground/75">Initialization of the project</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+    
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.1</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Jan, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+    
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.2</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Mar, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+    
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.3</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">May, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+</div>
+  )
+}
+
+export default Version
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 13dc387..02114a2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -77,6 +77,9 @@ const config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "scroll-vertical": "scroll-vertical 20s linear infinite",
       },
+      fontFamily: {
+        caveat: ['Caveat', 'cursive'],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],