diff --git a/package-lock.json b/package-lock.json
index 1bc508ef8..cb4bdf3d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "react-chrono": "^2.6.1",
         "react-d3-cloud": "^1.0.6",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.5.1",
         "react-icon-cloud": "^1.1.3",
         "react-icons": "^5.2.1",
         "react-router-dom": "^6.23.0",
@@ -24,6 +25,7 @@
         "simple-icons": "^5.24.0",
         "stats.js": "^0.17.0",
         "three": "^0.165.0",
+        "typewriter-effect": "^2.21.0",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -6893,6 +6895,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -9435,6 +9446,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -9868,6 +9885,15 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -9993,6 +10019,23 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.1.tgz",
+      "integrity": "sha512-54Gq1ZD1JbmAb4psp9bvFHjS7lje+8ubboUmvKZkCsQBLH6AOpZ9JemfRvIdHcfb9AZXRaFLrb3qUobGYDJhFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icon-cloud": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/react-icon-cloud/-/react-icon-cloud-1.1.3.tgz",
@@ -11870,6 +11913,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": "^17.x || ^18.x",
+        "react-dom": "^17.x || ^18.x"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index d555ef09d..597918cbd 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-chrono": "^2.6.1",
     "react-d3-cloud": "^1.0.6",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.5.1",
     "react-icon-cloud": "^1.1.3",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.0",
@@ -26,6 +27,7 @@
     "simple-icons": "^5.24.0",
     "stats.js": "^0.17.0",
     "three": "^0.165.0",
