diff --git a/src/assets/achievementimg.jpg b/src/assets/achievementimg.jpg
new file mode 100644
index 0000000..1d5d458
Binary files /dev/null and b/src/assets/achievementimg.jpg differ
diff --git a/src/components/AchievementCard.jsx b/src/components/AchievementCard.jsx
index 665c1ae..82734e0 100644
--- a/src/components/AchievementCard.jsx
+++ b/src/components/AchievementCard.jsx
@@ -1,50 +1,30 @@
 import { Calendar } from "lucide-react";
 
-const AchievementCard = ({
-  title,
-  description,
-  image,
-  date,
-  isLeft,
-  index,
-}) => {
+const AchievementCard = ({ title, description, year, isLeft, index }) => {
   return (
     <div
       className={`flex items-center w-full mb-16 ${isLeft ? "justify-start" : "justify-end"}`}
+      data-index={index}
       style={{ animationDelay: `${index * 200}ms` }}
     >
       <div
         className={`
-          w-full max-w-md bg-gradient-card rounded-2xl shadow-card hover:shadow-card-hover 
+          w-full max-w-md rounded-2xl shadow-lg hover:shadow-xl border border-gray-200
           transition-all duration-500 hover:scale-105 group cursor-pointer
-          ${isLeft ? "animate-slide-in-left" : "animate-slide-in-right"}
+          bg-white hover:border-blue-300
         `}
       >
-        {/* Image */}
-        <div className="relative overflow-hidden rounded-t-2xl">
-          <img
-            src={image}
-            alt={title}
-            className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          <div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        </div>
-
-        {/* Content */}
         <div className="p-6">
-          <div className="flex items-center text-muted text-sm mb-3">
+          <div className="flex items-center text-gray-500 text-sm mb-3">
             <Calendar className="h-4 w-4 mr-2" />
-            <span className="font-medium">{date}</span>
+            <span className="font-medium">{year}</span>
           </div>
-
-          <h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors duration-300">
+          <h3 className="text-xl font-bold mb-3 group-hover:texT-[#0B2044] transition-colors duration-300">
             {title}
           </h3>
+          <p className="text-gray-700 leading-relaxed">{description}</p>
 
-          <p className="text-muted ">{description}</p>
-
-          {/* Decorative element */}
-          <div className="mt-4 h-1 w-16 bg-gradient-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div className="mt-4 h-1 w-16 bg-blue-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
         </div>
       </div>
     </div>
diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 53f76cd..8967e85 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -5,9 +5,9 @@ export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <div className="px-4 md:px-12 py-8 max-w-screen-xl mx-auto">
-      <div className="md:mb-48 mb-12">
-        <h2 className="text-3xl font-bold text-blue-900 mb-4">
+    <div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
+      <div style={{ marginBottom: "12rem" }}>
+        <h2 className="text-3xl font-bold text-[#0B2044] mb-4">
           Our Achievements
         </h2>
         <p className="text-gray-700 mb-6 max-w-3xl">
@@ -20,7 +20,7 @@ export default function Achievements() {
         </p>
         <button
           className="bg-white text-blue-800 border border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12"
-          onClick={() => navigate("/achievementpage")}
+          onClick={() => navigate("/achievements")}
         >
           View All Achievements &gt;
         </button>
@@ -31,25 +31,38 @@ export default function Achievements() {
         <div className="md:hidden absolute left-2 top-0 h-full w-1 bg-black z-0"></div>
 
         <div className="flex flex-col md:flex-row items-start md:items-center justify-between relative z-10 md:mb-60">
-          {achievementsData.map((item, index) => (
-            <div
-              key={index}
-              className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
-            >
-              <div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>
-
+          {achievementsData
+            .filter((item) => item.id <= 5)
+            .map((item, index) => (
               <div
-                className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
-                  index % 2 === 0
-                    ? "md:top-1/2 md:translate-y-6 self-start"
-                    : "md:bottom-1/2 md:-translate-y-6 self-end"
-                }`}
+                key={index}
+                className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
               >
-                <h3 className="font-bold text-lg text-black">{item.title}</h3>
-                <p className="text-sm text-gray-600 mt-2">{item.description}</p>
+                <div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>
+
+                <div
+                  className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
+                    index % 2 === 0
+                      ? "md:top-1/2 md:translate-y-6 self-start"
+                      : "md:bottom-1/2 md:-translate-y-6 self-end"
+                  }`}
+                >
+                  <h3 className="font-bold text-lg text-black">{item.year}</h3>
+                  <h4
+                    className="text-sm text-black decoration-4"
+                    style={{ display: "inline" }}
+                  >
+                    {item.title}:{" "}
+                  </h4>
+                  <p
+                    className="text-sm text-gray-700"
+                    style={{ display: "inline" }}
+                  >
+                    {item.description}
+                  </p>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
         </div>
       </div>
     </div>
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 5f30814..39877a0 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -28,98 +28,79 @@ const Timeline = () => {
   }, []);
 
   return (
-    <section
-      id="achievements"
-      className="bg-gradient-to-br from-background to-muted/30"
-    >
+    <section id="achievements" className=" min-h-screen py-12">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div style={{ marginBottom: "7rem" }}>
-          <h2 className="text-3xl text-center font-bold text-blue-900 mb-4">
-            Our Achievements
-          </h2>
-          <p className="text-gray-700 text-center mb-6 max-w-3xl">
-            ASME NIT Rourkela excels in fostering innovation and leadership
-            through workshops, competitions, and expert lectures. Recognized for
-            achievements in events like the Student Design Challenge and HPVC,
-            the chapter addresses real-world problems with engineering
-            creativity. Their STEM outreach initiatives further enhance their
-            impact, solidifying their reputation for excellence in mechanical
-            engineering.
-          </p>
-        </div>
-        {/* Timeline */}
         <div className="relative" ref={timelineRef}>
           <div className="grid grid-cols-9 gap-2">
-            {achievementsData.map((achievement, index) => (
-              <div key={achievement.id} className="contents">
-                {/* Left card */}
-                <div
-                  className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
-                >
-                  {index % 2 === 0 && (
-                    <div className="w-full max-w-md">
-                      <AchievementCard
-                        title={achievement.title}
-                        description={achievement.description}
-                        image={achievement.image}
-                        date={achievement.date}
-                        isLeft={true}
-                        index={index}
-                      />
-                    </div>
-                  )}
-                </div>
-                {/* Timeline line and dot */}
-                <div className="col-span-1 flex flex-col items-center relative">
-                  {/* Vertical line */}
-                  <div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2  z-0"></div>
+            {achievementsData
+              .sort((a, b) => parseInt(a.year) - parseInt(b.year))
+              .map((achievement, index) => (
+                <div key={achievement.id} className="contents">
+                  {/* Left card */}
+                  <div
+                    className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
+                  >
+                    {index % 2 === 0 && (
+                      <div className="w-full max-w-md">
+                        <AchievementCard
+                          title={achievement.title}
+                          description={achievement.description}
+                          year={achievement.year}
+                          isLeft={true}
+                          index={index}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Timeline line and dot */}
+                  <div className="col-span-1 hidden md:flex flex-col items-center relative">
+                    {/* Vertical line */}
+                    <div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>
 
-                  {/* Timeline dot */}
-                  <div className="z-10">
-                    <div
-                      className={`w-4 h-4 rounded-full  border-background  bg-yellow-500 border-2 border-white transition-all duration-500 
-                        ${
+                    {/* Timeline dot */}
+                    <div className="z-10 relative">
+                      <div
+                        className={`w-4 h-4 rounded-full border-2 border-white transition-all duration-700 ${
                           visibleDots.has(index)
-                            ? "bg-timeline-dot-active shadow-glow animate-glow-pulse"
-                            : "bg-timeline-dot"
-                        }
-                      `}
-                    ></div>
+                            ? "bg-[#0B2044] shadow-lg shadow-blue-900/50 scale-125"
+                            : "bg-gray-400"
+                        }`}
+                      ></div>
+                    </div>
                   </div>
-                </div>
-                {/* Right card */}
-                <div
-                  className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
-                >
-                  {index % 2 !== 0 && (
+
+                  {/* Right card */}
+                  <div
+                    className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
+                  >
+                    {index % 2 !== 0 && (
+                      <div className="w-full max-w-md">
+                        <AchievementCard
+                          title={achievement.title}
+                          description={achievement.description}
+                          year={achievement.year}
+                          isLeft={false}
+                          index={index}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Mobile view */}
+                  <div className="col-span-9 flex justify-center md:hidden">
                     <div className="w-full max-w-md">
                       <AchievementCard
                         title={achievement.title}
                         description={achievement.description}
-                        image={achievement.image}
-                        date={achievement.date}
-                        isLeft={false}
+                        year={achievement.year}
+                        isLeft={true}
                         index={index}
                       />
                     </div>
-                  )}
-                </div>
-                {/* Mobile view: single column, card below dot/line */}
-                <div className="col-span-9 flex justify-center md:hidden">
-                  <div className="w-full max-w-md">
-                    <AchievementCard
-                      title={achievement.title}
-                      description={achievement.description}
-                      image={achievement.image}
-                      date={achievement.date}
-                      isLeft={true}
-                      index={index}
-                    />
                   </div>
                 </div>
-              </div>
-            ))}
+              ))}
           </div>
         </div>
       </div>
diff --git a/src/config/achievement.js b/src/config/achievement.js
index 99d69f0..a7111e0 100644
--- a/src/config/achievement.js
+++ b/src/config/achievement.js
@@ -1,48 +1,72 @@
 const achievementsData = [
   {
     id: 1,
-    title: "Name",
+    title: "HPVC",
     description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image:
-      "https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
-    date: "December 2023",
+      "Secured 3rd Position Globally in Critical Design Review and 1st Position among Indian Colleges.",
+    year: "2021",
   },
   {
     id: 2,
-    title: "Name",
+    title: "HPVC",
     description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image:
-      "https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
-    date: "December 2023",
+      "2nd Position Globally in Critical Design and 3rd Position in Innovation- BlueStreak 9.0.",
+    year: "2022",
   },
   {
     id: 3,
-    title: "Name",
+    title: "IAM-3D",
     description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image:
-      "https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
-    date: "December 2023",
+      "Secured 2nd Position Overall, Team BlueStreak 3.0 (FPV Drone Project) and 9th Place Globally in 2022.",
+    year: "2023",
   },
   {
     id: 4,
-    title: "Name",
+    title: "ASME XRC 2024",
     description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image:
-      "https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
-    date: "December 2023",
+      "Team BlueBirds Secured 1st Position in Extended Reality Challenge For Sustainable innovations in ocean cleanup.",
+    year: "2024",
   },
   {
     id: 5,
-    title: "Name",
+    title: "HPVC",
     description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-    image:
-      "https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
-    date: "December 2023",
+      "Team BlueStreak 11.0 Secured 3rd Position in Design Presentation, The Best Innovation Award, 3rd Position in Drag Race and 3rd Position Overall in e-HPVC.",
+    year: "2025",
+  },
+  {
+    id: 6,
+    title: "HPVC",
+    description:
+      "Secured 9th in Endurance and 13th Overall in E-Fest Asia Pacific",
+    year: "2019",
+  },
+  {
+    id: 7,
+    title: "HPVC",
+    description:
+      "Secured 20th in men's endurance race and 24th in female drag race out of 43 teams, HPVC ASIA PACIFIC.",
+    year: "2017",
+  },
+  {
+    id: 8,
+    title: "HPVC",
+    description:
+      "Secured 2nd Position in design event and 9th in overall, HPVC ASIA PACIFIC VIT VELLORE.",
+    year: "2016",
+  },
+  {
+    id: 9,
+    title: "HPVC",
+    description: "Highest Innovation Score, HPVC India at DTU.",
+    year: "2015",
+  },
+  {
+    id: 10,
+    title: "HPVC",
+    description:
+      "First International Participation at HPVC East, University of Central Florida and Highest marks in Analysis Section, HPV India at IIT Delhi.",
+    year: "2014",
   },
 ];
 
diff --git a/src/pages/achievements/AchievementPage.jsx b/src/pages/achievements/AchievementPage.jsx
index ba4a9df..9c4fc70 100644
--- a/src/pages/achievements/AchievementPage.jsx
+++ b/src/pages/achievements/AchievementPage.jsx
@@ -1,9 +1,27 @@
 import Timeline from "../../components/Timeline";
+import achievementImg from "../../assets/achievementimg.jpg";
 
 const AchievementPage = () => {
   return (
-    <div className="min-h-screen bg-background flex flex-col items-center py-12">
-      <div className="w-full max-w-4xl">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50">
+      <div className="relative overflow-hidden h-screen w-screen">
+        <div
+          className="absolute inset-0  bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: `url(${achievementImg})`,
+          }}
+        ></div>
+
+        <div className="relative z-10 text-center h-full flex flex-col justify-center">
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight">
+              Our Achievements
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative">
         <Timeline />
       </div>
     </div>