diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
index 5609cc4..83f7a3d 100644
--- a/src/components/Events/Events.jsx
+++ b/src/components/Events/Events.jsx
@@ -21,13 +21,12 @@ const Events = () => {
       <Title className={classes.heading} order={1}>
         Events
       </Title>
-      <SimpleGrid cols={{ base: 1, sm: 2 }}>
+      <SimpleGrid cols={{ base: 1, sm: 2 }} style={{maxWidth:`${27*2}rem` , margin: '0 auto'}}>
         {upcomingEvents.map((event, index) => {
           return (
             <Card key={index} p="md" radius="md" className={classes.card}>
               <AspectRatio ratio="auto">
                 <Image
-                  width={100}
                   radius={5}
                   src={event.banner}
                   alt="Event Poster"
diff --git a/src/components/Events/Events.module.css b/src/components/Events/Events.module.css
index 4b38d43..207e7e6 100644
--- a/src/components/Events/Events.module.css
+++ b/src/components/Events/Events.module.css
@@ -18,6 +18,8 @@
 }
 
 .card {
+  max-width: 25rem;
+  margin: auto;
   transition:
     transform 150ms ease,
     box-shadow 150ms ease;
@@ -25,6 +27,10 @@
   &:hover {
     box-shadow: var(--mantine-shadow-md);
   }
+  @media (max-width: $mantine-breakpoint-sm){ 
+    max-width: 30rem;
+    margin: auto;
+  }
 }
 
 .title {