diff --git a/public/images/2.png b/public/images/2.png
deleted file mode 100644
index fdcaa1d..0000000
Binary files a/public/images/2.png and /dev/null differ
diff --git a/public/images/aboutus.png b/public/images/aboutus.png
new file mode 100644
index 0000000..bdaee55
Binary files /dev/null and b/public/images/aboutus.png differ
diff --git a/public/images/developer1.png b/public/images/developer1.png
new file mode 100644
index 0000000..a691009
Binary files /dev/null and b/public/images/developer1.png differ
diff --git a/public/images/developer2.jfif b/public/images/developer2.jfif
new file mode 100644
index 0000000..334d7ea
Binary files /dev/null and b/public/images/developer2.jfif differ
diff --git a/public/images/developer3.jfif b/public/images/developer3.jfif
new file mode 100644
index 0000000..05cf76f
Binary files /dev/null and b/public/images/developer3.jfif differ
diff --git a/public/images/ecology.png b/public/images/ecology.png
new file mode 100644
index 0000000..b3cc1ac
Binary files /dev/null and b/public/images/ecology.png differ
diff --git a/public/images/laid benglia.jpg b/public/images/laid benglia.jpg
new file mode 100644
index 0000000..30cbc9d
Binary files /dev/null and b/public/images/laid benglia.jpg differ
diff --git a/public/images/mohamed-ch.jpg b/public/images/mohamed-ch.jpg
new file mode 100644
index 0000000..c276b6a
Binary files /dev/null and b/public/images/mohamed-ch.jpg differ
diff --git a/public/images/sara bagach.jpg b/public/images/sara bagach.jpg
new file mode 100644
index 0000000..cb1c32b
Binary files /dev/null and b/public/images/sara bagach.jpg differ
diff --git a/public/images/sharing.png b/public/images/sharing.png
new file mode 100644
index 0000000..a46dba0
Binary files /dev/null and b/public/images/sharing.png differ
diff --git a/src/components/developeravatar/DeveloperAvatar.jsx b/src/components/developeravatar/DeveloperAvatar.jsx
index 98c6739..8dd00a6 100644
--- a/src/components/developeravatar/DeveloperAvatar.jsx
+++ b/src/components/developeravatar/DeveloperAvatar.jsx
@@ -4,8 +4,8 @@ import Link from "next/link";
 const DeveloperAvatar = ({ name, avatarUrl, description, href }) => {
     return (
         <Link href={href}>
-            <div className='text-center flex flex-col items-center justify-center w-full md:w-80 rounded-lg  p-4 border border-gray hover:bg-slate-100'>
-                <div className=' relative w-32 h-32 md:w-20 md:h-20 lg:w-36 lg:h-36  mb-2 mx-auto '>
+            <div className=' text-center group-hover:scale-[10] flex flex-col items-center cursor-pointer overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl justify-center w-full md:w-80 rounded-3xl p-4 hover:bg-slate-100'>
+                <div className='relative w-32 h-32 md:w-20 md:h-20 lg:w-36 lg:h-36 mb-2 mx-auto '>
                     <Image
                         src={avatarUrl}
                         alt={`${name}'s Avatar`}
@@ -14,7 +14,9 @@ const DeveloperAvatar = ({ name, avatarUrl, description, href }) => {
                         layout='fill'
                     />
                 </div>
-                <p className='text-xl font-semibold my-2'>{name}</p>
+                <p className='text-xl text-lime-800 font-semibold my-2'>
+                    {name}
+                </p>
                 <p className='text-black text-base w-4/5 md:w-full '>
                     {description}
                 </p>
diff --git a/src/pages/about/index.jsx b/src/pages/about/index.jsx
index 12e8e47..549aee2 100644
--- a/src/pages/about/index.jsx
+++ b/src/pages/about/index.jsx
@@ -1,11 +1,101 @@
+import Image from "next/image";
+
+import DeveloperAvatar from "@/components/developeravatar/DeveloperAvatar";
+
 function AboutPage() {
-    return <div>AboutPage</div>;
-}
+    return (
+        <section>
+            <div className='bg-gradient-to-tr from-lime-400 via-white to-white'>
+                <div className='sm:flex flex flex-row items-center max-w-screen-xl flex-wrap-reverse p-10 lg:p-0'>
+                    <div className='sm:w-1/2 lg:pb-24 pb-16 pt-20 lg:pl-32 pl-1'>
+                        <div className='display block lg:h-80 lg:w-96 max-w-screen-xl max-h-96'>
+                            <Image
+                                className='w-10/12 h-96 blur-sm drop-shadow-2xl flex items-center justify-center'
+                                src='/images/aboutus.png'
+                                width={500}
+                                height={500}
+                                alt='hero'
+                            />
+                        </div>
+                    </div>
+                    <div className='sm:w-1/2 p-5'>
+                        <div className='text'>
+                            <span className='text-gray-500 border-b-2 border-lime-600 uppercase'>
+                                About us
+                            </span>
 
-export default AboutPage;
+                            <h2 className='my-4 font-bold text-3xl  sm:text-4xl '>
+                                Who{" "}
+                                <span className='text-lime-600'>We Are</span>
+                            </h2>
+                            <p className='text-gray-700'>
+                                Welcome to Let&apos;s Share - where sharing is
+                                caring! In our community, we believe in the
+                                heartwarming essence of sharing daily
+                                essentials. Extra food, lovely clothes, or cozy
+                                furniture - at Let&apos;s Share, it&apos;s about
+                                connecting and making a positive impact right
+                                where you are. Let&apos;s transform our region
+                                into a haven of shared moments. Join Let&apos;s
+                                Share, where sharing isn&apos;t just a choice;
+                                it&apos;s a way of life.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-export async function getStaticProps({ locale }) {
-    return {
-        props: {},
-    };
+            <div className='bg-gradient-to-br from-lime-400 via-white to-white'>
+                <div className='flex flex-wrap justify-center mb-20'>
+                    <div className='text-center w-full mb-4'>
+                        <h1 className='text-3xl font-bold p-12'>Our Team</h1>
+                    </div>
+                    {/* Developer 1 */}
+                    <DeveloperAvatar
+                        name='Darine Tag'
+                        avatarUrl='/images/developer1.png'
+                        description='Visionary creator of seamless, stunning user experiences.'
+                        href='https://www.linkedin.com/in/darine-tag/'
+                    />
+                    {/* Developer 2 */}
+                    <DeveloperAvatar
+                        name='Hadj Said Bouras'
+                        avatarUrl='/images/developer2.jfif'
+                        description='Meticulous architect, crafting clean, efficient, pixel-perfect interfaces.'
+                        href='https://www.linkedin.com/in/hadj-said-front-end-web-developer-a577a8255/'
+                    />
+                    {/* Developer 3 */}
+                    <DeveloperAvatar
+                        name='Ismail Benlaredj'
+                        avatarUrl='/images/developer3.jfif'
+                        description='Dynamic innovator, blends energy, tech trends for excellence.'
+                        href='https://www.linkedin.com/in/ismailbenlaredj/'
+                    />
+                    {/* Developer 4 */}
+                    <DeveloperAvatar
+                        name='Mohamed Cheraitia'
+                        avatarUrl='/images/mohamed-ch.jpg'
+                        description='Versatile engineer, seamlessly blends creativity with technicality.'
+                        href='https://www.linkedin.com/in/mohamed-ch-947939272/'
+                    />
+                    {/* Developer 5 */}
+                    <DeveloperAvatar
+                        name='Laid Benglia'
+                        avatarUrl='/images/laid benglia.jpg'
+                        description='Front-end magician, turns ideas into interactive wonders.'
+                        href='https://www.linkedin.com/in/laid-benglia-452013199/'
+                    />
+                    {/* Developer 6 */}
+                    <DeveloperAvatar
+                        name='sara Bagache'
+                        avatarUrl='/images/sara bagach.jpg'
+                        description='Pragmatic developer, builds robust, scalable, user-friendly applications.'
+                        href='https://github.com/SaraBegache'
+                    />
+                </div>
+            </div>
+        </section>
+    );
 }
+
+export default AboutPage;