diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..9f2edbc
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,364 @@
+/**
+ * Script principal pour MH Wilds - Partage de Quêtes à Couronnes
+ * Fichier à placer dans assets/js/main.js
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Éléments DOM
+    const monsterList = document.getElementById('monsterList');
+    const monsterSearch = document.getElementById('monsterSearch');
+    const clearSearchBtn = document.getElementById('clearSearchBtn');
+    const addQuestBtn = document.getElementById('addQuestBtn');
+    const monsterSearchSelect = document.getElementById('monsterSearchSelect');
+    const monsterSearchResults = document.getElementById('monsterSearchResults');
+    const selectedMonsterId = document.getElementById('selectedMonsterId');
+    
+    // Variables globales
+    let monsters = [];
+    let currentMonsterId = null;
+    
+    // ========== INITIALISATION ==========
+    
+    // Récupérer la liste des monstres
+    fetchMonsters();
+    
+    // Ajouter les écouteurs d'événements
+    if (clearSearchBtn) {
+        clearSearchBtn.addEventListener('click', clearSearch);
+    }
+    
+    if (monsterSearch) {
+        monsterSearch.addEventListener('input', filterMonsters);
+    }
+    
+    if (addQuestBtn) {
+        addQuestBtn.addEventListener('click', function() {
+            new bootstrap.Modal(document.getElementById('addQuestModal')).show();
+        });
+    }
+    
+    // Ajouter les écouteurs pour les cartes de monstres
+    if (monsterList) {
+        monsterList.addEventListener('click', function(e) {
+            const card = e.target.closest('.monster-card');
+            if (card) {
+                const monsterId = parseInt(card.dataset.monsterId);
+                if (!isNaN(monsterId)) {
+                    currentMonsterId = monsterId;
+                    showQuestListModal(monsterId);
+                }
+            }
+            
+            // Si le clic est sur un bouton dans la carte
+            if (e.target.tagName === 'BUTTON') {
+                e.preventDefault();
+                // Trouver la carte parent
+                const card = e.target.closest('.monster-card');
+                if (card) {
+                    const monsterId = parseInt(card.dataset.monsterId);
+                    if (!isNaN(monsterId)) {
+                        currentMonsterId = monsterId;
+                        showQuestListModal(monsterId);
+                    }
+                }
+            }
+        });
+    }
+    
+    // Initialiser la recherche de monstre dans le formulaire d'ajout
+    if (monsterSearchSelect) {
+        monsterSearchSelect.addEventListener('focus', function() {
+            showMonsterSearchResults();
+        });
+        
+        monsterSearchSelect.addEventListener('input', function() {
+            showMonsterSearchResults(this.value);
+        });
+        
+        // Clic en dehors des résultats pour les masquer
+        document.addEventListener('click', function(e) {
+            if (!monsterSearchSelect.contains(e.target) && !monsterSearchResults.contains(e.target)) {
+                monsterSearchResults.classList.add('d-none');
+            }
+        });
+    }
+    
+    // Écouteurs pour les filtres de couronnes dans la modale de quêtes
+    document.querySelectorAll('input[name="crownFilter"]').forEach(radio => {
+        radio.addEventListener('change', function() {
+            if (currentMonsterId) {
+                fetchQuests(currentMonsterId, this.value);
+            }
+        });
+    });
+    
+    // Initialiser les formulaires
+    initForms();
+    
+    // ========== FONCTIONS ==========
+    
+    /**
+     * Récupérer tous les monstres via l'API
+     */
+    function fetchMonsters() {
+        fetch('api.php?action=getMonsters')
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    monsters = data.monsters;
+                }
+            })
+            .catch(error => {
+                console.error('Erreur lors de la récupération des monstres:', error);
+            });
+    }
+    
+    /**
+     * Afficher la modale avec la liste des quêtes pour un monstre
+     * 
+     * @param {number} monsterId ID du monstre
+     */
+    function showQuestListModal(monsterId) {
+        // Réinitialiser le filtre à "Toutes"
+        document.getElementById('filterAll').checked = true;
+        
+        // Récupérer et afficher les quêtes
+        fetchQuests(monsterId, 'all');
+        
+        // Afficher la modale
+        new bootstrap.Modal(document.getElementById('questListModal')).show();
+    }
+    
+    /**
+     * Récupérer les quêtes pour un monstre
+     * 
+     * @param {number} monsterId ID du monstre
+     * @param {string} crownType Type de couronne (all, small, large)
+     */
+    function fetchQuests(monsterId, crownType) {
+        const questList = document.getElementById('questList');
+        questList.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div></div>';
+        
+        fetch(`api.php?action=getQuests&monsterId=${monsterId}&crownType=${crownType}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Mettre à jour le titre de la modale
+                    document.getElementById('modalMonsterName').textContent = data.monster;
+                    
+                    // Afficher les quêtes
+                    displayQuests(data.quests);
+                } else {
+                    questList.innerHTML = `<div class="alert alert-danger">Erreur: ${data.message}</div>`;
+                }
+            })
+            .catch(error => {
+                console.error('Erreur lors de la récupération des quêtes:', error);
+                questList.innerHTML = '<div class="alert alert-danger">Erreur de connexion. Veuillez réessayer.</div>';
+            });
+    }
+    
+    /**
+     * Afficher les quêtes dans la modale
+     * 
+     * @param {Array} quests Liste des quêtes
+     */
+    function displayQuests(quests) {
+        const questList = document.getElementById('questList');
+        
+        if (quests.length === 0) {
+            questList.innerHTML = '<div class="empty-message"><p>Aucune quête disponible pour ce monstre avec ce filtre.</p></div>';
+            return;
+        }
+        
+        let html = '';
+        
+        quests.forEach(quest => {
+            const crownClass = quest.crown_type === 'small' ? 'small-crown' : 'large-crown';
+            const crownLabel = quest.crown_type === 'small' ? 'Petite couronne' : 'Grande couronne';
+            
+            html += `
+                <div class="card quest-card mb-3">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="crown-badge ${crownClass}">${crownLabel}</span>
+                            <button class="btn btn-sm btn-outline-danger delete-quest-btn" data-id="${quest.id}">
+                                Supprimer
+                            </button>
+                        </div>
+                        <p class="my-2">Joueur: <strong>${quest.player_name}</strong> (ID: ${quest.player_id})</p>
+                        <div class="quest-date">Ajoutée: ${quest.freshness}</div>
+                    </div>
+                </div>
+            `;
+        });
+        
+        questList.innerHTML = html;
+        
+        // Ajouter les écouteurs pour les boutons de suppression
+        questList.querySelectorAll('.delete-quest-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const questId = parseInt(this.dataset.id);
+                if (!isNaN(questId)) {
+                    showDeleteQuestModal(questId);
+                }
+            });
+        });
+    }
+    
+    /**
+     * Afficher la modale de confirmation de suppression
+     * 
+     * @param {number} questId ID de la quête à supprimer
+     */
+    function showDeleteQuestModal(questId) {
+        document.getElementById('deleteQuestId').value = questId;
+        new bootstrap.Modal(document.getElementById('deleteQuestModal')).show();
+    }
+    
+    /**
+     * Filtrer les monstres par nom
+     */
+    function filterMonsters() {
+        const searchTerm = monsterSearch.value.toLowerCase();
+        const cards = monsterList.querySelectorAll('.monster-card');
+        
+        cards.forEach(card => {
+            const monsterName = card.querySelector('.card-title').textContent.toLowerCase();
+            const parent = card.parentElement; // Le parent est la colonne
+            
+            if (monsterName.includes(searchTerm)) {
+                parent.style.display = 'block';
+            } else {
+                parent.style.display = 'none';
+            }
+        });
+    }
+    
+    /**
+     * Effacer la recherche
+     */
+    function clearSearch() {
+        monsterSearch.value = '';
+        filterMonsters();
+    }
+    
+    /**
+     * Afficher les résultats de recherche de monstre
+     * 
+     * @param {string} searchTerm Terme de recherche
+     */
+    function showMonsterSearchResults(searchTerm = '') {
+        // Afficher le conteneur des résultats
+        monsterSearchResults.classList.remove('d-none');
+        
+        // Filtrer les monstres
+        const filteredMonsters = monsters.filter(monster => {
+            if (searchTerm === '') return true;
+            return monster.name.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+        
+        // Générer le HTML
+        if (filteredMonsters.length === 0) {
+            monsterSearchResults.innerHTML = '<div class="monster-search-no-results">Aucun monstre trouvé</div>';
+        } else {
+            let html = '';
+            filteredMonsters.forEach(monster => {
+                html += `<div class="monster-search-item" data-id="${monster.id}">${monster.name}</div>`;
+            });
+            monsterSearchResults.innerHTML = html;
+            
+            // Ajouter les écouteurs pour la sélection
+            monsterSearchResults.querySelectorAll('.monster-search-item').forEach(item => {
+                item.addEventListener('click', function() {
+                    const monsterId = parseInt(this.dataset.id);
+                    const monsterName = this.textContent;
+                    
+                    // Mettre à jour les champs
+                    monsterSearchSelect.value = monsterName;
+                    selectedMonsterId.value = monsterId;
+                    
+                    // Masquer les résultats
+                    monsterSearchResults.classList.add('d-none');
+                    
+                    // Réinitialiser la validation
+                    monsterSearchSelect.classList.remove('is-invalid');
+                });
+            });
+        }
+    }
+    
+    /**
+     * Initialiser les formulaires
+     */
+    function initForms() {
+        // Formulaire d'ajout de quête
+        const addQuestForm = document.getElementById('addQuestForm');
+        if (addQuestForm) {
+            addQuestForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                // Vérifier que le monstre est sélectionné
+                if (!selectedMonsterId.value) {
+                    monsterSearchSelect.classList.add('is-invalid');
+                    return;
+                }
+                
+                // Récupérer les données du formulaire
+                const formData = new FormData(this);
+                
+                // Envoyer les données
+                fetch('api.php?action=addQuest', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Masquer la modale
+                        bootstrap.Modal.getInstance(document.getElementById('addQuestModal')).hide();
+                        
+                        // Recharger la page pour mettre à jour le nombre de quêtes
+                        window.location.reload();
+                    } else {
+                        alert('Erreur lors de l\'ajout de la quête: ' + (data.message || 'Erreur inconnue'));
+                    }
+                })
+                .catch(error => {
+                    console.error('Erreur:', error);
+                    alert('Erreur de connexion. Veuillez réessayer.');
+                });
+            });
+        }
+        
+        // Formulaire de suppression de quête
+        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+        if (confirmDeleteBtn) {
+            confirmDeleteBtn.addEventListener('click', function() {
+                const formData = new FormData(document.getElementById('deleteQuestForm'));
+                
+                fetch('api.php?action=deleteQuest', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Masquer la modale de confirmation
+                        bootstrap.Modal.getInstance(document.getElementById('deleteQuestModal')).hide();
+                        
+                        // Mettre à jour la liste des quêtes
+                        const crownType = document.querySelector('input[name="crownFilter"]:checked').value;
+                        fetchQuests(currentMonsterId, crownType);
+                    } else {
+                        alert('Erreur lors de la suppression de la quête: ' + (data.message || 'Erreur inconnue'));
+                    }
+                })
+                .catch(error => {
+                    console.error('Erreur:', error);
+                    alert('Erreur de connexion. Veuillez réessayer.');
+                });
+            });
+        }
+    }
+});
\ No newline at end of file