diff --git a/templates/profile.modern.html b/templates/profile.modern.html
index b406185..2fa5873 100644
--- a/templates/profile.modern.html
+++ b/templates/profile.modern.html
@@ -1,13 +1,13 @@
-<!-- Template d'exemple utilisant le nouveau système i18n sophistiqué -->
-{% extends "base." + locale + ".html" %}
+<!-- Modern demonstration template in English -->
+{% extends "base.en-us.html" %}
 
-{% block title %}{{ translations["profile"] }} - Smoke Signal{% endblock %}
+{% block title %}{{ translations["page-title"] }}{% endblock %}
 
 {% block head %}
 <link rel="alternate" href="at://{{ profile.did }}" />
 <meta name="description" content="{{ profile.handle }} - {{ profile.did }}">
 <meta property="og:title" content="@{{ profile.handle }}" />
-<meta property="og:description" content="Profile de @{{ profile.handle }}" />
+<meta property="og:description" content="Profil de @{{ profile.handle }}" />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="{{ external_base }}/{{ profile.did }}" />
 <meta property="og:site_name" content="Smoke Signal" />
@@ -22,144 +22,124 @@
 {% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <!-- Header avec salutation personnalisée -->
-    <header class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900 mb-2">
+{%- from "pagination.html" import view_pagination -%}
+
+<!-- Section héro avec salutation personnalisée -->
+<section class="section hero is-small custom-hero">
+    <img src="https://picsum.photos/1600/400?random=43242&blur=2&grayscale" alt="Background" class="hero-background">
+    <div class="hero-overlay"></div>
+    <div class="container">
+        <!-- Salutation avec support de genre et formalité -->
+        {% if is_self %}
+        <p class="subtitle has-text-white">
             {{ translations["profile-greeting"] }}
-        </h1>
-        <p class="text-gray-600">
+        </p>
+        <p class="has-text-white-ter">
             {{ translations["profile-subtitle"] }}
         </p>
-    </header>
-
-    <!-- Section profil avec support multi-genre -->
-    <section class="bg-white rounded-lg shadow-md p-6 mb-6">
-        <h2 class="text-xl font-semibold mb-4">Profile Information</h2>
+        {% endif %}
         
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">
-                    Handle
-                </label>
-                <div class="text-gray-900">@{{ profile.handle }}</div>
-            </div>
-            
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">
-                    Decentralized Identifier
-                </label>
-                <div class="text-gray-500 text-sm">{{ profile.did }}</div>
-            </div>
-            
-            {% if profile.display_name %}
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">
-                    Display Name
-                </label>
-                <div class="text-gray-900">{{ profile.display_name }}</div>
-            </div>
+        <h1 class="title has-text-white">@{{ profile.handle }}</h1>
+        
+        {% if profile.display_name %}
+        <p class="subtitle has-text-white">{{ profile.display_name }}</p>
+        {% endif %}
+        
+        <div class="buttons">
+            <a class="button is-link is-outlined" href="https://bsky.app/profile/{{ profile.did }}" target="_blank">
+                <span class="icon">
+                    <i class="fab fa-bluesky"></i>
+                </span>
+                <span>Bluesky</span>
+            </a>
+
+            {% if is_self %}
+            <a class="button is-info" href="/settings" hx-boost="true">
+                <span class="icon">
+                    <i class="fas fa-cog"></i>
+                </span>
+                <span>{{ translations["nav-settings"] }}</span>
+            </a>
+
+            <a class="button is-primary is-outlined" href="/import">
+                <span class="icon">
+                    <i class="fas fa-download"></i>
+                </span>
+                <span>Conversion/Importation</span>
+            </a>
             {% endif %}
         </div>
-    </section>
+    </div>
+</section>
 
-    <!-- Section statistiques avec pluralisation -->
-    <section class="bg-white rounded-lg shadow-md p-6 mb-6">
-        <h2 class="text-xl font-semibold mb-4">Statistics</h2>
-        
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div class="text-center">
-                <div class="text-2xl font-bold text-blue-600">{{ profile.events_created or 0 }}</div>
-                <div class="text-sm text-gray-600">
-                    {{ translations["events-created"] }}
+<!-- Section principale avec onglets -->
+<section class="section">
+    <div class="container">
+        <!-- Informations de profil -->
+        {% if is_self %}
+        <div class="box mb-5">
+            <h2 class="title is-4">{{ translations["profile-information"] }}</h2>
+            <div class="columns">
+                <div class="column">
+                    <div class="field">
+                        <label class="label">{{ translations["handle"] }}</label>
+                        <div class="content">@{{ profile.handle }}</div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="field">
+                        <label class="label">{{ translations["did"] }}</label>
+                        <div class="content">
+                            <small class="has-text-grey">{{ profile.did }}</small>
+                        </div>
+                    </div>
                 </div>
             </div>
             
-            <div class="text-center">
-                <div class="text-2xl font-bold text-green-600">{{ profile.rsvps_count or 0 }}</div>
-                <div class="text-sm text-gray-600">
-                    {{ translations["rsvps-made"] }}
-                </div>
+            {% if profile.display_name %}
+            <div class="field">
+                <label class="label">{{ translations["display-name"] }}</label>
+                <div class="content">{{ profile.display_name }}</div>
             </div>
-
-    </section>
-
-    <!-- Actions avec support formalité -->
-    <section class="bg-white rounded-lg shadow-md p-6">
-        <h2 class="text-xl font-semibold mb-4">{{ translations["actions"] }}</h2>
-        
-        <div class="flex flex-wrap gap-3">
-            {% if can_edit %}
-            <a href="/profile/edit" 
-               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
-                Edit Profile
-            </a>
             {% endif %}
             
-            <a href="/settings" 
-               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
-                Settings
-            </a>
-            
-            {% if profile.did != current_user.did %}
-            <button type="button" 
-                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
-                    onclick="followUser('{{ profile.did }}')">
-                Follow
-            </button>
-            {% endif %}
-        </div>
-    </section>
-
-    <!-- Messages contextuels avec genre et formalité -->
-    {% if is_first_visit %}
-    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-md p-4">
-        <div class="flex">
-            <div class="flex-shrink-0">
-                <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-                    </svg>
-            </div>
-            <div class="ml-3">
-                <h3 class="text-sm font-medium text-blue-800">
-                    {{ translations["first-visit-title"] }}
-                </h3>
-                <div class="mt-2 text-sm text-blue-700">
-                    <p>{{ translations["first-visit-message"] }}</p>
+            {% if profile.created_at %}
+            <div class="field">
+                <label class="label">{{ translations["member-since"] }}</label>
+                <div class="control">
+                    <div class="content">{{ profile.created_at }}</div> 
                 </div>
             </div>
+            {% endif %}
         </div>
+        {% endif %}
+        
+        <!-- Onglets des événements -->
+        <div class="tabs">
+            <ul>
+                {% for tab_link in tabs %}
+                <li{% if tab_link.active %} class="is-active"{% endif %}>
+                    <a href="{{ tab_link.url }}">{{ tab_link.label }}</a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        
+        <!-- Liste des événements -->
+        {% include 'event_list.fr-ca.incl.html' %}
+        
+        <!-- Pagination -->
+        {% if pagination %}
+        {{ view_pagination((canonical_url ~ "?"), pagination) }}
+        {% endif %}
     </div>
-    {% endif %}
-</div>
+</section>
 
-<script>
-function followUser(did) {
-    // Utilisation de messages i18n en JavaScript
-    const confirmMessage = `{{ translations["confirm-follow"] }}`;
-    if (confirm(confirmMessage)) {
-        // Logique de suivi
-        fetch('/api/follow', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ did: did })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                alert(`Successfully followed`);
-                location.reload();
-            } else {
-                alert(`Error during follow`);
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            alert(`Network error`);
-        });
-    }
-}
-</script>
+<!-- Message de première visite -->
+{% if is_self and is_first_visit %}
+<div class="notification is-info is-light">
+    <h3 class="title is-5">{{ translations["first-visit-title"] }}</h3>
+    <p>{{ translations["first-visit-message"] }}</p>
+</div>
+{% endif %}
 {% endblock %}