diff --git a/frontend/src/components/About.jsx b/frontend/src/components/About.jsx
index ed2e84c..f74f545 100644
--- a/frontend/src/components/About.jsx
+++ b/frontend/src/components/About.jsx
@@ -1,14 +1,88 @@
 import React from 'react'
-import Navbar from './Navbar'
 
-const About = () => {
+const About = () => { 
   return (
-    
-    <div className='py-10'>
-       <Navbar />
-       About
+    <div class="max-b-screen-lg p-4 mx-auto flex flex-col justify-center w-full h-full
+    btn stroke-violet-950 to-violet-900 from-violet-900"
+    >
+      <div 
+      class="max-w-screen-lg p-4 mx-auto flex flex-col justify-center w-full h-full">
+        <div class="text-xl mt-10"></div> 
+      </div>
+      <div className="max-w-screen-lg p-4 mx-auto flex flex-col justify-center w-full h-full">
+        <div className="pb-8">
+          <center>
+            <button>
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+             About Us
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            At CodeBooter, we are passionate about empowering individuals to contribute to live projects and fostering a vibrant tech learning community. 
+            Our platform provides a unique opportunity for developers, designers, and tech enthusiasts to collaborate, learn, and make a real impact in the world of technology.
+            </button>
+            </div>
+          </button>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Our Mission and Our Vision 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            Our Mission is to connect  passionate individuals with live projects, enabling them to gain practical experience, expand their skill set, and contribute to real-world products. 
+            We envision a future where learning and collaboration go hand in hand, propelling the growth and innovation of the tech industry.
+            </button>
+            </div>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Our Unique Value Proposition 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            At CodeBooter, we offer an immersive platform that bridges the gap between learning and practical application. 
+            By providing a curated repository of projects, a supportive community, and a wealth of learning resources, we create an environment where individuals can sharpen their skills, build their portfolios, and make meaningful contributions to projects they are passionate about.
+            </button>
+            </div>
+   
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Meet Our Team 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            We are a team of dedicated professionals with diverse backgrounds in software development, design, and community building. 
+            Our collective expertise and passion for technology drive us to create an engaging and inclusive space for individuals to thrive.
+            </button>
+            </div>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Our History and Milestones 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            Since our inception in [year], we have reached significant milestones that have shaped our journey. 
+            From launching our platform to forging partnerships with leading tech organizations, we have continuously strived to provide the best experience for our community. Our growth is a testament to the impact we have made and the trust we have earned from our users.
+            </button>
+            </div>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Community and Impact 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            CodeBooter has brought together a vibrant community of tech enthusiasts, project contributors, and learners. 
+            Through our platform, we have witnessed countless success stories, where individuals have honed their skills, collaborated on exciting projects, and landed rewarding opportunities. Together, we are making a lasting impact on the tech industry and fostering a culture of continuous learning.
+            </button>
+            </div>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Our Core Values 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            At CodeBooter, we uphold core values that drive our work and define our community. We are committed to inclusivity, fostering a supportive environment where everyone's voice is heard. 
+            We value innovation, pushing the boundaries of technology and inspiring creativity. Knowledge sharing is at the heart of what we do, as we believe in the power of learning from and teaching others.
+            </button>
+            </div>
+
+            <div class="text-4xl font-bold text-transform: uppercase text-font: italic text-black bg-gradient-to-b from-violet-300 to to-violet-300 px-6 py-8 my-10 mx-auto-flex items-center rounded-md hover:scale-110 duration-300"> 
+            Contact Us 
+            <button className="text-white bg-gradient-to-b from-violet-300 to-violet-300 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-100 duration-90">
+            We would love to hear from you! Whether you have questions, feedback, or partnership inquiries, please reach out to us at [email protected] 
+            You can also connect with us on social media platforms, such as Twitter, Facebook, and LinkedIn.
+            </button>
+            </div>
+          </center>
+        </div>
+      </div>
     </div>
-  )
-}
+  );
+};
+  
 
-export default About
\ No newline at end of file
+export default About;
\ No newline at end of file
diff --git a/frontend/src/components/Contact.jsx b/frontend/src/components/Contact.jsx
index 58807f0..7b2f797 100644
--- a/frontend/src/components/Contact.jsx
+++ b/frontend/src/components/Contact.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { motion } from "framer-motion"
 
 const Contact = () => {
   return (