diff --git a/src/pages/events.jsx b/src/pages/events.jsx
index a517d0d..e144c85 100644
--- a/src/pages/events.jsx
+++ b/src/pages/events.jsx
@@ -56,7 +56,7 @@ const Events = () => {
   };
 
   return  (
-    <div className="relative min-h-screen bg-transparent flex flex-col pl-4 ml-4 items-center justify-center">
+    <div className="relative min-h-screen bg-transparent flex flex-col ml-4 items-center justify-center">
       {isMobile ? (
         <div className="w-full max-w-6xl px-4">
         {slides.map((slide, index) => (
@@ -101,7 +101,7 @@ const Events = () => {
             }}
             pagination={{ clickable: true }}
             modules={[Autoplay, EffectCoverflow, Pagination]}
-            className="w-full max-w-5xl"
+            className="w-full max-w-5xl "
             onSlideChange={handleSlideChange}
             autoplay={{
               delay: 2000,
diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx
index a749ceb..8b739fa 100644
--- a/src/pages/projects.jsx
+++ b/src/pages/projects.jsx
@@ -23,8 +23,8 @@ const Project = () => {
 
   return (
     <section className="min-h-screen text-white grid grid-cols-1 place-items-center">
-      <div className="w-full  px-6 md:px-12">
-        <div className="text-4xl md:text-7xl font-bold text-center pb-16">
+      <div className="w-full px-6 md:px-12">
+        <div className="text-4xl md:text-7xl font-bold text-center mt-16 mb-8">
           Projects
         </div>
         <Swiper
@@ -36,22 +36,23 @@ const Project = () => {
         >
           {slides.map((slide, index) => (
             <SwiperSlide key={index}>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center place-items-center">
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 mx-20 gap-4 items-center place-items-center">
                 <img
                   src={slide.img}
                   alt={slide.title}
-                  className="max-w-[500px] w-full max-h-[450px] object-cover md:{max-h-[346px] max-w-[559px]} rounded-xl shadow-2xl shadow-[#7ac4ec]/30 sm:{max-h-[346px] max-w-[559px]}"
+                  className="max-w-[550px] w-full max-h-[450px] object-fill md:{max-h-[346px] w-full max-w-[559px]} rounded-xl shadow-2xl shadow-[#7ac4ec]/30 sm:{max-h-[346px] max-w-[59px]}"
                 />
-                <div className="rounded-[36px] p-0.5 bg-gradient-to-b flex justify-center from-b_col3 to-b_col4 h-[346px] md:h-auto shadow-2xl shadow-[#7ac4ec]/30">
-                  <div className="rounded-[calc(36px-1px)] p-6 md:p-12 bg-gradient-to-b md:w-full from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-full flex flex-col justify-between text-center text-white max-w-[559px]">
+                <div className="rounded-[36px] p-0.5 bg-gradient-to-b flex justify-center from-b_col3 to-b_col4 h-[346px] md:h-auto lg:w-[500px] md:w-[400px] shadow-2xl shadow-[#7ac4ec]/30">
+                  <div className="rounded-[calc(36px-1px)] p-6 md:p-12 md:h-auto bg-gradient-to-b md:w-full from-[#061b24] via-[#072031] to-[#000b11] flex flex-col text-center text-white max-w-[559px]">
                     <h2 className="text-3xl md:text-4xl text-b_col3 font-semibold mb-4">
                       {slide.title}
                     </h2>
-                    <p className="text-sm md:text-base">
-                      {slide.description}
-                    </p>
+                      <p className="text-sm md:text-base">
+                        {slide.description}
+                      </p>
                   </div>
                 </div>
+
               </div>
             </SwiperSlide>
           ))}