diff --git a/src/components/events/EventHeaders.tsx b/src/components/events/EventHeaders.tsx
index 6b57a09..b0f0583 100644
--- a/src/components/events/EventHeaders.tsx
+++ b/src/components/events/EventHeaders.tsx
@@ -1,3 +1,5 @@
+"use client";
+import { motion } from "framer-motion";
 import Header from "@/components/Header";
 
 type EventProps = {
@@ -10,12 +12,15 @@ type EventProps = {
 
 const Event = ({ name, description, location, time, side }: EventProps) => {
   return (
-    <div
+    <motion.div
       className={`mb-0 mt-0 flex flex-col text-white md:mb-8 md:mt-8 ${
         side === "left"
           ? "mr-auto items-start text-left"
           : "ml-auto items-end text-right"
       } w-11/12 md:max-w-[50%]`}
+      initial={{ opacity: 0, x: side === "left" ? -100 : 100 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.5 }}
     >
       <div className="w-1/2 flex-row justify-center text-xs md:w-full md:text-3xl">
         <Header position={side} title={name} />
@@ -26,7 +31,7 @@ const Event = ({ name, description, location, time, side }: EventProps) => {
         <p>{location}</p>
         <p>{time}</p>
       </div>
-    </div>
+    </motion.div>
   );
 };