Second pass to the implementation of bookmarks.

crudely works, but needs more testing and polish.

i18n/en-us/bookmarks.ftl

···
 timeline-view = Timeline
 calendar-view = Calendar
 filter-by-tags = Filter by Tags
-calendar-navigation = Calendar
 remove-bookmark = Remove Bookmark
 confirm-remove-bookmark = Are you sure you want to remove this bookmark?
 add-to-calendar = Add to Calendar
···
 bookmark-tags = Tags (comma-separated)
 bookmark-calendar-name = Calendar Name
 bookmark-calendar-description = Description (optional)
-make-calendar-public = Make this calendar public
 bookmarked-on = Bookmarked on {$date}
-ends-at = Ends at {$time}
 
 # Enhanced calendar management
 bookmark-calendars = Custom Calendars
 create-calendar = Create Calendar
 create-bookmark-calendar = Create Custom Calendar
-create-new-calendar = Create New Calendar
 calendar-name = Calendar Name
 calendar-name-placeholder = e.g. Summer Festivals, Work Events
 calendar-name-help = Choose a descriptive name for your calendar
 calendar-tags = Tags
 add-tag-placeholder = Add a tag and press Enter
-calendar-tags-help = Add tags to organize your calendar
 calendar-description-placeholder = What types of events will you collect?
 make-calendar-public = Make this calendar public
 public-calendar-help = Public calendars appear on your profile and can be discovered by others
···
 no-public-calendars = No public calendars yet
 export-calendar = Export Calendar
 share-calendar = Share Calendar
-events = events
 created = Created on
 calendar-updated = Calendar updated successfully
 calendar-created = Calendar created successfully
 event-added-to-calendar = Event added to calendar
 
+# Timeline view
+back-to-calendars = Back to Calendars
+calendar-navigation = Calendar
+start-bookmarking-events = Start bookmarking events to see them here
+
 # Tag management
 calendar-tags-help = Add multiple tags to organize this calendar (press Enter or comma to add)
 tag-suggestions = Suggested tags
···
 error-max-tags = Maximum 10 tags allowed per calendar
 error-empty-tag = Empty tags are not allowed
 error-tag-too-long = Tag too long (maximum 50 characters)
+
+# Calendar management
+manage-calendars = Manage Calendars
+view-calendar = View Calendar
+delete-calendar = Delete Calendar
+confirm-delete-calendar = Are you sure you want to delete this calendar?
+no-calendars-yet = No calendars yet
+create-first-calendar-help = Create your first calendar to organize bookmarked events by tags

i18n/en-us/common.ftl

···
 # Location labels
 location = Location
 
+# Navigation for bookmark integration
+nav-events-calendars = Events & Calendars
+nav-browse-events = Browse Events
+nav-my-calendars = My Calendars
+nav-all-bookmarks = All Bookmarks
+
+# Calendar days and months
+mon = Mon
+tue = Tue
+wed = Wed
+thu = Thu
+fri = Fri
+sat = Sat
+sun = Sun
+june = June
+
 # iCal export translations
 ical-untitled-event = Untitled Event
 ical-event-description-fallback = Event organized by {$organizer} via smokesignal.events

i18n/fr-ca/bookmarks.ftl

···
 timeline-view = Vue chronologique
 calendar-view = Vue calendrier
 filter-by-tags = Filtrer par étiquettes
-calendar-navigation = Navigation
 remove-bookmark = Retirer le marque-page
 confirm-remove-bookmark = Êtes-vous sûr·e de vouloir retirer ce marque-page?
 add-to-calendar = Ajouter au calendrier
-create-new-calendar = Créer un nouveau calendrier
 bookmark-success = Événement marqué avec succès!
 no-bookmarked-events = Aucun événement marqué trouvé
 bookmark-tags = Étiquettes (séparées par des virgules)
 bookmark-calendar-name = Nom du calendrier
 bookmark-calendar-description = Description (optionnelle)
-make-calendar-public = Rendre ce calendrier public
 bookmarked-on = Marqué le {$date}
-ends-at = Se termine à {$time}
 
 # Gestion avancée des calendriers
 bookmark-calendars = Calendriers personnalisés
···
 calendar-name-help = Choisissez un nom descriptif pour votre calendrier
 calendar-tags = Étiquettes
 add-tag-placeholder = Ajouter une étiquette et appuyer sur Entrée
-calendar-tags-help = Ajoutez des étiquettes pour organiser votre calendrier
 calendar-description-placeholder = Quels types d'événements allez-vous collecter ?
 make-calendar-public = Rendre ce calendrier public
 public-calendar-help = Les calendriers publics apparaissent sur votre profil et peuvent être découverts par d'autres
···
 no-public-calendars = Pas encore de calendriers publics
 export-calendar = Exporter le calendrier
 share-calendar = Partager le calendrier
-events = événements
 created = Créé le
 calendar-updated = Calendrier mis à jour avec succès
 calendar-created = Calendrier créé avec succès
 event-added-to-calendar = Événement ajouté au calendrier
 
+# Vue chronologique
+back-to-calendars = Retour aux calendriers
+calendar-navigation = Navigation
+start-bookmarking-events = Commencez à marquer des événements pour les voir ici
+
 # Gestion des étiquettes
 calendar-tags-help = Ajoutez plusieurs étiquettes pour organiser ce calendrier (appuyez sur Entrée ou virgule pour ajouter)
 tag-suggestions = Étiquettes suggérées
···
 error-max-tags = Maximum 10 étiquettes autorisées par calendrier
 error-empty-tag = Les étiquettes vides ne sont pas autorisées
 error-tag-too-long = Étiquette trop longue (maximum 50 caractères)
+
+# Gestion des calendriers
+manage-calendars = Gérer les calendriers
+view-calendar = Voir le calendrier
+delete-calendar = Supprimer le calendrier
+confirm-delete-calendar = Êtes-vous sûr·e de vouloir supprimer ce calendrier ?
+no-calendars-yet = Aucun calendrier pour l'instant
+create-first-calendar-help = Créez votre premier calendrier pour organiser les événements marqués par étiquettes

i18n/fr-ca/common.ftl

···
 # Étiquettes de lieu
 location = Lieu
 
+# Navigation pour l'intégration des signets
+nav-events-calendars = Événements et calendriers
+nav-browse-events = Parcourir les événements
+nav-my-calendars = Mes calendriers
+nav-all-bookmarks = Tous les signets
+
+# Jours et mois du calendrier
+mon = Lun
+tue = Mar
+wed = Mer
+thu = Jeu
+fri = Ven
+sat = Sam
+sun = Dim
+june = Juin
+
 # Traductions d'exportation iCal
 ical-untitled-event = Événement sans titre
 ical-event-description-fallback = Événement organisé par {$organizer} via smokesignal.events

lexicons/community_lexicon_bookmarks_getActorBookmarks_schema.json

···
+{
+  "lexicon": 1,
+  "id": "community.lexicon.bookmarks.getActorBookmarks",
+  "description": "Get bookmarks for a specific actor",
+  "defs": {
+    "main": {
+      "type": "query",
+      "description": "Get bookmarks for a specific actor",
+      "parameters": {
+        "type": "params",
+        "required": ["actor"],
+        "properties": {
+          "actor": {
+            "type": "string",
+            "format": "at-identifier",
+            "description": "The actor whose bookmarks to retrieve"
+          },
+          "limit": {
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 100,
+            "default": 50,
+            "description": "Maximum number of bookmarks to return"
+          },
+          "cursor": {
+            "type": "string",
+            "description": "Pagination cursor"
+          }
+        }
+      },
+      "output": {
+        "encoding": "application/json",
+        "schema": {
+          "type": "object",
+          "required": ["bookmarks"],
+          "properties": {
+            "bookmarks": {
+              "type": "array",
+              "items": {
+                "type": "ref",
+                "ref": "#bookmarkView"
+              }
+            },
+            "cursor": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "bookmarkView": {
+      "type": "object",
+      "required": ["uri", "value"],
+      "properties": {
+        "uri": {
+          "type": "string",
+          "format": "at-uri",
+          "description": "AT-URI of the bookmark record"
+        },
+        "value": {
+          "type": "ref",
+          "ref": "community.lexicon.bookmarks.bookmark"
+        },
+        "indexedAt": {
+          "type": "string",
+          "format": "datetime",
+          "description": "When the bookmark was indexed"
+        }
+      }
+    }
+  }
+}

lexicons/community_lexicon_bookmarks_schema.json

···
+{
+  "lexicon": 1,
+  "id": "community.lexicon.bookmarks.bookmark",
+  "description": "A bookmark record for events and other content",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "any",
+      "record": {
+        "type": "object",
+        "required": ["subject", "createdAt"],
+        "properties": {
+          "subject": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URI of the subject being bookmarked"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime",
+            "description": "When the bookmark was created"
+          },
+          "tags": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Optional tags for categorizing the bookmark"
+          }
+        }
+      }
+    }
+  }
+}

migrations/20250619000000_remove_bookmark_fkey.sql

···
+-- Remove foreign key constraint from event_bookmarks
+-- This allows bookmarking events that aren't locally cached
+
+ALTER TABLE event_bookmarks DROP CONSTRAINT event_bookmarks_event_aturi_fkey;

src/atproto/client.rs

···
 use crate::http::middleware_auth::WebSession;
 use anyhow::Result;
 use atrium_api::com::atproto::repo::{
-    create_record, put_record, list_records,
+    create_record, put_record, list_records, delete_record,
 };
 use atrium_api::types::{
     string::{AtIdentifier, Did, Handle, Nsid, RecordKey, Cid}, 
···
     pub collection: String,
     #[serde(skip_serializing_if = "Option::is_none", default, rename = "rkey")]
     pub record_key: Option<String>,
-    pub validate: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub validate: Option<bool>,
     pub record: T,
     #[serde(skip_serializing_if = "Option::is_none", default, rename = "swapCommit")]
     pub swap_commit: Option<String>,
···
     pub collection: String,
     #[serde(rename = "rkey")]
     pub record_key: String,
-    pub validate: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub validate: Option<bool>,
     pub record: T,
     #[serde(skip_serializing_if = "Option::is_none", default, rename = "swapCommit")]
     pub swap_commit: Option<String>,
···
     pub swap_record: Option<String>,
 }
 
+/// Request structure for deleting AT Protocol records
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct DeleteRecordRequest {
+    pub repo: String,
+    pub collection: String,
+    #[serde(rename = "rkey")]
+    pub record_key: String,
+    #[serde(skip_serializing_if = "Option::is_none", default, rename = "swapRecord")]
+    pub swap_record: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none", default, rename = "swapCommit")]
+    pub swap_commit: Option<String>,
+}
+
 /// Parameters for listing records
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct ListRecordsParams {
···
             repo,
             collection,
             rkey,
-            validate: Some(request.validate),
+            validate: request.validate, // Use the optional validate field directly
             record: record_unknown,
             swap_commit,
         };
···
             repo,
             collection,
             rkey,
-            validate: Some(request.validate),
+            validate: request.validate, // Use the optional validate field directly
             record: record_unknown,
             swap_commit,
             swap_record,
···
             records,
             cursor: response.data.cursor,
         })
+    }
+
+    /// Delete a record using Atrium API
+    pub async fn delete_record(
+        &self,
+        web_session: &WebSession,
+        request: DeleteRecordRequest,
+    ) -> Result<(), anyhow::Error> {
+        // Get the authenticated Atrium client
+        let agent = self.atrium_manager
+            .get_atproto_client(&web_session.session_group)
+            .await
+            .map_err(|e| anyhow::anyhow!("Failed to get AT Protocol client: {}", e))?;
+
+        // Convert our request to Atrium format
+        let repo = if request.repo.starts_with("did:") {
+            let did = Did::new(request.repo.clone())
+                .map_err(|e| anyhow::anyhow!("Invalid DID format: {}", e))?;
+            AtIdentifier::from(did)
+        } else {
+            let handle = Handle::new(request.repo.clone())
+                .map_err(|e| anyhow::anyhow!("Invalid handle format: {}", e))?;
+            AtIdentifier::from(handle)
+        };
+
+        let collection = Nsid::new(request.collection.clone())
+            .map_err(|e| anyhow::anyhow!("Invalid collection NSID: {}", e))?;
+
+        let rkey = RecordKey::new(request.record_key)
+            .map_err(|e| anyhow::anyhow!("Invalid record key: {}", e))?;
+
+        // Build the input data
+        let input_data = delete_record::InputData {
+            repo,
+            collection,
+            rkey,
+            swap_commit: None,
+            swap_record: None,
+        };
+
+        // Make the API call
+        agent.api.com.atproto.repo.delete_record(input_data.into())
+            .await
+            .map_err(|e| {
+                tracing::error!("AT Protocol delete_record failed: {:?}", e);
+                anyhow::anyhow!("Delete record failed: {}", e)
+            })?;
+
+        Ok(())
     }
 }

src/atproto/lexicon/community_lexicon_bookmarks.rs

···
 pub const BOOKMARK_NSID: &str = "community.lexicon.bookmarks.bookmark";
 pub const GET_BOOKMARKS_NSID: &str = "community.lexicon.bookmarks.getActorBookmarks";
 
