diff --git a/app/components/homepage/about/index.jsx b/app/components/homepage/about/index.jsx
index f04e6ae..d0b14cb 100644
--- a/app/components/homepage/about/index.jsx
+++ b/app/components/homepage/about/index.jsx
@@ -25,8 +25,8 @@ function AboutSection() {
         <div className="flex justify-center order-1 lg:order-2">
           <Image
             src={personalData.profile}
-            width={280}
-            height={280}
+            width={180}
+            height={180}
             alt="Ridhima Jain"
             className="rounded-lg transition-all duration-1000 grayscale hover:grayscale-0 hover:scale-110 cursor-pointer"
           />
diff --git a/app/components/homepage/hero-section/index.jsx b/app/components/homepage/hero-section/index.jsx
index 56cb20a..1ea806f 100644
--- a/app/components/homepage/hero-section/index.jsx
+++ b/app/components/homepage/hero-section/index.jsx
@@ -32,7 +32,6 @@ function HeroSection() {
           </h1>
 
           <div className="my-12 flex items-center gap-5">
-            <h1 className="text-2xl font-bold text-pink-500">Socials:</h1>
             <Link
               href={personalData.github}
               target='_blank'
@@ -46,11 +45,8 @@ function HeroSection() {
               className="transition-all text-white hover:scale-125 duration-300"
             >
               <BsLinkedin size={30} />
-              
             </Link>
            
-            
-           
           </div>
 
           <div className="flex items-center gap-3">
@@ -69,7 +65,96 @@ function HeroSection() {
           </div>
 
         </div>
-       
+        <div className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37]">
+          <div className="flex flex-row">
+            <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-pink-500 to-violet-600"></div>
+            <div className="h-[1px] w-full bg-gradient-to-r from-violet-600 to-transparent"></div>
+          </div>
+          <div className="px-4 lg:px-8 py-5">
+            <div className="flex flex-row space-x-2">
+              <div className="h-3 w-3 rounded-full bg-red-400"></div>
+              <div className="h-3 w-3 rounded-full bg-orange-400"></div>
+              <div className="h-3 w-3 rounded-full bg-green-200"></div>
+            </div>
+          </div>
+          <div className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-8">
+            <code className="font-mono text-xs md:text-sm lg:text-base">
+              <div className="blink">
+                <span className="mr-2 text-pink-500">const</span>
+                <span className="mr-2 text-white">coder</span>
+                <span className="mr-2 text-pink-500">=</span>
+                <span className="text-gray-400">{'{'}</span>
+              </div>
+              <div>
+                <span className="ml-4 lg:ml-8 mr-2 text-white">name:</span>
+                <span className="text-gray-400">{`'`}</span>
+                <span className="text-amber-300">Ridhima Jain</span>
+                <span className="text-gray-400">{`',`}</span>
+              </div>
+              <div className="ml-4 lg:ml-8 mr-2">
+                <span className=" text-white">skills:</span>
+                <span className="text-gray-400">{`['`}</span>
+                <span className="text-amber-300">Html</span>
+                <span className="text-gray-400">{"', '"}</span>
+                
+                <span className="text-amber-300">Css</span>
+                <span className="text-gray-400">{"', '"}</span>
+                
+                <span className="text-amber-300">Javascript</span>
+                <span className="text-gray-400">{"', '"}</span>
+                <span className="text-amber-300">Bootstrap</span>
+                <span className="text-gray-400">{"', '"}</span>
+                <span className="text-amber-300">Tailwind css</span>
+                <span className="text-gray-400">{"', '"}</span>
+                <span className="text-amber-300">React</span>
+                <span className="text-gray-400">{"'],"}</span>
+              </div>
+              <div>
+                <span className="ml-4 lg:ml-8 mr-2 text-white">hardWorker:</span>
+                <span className="text-orange-400">true</span>
+                <span className="text-gray-400">,</span>
+              </div>
+              <div>
+                <span className="ml-4 lg:ml-8 mr-2 text-white">quickLearner:</span>
+                <span className="text-orange-400">true</span>
+                <span className="text-gray-400">,</span>
+              </div>
+              <div>
+                <span className="ml-4 lg:ml-8 mr-2 text-white">problemSolver:</span>
+                <span className="text-orange-400">true</span>
+                <span className="text-gray-400">,</span>
+              </div>
+              <div>
+                <span className="ml-4 lg:ml-8 mr-2 text-green-400">hireable:</span>
+                <span className="text-orange-400">function</span>
+                <span className="text-gray-400">{'() {'}</span>
+              </div>
+              <div>
+                <span className="ml-8 lg:ml-16 mr-2 text-orange-400">return</span>
+                <span className="text-gray-400">{`(`}</span>
+              </div>
+              <div>
+                <span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
+                <span className="mr-2 text-white">hardWorker</span>
+                <span className="text-amber-300">&amp;&amp;</span>
+              </div>
+              <div>
+                <span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
+                <span className="mr-2 text-white">problemSolver</span>
+                <span className="text-amber-300">&amp;&amp;</span>
+              </div>
+              <div>
+                <span className="ml-12 lg:ml-24 text-cyan-400">this.</span>
+                <span className="mr-2 text-white">skills.length</span>
+                <span className="mr-2 text-amber-300">&gt;=</span>
+                <span className="text-orange-400">5</span>
+              </div>
+              <div><span className="ml-8 lg:ml-16 mr-2 text-gray-400">{`);`}</span></div>
+              <div><span className="ml-4 lg:ml-8 text-gray-400">{`};`}</span></div>
+              <div><span className="text-gray-400">{`};`}</span></div>
+            </code>
+          </div>
+        </div>
       </div>
     </section>
   );
diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
index 5c0fa3c..c37efb9 100644
--- a/app/components/navbar.jsx
+++ b/app/components/navbar.jsx
@@ -10,7 +10,7 @@ function Navbar() {
           <Link
             href="/"
             className=" text-[#16f2b3] text-3xl font-bold">
-            RIDHIMA JAIN
+            RJ
           </Link>
         </div>