diff --git a/astro/src/components/web/UpcomingEvents.astro b/astro/src/components/web/UpcomingEvents.astro
index a368620..0b1f6c7 100644
--- a/astro/src/components/web/UpcomingEvents.astro
+++ b/astro/src/components/web/UpcomingEvents.astro
@@ -15,8 +15,8 @@ const upcomingEvents = Astro.props.upcomingEvents;
     
     <div class="flex flex-col items-start gap-7 w-full">
         { upcomingEvents.events.map((event) => (
-            <div id={event.id} class="flex flex-row items-center justify-center gap-y-8 gap-x-18">
-                <div class="lg:w-[40%] w-full">
+            <div id={event.id} class="flex lg:flex-row flex-col items-center justify-center lg:gap-y-8 gap-y-5 gap-x-18">
+                <div class="lg:w-[50%] w-full">
                     <Image
                         src={event.thumbnail.url}
                         width={event.thumbnail.width}
diff --git a/astro/src/components/web/subcomponents/UpcomingEvent.tsx b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
index a113ea9..88098cd 100644
--- a/astro/src/components/web/subcomponents/UpcomingEvent.tsx
+++ b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
@@ -17,7 +17,7 @@ export function upcomingEvent(props: { event: UpcomingEvent }) {
 
     return (
         <div>
-            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={open}>{"Read more >>"}</div>
+            <div className="hover:cursor-pointer text-indigo-400 underline w-fit text-lg font-semibold" onClick={open}>{"Read more >>"}</div>
 
             { isOpen && (
                 <div