-#[derive(Debug, Serialize, Deserialize, Clone)]
+#[derive(Debug, Serialize, Deserialize, PartialEq, Clone)]
 pub struct Bookmark {
-    pub subject: String,     // Event AT-URI (e.g., at://did:plc:xyz/community.lexicon.calendar.event/abc123)
-    pub tags: Vec<String>,   // Tags are required for organization
-    #[serde(rename = "createdAt")]
+    pub subject: String,         // Event AT-URI (e.g., at://did:plc:xyz/community.lexicon.calendar.event/abc123)
+    
+    #[serde(rename = "createdAt", with = "crate::atproto::datetime::datetime_format")]
     pub created_at: DateTime<Utc>,
+    
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tags: Option<Vec<String>>,   // Tags are optional according to the official lexicon
 }
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct GetActorBookmarksParams {
-    pub actor: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tags: Option<Vec<String>>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub cursor: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
···
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct GetActorBookmarksResponse {
-    pub bookmarks: Vec<BookmarkRecord>, // Returns full bookmark records with AT-URIs
+    pub bookmarks: Vec<Bookmark>, // Returns bookmark records directly per the official lexicon
     #[serde(skip_serializing_if = "Option::is_none")]
     pub cursor: Option<String>,
 }

src/atproto/lexicon/mod.rs

···
 pub mod com_atproto_repo;
-mod community_lexicon_bookmarks;
+pub mod community_lexicon_bookmarks;
 mod community_lexicon_calendar_event;
 mod community_lexicon_calendar_rsvp;
 pub mod community_lexicon_location;

src/http/handle_bookmark_calendars.rs

···
 use axum::{
     extract::{Path},
-    response::{Html, IntoResponse},
+    response::{Html, IntoResponse, Redirect},
     http::StatusCode,
     Json,
 };
···
     let language_clone = ctx.language.clone();
     let renderer = create_renderer!(ctx.web_context.clone(), language_clone, hx_boosted, false);
 
-    // For now, return empty calendars list
+    // Fetch user's calendars from the database
+    let calendars = match crate::storage::bookmark_calendars::get_by_user(&ctx.web_context.pool, &current_handle.did, true).await {
+        Ok(calendars) => calendars,
+        Err(e) => {
+            error!("Failed to fetch calendars for user {}: {}", current_handle.did, e);
+            Vec::new()
+        }
+    };
+
     let template_context = template_context! {
-        calendars => Vec::<BookmarkCalendar>::new(),
+        calendars => calendars,
         user_did => current_handle.did,
     };
 
···
         Ok(created_calendar) => {
             info!("Successfully created calendar {} for user {}", created_calendar.calendar_id, current_handle.did);
             
-            let html = format!(
-                r#"<div class="notification is-success">
-                    <p>Calendar "{}" created successfully!</p>
-                </div>"#,
-                created_calendar.name
-            );
-            
-            Ok(Html(html).into_response())
+            // Return a simple success response - JavaScript will handle refreshing the page
+            Ok(Html("Calendar created successfully".to_string()).into_response())
         }
         Err(e) => {
             error!("Failed to create calendar: {}", e);
···
                 return Ok((StatusCode::FORBIDDEN, "Access denied".to_string()).into_response());
             }
 
-            let template_context = template_context! {
-                calendar => calendar,
-                is_owner => calendar.did == current_handle.did,
-                events => Vec::<String>::new(), // TODO: Fetch events for this calendar
-            };
-
-            let html = renderer.render_template(
-                "bookmark_calendar_view", 
-                template_context, 
-                ctx.current_handle.as_ref(),
-                &format!("/bookmark-calendars/{}", calendar_id)
+            // Redirect to the bookmark timeline with the calendar's tags as filters
+            let tags_param = calendar.tags.join(",");
+            let redirect_url = format!("/bookmarks?tags={}&calendar_name={}", 
+                urlencoding::encode(&tags_param), 
+                urlencoding::encode(&calendar.name)
             );
-            Ok(Html(html).into_response())
+            
+            Ok(axum::response::Redirect::to(&redirect_url).into_response())
         }
         Ok(None) => {
             Ok((StatusCode::NOT_FOUND, "Calendar not found".to_string()).into_response())

src/http/handle_bookmark_events.rs

···
     http::StatusCode,
 };
 use axum_htmx::HxBoosted;
-use chrono::Datelike;
+use chrono::{Datelike, DateTime, TimeZone, Timelike};
+use chrono_tz::Tz;
 use minijinja::context as template_context;
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
···
 use crate::create_renderer;
 use crate::http::context::UserRequestContext;
 use crate::http::errors::WebError;
+use crate::i18n::fluent_loader::LOCALES;
 use crate::services::event_bookmarks::EventBookmarkService;
+use crate::storage::event_bookmarks::BookmarkedEvent;
+use fluent_templates::Loader;
+
+// Date formatting function with French locale support
+fn format_datetime_for_locale(dt: &DateTime<Tz>, locale: Option<&fluent_templates::LanguageIdentifier>) -> String {
+    // Check if we're in French locale
+    let is_french = locale
+        .map(|l| l.language.as_str() == "fr")
+        .unwrap_or(false);
+    
+    if is_french {
+        // French format
+        let months_fr = [
+            "janvier", "février", "mars", "avril", "mai", "juin",
+            "juillet", "août", "septembre", "octobre", "novembre", "décembre"
+        ];
+        let month_name = months_fr.get((dt.month() - 1) as usize).unwrap_or(&"");
+        format!("{} {} {} à {}:{:02}", 
+            dt.day(), 
+            month_name, 
+            dt.year(),
+            dt.hour(),
+            dt.minute()
+        )
+    } else {
+        // English format
+        dt.format("%B %-d, %Y at %-I:%M %p").to_string()
+    }
+}
+
+// Enhanced BookmarkedEvent with timezone-aware formatting
+#[derive(Serialize)]
+struct BookmarkedEventWithTz {
+    #[serde(flatten)]
+    event: BookmarkedEvent,
+    starts_at_human: Option<String>,
+    ends_at_human: Option<String>,
+}
+
+fn process_bookmarked_events_with_timezone(events: Vec<BookmarkedEvent>, tz: &Tz, locale: Option<&fluent_templates::LanguageIdentifier>) -> Vec<BookmarkedEventWithTz> {
+    events.into_iter().map(|event| {
+        let starts_at_human = event.event_details.starts_at.as_ref().map(|dt| {
+            let dt_with_tz = dt.with_timezone(tz);
+            format_datetime_for_locale(&dt_with_tz, locale)
+        });
+        
+        let ends_at_human = event.event_details.ends_at.as_ref().map(|dt| {
+            let dt_with_tz = dt.with_timezone(tz);
+            format_datetime_for_locale(&dt_with_tz, locale)
+        });
+        
+        BookmarkedEventWithTz {
+            event,
+            starts_at_human,
+            ends_at_human,
+        }
+    }).collect()
+}
 
 #[derive(Deserialize)]
 pub struct BookmarkEventParams {
···
 ) -> Result<impl IntoResponse, WebError> {
     let current_handle = ctx.auth.require(&ctx.web_context.config.destination_key, "/bookmarks")?;
 
+    // Debug logging to track tag parsing
+    info!("Raw tags parameter: {:?}", params.tags);
+    
     let tags: Vec<String> = params
         .tags
         .unwrap_or_default()
···
         .map(|s| s.trim().to_string())
         .filter(|s| !s.is_empty())
         .collect();
+
+    info!("Parsed tags: {:?}", tags);
 
     // Validate tags
     if tags.len() > 10 {
-        return Ok((StatusCode::BAD_REQUEST, "Maximum 10 tags allowed".to_string()).into_response());
+        let error_message = LOCALES.lookup(&ctx.language.0, "error-max-tags");
+        return Ok((StatusCode::BAD_REQUEST, error_message).into_response());
     }
 
     for tag in &tags {
         if tag.len() > 50 {
-            return Ok((StatusCode::BAD_REQUEST, "Tag too long (maximum 50 characters)".to_string()).into_response());
+            let error_message = LOCALES.lookup(&ctx.language.0, "error-tag-too-long");
+            return Ok((StatusCode::BAD_REQUEST, error_message).into_response());
         }
     }
 
···
         Arc::new(ctx.web_context.atrium_oauth_manager.clone()),
     );
 
+    // First check if the event is already bookmarked
     match bookmark_service
-        .bookmark_event(&current_handle.did, &params.event_aturi, tags)
+        .get_bookmark(&current_handle.did, &params.event_aturi)
         .await
     {
-        Ok(_bookmark) => {
-            info!("Successfully bookmarked event {} for user {}", params.event_aturi, current_handle.did);
-            
-            let html = r#"<div class="notification is-success">
-                <p>Event bookmarked successfully!</p>
-            </div>"#;
-            
-            Ok(Html(html.to_string()).into_response())
+        Ok(Some(_existing_bookmark)) => {
+            // Event is already bookmarked, update the tags
+            // Get session group from the Auth context
+            let session_group = ctx.auth.1.as_ref()
+                .map(|oauth_session| oauth_session.session_group.as_str())
+                .unwrap_or("unknown"); // Fallback if no session
+
+            match bookmark_service
+                .update_bookmark_tags(&current_handle.did, &params.event_aturi, tags, session_group)
+                .await
+            {
+                Ok(_) => {
+                    info!("Successfully updated bookmark tags for event {} for user {}", params.event_aturi, current_handle.did);
+                    
+                    let success_message = LOCALES.lookup(&ctx.language.0, "calendar-updated");
+                    let html = format!(r#"<div class="notification is-success">
+                        <p>{}</p>
+                    </div>"#, success_message);
+                    
+                    Ok(Html(html).into_response())
+                }
+                Err(e) => {
+                    error!("Failed to update bookmark tags for event {}: {}", params.event_aturi, e);
+                    let error_message = LOCALES.lookup(&ctx.language.0, "error-occurred");
+                    Ok((StatusCode::INTERNAL_SERVER_ERROR, error_message).into_response())
+                }
+            }
+        }
+        Ok(None) => {
+            // Event is not bookmarked, create new bookmark
+            // Get session group from the Auth context
+            let session_group = ctx.auth.1.as_ref()
+                .map(|oauth_session| oauth_session.session_group.as_str())
+                .unwrap_or("unknown"); // Fallback if no session
+
+            match bookmark_service
+                .bookmark_event(&current_handle.did, &params.event_aturi, tags, session_group)
+                .await
+            {
+                Ok(_bookmark) => {
+                    info!("Successfully bookmarked event {} for user {}", params.event_aturi, current_handle.did);
+                    
+                    let success_message = LOCALES.lookup(&ctx.language.0, "bookmark-success");
+                    let html = format!(r#"<div class="notification is-success">
+                        <p>{}</p>
+                    </div>"#, success_message);
+                    
+                    Ok(Html(html).into_response())
+                }
+                Err(e) => {
+                    error!("Failed to bookmark event {}: {}", params.event_aturi, e);
+                    let error_message = LOCALES.lookup(&ctx.language.0, "error-occurred");
+                    Ok((StatusCode::INTERNAL_SERVER_ERROR, error_message).into_response())
+                }
+            }
         }
         Err(e) => {
-            error!("Failed to bookmark event {}: {}", params.event_aturi, e);
-            Ok((StatusCode::INTERNAL_SERVER_ERROR, "Failed to bookmark event".to_string()).into_response())
+            error!("Failed to check existing bookmark for event {}: {}", params.event_aturi, e);
+            Ok((StatusCode::INTERNAL_SERVER_ERROR, "Failed to check bookmark status".to_string()).into_response())
         }
     }
 }
···
     HxBoosted(hx_boosted): HxBoosted,
     Query(params): Query<CalendarViewParams>,
 ) -> Result<impl IntoResponse, WebError> {
+    tracing::info!("Starting handle_bookmark_calendar function");
     let current_handle = ctx.auth.require(&ctx.web_context.config.destination_key, "/bookmarks")?;
 
     let view_mode = params.view.as_deref().unwrap_or("timeline");
···
         .await
     {
         Ok(paginated_events) => {
+            // Store count before moving events
+            let events_count = paginated_events.events.len();
+            
+            // Determine timezone from current user, fallback to UTC
+            let tz = current_handle.tz.parse::<Tz>().unwrap_or(Tz::UTC);
+            
+            // Process events to include timezone-aware date formatting
+            let processed_events = process_bookmarked_events_with_timezone(
+                paginated_events.events, 
+                &tz,
+                Some(&ctx.language.0)
+            );
+            
             let template_name = match view_mode {
                 "calendar" => "bookmark_calendar_grid",
                 _ => "bookmark_calendar_timeline",
             };
 
+            // Get current date for calendar context
+            let now = chrono::Utc::now();
+            let month_names = vec![
+                "January", "February", "March", "April", "May", "June",
+                "July", "August", "September", "October", "November", "December"
+            ];
+
             let template_context = template_context! {
-                events => paginated_events.events,
+                events => processed_events,
                 total_count => paginated_events.total_count,
                 has_more => paginated_events.has_more,
                 current_offset => offset,
                 view_mode => view_mode,
                 filter_tags => params.tags.unwrap_or_default(),
+                month => now.month(),
+                year => now.year(),
+                month_names => month_names,
             };
             
-            let html = renderer.render_template(
+            tracing::info!(
+                template_name = %template_name,
+                events_count = events_count,
+                total_count = paginated_events.total_count,
+                view_mode = %view_mode,
+                "About to render bookmark events template"
+            );
+            
+            let response = renderer.render_template(
                 template_name, 
                 template_context, 
                 ctx.current_handle.as_ref(),
                 "/bookmarks"
             );
-            Ok(Html(html).into_response())
+            
+            tracing::info!("Successfully rendered bookmark events template");
+            tracing::info!("Response status: {:?}", response.status());
+            let result = Ok(response);
+            tracing::info!("About to return from handle_bookmark_calendar function");
+            result
         }
         Err(e) => {
             error!("Failed to get bookmarked events for user {}: {}", current_handle.did, e);
-            Ok((StatusCode::INTERNAL_SERVER_ERROR, "Failed to load bookmarks".to_string()).into_response())
+            let error_message = LOCALES.lookup(&ctx.language.0, "error-occurred");
+            Ok((StatusCode::INTERNAL_SERVER_ERROR, error_message).into_response())
         }
     }
 }
···
 /// Handle removing a bookmark
 pub async fn handle_remove_bookmark(
     ctx: UserRequestContext,
-    Path(bookmark_aturi): Path<String>,
+    Path(event_aturi): Path<String>,
 ) -> Result<impl IntoResponse, WebError> {
     let current_handle = ctx.auth.require(&ctx.web_context.config.destination_key, "/bookmarks")?;
 
-    // Decode the bookmark AT-URI if URL-encoded
-    let bookmark_aturi = urlencoding::decode(&bookmark_aturi)
-        .map_err(|_| anyhow::anyhow!("Invalid bookmark URI"))?
+    // Decode the event AT-URI if URL-encoded
+    let event_aturi = urlencoding::decode(&event_aturi)
+        .map_err(|_| anyhow::anyhow!("Invalid event URI"))?
         .to_string();
+    
+    // Add back the at:// prefix since it was stripped in the JavaScript
+    let full_event_aturi = format!("at://{}", event_aturi);
 
     let bookmark_service = EventBookmarkService::new(
         Arc::new(ctx.web_context.pool.clone()),
         Arc::new(ctx.web_context.atrium_oauth_manager.clone()),
     );
 
+    // Get session group from the Auth context
+    let session_group = ctx.auth.1.as_ref()
+        .map(|oauth_session| oauth_session.session_group.as_str())
+        .unwrap_or("unknown"); // Fallback if no session
+
     match bookmark_service
-        .remove_bookmark(&current_handle.did, &bookmark_aturi)
+        .remove_bookmark(&current_handle.did, &full_event_aturi, session_group)
         .await
     {
         Ok(()) => {
-            info!("Successfully removed bookmark {} for user {}", bookmark_aturi, current_handle.did);
+            info!("Successfully removed bookmark {} for user {}", full_event_aturi, current_handle.did);
             
-            // Return empty HTML for HTMX to remove the element
-            Ok(Html(String::new()).into_response())
+            // Return HX-Refresh header to reload the page and show the original bookmark button from view_event template
+            Ok((StatusCode::OK, [("HX-Refresh", "true")], "").into_response())
         }
         Err(e) => {
-            error!("Failed to remove bookmark {}: {}", bookmark_aturi, e);
-            Ok((StatusCode::INTERNAL_SERVER_ERROR, "Failed to remove bookmark".to_string()).into_response())
+            error!("Failed to remove bookmark {}: {}", full_event_aturi, e);
+            let error_message = LOCALES.lookup(&ctx.language.0, "error-occurred");
+            Ok((StatusCode::INTERNAL_SERVER_ERROR, error_message).into_response())
         }
     }
 }
···
 }
 
 /// Generate iCal content from bookmarked events
-fn generate_ical_from_bookmarks(bookmarks: &[crate::storage::event_bookmarks::EventBookmark]) -> String {
+fn generate_ical_from_bookmarks(bookmarked_events: &[crate::storage::event_bookmarks::BookmarkedEvent]) -> String {
     let mut ical = String::from("BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-//smokesignal//EN\r\n");
     
-    for bookmark in bookmarks {
+    for bookmarked_event in bookmarked_events {
+        // Extract start date from the record JSON if available
+        let start_date = bookmarked_event.event.record
+            .get("start_date")
+            .and_then(|v| v.as_str())
+            .unwrap_or("20240101T000000Z");
+            
         ical.push_str(&format!(
-            "BEGIN:VEVENT\r\nUID:{}\r\nSUMMARY:Bookmarked Event\r\nDTSTAMP:{}\r\nEND:VEVENT\r\n",
-            bookmark.id,
-            bookmark.created_at.format("%Y%m%dT%H%M%SZ")
+            "BEGIN:VEVENT\r\nUID:{}\r\nSUMMARY:{}\r\nDTSTAMP:{}\r\nDTSTART:{}\r\nEND:VEVENT\r\n",
+            bookmarked_event.bookmark.id,
+            bookmarked_event.event.name,
+            bookmarked_event.bookmark.created_at.format("%Y%m%dT%H%M%SZ"),
+            start_date
         ));
     }
     
     ical.push_str("END:VCALENDAR\r\n");
     ical
 }
+
+#[derive(Deserialize)]
+pub struct BookmarkModalParams {
+    event_aturi: String,
+}
+
+/// Handle showing the bookmark modal
+pub async fn handle_bookmark_modal(
+    ctx: UserRequestContext,
+    Query(params): Query<BookmarkModalParams>,
+) -> Result<impl IntoResponse, WebError> {
+    let current_handle = ctx.auth.require(&ctx.web_context.config.destination_key, "/bookmarks/modal")?;
+
+    // Check if the event is already bookmarked
+    let bookmark_service = EventBookmarkService::new(
+        Arc::new(ctx.web_context.pool.clone()),
+        Arc::new(ctx.web_context.atrium_oauth_manager.clone()),
+    );
+
+    let existing_bookmark = match bookmark_service
+        .get_bookmark(&current_handle.did, &params.event_aturi)
+        .await
+    {
+        Ok(bookmark) => bookmark,
+        Err(e) => {
+            error!("Failed to check bookmark status: {}", e);
+            None
+        }
+    };
+
+    // Create the template renderer with HTMX request detection
+    let language_clone = ctx.language.clone();
+    let renderer = create_renderer!(ctx.web_context.clone(), language_clone, true, true); // hx_request = true
+
+    Ok(renderer.render_template(
+        "bookmark_modal",
+        template_context! {
+            event_aturi => params.event_aturi,
+            existing_bookmark => existing_bookmark,
+            is_already_bookmarked => existing_bookmark.is_some(),
+        },
+        Some(&current_handle),
+        "/bookmarks/modal",
+    ))
+}

src/http/handle_create_event.rs

···
                 let event_record = CreateRecordRequest {
                     repo: current_handle.did.clone(),
                     collection: NSID.to_string(),
-                    validate: false,
+                    validate: Some(false),
                     record_key: None,
                     record: the_record.clone(),
                     swap_commit: None,

src/http/handle_create_rsvp.rs

···
                 let rsvp_record = PutRecordRequest {
                     repo: current_handle.did.clone(),
                     collection: NSID.to_string(),
-                    validate: false,
+                    validate: Some(false),
                     record_key,
                     record: the_record.clone(),
                     swap_commit: None,

src/http/handle_edit_event.rs

···
                     collection: LexiconCommunityEventNSID.to_string(),
                     record_key: event_rkey.clone(),
                     record: updated_record.clone(),
-                    validate: false,
+                    validate: Some(false),
                     swap_commit: None,
                     swap_record: Some(event.cid.clone()),
                 };

src/http/handle_migrate_event.rs

···
         collection: COMMUNITY_NSID.to_string(),
         record_key: event_rkey.clone(),
         record: new_event.clone(),
-        validate: false,
+        validate: Some(false),
         swap_commit: None,
         swap_record: None, // We're creating a new record, not replacing
     };

src/http/handle_migrate_rsvp.rs

···
     let rsvp_record = PutRecordRequest {
         repo: current_handle.did.clone(),
         collection: RSVP_COLLECTION.to_string(),
-        validate: false,
+        validate: Some(false),
         record_key,
         record: rsvp_record_content.clone(),
         swap_commit: None,

src/http/handle_profile.rs

···
         active: tab == ProfileTab::RecentlyUpdated,
     }];
 
+    // Fetch public bookmark calendars for this profile
+    let public_calendars = match crate::storage::bookmark_calendars::get_public_by_user(&ctx.web_context.pool, &profile.did).await {
+        Ok(calendars) => calendars,
+        Err(e) => {
+            tracing::warn!("Failed to fetch public calendars for profile {}: {}", profile.did, e);
+            Vec::new()
+        }
+    };
+
     let canonical_url = format!(
         "https://{}/{}",
         ctx.web_context.config.external_base,
···
                 tabs => tab_links,
                 events,
                 pagination => pagination_view,
+                public_calendars,
             },
             ctx.current_handle.as_ref(),
             &canonical_url,

src/http/server.rs

···
     handle_view_rsvp::handle_view_rsvp,
     handle_bookmark_events::{
         handle_bookmark_event, handle_bookmark_calendar, handle_remove_bookmark,
-        handle_calendar_navigation, handle_bookmark_calendar_ical,
+        handle_calendar_navigation, handle_bookmark_calendar_ical, handle_bookmark_modal,
     },
     handle_bookmark_calendars::{
         handle_bookmark_calendars_index, handle_create_bookmark_calendar,
···
         // Bookmark event routes
         .route("/bookmarks", get(handle_bookmark_calendar))
         .route("/bookmarks", post(handle_bookmark_event))
-        .route("/bookmarks/:bookmark_aturi", delete(handle_remove_bookmark))
+        .route("/bookmarks/{bookmark_aturi}", delete(handle_remove_bookmark))
         .route("/bookmarks/calendar-nav", get(handle_calendar_navigation))
+        .route("/bookmarks/modal", get(handle_bookmark_modal))
         .route("/bookmarks.ics", get(handle_bookmark_calendar_ical))
         // Bookmark calendar management routes
         .route("/bookmark-calendars", get(handle_bookmark_calendars_index))
         .route("/bookmark-calendars", post(handle_create_bookmark_calendar))
-        .route("/bookmark-calendars/:calendar_id", get(handle_view_bookmark_calendar))
-        .route("/bookmark-calendars/:calendar_id", put(handle_update_bookmark_calendar))
-        .route("/bookmark-calendars/:calendar_id", delete(handle_delete_bookmark_calendar))
-        .route("/bookmark-calendars/:calendar_id.ics", get(handle_export_calendar_ical))
+        .route("/bookmark-calendars/{calendar_id}", get(handle_view_bookmark_calendar))
+        .route("/bookmark-calendars/{calendar_id}", put(handle_update_bookmark_calendar))
+        .route("/bookmark-calendars/{calendar_id}", delete(handle_delete_bookmark_calendar))
+        .route("/bookmark-calendars/{calendar_id}/export.ics", get(handle_export_calendar_ical))
         .route("/favicon.ico", get(|| async { axum::response::Redirect::permanent("/static/favicon.ico") }))
         .route("/{handle_slug}", get(handle_profile_view))
         .nest_service("/static", serve_dir.clone())

src/http/template_renderer.rs

···
         canonical_url: &str,
     ) -> Response {
         let template_name = self.select_template(template_base);
+        tracing::info!(
+            template_base = %template_base,
+            template_name = %template_name,
+            locale = %self.locale,
+            hx_request = self.hx_request,
+            hx_boosted = self.hx_boosted,
+            "Starting template rendering"
+        );
+        
         let enhanced_context = self.enhance_context(context, current_handle, canonical_url);
         
-        RenderHtml(
-            &template_name,
-            self.web_context.engine.clone(),
-            enhanced_context,
-        )
-        .into_response()
+        tracing::debug!(
+            template_name = %template_name,
+            context_type = ?enhanced_context.kind(),
+            context_len = enhanced_context.len().unwrap_or(0),
+            "About to call RenderHtml with enhanced context"
+        );
+        
+        // Try to render the template and capture any errors
+        let render_result = std::panic::catch_unwind(std::panic::AssertUnwindSafe(|| {
+            RenderHtml(
+                &template_name,
+                self.web_context.engine.clone(),
+                enhanced_context,
+            )
+            .into_response()
+        }));
+        
+        let response = match render_result {
+            Ok(resp) => {
+                tracing::info!(
+                    template_name = %template_name,
+                    status = ?resp.status(),
+                    "Template rendering completed"
+                );
+                resp
+            }
+            Err(panic_info) => {
+                tracing::error!(
+                    template_name = %template_name,
+                    error = ?panic_info,
+                    "Template rendering panicked"
+                );
+                // Return a simple error response
+                (axum::http::StatusCode::INTERNAL_SERVER_ERROR, "Template rendering failed").into_response()
+            }
+        };
+        
+        response
     }
 
     /// Render an error template with proper error handling
···
     /// Select the appropriate template based on HTMX state and locale
     fn select_template(&self, base_name: &str) -> String {
         // Use the same fallback logic as the original select_template! macro
-        select_template_with_fallback(
+        let template_name = select_template_with_fallback(
             base_name,
             &self.locale,
             self.hx_boosted,
             self.hx_request,
-        )
+        );
+        
+        // Check if the template file exists
+        let template_path = std::path::PathBuf::from(env!("CARGO_MANIFEST_DIR"))
+            .join("templates")
+            .join(&template_name);
+            
+        tracing::debug!(
+            template_name = %template_name,
+            template_path = ?template_path,
+            template_exists = template_path.exists(),
+            "Selected template for rendering"
+        );
+        
+        if !template_path.exists() {
+            tracing::warn!(
+                template_name = %template_name,
+                template_path = ?template_path,
+                "Template file does not exist!"
+            );
+        }
+        
+        template_name
     }
 
     /// Enhance template context with i18n and system variables
···
     ) -> minijinja::Value {
         // Normalize locale to lowercase for consistent template naming
         let normalized_locale = self.locale.to_string().to_lowercase();
+        
+        tracing::debug!(
+            base_context_kind = ?base_context.kind(),
+            normalized_locale = %normalized_locale,
+            "Enhancing template context"
+        );
+        
+        // Log context variables for debugging
+        if let minijinja::value::ValueKind::Map = base_context.kind() {
+            tracing::debug!("Template context contains a map with {} items", 
+                base_context.len().unwrap_or(0));
+        }
         
         // Create enhancement context
         let enhancement_context = template_context! {

src/services/event_bookmarks.rs

···
 use std::sync::Arc;
 use tracing::{debug, info};
 use uuid::Uuid;
+use std::hash::Hasher;
+use metrohash::MetroHash64;
+use crockford;
 
 use crate::atproto::atrium_auth::AtriumOAuthManager;
+use crate::atproto::lexicon::community::lexicon::bookmarks::{Bookmark, BOOKMARK_NSID};
+use crate::atproto::client::{OAuthPdsClient, PutRecordRequest, DeleteRecordRequest}; // Change to PutRecordRequest and add DeleteRecordRequest
+use crate::http::middleware_auth::WebSession;
 use crate::storage::{event_bookmarks, StoragePool};
 use crate::storage::event_bookmarks::{EventBookmark, PaginatedBookmarkedEvents};
 
···
         did: &str,
         event_aturi: &str,
         tags: Vec<String>,
+        session_group: &str,
     ) -> Result<EventBookmark> {
-        info!("Creating bookmark for event {} by user {}", event_aturi, did);
+        info!("Creating bookmark for event {} by user {} with tags: {:?}", event_aturi, did, tags);
+
+        // 1. Create bookmark record in ATproto (source of truth)
+        let bookmark = Bookmark {
+            subject: event_aturi.to_string(),
+            created_at: Utc::now(),  // Use DateTime<Utc> directly like events
+            tags: if tags.is_empty() { None } else { Some(tags.clone()) },
+        };
+
+        info!("Bookmark structure before ATProto creation: {:?}", bookmark);
+
+        // Get ATproto client for this user's session
+        let atproto_client = OAuthPdsClient {
+            atrium_manager: &self.oauth_manager,
+        };
+
+        // Create a minimal WebSession for ATproto calls
+        let web_session = WebSession {
+            did: did.to_string(),
+            session_group: session_group.to_string(),
+        };
+
+        // Create the bookmark record in ATproto
+        // Generate deterministic record key from event URI (like RSVPs do)
+        let mut h = MetroHash64::default();
+        h.write(event_aturi.as_bytes());
+        let record_key = crockford::encode(h.finish());
 
-        // For now, create a fake bookmark AT-URI since we don't have full ATproto integration yet
-        let bookmark_aturi = format!("at://{}/community.lexicon.bookmarks.bookmark/{}", did, Uuid::new_v4());
+        let put_request = PutRecordRequest {
+            repo: did.to_string(),
+            collection: BOOKMARK_NSID.to_string(),
+            record_key,
+            validate: None, // Use optimistic validation (default) - create record even if lexicon is unknown
+            record: bookmark,
+            swap_commit: None,
+            swap_record: None,
+        };
+
+        // Create the ATproto record using PUT (like RSVPs)
+        let atproto_result = atproto_client.put_record(&web_session, put_request).await;
+        
+        let bookmark_aturi = match atproto_result {
+            Ok(strong_ref) => {
+                info!("Successfully created ATproto bookmark record: {}", strong_ref.uri);
+                strong_ref.uri
+            }
+            Err(e) => {
+                // For now, fall back to local-only if ATproto fails
+                tracing::warn!("ATproto bookmark creation failed: {}, falling back to local-only", e);
+                format!("at://{}/community.lexicon.bookmarks.bookmark/{}", did, Uuid::new_v4())
+            }
+        };
 
-        // Store locally for performance
+        // 2. Store locally for performance
         let local_bookmark = event_bookmarks::insert(
             &self.storage,
             did,
···
     pub async fn remove_bookmark(
         &self,
         did: &str,
-        bookmark_aturi: &str,
+        event_aturi: &str,
+        session_group: &str,
     ) -> Result<()> {
-        info!("Removing bookmark {} for user {}", bookmark_aturi, did);
+        info!("Removing bookmark {} for user {}", event_aturi, did);
 
-        // Remove from local cache
-        event_bookmarks::delete_by_bookmark_aturi(&self.storage, did, bookmark_aturi).await?;
+        // 1. Delete from ATproto (source of truth)
+        // Generate the same deterministic record key that was used for creation
+        let mut h = MetroHash64::default();
+        h.write(event_aturi.as_bytes());
+        let record_key = crockford::encode(h.finish());
 
-        info!("Successfully removed bookmark {}", bookmark_aturi);
+        let web_session = WebSession {
+            did: did.to_string(),
+            session_group: session_group.to_string(),
+        };
+
+        let delete_request = DeleteRecordRequest {
+            repo: did.to_string(),
+            collection: BOOKMARK_NSID.to_string(),
+            record_key,
+            swap_record: None,
+            swap_commit: None,
+        };
+
+        let atproto_client = OAuthPdsClient {
+            atrium_manager: &self.oauth_manager,
+        };
+
+        // Try to delete from ATproto, but don't fail if it doesn't exist
+        match atproto_client.delete_record(&web_session, delete_request).await {
+            Ok(()) => {
+                info!("Successfully deleted bookmark from ATproto for event {}", event_aturi);
+            }
+            Err(e) => {
+                // Log but don't fail - the bookmark might not exist on ATproto or network issues
+                tracing::warn!("Failed to delete bookmark from ATproto: {}, continuing with local deletion", e);
+            }
+        }
+
+        // 2. Remove from local cache
+        event_bookmarks::delete_by_event_aturi(&self.storage, did, event_aturi).await?;
+
+        info!("Successfully removed bookmark {}", event_aturi);
         Ok(())
     }
 
···
 
         let has_more = (offset + limit) < total_count as i32;
 
+        tracing::debug!(
+            bookmarks_count = bookmarks.len(),
+            total_count = %total_count,
+            "Retrieved bookmarks from database, starting hydration"
+        );
+
+        // Hydrate bookmarks with event data
+        let bookmark_count = bookmarks.len();
+        let mut bookmarked_events = Vec::new();
+        for bookmark in bookmarks {
+            tracing::debug!(
+                bookmark_id = bookmark.id,
+                event_aturi = %bookmark.event_aturi,
+                "Processing bookmark for hydration"
+            );
+            
+            // Try to get the event data
+            match crate::storage::event::event_get(&self.storage, &bookmark.event_aturi).await {
+                Ok(event) => {
+                    tracing::debug!(
+                        bookmark_id = bookmark.id,
+                        event_name = %event.name,
+                        "Successfully hydrated bookmark with event data"
+                    );
+                    let event_details = crate::storage::event::extract_event_details(&event);
+                    bookmarked_events.push(crate::storage::event_bookmarks::BookmarkedEvent::new(
+                        bookmark,
+                        event,
+                        event_details,
+                    ));
+                }
+                Err(e) => {
+                    tracing::warn!(
+                        bookmark_id = bookmark.id,
+                        event_aturi = %bookmark.event_aturi,
+                        error = %e,
+                        "Event not found for bookmark, skipping"
+                    );
+                }
+            }
+        }
+        
+        tracing::info!(
+            total_bookmarks = bookmark_count,
+            hydrated_events = bookmarked_events.len(),
+            "Completed bookmark hydration"
+        );
+
         Ok(PaginatedBookmarkedEvents {
-            events: bookmarks,
+            events: bookmarked_events,
             total_count,
             has_more,
         })
···
                 .map(|b| b.synced_at)
                 .max(),
         })
+    }
+
+    /// Get a specific bookmark by event AT-URI
+    pub async fn get_bookmark(
+        &self,
+        did: &str,
+        event_aturi: &str,
+    ) -> Result<Option<EventBookmark>> {
+        self.is_event_bookmarked(did, event_aturi).await
+    }
+
+    /// Update bookmark tags for an existing bookmark
+    pub async fn update_bookmark_tags(
+        &self,
+        did: &str,
+        event_aturi: &str,
+        new_tags: Vec<String>,
+        session_group: &str,
+    ) -> Result<EventBookmark> {
+        info!("Updating bookmark tags for event {} by user {}", event_aturi, did);
+
+        // First get existing bookmark to merge tags
+        let existing_bookmark = self.get_bookmark(did, event_aturi).await?
+            .ok_or_else(|| anyhow::anyhow!("Bookmark not found"))?;
+
+        // Merge existing tags with new tags, removing duplicates
+        let mut merged_tags = existing_bookmark.tags.clone();
+        for new_tag in &new_tags {
+            if !merged_tags.contains(new_tag) {
+                merged_tags.push(new_tag.clone());
+            }
+        }
+
+        // 1. Update the record in ATproto first (source of truth)
+        let updated_bookmark_record = Bookmark {
+            subject: event_aturi.to_string(),
+            created_at: existing_bookmark.created_at, // Keep the original creation time
+            tags: if merged_tags.is_empty() { None } else { Some(merged_tags.clone()) },
+        };
+
+        // Generate the same record key that was used when creating the bookmark
+        let mut hasher = MetroHash64::new();
+        hasher.write(event_aturi.as_bytes());
+        let hash = hasher.finish();
+        let record_key = crockford::encode(hash);
+
+        // Get ATproto client for this user's session
+        let atproto_client = OAuthPdsClient {
+            atrium_manager: &self.oauth_manager,
+        };
+
+        // Create a minimal WebSession for ATproto calls
+        let web_session = WebSession {
+            did: did.to_string(),
+            session_group: session_group.to_string(),
+        };
+
+        // Update the bookmark record in ATproto
+        let request = PutRecordRequest {
+            repo: did.to_string(),
+            collection: BOOKMARK_NSID.to_string(),
+            record_key: record_key.clone(),
+            record: updated_bookmark_record,
+            validate: None, // Use optimistic validation (default) - update record even if lexicon is unknown
+            swap_commit: None,
+            swap_record: None,
+        };
+
+        let response = atproto_client.put_record(&web_session, request).await?;
+        let bookmark_aturi = response.uri;
+
+        info!("Updated bookmark record in ATproto with URI: {}", bookmark_aturi);
+
+        // 2. Update the tags in the local database
+        let updated_bookmark = event_bookmarks::update_tags(
+            &self.storage,
+            did,
+            event_aturi,
+            &merged_tags,
+        ).await?;
+
+        info!("Successfully updated bookmark tags for event {}", event_aturi);
+        Ok(updated_bookmark)
     }
 }
 

src/storage/bookmark_calendars.rs

···
 
 // Simplified implementation - we'll implement full functionality later
 pub async fn get_by_user(
-    _pool: &StoragePool,
-    _did: &str,
-    _include_private: bool,
+    pool: &StoragePool,
+    did: &str,
+    include_private: bool,
 ) -> Result<Vec<BookmarkCalendar>, StorageError> {
-    // For now, return empty vector to allow compilation
-    Ok(Vec::new())
+    let query = if include_private {
+        "SELECT id, calendar_id, did, name, description, tags, tag_operator, is_public, event_count, created_at, updated_at FROM bookmark_calendars WHERE did = $1 ORDER BY created_at DESC"
+    } else {
+        "SELECT id, calendar_id, did, name, description, tags, tag_operator, is_public, event_count, created_at, updated_at FROM bookmark_calendars WHERE did = $1 AND is_public = true ORDER BY created_at DESC"
+    };
+
+    let rows = sqlx::query(query)
+        .bind(did)
+        .fetch_all(pool)
+        .await?;
+
+    let mut calendars = Vec::new();
+    for row in rows {
+        calendars.push(BookmarkCalendar {
+            id: row.get("id"),
+            calendar_id: row.get("calendar_id"),
+            did: row.get("did"),
+            name: row.get("name"),
+            description: row.get("description"),
+            tags: row.get::<Vec<String>, _>("tags"),
+            tag_operator: row.get("tag_operator"),
+            is_public: row.get("is_public"),
+            event_count: row.get("event_count"),
+            created_at: row.get("created_at"),
+            updated_at: row.get("updated_at"),
+        });
+    }
+
+    Ok(calendars)
+}
+
+pub async fn get_public_by_user(
+    pool: &StoragePool,
+    did: &str,
+) -> Result<Vec<BookmarkCalendar>, StorageError> {
+    let rows = sqlx::query(
+        "SELECT id, calendar_id, did, name, description, tags, tag_operator, is_public, event_count, created_at, updated_at FROM bookmark_calendars WHERE did = $1 AND is_public = true ORDER BY created_at DESC"
+    )
+    .bind(did)
+    .fetch_all(pool)
+    .await?;
+
+    let mut calendars = Vec::new();
+    for row in rows {
+        calendars.push(BookmarkCalendar {
+            id: row.get("id"),
+            calendar_id: row.get("calendar_id"),
+            did: row.get("did"),
+            name: row.get("name"),
+            description: row.get("description"),
+            tags: row.get::<Vec<String>, _>("tags"),
+            tag_operator: row.get("tag_operator"),
+            is_public: row.get("is_public"),
+            event_count: row.get("event_count"),
+            created_at: row.get("created_at"),
+            updated_at: row.get("updated_at"),
+        });
+    }
+
+    Ok(calendars)
 }
 
 pub async fn get_public_paginated(

src/storage/event.rs

···
 
 use anyhow::Result;
 use chrono::Utc;
+use serde::Serialize;
 use serde_json::json;
 use sqlx::{Postgres, QueryBuilder};
 
···
 }
 
 // Structure to hold extracted event details regardless of source format
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Serialize)]
 pub struct EventDetails {
     pub name: Cow<'static, str>,
     pub description: Cow<'static, str>,

src/storage/event_bookmarks.rs

···
 pub struct BookmarkedEvent {
     pub bookmark: EventBookmark,
     pub event: super::event::model::Event,
+    pub event_details: super::event::EventDetails,
+    #[serde(serialize_with = "serialize_event_rkey")]
+    pub event_rkey: String,
+}
+
+fn serialize_event_rkey<S>(event_rkey: &String, serializer: S) -> Result<S::Ok, S::Error>
+where
+    S: serde::Serializer,
+{
+    serializer.serialize_str(event_rkey)
+}
+
+impl BookmarkedEvent {
+    pub fn new(bookmark: EventBookmark, event: super::event::model::Event, event_details: super::event::EventDetails) -> Self {
+        // Extract rkey from event aturi (e.g., at://did:plc:xyz/collection/rkey -> rkey)
+        let event_rkey = event.aturi.split('/').last().unwrap_or("").to_string();
+        Self {
+            bookmark,
+            event,
+            event_details,
+            event_rkey,
+        }
+    }
 }
 
 #[derive(Debug, Clone, Serialize)]
 pub struct PaginatedBookmarkedEvents {
-    pub events: Vec<EventBookmark>,
+    pub events: Vec<BookmarkedEvent>,
     pub total_count: i64,
     pub has_more: bool,
 }
···
 
     // Insert all bookmarks from ATproto
     for record in bookmark_records {
+        // Extract fields from the struct
+        let subject = &record.value.subject;
+        let tags = &record.value.tags;
+
         sqlx::query(
             r#"
             INSERT INTO event_bookmarks (did, bookmark_aturi, event_aturi, tags, synced_at)
···
         )
         .bind(did)
         .bind(&record.uri)
-        .bind(&record.value.subject)
-        .bind(&record.value.tags)
+        .bind(subject)
+        .bind(tags.as_ref().unwrap_or(&vec![]))
         .execute(&mut *tx)
         .await?;
     }
···
     Ok(bookmarks)
 }
 
