diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..8d320d12dbc186e2b1135d1a9c3eedd8c46d7497
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bruteforce MD5 - Dashboard</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f4f4f4;
+        }
+        h1 {
+            text-align: center;
+        }
+        .container {
+            max-width: 600px;
+            margin: auto;
+            padding: 20px;
+            background: white;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+        }
+        label, select, input, button {
+            display: block;
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 10px;
+        }
+        button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .output {
+            background: #eee;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
+        .danger {
+            background-color: #dc3545;
+        }
+        .success {
+            background-color: #28a745;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h1>🔐 Bruteforce MD5</h1>
+
+    <!-- Sélection du nombre de requêtes -->
+    <label for="numRequests">Nombre de requêtes à simuler :</label>
+    <select id="numRequests">
+        <option value="1">1</option>
+        <option value="50">50</option>
+        <option value="500">500</option>
+    </select>
+    <button onclick="sendRequests()">📡 Envoyer</button>
+
+    <!-- Entrée du hash -->
+    <label for="hashInput">Hash MD5 à bruteforcer :</label>
+    <input type="text" id="hashInput" placeholder="Ex: 098f6bcd4621d373cade4e832627b4f6">
+    <button onclick="bruteforce()">🧠 Bruteforce</button>
+
+    <!-- Résultat bruteforce -->
+    <h3>Résultat :</h3>
+    <div class="output" id="bruteforceOutput">🔍 Aucune tentative encore.</div>
+
+    <!-- Compteur de requêtes -->
+    <h3>Statistiques :</h3>
+    <div class="output" id="requestOutput">🔄 Chargement...</div>
+
+    <!-- Nettoyage du cache -->
+    <button onclick="clearCache()" class="danger">🗑️ Nettoyer le cache</button>
+</div>
+
+<script>
+    const API_BASE = "http://localhost:5000"; // À modifier si backend déployé ailleurs
+
+    async function sendRequests() {
+        const num = document.getElementById("numRequests").value;
+        for (let i = 0; i < num; i++) {
+            fetch(`${API_BASE}/request_count`).catch(() => {});
+        }
+        alert(`${num} requêtes simulées !`);
+        updateRequestCount();
+    }
+
+    async function bruteforce() {
+        const hash = document.getElementById("hashInput").value.trim();
+        if (!hash) {
+            alert("Veuillez entrer un hash !");
+            return;
+        }
+
+        const res = await fetch(`${API_BASE}/bruteforce`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ hash })
+        });
+
+        const data = await res.json();
+        const output = document.getElementById("bruteforceOutput");
+        if (data.status === "success") {
+            output.innerText = `✅ Hash : ${hash}\n➡️ Résultat : ${data.data.original}`;
+            output.className = "output success";
+        } else {
+            output.innerText = `❌ ${data.errors.message}`;
+            output.className = "output danger";
+        }
+    }
+
+    async function updateRequestCount() {
+        const res = await fetch(`${API_BASE}/request_count`);
+        const data = await res.json();
+        document.getElementById("requestOutput").innerText =
+            `📊 Total requêtes : ${data.data.request_received_count}`;
+    }
+
+    async function clearCache() {
+        await fetch(`${API_BASE}/clear_cache`, { method: "DELETE" });
+        alert("🧹 Cache supprimé !");
+        document.getElementById("bruteforceOutput").innerText = "🔍 Aucune tentative encore.";
+        updateRequestCount();
+    }
+
+    updateRequestCount(); // mise à jour au chargement
+</script>
+
+</body>
+</html>
