diff --git a/src/components/about/Timeline.tsx b/src/components/about/Timeline.tsx
index 7a990f0d..c60390e7 100644
--- a/src/components/about/Timeline.tsx
+++ b/src/components/about/Timeline.tsx
@@ -12,26 +12,54 @@ const releases = [
 export function Timeline() {
   return (
     <div className="relative">
-      <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />
-      
+      {/* Vertical timeline line */}
+      <div className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded" aria-hidden="true" />
+
+      {/* Timeline items */}
       {releases.map((release, index) => (
         <motion.div
           key={release.version}
           initial={{ opacity: 0, x: -20 }}
           whileInView={{ opacity: 1, x: 0 }}
-          transition={{ delay: index * 0.2, duration: 0.8 }}
+          viewport={{ once: true }}
+          transition={{ delay: index * 0.15, duration: 0.7 }}
           className="relative pl-12 pb-12"
         >
-          <div className="absolute left-0 top-0 p-2 bg-cornflower-blue/70 rounded-full border-2 border-white shadow-lg">
+          {/* Timeline point */}
+          <div
+            className="absolute left-0 top-0 p-2 bg-blue-600 rounded-full border-2 border-white shadow-lg"
+            role="img"
+            aria-label={`Release date: ${release.date}`}
+          >
             <Calendar className="h-5 w-5 text-white" />
           </div>
-          
-          <div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out">
-            <h3 className="text-xl font-semibold text-gray-900 mb-2">
+
+          {/* Timeline content */}
+          <div
+            className="bg-white/90 backdrop-blur p-6 rounded-lg shadow-md hover:shadow-lg transition-transform transform hover:-translate-y-1 duration-300 ease-in-out"
+            tabIndex={0}
+            role="group"
+            aria-labelledby={`release-title-${release.version}`}
+            aria-describedby={`release-desc-${release.version}`}
+          >
+            <h3
+              id={`release-title-${release.version}`}
+              className="text-xl font-semibold text-gray-900 mb-2"
+            >
               Snigdha OS {release.version}
             </h3>
-            <time className="text-sm text-gray-500 font-light">{release.date}</time>
-            <p className="mt-2 text-gray-700 text-lg leading-relaxed">{release.description}</p>
+            <time
+              id={`release-date-${release.version}`}
+              className="text-sm text-gray-500 font-light"
+            >
+              {release.date}
+            </time>
+            <p
+              id={`release-desc-${release.version}`}
+              className="mt-3 text-gray-700 text-lg leading-relaxed"
+            >
+              {release.description}
+            </p>
           </div>
         </motion.div>
       ))}