-pub async fn delete_by_bookmark_aturi(
+pub async fn delete_by_event_aturi(
     pool: &StoragePool,
     did: &str,
-    bookmark_aturi: &str,
+    event_aturi: &str,
 ) -> Result<(), StorageError> {
-    sqlx::query("DELETE FROM event_bookmarks WHERE did = $1 AND bookmark_aturi = $2")
+    sqlx::query("DELETE FROM event_bookmarks WHERE did = $1 AND event_aturi = $2")
         .bind(did)
-        .bind(bookmark_aturi)
+        .bind(event_aturi)
         .execute(pool)
         .await?;
     Ok(())
···
         Ok(None)
     }
 }
+
+/// Update tags for an existing bookmark
+pub async fn update_tags(
+    pool: &StoragePool,
+    did: &str,
+    event_aturi: &str,
+    tags: &[String],
+) -> Result<EventBookmark, StorageError> {
+    let result = sqlx::query(
+        r#"
+        UPDATE event_bookmarks 
+        SET tags = $3, synced_at = NOW()
+        WHERE did = $1 AND event_aturi = $2
+        RETURNING id, did, bookmark_aturi, event_aturi, tags, synced_at, created_at
+        "#
+    )
+    .bind(did)
+    .bind(event_aturi)
+    .bind(tags)
+    .fetch_one(pool)
+    .await?;
+
+    Ok(EventBookmark {
+        id: result.get("id"),
+        did: result.get("did"),
+        bookmark_aturi: result.get("bookmark_aturi"),
+        event_aturi: result.get("event_aturi"),
+        tags: result.get::<Vec<String>, _>("tags"),
+        synced_at: result.get("synced_at"),
+        created_at: result.get("created_at"),
+    })
+}

