diff --git a/.gitignore b/.gitignore
index 0f6c8d8..53cd4fa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,4 @@ yarn-error.log*
 next-env.d.ts
 
 
-.env
-
-/temp
\ No newline at end of file
+.env
\ No newline at end of file
diff --git a/src/app/page.js b/src/app/page.js
index 694c400..49c573d 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -5,7 +5,7 @@ import { BackgroundBeams } from "@/components/ui/background-beams";
 import NavBar from "@/components/NavBar";
 import About from "@/components/About";
 import Projects from "@/components/Projects";
-import { Contact } from "lucide-react";
+import Contact from "@/components/Contact";
 import Education from "@/components/Education";
 
 export default function Home() {
diff --git a/src/components/About.jsx b/src/components/About.jsx
index 5b4a4ac..e0b4545 100644
--- a/src/components/About.jsx
+++ b/src/components/About.jsx
@@ -1,9 +1,27 @@
 "use client";
 
 const About = () => {
+  const introText = `I'm Adhiraj Saha, a passionate web developer with a keen interest in blockchain technology. I enjoy exploring new technologies and building intuitive, engaging web experiences. With a strong foundation in ReactJS, Python, and Django, I'm focused on creating projects that make a difference.`;
+
   return (
     <div id="about" className="relative z-10 text-white h-screen px-8 lg:px-56 py-10 lg:pt-36">
-      <div>About</div>
+      <h1 className="text-4xl font-bold text-center mb-10">About Me</h1>
+      
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-evenly space-y-8 lg:space-y-0">
+        {/* Left Side - Profile Image */}
+        <div className="mb-6 lg:mb-0 flex-shrink-0">
+            <img
+              src="/assets/profile-picture.png"
+              alt="Profile Picture"
+              className="w-32 h-32 lg:w-40 lg:h-40 object-cover rounded-full shadow-lg"
+            />
+        </div>
+
+        {/* Right Side - Introduction Text */}
+        <div className="text-left space-y-4 lg:w-2/3">
+          <p className="text-lg lg:text-xl">{introText}</p>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index ffb31bc..b061441 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -30,8 +30,8 @@ const Hero = () => {
           <TextGenerateEffect words={words2} className="w-11/12 lg:w-2/3" />
         </div>
 
-        {/* Right Side Profile Picture */}
-        <div className="mb-6 lg:mb-0 flex-shrink-0">
+        {/* Right Side Profile Picture with Glare (only on desktop) */}
+        <div className="hidden lg:block mb-6 lg:mb-0 flex-shrink-0">
           <GlareCard className="flex flex-col items-center justify-center">
             <img
               src="/assets/profile-picture.png"
@@ -40,7 +40,18 @@ const Hero = () => {
             />
           </GlareCard>
         </div>
+
+        {/* Profile Picture (only on mobile) */}
+        <div className="lg:hidden mb-6 lg:mb-0 flex-shrink-0">
+          <img
+            src="/assets/profile-picture.png"
+            alt="Profile Picture"
+            className="w-32 h-32 lg:w-40 lg:h-40 object-cover rounded-full shadow-lg"
+          />
+        </div>
       </div>
+
+      {/* Cool Mode Button */}
       <div className="flex flex-col items-start lg:pt-4">
         <CoolMode>
           <button className="inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">