diff --git a/src/app/(pages)/Stories-Achievements/page.jsx b/src/app/(pages)/Stories-Achievements/page.jsx
index 22234bb..7a9c7b3 100644
--- a/src/app/(pages)/Stories-Achievements/page.jsx
+++ b/src/app/(pages)/Stories-Achievements/page.jsx
@@ -1,211 +1,14 @@
-"use client";
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { FaLinkedin } from 'react-icons/fa';
-import Link from 'next/link';
-
-const fadeInUp = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 },
-};
-
-const cardHover = {
-  hover: { scale: 1.05 },
-};
-
-const Container = styled.div`
-  padding: 40px;
-  width: 100%;
-  margin: 0 auto;
-  font-family: Arial, sans-serif;
-`;
-
-const SectionTitle = styled.h1`
-  font-size: 2.5rem;
-  margin-bottom: 20px;
-  text-align: center;
-  color: #333;
-`;
-
-const Subtitle = styled.p`
-  font-size: 1.2rem;
-  text-align: center;
-  color: #666;
-  margin-bottom: 40px;
-`;
-
-const CardGrid = styled.div`
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-  flex-wrap: wrap;
-  width: 100%;
-`;
-
-const Card = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  width: 100%;
-  max-width: 280px;
-  height: 100%;
-  text-align: center;
-  transition: transform 0.3s;
-  &:hover {
-    transform: translateY(-10px);
-  }
-`;
-
-const CardImage = styled.img`
-  width: 100%;
-  height: 160px;
-  object-fit: cover;
-  border-radius: 8px 8px 0 0;
-  margin-bottom: 15px;
-`;
-
-const CardTitle = styled.h2`
-  font-size: 1.5rem;
-  color: #0070f3;
-  margin-bottom: 10px;
-`;
-
-const CardContent = styled.p`
-  color: #555;
-  margin-bottom: 10px;
-  justify-content: space-between;
-  text-align: center;
-`;
-
-const ReadMoreButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 20px;
-  background-color: #0070f3;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  margin-top: 15px;
-  &:hover {
-    background-color: #005bb5;
-  }
-`;
-
-const ConnectOnLinkedInButton = styled.div`
-  padding: 10px 20px;
-  background-color: #0070f3;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  margin-top: 15px;
-  display: inline-flex; /* Align items inline */
-  justify-content: center; /* Centers items horizontally */
-  align-items: center; /* Center items vertically */
-  gap: 8px; /* Space between text and icon */
-  text-decoration: none; /* Remove underline from Link */
-  &:hover {
-    background-color: #005bb5;
-  }
-`;
-
-const ConnectButton = styled.button`
-  padding: 12px 20px;
-  background-color: #0070f3;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  font-size: 1rem;
-  cursor: pointer;
-  display: block;
-  margin: 30px auto 0;
-  &:hover {
-    background-color: #005bb5;
-  }
-`;
-
-const LinkedinIcon = styled(FaLinkedin)`
-  font-size: 1.2rem; 
-`;
-
-const Mentorship = () => {
-  const [achievements, setAchievements] = useState([]);
-  const [mentors, setMentors] = useState([]);
-
-  useEffect(() => {
-    fetch('http://localhost:5000/achievements')
-      .then((response) => response.json())
-      .then((data) => setAchievements(data))
-      .catch((error) => console.error("Error fetching achievements:", error));
-
-    fetch('http://localhost:5000/mentors')
-      .then((response) => response.json())
-      .then((data) => setMentors(data))
-      .catch((error) => console.error("Error fetching mentors:", error));
-  }, []);
+import Stories from '@/components/ui/stories'
+import Achievements from '@/components/ui/achievements'
+import React from 'react'
 
+const page = () => {
   return (
-    <Container>
-      <motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5 }}>
-        <SectionTitle>Stories from the Community</SectionTitle>
-        <Subtitle>Get inspired by the clever ways people are using Google technology.</Subtitle>
-        <CardGrid>
-          {achievements.map((achieve, index) => (
-            <motion.div key={index} variants={cardHover} whileHover="hover" initial="hidden" animate="visible" transition={{ duration: 0.3, ease: "easeInOut" }}>
-              <Card>
-                <CardImage src={achieve.imageUrl} alt={`${achieve.name} photo`} />
-                <CardTitle>{achieve.name}</CardTitle>
-                <CardContent><strong>Job:</strong> {achieve.job}</CardContent>
-                <CardContent><strong>Project:</strong> {achieve.project}</CardContent>
-                <CardContent><strong>Testimonial:</strong> "{achieve.testimonial}"</CardContent>
-                <Link key={achieve.id} href={`/Stories-Achievements/${achieve.id}`}>
-                <ReadMoreButton>Read now</ReadMoreButton>
-                </Link>
-              </Card>
-            </motion.div>
-          ))}
-        </CardGrid>
-      </motion.div>
-
-      <motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5, delay: 0.3 }} style={{ marginTop: "50px" }}>
-        <SectionTitle>Meet the Mentors</SectionTitle>
-        <Subtitle>Our mentors are here to guide GDSC members in various fields.</Subtitle>
-        <CardGrid>
-          {mentors.map((mentor, index) => (
-            <motion.div key={mentor.id} variants={cardHover} whileHover="hover" initial="hidden" animate="visible" transition={{ duration: 0.3, ease: "easeInOut" }}>
-              <Card>
-                <CardImage src={mentor.imageUrl} alt={`${mentor.name} photo`} />
-                <CardTitle>{mentor.name}</CardTitle>
-                <CardContent><strong>Position:</strong> {mentor.position}</CardContent>
-                <CardContent>{mentor.bio}</CardContent>
-                <ConnectOnLinkedInButton>
-                  <Link key={mentor.id} href={`${mentor.linkedinProfile}`} style={{display: 'flex', gap: '4px', fontSize: '16px'}} passHref>
-                    Connect on LinkedIn <LinkedinIcon />
-                  </Link>
-                </ConnectOnLinkedInButton>
-              </Card>
-            </motion.div>
-          ))}
-        </CardGrid>
-      </motion.div>
-
-      <motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5, delay: 0.6 }} style={{ marginTop: "50px" }}>
-        <SectionTitle>Connect with GDSC Alumni</SectionTitle>
-        <Subtitle>Our GDSC members can connect with alumni for advice and career guidance.</Subtitle>
-        <ConnectButton>Connect with Alumni</ConnectButton>
-      </motion.div>
-    </Container>
-  );
-};
-
-export default Mentorship;
+    <>
+    <Achievements/>
+    <Stories/>
+    </>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/src/components/ui/achievements.jsx b/src/components/ui/achievements.jsx
new file mode 100644
index 0000000..e2da0b9
--- /dev/null
+++ b/src/components/ui/achievements.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { FaGithub,FaInstagram, FaLinkedin } from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
+
+const TeamMembers = () => {
+  // Array of team member data with Bengali names in English
+  const teamMembers = [
+    {
+      name: "Sahil Banerjee",
+      role: "Community Lead & Full-Stack Developer",
+      description: "Sahil is the visionary behind GDSC RCCIIT, fostering innovation and collaboration within the tech community. Currently interning at Google, he leads efforts in cloud infrastructure and scalable solutions.",
+      avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png",
+      socialLinks: [
+        { icon: <FaGithub />, href: "#" },
+        { icon: <FaInstagram />, href: "#" },
+        { icon: <FaXTwitter />, href: "#" },
+        { icon: <FaLinkedin />, href: "#" }
+      ]
+    },
+    {
+      name: "Subhash Ghosh",
+      role: "Machine Learning Specialist",
+      description: "Subhash pioneers machine learning projects and research at GDSC. A Meta intern, he's focused on developing AI-driven tools for enhanced user engagement and automated content moderation.",
+      avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png",
+      socialLinks: [
+        { icon: <FaGithub />, href: "#" },
+        { icon: <FaInstagram />, href: "#" },
+        { icon: <FaXTwitter />, href: "#" },
+        { icon: <FaLinkedin />, href: "#" }
+      ]
+    },
+    {
+      name: "Arjun Mukherjee",
+      role: "UI/UX Designer",
+      description: "Arjun designs intuitive and engaging interfaces for GDSC projects. He interned at Amazon, where he crafted user-centered designs for e-commerce platforms, emphasizing accessibility and visual appeal.",
+      avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png",
+      socialLinks: [
+        { icon: <FaGithub />, href: "#" },
+        { icon: <FaInstagram />, href: "#" },
+        { icon: <FaXTwitter />, href: "#" },
+        { icon: <FaLinkedin />, href: "#" }
+      ]
+    },
+    {
+      name: "Riya Das",
+      role: "Backend Developer & Data Engineer",
+      description: "Riya is skilled in backend development and data engineering, building robust systems for GDSC. As an intern at Netflix, she contributed to scalable data pipelines and streaming data analysis.",
+      avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png",
+      socialLinks: [
+        { icon: <FaGithub />, href: "#" },
+        { icon: <FaInstagram />, href: "#" },
+        { icon: <FaXTwitter />, href: "#" },
+        { icon: <FaLinkedin />, href: "#" }
+      ]
+    }
+];
+
+
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm text-center mb-8 lg:mb-16">
+          <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Achievemnts</h2>
+          <p className="font-light text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400">The notable alumni of our past GDSC members who are now in MAANG companies</p>
+        </div>
+        <div className="grid gap-8 mb-6 lg:mb-16 md:grid-cols-2">
+          {teamMembers.map((member, index) => (
+            <div key={index} className="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
+              <a href="#">
+                <img className="w-full h-full rounded-lg sm:rounded-none sm:rounded-l-lg" src={member.avatar} alt={`${member.name} Avatar`} />
+              </a>
+              <div className="p-5">
+                <h3 className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+                  <a href="#">{member.name}</a>
+                </h3>
+                <span className="text-gray-500 dark:text-gray-400">{member.role}</span>
+                <p className="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">{member.description}</p>
+                <ul className="flex space-x-4 sm:mt-0">
+                  {member.socialLinks.map((social, socialIndex) => (
+                    <li key={socialIndex}>
+                      <a href={social.href} className="text-gray-500 hover:text-gray-900 dark:hover:text-white">
+                        {social.icon}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamMembers;
\ No newline at end of file
diff --git a/src/components/ui/stories.jsx b/src/components/ui/stories.jsx
new file mode 100644
index 0000000..e5d3dce
--- /dev/null
+++ b/src/components/ui/stories.jsx
@@ -0,0 +1,89 @@
+
+
+import React from 'react';
+
+const testimonials = [
+    {
+      title: "Pioneering Innovation in AI and Machine Learning",
+      content: [
+        "Ananya's journey started at RCCIIT, where she became an active member of the Google Developer Student Club (GDSC). Her curiosity and dedication led her to explore the depths of artificial intelligence.",
+        "As a developer, she quickly rose through the ranks, contributing to groundbreaking projects that pushed the boundaries of what's possible with AI.",
+        "Today, as a Developer at Open AI, Ananya is a shining example of what passion and perseverance can achieve."
+      ],
+      author: "Ananya Sen",
+      jobTitle: "Developer at Open AI",
+      imgUrl: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png"
+    },
+    {
+      title: "Designing the Future of Digital Experiences",
+      content: [
+        "Priya's career in design took off when she joined the GDSC at RCCIIT, where she honed her skills and grew her professional network.",
+        "Her attention to detail and innovative approach to user experience made her an invaluable asset to any team.",
+        "Now, as the Lead Designer at Dropbox, Priya shapes user experiences that make a difference to millions around the world."
+      ],
+      author: "Priya Chatterjee",
+      jobTitle: "Lead Designer at Dropbox",
+      imgUrl: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
+    },
+    {
+      title: "Revolutionizing Social Media Platforms",
+      content: [
+        "Arjun's early work with the Google Developer Student Club at RCCIIT allowed him to explore new technologies and collaborate with like-minded individuals.",
+        "His technical expertise and innovative spirit have driven him to create seamless, engaging user experiences in the social media space.",
+        "Now a Software Engineer at Facebook, Arjun continues to push the envelope, making social media more interactive and accessible."
+      ],
+      author: "Arjun Roy",
+      jobTitle: "Software Engineer at Facebook",
+      imgUrl: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
+    },
+    {
+      title: "Leading Technological Innovation at Scale",
+      content: [
+        "Ritwik's path to becoming the CTO of Google began during his time at RCCIIT, where he played an active role in the Google Developer Student Club.",
+        "His ability to combine technical knowledge with leadership skills quickly set him apart as a visionary leader.",
+        "With a deep understanding of both technology and strategy, Ritwik now oversees cutting-edge projects that impact millions worldwide."
+      ],
+      author: "Ritwik Basu",
+      jobTitle: "CTO at Google",
+      imgUrl: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png"
+    }
+  ];
+  
+const Achievements = () => {
+  return (
+    <section className="bg-white dark:bg-gray-900">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm">
+          <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Stories</h2>
+          <p className="mb-8 font-light text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400">
+            Explore the sucess stoeries of the previous GDSC members from our campus who are now in prestigous parts of world.
+          </p>
+        </div> 
+        <div className="grid mb-8 lg:mb-12 lg:grid-cols-2">
+          {testimonials.map((testimonial, index) => (
+            <figure 
+              key={index} 
+              className={`flex flex-col justify-center items-center p-8 text-center bg-gray-50 border-b border-gray-200 md:p-12 dark:bg-gray-800 dark:border-gray-700 ${index % 2 === 0 ? 'lg:border-r' : ''}`}
+            >
+              <blockquote className="mx-auto mb-8 max-w-2xl text-gray-500 dark:text-gray-400">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{testimonial.title}</h3>
+                {testimonial.content.map((paragraph, i) => (
+                  <p className="my-4" key={i}>{paragraph}</p>
+                ))}
+              </blockquote>
+              <figcaption className="flex justify-center items-center space-x-3">
+                <img className="w-9 h-9 rounded-full" src={testimonial.imgUrl} alt="profile picture"/>
+                <div className="space-y-0.5 font-medium dark:text-white text-left">
+                  <div>{testimonial.author}</div>
+                  <div className="text-sm font-light text-gray-500 dark:text-gray-400">{testimonial.jobTitle}</div>
+                </div>
+              </figcaption>    
+            </figure>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Achievements;