diff --git a/components/home/RecentEvent.tsx b/components/home/RecentEvent.tsx
index 55c7a82..322ba96 100644
--- a/components/home/RecentEvent.tsx
+++ b/components/home/RecentEvent.tsx
@@ -49,7 +49,7 @@ const RecentEvent = () => {
       />
       <div className="absolute top-0 left-0 w-full h-full bg-black/60 z-10" />
 
-      <div className="max-w-7xl mx-auto grid lg:grid-cols-[1.2fr_auto_1fr] gap-12 relative z-20">
+      <div className="max-w-7xl mx-auto grid lg:grid-cols-[1.2fr_auto_1fr] lg:gap-12 gap-8 relative z-20">
 
         {/* Upcoming Events Column */}
         <motion.div
@@ -58,7 +58,7 @@ const RecentEvent = () => {
           viewport={{ once: true }}
           className="flex flex-col gap-8"
         >
-          <h2 className="font-header font-bold text-4xl text-white">
+          <h2 className="font-header font-bold text-3xl lg:text-4xl text-white">
             Upcoming Events
           </h2>
 
@@ -66,7 +66,7 @@ const RecentEvent = () => {
             {upcoming && upcoming.length > 0 ? (
               upcoming.map((event) => (
                 <Link href={`/events#event-${event.slug}`} key={event._id} className="group block w-full">
-                  <div className="flex items-center gap-4 p-4 pr-5 bg-white/95 backdrop-blur-sm dark:bg-card hover:bg-white dark:hover:bg-accent/50 rounded-2xl border-2 border-transparent hover:border-primary/30 transition-all duration-300 group-hover:scale-[1.02] shadow-sm">
+                  <div className="flex items-center gap-4 p-4 lg:pr-5 pr-4 bg-white/95 backdrop-blur-sm dark:bg-card hover:bg-white dark:hover:bg-accent/50 rounded-2xl border-2 border-transparent hover:border-primary/30 transition-all duration-300 group-hover:scale-[1.02] shadow-sm">
                     <div className="flex flex-col items-center justify-center w-16 h-16 rounded-xl bg-primary/10 text-primary border border-primary/20 shrink-0">
                       <span className="text-xs font-bold uppercase tracking-wider">
                         {format(new Date(event.eventDate), "MMM")}
@@ -77,7 +77,7 @@ const RecentEvent = () => {
                     </div>
 
                     <div className="flex-1 min-w-0">
-                      <h3 className="font-bold text-gray-900 dark:text-gray-100 truncate group-hover:text-primary transition-colors font-header text-lg">
+                      <h3 className="font-bold text-gray-900 dark:text-gray-100 line-clamp-2 group-hover:text-primary transition-colors font-header text-lg">
                         {event.title}
                       </h3>
                       <p className="text-sm text-muted-foreground line-clamp-1 mt-1">
@@ -98,7 +98,7 @@ const RecentEvent = () => {
             )}
           </div>
 
-          <div className="mt-4 p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10 shadow-2xl">
+          <div className="mt-4 p-6 lg:p-8 bg-linear-to-br from-gray-900 to-black rounded-3xl text-white relative overflow-hidden group border border-white/10 shadow-2xl">
             <div className="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-16 -mt-16 transition-all duration-500 group-hover:bg-primary/30"></div>
             <div className="relative z-10">
               <h3 className="font-bold text-xl mb-2 font-header">Join the Community</h3>
@@ -123,7 +123,7 @@ const RecentEvent = () => {
           className="flex flex-col gap-8"
         >
           <div className="flex items-center justify-between">
-            <h2 className="font-header font-bold text-4xl text-white flex items-center gap-3">
+            <h2 className="font-header font-bold text-3xl lg:text-4xl text-white flex items-center gap-3">
               Recent Events
               <div className="h-2 w-2 rounded-full bg-red-500 animate-pulse font-header" />
             </h2>
@@ -144,13 +144,13 @@ const RecentEvent = () => {
                       <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
                     </div>
 
-                    <div className="flex flex-col justify-between py-5 pr-7 flex-1 gap-2 sm:gap-0">
+                    <div className="flex flex-col justify-between p-4 sm:py-5 sm:pr-7 flex-1 gap-2 sm:gap-0">
                       <div>
                         <div className="flex items-center gap-2 text-primary font-bold text-[10px] uppercase tracking-widest mb-2">
                           <Clock className="w-3 h-3" />
                           completed
                         </div>
-                        <h3 className="font-header font-bold text-xl text-gray-900 line-clamp-2 group-hover:text-primary transition-colors mb-2 leading-tight">
+                        <h3 className="font-header font-bold text-lg sm:text-xl text-gray-900 line-clamp-2 group-hover:text-primary transition-colors mb-2 leading-tight">
                           {event.title}
                         </h3>
                         <p className="text-gray-500 text-sm line-clamp-2 leading-relaxed">