diff --git a/src/pages/events.astro b/src/pages/events.astro
index e286648..eade1e4 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -6,9 +6,15 @@ const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
 
 <Layout>
     <div
-        class="flex justify-center items-center font-medium text-ieee text-[2em] mt-6 mx-auto text-wrap text-center"
+        class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
+        style="background-image: url('/backgrounds/robocar.png');"
     >
-        Here is our timeline for the IEEE UCSD events:
+        <!-- BLUE BG -->
+        <div class="flex flex-col items-center justify-center text-center">
+            <div class="text-[3.2em] text-white font-bold mb-4 w-[11em]">
+                Here is our timeline for the IEEE UCSD events:
+            </div>
+        </div>
     </div>
 
     <EventList client:load CALENDAR_API_KEY={CALENDAR_API_KEY} />