diff --git a/frontend/lib/events/events_list.dart b/frontend/lib/events/events_list.dart
index d1dba1d..1ad2d33 100644
--- a/frontend/lib/events/events_list.dart
+++ b/frontend/lib/events/events_list.dart
@@ -3,67 +3,97 @@ import 'package:frontend/utils/friendly_date_formatter.dart';
 import '../model/event.dart';
 import '../model/device_type.dart';
 
-// Dummy events to display
-// TODO : Replace with API call
-final List<Event> events = <Event>[
-  Event(
-    id: 5,
-    title: 'New device found',
-    description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
-    isRead: false,
-    deviceType: DeviceType.phone,
-    dateTime: DateTime.now().subtract(Duration(minutes: 22)),
-  ),
-  Event(
-    id: 4,
-    title: 'New device found',
-    description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
-    isRead: false,
-    deviceType: DeviceType.pc,
-    dateTime: DateTime.now().subtract(Duration(minutes: 87)),
-  ),
-  Event(
-    id: 3,
-    title: 'New device found',
-    description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
-    isRead: false,
-    deviceType: DeviceType.tablet,
-    dateTime: DateTime.now().subtract(Duration(hours: 23)),
-  ),
-  Event(
-    id: 2,
-    title: 'New device found',
-    description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
-    isRead: false,
-    deviceType: DeviceType.server,
-    dateTime: DateTime(2026, 01, 19, 14, 47),
-  ),
-  Event(
-    id: 1,
-    title: 'New device found',
-    description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
-    isRead: false,
-    deviceType: DeviceType.phone,
-    dateTime: DateTime(2026, 01, 17, 14, 47),
-  ),
-];
+class EventsList extends StatefulWidget {
+  @override
+  _EventListState createState() => _EventListState();
+}
+
+class _EventListState extends State<EventsList> {
+  // Dummy events to display
+  // TODO : Replace with API call
+  List<Event> events = <Event>[
+    Event(
+      id: 5,
+      title: 'New device found',
+      description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
+      isRead: false,
+      deviceType: DeviceType.phone,
+      dateTime: DateTime.now().subtract(Duration(minutes: 22)),
+    ),
+    Event(
+      id: 4,
+      title: 'New device found',
+      description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
+      isRead: false,
+      deviceType: DeviceType.pc,
+      dateTime: DateTime.now().subtract(Duration(minutes: 87)),
+    ),
+    Event(
+      id: 3,
+      title: 'New device found',
+      description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
+      isRead: false,
+      deviceType: DeviceType.tablet,
+      dateTime: DateTime.now().subtract(Duration(hours: 23)),
+    ),
+    Event(
+      id: 2,
+      title: 'New device found',
+      description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
+      isRead: false,
+      deviceType: DeviceType.server,
+      dateTime: DateTime(2026, 01, 19, 14, 47),
+    ),
+    Event(
+      id: 1,
+      title: 'New device found',
+      description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
+      isRead: false,
+      deviceType: DeviceType.phone,
+      dateTime: DateTime(2026, 01, 17, 14, 47),
+    ),
+  ];
 
-class EventsList extends StatelessWidget {
-  const EventsList({super.key});
   @override
   Widget build(BuildContext context) {
-    return ListView.separated(
-      itemCount: events.length,
-      itemBuilder: (context, index) {
-        return ListTile(
-          leading: Icon(events[index].deviceType.icon),
-          title: Text(
-            '${FriendlyDateFormatter().format(events[index].dateTime)} - ${events[index].title}',
-          ),
-          subtitle: Text(events[index].description),
-        );
-      },
-      separatorBuilder: (context, index) => Divider(),
+    return Scaffold(
+      appBar: AppBar(title: const Text('Events')),
+      body: ListView.separated(
+        itemCount: events.length,
+        itemBuilder: (context, index) {
+          return Dismissible(
+            key: UniqueKey(),
+            onDismissed: (direction) {
+              setState(() {
+                events.removeAt(index);
+              });
+
+              ScaffoldMessenger.of(context).showSnackBar(
+                SnackBar(
+                  content: Text('Event marked as read'),
+                  behavior: SnackBarBehavior.floating,
+                  showCloseIcon: true,
+                ),
+              );
+            },
+            background: Container(
+              color: Theme.of(context).colorScheme.primaryContainer,
+              alignment: Alignment.center,
+              child: Icon(Icons.done),
+            ),
+            child: ListTile(
+              leading: Icon(events[index].deviceType.icon),
+              title: Text(
+                '${FriendlyDateFormatter().format(events[index].dateTime)} - ${events[index].title}',
+              ),
+              subtitle: Text(events[index].description),
+              trailing: Icon(Icons.more_vert),
+              onTap: () {},
+            ),
+          );
+        },
+        separatorBuilder: (context, index) => Divider(),
+      ),
     );
   }
 }
diff --git a/frontend/lib/navigation.dart b/frontend/lib/navigation.dart
index 5b64fd6..0da65f6 100644
--- a/frontend/lib/navigation.dart
+++ b/frontend/lib/navigation.dart
@@ -14,7 +14,7 @@ final GoRouter router = GoRouter(
         GoRoute(
           path: '/events',
           name: 'events',
-          builder: (context, state) => const EventsList(),
+          builder: (context, state) => EventsList(),
         ),
         GoRoute(
           path: '/devices',
@@ -49,7 +49,9 @@ class MainShell extends StatelessWidget {
         return Scaffold(
           appBar: AppBar(
             title: const Text('OOTT'),
-            backgroundColor: Theme.of(context).colorScheme.surfaceBright,
+            backgroundColor: Theme.of(
+              context,
+            ).colorScheme.surfaceContainerLowest,
           ),
           body: Row(
             children: [
@@ -57,7 +59,7 @@ class MainShell extends StatelessWidget {
                 child: NavigationRail(
                   backgroundColor: Theme.of(
                     context,
-                  ).colorScheme.primaryContainer,
+                  ).colorScheme.surfaceContainerLow,
                   extended: constraints.maxWidth >= 600,
                   destinations: [
                     NavigationRailDestination(
@@ -89,7 +91,7 @@ class MainShell extends StatelessWidget {
               Expanded(
                 child: Container(
                   padding: const EdgeInsets.all(20),
-                  color: Theme.of(context).colorScheme.surfaceDim,
+                  color: Theme.of(context).colorScheme.surface,
                   child: child,
                 ),
               ),