diff --git a/src/components/events-list.tsx b/src/components/events-list.tsx
index 0706a85..733abd9 100644
--- a/src/components/events-list.tsx
+++ b/src/components/events-list.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
 import { Calendar1Icon } from "lucide-react";
 import type { CalendarEvent } from "@/lib/types";
 import { EventCard } from "./event-card";
@@ -11,28 +14,36 @@ interface EventsListProps {
 export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
 	if (events.length === 0) {
 		return (
-			<div className="flex flex-col items-center justify-center py-8 text-center">
-				<Calendar1Icon className="h-12 w-12 text-muted-foreground mb-4" />
-				<h3 className="text-lg font-medium text-muted-foreground">
-					No events yet
-				</h3>
-				<p className="text-sm text-muted-foreground">
-					Create your first event to get started
-				</p>
-			</div>
+			<motion.div
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				className="flex flex-col items-center justify-center py-16 text-center"
+			>
+				<div className="glass-card p-6 inline-flex flex-col items-center">
+					<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
+					<h3 className="text-sm font-medium text-muted-foreground">
+						No events yet
+					</h3>
+					<p className="text-xs text-muted-foreground/60 mt-1">
+						Create your first event to get started
+					</p>
+				</div>
+			</motion.div>
 		);
 	}
 
 	return (
-		<div className="space-y-4">
-			{events.map((event) => (
-				<EventCard
-					key={event.id}
-					event={event}
-					onEdit={onEdit}
-					onDelete={onDelete}
-				/>
-			))}
+		<div className="space-y-2">
+			<AnimatePresence mode="popLayout">
+				{events.map((event) => (
+					<EventCard
+						key={event.id}
+						event={event}
+						onEdit={onEdit}
+						onDelete={onDelete}
+					/>
+				))}
+			</AnimatePresence>
 		</div>
 	);
 };