static/bookmark-calendars.js

···
 // Bookmark Calendar JavaScript
 let calendarTags = [];
+let listTags = [];
+
+// Helper function to get localized bookmark success message
+function getBookmarkSuccessMessage(bookmarkTags) {
+    const baseMessage = document.body.dataset.i18nBookmarkSuccess || 'Event bookmarked successfully!';
+    if (bookmarkTags && bookmarkTags.length > 0) {
+        // For now, just return the base message since we don't have a template for "with tags"
+        // Could be enhanced later to include tag information
+        return baseMessage;
+    }
+    return baseMessage;
+}
 
 // Initialize page
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize tag input handling
-    const tagInput = document.getElementById('new-calendar-tag-input');
-    if (tagInput) {
-        tagInput.addEventListener('keydown', handleTagInput);
+    // Initialize tag input handling for calendar tags
+    const calendarTagInput = document.getElementById('new-calendar-tag-input');
+    if (calendarTagInput) {
+        calendarTagInput.addEventListener('keydown', handleTagInput);
+    }
+    
+    // Initialize tag input handling for list tags
+    const listTagInput = document.getElementById('new-list-tag-input');
+    if (listTagInput) {
+        listTagInput.addEventListener('keydown', handleListTagInput);
     }
+    
+    // Close modal when clicking background
+    const modal = document.getElementById('create-list-modal');
+    if (modal) {
+        const background = modal.querySelector('.modal-background');
+        if (background) {
+            background.addEventListener('click', closeListModal);
+        }
+    }
+    
+    // Handle escape key
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+            closeCalendarModal();
+            closeListModal();
+        }
+    });
 });
 
 // Handle tag input for calendar creation
···
     const tag = input.value.trim();
     if (tag && !calendarTags.includes(tag)) {
         if (calendarTags.length >= 10) {
-            alert('Maximum 10 tags allowed per calendar');
+            const maxTagsMessage = document.body.dataset.i18nErrorMaxTags || 'Maximum 10 tags allowed per calendar';
+            alert(maxTagsMessage);
             return;
         }
         
···
     htmx.trigger(form, 'submit');
 }
 
+// Enhanced list creation functionality
+function handleListTagInput(event) {
+    if (event.key === 'Enter' || event.key === ',') {
+        event.preventDefault();
+        addListTag();
+    }
+}
+
+function addListTag() {
+    const input = document.getElementById('new-list-tag-input');
+    const tag = input.value.trim().toLowerCase();
+    
+    if (tag && !listTags.includes(tag)) {
+        listTags.push(tag);
+        renderListTags();
+        input.value = '';
+    }
+}
+
+function removeListTag(tag) {
+    listTags = listTags.filter(t => t !== tag);
+    renderListTags();
+}
+
+function renderListTags() {
+    const container = document.getElementById('selected-list-tags');
+    if (container) {
+        container.innerHTML = listTags.map(tag => `
+            <span class="tag is-primary">
+                ${tag}
+                <button class="delete is-small" onclick="removeListTag('${tag}')"></button>
+            </span>
+        `).join('');
+    }
+}
+
+function submitListForm() {
+    const form = document.getElementById('create-list-form');
+    const formData = new FormData(form);
+    
+    const payload = {
+        name: formData.get('name'),
+        description: formData.get('description'),
+        tags: JSON.stringify(listTags),
+        tag_operator: formData.get('tag_operator') || 'OR',
+        is_public: formData.has('is_public')
+    };
+    
+    fetch('/bookmark-calendars', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+    })
+    .then(response => {
+        if (response.ok) {
+            closeListModal();
+            showNotification('Calendar created successfully', 'success');
+            // Reset form state
+            listTags = [];
+            renderListTags();
+            form.reset();
+            // Refresh the page to show the new calendar
+            window.location.reload();
+        } else {
+            return response.text().then(text => {
+                throw new Error(text);
+            });
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showNotification('Error creating calendar', 'error');
+    });
+}
+
+function closeListModal() {
+    const modal = document.getElementById('create-list-modal');
+    if (modal) {
+        modal.classList.remove('is-active');
+    }
+}
+
+function openListModal() {
+    const modal = document.getElementById('create-list-modal');
+    if (modal) {
+        modal.classList.add('is-active');
+        // Clear any previous state
+        listTags = [];
+        renderListTags();
+        const form = document.getElementById('create-list-form');
+        if (form) {
+            form.reset();
+        }
+    }
+}
+
 // Smart calendar suggestions based on existing tags
 function suggestCalendarTags(eventTags) {
     const suggestions = document.getElementById('tag-suggestions');
···
     });
 }
 
-// Calendar navigation
-function navigateCalendar(year, month) {
-    const url = `/bookmarks/calendar-nav?year=${year}&month=${month}`;
-    
-    htmx.ajax('GET', url, {
-        target: '#mini-calendar',
-        swap: 'outerHTML'
-    });
-}
-
 // Toggle view mode
 function toggleViewMode(mode) {
     const url = `/bookmarks?view=${mode}`;
···
 // Export calendar
 function exportCalendar(calendarId) {
     const url = calendarId ? 
-        `/bookmark-calendars/${calendarId}.ics` : 
+        `/bookmark-calendars/${calendarId}/export.ics` : 
         `/bookmarks.ics`;
     
     window.open(url, '_blank');
···
     }
 }
 
