diff --git a/app/components/homepage/projects/index.jsx b/app/components/homepage/projects/index.jsx
index c49f4f8..65fd4c0 100644
--- a/app/components/homepage/projects/index.jsx
+++ b/app/components/homepage/projects/index.jsx
@@ -1,56 +1,56 @@
-import {projectsData} from '@/utils/data/projects-data';
+import { projectsData } from '@/utils/data/projects-data';
 import ProjectCard from './project-card';
 import Image from "next/image";
 
 const Projects = () => {
+    return (
+        <div id='projects' className="relative z-50 my-12 lg:my-24">
+            <div className="sticky top-10">
+                <div className="w-[600px] h-[10px] bg-violet-100 rounded-full absolute -top-3 left-0 translate-x-1/2 filter blur-3xl opacity-30"></div>
 
-    return (<div id='projects' className="relative z-50  my-12 lg:my-24">
-        <div className="sticky top-10">
-            <div
-                className="w-[600px] h-[10px] bg-violet-100 rounded-full absolute -top-3 left-0 translate-x-1/2 filter blur-3xl  opacity-30"></div>
-
-            <div className="flex justify-center my-5 lg:py-8">
-                <div className="flex  items-center">
-                    <span className="w-24 h-[2px] bg-[#1a1443]"></span>
-                    <span className="bg-[#1a1443] w-fit text-white p-2 px-5 text-xl rounded-md">
-            Projects
-          </span>
-                    <span className="w-24 h-[2px] bg-[#1a1443]"></span>
+                <div className="flex justify-center my-5 lg:py-8 pt-10"> {/* Reduced pt-10 to pt-5 */}
+                    <div className="flex items-center">
+                        <span className="w-24 h-[2px] bg-[#1a1443]"></span>
+                        <span className="bg-[#1a1443] w-fit text-white p-2 px-5 text-xl rounded-md">
+              Projects
+            </span>
+                        <span className="w-24 h-[2px] bg-[#1a1443]"></span>
+                    </div>
                 </div>
             </div>
 
-        </div>
-        <Image
-            src="./section.svg"
-            alt="Hero"
-            width={1080 * 2}
-            height={200 * 2}
-            className="absolute top-0 left-1/2 transform -translate-x-1/2 opacity-80 mx-auto"
-        />
-        <div className="pt-24">
+            <Image
+                src="./section.svg"
+                alt="Hero"
+                width={1080 * 2}
+                height={200 * 2}
+                className="absolute top-0 left-1/2 transform -translate-x-1/2 opacity-80 mx-auto"
+            />
 
-            <div className="flex flex-col gap-6">
-                {projectsData.slice(0, 4).map((project, index) => (<div
-                    id={`sticky-card-${index + 1}`}
-                    key={index}
-                    className="sticky-card w-full mx-auto max-w-2xl sticky"
-                >
-                    <div
-                        className="box-border flex items-center justify-center rounded shadow-[0_0_30px_0_rgba(0,0,0,0.3)] transition-all duration-[0.5s] flex-mobile"> {/* Add flex-mobile class */}
-                        <ProjectCard project={project}/>
-                        <Image
-                            src="./blur-23.svg"
-                            alt="Hero"
-                            width={1080}
-                            height={200}
-                            className="absolute bottom-0 opacity-80"
-                        />
-                    </div>
-                </div>))}
+            <div className="pt-12"> {/* Reduced pt-24 to pt-12 */}
+                <div className="flex flex-col gap-6">
+                    {projectsData.slice(0, 4).map((project, index) => (
+                        <div
+                            id={`sticky-card-${index + 1}`}
+                            key={index}
+                            className="sticky-card w-full mx-auto max-w-2xl sticky"
+                        >
+                            <div className="box-border flex items-center justify-center rounded shadow-[0_0_30px_0_rgba(0,0,0,0.3)] transition-all duration-[0.5s] flex-mobile">
+                                <ProjectCard project={project} />
+                                <Image
+                                    src="./blur-23.svg"
+                                    alt="Hero"
+                                    width={1080}
+                                    height={200}
+                                    className="absolute bottom-0 opacity-80"
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
             </div>
         </div>
-    </div>);
+    );
 };
 
-
-export default Projects;
\ No newline at end of file
+export default Projects;
diff --git a/app/components/homepage/projects/project-card.jsx b/app/components/homepage/projects/project-card.jsx
index acee9bf..3ebbc45 100644
--- a/app/components/homepage/projects/project-card.jsx
+++ b/app/components/homepage/projects/project-card.jsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import Image from "next/image";
 
-function ProjectCard({project}) {
+function ProjectCard({ project }) {
     return (
-        <div
-            className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37] w-[1000px]">
+        <div className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37] w-[1000px]">
             <div className="flex-1">
                 <div className="flex flex-row">
                     <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-pink-500 to-violet-600"></div>
@@ -20,7 +19,8 @@ function ProjectCard({project}) {
                         {project.name}
                     </p>
                 </div>
-                <div className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-8">
+                <div
+                    className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-6"> {/* Adjusted padding here */}
                     <code className="font-mono text-xs md:text-sm lg:text-base">
                         <div className="blink">
                             <span className="mr-2 text-pink-500">const</span>
@@ -40,8 +40,8 @@ function ProjectCard({project}) {
                             <span className="text-gray-400">&#39;</span>
                             <span
                                 className="text-[#1C8AB5] underline group-hover:text-[#19F2B3] transition-colors duration-300">
-                {project.link}
-              </span>
+                                {project.link}
+                            </span>
                             <span className="text-gray-400">&#39;</span>
                             <a href={project.link} target="_blank" rel="noopener noreferrer"
                                className="absolute inset-0 z-10 cursor-pointer"
@@ -62,17 +62,14 @@ function ProjectCard({project}) {
                             <span className=" text-white">tools:</span>
                             <span className="text-gray-400">{` ['`}</span>
 
-                            {
-                                project.tools.map((tag, i) => (
-                                    <React.Fragment key={i}>
-                                        <span className="text-amber-300">{tag}</span>
-                                        {
-                                            project.tools.length - 1 !== i &&
-                                            <span className="text-gray-400">{`', '`}</span>
-                                        }
-                                    </React.Fragment>
-                                ))
-                            }
+                            {project.tools.map((tag, i) => (
+                                <React.Fragment key={i}>
+                                    <span className="text-amber-300">{tag}</span>
+                                    {project.tools.length - 1 !== i && (
+                                        <span className="text-gray-400">{`', '`}</span>
+                                    )}
+                                </React.Fragment>
+                            ))}
                             <span className="text-gray-400">{"'],"}</span>
                         </div>
                         <div>
@@ -85,31 +82,29 @@ function ProjectCard({project}) {
                             <span className="text-cyan-400">{' ' + project.description}</span>
                             <span className="text-gray-400"></span>
                         </div>
-                        <div>
-                            <span className="text-gray-400">{`};`}</span>
+                        <div><span className="text-gray-400">{`};`}</span>
+                        </div>
+                        <div
+                            className="flex justify-center items-center w-full h-full p-4 lg:p-8"> {/* Adjusted padding here */}
+                            <div className="w-full max-w-md lg:max-w-none lg:w-[135%]">
+                                <Image
+                                    src={project.image}
+                                    alt={project.name}
+                                    width={1080}
+                                    height={200}
+                                    className="w-full h-auto object-cover rounded-lg transform lg:scale-135"
+                                    style={{
+                                        maxWidth: '100%',
+                                        maxHeight: '100%',
+                                        objectFit: 'cover',
+                                        borderRadius: '10px',
+                                    }}
+                                />
+                            </div>
                         </div>
                     </code>
                 </div>
             </div>
-
-            {/*<div className="pl-4 lg:pl-10 pr-10 pb-10">*/}
-            <div className="flex justify-center items-center w-full h-full p-4 lg:p-12">
-                <div className="w-full max-w-md lg:max-w-none lg:w-[135%]">
-                    <Image
-                        src={project.image}
-                        alt={project.name}
-                        width={1080}
-                        height={200}
-                        className="w-full h-auto object-cover rounded-lg transform lg:scale-135"
-                        style={{
-                            maxWidth: '100%',
-                            maxHeight: '100%',
-                            objectFit: 'cover',
-                            borderRadius: '10px',
-                        }}
-                    />
-                </div>
-            </div>
         </div>
     );
 }