diff --git a/oedb/resources/demo/demo_main.py b/oedb/resources/demo/demo_main.py
index 5877842..49182af 100644
--- a/oedb/resources/demo/demo_main.py
+++ b/oedb/resources/demo/demo_main.py
@@ -52,6 +52,13 @@ class DemoMainResource:
                 <script src="/static/demo_auth.js"></script>
                 <style>
                     body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
+                    .logo{
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    }
+                    .sources{
+                    font-size: 0.8rem
+                    }
                     #map { position: absolute; top: 0; bottom: 0; width: 100%; }
                     .map-overlay {
                         position: absolute;
@@ -63,6 +70,28 @@ class DemoMainResource:
                         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                         max-width: 300px;
                     }
+                    /* Styles pour listes dépliantes */
+                    #endpoints_list, #demo_pages_list {
+                        display: none;
+                        overflow: hidden;
+                        transition: all 0.3s ease;
+                    }
+                    #endpoints_list_header, #demo_pages_list_header {
+                        cursor: pointer;
+                        user-select: none;
+                        position: relative;
+                        padding-right: 20px;
+                    }
+                    #endpoints_list_header:after, #demo_pages_list_header:after {
+                        content: '▼';
+                        position: absolute;
+                        right: 0;
+                        font-size: 0.8em;
+                        transition: transform 0.3s ease;
+                    }
+                    #endpoints_list_header.active:after, #demo_pages_list_header.active:after {
+                        transform: rotate(180deg);
+                    }
                     .map-style-control {
                         position: absolute;
                         top: 10px;
@@ -108,9 +137,12 @@ class DemoMainResource:
                 <input type="hidden" id="osmRedirectUri" value="{client_redirect}">
                 
                 <div class="map-overlay">
-                    <h2>OpenEventDatabase Demo</h2>
-                    <p>This map shows current events from the OpenEventDatabase.</p>
-                    
+                    <h2>
+                    <img src="/static/oedb.png" class="logo" />
+                    OpenEventDatabase Demo</h2>
+                    <p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
+                                        <p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
+
                     <!-- User Information Panel -->
                     <div id="user-info-panel" class="user-info-panel" style="display: none; background-color: #f5f5f5; border-radius: 4px; padding: 10px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                         <h3 style="margin-top: 0; margin-bottom: 10px; color: #333;">User Information</h3>
@@ -144,14 +176,14 @@ class DemoMainResource:
 #                         </script>
 #                     </div> -->
                     
-                    <h3>API Endpoints:</h3>
-                    <ul>
+                    <h3 id="endpoints_list_header">API Endpoints:</h3>
+                    <ul id="endpoints_list">
                         <li><a href="/" >/ - API Information</a></li>
                         <li><a href="/event" >/event - Get Events</a></li>
                         <li><a href="/stats" >/stats - Database Statistics</a></li>
                     </ul>
-                    <h3>Demo Pages:</h3>
-                    <ul>
+                    <h3 id="demo_pages_list_header">Demo Pages:</h3>
+                    <ul id="demo_pages_list">
                         <li><a href="/demo/search" >/demo/search - Advanced Search</a></li>
                         <li><a href="/demo/by-what" >/demo/by-what - Events by Type</a></li>
                         <li><a href="/demo/map-by-what" >/demo/map-by-what - Map by Event Type</a></li>
@@ -160,22 +192,44 @@ class DemoMainResource:
                         <li><a href="/event?what=music" >Search Music Events</a></li>
                         <li><a href="/event?what=sport" >Search Sport Events</a></li>
                     </ul>
-                    <p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
-                    <p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
                     <p style="text-align: center; margin-top: 10px;">
-                        <a href="https://source.cipherbliss.com/tykayn/oedb-backend"  title="View Source Code on Cipherbliss" style="font-size: 24px;">
+                        <a class="sources" href="https://source.cipherbliss.com/tykayn/oedb-backend"  title="View Source Code on Cipherbliss" style="font-size: 24px;">
                             <i class="fas fa-code-branch"></i> sources
                         </a>
                     </p>
                 </div>
-                <div class="map-style-control">
-                    <h4 style="margin-top: 0; margin-bottom: 10px;">Map Style</h4>
-                    <button id="style-default" class="active">Default</button>
-                    <button id="style-osm-vector">OSM Vector</button>
-                    <button id="style-osm-raster">OSM Raster</button>
-                </div>
+
                 
                 <script>
+                    // Fonction pour gérer les listes dépliantes
+                    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');
+
+                        // Fonction pour basculer l'affichage d'une liste
+                        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');
+                                }
+                            });
+                        }
+
+                        // Initialiser les listes comme repliées
+                        endpointsList.style.display = 'none';
+                        demoPagesList.style.display = 'none';
+
+                        // Ajouter les écouteurs d'événements
+                        toggleList(endpointsHeader, endpointsList);
+                        toggleList(demoPagesHeader, demoPagesList);
+                    });
+
                     // Map style URLs
                     const mapStyles = {
                         default: 'https://tiles.openfreemap.org/styles/liberty',
diff --git a/oedb/resources/demo/static/oedb.png b/oedb/resources/demo/static/oedb.png
new file mode 100644
index 0000000..6cda090
Binary files /dev/null and b/oedb/resources/demo/static/oedb.png differ
diff --git a/oedb/resources/demo/templates/traffic.html b/oedb/resources/demo/templates/traffic.html
index 95c9f26..68cad41 100644
--- a/oedb/resources/demo/templates/traffic.html
+++ b/oedb/resources/demo/templates/traffic.html
@@ -1209,9 +1209,9 @@
             
             // Update the content
             userInfoPanel.innerHTML = `
-                <h3>User Information</h3>
-                <p>Username: <strong>${username}</strong></p>
-                <p>Points: <span class="user-points">${points}</span></p>
+<!--                <h3>User Information</h3>-->
+                <p> <strong>${username}</strong></p>
+                <p> <span class="user-points">${points}</span> points</p>
             `;
         }