diff --git a/backend.py b/backend.py
index 0b23558..0382593 100644
--- a/backend.py
+++ b/backend.py
@@ -88,6 +88,7 @@ def create_app():
     app.add_route('/demo/add', event_form)  # Handle event submission form
     app.add_route('/demo/by-what', demo, suffix='by_what')  # Handle events by type page
     app.add_route('/demo/map-by-what', demo, suffix='map_by_what')  # Handle map by event type page
+    app.add_route('/demo/map-by-what/{event_type}', demo, suffix='map_by_what_type')  # Handle map by specific event type
     app.add_route('/demo/edit/{id}', demo, suffix='edit')  # Handle event editing page
     app.add_route('/demo/by_id/{id}', demo, suffix='by_id')  # Handle view single event by id
     app.add_route('/demo/traffic', demo, suffix='traffic')  # Handle traffic jam reporting page
diff --git a/doc/api_endpoints.md b/doc/api_endpoints.md
new file mode 100644
index 0000000..340417d
--- /dev/null
+++ b/doc/api_endpoints.md
@@ -0,0 +1,160 @@
+# API Endpoints Documentation
+
+This document provides a comprehensive list of all API endpoints available in the OpenEventDatabase (OEDB) backend.
+
+## Main API Endpoints
+
+### Root Endpoint
+- **URL**: `/`
+- **Method**: GET
+- **Description**: Provides general information about the API, including version and available endpoints.
+- **Response**: JSON object with API information.
+
+### Event Endpoints
+
+#### Get Events
+- **URL**: `/event`
+- **Method**: GET
+- **Description**: Retrieves a collection of events based on query parameters.
+- **Query Parameters**:
+  - `what`: Filter events by type (e.g., `sport.match.football`)
+  - `when`: Filter events by time period (e.g., `last7days`, `today`, `tomorrow`)
+  - `limit`: Maximum number of events to return (default: 100)
+  - `bbox`: Bounding box for geographic filtering (format: `min_lon,min_lat,max_lon,max_lat`)
+- **Response**: GeoJSON FeatureCollection of events.
+
+#### Create Event
+- **URL**: `/event`
+- **Method**: POST
+- **Description**: Creates a new event.
+- **Request Body**: GeoJSON Feature representing the event.
+- **Response**: JSON object with the created event ID.
+
+#### Get Event by ID
+- **URL**: `/event/{id}`
+- **Method**: GET
+- **Description**: Retrieves a specific event by its ID.
+- **Response**: GeoJSON Feature of the requested event.
+
+#### Update Event
+- **URL**: `/event/{id}`
+- **Method**: PUT
+- **Description**: Updates an existing event.
+- **Request Body**: GeoJSON Feature with updated event data.
+- **Response**: JSON object with the updated event ID.
+
+#### Delete Event
+- **URL**: `/event/{id}`
+- **Method**: DELETE
+- **Description**: Deletes an event by its ID.
+- **Response**: JSON object confirming deletion.
+
+#### Search Events
+- **URL**: `/event/search`
+- **Method**: GET
+- **Description**: Advanced search for events with more complex filtering options.
+- **Query Parameters**: Various search parameters (see `/doc/api_search.md` for details).
+- **Response**: GeoJSON FeatureCollection of matching events.
+
+### Statistics Endpoint
+- **URL**: `/stats`
+- **Method**: GET
+- **Description**: Provides statistics about the database, including event counts and recent updates.
+- **Response**: JSON object with statistics.
+
+### RSS Feeds
+
+#### Latest Events RSS
+- **URL**: `/rss`
+- **Method**: GET
+- **Description**: Provides an RSS feed of the latest 200 events.
+- **Response**: XML RSS feed.
+
+#### Events by Family RSS
+- **URL**: `/rss/by/{family}`
+- **Method**: GET
+- **Description**: Provides an RSS feed of events filtered by family (e.g., sport, culture).
+- **Response**: XML RSS feed.
+
+### Database Dumps
+
+#### List Database Dumps
+- **URL**: `/db/dumps`
+- **Method**: GET
+- **Description**: Lists all available database dumps.
+- **Response**: JSON object with list of dumps.
+
+#### Create Database Dumps
+- **URL**: `/db/dumps/create`
+- **Method**: POST
+- **Description**: Creates new database dumps in SQL and GeoJSON formats.
+- **Response**: JSON object with information about the created dumps.
+
+## Demo/UI Endpoints
+
+These endpoints provide web interfaces for interacting with the API:
+
+### Main Demo Page
+- **URL**: `/demo`
+- **Method**: GET
+- **Description**: Main demo page with a map interface to explore events.
+
+### Event Submission Form
+- **URL**: `/demo/add`
+- **Method**: GET
+- **Description**: Form for submitting new events.
+
+### Events by Type
+- **URL**: `/demo/by-what`
+- **Method**: GET
+- **Description**: Page showing events grouped by their type.
+
+### Map by Event Type
+- **URL**: `/demo/map-by-what`
+- **Method**: GET
+- **Description**: Map interface showing events colored by their type.
+
+### Event Editing
+- **URL**: `/demo/edit/{id}`
+- **Method**: GET
+- **Description**: Interface for editing an existing event.
+
+### View Event by ID
+- **URL**: `/demo/by_id/{id}`
+- **Method**: GET
+- **Description**: Page showing details of a specific event.
+
+### Traffic Jam Reporting
+- **URL**: `/demo/traffic`
+- **Method**: GET
+- **Description**: Interface for reporting traffic jams.
+
+### View Saved Events
+- **URL**: `/demo/view-events`
+- **Method**: GET
+- **Description**: Page showing events saved by the user.
+
+### Statistics by Event Type
+- **URL**: `/demo/stats`
+- **Method**: GET
+- **Description**: Page showing statistics grouped by event type.
+
+### Live Events
+- **URL**: `/demo/live`
+- **Method**: GET
+- **Description**: Real-time view of events with auto-refresh.
+
+## Static Files
+- **URL**: `/static/`
+- **Method**: GET
+- **Description**: Serves static files (CSS, JavaScript, images) for the demo interfaces.
+
+## Additional Documentation
+
+For more detailed information about specific aspects of the API, refer to these documents:
+
+- [API Query Parameters](/doc/api_query_params.md)
+- [API Search](/doc/api_search.md)
+- [API Load Testing](/doc/api_load_test.md)
+- [Anti-Spam Measures](/doc/anti_spam.md)
+- [Demo Endpoint](/doc/demo_endpoint.md)
\ No newline at end of file
diff --git a/extractors/agenda_geek.py b/extractors/agenda_geek.py
index 5721990..eff6be1 100644
--- a/extractors/agenda_geek.py
+++ b/extractors/agenda_geek.py
@@ -37,9 +37,10 @@ logging.basicConfig(
 logger = logging.getLogger(__name__)
 
 class AgendaGeekScraper:
-    def __init__(self, api_url: str = "https://api.openeventdatabase.org", dry_run: bool = False):
+    def __init__(self, api_url: str = "https://api.openeventdatabase.org", dry_run: bool = False, page: int = 1):
         self.api_url = api_url.rstrip('/')
         self.dry_run = dry_run
+        self.page = page
         self.session = requests.Session()
         self.session.headers.update({
             'User-Agent': 'OEDB-AgendaGeek-Scraper/1.0 (+https://github.com/cquest/oedb)'
@@ -47,7 +48,7 @@ class AgendaGeekScraper:
 
     def get_events_list(self) -> List[str]:
         """Récupère la liste des liens d'événements depuis la page principale"""
-        url = "https://lagendageek.com/tevents/page/10"
+        url = f"https://lagendageek.com/tevents/page/{self.page}"
         logger.info(f"🔍 Récupération de la liste des événements depuis {url}")
 
         try:
@@ -395,7 +396,8 @@ class AgendaGeekScraper:
 
 def main():
     parser = argparse.ArgumentParser(description='Scraper Agenda Geek vers OEDB')
-    parser.add_argument('--limit', type=int, default=5, help='Nombre d\'événements à traiter')
+    parser.add_argument('--limit', type=int, default=20, help='Nombre d\'événements à traiter')
+    parser.add_argument('--page', type=int, default=1, help='Numéro de page du site')
     parser.add_argument('--offset', type=int, default=0, help='Nombre d\'événements à ignorer')
     parser.add_argument('--api-url', default='https://api.openeventdatabase.org', help='URL de l\'API OEDB')
     parser.add_argument('--dry-run', action='store_true', help='Mode test sans envoi vers l\'API')
@@ -406,7 +408,7 @@ def main():
     if args.verbose:
         logging.getLogger().setLevel(logging.DEBUG)
 
-    scraper = AgendaGeekScraper(api_url=args.api_url, dry_run=args.dry_run)
+    scraper = AgendaGeekScraper(api_url=args.api_url, dry_run=args.dry_run, page=args.page)
     scraper.process_events(limit=args.limit, offset=args.offset)
 
 if __name__ == "__main__":
diff --git a/extractors/agenda_geek_scraper.log b/extractors/agenda_geek_scraper.log
new file mode 100644
index 0000000..9d65272
--- /dev/null
+++ b/extractors/agenda_geek_scraper.log
@@ -0,0 +1,187 @@
+2025-09-26 17:16:58,979 - INFO - 🚀 Début du traitement - Limite: 15, Offset: 5
+2025-09-26 17:16:58,979 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/10
+2025-09-26 17:17:02,288 - INFO - ✅ 20 événements trouvés sur la page
+2025-09-26 17:17:02,288 - INFO - 📊 Traitement de 15 événements (6 à 20 sur 20)
+2025-09-26 17:17:02,288 - INFO - 🔄 [1/15] Traitement de https://lagendageek.com/tevent/fusion-event/
+2025-09-26 17:17:05,978 - INFO - ✅ Événement créé avec succès: ID aaacbb4a-be1c-467d-9f78-3db61861937b
+2025-09-26 17:17:06,979 - INFO - 🔄 [2/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-pompaire/
+2025-09-26 17:17:11,004 - INFO - ✅ Événement créé avec succès: ID f298700e-4f2b-4682-a978-a364be0cccfc
+2025-09-26 17:17:12,004 - INFO - 🔄 [3/15] Traitement de https://lagendageek.com/tevent/geek-la-gaillarde/
+2025-09-26 17:17:15,890 - INFO - ✅ Événement créé avec succès: ID 7ce8f4c0-56b4-4cb3-acf7-56e919d4b9d6
+2025-09-26 17:17:16,890 - INFO - 🔄 [4/15] Traitement de https://lagendageek.com/tevent/geek-legends-lons-le-saunier-4/
+2025-09-26 17:17:19,827 - INFO - 🚀 Début du traitement - Limite: 15, Offset: 5
+2025-09-26 17:17:19,827 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/10
+2025-09-26 17:17:20,787 - INFO - ✅ Événement créé avec succès: ID f96f9167-1271-4804-bebe-eb3f282c69b3
+2025-09-26 17:17:21,788 - INFO - 🔄 [5/15] Traitement de https://lagendageek.com/tevent/korean-tours-festival-2026/
+2025-09-26 17:17:23,000 - INFO - ✅ 20 événements trouvés sur la page
+2025-09-26 17:17:23,000 - INFO - 📊 Traitement de 15 événements (6 à 20 sur 20)
+2025-09-26 17:17:23,000 - INFO - 🔄 [1/15] Traitement de https://lagendageek.com/tevent/fusion-event/
+2025-09-26 17:17:25,823 - INFO - ✅ Événement créé avec succès: ID 41e49d2f-a3f7-4b4c-886b-9c651fbad423
+2025-09-26 17:17:26,824 - INFO - 🔄 [6/15] Traitement de https://lagendageek.com/tevent/festival-international-des-jeux-2026/
+2025-09-26 17:17:26,978 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:27,979 - INFO - 🔄 [2/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-pompaire/
+2025-09-26 17:17:30,822 - INFO - ✅ Événement créé avec succès: ID b1750ba1-fb5f-4a6f-974d-48dbad081ce6
+2025-09-26 17:17:31,701 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:31,823 - INFO - 🔄 [7/15] Traitement de https://lagendageek.com/tevent/japan-expo-marseille-2026/
+2025-09-26 17:17:32,702 - INFO - 🔄 [3/15] Traitement de https://lagendageek.com/tevent/geek-la-gaillarde/
+2025-09-26 17:17:35,542 - INFO - ✅ Événement créé avec succès: ID 4e145c54-3aed-4ad1-8c76-a14a13019585
+2025-09-26 17:17:36,311 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:36,543 - INFO - 🔄 [8/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-puilboreau/
+2025-09-26 17:17:37,311 - INFO - 🔄 [4/15] Traitement de https://lagendageek.com/tevent/geek-legends-lons-le-saunier-4/
+2025-09-26 17:17:40,290 - INFO - ✅ Événement créé avec succès: ID a7ac00a9-1946-48a9-afbe-2f388a274d32
+2025-09-26 17:17:41,033 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:41,291 - INFO - 🔄 [9/15] Traitement de https://lagendageek.com/tevent/aka-to-kin-2026/
+2025-09-26 17:17:42,033 - INFO - 🔄 [5/15] Traitement de https://lagendageek.com/tevent/korean-tours-festival-2026/
+2025-09-26 17:17:45,558 - INFO - ✅ Événement créé avec succès: ID 3ede724b-acfc-4dc9-a7a6-4bbaf651ecf9
+2025-09-26 17:17:46,088 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:46,558 - INFO - 🔄 [10/15] Traitement de https://lagendageek.com/tevent/un-week-end-au-soleil-levant-2026/
+2025-09-26 17:17:47,088 - INFO - 🔄 [6/15] Traitement de https://lagendageek.com/tevent/festival-international-des-jeux-2026/
+2025-09-26 17:17:50,631 - INFO - ✅ Événement créé avec succès: ID 4fbe7d72-b2df-4ea7-9e6a-39ee8f1f2714
+2025-09-26 17:17:50,815 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:51,632 - INFO - 🔄 [11/15] Traitement de https://lagendageek.com/tevent/caramanga-2026/
+2025-09-26 17:17:51,815 - INFO - 🔄 [7/15] Traitement de https://lagendageek.com/tevent/japan-expo-marseille-2026/
+2025-09-26 17:17:55,267 - INFO - ✅ Événement créé avec succès: ID 097f54b9-e039-4493-8e1e-c472e3534c0e
+2025-09-26 17:17:55,468 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:17:56,268 - INFO - 🔄 [12/15] Traitement de https://lagendageek.com/tevent/ready-set-romance-2026/
+2025-09-26 17:17:56,468 - INFO - 🔄 [8/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-puilboreau/
+2025-09-26 17:18:00,079 - INFO - ✅ Événement créé avec succès: ID 3688b1aa-8967-4f7a-816c-be66e026b55a
+2025-09-26 17:18:00,236 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:01,080 - INFO - 🔄 [13/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-aiffres/
+2025-09-26 17:18:01,236 - INFO - 🔄 [9/15] Traitement de https://lagendageek.com/tevent/aka-to-kin-2026/
+2025-09-26 17:18:05,298 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:05,552 - INFO - ✅ Événement créé avec succès: ID 2c22c1fc-7736-4a7a-bc10-72c19d16e3e6
+2025-09-26 17:18:06,299 - INFO - 🔄 [10/15] Traitement de https://lagendageek.com/tevent/un-week-end-au-soleil-levant-2026/
+2025-09-26 17:18:06,552 - INFO - 🔄 [14/15] Traitement de https://lagendageek.com/tevent/paris-manga-sci-fi-show-39e-edition/
+2025-09-26 17:18:10,028 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:10,635 - INFO - ✅ Événement créé avec succès: ID 50e4b035-b8cc-4d86-9d4c-e00804a26e4d
+2025-09-26 17:18:11,029 - INFO - 🔄 [11/15] Traitement de https://lagendageek.com/tevent/caramanga-2026/
+2025-09-26 17:18:11,636 - INFO - 🔄 [15/15] Traitement de https://lagendageek.com/tevent/symphony-on-titan-10/
+2025-09-26 17:18:14,718 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:15,317 - INFO - ✅ Événement créé avec succès: ID 8b0e0708-803f-44b3-bc1c-a327e6678c02
+2025-09-26 17:18:15,719 - INFO - 🔄 [12/15] Traitement de https://lagendageek.com/tevent/ready-set-romance-2026/
+2025-09-26 17:18:16,317 - INFO - 🏁 Traitement terminé - Succès: 15, Erreurs: 0
+2025-09-26 17:18:19,495 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:20,495 - INFO - 🔄 [13/15] Traitement de https://lagendageek.com/tevent/manga-ten-expo-aiffres/
+2025-09-26 17:18:24,020 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:25,021 - INFO - 🔄 [14/15] Traitement de https://lagendageek.com/tevent/paris-manga-sci-fi-show-39e-edition/
+2025-09-26 17:18:28,610 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:29,611 - INFO - 🔄 [15/15] Traitement de https://lagendageek.com/tevent/symphony-on-titan-10/
+2025-09-26 17:18:33,074 - INFO - ⚠️ Événement déjà existant (conflit)
+2025-09-26 17:18:34,074 - INFO - 🏁 Traitement terminé - Succès: 15, Erreurs: 0
+2025-09-26 17:19:56,059 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:22:50,865 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:22:50,865 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/11
+2025-09-26 17:22:54,108 - INFO - ✅ 20 événements trouvés sur la page
+2025-09-26 17:22:54,108 - INFO - 📊 Traitement de 20 événements (1 à 20 sur 20)
+2025-09-26 17:22:54,108 - INFO - 🔄 [1/20] Traitement de https://lagendageek.com/tevent/les-plus-belles-musiques-des-films-de-miyazaki-9/
+2025-09-26 17:22:57,706 - INFO - 🏃‍♂️ DRY RUN - Événement qui serait envoyé:
+2025-09-26 17:22:57,706 - INFO - {
+  "type": "Feature",
+  "geometry": {
+    "type": "Point",
+    "coordinates": [
+      5.4540272,
+      43.5274379
+    ]
+  },
+  "properties": {
+    "label": "Les Plus Belles Musiques des Films de Miyazaki",
+    "type": "scheduled",
+    "what": "culture.geek",
+    "start": "2026-03-14T20:30:00+00:00",
+    "stop": "2026-03-14T21:15:00+00:00",
+    "where": "Théâtre du jeu de paume, 21 rue de l'Opéra, Aix en Provence, 13100, France",
+    "description": "Quatuor de musiciens passionnés de pop culture, le Grissini project vous interprète les plus belles musiques des films d’animation d’Hayao Miyazaki. \nAu programme, les plus beaux thèmes : “Le Voyage de Chihiro”, “Mon Voisin Totoro”, “Le Château ambulant”, “Princesse Mononoké”, “Le Vent se lève”, “Kiki la petite sorcière”, “Ponyo sur la falaise”,…\nEt tant d’autres ! \nAu croisement de la musique classique et de la pop culture, une évasion le temps d’un concert dans le Japon fantastique des studios Ghibli, au son des mélodies de Joe Hisaishi. \nLes Artistes :\nRomain Vaudé | Piano\nMaja Samuelsson ou Stella Siecinska | Chant\nFlorestan Raes | Violon\nClara Germont | Violoncelle",
+    "source:name": "L'Agenda Geek",
+    "source:url": "https://lagendageek.com/tevent/les-plus-belles-musiques-des-films-de-miyazaki-9/",
+    "source:uid": "85107-1773520200-1773522900@lagendageek.com",
+    "url": "https://lagendageek.com/tevent/les-plus-belles-musiques-des-films-de-miyazaki-9/"
+  }
+}
+2025-09-26 17:22:58,707 - INFO - 🔄 [2/20] Traitement de https://lagendageek.com/tevent/salon-du-manga-a-cambrai-2026/
+2025-09-26 17:23:13,137 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:23:13,137 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/11
+2025-09-26 17:23:17,425 - INFO - ✅ 20 événements trouvés sur la page
+2025-09-26 17:23:17,425 - INFO - 📊 Traitement de 20 événements (1 à 20 sur 20)
+2025-09-26 17:23:17,425 - INFO - 🔄 [1/20] Traitement de https://lagendageek.com/tevent/les-plus-belles-musiques-des-films-de-miyazaki-9/
+2025-09-26 17:23:21,400 - INFO - ✅ Événement créé avec succès: ID 97318052-05d6-420a-b7a7-7323587c69cd
+2025-09-26 17:23:22,400 - INFO - 🔄 [2/20] Traitement de https://lagendageek.com/tevent/salon-du-manga-a-cambrai-2026/
+2025-09-26 17:23:26,785 - INFO - ✅ Événement créé avec succès: ID 91cde5d3-1856-482c-b26e-daccfe205776
+2025-09-26 17:23:27,785 - INFO - 🔄 [3/20] Traitement de https://lagendageek.com/tevent/manga-ten-expo-montamise/
+2025-09-26 17:23:31,599 - INFO - ✅ Événement créé avec succès: ID 561e571a-e8ff-4294-9983-bccef1b8a2e0
+2025-09-26 17:23:32,599 - INFO - 🔄 [4/20] Traitement de https://lagendageek.com/tevent/gresimaginaire-2026/
+2025-09-26 17:23:36,432 - INFO - ✅ Événement créé avec succès: ID 364686b5-2827-4549-b755-18c6edbf5e68
+2025-09-26 17:23:37,433 - INFO - 🔄 [5/20] Traitement de https://lagendageek.com/tevent/geek-collector-vesoul-6/
+2025-09-26 17:23:41,224 - INFO - ✅ Événement créé avec succès: ID e0e4a486-5558-498b-bb1c-39b02b95e843
+2025-09-26 17:23:42,224 - INFO - 🔄 [6/20] Traitement de https://lagendageek.com/tevent/trolls-legendes-2026/
+2025-09-26 17:23:45,859 - INFO - ✅ Événement créé avec succès: ID ad4f54c3-db63-48ae-abe2-c9030520b5f4
+2025-09-26 17:23:46,860 - INFO - 🔄 [7/20] Traitement de https://lagendageek.com/tevent/manga-ten-expo-saint-leger-sous-cholet/
+2025-09-26 17:23:50,504 - INFO - ✅ Événement créé avec succès: ID 856852dc-23bd-431b-b044-fd93a920c568
+2025-09-26 17:23:51,504 - INFO - 🔄 [8/20] Traitement de https://lagendageek.com/tevent/angers-geekfest-2026/
+2025-09-26 17:23:55,307 - INFO - ✅ Événement créé avec succès: ID 796cc0b3-b41f-48cf-bc73-38088388d75f
+2025-09-26 17:23:56,308 - INFO - 🔄 [9/20] Traitement de https://lagendageek.com/tevent/tgs-montpellier-occitanie-game-show-2026/
+2025-09-26 17:24:00,060 - INFO - ✅ Événement créé avec succès: ID c39a76c6-4eb3-4b2b-aad6-719dd4b95e7e
+2025-09-26 17:24:01,060 - INFO - 🔄 [10/20] Traitement de https://lagendageek.com/tevent/marche-du-geek/
+2025-09-26 17:24:05,081 - INFO - ✅ Événement créé avec succès: ID dcbcc6e4-4916-4a01-8751-d19a42b1b9cc
+2025-09-26 17:24:06,082 - INFO - 🔄 [11/20] Traitement de https://lagendageek.com/tevent/necronomicon-2026-8eme-edition/
+2025-09-26 17:24:09,879 - INFO - ✅ Événement créé avec succès: ID 0d0cdb50-921d-4ff3-91c0-0061e9b08df1
+2025-09-26 17:24:10,879 - INFO - 🔄 [12/20] Traitement de https://lagendageek.com/tevent/gamefest-charleville-m-11/
+2025-09-26 17:24:14,606 - INFO - ✅ Événement créé avec succès: ID 19fee274-bc24-4ca7-9839-0ab5c6ade607
+2025-09-26 17:24:15,606 - INFO - 🔄 [13/20] Traitement de https://lagendageek.com/tevent/11eme-vide-grenier-du-geek-de-nancy/
+2025-09-26 17:24:19,413 - INFO - ✅ Événement créé avec succès: ID 5c8cdb6d-2efe-4d12-aa2c-ad96f6a95f24
+2025-09-26 17:24:20,413 - INFO - 🔄 [14/20] Traitement de https://lagendageek.com/tevent/luxcon-2026/
+2025-09-26 17:24:23,984 - INFO - ✅ Événement créé avec succès: ID 39a2a818-44a4-4acc-9322-e26bf8f138fd
+2025-09-26 17:24:24,984 - INFO - 🔄 [15/20] Traitement de https://lagendageek.com/tevent/manga-ten-expo-louverne/
+2025-09-26 17:24:28,806 - INFO - ✅ Événement créé avec succès: ID 988c8408-c882-401e-a3af-3e56ddbcd7eb
+2025-09-26 17:24:29,806 - INFO - 🔄 [16/20] Traitement de https://lagendageek.com/tevent/mangazur-2026/
+2025-09-26 17:24:33,649 - INFO - ✅ Événement créé avec succès: ID c9698756-7d64-4d6e-b3b9-983698b45a36
+2025-09-26 17:24:34,649 - INFO - 🔄 [17/20] Traitement de https://lagendageek.com/tevent/play-azur-festival-2026/
+2025-09-26 17:24:38,474 - INFO - ✅ Événement créé avec succès: ID a17a3b8f-eb98-4570-a9e8-83f4df729772
+2025-09-26 17:24:39,474 - INFO - 🔄 [18/20] Traitement de https://lagendageek.com/tevent/manga-ten-expo-chartres-de-bretagne/
+2025-09-26 17:24:43,220 - INFO - ✅ Événement créé avec succès: ID 11f56563-2488-402a-8391-df9b6ec6048f
+2025-09-26 17:24:44,221 - INFO - 🔄 [19/20] Traitement de https://lagendageek.com/tevent/geek-collector-remiremont-1/
+2025-09-26 17:24:47,904 - INFO - ✅ Événement créé avec succès: ID 6a638653-44c3-4b27-81c9-818cdfeba1f5
+2025-09-26 17:24:48,904 - INFO - 🔄 [20/20] Traitement de https://lagendageek.com/tevent/geek-collector-saone-1/
+2025-09-26 17:24:52,503 - INFO - ✅ Événement créé avec succès: ID 2724f778-12cf-4736-affc-5b4736a6cdab
+2025-09-26 17:24:53,504 - INFO - 🏁 Traitement terminé - Succès: 20, Erreurs: 0
+2025-09-26 17:31:02,356 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:31:02,356 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/12
+2025-09-26 17:31:05,337 - INFO - ✅ 14 événements trouvés sur la page
+2025-09-26 17:31:05,337 - INFO - 📊 Traitement de 14 événements (1 à 14 sur 14)
+2025-09-26 17:31:05,337 - INFO - 🔄 [1/14] Traitement de https://lagendageek.com/tevent/jap-and-co-2026/
+2025-09-26 17:31:09,095 - INFO - ✅ Événement créé avec succès: ID 66bc6e6d-f386-47f5-8f42-9650c137b659
+2025-09-26 17:31:10,096 - INFO - 🔄 [2/14] Traitement de https://lagendageek.com/tevent/geek-legends-oyonnax-1/
+2025-09-26 17:31:13,726 - INFO - ✅ Événement créé avec succès: ID f7e4e973-8b84-4df5-8158-d7854351a2c1
+2025-09-26 17:31:14,727 - INFO - 🔄 [3/14] Traitement de https://lagendageek.com/tevent/margny-compiegne-geek-convention-2026/
+2025-09-26 17:31:18,376 - INFO - ✅ Événement créé avec succès: ID 0389acba-3309-46c0-8b81-8f5b1074c55c
+2025-09-26 17:31:19,377 - INFO - 🔄 [4/14] Traitement de https://lagendageek.com/tevent/manga-mania-2026/
+2025-09-26 17:31:20,101 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:31:20,101 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/13
+2025-09-26 17:31:22,153 - INFO - 🚀 Début du traitement - Limite: 20, Offset: 0
+2025-09-26 17:31:22,153 - INFO - 🔍 Récupération de la liste des événements depuis https://lagendageek.com/tevents/page/14
+2025-09-26 17:31:22,843 - INFO - ✅ 0 événements trouvés sur la page
+2025-09-26 17:31:22,843 - ERROR - ❌ Aucun événement trouvé
+2025-09-26 17:31:23,086 - INFO - ✅ Événement créé avec succès: ID 5bd2bc22-95f7-4d25-9d10-de80c747dfda
+2025-09-26 17:31:24,087 - INFO - 🔄 [5/14] Traitement de https://lagendageek.com/tevent/japan-addict-z-2026/
+2025-09-26 17:31:24,902 - INFO - ✅ 0 événements trouvés sur la page
+2025-09-26 17:31:24,902 - ERROR - ❌ Aucun événement trouvé
+2025-09-26 17:31:27,784 - INFO - ✅ Événement créé avec succès: ID 57a3cf0f-1bc8-4249-9423-ba0fd9e1bd97
+2025-09-26 17:31:28,785 - INFO - 🔄 [6/14] Traitement de https://lagendageek.com/tevent/convention-geek-unchained-2026/
+2025-09-26 17:31:32,336 - INFO - ✅ Événement créé avec succès: ID 4a5f2fe2-c151-4f87-bba2-27c4f3b144e1
+2025-09-26 17:31:33,336 - INFO - 🔄 [7/14] Traitement de https://lagendageek.com/tevent/tgs-springbreak-2026/
+2025-09-26 17:31:37,070 - INFO - ✅ Événement créé avec succès: ID 34c196bb-99cc-4879-9654-a1aed1883dcf
+2025-09-26 17:31:38,070 - INFO - 🔄 [8/14] Traitement de https://lagendageek.com/tevent/japan-tours-festival-2026/
+2025-09-26 17:31:41,706 - INFO - ✅ Événement créé avec succès: ID cda8ad1f-ab01-4ecd-bc8a-281b7ae22a80
+2025-09-26 17:31:42,707 - INFO - 🔄 [9/14] Traitement de https://lagendageek.com/tevent/magic-odyssey-1ere-edition/
+2025-09-26 17:31:46,672 - INFO - ✅ Événement créé avec succès: ID 2279aea0-d0a0-4292-a6f0-676d5db001cd
+2025-09-26 17:31:47,672 - INFO - 🔄 [10/14] Traitement de https://lagendageek.com/tevent/japan-expo-2026/
+2025-09-26 17:31:51,385 - INFO - ✅ Événement créé avec succès: ID 4c346ef7-7b2c-463b-8e46-e84b756e4c8b
+2025-09-26 17:31:52,386 - INFO - 🔄 [11/14] Traitement de https://lagendageek.com/tevent/manga-deauville-2026/
+2025-09-26 17:31:56,045 - INFO - ✅ Événement créé avec succès: ID ab08bdf2-a6f8-4dfc-904f-fc696abaa6c9
+2025-09-26 17:31:57,046 - INFO - 🔄 [12/14] Traitement de https://lagendageek.com/tevent/japan-chatels-festival/
+2025-09-26 17:32:00,523 - INFO - ✅ Événement créé avec succès: ID a993b526-7442-411d-a5e5-05be4ec2cc70
+2025-09-26 17:32:01,523 - INFO - 🔄 [13/14] Traitement de https://lagendageek.com/tevent/brussels-games-festival-2026/
+2025-09-26 17:32:05,369 - INFO - ✅ Événement créé avec succès: ID 48a6c0d6-76c1-4cb6-84b4-f5197ebd41b5
+2025-09-26 17:32:06,370 - INFO - 🔄 [14/14] Traitement de https://lagendageek.com/tevent/steven-spielberg-hommage-80-ans/
+2025-09-26 17:32:10,298 - INFO - ✅ Événement créé avec succès: ID c73cd045-b199-404f-a256-cd14977abe95
+2025-09-26 17:32:11,299 - INFO - 🏁 Traitement terminé - Succès: 14, Erreurs: 0
diff --git a/oedb/resources/demo.py b/oedb/resources/demo.py
index 01b091f..492252b 100644
--- a/oedb/resources/demo.py
+++ b/oedb/resources/demo.py
@@ -207,6 +207,39 @@ class DemoResource:
             logger.error(f"Error processing GET request to /demo/map-by-what: {e}")
             resp.status = falcon.HTTP_500
             resp.text = f"Error: {str(e)}"
+
+    def on_get_map_by_what_type(self, req, resp, event_type):
+        """
+        Handle GET requests to the /demo/map-by-what/{type} endpoint.
+        Returns an HTML page with a MapLibre map showing events of a specific type,
+        colored by temporality (past/present/future) with a detailed table.
+
+        Args:
+            req: The request object.
+            resp: The response object.
+            event_type: The event type to filter by.
+        """
+        logger.info(f"Processing GET request to /demo/map-by-what/{event_type}")
+
+        try:
+            # Set content type to HTML
+            resp.content_type = 'text/html'
+
+            # Render the template with the event type
+            template = self.jinja_env.get_template('map_by_what_type.html')
+            html = template.render(
+                event_type=event_type,
+                event_type_label=event_type.replace('_', ' ').title()
+            )
+
+            # Set the response body and status
+            resp.text = html
+            resp.status = falcon.HTTP_200
+            logger.success(f"Successfully processed GET request to /demo/map-by-what/{event_type}")
+        except Exception as e:
+            logger.error(f"Error processing GET request to /demo/map-by-what/{event_type}: {e}")
+            resp.status = falcon.HTTP_500
+            resp.text = f"Error: {str(e)}"
             events_by_what = defaultdict(list)
             
             if events_data.get('features'):
diff --git a/oedb/resources/demo/demo_main.py b/oedb/resources/demo/demo_main.py
index a4012b3..398fb30 100644
--- a/oedb/resources/demo/demo_main.py
+++ b/oedb/resources/demo/demo_main.py
@@ -44,6 +44,8 @@ class DemoMainResource:
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>OpenEventDatabase Demo</title>
+                <link rel="icon" type="image/png" href="/static/oedb.png">
+                <link rel="icon" type="image/png" href="/static/oedb.png">
                 <script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
                 <link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
                 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
@@ -287,38 +289,24 @@ class DemoMainResource:
                 <script>
                     // Fonction pour gérer les listes dépliantes et sections collapsibles
                     document.addEventListener('DOMContentLoaded', function() {
-                        const endpointsHeader = document.getElementById('endpoints_list_header');
-                        const endpointsList = document.getElementById('endpoints_list');
-                        const demoPagesHeader = document.getElementById('demo_pages_list_header');
-                        const demoPagesList = document.getElementById('demo_pages_list');
-                        const infoPanelHeader = document.getElementById('info_panel_header');
-                        const infoPanelContent = document.getElementById('info_panel_content');
                         const filtersPanel = document.getElementById('filters_panel');
                         const filtersHeader = document.getElementById('filters_header');
 
                         // Fonction pour basculer l'affichage d'une liste ou section
                         function toggleList(header, list) {
-                            header.addEventListener('click', function() {
-                                if (list.style.display === 'none' || list.style.display === '') {
-                                    list.style.display = 'block';
-                                    header.classList.add('active');
-                                } else {
-                                    list.style.display = 'none';
-                                    header.classList.remove('active');
-                                }
-                            });
+                            if (header && list) {
+                                header.addEventListener('click', function() {
+                                    if (list.style.display === 'none' || list.style.display === '') {
+                                        list.style.display = 'block';
+                                        header.classList.add('active');
+                                    } else {
+                                        list.style.display = 'none';
+                                        header.classList.remove('active');
+                                    }
+                                });
+                            }
                         }
 
-                        // Initialiser les listes et sections comme repliées
-                        endpointsList.style.display = 'none';
-                        demoPagesList.style.display = 'none';
-                        infoPanelContent.style.display = 'none';
-
-                        // Ajouter les écouteurs d'événements
-                        toggleList(endpointsHeader, endpointsList);
-                        toggleList(demoPagesHeader, demoPagesList);
-                        toggleList(infoPanelHeader, infoPanelContent);
-
                         // Toggle pour le panneau de filtres via le titre "Filtres"
                         if (filtersHeader && filtersPanel) {
                             filtersHeader.addEventListener('click', function() {
@@ -331,8 +319,9 @@ class DemoMainResource:
                         }
                     });
 
-                    // Variable globale pour stocker les marqueurs d'événements
+                    // Variables globales pour stocker les marqueurs d'événements et le premier chargement
                     window.eventMarkers = [];
+                    window.isFirstLoad = true;
 
                     function addEventsToMap(geojsonData) {
                         if (!geojsonData || !geojsonData.features) return;
@@ -533,6 +522,8 @@ class DemoMainResource:
                     
                     // Function to fetch events from the API
                     function fetchEvents() {
+                        console.log('🔄 Chargement des événements...', isFirstLoad ? '(Premier chargement)' : '(Rechargement)');
+
                         // Fetch events from the API - using the local API endpoint
                         fetch('https://api.openeventdatabase.org/event?')
                             .then(response => response.json())
@@ -542,8 +533,8 @@ class DemoMainResource:
                                     addEventsToMap(data);
                                     // Render histogram for retrieved events
                                     try { renderEventsHistogram(data.features); } catch(e) { console.warn('Histogram error', e); }
-                                    
-                                    // Fit map to events bounds
+
+                                    // Fit map to events bounds (seulement au premier chargement)
                                     fitMapToBounds(data);
                                 } else {
                                     console.log('No events found');
@@ -826,23 +817,29 @@ class DemoMainResource:
                         return (currentTime - createTime) > oneHourInMs;
                     }
                     
-                    // Function to fit map to events bounds
+                    // Function to fit map to events bounds (only on first load)
                     function fitMapToBounds(geojson) {
-                        if (geojson.features.length === 0) return;
-                        
+                        if (geojson.features.length === 0 || !window.isFirstLoad) return;
+
+                        console.log('🎯 Premier chargement - Ajustement de la vue sur les événements');
+
                         // Create a bounds object
                         const bounds = new maplibregl.LngLatBounds();
-                        
+
                         // Extend bounds with each feature
                         geojson.features.forEach(feature => {
                             bounds.extend(feature.geometry.coordinates);
                         });
-                        
+
                         // Fit map to bounds with padding
                         map.fitBounds(bounds, {
                             padding: 50,
                             maxZoom: 12
                         });
+
+                        // Marquer que le premier chargement est terminé
+                        window.isFirstLoad = false;
+                        console.log('✅ Vue initiale définie, les prochains rafraîchissements ne déplaceront plus la carte');
                     }
                     
                     // Function to update user information display
diff --git a/oedb/resources/demo/static/demo_styles.css b/oedb/resources/demo/static/demo_styles.css
index 3e06044..d9d7f2d 100644
--- a/oedb/resources/demo/static/demo_styles.css
+++ b/oedb/resources/demo/static/demo_styles.css
@@ -520,6 +520,7 @@ button:hover {
     position: fixed;
     bottom: 0.5rem;
     right: 0.5rem;
+    padding: 2rem 1rem;
 }
 
 /* Tab styles */
@@ -625,4 +626,12 @@ button{
     padding: 1rem 0.5rem;
     border-radius: 5px;
     background-color: #79a2d1;
+}
+
+#eventsHistogram{
+    height: 150px;
+}
+
+.maplibregl-ctrl-attrib + .maplibregl-ctrl-attrib {
+    display: none;
 }
\ No newline at end of file
diff --git a/oedb/resources/demo/static/edit.js b/oedb/resources/demo/static/edit.js
index b5ce3f6..0847619 100644
--- a/oedb/resources/demo/static/edit.js
+++ b/oedb/resources/demo/static/edit.js
@@ -170,40 +170,52 @@ document.getElementById('deleteButton').addEventListener('click', function() {
     const eventId = document.getElementById('eventId').value;
     
     // Show confirmation dialog
-    if (confirm('Are you sure you want to delete this event? This action cannot be undone.')) {
-        // Submit delete request to API
-        fetch(`/event/${eventId}`, {
+    if (confirm('Êtes-vous sûr de vouloir supprimer cet événement ? Cette action ne peut pas être annulée.')) {
+        // Show loading message
+        showResult('Suppression en cours...', 'info');
+
+        // Submit delete request to external API
+        fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
             method: 'DELETE',
             headers: {
                 'Content-Type': 'application/json'
             }
         })
         .then(response => {
-            if (response.ok) {
-                showResult('Event deleted successfully', 'success');
-                
+            if (response.ok || response.status === 204) {
+                showResult('✅ Événement supprimé avec succès !', 'success');
+
                 // Add link to go back to map
                 const resultElement = document.getElementById('result');
-                resultElement.innerHTML += `<p><a href="/demo">Back to Map</a></p>`;
-                
+                resultElement.innerHTML += `<p><a href="/demo">Retour à la carte</a></p>`;
+
                 // Disable form controls
                 const formElements = document.querySelectorAll('#eventForm input, #eventForm select, #eventForm button');
                 formElements.forEach(element => {
                     element.disabled = true;
                 });
-                
-                // Redirect to demo page after 2 seconds
+
+                // Redirect to demo page after 3 seconds
                 setTimeout(() => {
                     window.location.href = '/demo';
-                }, 2000);
+                }, 3000);
+            } else if (response.status === 404) {
+                throw new Error('Événement non trouvé sur l\'API externe');
+            } else if (response.status === 403) {
+                throw new Error('Accès non autorisé - un secret pourrait être requis pour supprimer cet événement');
             } else {
                 return response.text().then(text => {
-                    throw new Error(text || response.statusText);
+                    throw new Error(text || `Erreur HTTP ${response.status}: ${response.statusText}`);
                 });
             }
         })
         .catch(error => {
-            showResult(`Error deleting event: ${error.message}`, 'error');
+            console.error('Erreur lors de la suppression:', error);
+            if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
+                showResult('❌ Erreur de connexion : Impossible de joindre l\'API api.openeventdatabase.org', 'error');
+            } else {
+                showResult(`❌ Erreur lors de la suppression : ${error.message}`, 'error');
+            }
         });
     }
 });
\ No newline at end of file
diff --git a/oedb/resources/demo/static/traffic.js b/oedb/resources/demo/static/traffic.js
index f0e875d..2ec5432 100644
--- a/oedb/resources/demo/static/traffic.js
+++ b/oedb/resources/demo/static/traffic.js
@@ -3,7 +3,6 @@
 // Global variables
 let map;
 let marker;
-let geocoder;
 let currentPosition;
 let currentIssueType = null;
 let photoFiles = [];
@@ -11,171 +10,542 @@ let panoramaxUploadUrl = '';
 let panoramaxToken = '';
 
 // Initialize the map when the page loads
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     initMap();
     initTabs();
     initForm();
-    
+    setupFormValidation();
+
     // Get Panoramax configuration
-    panoramaxUploadUrl = document.getElementById('panoramaxUploadUrl').value;
-    panoramaxToken = document.getElementById('panoramaxToken').value;
-    
+    const panoramaxUploadUrlElement = document.getElementById('panoramaxUploadUrl');
+    const panoramaxTokenElement = document.getElementById('panoramaxToken');
+
+    panoramaxUploadUrl = panoramaxUploadUrlElement ? panoramaxUploadUrlElement.value : '';
+    panoramaxToken = panoramaxTokenElement ? panoramaxTokenElement.value : '';
+
     // Set up photo upload
     const photoInput = document.getElementById('photo');
     if (photoInput) {
         photoInput.addEventListener('change', handlePhotoUpload);
     }
-    
-    // Set up form submission
-    const reportForm = document.getElementById('reportForm');
-    if (reportForm) {
-        reportForm.addEventListener('submit', submitReport);
-    }
-});
 
 // Initialize the map
-function initMap() {
-    // Create the map
-    map = new maplibregl.Map({
-        container: 'map',
-        style: 'https://tiles.openfreemap.org/styles/liberty',
-        center: [2.2137, 46.2276], // Default center (center of metropolitan France)
-        zoom: 5
-    });
-    
-    // Add navigation controls
-    map.addControl(new maplibregl.NavigationControl());
-    
-    // Add attribution control with OpenStreetMap attribution
-    map.addControl(new maplibregl.AttributionControl({
-        customAttribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
-    }));
-    
-    // Try to get the user's current location
-    if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(
-            function(position) {
-                currentPosition = [position.coords.longitude, position.coords.latitude];
-                
-                // Center the map on the user's location
-                map.flyTo({
-                    center: currentPosition,
-                    zoom: 12
-                });
-                
-                // Add a marker at the user's location
+    function initMap() {
+        // Create the map
+        map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://tiles.openfreemap.org/styles/liberty',
+            center: [2.2137, 46.2276], // Default center (center of metropolitan France)
+            zoom: 5
+        });
+
+        // Add navigation controls
+        map.addControl(new maplibregl.NavigationControl());
+
+        // Add attribution control with OpenStreetMap attribution
+        map.addControl(new maplibregl.AttributionControl({
+            customAttribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
+        }));
+
+        // Try to get the user's current location
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function (position) {
+                    currentPosition = [position.coords.longitude, position.coords.latitude];
+
+                    // Center the map on the user's location
+                    map.flyTo({
+                        center: currentPosition,
+                        zoom: 12
+                    });
+
+                    // Add a marker at the user's location
+                    marker = new maplibregl.Marker({
+                        draggable: true
+                    })
+                        .setLngLat(currentPosition)
+                        .addTo(map);
+
+                    // Update coordinates when marker is dragged
+                    marker.on('dragend', updateCoordinates);
+
+                    // Update the coordinates display
+                    updateCoordinates();
+                },
+                function (error) {
+                    console.error('Error getting location:', error);
+                }
+            );
+        }
+
+        // Add click handler to the map
+        map.on('click', function (e) {
+            // If we don't have a marker yet, create one
+            if (!marker) {
                 marker = new maplibregl.Marker({
                     draggable: true
                 })
-                .setLngLat(currentPosition)
-                .addTo(map);
-                
+                    .setLngLat(e.lngLat)
+                    .addTo(map);
+
                 // Update coordinates when marker is dragged
                 marker.on('dragend', updateCoordinates);
-                
-                // Update the coordinates display
-                updateCoordinates();
-            },
-            function(error) {
-                console.error('Error getting location:', error);
+            } else {
+                // Otherwise, move the existing marker
+                marker.setLngLat(e.lngLat);
             }
-        );
+
+            // Update the coordinates display
+            updateCoordinates();
+        });
     }
-    
-    // Add click handler to the map
-    map.on('click', function(e) {
-        // If we don't have a marker yet, create one
-        if (!marker) {
-            marker = new maplibregl.Marker({
-                draggable: true
-            })
-            .setLngLat(e.lngLat)
-            .addTo(map);
-            
-            // Update coordinates when marker is dragged
-            marker.on('dragend', updateCoordinates);
-        } else {
-            // Otherwise, move the existing marker
-            marker.setLngLat(e.lngLat);
-        }
-        
-        // Update the coordinates display
-        updateCoordinates();
-    });
-}
 
 // Initialize the tabs
-function initTabs() {
-    const tabItems = document.querySelectorAll('.tab-item');
-    const tabPanes = document.querySelectorAll('.tab-pane');
-    
-    tabItems.forEach(item => {
-        item.addEventListener('click', function() {
-            // Remove active class from all tabs
-            tabItems.forEach(tab => tab.classList.remove('active'));
-            tabPanes.forEach(pane => pane.classList.remove('active'));
-            
-            // Add active class to clicked tab
-            this.classList.add('active');
-            
-            // Show the corresponding tab content
-            const tabId = this.getAttribute('data-tab');
-            document.getElementById(tabId + '-tab').classList.add('active');
+    function initTabs() {
+        const tabItems = document.querySelectorAll('.tab-item');
+        const tabPanes = document.querySelectorAll('.tab-pane');
+
+        tabItems.forEach(item => {
+            item.addEventListener('click', function () {
+                // Remove active class from all tabs
+                tabItems.forEach(tab => tab.classList.remove('active'));
+                tabPanes.forEach(pane => pane.classList.remove('active'));
+
+                // Add active class to clicked tab
+                this.classList.add('active');
+
+                // Show the corresponding tab content
+                const tabId = this.getAttribute('data-tab');
+                document.getElementById(tabId + '-tab').classList.add('active');
+            });
         });
-    });
-}
+    }
 
 // Initialize the form
-function initForm() {
-    // Set the current date and time as the default
-    const now = new Date();
-    const dateTimeString = now.toISOString().slice(0, 16);
-    
-    const startTimeInput = document.getElementById('start');
-    if (startTimeInput) {
-        startTimeInput.value = dateTimeString;
+    function initForm() {
+        // Set the current date and time as the default
+        const now = new Date();
+        const dateTimeString = now.toISOString().slice(0, 16);
+
+        const startTimeInput = document.getElementById('start');
+        if (startTimeInput) {
+            startTimeInput.value = dateTimeString;
+        }
+
+        const stopTimeInput = document.getElementById('stop');
+        if (stopTimeInput) {
+            // Set default end time to 1 hour from now
+            const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
+            stopTimeInput.value = oneHourLater.toISOString().slice(0, 16);
+        }
+
+        // Set up form submission after DOM is loaded
+        const reportForm = document.getElementById('trafficForm');
+        if (reportForm) {
+            reportForm.addEventListener('submit', submitReport);
+        } else {
+            console.warn('Traffic form not found in DOM');
+        }
     }
-    
-    const stopTimeInput = document.getElementById('stop');
-    if (stopTimeInput) {
-        // Set default end time to 1 hour from now
-        const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
-        stopTimeInput.value = oneHourLater.toISOString().slice(0, 16);
-    }
-}
 
 // Update the coordinates display when the marker is moved
-function updateCoordinates() {
-    if (!marker) return;
-    
-    const lngLat = marker.getLngLat();
-    currentPosition = [lngLat.lng, lngLat.lat];
-    
-    // Update the coordinates display
-    const coordinatesElement = document.getElementById('coordinates');
-    if (coordinatesElement) {
-        coordinatesElement.textContent = `${lngLat.lat.toFixed(6)}, ${lngLat.lng.toFixed(6)}`;
+    function updateCoordinates() {
+        if (!marker) return;
+
+        const lngLat = marker.getLngLat();
+        currentPosition = [lngLat.lng, lngLat.lat];
+
+        // Update the coordinates display
+        const coordinatesElement = document.getElementById('coordinates');
+        if (coordinatesElement) {
+            coordinatesElement.textContent = `${lngLat.lat.toFixed(6)}, ${lngLat.lng.toFixed(6)}`;
+        }
+
+        // Update the hidden coordinates input
+        const coordinatesInput = document.getElementById('coordinates-input');
+        if (coordinatesInput) {
+            coordinatesInput.value = JSON.stringify({
+                type: 'Point',
+                coordinates: [lngLat.lng, lngLat.lat]
+            });
+        }
     }
-    
-    // Update the hidden coordinates input
-    const coordinatesInput = document.getElementById('coordinates-input');
-    if (coordinatesInput) {
-        coordinatesInput.value = JSON.stringify({
-            type: 'Point',
-            coordinates: [lngLat.lng, lngLat.lat]
+
+// Handle photo upload
+    function handlePhotoUpload(event) {
+        const files = event.target.files;
+        if (!files || files.length === 0) return;
+
+        // Store the files for later upload
+        photoFiles = Array.from(files);
+
+        // Show preview of the photos
+        const previewContainer = document.getElementById('photoPreview');
+        if (previewContainer) {
+            previewContainer.innerHTML = '';
+
+            photoFiles.forEach(file => {
+                const reader = new FileReader();
+                reader.onload = function (e) {
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    img.className = 'photo-preview';
+                    previewContainer.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+            });
+
+            previewContainer.style.display = 'flex';
+        }
+    }
+
+// Submit the report
+    async function submitReport(event) {
+        event.preventDefault();
+
+        // Show loading message
+        const resultElement = document.getElementById('result');
+        resultElement.textContent = 'Submitting report...';
+        resultElement.className = '';
+        resultElement.style.display = 'block';
+
+        try {
+            // Check if we have coordinates
+            if (!currentPosition) {
+                throw new Error('Please select a location on the map');
+            }
+
+            // Get form values
+            const formData = new FormData(event.target);
+            const eventData = {
+                type: formData.get('type') || 'unscheduled',
+                what: formData.get('what'),
+                label: formData.get('label'),
+                description: formData.get('description'),
+                start: new Date(formData.get('start')).toISOString(),
+                stop: new Date(formData.get('stop')).toISOString(),
+                geometry: {
+                    type: 'Point',
+                    coordinates: currentPosition
+                }
+            };
+
+            // Add username if authenticated
+            const osmUsername = document.getElementById('osmUsername');
+            if (osmUsername && osmUsername.value) {
+                eventData.source = {
+                    name: 'OpenStreetMap user',
+                    id: osmUsername.value
+                };
+            }
+
+            // Upload photos to Panoramax if available
+            let photoUrls = [];
+            if (photoFiles.length > 0 && panoramaxUploadUrl && panoramaxToken) {
+                photoUrls = await uploadPhotos(photoFiles);
+                if (photoUrls.length > 0) {
+                    eventData.media = photoUrls.map(url => ({
+                        type: 'image',
+                        url: url
+                    }));
+                }
+            }
+
+            // Submit the event to the API
+            const response = await fetch('/event', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(eventData)
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(errorText || response.statusText);
+            }
+
+            const data = await response.json();
+
+            // Show success message
+            resultElement.textContent = `Report submitted successfully! Event ID: ${data.id}`;
+            resultElement.className = 'success';
+
+            // Reset the form
+            event.target.reset();
+            photoFiles = [];
+            const previewContainer = document.getElementById('photoPreview');
+            if (previewContainer) {
+                previewContainer.innerHTML = '';
+                previewContainer.style.display = 'none';
+            }
+
+            // Initialize the form again
+            initForm();
+        } catch (error) {
+            // Show error message
+            resultElement.textContent = `Error: ${error.message}`;
+            resultElement.className = 'error';
+        }
+    }
+
+// Upload photos to Panoramax
+    async function uploadPhotos(files) {
+        const urls = [];
+
+        for (const file of files) {
+            try {
+                const uploadData = new FormData();
+                uploadData.append('file', file);
+
+                const response = await fetch(panoramaxUploadUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Token ${panoramaxToken}`
+                    },
+                    body: uploadData
+                });
+
+                if (!response.ok) {
+                    console.error('Failed to upload photo:', await response.text());
+                    continue;
+                }
+
+                const data = await response.json();
+                if (data.url) {
+                    urls.push(data.url);
+                }
+            } catch (error) {
+                console.error('Error uploading photo:', error);
+            }
+        }
+
+        return urls;
+    }
+
+// Setup form validation
+    function setupFormValidation() {
+        const form = document.getElementById('trafficForm');
+        if (!form) return;
+
+        // Get all form fields that need validation
+        const requiredFields = [
+            {id: 'label', name: 'Description du problème'},
+            {id: 'severity', name: 'Gravité'},
+            {id: 'start', name: 'Heure de début'},
+            {id: 'stop', name: 'Heure de fin'}
+        ];
+
+        const optionalFields = [
+            {id: 'cause', name: 'Détails supplémentaires'},
+            {id: 'where', name: 'Route/Nom du lieu'}
+        ];
+
+        // Add event listeners for real-time validation
+        [...requiredFields, ...optionalFields].forEach(field => {
+            const element = document.getElementById(field.id);
+            if (element) {
+                element.addEventListener('input', validateForm);
+                element.addEventListener('change', validateForm);
+                element.addEventListener('blur', validateForm);
+            }
         });
+
+        // Add listener for map clicks (location validation)
+        if (map) {
+            map.on('click', () => {
+                setTimeout(validateForm, 100); // Small delay to ensure marker is set
+            });
+        }
+
+        // Initial validation
+        validateForm();
+    }
+
+
+
+});
+
+
+// Clear error message for a field
+function clearFieldError(element) {
+    const existingError = element.parentNode.querySelector('.field-error');
+    if (existingError) {
+        existingError.remove();
     }
 }
+// Validate the entire form
+function validateForm() {
+    const form = document.getElementById('trafficForm');
+    const submitButton = document.getElementById('report_issue_button');
+
+    if (!form || !submitButton) {
+        console.warn('🔍 Validation: Formulaire ou bouton de soumission non trouvé');
+        return false;
+    }
+
+    console.group('🔍 Validation du formulaire traffic');
+
+    let isValid = true;
+    let firstInvalidField = null;
+    const errors = [];
+    const validFields = [];
+
+    // Check required fields
+    const requiredFields = [
+        {id: 'label', name: 'Description du problème', minLength: 3},
+        {id: 'severity', name: 'Gravité'},
+        {id: 'start', name: 'Heure de début'},
+        {id: 'stop', name: 'Heure de fin'}
+    ];
+
+    console.log('📝 Vérification des champs requis...');
+
+    requiredFields.forEach(field => {
+        const element = document.getElementById(field.id);
+        if (element) {
+            let fieldValid = true;
+            let errorMessage = '';
+            const value = element.value.trim();
+
+            // Check if field is empty
+            if (!value) {
+                fieldValid = false;
+                errorMessage = `${field.name} est requis`;
+                console.error(`❌ ${field.name}: champ vide`);
+            }
+            // Check minimum length for text fields
+            else if (field.minLength && value.length < field.minLength) {
+                fieldValid = false;
+                errorMessage = `${field.name} doit contenir au moins ${field.minLength} caractères`;
+                console.error(`❌ ${field.name}: trop court (${value.length}/${field.minLength} caractères) - "${value}"`);
+            } else {
+                console.log(`✅ ${field.name}: OK - "${value}"`);
+                validFields.push(field.name);
+            }
+
+            // Visual feedback
+            if (fieldValid) {
+                element.classList.remove('error');
+                element.classList.add('valid');
+                clearFieldError(element);
+            } else {
+                element.classList.remove('valid');
+                element.classList.add('error');
+                showFieldError(element, errorMessage);
+                isValid = false;
+                if (!firstInvalidField) {
+                    firstInvalidField = element;
+                }
+                errors.push(errorMessage);
+            }
+        } else {
+            console.warn(`⚠️ ${field.name}: élément non trouvé dans le DOM`);
+        }
+    });
+
+    // Check date logic (start time should be before stop time)
+    console.log('📅 Vérification de la logique des dates...');
+    const startElement = document.getElementById('start');
+    const stopElement = document.getElementById('stop');
+
+    if (startElement && stopElement && startElement.value && stopElement.value) {
+        const startTime = new Date(startElement.value);
+        const stopTime = new Date(stopElement.value);
+
+        console.log(`📅 Heure début: ${startTime.toLocaleString()}`);
+        console.log(`📅 Heure fin: ${stopTime.toLocaleString()}`);
+
+        if (startTime >= stopTime) {
+            stopElement.classList.remove('valid');
+            stopElement.classList.add('error');
+            showFieldError(stopElement, 'L\'heure de fin doit être après l\'heure de début');
+            isValid = false;
+            if (!firstInvalidField) {
+                firstInvalidField = stopElement;
+            }
+            errors.push('L\'heure de fin doit être après l\'heure de début');
+            console.error(`❌ Dates: L'heure de fin (${stopTime.toLocaleString()}) doit être après l'heure de début (${startTime.toLocaleString()})`);
+        } else {
+            console.log(`✅ Dates: Logique correcte (durée: ${Math.round((stopTime - startTime) / 1000 / 60)} minutes)`);
+            validFields.push('Logique des dates');
+        }
+    } else {
+        console.warn('⚠️ Dates: Impossible de vérifier la logique (éléments ou valeurs manquants)');
+    }
+
+    // Check if location is set (marker exists)
+    console.log('📍 Vérification de la localisation...');
+    if (!marker || !marker.getLngLat()) {
+        isValid = false;
+        errors.push('Veuillez sélectionner une localisation sur la carte');
+        console.error('❌ Localisation: Aucun marqueur placé sur la carte');
+
+        // Highlight map container
+        const mapContainer = document.getElementById('map');
+        if (mapContainer) {
+            mapContainer.classList.add('error');
+            if (!firstInvalidField) {
+                firstInvalidField = mapContainer;
+            }
+        }
+    } else {
+        const lngLat = marker.getLngLat();
+        console.log(`✅ Localisation: Marqueur placé à [${lngLat.lng.toFixed(6)}, ${lngLat.lat.toFixed(6)}]`);
+        validFields.push('Localisation');
+
+        // Remove error highlight from map
+        const mapContainer = document.getElementById('map');
+        if (mapContainer) {
+            mapContainer.classList.remove('error');
+        }
+    }
+
+    // Update submit button state
+    if (isValid) {
+        submitButton.disabled = false;
+        submitButton.classList.remove('disabled');
+        submitButton.textContent = 'Signaler le problème';
+        console.log(`🎉 VALIDATION RÉUSSIE! Tous les champs sont valides:`);
+        validFields.forEach(field => console.log(`   ✅ ${field}`));
+        console.log('🔓 Bouton de soumission débloqué');
+    } else {
+        submitButton.disabled = true;
+        submitButton.classList.add('disabled');
+        submitButton.textContent = `Signaler le problème (${errors.length} erreur${errors.length > 1 ? 's' : ''})`;
+        console.warn(`⚠️ VALIDATION ÉCHOUÉE! ${errors.length} erreur${errors.length > 1 ? 's' : ''} trouvée${errors.length > 1 ? 's' : ''}:`);
+        errors.forEach((error, index) => console.error(`   ${index + 1}. ${error}`));
+        console.log('🔒 Bouton de soumission bloqué');
+
+        if (validFields.length > 0) {
+            console.log(`Champs valides (${validFields.length}):`);
+            validFields.forEach(field => console.log(`   ✅ ${field}`));
+        }
+    }
+
+    // Focus on first invalid field if validation was triggered by user action
+    if (!isValid && firstInvalidField && document.activeElement !== firstInvalidField) {
+        // Only auto-focus if the user isn't currently typing in another field
+        if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'SELECT') {
+            firstInvalidField.focus();
+            console.log(`🎯 Focus placé sur le premier champ invalide: ${firstInvalidField.id}`);
+        }
+    }
+
+    console.groupEnd();
+    return isValid;
+}
+
 
 // Fill the form with predefined values based on the selected issue type
 function fillForm(issueType) {
     currentIssueType = issueType;
-    
+
     // Get the form elements
     const whatInput = document.getElementById('what');
     const labelInput = document.getElementById('label');
     const descriptionInput = document.getElementById('description');
-    
+
     // Set default values based on the issue type
     switch (issueType) {
         case 'pothole':
@@ -220,159 +590,24 @@ function fillForm(issueType) {
             break;
         // Add more cases for other issue types
     }
-    
+
     // Scroll to the form
-    document.getElementById('reportForm').scrollIntoView({ behavior: 'smooth' });
-}
-
-// Handle photo upload
-function handlePhotoUpload(event) {
-    const files = event.target.files;
-    if (!files || files.length === 0) return;
-    
-    // Store the files for later upload
-    photoFiles = Array.from(files);
-    
-    // Show preview of the photos
-    const previewContainer = document.getElementById('photoPreview');
-    if (previewContainer) {
-        previewContainer.innerHTML = '';
-        
-        photoFiles.forEach(file => {
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                const img = document.createElement('img');
-                img.src = e.target.result;
-                img.className = 'photo-preview';
-                previewContainer.appendChild(img);
-            };
-            reader.readAsDataURL(file);
-        });
-        
-        previewContainer.style.display = 'flex';
+    const formElement = document.getElementById('trafficForm');
+    if (formElement) {
+        formElement.scrollIntoView({behavior: 'smooth'});
     }
 }
 
-// Submit the report
-async function submitReport(event) {
-    event.preventDefault();
-    
-    // Show loading message
-    const resultElement = document.getElementById('result');
-    resultElement.textContent = 'Submitting report...';
-    resultElement.className = '';
-    resultElement.style.display = 'block';
-    
-    try {
-        // Check if we have coordinates
-        if (!currentPosition) {
-            throw new Error('Please select a location on the map');
-        }
-        
-        // Get form values
-        const formData = new FormData(event.target);
-        const eventData = {
-            type: formData.get('type') || 'unscheduled',
-            what: formData.get('what'),
-            label: formData.get('label'),
-            description: formData.get('description'),
-            start: new Date(formData.get('start')).toISOString(),
-            stop: new Date(formData.get('stop')).toISOString(),
-            geometry: {
-                type: 'Point',
-                coordinates: currentPosition
-            }
-        };
-        
-        // Add username if authenticated
-        const osmUsername = document.getElementById('osmUsername');
-        if (osmUsername && osmUsername.value) {
-            eventData.source = {
-                name: 'OpenStreetMap user',
-                id: osmUsername.value
-            };
-        }
-        
-        // Upload photos to Panoramax if available
-        let photoUrls = [];
-        if (photoFiles.length > 0 && panoramaxUploadUrl && panoramaxToken) {
-            photoUrls = await uploadPhotos(photoFiles);
-            if (photoUrls.length > 0) {
-                eventData.media = photoUrls.map(url => ({
-                    type: 'image',
-                    url: url
-                }));
-            }
-        }
-        
-        // Submit the event to the API
-        const response = await fetch('/event', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(eventData)
-        });
-        
-        if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(errorText || response.statusText);
-        }
-        
-        const data = await response.json();
-        
-        // Show success message
-        resultElement.textContent = `Report submitted successfully! Event ID: ${data.id}`;
-        resultElement.className = 'success';
-        
-        // Reset the form
-        event.target.reset();
-        photoFiles = [];
-        const previewContainer = document.getElementById('photoPreview');
-        if (previewContainer) {
-            previewContainer.innerHTML = '';
-            previewContainer.style.display = 'none';
-        }
-        
-        // Initialize the form again
-        initForm();
-    } catch (error) {
-        // Show error message
-        resultElement.textContent = `Error: ${error.message}`;
-        resultElement.className = 'error';
-    }
-}
+// Show error message for a field
+function showFieldError(element, message) {
+    // Remove existing error message
+    clearFieldError(element);
 
-// Upload photos to Panoramax
-async function uploadPhotos(files) {
-    const urls = [];
-    
-    for (const file of files) {
-        try {
-            const uploadData = new FormData();
-            uploadData.append('file', file);
-            
-            const response = await fetch(panoramaxUploadUrl, {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Token ${panoramaxToken}`
-                },
-                body: uploadData
-            });
-            
-            if (!response.ok) {
-                console.error('Failed to upload photo:', await response.text());
-                continue;
-            }
-            
-            const data = await response.json();
-            if (data.url) {
-                urls.push(data.url);
-            }
-        } catch (error) {
-            console.error('Error uploading photo:', error);
-        }
-    }
-    
-    return urls;
-}
\ No newline at end of file
+    // Create error message element
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'field-error';
+    errorDiv.textContent = message;
+
+    // Insert error message after the field
+    element.parentNode.insertBefore(errorDiv, element.nextSibling);
+}
diff --git a/oedb/resources/demo/templates/event_details.html b/oedb/resources/demo/templates/event_details.html
index 03d77e3..1501a19 100644
--- a/oedb/resources/demo/templates/event_details.html
+++ b/oedb/resources/demo/templates/event_details.html
@@ -1,45 +1,348 @@
 {% extends "layout.html" %}
 
-{% block title %}Event {{ id }} - OpenEventDatabase{% endblock %}
+{% block title %}Événement {{ properties.label|default(id) }} - OpenEventDatabase{% endblock %}
 
 {% block css %}
 <style>
-    #map { width:100%; height: 360px; border:1px solid #ddd; border-radius:4px; }
-    table { width:100%; border-collapse: collapse; margin-top:12px; }
-    th, td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align:left; }
-    th { background:#f9fafb; }
+    .event-header {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 20px;
+    }
+
+    .event-title {
+        margin: 0 0 10px 0;
+        color: #333;
+        font-size: 1.8rem;
+    }
+
+    .event-subtitle {
+        color: #666;
+        font-size: 1rem;
+        margin: 0;
+    }
+
+    #map { 
+        width: 100%; 
+        height: 400px; 
+        border: 1px solid #ddd; 
+        border-radius: 8px;
+        margin-bottom: 20px;
+    }
+
+    .properties-table {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        overflow: hidden;
+    }
+
+    .table-header {
+        background: #f8f9fa;
+        padding: 15px 20px;
+        border-bottom: 1px solid #dee2e6;
+    }
+
+    .table-header h2 {
+        margin: 0;
+        color: #333;
+        font-size: 1.3rem;
+    }
+
+    table { 
+        width: 100%; 
+        border-collapse: collapse; 
+    }
+
+    th, td { 
+        padding: 12px 20px; 
+        border-bottom: 1px solid #eee; 
+        text-align: left; 
+        vertical-align: top;
+    }
+
+    th { 
+        background: #f9fafb;
+        font-weight: 600;
+        color: #495057;
+        width: 200px;
+    }
+
+    td {
+        word-wrap: break-word;
+        max-width: 0;
+    }
+
+    .what-link {
+        display: inline-block;
+        padding: 4px 12px;
+        background: #0078ff;
+        color: white !important;
+        text-decoration: none;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: background-color 0.2s;
+    }
+
+    .what-link:hover {
+        background: #0056b3;
+        text-decoration: none;
+    }
+
+    .nav-links {
+        margin-top: 10px;
+    }
+
+    .nav-links a {
+        color: #0078ff;
+        text-decoration: none;
+        margin-right: 15px;
+        font-weight: 500;
+    }
+
+    .nav-links a:hover {
+        text-decoration: underline;
+    }
+
+    .error-message {
+        background: #f8d7da;
+        color: #721c24;
+        padding: 12px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        border: 1px solid #f5c6cb;
+    }
+
+    .loading {
+        text-align: center;
+        padding: 20px;
+        color: #6c757d;
+    }
 </style>
 {% endblock %}
 
-{% block header %}Évènement {{ id }}{% endblock %}
+{% block header %}
+<div class="event-header">
+    <h1 class="event-title">{{ properties.label|default('Événement sans titre') }}</h1>
+    <p class="event-subtitle">ID: {{ id }}</p>
+    <div class="nav-links">
+        <a href="/demo"><i class="fas fa-home"></i> Accueil</a>
+        <a href="/demo/view-events"><i class="fas fa-table"></i> Tous les événements</a>
+        <a href="https://api.openeventdatabase.org/event/{{ id }}" target="_blank"><i class="fas fa-code"></i> API JSON</a>
+    </div>
+</div>
+{% endblock %}
 
 {% block content %}
-<div id="map"></div>
-<table>
-    <thead><tr><th>Clé</th><th>Valeur</th></tr></thead>
-    <tbody>
-        {% for key, value in properties.items()|sort %}
-        <tr>
-            <td>{{ key }}</td>
-            <td>{{ value }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+<div id="loading-map" class="loading">
+    <i class="fas fa-spinner fa-spin"></i>
+    Chargement de la carte...
+</div>
+<div id="map-error" class="error-message" style="display: none;">
+    <i class="fas fa-exclamation-triangle"></i>
+    Erreur lors du chargement de la carte
+</div>
+<div id="map" style="display: none;"></div>
+
+<div class="properties-table">
+    <div class="table-header">
+        <h2><i class="fas fa-info-circle"></i> Propriétés de l'événement</h2>
+    </div>
+    <table>
+        <thead>
+            <tr>
+                <th>Propriété</th>
+                <th>Valeur</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for key, value in properties.items()|sort %}
+            <tr>
+                <td><strong>{{ key }}</strong></td>
+                <td>
+                    {% if key == 'what' %}
+                        <a href="/demo/map-by-what/{{ value }}" class="what-link">
+                            <i class="fas fa-tag"></i> {{ value }}
+                        </a>
+                        <small style="display: block; margin-top: 5px; color: #6c757d;">
+                            Cliquez pour voir tous les événements de ce type
+                        </small>
+                    {% elif key in ['start', 'stop', 'createdate', 'lastupdate'] and value %}
+                        {{ value }}
+                        <small style="display: block; color: #6c757d;">
+                            <script>
+                                document.write(formatDate('{{ value }}'));
+                            </script>
+                        </small>
+                    {% elif key == 'url' and value %}
+                        <a href="{{ value }}" target="_blank" style="color: #0078ff;">
+                            {{ value }}
+                            <i class="fas fa-external-link-alt" style="font-size: 0.8em;"></i>
+                        </a>
+                    {% elif value is string and value.startswith('http') %}
+                        <a href="{{ value }}" target="_blank" style="color: #0078ff;">
+                            {{ value }}
+                            <i class="fas fa-external-link-alt" style="font-size: 0.8em;"></i>
+                        </a>
+                    {% else %}
+                        {{ value|safe if value else '-' }}
+                    {% endif %}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
 {% endblock %}
 
 {% block scripts %}
 <script>
-    const f = JSON.parse('{{ feature_json|safe }}');
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: 'https://tiles.openfreemap.org/styles/liberty',
-        center: f.geometry && f.geometry.coordinates ? f.geometry.coordinates : [2.3522,48.8566],
-        zoom: 12
-    });
-    map.addControl(new maplibregl.NavigationControl());
-    if (f.geometry && f.geometry.type === 'Point') {
-        new maplibregl.Marker().setLngLat(f.geometry.coordinates).addTo(map);
+    // Fonction pour formater les dates
+    function formatDate(dateString) {
+        try {
+            const date = new Date(dateString);
+            return date.toLocaleDateString('fr-FR', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        } catch (e) {
+            return dateString;
+        }
+    }
+
+    // Formater les dates dans le tableau après le chargement de la page
+    function formatDatesInTable() {
+        const dateElements = document.querySelectorAll('.date-display[data-date]');
+        dateElements.forEach(element => {
+            const dateValue = element.getAttribute('data-date');
+            if (dateValue) {
+                const formattedDate = formatDate(dateValue);
+                element.textContent = formattedDate;
+                element.title = dateValue; // Garder la date originale en tooltip
+            }
+        });
+    }
+
+    // Gestion des erreurs et logging
+    function logError(message, error) {
+        console.error(message, error);
+        document.getElementById('loading-map').style.display = 'none';
+        document.getElementById('map-error').style.display = 'block';
+        document.getElementById('map-error').innerHTML = `
+            <i class="fas fa-exclamation-triangle"></i>
+            ${message}: ${error.message || error}
+        `;
+    }
+
+    // Formater les dates dans le tableau
+    formatDatesInTable();
+
+    // Initialisation de la carte
+    try {
+        console.log('🗺️ Initialisation de la carte...');
+
+        // Parser les données de l'événement de manière sécurisée
+        let eventFeature;
+        try {
+            const featureJson = '{{ feature_json|safe }}';
+            console.log('📄 JSON reçu:', featureJson);
+            eventFeature = JSON.parse(featureJson);
+            console.log('✅ Données de l\'événement parsées:', eventFeature);
+        } catch (parseError) {
+            throw new Error(`Impossible de parser les données JSON: ${parseError.message}`);
+        }
+
+        // Vérifier la structure des données
+        if (!eventFeature) {
+            throw new Error('Aucune donnée d\'événement trouvée');
+        }
+
+        // Déterminer les coordonnées pour la carte
+        let center = [2.3522, 48.8566]; // Paris par défaut
+        let hasValidGeometry = false;
+
+        if (eventFeature.geometry && 
+            eventFeature.geometry.type === 'Point' && 
+            eventFeature.geometry.coordinates &&
+            Array.isArray(eventFeature.geometry.coordinates) &&
+            eventFeature.geometry.coordinates.length === 2) {
+
+            const coords = eventFeature.geometry.coordinates;
+            // Vérifier que les coordonnées sont des nombres valides
+            if (typeof coords[0] === 'number' && typeof coords[1] === 'number' &&
+                !isNaN(coords[0]) && !isNaN(coords[1])) {
+                center = coords;
+                hasValidGeometry = true;
+                console.log('📍 Coordonnées trouvées:', center);
+            }
+        }
+
+        if (!hasValidGeometry) {
+            console.warn('⚠️ Pas de coordonnées valides, utilisation du centre par défaut');
+        }
+
+        // Créer la carte
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://tiles.openfreemap.org/styles/liberty',
+            center: center,
+            zoom: hasValidGeometry ? 14 : 6
+        });
+
+        // Ajouter les contrôles
+        map.addControl(new maplibregl.NavigationControl());
+        map.addControl(new maplibregl.AttributionControl({
+            customAttribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }));
+
+        // Quand la carte est chargée
+        map.on('load', function() {
+            console.log('✅ Carte chargée avec succès');
+            document.getElementById('loading-map').style.display = 'none';
+            document.getElementById('map').style.display = 'block';
+
+            // Ajouter le marqueur si on a des coordonnées valides
+            if (hasValidGeometry) {
+                const marker = new maplibregl.Marker({
+                    color: '#0078ff'
+                })
+                .setLngLat(center)
+                .addTo(map);
+
+                // Créer une popup avec les informations de l'événement
+                const properties = eventFeature.properties || {};
+                const popupContent = `
+                    <div style="max-width: 250px;">
+                        <h3 style="margin: 0 0 10px 0;">${properties.label || 'Événement'}</h3>
+                        ${properties.what ? `<p><strong>Type:</strong> ${properties.what}</p>` : ''}
+                        ${properties.start ? `<p><strong>Début:</strong> ${formatDate(properties.start)}</p>` : ''}
+                        ${properties.where ? `<p><strong>Lieu:</strong> ${properties.where}</p>` : ''}
+                    </div>
+                `;
+
+                const popup = new maplibregl.Popup({ offset: 25 })
+                    .setHTML(popupContent);
+
+                marker.setPopup(popup);
+
+                console.log('📍 Marqueur ajouté à la carte');
+            }
+        });
+
+        // Gestion des erreurs de carte
+        map.on('error', function(e) {
+            logError('Erreur lors du chargement de la carte', e.error || e);
+        });
+
+    } catch (error) {
+        logError('Erreur lors de l\'initialisation de la carte', error);
     }
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/oedb/resources/demo/templates/layout.html b/oedb/resources/demo/templates/layout.html
index 7e7126b..9789039 100644
--- a/oedb/resources/demo/templates/layout.html
+++ b/oedb/resources/demo/templates/layout.html
@@ -7,7 +7,7 @@
     
     <!-- Common CSS -->
     <link rel="stylesheet" href="/static/demo_styles.css">
-    
+    <link rel="icon" type="image/png" href="/static/oedb.png">
     <!-- Page-specific CSS -->
     {% block css %}{% endblock %}
     
diff --git a/oedb/resources/demo/templates/map_by_what_type.html b/oedb/resources/demo/templates/map_by_what_type.html
new file mode 100644
index 0000000..7a888c0
--- /dev/null
+++ b/oedb/resources/demo/templates/map_by_what_type.html
@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Événements {{ event_type_label }} - OpenEventDatabase</title>
+    <link rel="icon" type="image/png" href="/static/oedb.png">
+
+    <!-- MapLibre GL JS -->
+    <script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
+
+    <!-- Font Awesome -->
+    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
+
+    <style>
+        body { 
+            margin: 0; 
+            padding: 20px; 
+            font-family: Arial, sans-serif; 
+            background-color: #f8f9fa;
+        }
+
+        .header {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            margin: 0 0 10px 0;
+            color: #333;
+        }
+
+        .nav-links {
+            margin-top: 15px;
+        }
+
+        .nav-links a {
+            color: #0078ff;
+            text-decoration: none;
+            margin-right: 15px;
+            font-weight: 500;
+        }
+
+        .nav-links a:hover {
+            text-decoration: underline;
+        }
+
+        .content-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            height: calc(100vh - 200px);
+        }
+
+        .map-container, .table-container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        #map {
+            width: 100%;
+            height: 100%;
+        }
+
+        .table-container {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .table-header {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            background: #f8f9fa;
+        }
+
+        .table-header h2 {
+            margin: 0;
+            color: #333;
+        }
+
+        .legend {
+            display: flex;
+            gap: 20px;
+            margin-top: 10px;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            border: 2px solid white;
+            box-shadow: 0 0 3px rgba(0,0,0,0.3);
+        }
+
+        .legend-past { background-color: #6c757d; }
+        .legend-current { background-color: #28a745; }
+        .legend-future { background-color: #007bff; }
+
+        .table-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0;
+        }
+
+        .events-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .events-table th,
+        .events-table td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+
+        .events-table th {
+            background: #f8f9fa;
+            font-weight: 600;
+            color: #495057;
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+
+        .events-table tr:hover {
+            background: #f8f9fa;
+        }
+
+        .event-title {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .event-title a {
+            color: #0078ff;
+            text-decoration: none;
+        }
+
+        .event-title a:hover {
+            text-decoration: underline;
+        }
+
+        .event-date {
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        .event-status {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: 500;
+            text-transform: uppercase;
+        }
+
+        .status-past {
+            background: #6c757d;
+            color: white;
+        }
+
+        .status-current {
+            background: #28a745;
+            color: white;
+        }
+
+        .status-future {
+            background: #007bff;
+            color: white;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #6c757d;
+        }
+
+        .error {
+            text-align: center;
+            padding: 40px;
+            color: #dc3545;
+        }
+
+        .stats {
+            display: flex;
+            gap: 20px;
+            margin-top: 10px;
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        @media (max-width: 768px) {
+            .content-grid {
+                grid-template-columns: 1fr;
+                height: auto;
+            }
+
+            .map-container {
+                height: 400px;
+            }
+
+            .table-container {
+                height: 500px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>
+            <i class="fas fa-map-marked-alt"></i>
+            Événements {{ event_type_label }}
+        </h1>
+        <p>Visualisation et liste détaillée des événements de type "{{ event_type }}"</p>
+
+        <div class="nav-links">
+            <a href="/demo"><i class="fas fa-home"></i> Accueil</a>
+            <a href="/demo/map-by-what"><i class="fas fa-list"></i> Tous les types</a>
+            <a href="/demo/view-events"><i class="fas fa-table"></i> Vue tableau</a>
+        </div>
+    </div>
+
+    <div class="content-grid">
+        <div class="map-container">
+            <div id="map"></div>
+        </div>
+
+        <div class="table-container">
+            <div class="table-header">
+                <h2><i class="fas fa-table"></i> Liste des événements</h2>
+
+                <div class="legend">
+                    <div class="legend-item">
+                        <div class="legend-color legend-past"></div>
+                        <span>Passés</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color legend-current"></div>
+                        <span>En cours</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color legend-future"></div>
+                        <span>À venir</span>
+                    </div>
+                </div>
+
+                <div class="stats">
+                    <span id="total-events">Total: 0</span>
+                    <span id="past-events">Passés: 0</span>
+                    <span id="current-events">En cours: 0</span>
+                    <span id="future-events">À venir: 0</span>
+                </div>
+            </div>
+
+            <div class="table-content">
+                <div id="loading" class="loading">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    Chargement des événements...
+                </div>
+
+                <div id="error" class="error" style="display: none;">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    Erreur lors du chargement des événements
+                </div>
+
+                <table class="events-table" id="events-table" style="display: none;">
+                    <thead>
+                        <tr>
+                            <th>Statut</th>
+                            <th>Événement</th>
+                            <th>Dates</th>
+                            <th>Lieu</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="events-tbody">
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Configuration
+        const eventType = '{{ event_type }}';
+        let map;
+        let markers = [];
+        let eventsData = [];
+
+        // Initialiser la carte
+        function initMap() {
+            map = new maplibregl.Map({
+                container: 'map',
+                style: 'https://tiles.openfreemap.org/styles/liberty',
+                center: [2.3522, 48.8566], // Paris par défaut
+                zoom: 6
+            });
+
+            map.addControl(new maplibregl.NavigationControl());
+            map.addControl(new maplibregl.AttributionControl({
+                customAttribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }));
+        }
+
+        // Déterminer le statut temporel d'un événement
+        function getEventStatus(start, stop) {
+            const now = new Date();
+            const startDate = new Date(start);
+            const stopDate = new Date(stop);
+
+            if (now < startDate) {
+                return 'future';
+            } else if (now > stopDate) {
+                return 'past';
+            } else {
+                return 'current';
+            }
+        }
+
+        // Obtenir la couleur selon le statut
+        function getStatusColor(status) {
+            switch (status) {
+                case 'past': return '#6c757d';
+                case 'current': return '#28a745';
+                case 'future': return '#007bff';
+                default: return '#6c757d';
+            }
+        }
+
+        // Obtenir le label selon le statut
+        function getStatusLabel(status) {
+            switch (status) {
+                case 'past': return 'Passé';
+                case 'current': return 'En cours';
+                case 'future': return 'À venir';
+                default: return 'Inconnu';
+            }
+        }
+
+        // Ajouter les marqueurs sur la carte
+        function addMarkersToMap(events) {
+            // Supprimer les anciens marqueurs
+            markers.forEach(marker => marker.remove());
+            markers = [];
+
+            const bounds = new maplibregl.LngLatBounds();
+
+            events.forEach(event => {
+                if (!event.geometry || !event.geometry.coordinates) return;
+
+                const coords = event.geometry.coordinates;
+                const properties = event.properties || {};
+                const status = getEventStatus(properties.start, properties.stop);
+                const color = getStatusColor(status);
+
+                // Créer l'élément marqueur
+                const el = document.createElement('div');
+                el.style.width = '20px';
+                el.style.height = '20px';
+                el.style.borderRadius = '50%';
+                el.style.backgroundColor = color;
+                el.style.border = '3px solid white';
+                el.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
+                el.style.cursor = 'pointer';
+
+                // Créer le contenu de la popup
+                const popupContent = `
+                    <div style="max-width: 300px;">
+                        <h3 style="margin: 0 0 10px 0;">${properties.label || 'Événement'}</h3>
+                        <p><strong>Statut:</strong> <span class="event-status status-${status}">${getStatusLabel(status)}</span></p>
+                        <p><strong>Début:</strong> ${new Date(properties.start).toLocaleString('fr-FR')}</p>
+                        <p><strong>Fin:</strong> ${new Date(properties.stop).toLocaleString('fr-FR')}</p>
+                        ${properties.where ? `<p><strong>Lieu:</strong> ${properties.where}</p>` : ''}
+                        ${properties.description ? `<p><strong>Description:</strong> ${properties.description}</p>` : ''}
+                        <div style="margin-top: 15px;">
+                            <a href="/demo/by_id/${properties.id}" style="color: #0078ff; font-weight: bold;">Voir les détails</a>
+                        </div>
+                    </div>
+                `;
+
+                const popup = new maplibregl.Popup({ offset: 25 })
+                    .setHTML(popupContent);
+
+                const marker = new maplibregl.Marker(el)
+                    .setLngLat(coords)
+                    .setPopup(popup)
+                    .addTo(map);
+
+                markers.push(marker);
+                bounds.extend(coords);
+            });
+
+            // Ajuster la vue pour englober tous les marqueurs
+            if (events.length > 0) {
+                map.fitBounds(bounds, { padding: 50 });
+            }
+        }
+
+        // Remplir le tableau
+        function populateTable(events) {
+            const tbody = document.getElementById('events-tbody');
+            tbody.innerHTML = '';
+
+            // Trier par date (futurs d'abord, puis en cours, puis passés)
+            const sortedEvents = events.sort((a, b) => {
+                const statusA = getEventStatus(a.properties.start, a.properties.stop);
+                const statusB = getEventStatus(b.properties.start, b.properties.stop);
+
+                const statusOrder = { 'future': 0, 'current': 1, 'past': 2 };
+
+                if (statusOrder[statusA] !== statusOrder[statusB]) {
+                    return statusOrder[statusA] - statusOrder[statusB];
+                }
+
+                return new Date(a.properties.start) - new Date(b.properties.start);
+            });
+
+            sortedEvents.forEach(event => {
+                const props = event.properties || {};
+                const status = getEventStatus(props.start, props.stop);
+
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>
+                        <span class="event-status status-${status}">${getStatusLabel(status)}</span>
+                    </td>
+                    <td>
+                        <div class="event-title">
+                            <a href="/demo/by_id/${props.id}">${props.label || 'Événement sans titre'}</a>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="event-date">
+                            <strong>Début:</strong> ${new Date(props.start).toLocaleDateString('fr-FR')}<br>
+                            <strong>Fin:</strong> ${new Date(props.stop).toLocaleDateString('fr-FR')}
+                        </div>
+                    </td>
+                    <td>${props.where || '-'}</td>
+                    <td>
+                        <a href="/demo/by_id/${props.id}" style="color: #0078ff; text-decoration: none;">
+                            <i class="fas fa-eye"></i> Détails
+                        </a>
+                    </td>
+                `;
+                tbody.appendChild(row);
+            });
+        }
+
+        // Mettre à jour les statistiques
+        function updateStats(events) {
+            const stats = {
+                total: events.length,
+                past: 0,
+                current: 0,
+                future: 0
+            };
+
+            events.forEach(event => {
+                const status = getEventStatus(event.properties.start, event.properties.stop);
+                stats[status]++;
+            });
+
+            document.getElementById('total-events').textContent = `Total: ${stats.total}`;
+            document.getElementById('past-events').textContent = `Passés: ${stats.past}`;
+            document.getElementById('current-events').textContent = `En cours: ${stats.current}`;
+            document.getElementById('future-events').textContent = `À venir: ${stats.future}`;
+        }
+
+        // Charger les événements
+        async function loadEvents() {
+            try {
+                const response = await fetch(`https://api.openeventdatabase.org/event?what=${eventType}&limit=1000`);
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const data = await response.json();
+                eventsData = data.features || [];
+
+                // Masquer le loading
+                document.getElementById('loading').style.display = 'none';
+
+                if (eventsData.length === 0) {
+                    document.getElementById('error').style.display = 'block';
+                    document.getElementById('error').innerHTML = `
+                        <i class="fas fa-info-circle"></i>
+                        Aucun événement trouvé pour le type "${eventType}"
+                    `;
+                    return;
+                }
+
+                // Afficher le tableau
+                document.getElementById('events-table').style.display = 'table';
+
+                // Peupler la carte et le tableau
+                addMarkersToMap(eventsData);
+                populateTable(eventsData);
+                updateStats(eventsData);
+
+            } catch (error) {
+                console.error('Erreur lors du chargement des événements:', error);
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('error').style.display = 'block';
+                document.getElementById('error').innerHTML = `
+                    <i class="fas fa-exclamation-triangle"></i>
+                    Erreur lors du chargement: ${error.message}
+                `;
+            }
+        }
+
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            initMap();
+            loadEvents();
+        });
+    </script>
+</body>
+</html>
diff --git a/oedb/resources/demo/templates/traffic.html b/oedb/resources/demo/templates/traffic.html
index 68cad41..5f72871 100644
--- a/oedb/resources/demo/templates/traffic.html
+++ b/oedb/resources/demo/templates/traffic.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Report Traffic Jam - OpenEventDatabase</title>
+    <link rel="icon" type="image/png" href="/static/oedb.png">
+    <link rel="icon" type="image/png" href="/static/oedb.png">
     <script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
     <link rel="stylesheet" href="/static/demo_styles.css">
     <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
     <link rel="stylesheet" href="/static/traffic.css">
     <script src="/static/demo_auth.js"></script>
-    <script src="/static/traffic.js" defer></script>
 </head>
 <body>
     <div class="container">
diff --git a/oedb/resources/demo/templates/traffic_new.html b/oedb/resources/demo/templates/traffic_new.html
index 23f1f23..8347e7f 100644
--- a/oedb/resources/demo/templates/traffic_new.html
+++ b/oedb/resources/demo/templates/traffic_new.html
@@ -260,7 +260,7 @@
         <div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
     </div>
     
-    <button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
+    <button id="report_issue_button" type="submit">Signaler le problème</button>
 </form>
 
 <div id="result"></div>
diff --git a/oedb/resources/live.py b/oedb/resources/live.py
index a4e21fc..f29d5f1 100644
--- a/oedb/resources/live.py
+++ b/oedb/resources/live.py
@@ -149,7 +149,7 @@ class LiveResource:
                 </div>
             </div>
             <script>
-                const API_URL = 'https://api.openeventdatabase.org/event?limit=1000';
+                const API_URL = 'https://api.openeventdatabase.org/event?when=last30days&limit=1000';
                 let chart;
                 let allFeatures = [];
                 let familySet = new Set();
diff --git a/uwsgi.ini b/uwsgi.ini
index 4eaf823..1bb2fd7 100644
--- a/uwsgi.ini
+++ b/uwsgi.ini
@@ -17,3 +17,5 @@ harakiri = 30
 max-requests = 1000
 socket-timeout = 120
 log-date = true
+py-autoreload = 1
+touch-reload = %p