+// Generic notification system
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification is-${type} notification-toast`;
+    notification.innerHTML = `
+        <button class="delete" onclick="this.parentElement.remove()"></button>
+        ${message}
+    `;
+    
+    // Add to page
+    const container = document.getElementById('notification-container') || document.body;
+    container.appendChild(notification);
+    
+    // Auto-remove after 5 seconds
+    setTimeout(() => {
+        if (notification.parentElement) {
+            notification.remove();
+        }
+    }, 5000);
+}
+
+// Share bookmark list functionality
+function initializeShareButtons() {
+    const shareButtons = document.querySelectorAll('.share-list-btn');
+    shareButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const listUrl = this.getAttribute('data-list-url');
+            shareBookmarkList(listUrl);
+        });
+    });
+}
+
+function shareBookmarkList(listUrl) {
+    if (navigator.share) {
+        // Use Web Share API if available
+        navigator.share({
+            title: 'Bookmark List',
+            text: 'Check out this bookmark list',
+            url: listUrl
+        }).catch(err => {
+            console.log('Error sharing:', err);
+            fallbackShare(listUrl);
+        });
+    } else {
+        fallbackShare(listUrl);
+    }
+}
+
+function fallbackShare(listUrl) {
+    // Copy to clipboard as fallback
+    navigator.clipboard.writeText(listUrl).then(() => {
+        showNotification('Link copied to clipboard!', 'success');
+    }).catch(() => {
+        // If clipboard API fails, show the URL in a prompt
+        prompt('Copy this link:', listUrl);
+    });
+}
+
+// Dropdown toggle functionality
+function toggleDropdown(button) {
+    const dropdown = button.closest('.dropdown');
+    if (dropdown) {
+        dropdown.classList.toggle('is-active');
+        
+        // Close other dropdowns
+        document.querySelectorAll('.dropdown.is-active').forEach(other => {
+            if (other !== dropdown) {
+                other.classList.remove('is-active');
+            }
+        });
+    }
+}
+
+// Close dropdowns when clicking outside
+document.addEventListener('click', function(event) {
+    if (!event.target.closest('.dropdown')) {
+        document.querySelectorAll('.dropdown.is-active').forEach(dropdown => {
+            dropdown.classList.remove('is-active');
+        });
+    }
+});
+
 // Handle HTMX events
 document.addEventListener('htmx:afterSwap', function(event) {
     // Re-initialize any new tag inputs after HTMX swaps
-    const tagInput = document.getElementById('new-calendar-tag-input');
-    if (tagInput) {
-        tagInput.addEventListener('keydown', handleTagInput);
+    const calendarTagInput = document.getElementById('new-calendar-tag-input');
+    if (calendarTagInput) {
+        calendarTagInput.addEventListener('keydown', handleTagInput);
+    }
+    
+    const listTagInput = document.getElementById('new-list-tag-input');
+    if (listTagInput) {
+        listTagInput.addEventListener('keydown', handleListTagInput);
+    }
+    
+    // Re-initialize share buttons after HTMX swaps
+    initializeShareButtons();
+    
+    // If bookmark modal content was swapped in, initialize it
+    if (event.target.id === 'bookmarkModal') {
+        // Check if we have existing bookmark data and initialize
+        const existingTagsScript = event.target.querySelector('script');
+        if (existingTagsScript && existingTagsScript.textContent.includes('initializeBookmarkModal')) {
+            // The script will run automatically, but we can ensure the modal is visible
+            const modal = document.getElementById('bookmarkModal');
+            if (modal && !modal.classList.contains('is-active')) {
+                modal.classList.add('is-active');
+            }
+        }
     }
 });
 
···
     // Escape to close modals
     if (event.key === 'Escape') {
         closeCalendarModal();
+        closeListModal();
     }
     
     // Ctrl+B to bookmark current event (if on event page)
···
         }
     }
 });
+
+// Bookmark modal functionality
+let bookmarkTags = [];
+let existingBookmarkTags = [];
+
+// Initialize bookmark modal when loaded
+function initializeBookmarkModal(existingTags = []) {
+    bookmarkTags = [...existingTags];
+    existingBookmarkTags = [...existingTags];
+    renderBookmarkTags();
+}
+
+function handleTagKeypress(event) {
+    if (event.key === 'Enter' || event.key === ',') {
+        event.preventDefault();
+        addBookmarkTag();
+    }
+}
+
+function addBookmarkTag() {
+    const input = document.getElementById('bookmark-tags');
+    const tag = input.value.trim().replace(',', '');
+    
+    if (tag && !bookmarkTags.includes(tag)) {
+        bookmarkTags.push(tag);
+        input.value = '';
+        renderBookmarkTags();
+    }
+}
+
+function removeBookmarkTag(tag) {
+    bookmarkTags = bookmarkTags.filter(t => t !== tag);
+    renderBookmarkTags();
+}
+
+function renderBookmarkTags() {
+    const container = document.getElementById('selected-tags');
+    if (container) {
+        container.innerHTML = bookmarkTags.map(tag => 
+            `<span class="tag is-info">
+                ${tag}
+                <button class="delete is-small" onclick="removeBookmarkTag('${tag}')"></button>
+            </span>`
+        ).join('');
+    }
+}
+
+function submitBookmark() {
+    const tagsString = bookmarkTags.join(',');
+    const eventAturiElement = document.querySelector('[data-event-aturi]');
+    
+    if (!eventAturiElement) {
+        console.error('Could not find event ATURI element');
+        return;
+    }
+    
+    const eventAturi = eventAturiElement.getAttribute('data-event-aturi');
+    console.log('Raw eventAturi:', eventAturi);
+    console.log('Encoded eventAturi:', encodeURIComponent(eventAturi));
+    
+    // Build URL with proper encoding
+    let url = '/bookmarks?event_aturi=' + encodeURIComponent(eventAturi);
+    if (tagsString) {
+        url += '&tags=' + encodeURIComponent(tagsString);
+    }
+    
+    // Use fetch API for better error handling
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        }
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.text();
+    })
+    .then(data => {
+        // Close the modal
+        closeBookmarkModal();
+        
+        // Ensure the page is not blocked by removing any stale modal overlays
+        const allModals = document.querySelectorAll('.modal.is-active');
+        allModals.forEach(modal => modal.classList.remove('is-active'));
+        
+        // Update the bookmark button on the parent page
+        const bookmarkFrame = window.parent ? window.parent.document.getElementById('bookmarkFrame') : document.getElementById('bookmarkFrame');
+        if (bookmarkFrame) {
+            // Change the button to show "Remove Bookmark"
+            bookmarkFrame.innerHTML = `
+                <article class="message is-info">
+                    <div class="message-body">
+                        <div class="columns is-vcentered">
+                            <div class="column">
+                                <span class="icon-text">
+                                    <span class="icon">
+                                        <i class="fas fa-bookmark"></i>
+                                    </span>
+                                    <span>${getBookmarkSuccessMessage(bookmarkTags)}</span>
+                                </span>
+                            </div>
+                            <div class="column is-narrow">
+                                <button class="button is-outlined is-danger is-small" 
+                                        hx-delete="/bookmarks/${encodeURIComponent(eventAturi.replace('at://', ''))}" 
+                                        hx-target="#bookmarkFrame"
+                                        hx-swap="outerHTML"
+                                        hx-confirm="${document.body.dataset.i18nConfirmRemoveBookmark || 'Are you sure you want to remove this bookmark?'}">
+                                    <span class="icon">
+                                        <i class="fas fa-times"></i>
+                                    </span>
+                                    <span>${document.body.dataset.i18nRemoveBookmark || 'Remove Bookmark'}</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </article>                    `;
+                    
+                    // Re-initialize HTMX for the new elements
+                    if (typeof htmx !== 'undefined') {
+                        htmx.process(bookmarkFrame);
+                    }
+                }
+    })
+    .catch(error => {
+        console.error('Bookmark error:', error);
+        alert('Error bookmarking event: ' + error.message);
+    });
+}
+
+function removeBookmark() {
+    const eventAturiElement = document.querySelector('[data-event-aturi]');
+    
+    if (!eventAturiElement) {
+        console.error('Could not find event ATURI element');
+        return;
+    }
+    
+    const eventAturi = eventAturiElement.getAttribute('data-event-aturi');
+    const confirmMessage = document.body.dataset.i18nConfirmRemoveBookmark || 'Are you sure you want to remove this bookmark?';
+    
+    if (confirm(confirmMessage)) {
+        // Strip at:// prefix and encode for URL
+        const encodedAturi = encodeURIComponent(eventAturi.replace('at://', ''));
+        const url = '/bookmarks/' + encodedAturi;
+        
+        fetch(url, { method: 'DELETE' })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            // Check if response has HX-Refresh header or handle accordingly
+            const hxRefresh = response.headers.get('HX-Refresh');
+            if (hxRefresh === 'true') {
+                // Refresh the page
+                window.location.reload();
+            }
+            return response.text();
+        })
+        .then(data => {
+            // Close the modal
+            closeBookmarkModal();
+        })
+        .catch(error => {
+            console.error('Remove bookmark error:', error);
+            alert('Error removing bookmark: ' + error.message);
+        });
+    }
+}
+
+function closeBookmarkModal() {
+    // Handle both modal IDs to ensure compatibility
+    const modalInline = document.getElementById('bookmark-modal');
+    const modalContainer = document.getElementById('bookmarkModal');
+    
+    if (modalInline) {
+        modalInline.remove();
+    }
+    
+    if (modalContainer) {
+        modalContainer.classList.remove('is-active');
+        // Clear the modal content to prevent stale content
+        const modalContent = modalContainer.querySelector('.modal-content');
+        if (modalContent) {
+            modalContent.innerHTML = '';
+        }
+    }
+}
+
+function removeBookmarkFromTimeline(button) {
+    const eventAturi = button.getAttribute('data-event-aturi');
+    const confirmMessage = document.body.dataset.i18nConfirmRemoveBookmark || 'Are you sure you want to remove this bookmark?';
+    
+    if (confirm(confirmMessage)) {
+        // Strip at:// prefix and encode for URL - same as working bookmark removal
+        const encodedAturi = encodeURIComponent(eventAturi.replace('at://', ''));
+        const url = '/bookmarks/' + encodedAturi;
+        
+        fetch(url, { method: 'DELETE' })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            // Remove the timeline item from the DOM
+            const timelineItem = button.closest('.timeline-item');
+            if (timelineItem) {
+                timelineItem.remove();
+                
+                // Check if there are no more events, reload the page to show proper empty state
+                const timelineContainer = document.querySelector('.timeline');
+                if (timelineContainer && timelineContainer.children.length === 0) {
+                    // Reload the page to show the properly translated empty state from the template
+                    window.location.reload();
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error removing bookmark:', error);
+            alert('Failed to remove bookmark. Please try again.');
+        });
+    }
+}

static/bookmark-list-modal.css

···
+/* Bookmark List Modal Styles */
+.tags-input-container {
+    border: 1px solid #dbdbdb;
+    border-radius: 4px;
+    padding: 0.375rem;
+    min-height: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    background-color: white;
+}
+
+.tags-input-container:focus-within {
+    border-color: #3273dc;
+    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+}
+
+.tags-display {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-right: 0.5rem;
+}
+
+.tags-display .tag {
+    margin: 0;
+}
+
+.tags-input-container input {
+    border: none;
+    outline: none;
+    flex: 1;
+    min-width: 120px;
+    padding: 0.25rem;
+    font-size: 1rem;
+}
+
+.tags-input-container input:focus {
+    box-shadow: none;
+}
+
+/* Modal enhancements */
+.modal-card {
+    max-width: 600px;
+    width: 90vw;
+}
+
+.modal-card-body {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+/* Notification toast styles */
+.notification-toast {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 9999;
+    max-width: 400px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    animation: slideInRight 0.3s ease-out;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Tag suggestions styling */
+#tag-suggestions {
+    margin-top: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+#tag-suggestions .button {
+    font-size: 0.75rem;
+    height: auto;
+    padding: 0.25rem 0.5rem;
+}
+
+/* Privacy notice styling */
+.notification.is-info.is-light {
+    margin-top: 0.5rem;
+}
+
+.notification.is-info.is-light p {
+    margin: 0;
+}
+
+/* Form field spacing */
+.field:not(:last-child) {
+    margin-bottom: 1.5rem;
+}
+
+/* Help text styling */
+.help {
+    font-size: 0.875rem;
+    color: #6c757d;
+    margin-top: 0.25rem;
+}
+
+/* Enhanced checkbox styling */
+.checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.checkbox input[type="checkbox"] {
+    margin: 0;
+}
+
+/* Profile Bookmark Lists Grid */
+.profile-section {
+    margin-bottom: 2rem;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.section-header .title {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.bookmark-lists-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.list-card {
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    padding: 1rem;
+    background-color: white;
+    transition: box-shadow 0.2s ease;
+}
+
+.list-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.list-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+}
+
+.list-name {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.list-name a {
+    color: #3273dc;
+    text-decoration: none;
+}
+
+.list-name a:hover {
+    text-decoration: underline;
+}
+
+.list-stats {
+    flex-shrink: 0;
+}
+
+.list-description {
+    color: #6c757d;
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    line-height: 1.4;
+}
+
+.list-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f5f5f5;
+}
+
+.list-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .bookmark-lists-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .list-card-header {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .list-card-footer {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+}

templates/base.en-us.html

···
     <link rel="stylesheet" href="/static/fontawesome.min.css">
     <link rel="stylesheet" href="/static/bulma.min.css">
     <link rel="stylesheet" href="/static/venue-search.css">
+    <link rel="stylesheet" href="/static/bookmark-list-modal.css">
     
     <!-- MapLibreGL CSS -->
     <link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet">
···
     <script src="/static/venue-search.js"></script>
     <script src="/static/location-map-viewer.js"></script>
     <script src="/static/form-enhancement.js"></script>
+    <script src="/static/bookmark-calendars.js"></script>
     
     <!-- MapLibreGL JS -->
     <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
···
       data-i18n-locate-me="{{ t('button-locate-me') }}"
       data-i18n-locating-user="{{ t('locating-user') }}"
       data-i18n-location-error="{{ t('location-error') }}"
-      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}">
+      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}"
+      data-i18n-bookmark-success="{{ t('bookmark-success') }}"
+      data-i18n-bookmark-event="{{ t('bookmark-event') }}"
+      data-i18n-bookmark-removed-success="Bookmark removed successfully!"
+      data-i18n-confirm-remove-bookmark="{{ t('confirm-remove-bookmark') }}"
+      data-i18n-remove-bookmark="{{ t('remove-bookmark') }}"
+      data-i18n-error-max-tags="{{ t('error-max-tags') }}">
     {% include 'nav.' + current_locale + '.html' %}
     {% block content %}{% endblock %}
     {% include 'footer.' + current_locale + '.html' %}

templates/base.fr-ca.html

···
     <link rel="stylesheet" href="/static/fontawesome.min.css">
     <link rel="stylesheet" href="/static/bulma.min.css">
     <link rel="stylesheet" href="/static/venue-search.css">
+    <link rel="stylesheet" href="/static/bookmark-list-modal.css">
+    
+    <!-- Bulma Calendar CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@7.1.1/dist/css/bulma-calendar.min.css">
     
     <!-- MapLibreGL CSS -->
     <link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet">
···
     <script src="/static/venue-search.js"></script>
     <script src="/static/location-map-viewer.js"></script>
     <script src="/static/form-enhancement.js"></script>
+    <script src="/static/bookmark-calendars.js"></script>
+    
+    <!-- Bulma Calendar JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@7.1.1/dist/js/bulma-calendar.min.js"></script>
     
     <!-- MapLibreGL JS -->
     <script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
···
             height: 100%;
             width: 100%;
             z-index: 1;
+        }
+        
+        /* Bulma Calendar dark theme customization */
+        .calendar-mini .datetimepicker {
+            background-color: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .calendar-mini .datetimepicker .calendar {
+            background-color: transparent;
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-header {
+            background-color: rgba(110, 68, 255, 0.1);
+            color: var(--light);
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-body {
+            background-color: transparent;
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-date {
+            color: var(--light);
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-date:hover {
+            background-color: rgba(110, 68, 255, 0.2);
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-date.is-active {
+            background-color: var(--primary);
+            color: white;
+        }
+        
+        .calendar-mini .datetimepicker .calendar .calendar-date.is-today {
+            color: var(--secondary);
+            font-weight: bold;
         }
     </style>
     
···
       data-i18n-locate-me="{{ t('button-locate-me') }}"
       data-i18n-locating-user="{{ t('locating-user') }}"
       data-i18n-location-error="{{ t('location-error') }}"
-      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}">
+      data-i18n-location-permission-denied="{{ t('location-permission-denied') }}"
+      data-i18n-bookmark-success="{{ t('bookmark-success') }}"
+      data-i18n-bookmark-event="{{ t('bookmark-event') }}"
+      data-i18n-bookmark-removed-success="Signet retiré avec succès!"
+      data-i18n-confirm-remove-bookmark="{{ t('confirm-remove-bookmark') }}"
+      data-i18n-remove-bookmark="{{ t('remove-bookmark') }}"
+      data-i18n-error-max-tags="{{ t('error-max-tags') }}">
     {% include 'nav.' + current_locale + '.html' %}
     {% block content %}{% endblock %}
     {% include 'footer.' + current_locale + '.html' %}

templates/bookmark_calendar_timeline.en-us.bare.html

···
+{% extends "bare.en-us.html" %}
+{% block content %}
+{% include 'bookmark_calendar_timeline.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendar_timeline.en-us.common.html

···
+<section class="section">
+    <div class="container">
+        <div class="box content">
+            <!-- Calendar Header -->
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <div>
+                            <h1 class="title">
+                                <span class="icon">
+                                    <i class="fas fa-bookmark"></i>
+                                </span>
+                                {{ calendar.name | default(t("bookmark-calendar")) }}
+                            </h1>
+                            {% if calendar.description %}
+                            <p class="subtitle">{{ calendar.description }}</p>
+                            {% endif %}
+                            {% if calendar.tags %}
+                            <div class="tags">
+                                {% for tag in calendar.tags %}
+                                <span class="tag is-primary is-light">{{ tag }}</span>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        <div class="buttons">
+                            {% if calendar.id %}
+                            <a href="/bookmark-calendars/{{ calendar.id }}.ics" class="button is-info">
+                                <span class="icon">
+                                    <i class="fas fa-download"></i>
+                                </span>
+                                <span>{{ t("export-calendar") }}</span>
+                            </a>
+                            {% endif %}
+                            <a href="/bookmark-calendars" class="button is-light">
+                                <span class="icon">
+                                    <i class="fas fa-arrow-left"></i>
+                                </span>
+                                <span>{{ t("back-to-calendars") }}</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {% include 'bookmark_calendar_timeline.' + current_locale + '.partial.html' %}
+        </div>
+    </div>
+</section>

templates/bookmark_calendar_timeline.en-us.html

···
-{% extends "base.html" %}
-
-{% block title %}{{ t("bookmark-calendar") }}{% endblock %}
-
+{% extends "base." + current_locale + ".html" %}
+{% block title %}{{ t("bookmark-calendar") }} - {{ t("page-title-home") }}{% endblock %}
 {% block content %}
-<div class="bookmark-calendar-container">
-    <div class="columns">
-        <div class="column is-3">
-            <!-- Mini Calendar Widget -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("calendar-navigation") }}</h4>
-                <div id="mini-calendar" hx-get="/bookmarks/calendar-nav" hx-trigger="load">
-                    <!-- Calendar will be loaded here -->
-                </div>
-            </div>
-            
-            <!-- Filter Controls -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("filter-by-tags") }}</h4>
-                <div class="field">
-                    <div class="control">
-                        <input class="input" type="text" placeholder="{{ t('bookmark-tags') }}" 
-                               id="filter-tags" value="{{ filter_tags }}">
-                    </div>
-                </div>
-                <div class="field">
-                    <div class="control">
-                        <button class="button is-primary" 
-                                hx-get="/bookmarks"
-                                hx-include="#filter-tags"
-                                hx-target="#timeline-content">
-                            {{ t("filter-events") }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- My Calendars -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("my-calendars") }}</h4>
-                <div class="buttons">
-                    <button class="button is-success is-small" 
-                            hx-get="/bookmark-calendars/modal"
-                            hx-target="#modal-container">
-                        {{ t("create-new-calendar") }}
-                    </button>
-                </div>
-                <div id="user-calendars" hx-get="/bookmark-calendars" hx-trigger="load">
-                    <!-- User calendars will be loaded here -->
-                </div>
-            </div>
-        </div>
-        
-        <div class="column is-9">
-            <!-- View Mode Toggle -->
-            <div class="level">
-                <div class="level-left">
-                    <div class="level-item">
-                        <h2 class="title is-3">{{ t("bookmarked-events") }}</h2>
-                    </div>
-                </div>
-                <div class="level-right">
-                    <div class="level-item">
-                        <div class="buttons">
-                            <button class="button {% if view_mode == 'timeline' %}is-primary{% endif %}"
-                                    hx-get="/bookmarks?view=timeline"
-                                    hx-target="#timeline-content">
-                                {{ t("timeline-view") }}
-                            </button>
-                            <button class="button {% if view_mode == 'calendar' %}is-primary{% endif %}"
-                                    hx-get="/bookmarks?view=calendar"
-                                    hx-target="#timeline-content">
-                                {{ t("calendar-view") }}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Timeline Content -->
-            <div id="timeline-content">
-                {% include "bookmark_timeline.partial.html" %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Modal Container -->
-<div id="modal-container"></div>
+{% include 'bookmark_calendar_timeline.' + current_locale + '.common.html' %}
 {% endblock %}
 
 {% block scripts %}

templates/bookmark_calendar_timeline.en-us.partial.html

···
+<div class="bookmark-calendar-container">
+    <div class="columns">        
+        <div class="column">
+            <!-- Timeline View -->
+            <div class="timeline-container" id="timeline-container">
+                {% if events %}
+                <div class="timeline">
+                    {% for bookmarked_event in events %}
+                    <div class="timeline-item">
+                        <div class="timeline-marker is-icon">
+                            <i class="fas fa-bookmark" style="color: #ff6b6b;"></i>
+                        </div>
+                        <div class="timeline-content">
+                            <div class="event-card box">
+                                {% if bookmarked_event.bookmark.tags %}
+                                <div class="tags mb-3">
+                                    {% for tag in bookmarked_event.bookmark.tags %}
+                                    <span class="tag is-primary is-small">{{ tag }}</span>
+                                    {% endfor %}
+                                </div>
+                                {% endif %}
+                                
+                                <h5 class="title is-5">{{ bookmarked_event.event_details.name }}</h5>
+                                {% if bookmarked_event.event_details.description %}
+                                <p class="content">{{ bookmarked_event.event_details.description }}</p>
+                                {% endif %}
+                                
+                                <div class="columns is-mobile">
+                                    <div class="column">
+                                        {% if bookmarked_event.event_details.starts_at %}
+                                        <p class="has-text-grey">
+                                            <span class="icon">
+                                                <i class="fas fa-calendar"></i>
+                                            </span>
+                                            {{ bookmarked_event.event_details.starts_at | date(format="%B %d, %Y") }}
+                                        </p>
+                                        {% endif %}
+                                        {% if bookmarked_event.event_details.locations and bookmarked_event.event_details.locations|length > 0 %}
+                                        <p class="has-text-grey">
+                                            <span class="icon">
+                                                <i class="fas fa-map-marker-alt"></i>
+                                            </span>
+                                            <!-- Simple location display - you can enhance this -->
+                                            {{ t("event-location") }}
+                                        </p>
+                                        {% endif %}
+                                    </div>
+                                    <div class="column is-narrow">
+                                        <div class="buttons">
+                                            <a href="/events/{{ bookmarked_event.event_rkey }}" class="button is-small is-primary">
+                                                {{ t("view-event") }}
+                                            </a>
+                                            <button class="button is-small is-danger is-outlined"
+                                                    hx-delete="/bookmarks/{{ bookmarked_event.bookmark.bookmark_aturi | replace(from='at://', to='') | urlencode }}"
+                                                    hx-confirm="{{ t('confirm-remove-bookmark') }}"
+                                                    hx-target="closest .timeline-item"
+                                                    hx-swap="outerHTML">
+                                                <span class="icon">
+                                                    <i class="fas fa-trash"></i>
+                                                </span>
+                                                <span>{{ t("remove-bookmark") }}</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <footer class="is-size-7 has-text-grey mt-3">
+                                    {{ t("bookmarked-on", date=bookmarked_event.bookmark.created_at | date(format="%B %d, %Y")) }}
+                                </footer>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="has-text-centered py-6">
+                    <span class="icon is-large has-text-grey-light">
+                        <i class="fas fa-calendar-times fa-3x"></i>
+                    </span>
+                    <p class="title is-4 has-text-grey">{{ t("no-bookmarked-events") }}</p>
+                    <p class="subtitle has-text-grey">{{ t("start-bookmarking-events") }}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="column">
+            <div class="is-pulled-right">
+                {% include 'mini_calendar.html' %}
+            </div>
+        </div>
+    </div>   
+</div>

templates/bookmark_calendar_timeline.fr-ca.bare.html

···
+{% extends "bare.fr-ca.html" %}
+{% block content %}
+{% include 'bookmark_calendar_timeline.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendar_timeline.fr-ca.common.html

···
+<section class="section">
+    <div class="container">
+        <div class="box content">
+            <!-- Calendar Header -->
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <div>
+                            <h1 class="title">
+                                <span class="icon">
+                                    <i class="fas fa-bookmark"></i>
+                                </span>
+                                {{ t("bookmark-calendar") }}
+                            </h1>
+                        </div>
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        <div class="buttons">
+                            <a href="/bookmark-calendars" class="button is-light">
+                                <span class="icon">
+                                    <i class="fas fa-arrow-left"></i>
+                                </span>
+                                <span>{{ t("back-to-calendars") }}</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {% include 'bookmark_calendar_timeline.' + current_locale + '.partial.html' %}
+        </div>
+    </div>
+</section>

templates/bookmark_calendar_timeline.fr-ca.html

···
-{% extends "base.html" %}
-
-{% block title %}{{ t("bookmark-calendar") }}{% endblock %}
-
+{% extends "base.fr-ca.html" %}
+{% block title %}{{ t("bookmark-calendar") }} - {{ t("page-title-home") }}{% endblock %}
 {% block content %}
-<div class="bookmark-calendar-container">
-    <div class="columns">
-        <div class="column is-3">
-            <!-- Mini Calendar Widget -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("calendar-navigation") }}</h4>
-                <div id="mini-calendar" hx-get="/bookmarks/calendar-nav" hx-trigger="load">
-                    <!-- Le calendrier sera chargé ici -->
-                </div>
-            </div>
-            
-            <!-- Contrôles de filtrage -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("filter-by-tags") }}</h4>
-                <div class="field">
-                    <div class="control">
-                        <input class="input" type="text" placeholder="{{ t('bookmark-tags') }}" 
-                               id="filter-tags" value="{{ filter_tags }}">
-                    </div>
-                </div>
-                <div class="field">
-                    <div class="control">
-                        <button class="button is-primary" 
-                                hx-get="/bookmarks"
-                                hx-include="#filter-tags"
-                                hx-target="#timeline-content">
-                            {{ t("filter-events") }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Mes calendriers -->
-            <div class="box">
-                <h4 class="title is-5">{{ t("my-calendars") }}</h4>
-                <div class="buttons">
-                    <button class="button is-success is-small" 
-                            hx-get="/bookmark-calendars/modal"
-                            hx-target="#modal-container">
-                        {{ t("create-new-calendar") }}
-                    </button>
-                </div>
-                <div id="user-calendars" hx-get="/bookmark-calendars" hx-trigger="load">
-                    <!-- Les calendriers utilisateur seront chargés ici -->
-                </div>
-            </div>
-        </div>
-        
-        <div class="column is-9">
-            <!-- Basculement de mode d'affichage -->
-            <div class="level">
-                <div class="level-left">
-                    <div class="level-item">
-                        <h2 class="title is-3">{{ t("bookmarked-events") }}</h2>
-                    </div>
-                </div>
-                <div class="level-right">
-                    <div class="level-item">
-                        <div class="buttons">
-                            <button class="button {% if view_mode == 'timeline' %}is-primary{% endif %}"
-                                    hx-get="/bookmarks?view=timeline"
-                                    hx-target="#timeline-content">
-                                {{ t("timeline-view") }}
-                            </button>
-                            <button class="button {% if view_mode == 'calendar' %}is-primary{% endif %}"
-                                    hx-get="/bookmarks?view=calendar"
-                                    hx-target="#timeline-content">
-                                {{ t("calendar-view") }}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Contenu de la chronologie -->
-            <div id="timeline-content">
-                {% include "bookmark_timeline.partial.html" %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Conteneur modal -->
-<div id="modal-container"></div>
+{% include 'bookmark_calendar_timeline.' + current_locale + '.common.html' %}
 {% endblock %}
 
 {% block scripts %}

templates/bookmark_calendar_timeline.fr-ca.partial.html

···
+<div class="bookmark-calendar-container">
+    <div class="columns">        
+        <div class="column">
+            <!-- Timeline View -->
+            <div class="timeline-container" id="timeline-container">
+                {% if events %}
+                <div class="timeline">
+                    {% for bookmarked_event in events %}
+                    <div class="timeline-item">
+                        <div class="timeline-marker is-icon">
+                            <i class="fas fa-bookmark" style="color: #ff6b6b;"></i>
+                        </div>
+                        <div class="timeline-content">
+                            <div class="event-card box">
+                                {% if bookmarked_event.bookmark.tags %}
+                                <div class="tags mb-3">
+                                    {% for tag in bookmarked_event.bookmark.tags %}
+                                    <span class="tag is-primary is-small">{{ tag }}</span>
+                                    {% endfor %}
+                                </div>
+                                {% endif %}
+                                
+                                <h5 class="title is-5">{{ bookmarked_event.event_details.name }}</h5>
+                                {% if bookmarked_event.event_details.description %}
+                                <p class="content">{{ bookmarked_event.event_details.description }}</p>
+                                {% endif %}
+                                
+                                {% if bookmarked_event.starts_at_human or bookmarked_event.event_details.starts_at %}
+                                <p class="has-text-grey">
+                                    <span class="icon">
+                                        <i class="fas fa-calendar"></i>
+                                    </span>
+                                    {{ t("event-date") }}: {{ bookmarked_event.starts_at_human | default(bookmarked_event.event_details.starts_at) }}
+                                </p>
+                                {% endif %}
+                                
+                                <div class="buttons">
+                                    <a href="/{{ bookmarked_event.event.did }}/{{ bookmarked_event.event_rkey }}" class="button is-small is-primary">
+                                        {{ t("view-event") }}
+                                    </a>
+                                    <button class="button is-small is-danger is-outlined"
+                                            onclick="removeBookmarkFromTimeline(this)"
+                                            data-event-aturi="{{ bookmarked_event.bookmark.event_aturi }}">
+                                        <span class="icon">
+                                            <i class="fas fa-trash"></i>
+                                        </span>
+                                        <span>{{ t("remove-bookmark") }}</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div class="has-text-centered py-6">
+                    <span class="icon is-large has-text-grey-light">
+                        <i class="fas fa-calendar-times fa-3x"></i>
+                    </span>
+                    <p class="title is-4 has-text-grey">{{ t("no-bookmarked-events") }}</p>
+                    <p class="subtitle has-text-grey">{{ t("start-bookmarking-events") }}</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="column">
+            <div class="is-pulled-right">
+                {% include 'mini_calendar.html' %}
+                <!-- Pass events data to mini calendar -->
+                <script>
+                window.bookmarkedEventDates = [
+                    {% if events %}
+                    {% for bookmarked_event in events %}
+                    {% if bookmarked_event.event_details.starts_at %}
+                    '{{ bookmarked_event.event_details.starts_at }}'.split('T')[0],
+                    {% endif %}
+                    {% endfor %}
+                    {% endif %}
+                ];
+                console.log('Setting bookmarked dates:', window.bookmarkedEventDates);
+                </script>
+            </div>
+        </div>
+    </div>   
+</div>

templates/bookmark_calendars_index.en-us.bare.html

···
+{% extends "bare.en-us.html" %}
+
+{% block content %}
+{% include 'bookmark_calendars_index.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendars_index.en-us.common.html

···
+<section class="section">
+    <div class="container">
+        <div class="columns">
+            <div class="column">
+                <h1 class="title">
+                    <span class="icon">
+                        <i class="fas fa-bookmark"></i>
+                    </span>
+                    {{ t("nav-my-calendars") }}
+                </h1>
+                <p class="subtitle">{{ t("bookmark-calendars-subtitle") }}</p>
+                
+                <!-- Create New Calendar Button -->
+                <div class="field">
+                    <div class="control">
+                        <button class="button is-primary" onclick="openListModal()">
+                            <span class="icon">
+                                <i class="fas fa-plus"></i>
+                            </span>
+                            <span>{{ t("create-calendar") }}</span>
+                        </button>
+                    </div>
+                </div>
+
+                {% include 'bookmark_calendars_index.' + current_locale + '.partial.html' %}
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Create Calendar Modal Container -->
+<div id="calendar-modal-container">
+    {% include 'bookmark_list_modal.' + current_locale + '.partial.html' %}
+</div>

templates/bookmark_calendars_index.en-us.html

···
+{% extends "base.en-us.html" %}
+
+{% block title %}{{ t("nav-my-calendars") }} - {{ t("page-title-home") }}{% endblock %}
+
+{% block content %}
+{% include 'bookmark_calendars_index.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendars_index.en-us.partial.html

···
+<!-- User's Calendars -->
+<div id="calendars-container">
+    {% if calendars %}
+        {% for calendar in calendars %}
+        <div class="card mb-4">
+            <div class="card-content">
+                <div class="media">
+                    <div class="media-left">
+                        <span class="icon is-large">
+                            <i class="fas fa-calendar fa-2x"></i>
+                        </span>
+                    </div>
+                    <div class="media-content">
+                        <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="has-text-dark">
+                            <p class="title is-4">{{ calendar.name }}</p>
+                            {% if calendar.description %}
+                            <p class="subtitle is-6">{{ calendar.description }}</p>
+                            {% endif %}
+                        </a>
+                        <div class="tags">
+                            {% for tag in calendar.tags %}
+                            <span class="tag is-primary">{{ tag }}</span>
+                            {% endfor %}
+                        </div>
+                        <p class="has-text-grey">
+                            <span class="icon">
+                                <i class="fas fa-calendar-check"></i>
+                            </span>
+                            {{ calendar.event_count }} {{ t("events") }}
+                            {% if calendar.is_public %}
+                            <span class="tag is-info is-light ml-2">{{ t("public") }}</span>
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="media-right">
+                        <div class="dropdown is-right">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small" aria-haspopup="true" onclick="toggleDropdown(this)">
+                                    <span class="icon">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu">
+                                <div class="dropdown-content">
+                                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="dropdown-item">
+                                        <span class="icon">
+                                            <i class="fas fa-eye"></i>
+                                        </span>
+                                        {{ t("view-calendar") }}
+                                    </a>
+                                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}.ics" class="dropdown-item">
+                                        <span class="icon">
+                                            <i class="fas fa-download"></i>
+                                        </span>
+                                        {{ t("export-calendar") }}
+                                    </a>
+                                    <hr class="dropdown-divider">
+                                    <a class="dropdown-item has-text-danger" 
+                                       hx-delete="/bookmark-calendars/{{ calendar.calendar_id }}"
+                                       hx-target="closest .card"
+                                       hx-swap="outerHTML"
+                                       hx-confirm="{{ t('confirm-delete-calendar') }}">
+                                        <span class="icon">
+                                            <i class="fas fa-trash"></i>
+                                        </span>
+                                        {{ t("delete-calendar") }}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    {% else %}
+        <div class="notification is-info">
+            <p>{{ t("no-calendars-yet") }}</p>
+            <p>{{ t("create-first-calendar-help") }}</p>
+        </div>
+    {% endif %}
+</div>

templates/bookmark_calendars_index.fr-ca.bare.html

···
+{% extends "bare.fr-ca.html" %}
+
+{% block content %}
+{% include 'bookmark_calendars_index.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendars_index.fr-ca.common.html

···
+<section class="section">
+    <div class="container">
+        <div class="columns">
+            <div class="column">
+                <h1 class="title">
+                    <span class="icon">
+                        <i class="fas fa-bookmark"></i>
+                    </span>
+                    {{ t("nav-my-calendars") }}
+                </h1>
+                <p class="subtitle">{{ t("bookmark-calendars-subtitle") }}</p>
+                
+                <!-- Create New Calendar Button -->
+                <div class="field">
+                    <div class="control">
+                        <button class="button is-primary" onclick="openListModal()">
+                            <span class="icon">
+                                <i class="fas fa-plus"></i>
+                            </span>
+                            <span>{{ t("create-calendar") }}</span>
+                        </button>
+                    </div>
+                </div>
+
+                {% include 'bookmark_calendars_index.' + current_locale + '.partial.html' %}
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Create Calendar Modal Container -->
+<div id="calendar-modal-container">
+    {% include 'bookmark_list_modal.' + current_locale + '.partial.html' %}
+</div>

templates/bookmark_calendars_index.fr-ca.html

···
+{% extends "base.fr-ca.html" %}
+
+{% block title %}{{ t("nav-my-calendars") }} - {{ t("page-title-home") }}{% endblock %}
+
+{% block content %}
+{% include 'bookmark_calendars_index.' + current_locale + '.common.html' %}
+{% endblock %}

templates/bookmark_calendars_index.fr-ca.partial.html

···
+<!-- User's Calendars -->
+<div id="calendars-container">
+    {% if calendars %}
+        {% for calendar in calendars %}
+        <div class="card mb-4">
+            <div class="card-content">
+                <div class="media">
+                    <div class="media-left">
+                        <span class="icon is-large">
+                            <i class="fas fa-calendar fa-2x"></i>
+                        </span>
+                    </div>
+                    <div class="media-content">
+                        <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="has-text-dark">
+                            <p class="title is-4">{{ calendar.name }}</p>
+                            {% if calendar.description %}
+                            <p class="subtitle is-6">{{ calendar.description }}</p>
+                            {% endif %}
+                        </a>
+                        <div class="tags">
+                            {% for tag in calendar.tags %}
+                            <span class="tag is-primary">{{ tag }}</span>
+                            {% endfor %}
+                        </div>
+                        <p class="has-text-grey">
+                            <span class="icon">
+                                <i class="fas fa-calendar-check"></i>
+                            </span>
+                            {{ calendar.event_count }} {{ t("events") }}
+                            {% if calendar.is_public %}
+                            <span class="tag is-info is-light ml-2">{{ t("public") }}</span>
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div class="media-right">
+                        <div class="dropdown is-right">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small" aria-haspopup="true" onclick="toggleDropdown(this)">
+                                    <span class="icon">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu">
+                                <div class="dropdown-content">
+                                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="dropdown-item">
+                                        <span class="icon">
+                                            <i class="fas fa-eye"></i>
+                                        </span>
+                                        {{ t("view-calendar") }}
+                                    </a>
+                                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}.ics" class="dropdown-item">
+                                        <span class="icon">
+                                            <i class="fas fa-download"></i>
+                                        </span>
+                                        {{ t("export-calendar") }}
+                                    </a>
+                                    <hr class="dropdown-divider">
+                                    <a class="dropdown-item has-text-danger" 
+                                       hx-delete="/bookmark-calendars/{{ calendar.calendar_id }}"
+                                       hx-target="closest .card"
+                                       hx-swap="outerHTML"
+                                       hx-confirm="{{ t('confirm-delete-calendar') }}">
+                                        <span class="icon">
+                                            <i class="fas fa-trash"></i>
+                                        </span>
+                                        {{ t("delete-calendar") }}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    {% else %}
+        <div class="notification is-info">
+            <p>{{ t("no-calendars-yet") }}</p>
+            <p>{{ t("create-first-calendar-help") }}</p>
+        </div>
+    {% endif %}
+</div>

templates/bookmark_list_modal.en-us.partial.html

···
+<div class="modal" id="create-list-modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">{{ t("create-bookmark-list") }}</p>
+            <button class="delete" onclick="closeListModal()"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="create-list-form">
+                <div class="field">
+                    <label class="label">{{ t("list-name") }}</label>
+                    <div class="control">
+                        <input class="input" type="text" name="name" 
+                               placeholder="{{ t('list-name-placeholder') }}" required>
+                    </div>
+                    <p class="help">{{ t("list-name-help") }}</p>
+                </div>
+                
+                <div class="field">
+                    <label class="label">{{ t("list-tags") }}</label>
+                    <div class="control">
+                        <div class="tags-input-container">
+                            <div id="selected-list-tags" class="tags-display"></div>
+                            <input class="input" type="text" id="new-list-tag-input" 
+                                   placeholder="{{ t('add-tag-placeholder') }}"
+                                   onkeypress="handleListTagInput(event)">
+                        </div>
+                    </div>
+                    <p class="help">{{ t("list-tags-help") }}</p>
+                </div>
+                
+                <div class="field">
+                    <label class="label">{{ t("list-description") }}</label>
+                    <div class="control">
+                        <textarea class="textarea" name="description" 
+                                  placeholder="{{ t('list-description-placeholder') }}"></textarea>
+                    </div>
+                </div>
+                
+                <div class="field">
+                    <div class="control">
+                        <label class="checkbox">
+                            <input type="checkbox" name="is_public">
+                            {{ t("make-calendar-public") }}
+                        </label>
+                    </div>
+                    <p class="help">{{ t("public-calendar-help") }}</p>
+                    <div class="notification is-info is-light">
+                        <p class="is-size-7">
+                            <strong>{{ t("atproto-privacy-notice") }}</strong><br>
+                            {{ t("atproto-privacy-explanation") }}
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot">
+            <button class="button is-primary" onclick="submitListForm()">
+                {{ t("create-list") }}
+            </button>
+            <button class="button" onclick="closeListModal()">
+                {{ t("cancel") }}
+            </button>
+        </footer>
+    </div>
+</div>

templates/bookmark_list_modal.fr-ca.partial.html

···
+<div class="modal" id="create-list-modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">{{ t("create-bookmark-list") }}</p>
+            <button class="delete" onclick="closeListModal()"></button>
+        </header>
+        <section class="modal-card-body">
+            <form id="create-list-form">
+                <div class="field">
+                    <label class="label">{{ t("list-name") }}</label>
+                    <div class="control">
+                        <input class="input" type="text" name="name" 
+                               placeholder="{{ t('list-name-placeholder') }}" required>
+                    </div>
+                    <p class="help">{{ t("list-name-help") }}</p>
+                </div>
+                
+                <div class="field">
+                    <label class="label">{{ t("list-tags") }}</label>
+                    <div class="control">
+                        <div class="tags-input-container">
+                            <div id="selected-list-tags" class="tags-display"></div>
+                            <input class="input" type="text" id="new-list-tag-input" 
+                                   placeholder="{{ t('add-tag-placeholder') }}"
+                                   onkeypress="handleListTagInput(event)">
+                        </div>
+                    </div>
+                    <p class="help">{{ t("list-tags-help") }}</p>
+                </div>
+                
+                <div class="field">
+                    <label class="label">{{ t("list-description") }}</label>
+                    <div class="control">
+                        <textarea class="textarea" name="description" 
+                                  placeholder="{{ t('list-description-placeholder') }}"></textarea>
+                    </div>
+                </div>
+                
+                <div class="field">
+                    <div class="control">
+                        <label class="checkbox">
+                            <input type="checkbox" name="is_public">
+                            {{ t("make-calendar-public") }}
+                        </label>
+                    </div>
+                    <p class="help">{{ t("public-calendar-help") }}</p>
+                    <div class="notification is-info is-light">
+                        <p class="is-size-7">
+                            <strong>{{ t("atproto-privacy-notice") }}</strong><br>
+                            {{ t("atproto-privacy-explanation") }}
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </section>
+        <footer class="modal-card-foot">
+            <button class="button is-primary" onclick="submitListForm()">
+                {{ t("create-list") }}
+            </button>
+            <button class="button" onclick="closeListModal()">
+                {{ t("cancel") }}
+            </button>
+        </footer>
+    </div>
+</div>

templates/bookmark_modal.en-us.bare.html

···
+
+{% block content %}
+{% include 'bookmark_modal.' + current_locale + '.partial.html' %}
+{% endblock %}

templates/bookmark_modal.en-us.partial.html

···
+<div class="modal-card" id="bookmark-modal" data-event-aturi="{{ event_aturi }}"{% if is_already_bookmarked and existing_bookmark.tags %} data-existing-tags="{{ existing_bookmark.tags | join(',') }}"{% endif %}>
+    <header class="modal-card-head">
+        <p class="modal-card-title">
+            {% if is_already_bookmarked %}
+                Update Bookmark
+            {% else %}
+                Bookmark Event
+            {% endif %}
+        </p>
+        <button class="delete" aria-label="close" onclick="closeBookmarkModal()"></button>
+    </header>
+    <section class="modal-card-body">
+        {% if is_already_bookmarked %}
+        <div class="notification is-info">
+            <p><strong>This event is already bookmarked!</strong></p>
+            <p>Current tags: 
+                {% if existing_bookmark.tags %}
+                    {% for tag in existing_bookmark.tags %}
+                        <span class="tag is-light">{{ tag }}</span>
+                    {% endfor %}
+                {% else %}
+                    <em>No tags</em>
+                {% endif %}
+            </p>
+        </div>
+        {% endif %}
+        
+        <div class="field">
+            <label class="label">Tags (optional)</label>
+            <div class="control">
+                <input class="input" type="text" id="bookmark-tags" 
+                       placeholder="e.g. concerts, local, summer"
+                       onkeypress="handleTagKeypress(event)">
+            </div>
+            <p class="help">
+                {% if is_already_bookmarked %}
+                    Update tags to reorganize your bookmark
+                {% else %}
+                    Add tags to organize your bookmarks (comma-separated)
+                {% endif %}
+            </p>
+        </div>
+        <div id="selected-tags" class="tags"></div>
+    </section>
+    <footer class="modal-card-foot">
+        <button class="button is-success" onclick="submitBookmark()">
+            <span class="icon">
+                <i class="fas fa-bookmark"></i>
+            </span>
+            <span>
+                {% if is_already_bookmarked %}
+                    Update Bookmark
+                {% else %}
+                    Bookmark Event
+                {% endif %}
+            </span>
+        </button>
+        {% if is_already_bookmarked %}
+        <button class="button is-danger" onclick="removeBookmark()">
+            <span class="icon">
+                <i class="fas fa-bookmark-slash"></i>
+            </span>
+            <span>Remove Bookmark</span>
+        </button>
+        {% endif %}
+        <button class="button" onclick="closeBookmarkModal()">Cancel</button>
+    </footer>
+</div>
+
+<script>
+// Initialize with existing tags from data attribute
+document.addEventListener('DOMContentLoaded', function() {
+    const modalCard = document.getElementById('bookmark-modal');
+    if (modalCard && modalCard.hasAttribute('data-existing-tags')) {
+        const existingTagsStr = modalCard.getAttribute('data-existing-tags');
+        const existingTags = existingTagsStr ? existingTagsStr.split(',') : [];
+        initializeBookmarkModal(existingTags);
+    }
+});
+</script>

templates/bookmark_modal.fr-ca.bare.html

···
+
+{% block content %}
+{% include 'bookmark_modal.' + current_locale + '.partial.html' %}
+{% endblock %}

templates/bookmark_modal.fr-ca.partial.html

···
+<div class="modal-card" id="bookmark-modal" data-event-aturi="{{ event_aturi }}"{% if is_already_bookmarked and existing_bookmark.tags %} data-existing-tags="{{ existing_bookmark.tags | join(',') }}"{% endif %}>
+    <header class="modal-card-head">
+        <p class="modal-card-title">
+            {% if is_already_bookmarked %}
+                Modifier le marque-page
+            {% else %}
+                Marquer l'événement
+            {% endif %}
+        </p>
+        <button class="delete" aria-label="close" onclick="closeBookmarkModal()"></button>
+    </header>
+    <section class="modal-card-body">
+        {% if is_already_bookmarked %}
+        <div class="notification is-info">
+            <p><strong>Cet événement est déjà marqué!</strong></p>
+            <p>Étiquettes actuelles: 
+                {% if existing_bookmark.tags %}
+                    {% for tag in existing_bookmark.tags %}
+                        <span class="tag is-light">{{ tag }}</span>
+                    {% endfor %}
+                {% else %}
+                    <em>Aucune étiquette</em>
+                {% endif %}
+            </p>
+        </div>
+        {% endif %}
+        
+        <div class="field">
+            <label class="label">Étiquettes (optionnel)</label>
+            <div class="control">
+                <input class="input" type="text" id="bookmark-tags" 
+                       placeholder="ex. concerts, local, été"
+                       onkeypress="handleTagKeypress(event)">
+            </div>
+            <p class="help">
+                {% if is_already_bookmarked %}
+                    Modifiez les étiquettes pour réorganiser votre marque-page
+                {% else %}
+                    Ajoutez des étiquettes pour organiser vos marque-pages (séparées par des virgules)
+                {% endif %}
+            </p>
+        </div>
+        <div id="selected-tags" class="tags"></div>
+    </section>
+    <footer class="modal-card-foot">
+        <button class="button is-success" onclick="submitBookmark()">
+            <span class="icon">
+                <i class="fas fa-bookmark"></i>
+            </span>
+            <span>
+                {% if is_already_bookmarked %}
+                    Modifier le marque-page
+                {% else %}
+                    Marquer l'événement
+                {% endif %}
+            </span>
+        </button>
+        {% if is_already_bookmarked %}
+        <button class="button is-danger" onclick="removeBookmark()">
+            <span class="icon">
+                <i class="fas fa-bookmark-slash"></i>
+            </span>
+            <span>Retirer le marque-page</span>
+        </button>
+        {% endif %}
+        <button class="button" onclick="closeBookmarkModal()">Annuler</button>
+    </footer>
+</div>
+
+<script>
+// Initialize with existing tags from data attribute
+document.addEventListener('DOMContentLoaded', function() {
+    const modalCard = document.getElementById('bookmark-modal');
+    if (modalCard && modalCard.hasAttribute('data-existing-tags')) {
+        const existingTagsStr = modalCard.getAttribute('data-existing-tags');
+        const existingTags = existingTagsStr ? existingTagsStr.split(',') : [];
+        initializeBookmarkModal(existingTags);
+    }
+});
+</script>

templates/mini_calendar.html

···
 <div class="calendar-mini">
-    <div class="calendar-nav">
-        <button class="button is-small" 
-                hx-get="/bookmarks/calendar-nav?year={{ year }}&month={{ month - 1 }}"
-                hx-target="#mini-calendar">
-            <i class="fas fa-chevron-left"></i>
-        </button>
-        <span class="calendar-month-year">
-            {{ month_names[month - 1] }} {{ year }}
-        </span>
-        <button class="button is-small" 
-                hx-get="/bookmarks/calendar-nav?year={{ year }}&month={{ month + 1 }}"
-                hx-target="#mini-calendar">
-            <i class="fas fa-chevron-right"></i>
-        </button>
+    <div class="field">
+        <label class="label">{{ t("select-date") | default("Select Date") }}</label>
+        <div class="control">
+            <input 
+                id="mini-calendar-picker" 
+                type="date" 
+                class="input" 
+                style="display: none;">
+        </div>
     </div>
+</div>
+
+<script>
+function initializeMiniCalendar() {
+    // Initialize the Bulma Calendar
+    const calendarElement = document.getElementById('mini-calendar-picker');
+    if (calendarElement && typeof bulmaCalendar !== 'undefined') {
+        // Check if calendar is already initialized and destroy it
+        if (calendarElement.bulmaCalendar) {
+            calendarElement.bulmaCalendar.destroy();
+        }
+        
+        // Map current locale to determine language for labels
+        const currentLocale = '{{ current_locale | default("fr-ca") }}';
+        const isFrench = currentLocale && currentLocale.startsWith('fr');
+        
+        // Get bookmarked event dates for highlighting
+        const bookmarkedDates = window.bookmarkedEventDates || [];
+        console.log('Bookmarked dates for calendar:', bookmarkedDates);
+        
+        // Simple initialization with minimal options
+        const calendar = new bulmaCalendar(calendarElement, {
+            type: 'date',
+            displayMode: 'inline',
+            // Add French labels when language is French
+            cancelLabel: isFrench ? 'Annuler' : 'Cancel',
+            clearLabel: isFrench ? 'Effacer' : 'Clear',
+            todayLabel: isFrench ? "Aujourd'hui" : 'Today',
+            nowLabel: isFrench ? 'Maintenant' : 'Now',
+            validateLabel: isFrench ? 'Valider' : 'Validate',
+            // Callback to highlight dates after calendar is ready
+            onReady: function(instance) {
+                console.log('Calendar ready, highlighting bookmarked dates...');
+                highlightBookmarkedDates(bookmarkedDates, isFrench);
+            }
+        });
+        
+        // Add event listener for date selection
+        if (calendar) {
+            calendar.on('select', function(date) {
+                console.log('Date selected:', date);
+                // You can add custom logic here when a date is selected
+                // For example, trigger an HTMX request to update events
+                // htmx.trigger('#some-element', 'dateChanged', {detail: {date: date}});
+            });
+        }
+    }
+}
+
+// Function to highlight bookmarked dates
+function highlightBookmarkedDates(bookmarkedDates, isFrench) {
+    if (!bookmarkedDates || bookmarkedDates.length === 0) return;
     
-    <table class="table is-narrow is-fullwidth">
-        <thead>
-            <tr>
-                <th>Mo</th>
-                <th>Tu</th>
-                <th>We</th>
-                <th>Th</th>
-                <th>Fr</th>
-                <th>Sa</th>
-                <th>Su</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% set month_start = date(year, month, 1) %}
-            {% set start_weekday = month_start.weekday() %}
-            {% set days_in_month = month_start.days_in_month() %}
-            
-            {% set current_day = 1 %}
-            {% set week_count = 0 %}
-            
-            {% for week in range(6) %}
-                {% if current_day <= days_in_month %}
-                <tr>
-                    {% for day_of_week in range(7) %}
-                        {% if week == 0 and day_of_week < start_weekday %}
-                            <td></td>
-                        {% elif current_day <= days_in_month %}
-                            {% set has_events = false %}
-                            {% for event in events %}
-                                {% set event_date = event.event.start_time|date('Y-m-d') %}
-                                {% set current_date = year ~ '-' ~ month|string|pad(2, '0') ~ '-' ~ current_day|string|pad(2, '0') %}
-                                {% if event_date == current_date %}
-                                    {% set has_events = true %}
-                                {% endif %}
-                            {% endfor %}
-                            
-                            <td class="{% if has_events %}has-background-primary-light{% endif %}">
-                                <button class="button is-small is-white {% if has_events %}has-text-primary{% endif %}"
-                                        hx-get="/bookmarks?start_date={{ year }}-{{ month|string|pad(2, '0') }}-{{ current_day|string|pad(2, '0') }}&end_date={{ year }}-{{ month|string|pad(2, '0') }}-{{ current_day|string|pad(2, '0') }}"
-                                        hx-target="#timeline-content">
-                                    {{ current_day }}
-                                </button>
-                            </td>
-                            {% set current_day = current_day + 1 %}
-                        {% else %}
-                            <td></td>
-                        {% endif %}
-                    {% endfor %}
-                </tr>
-                {% endif %}
-            {% endfor %}
-        </tbody>
-    </table>
-</div>
+    bookmarkedDates.forEach(dateStr => {
+        const targetDay = parseInt(dateStr.split('-')[2]).toString();
+        console.log('Highlighting day:', targetDay, 'from date:', dateStr);
+        
+        // Find date items in current month
+        const dateItems = document.querySelectorAll('.datepicker-date.is-current-month .date-item');
+        
+        dateItems.forEach((item) => {
+            if (item.textContent.trim() === targetDay) {
+                console.log('Found and highlighting day:', targetDay);
+                item.classList.add('has-bookmark-event');
+                item.style.backgroundColor = '#ff6b6b';
+                item.style.color = 'white';
+                item.style.fontWeight = 'bold';
+                item.style.borderRadius = '50%';
+                item.title = isFrench ? 'Événement marqué' : 'Bookmarked event';
+            }
+        });
+    });
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', initializeMiniCalendar);
+
+// Reinitialize after HTMX updates
+document.addEventListener('htmx:afterSettle', function(event) {
+    // Check if the updated content contains our calendar
+    if (event.target.id === 'mini-calendar' || event.target.querySelector('#mini-calendar-picker')) {
+        initializeMiniCalendar();
+    }
+});
+</script>

templates/nav.en-us.html

···
                     <a class="navbar-item" href="/" hx-boost="true">
                         {{ t("nav-home") }}
                     </a>
-                    <a class="navbar-item" href="/events" hx-boost="true">
-                        {{ t("nav-events") }}
-                    </a>
+                    <!-- Replace the existing events nav item with a dropdown -->
+                    <div class="navbar-item has-dropdown is-hoverable">
+                        <a class="navbar-link">
+                            <span class="icon">
+                                <i class="fas fa-calendar"></i>
+                            </span>
+                            {{ t("nav-events-calendars") }}
+                        </a>
+                        <div class="navbar-dropdown">
+                            <a class="navbar-item" href="/events" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-list"></i>
+                                </span>
+                                {{ t("nav-browse-events") }}
+                            </a>
+                            {% if current_handle %}
+                            <hr class="navbar-divider">
+                            <a class="navbar-item" href="/bookmark-calendars" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-bookmark"></i>
+                                </span>
+                                {{ t("nav-my-calendars") }}
+                            </a>
+                            <a class="navbar-item" href="/bookmarks" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-heart"></i>
+                                </span>
+                                {{ t("nav-all-bookmarks") }}
+                            </a>
+                            {% endif %}
+                        </div>
+                    </div>
                     <a class="navbar-item" href="https://docs.{{ base | replace('https://', '') | replace('http://', '') }}/">
                         {{ t("nav-help") }}
                     </a>

templates/nav.fr-ca.html

···
                     <a class="navbar-item" href="/" hx-boost="true">
                         {{ t("nav-home") }}
                     </a>
-                    <a class="navbar-item" href="/events" hx-boost="true">
-                        {{ t("nav-events") }}
-                    </a>
+                    <!-- Replace the existing events nav item with a dropdown -->
+                    <div class="navbar-item has-dropdown is-hoverable">
+                        <a class="navbar-link">
+                            <span class="icon">
+                                <i class="fas fa-calendar"></i>
+                            </span>
+                            {{ t("nav-events-calendars") }}
+                        </a>
+                        <div class="navbar-dropdown">
+                            <a class="navbar-item" href="/events" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-list"></i>
+                                </span>
+                                {{ t("nav-browse-events") }}
+                            </a>
+                            {% if current_handle %}
+                            <hr class="navbar-divider">
+                            <a class="navbar-item" href="/bookmark-calendars" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-bookmark"></i>
+                                </span>
+                                {{ t("nav-my-calendars") }}
+                            </a>
+                            <a class="navbar-item" href="/bookmarks" hx-boost="true">
+                                <span class="icon">
+                                    <i class="fas fa-heart"></i>
+                                </span>
+                                {{ t("nav-all-bookmarks") }}
+                            </a>
+                            {% endif %}
+                        </div>
+                    </div>
                     <a class="navbar-item" href="https://docs.{{ base | replace('https://', '') | replace('http://', '') }}/">
                         {{ t("nav-help") }}
                     </a>

templates/profile.en-us.common.html

···
 </section>
 <section class="section">
     <div class="container">
+        {% include 'profile_bookmark_lists.' + current_locale + '.incl.html' %}
+    </div>
+</section>
+<section class="section">
+    <div class="container">
         <div class="tabs">
             <ul>
                 <li class="is-active"><a>{{ t("profile-recently-updated") }}</a></li>

templates/profile.fr-ca.common.html

···
 </section>
 <section class="section">
     <div class="container">
+        {% include 'profile_bookmark_lists.' + current_locale + '.incl.html' %}
+    </div>
+</section>
+<section class="section">
+    <div class="container">
         <div class="tabs">
             <ul>
                 <li class="is-active"><a>{{ t("profile-recently-updated") }}</a></li>

templates/profile_bookmark_lists.en-us.incl.html

···
+<div class="profile-section">
+    <div class="section-header">
+        <h3 class="title is-4">
+            <i class="fas fa-bookmark"></i>
+            {{ t("public-calendars") }}
+        </h3>
+        {% if is_self %}
+        <a href="/bookmark-calendars" class="button is-primary is-small">
+            <i class="fas fa-plus"></i>
+            {{ t("manage-calendars") }}
+        </a>
+        {% endif %}
+    </div>
+    
+    {% if public_calendars %}
+    <div class="bookmark-lists-grid">
+        {% for calendar in public_calendars %}
+        <div class="list-card">
+            <div class="list-card-header">
+                <h4 class="list-name">
+                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}">
+                        {{ calendar.name }}
+                    </a>
+                </h4>
+                <div class="list-stats">
+                    <span class="tag is-light">
+                        {{ calendar.event_count }} {{ t("events") }}
+                    </span>
+                </div>
+            </div>
+            
+            {% if calendar.description %}
+            <p class="list-description">{{ calendar.description }}</p>
+            {% endif %}
+            
+            {% if calendar.tags %}
+            <div class="list-card-tags mb-3">
+                {% for tag in calendar.tags %}
+                <span class="tag is-primary is-light">{{ tag }}</span>
+                {% endfor %}
+            </div>
+            {% endif %}
+            
+            <div class="list-card-footer">
+                <small class="has-text-grey">
+                    {{ t("created") }} {{ calendar.created_at | date(format="%B %d, %Y") }}
+                </small>
+                <div class="list-actions">
+                    <a href="/bookmark-calendars/{{ calendar.calendar_id }}.ics" 
+                       class="button is-small is-outlined"
+                       title="{{ t('export-calendar') }}">
+                        <i class="fas fa-calendar-alt"></i>
+                    </a>
+                    <button class="button is-small is-outlined share-list-btn"
+                            data-list-url="/bookmark-calendars/{{ calendar.calendar_id }}"
+                            title="{{ t('share-calendar') }}">
+                        <i class="fas fa-share"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="empty-state">
+        <p class="has-text-grey">{{ t("no-public-calendars") }}</p>
+    </div>
+    {% endif %}
+</div>

templates/profile_bookmark_lists.fr-ca.incl.html

···
+<div class="profile-section">
+    <div class="section-header">
+        <h3 class="title is-4">
+            <i class="fas fa-bookmark"></i>
+            {{ t("public-calendars") }}
+        </h3>
+        {% if is_self %}
+        <a href="/bookmark-calendars" class="button is-primary is-small">
+            <i class="fas fa-plus"></i>
+            {{ t("manage-calendars") }}
+        </a>
+        {% endif %}
+    </div>
+    
+    {% if public_calendars %}
+    <div class="columns is-multiline">
+        {% for calendar in public_calendars %}
+        <div class="column is-half">
+            <div class="card">
+                <div class="card-content">
+                    <div class="media">
+                        <div class="media-left">
+                            <span class="icon is-large">
+                                <i class="fas fa-calendar fa-2x"></i>
+                            </span>
+                        </div>
+                        <div class="media-content">
+                            <h4 class="title is-5">
+                                <a href="/bookmark-calendars/{{ calendar.calendar_id }}">
+                                    {{ calendar.name }}
+                                </a>
+                            </h4>
+                            {% if calendar.description %}
+                            <p class="subtitle is-6">{{ calendar.description }}</p>
+                            {% endif %}
+                            <div class="tags">
+                                {% for tag in calendar.tags %}
+                                <span class="tag is-primary">{{ tag }}</span>
+                                {% endfor %}
+                            </div>
+                            <p class="has-text-grey">
+                                <span class="icon">
+                                    <i class="fas fa-calendar-check"></i>
+                                </span>
+                                {{ calendar.event_count }} {{ t("events") }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="empty-state">
+        <p class="has-text-grey">{{ t("no-public-calendars") }}</p>
+    </div>
+    {% endif %}
+</div>

templates/view_event.en-us.common.html

···
         </article>
         {% endif %}
         {% endif %}
+
+        <!-- Bookmark Section -->
+        {% if current_handle and not is_legacy_event %}
+        <div class="columns is-vcentered">
+            <div class="column">
+                <div id="bookmarkFrame">
+                    {% if user_bookmark_status %}
+                    <article class="message is-info">
+                        <div class="message-body">
+                            <div class="columns is-vcentered">
+                                <div class="column">
+                                    <span class="icon-text">
+                                        <span class="icon">
+                                            <i class="fas fa-bookmark"></i>
+                                        </span>
+                                        <span>Bookmarked{% if user_bookmark_tags %} with tags: {{ user_bookmark_tags | join(", ") }}{% endif %}</span>
+                                    </span>
+                                </div>
+                                <div class="column is-narrow">
+                                    <button class="button is-outlined is-danger is-small" 
+                                            hx-delete="/bookmarks/{{ user_bookmark_aturi | urlencode }}" 
+                                            hx-target="#bookmarkFrame"
+                                            hx-swap="outerHTML"
+                                            hx-confirm="Are you sure you want to remove this bookmark?">
+                                        <span class="icon">
+                                            <i class="fas fa-times"></i>
+                                        </span>
+                                        <span>Remove Bookmark</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    {% else %}
+                    <article class="message is-light">
+                        <div class="message-body">
+                            <div class="columns is-vcentered">
+                                <div class="column">
+                                    <span class="icon-text">
+                                        <span class="icon">
+                                            <i class="far fa-bookmark"></i>
+                                        </span>
+                                        <span>Bookmark this event to add it to your personal calendar</span>
+                                    </span>
+                                </div>
+                                <div class="column is-narrow">
+                                    <button class="button is-primary is-small" 
+                                            hx-get="/bookmarks/modal?event_aturi={{ event.aturi | urlencode }}"
+                                            hx-target="#bookmarkModal"
+                                            hx-swap="innerHTML"
+                                            onclick="document.getElementById('bookmarkModal').classList.add('is-active')">
+                                        <span class="icon">
+                                            <i class="fas fa-bookmark"></i>
+                                        </span>
+                                        <span>Bookmark Event</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        <!-- End Bookmark Section -->
     </div>
 </section>
 
···
         </div>
         {% endif %}
     </div>
-</section>
+</section>
+
+<!-- Bookmark Modal -->
+<div class="modal" id="bookmarkModal">
+    <div class="modal-background" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></div>
+    <div class="modal-content">
+        <!-- Modal content will be loaded via HTMX -->
+    </div>
+    <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></button>
+</div>

templates/view_event.fr-ca.common.html

···
         {% endif %}
         {% endif %}
 
+        <!-- Section marque-pages -->
+        {% if current_handle and not is_legacy_event %}
+        <div class="columns is-vcentered">
+            <div class="column">
+                <div id="bookmarkFrame">
+                    {% if user_bookmark_status %}
+                    <article class="message is-info">
+                        <div class="message-body">
+                            <div class="columns is-vcentered">
+                                <div class="column">
+                                    <span class="icon-text">
+                                        <span class="icon">
+                                            <i class="fas fa-bookmark"></i>
+                                        </span>
+                                        <span>Marqué{% if user_bookmark_tags %} avec étiquettes: {{ user_bookmark_tags | join(", ") }}{% endif %}</span>
+                                    </span>
+                                </div>
+                                <div class="column is-narrow">
+                                    <button class="button is-outlined is-danger is-small" 
+                                            hx-delete="/bookmarks/{{ user_bookmark_aturi | urlencode }}" 
+                                            hx-target="#bookmarkFrame"
+                                            hx-swap="outerHTML"
+                                            hx-confirm="Êtes-vous sûr·e de vouloir retirer ce marque-page?">
+                                        <span class="icon">
+                                            <i class="fas fa-times"></i>
+                                        </span>
+                                        <span>Retirer le marque-page</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    {% else %}
+                    <article class="message is-light">
+                        <div class="message-body">
+                            <div class="columns is-vcentered">
+                                <div class="column">
+                                    <span class="icon-text">
+                                        <span class="icon">
+                                            <i class="far fa-bookmark"></i>
+                                        </span>
+                                        <span>Marquez cet événement pour l'ajouter à votre calendrier personnel</span>
+                                    </span>
+                                </div>
+                                <div class="column is-narrow">
+                                    <button class="button is-primary is-small" 
+                                            hx-get="/bookmarks/modal?event_aturi={{ event.aturi | urlencode }}"
+                                            hx-target="#bookmarkModal"
+                                            hx-swap="innerHTML"
+                                            onclick="document.getElementById('bookmarkModal').classList.add('is-active')">
+                                        <span class="icon">
+                                            <i class="fas fa-bookmark"></i>
+                                        </span>
+                                        <span>Marquer l'événement</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        <!-- Fin section marque-pages -->
+
         <!-- Layout principal: 2 colonnes -->
         <div class="columns is-desktop">
             <!-- Colonne principale (gauche) -->
···
         </div>
     </div>
 </section>
+
+<!-- Modal marque-pages -->
+<div class="modal" id="bookmarkModal">
+    <div class="modal-background" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></div>
+    <div class="modal-content">
+        <!-- Le contenu du modal sera chargé via HTMX -->
+    </div>
+    <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('bookmarkModal').classList.remove('is-active')"></button>
+</div>