diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a98f774..8a1b9e2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -40,7 +40,7 @@ const App: React.FC = () => {
               <Routes>
                 <Route path="/" element={<EventList />} />
                 <Route path="/create" element={<EventForm />} />
-                <Route path="/events/:slug" element={<RSVPForm />} />
+                <Route path="/events/:slug/rsvp" element={<RSVPForm />} />
               </Routes>
             </div>
           </main>
diff --git a/frontend/src/components/EventList.tsx b/frontend/src/components/EventList.tsx
index 303968a..62b17ef 100644
--- a/frontend/src/components/EventList.tsx
+++ b/frontend/src/components/EventList.tsx
@@ -16,6 +16,7 @@ interface Event {
   description: string;
   date: string;
   location: string;
+  slug: string;
 }
 
 const EventList: React.FC = () => {
@@ -35,6 +36,10 @@ const EventList: React.FC = () => {
     }
   };
 
+  const handleEventClick = (event: Event) => {
+    navigate(`/events/${event.slug}/rsvp`);
+  };
+
   return (
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
@@ -53,7 +58,15 @@ const EventList: React.FC = () => {
       <Grid container spacing={3}>
         {events.map((event) => (
           <Grid item xs={12} key={event.id}>
-            <Card>
+            <Card 
+              onClick={() => handleEventClick(event)}
+              sx={{ 
+                cursor: 'pointer',
+                '&:hover': {
+                  boxShadow: 6,
+                }
+              }}
+            >
               <CardContent>
                 <Typography variant="h5" component="h2">
                   {event.title}