+    "typewriter-effect": "^2.21.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx
index 3214455e2..d6aad302c 100644
--- a/src/Components/Achievements.jsx
+++ b/src/Components/Achievements.jsx
@@ -1,31 +1,304 @@
-import React from 'react';
-import CircularCard from './CircularCard';
+import React, { useState, useEffect } from "react";
+import Typewriter from "typewriter-effect";
+import toast, { Toaster } from "react-hot-toast";
+
+const AchievementsPage = () => {
+  const [showForm, setShowForm] = useState(false); 
+  const [sections, setSections] = useState({}); 
+
+  
+  useEffect(() => {
+    const savedSections = localStorage.getItem("sections");
+    if (savedSections) {
+      setSections(JSON.parse(savedSections));
+    }
+  }, []);
+
+  const handleAddEntry = (sectionName, newEntry) => {
+    setSections((prevSections) => {
+      const updatedSections = { ...prevSections };
+      if (!updatedSections[sectionName]) {
+        updatedSections[sectionName] = [];
+      }
+      updatedSections[sectionName].push(newEntry);
+      localStorage.setItem("sections", JSON.stringify(updatedSections));
+      return updatedSections;
+    });
+
+    setShowForm(false);
+    toast.success("Achievement added successfully! 🎉");
+  };
 
-const Achievements = () => {
   return (
-    <div className='min-h-screen'>
-      <h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
-        GSoC Contributors
-      </h1>
-      <div className="grid grid-cols-6 px-3 gap-12 justify-center">
-        <div></div>
-        <CircularCard image='https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png' name='Kshitij Shah' organization='Sugarlabs' link="https://github.com/kshitijdshah99/Pippy_Activity" />
-        <CircularCard image='https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png' name='Vedant Mehra' organization='CERN' link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html" />
-        <CircularCard image='https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png' name='Mayank Palan' organization='Red Hen Lab' link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1" />
-        <CircularCard image='https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png' name='Sharan Poojari' organization='NumFOCUS' link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md" />
-        <div></div>
+    <div className="relative bg-transparent min-h-screen w-full flex flex-col items-center">
+      <Toaster position="top-center" reverseOrder={false} />
+
+      {/* Header Section */}
+      <div className="w-full text-center py-16">
+        <h1 className="text-bounce text-6xl font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+          <Typewriter
+            options={{
+              strings: ["Achievements"],
+              autoStart: true,
+              loop: true,
+            }}
+          />
+        </h1>
+      </div>
+
+      
+      <button
+        onClick={() => setShowForm(true)}
+        className="absolute top-16 right-10 bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-xl transform hover:scale-105 transition-transform"
+      >
+        + Add Achievement
+      </button>
+
+   
+      <div className="w-full px-12 py-8 space-y-12">
+        {Object.keys(sections).length > 0 ? (
+          Object.entries(sections).map(([section, entries], index) => (
+            <div key={index}>
+              <div className="flex justify-center">
+                <h2 className="inline-block text-5xl font-mono py-3 font-bold mb-6 text-pink-300 border-b-4 border-blue-600">
+                  {section}
+                </h2>
+              </div>
+              <div className="grid grid-cols-3 gap-6">
+                {entries.map((entry, i) => (
+                  <AchievementCard
+                    key={i}
+                    title={entry.title}
+                    description={entry.description}
+                    participants={entry.participants}
+                    branch={entry.branch}
+                    image={entry.image}
+                  />
+                ))}
+              </div>
+            </div>
+          ))
+        ) : (
+          <p className="text-center text-gray-400 text-xl font-mono">
+            No entries yet. Add some achievements or competitions!
+          </p>
+        )}
       </div>
-        <div className="grid grid-cols-7 px-6 justify-center gap-12">
-<div></div>
-<div></div>
-          <CircularCard image='https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png' name='Warren Jacinto' organization='Open Astronomy' link="https://deadspheroid.github.io/my-blog/" />
-          <CircularCard image='https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png' name='Tvisha Vedant' organization='INCF' link="https://tvilight4.github.io/MyBlog/" />
-          <CircularCard image='https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png' name='Raya Chakravarthy' organization='INCF' link="https://raya679.github.io/gsoc/" />
-          <div></div>
-          <div></div>
+
+
+      {showForm && (
+        <FormModal
+          sections={Object.keys(sections)}
+          onClose={() => setShowForm(false)}
+          onSubmit={handleAddEntry}
+        />
+      )}
+    </div>
+  );
+};
+
+const AchievementCard = ({
+  title,
+  description,
+  participants,
+  branch,
+  image,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleDescription = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div
+      className="ml-[15%] shadow-lg rounded-lg overflow-hidden transform transition-transform hover:scale-105 border border-gray-200 w-80"
+      style={{
+        background: "linear-gradient(to bottom, #0f0e17, #232946)",
+        color: "#eebbc3",
+      }}
+    >
+      {image && (
+        <div className="relative">
+          <img src={image} alt={title} className="w-full h-40 object-cover" />
         </div>
+      )}
+      <div className="p-4 bg-transparent">
+        <h3 className="text-2xl text-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mb-1">
+          {title}
+        </h3>
+        <p className="text-md text-gray-350 font-semibold mb-2">
+          Participants: {participants}
+        </p>
+        <p className="text-md text-gray-350 font-semibold mb-2">
+          Branch: {branch}
+        </p>
+        <div className="text-md text-gray-350 font-semibold mb-2">
+          <span className="font-bold">Description:</span>
+          <p
+            className={`${
+              isExpanded
+                ? "whitespace-normal"
+                : "overflow-hidden text-ellipsis max-h-12"
+            } break-words`}
+          >
+            {description}
+          </p>
+          <div className="text-right mt-2">
+            <button
+              onClick={toggleDescription}
+              className="py-1 text-indigo-300 text-sm uppercase hover:underline"
+            >
+              {isExpanded ? "Show Less" : "Read More"} <span>&rarr;</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FormModal = ({ sections, onClose, onSubmit }) => {
+  const [isNewSection, setIsNewSection] = useState(true);
+  const [sectionName, setSectionName] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [participants, setParticipants] = useState("");
+  const [branch, setBranch] = useState("");
+  const [image, setImage] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    
+    const descriptionWordCount = description.trim().split(/\s+/).length;
+    if (descriptionWordCount > 30) {
+      alert("Description must be less than 30 words.");
+      return;
+    }
+
+    const newEntry = { title, description, participants, branch, image };
+    if (isNewSection) {
+      onSubmit(sectionName, newEntry);
+    } else {
+      onSubmit(sectionName, newEntry); 
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="relative bg-white rounded-lg shadow-lg p-6 w-1/3">
+
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-lg font-bold"
+        >
+          &times;
+        </button>
+        <h2 className="text-xl font-bold text-center mb-4">
+          {isNewSection ? "Add New Section" : "Add Entry to Section"}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isNewSection ? (
+            <div>
+              <label className="block font-semibold">Section Name</label>
+              <input
+                type="text"
+                value={sectionName}
+                onChange={(e) => setSectionName(e.target.value)}
+                className="w-full p-2 border rounded"
+                required
+              />
+            </div>
+          ) : (
+            <div>
+              <label className="block font-semibold">Select Section</label>
+              <select
+                value={sectionName}
+                onChange={(e) => setSectionName(e.target.value)}
+                className="w-full p-2 border rounded"
+                required
+              >
+                <option value="">-- Select a Section --</option>
+                {sections.map((section, index) => (
+                  <option key={index} value={section}>
+                    {section}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <div>
+            <label className="block font-semibold">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Description</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            ></textarea>
+          </div>
+          <div>
+            <label className="block font-semibold">Participants</label>
+            <input
+              type="text"
+              value={participants}
+              onChange={(e) => setParticipants(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Branch</label>
+            <input
+              type="text"
+              value={branch}
+              onChange={(e) => setBranch(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Image URL</label>
+            <input
+              type="text"
+              value={image}
+              onChange={(e) => setImage(e.target.value)}
+              className="w-full p-2 border rounded"
+              placeholder="Enter image URL"
+            />
+          </div>
+          <div className="flex justify-between">
+            <button
+              type="button"
+              onClick={() => {
+                setIsNewSection(!isNewSection);
+                setSectionName("");
+              }}
+              className="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded"
+            >
+              {isNewSection ? "Add to Existing Section" : "Create New Section"}
+            </button>
+            <button
+              type="submit"
+              className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
+            >
+              Add Entry
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
-}
+};
 
-export default Achievements;
+export default AchievementsPage;