diff --git a/frontend/css/style.css b/frontend/css/style.css
new file mode 100644
index 0000000..8d799b4
--- /dev/null
+++ b/frontend/css/style.css
@@ -0,0 +1,70 @@
+@charset "UTF-8";
+body {
+  font-family: "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: #f2f2f2;
+  color: #333;
+}
+
+header {
+  text-align: center;
+  padding: 20px;
+  background-color: #333;
+  color: #fff;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Ajout d'une ombre sous le header */
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.5em;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 20px;
+}
+
+.vanilla {
+  padding: 1em;
+  margin: 10px;
+  width: 300px;
+  transition: transform 1.5s ease; /* Ajout de l'animation pour le grossissement */
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.2em;
+  text-align: center;
+  padding-bottom: 10px; /* Ajout du padding-bottom aux h2 */
+}
+
+button {
+  padding: 15px 20px;
+  font-size: 1em;
+  background-color: #333;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  margin: 10px 0;
+  width: 100%;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Ajout d'une ombre sur les boutons */
+}
+button:hover {
+  background-color: #555;
+  transform: scale(1.1); /* Ajout du grossissement au survol */
+  transition: transform 1s ease; /* Ajout de l'animation pour le rétrécissement */
+}
+
+.menu-item {
+  margin-bottom: 15px;
+  font-size: 1.2em;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/frontend/css/style.css.map b/frontend/css/style.css.map
new file mode 100644
index 0000000..2ed2b5a
--- /dev/null
+++ b/frontend/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":";AAQA;EACE,aAPc;EAQd;EACA;EACA;EACA;EACA,kBAXmB;EAYnB,OAfQ;;;AAkBV;EACE;EACA;EACA,kBAjBmB;EAkBnB,OArBQ;EAsBR;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBArDmB;EAsDnB,OAzDQ;EA0DR;EACA;EACA;EACA;EACA;;AACA;EACE,kBA5DiB;EA6DjB;EACA;;;AAIJ;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..320e264
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Page Basique</title>
+</head>
+
+<body>
+    <header>
+        <h1>Interface Administrateur</h1>
+    </header>
+    <main>
+        <div id="liste" class="vanilla">
+            <h2>Générer items</h2>
+            <h4>F12 = Console pour voir les items du projet.</h4>
+            <button id="armorsBtn">Armures</button>
+            <button id="weaponsBtn">Armes</button>
+            <button id="petsBtn">Animaux</button>
+            <button id="objectsBtn">Objets</button>
+            <button id="potionsBtn">Potions</button>
+        </div>
+
+        <!-- Ajouter un nouvel item -->
+        <div id="addItem" class="vanilla">
+            <h2>Entrer l'ID de l'item souhaité</h2>
+            <input width="22em" type="text" id="itemIdInput" placeholder="Entrez l'ID proche de l'item"><!--Entrez l'ID proche de l'item temporaire ou le contenu JSON de l'item-->
+            <button id="addItemBtn">Confirmer</button>
+        </div>
+    </main>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Fonction pour traiter le clic sur les boutons de catégorie
+            function handleCategoryButtonClick(categoryId) {
+                const apiUrl = `https://api.github.com/repos/DraftBot-A-Discord-Adventure/DraftBot/contents/resources/text/${categoryId}`;
+
+                fetch(apiUrl)
+                    .then(response => response.json())
+                    .then(data => {
+                        let temporaryId = 1; // ID temporaire initial
+                        data.forEach(file => {
+                            const fileName = file.name;
+                            const filePath = file.path;
+
+                            // Vous pouvez maintenant utiliser le nom du fichier et le chemin pour récupérer le contenu du fichier
+                            fetch(`https://raw.githubusercontent.com/DraftBot-A-Discord-Adventure/DraftBot/master/${filePath}`)
+                                .then(response => response.text())
+                                .then(fileContent => {
+                                    // Utilisez fileContent comme vous le souhaitez (par exemple, obtenir le nom de l'article)
+                                    const itemName = getItemName(categoryId, fileContent);
+
+                                    // Affichez l'ID temporaire et le nom de l'article dans la console
+                                    console.log(`ID temporaire ${temporaryId}: ${itemName}`);
+
+                                    temporaryId++; // Incrémentation de l'ID temporaire pour le prochain item
+                                })
+                                .catch(error => console.error(`Erreur lors de la récupération du fichier (${fileName}) :`, error));
+                        });
+                    })
+                    .catch(error => console.error('Erreur lors de la récupération de la liste des fichiers :', error));
+            }
+
+            // Fonction pour obtenir le nom de l'article en fonction de la structure du fichier
+            function getItemName(categoryId, fileContent) {
+                try {
+                    if (categoryId === 'pets') {
+                        const petData = JSON.parse(fileContent);
+                        const maleName = petData.translations?.fr.maleName || '';
+                        const femaleName = petData.translations?.fr.femaleName || '';
+                        return `Male: ${maleName}, Female: ${femaleName}`;
+                    } else {
+                        const itemData = JSON.parse(fileContent);
+                        const itemName = itemData.translations?.fr || itemData.translations?.en || '';
+                        return itemName;
+                    }
+                } catch (error) {
+                    console.error('Erreur lors de l\'analyse du fichier JSON :', error);
+                    return '';
+                }
+            }
+
+            // Fonction pour traiter le clic sur le bouton "Ajouter"
+            function handleAddItemClick() {
+                const itemIdInput = document.getElementById('itemIdInput');
+                const itemIdOrJson = itemIdInput.value.trim();
+
+                if (itemIdOrJson) {
+                    // Envoyer les données au backend (remplacez par l'URL réelle de votre backend)
+                    const apiUrl = 'https://votre-backend.com/api/addItem'; // Remplacez par votre URL
+                    const requestData = {
+                        userId: 'identifiant_du_utilisateur', // Remplacez par l'identifiant de l'utilisateur
+                        itemData: itemIdOrJson,
+                    };
+
+                    fetch(apiUrl, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(requestData),
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            console.log('Réponse du serveur :', data);
+                            // Vous pouvez traiter la réponse du serveur ici si nécessaire
+                        })
+                        .catch(error => console.error('Erreur lors de la communication avec le serveur :', error));
+                } else {
+                    console.log('Veuillez entrer l\'ID temporaire ou le contenu JSON de l\'item.');
+                }
+            }
+
+            // Associer la fonction à chaque bouton de catégorie
+            document.getElementById('armorsBtn').addEventListener('click', () => handleCategoryButtonClick('armors'));
+            document.getElementById('weaponsBtn').addEventListener('click', () => handleCategoryButtonClick('weapons'));
+            document.getElementById('petsBtn').addEventListener('click', () => handleCategoryButtonClick('pets'));
+            document.getElementById('objectsBtn').addEventListener('click', () => handleCategoryButtonClick('objects'));
+            document.getElementById('potionsBtn').addEventListener('click', () => handleCategoryButtonClick('potions'));
+
+            // Associer la fonction à chaque bouton de don
+            const giveButtons = document.querySelectorAll('.giveCategory');
+            giveButtons.forEach(button => {
+                button.addEventListener('click', () => handleCategoryButtonClick(button.dataset.folder));
+            });
+
+            // Associer la fonction au clic sur le bouton "Ajouter"
+            document.getElementById('addItemBtn').addEventListener('click', handleAddItemClick);
+        });
+    </script>
+</body>
+
+</html>
diff --git a/frontend/sass/style.scss b/frontend/sass/style.scss
new file mode 100644
index 0000000..3e7575a
--- /dev/null
+++ b/frontend/sass/style.scss
@@ -0,0 +1,93 @@
+$color_1: #333;
+$color_2: #fff;
+$font-family_1: 'Arial', sans-serif;
+$background-color_1: #f2f2f2;
+$background-color_2: #333;
+$background-color_3: #555;
+$shadow-color: rgba(0, 0, 0, 0.3);
+
+body {
+  font-family: $font-family_1;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: $background-color_1;
+  color: $color_1;
+}
+
+header {
+  text-align: center;
+  padding: 20px;
+  background-color: $background-color_2;
+  color: $color_2;
+  box-shadow: 0px 2px 5px $shadow-color; /* Ajout d'une ombre sous le header */
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.5em;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 20px;
+}
+
+.vanilla {
+  padding: 1em;
+  margin: 10px;
+  width: 300px;
+  transition: transform 1.5s ease; /* Ajout de l'animation pour le grossissement */
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.2em;
+  text-align: center;
+  padding-bottom: 10px; /* Ajout du padding-bottom aux h2 */
+}
+
+button {
+  padding: 15px 20px;
+  font-size: 1em;
+  background-color: $background-color_2;
+  color: $color_2;
+  border: none;
+  cursor: pointer;
+  margin: 10px 0;
+  width: 100%;
+  box-shadow: 0px 2px 5px $shadow-color; /* Ajout d'une ombre sur les boutons */
+  &:hover {
+    background-color: $background-color_3;
+    transform: scale(1.1); /* Ajout du grossissement au survol */
+    transition: transform 1s ease; /* Ajout de l'animation pour le rétrécissement */
+  }
+}
+
+.menu-item {
+  margin-bottom: 15px;
+  font-size: 1.2em;
+}
+
+
+
+/* Style pour l'input et le bouton "Ajouter un nouvel item" */
+#addItem {
+  input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  button {
+    background-color: $background-color_2;
+    &:hover {
+      background-color: $background-color_3;
+    }
+  }
+}
