diff --git a/WEB/Config/Config.php b/WEB/Config/Config.php
index 5a2ef453..1bd68050 100644
--- a/WEB/Config/Config.php
+++ b/WEB/Config/Config.php
@@ -23,9 +23,5 @@ $vues['signUp'] = 'View/src/pages/LogSign/SignUp.php';
 $vues['enigme'] = 'View/src/pages/Enigme/palindrome.html';
 
 //Error
-$vues['erreurSignUp'] = 'View/Error/ErreurSignUp.php';
-$vues['erreur'] = 'View/Error/Erreur.php';
-$vues['erreurBd'] = 'View/Error/ErreurBd.php';
-$vues['erreurLoginEmail'] = 'View/Error/ErreurLoginEmail.php';
-$vues['erreurLoginMdp'] = 'View/Error/ErreurLoginMdp.php';
-$vues['erreur404'] = 'View/Error/Erreur404.php';
+$vues['erreur'] = 'View/src/pages/Erreur.php';
+$error = "";
diff --git a/WEB/Config/Validation.php b/WEB/Config/Validation.php
index 16477f87..45cb01cd 100644
--- a/WEB/Config/Validation.php
+++ b/WEB/Config/Validation.php
@@ -30,10 +30,11 @@ class Validation
         return true;
     }
     public function ValidateUsername(string $username) : bool{
-        if(!filter_var($username,FILTER_VALIDATE_REGEXP,array("options" => array( "regexp" => "^[^&=_'\-+;<>.]{1,18}$" ))))
-        {
-            return false;
-        }
+      
+        // if(!filter_var($username,FILTER_VALIDATE_REGEXP,array("options" => array( "regexp" => "^[^&=_'\-+;<>.]{1,18}$" ))))
+        // {
+        //     return false;
+        // }
         return true;
     }
     public function ValidatePassword(string $password) : bool{
diff --git a/WEB/Controller/Controller.php b/WEB/Controller/Controller.php
index 4c58ff95..39139345 100644
--- a/WEB/Controller/Controller.php
+++ b/WEB/Controller/Controller.php
@@ -1,4 +1,5 @@
 <?php
+use Vtiful\Kernel\Excel;
 
 class Controller
 {
@@ -11,7 +12,7 @@ class Controller
         $this->con=$con;
         session_start();
         try{
-            global $rep, $vues;
+            global $rep, $vues, $error;
             $action=$_REQUEST['action'];
             switch($action) {
                 case NULL:
@@ -41,96 +42,111 @@ class Controller
             }
         } catch (PDOException $e)
         {
-            require ($rep.$vues['erreurBd']);
+            $error = $e->getMessage();
+            require ($rep.$vues['erreur']);
         }
     }
 
     private function signUp() {
-        global $rep, $vues, $sel;
+        global $rep, $vues, $sel, $error;
         try {
             $gateway = new JoueurGateway($this->con);
             $validation = new Validation();
             if (! $validation->ValidateEmail($_REQUEST['email'])) {
+                $error = "Email invalides.";
                 throw (new Exception("Email non valide"));
             }
             if(! $validation->ValidateUsername($_REQUEST['username'])){
+                $error = "Nom d'utilisateur invalides. Il ne doit pas contenir de caractère spéciaux.";
                 throw(new Exception("Pseudo non valide"));
             }
             if(! $validation->ValidatePassword($_REQUEST['password'])){
-                throw(new InvalidMdpException("Mot de passe non valide"));
+                $error = "Mots de passe invalides. Il ne doit pas dépasser 100 caractères.";
+                throw(new Exception("Mot de passe non valide"));
             }
-            $password = password_hash($_REQUEST['password']+$selNoHash, PASSWORD_DEFAULT);
+            $j = $gateway->getJoueurByEmail($_REQUEST['email']);
+            if ($j != null) {
+                $error = "Email déjà utilisé.";
+                throw (new Exception("Email déjà utilisé"));
+            }
+            $password = password_hash($_REQUEST['password'], PASSWORD_DEFAULT);
             $joueur = new Joueur($_REQUEST['email'], $_REQUEST['username'], $password);
             $gateway->insert($joueur);
             $_SESSION['connected'] = 'true';
             require ($rep.$vues['main']);
         }catch (Exception $e){
-            require($rep.$vues['erreurSignUp']);
+            require($rep.$vues['erreur']);
         }
     }
     private function login(){
-        global $rep, $vues, $sel;
+        global $rep, $vues, $sel, $error;
         try {
             $gateway = new JoueurGateway($this->con);
             $joueur = $gateway->getJoueurByEmail($_REQUEST['email']);
             if ($joueur->getEmail() == null){
-                throw new JoueurNotFoundException("Joueur introuvable");
+                $error = "Joueur non trouvé.";
+                throw new Exception("Joueur introuvable");
             }
             $mdp = $gateway->getMdpByEmail($_REQUEST['email']);
-            if (password_verify($mdp, $_REQUEST['password']+$sel)){
-                throw new InvalidMdpException("Mot de passe invalide");
+            if (password_verify($mdp, $_REQUEST['password'])){
+                $error = "Mot de passe incorrect.";
+                throw new Exception("Mot de passe invalide");
             }
             $_SESSION['connected'] = 'true';
             require ($rep.$vues['main']);
-        }catch (JoueurNotFoundException $e){
-            require($rep.$vues['erreurLoginEmail']);
-        }catch (InvalidMdpException $m) {
-            require($rep . $vues['erreurLoginMdp']);
+        }catch (Exception $e){
+            require($rep.$vues['erreur']);
         }
     }
+    // require error page with given message
 
     private function goToPresentation() {
-        global $rep, $vues;
+        global $rep, $vues, $error;
         try {
             require ($rep.$vues['presenation']);
         }catch (Exception $e){
-            require($rep.$vues['erreur404']);
+            $error = "Erreur Inconnue";
+            require($rep.$vues['erreur']);
         }
     }
 
     private function goToHome() {
-        global $rep, $vues;
+        global $rep, $vues, $error;
         try {
             require ($rep.$vues['main']);
         }catch (Exception $e){
-            require($rep.$vues['erreur404']);
+            $error = "404";
+            require($rep.$vues['erreur']);
         }
     }
 
     private function goToLogin() {
-        global $rep, $vues;
+        global $rep, $vues, $error;
         try {
             require ($rep.$vues['login']);
         }catch (Exception $e){
-            require($rep.$vues['erreur404']);
+            $error = "404";
+            require($rep.$vues['erreur']);
         }
     }
 
     private function goToSignUp() {
-        global $rep, $vues;
+        global $rep, $vues, $error;
         try {
             require ($rep.$vues['signUp']);
         }catch (Exception $e){
-            require($rep.$vues['erreur404']);
+            $error = "404";
+            require($rep.$vues['erreur']);
         }
     }
 
     private function goToEnigme() {
-        global $rep, $vues;
+        global $rep, $vues, $error;
         try {
             require ($rep.$vues['enigme']);
         }catch (Exception $e){
-            require($rep.$vues['erreur404']);
+            $error = "404";
+            require($rep.$vues['erreur']);
         }
     }
 }
\ No newline at end of file
diff --git a/WEB/Controller/InvalidMdpException.php b/WEB/Controller/InvalidMdpException.php
deleted file mode 100644
index 6b8c9097..00000000
--- a/WEB/Controller/InvalidMdpException.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-class InvalidMdpException extends Exception {
-    public function errorMessage() {
-        //error message
-        $errorMsg = 'Error on line '.$this->getLine().' in '.$this->getFile()
-            .': <b>'.$this->getMessage().'</b> Mdp invalide';
-        return $errorMsg;
-    }
-}
\ No newline at end of file
diff --git a/WEB/Controller/JoueurGateway.php b/WEB/Controller/JoueurGateway.php
index f6737e72..0f867088 100644
--- a/WEB/Controller/JoueurGateway.php
+++ b/WEB/Controller/JoueurGateway.php
@@ -35,6 +35,7 @@ class JoueurGateway
     }
 
     public function getJoueurByEmail(string $email) : Joueur{
+        global $error;
         $query = "SELECT * FROM Joueur WHERE email=:email";
         $this->con->executeQuery($query,	array(
             ':email'	=>	array($email,PDO::PARAM_STR)
@@ -46,12 +47,14 @@ class JoueurGateway
             $mdp=$row['mdp'];
         }
         if ($results == null){
-            throw new JoueurNotFoundException("Joueur Introuvable");
+            $error = "Joueur non trouvé.";
+            throw new Exception("Joueur Introuvable");
         }
         return new Joueur($email, $pseudo, $mdp);
     }
 
     public function getMdpByEmail(string $email) : string{
+        global $error;
         $query = "SELECT mdp FROM Joueur WHERE email=:email";
         $this->con->executeQuery($query,	array(
             ':email'	=>	array($email,PDO::PARAM_STR)
@@ -61,7 +64,8 @@ class JoueurGateway
             $mdp=$row['mdp'];
         }
         if ($results == null){
-            throw new InvalidMdpException("Mots de passe Incorrect");
+            $error = "Mot de passe non trouvé.";
+            throw new Exception("Mots de passe Incorrect");
         }
         return $mdp;
     }
diff --git a/WEB/Controller/JoueurNotFoundException.php b/WEB/Controller/JoueurNotFoundException.php
deleted file mode 100644
index 0b604c42..00000000
--- a/WEB/Controller/JoueurNotFoundException.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-class JoueurNotFoundException extends Exception {
-    public function errorMessage() {
-        //error message
-        $errorMsg = 'Error on line '.$this->getLine().' in '.$this->getFile()
-            .': <b>'.$this->getMessage().'</b> Joueur not found';
-        return $errorMsg;
-    }
-}
\ No newline at end of file
diff --git a/WEB/View/Error/Erreur.php b/WEB/View/Error/Erreur.php
deleted file mode 100644
index e11be05c..00000000
--- a/WEB/View/Error/Erreur.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p>Erreur inatendu</p>
-<?php
-
-?>
-</body>
-</html>
\ No newline at end of file
diff --git a/WEB/View/Error/Erreur404.php b/WEB/View/Error/Erreur404.php
deleted file mode 100644
index 84b9c616..00000000
--- a/WEB/View/Error/Erreur404.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p>Page introuvable</p>
-<?php
-
-?>
-</body>
-</html>
diff --git a/WEB/View/Error/ErreurBd.php b/WEB/View/Error/ErreurBd.php
deleted file mode 100644
index 8c80510e..00000000
--- a/WEB/View/Error/ErreurBd.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p>Erreur avec la base de donnée</p>
-<?php
-
-?>
-</body>
-</html>
diff --git a/WEB/View/Error/ErreurLoginEmail.php b/WEB/View/Error/ErreurLoginEmail.php
deleted file mode 100644
index f939830c..00000000
--- a/WEB/View/Error/ErreurLoginEmail.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p>Joueur introuvable</p>
-<?php
-
-?>
-</body>
-</html>
-
diff --git a/WEB/View/Error/ErreurLoginMdp.php b/WEB/View/Error/ErreurLoginMdp.php
deleted file mode 100644
index 4db8f12b..00000000
--- a/WEB/View/Error/ErreurLoginMdp.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p>Mot de passe invalide</p>
-<?php
-
-?>
-</body>
-</html>
-
diff --git a/WEB/View/Error/ErreurSignUp.php b/WEB/View/Error/ErreurSignUp.php
deleted file mode 100644
index e27b2689..00000000
--- a/WEB/View/Error/ErreurSignUp.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<html>
-<body>
-<h1>ERREUR</h1>
-<p></p>
-<?php
-
-?>
-</body>
-</html>
-
diff --git a/WEB/View/src/CSS/Enigmev2.css b/WEB/View/src/CSS/Enigmev2.css
index 83e4f2d3..14b2a092 100644
--- a/WEB/View/src/CSS/Enigmev2.css
+++ b/WEB/View/src/CSS/Enigmev2.css
@@ -5,7 +5,6 @@
 /*Default CSS*/
 
 
-
 /*Ace CSS */
 
 .ace{
diff --git a/WEB/View/src/CSS/Erreur.css b/WEB/View/src/CSS/Erreur.css
new file mode 100644
index 00000000..0af34f7e
--- /dev/null
+++ b/WEB/View/src/CSS/Erreur.css
@@ -0,0 +1,125 @@
+@import 'https://fonts.googleapis.com/css?family=Inconsolata';
+
+html {
+  min-height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  height: 100%;
+  background-color: #000000;
+  background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'Inconsolata', Helvetica, sans-serif;
+  font-size: 1.5rem;
+  color: rgba(128, 255, 128, 0.8);
+  text-shadow:
+      0 0 1ex rgba(51, 255, 51, 1),
+      0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.noise {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+  z-index: -1;
+  opacity: .02;
+}
+
+.overlay {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background:
+      repeating-linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 0.3) 50%,
+      rgba(0, 0, 0, 0) 100%);
+  background-size: auto 4px;
+  z-index: 1;
+}
+
+.overlay::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+      0deg,
+      transparent 0%,
+      rgba(32, 128, 32, 0.2) 2%,
+      rgba(32, 128, 32, 0.8) 3%,
+      rgba(32, 128, 32, 0.2) 3%,
+      transparent 100%);
+  background-repeat: no-repeat;
+  animation: scan 7.5s linear 0s infinite;
+}
+
+@keyframes scan {
+  0%        { background-position: 0 -100vh; }
+  35%, 100% { background-position: 0 100vh; }
+}
+
+.terminal {
+  box-sizing: inherit;
+  position: absolute;
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+  padding: 4rem;
+  text-transform: uppercase;
+}
+
+.output {
+  color: rgba(128, 255, 128, 0.8);
+  text-shadow:
+      0 0 1px rgba(51, 255, 51, 0.4),
+      0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.output::before {
+  content: "> ";
+}
+
+/*
+.input {
+  color: rgba(192, 255, 192, 0.8);
+  text-shadow:
+      0 0 1px rgba(51, 255, 51, 0.4),
+      0 0 2px rgba(255, 255, 255, 0.8);
+}
+
+.input::before {
+  content: "$ ";
+}
+*/
+
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+a::before {
+  content: "[";
+}
+
+a::after {
+  content: "]";
+}
+
+.errorcode {
+  color: white;
+}
\ No newline at end of file
diff --git a/WEB/View/src/pages/Enigme/Enigmebootstrap.html b/WEB/View/src/pages/Enigme/Enigmebootstrap.html
index e8558723..2728cdeb 100644
--- a/WEB/View/src/pages/Enigme/Enigmebootstrap.html
+++ b/WEB/View/src/pages/Enigme/Enigmebootstrap.html
@@ -22,43 +22,53 @@
         integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
         crossorigin="anonymous"></script>
     </head>
-    <body style="background-color: black;background-image: none;">
+    <body style="background-color: #050e15;background-image: none;">
         <div class="container-fluid">
             <div class="row">
-                <div class="col-3">
-                    <div class="retour">
-                        <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
+                <div class="col-3" style="height: auto; min-height: 100vh;">
+                    <div class="row">
+                        <div class="col-2 text-center pt-3">
+                            <a id="home" href="../Home.html" >
+                                <svg xmlns="http://www.w3.org/2000/svg" style="color: white;" width="32" height="32" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
+                                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
+                                    <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
+                                </svg>
+                            </a>
+                        </div>
+                        <div class="col-10 pt-1">
+                                <h1 class="display-5" style="letter-spacing: 0.1rem;""> <!--Mettre responsive si moins de 1500px-->
+                                    Palindrome
+                                </h1><br>
+                        </div>
                     </div>
-                    <div class="sign">
-                        <h1>
-                            <span class="fast-flicker">p</span>
-                            <span>alin</span>
-                            <span class="flicker">d</span>
-                            <span>rome</span>
-                        </h1>
-                    </div><br>
                     <div>
-                        <h2>Consigne</h2><br>
-                            <p class="enonce">
-                            Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon. 
-                            </p><br><br>
-                        <h2>Rappel</h2><br>
-                        <p class="rappel">Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.</p><br><br>
-                        <h2>Exemple</h2><br>
-                        <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-                        <p>[1,0,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;True</p>
-                        <p>[1,1,9,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;False</p><br><br>
-                        <h2>Aide</h2><br>
-                        <p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1])  affiche : ea.</p>
+                        <section class="row mt-3 ">
+                            <h2>Consigne</h2><br>
+                            <p class="enonce">Écrire une fonction estPalindrome qui prend en argument un entier et qui renvoie True si c’est un palindrome et False sinon.</p><br><br>
+                        </section>
+                        <section class="row mt-3">
+                            <h2>Rappel</h2><br>
+                            <p class="rappel">Un palindrome est un nombre qui peut se lire dans les deux sens. Par exemple 111.</p><br><br>
+                        </section>
+                        <section class="row mt-3">
+                            <h2>Exemple</h2><br>
+                            <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
+                            <p>[1,0,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;True</p>
+                            <p>[1,1,9,1]&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;False</p><br><br>
+                        </section>
+                        <section class="row mt-3">
+                            <h2>Aide</h2><br>
+                            <p>En python l’instruction [::-1] permet d’inverse une chaine de caractère. Par exemple print("ae"[::-1])  affiche : ea.</p>
+                        </section>
                     </div>
                 </div>
-                <div class="col-5">
+                <div class="col-5 h-auto py-3">
                     <div class='ace' id='editor'>def estPalindrome(var):
     return var == var[::-1]
 print(estPalindrome("abba"))
                     </div>
                 </div>
-                <div class="col-4">
+                <div class="col-4 py-3">
                     <div class='compiler_class'>
                         <textarea id='console' readonly cols="100" rows="30"></textarea>
                     </div>
diff --git a/WEB/View/src/pages/Erreur.php b/WEB/View/src/pages/Erreur.php
new file mode 100644
index 00000000..169e00e5
--- /dev/null
+++ b/WEB/View/src/pages/Erreur.php
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Scripted</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link rel="stylesheet" href="./View/src/CSS/Erreur.css" />
+
+  </head>
+<body>
+<div class="noise"></div>
+<div class="overlay"></div>
+<div class="terminal">
+<?php
+if ($error == 400){
+  echo '<h1>Error <span class="errorcode">404</span></h1>';
+  echo '<p class="output">La page que vous recherchez a peut-être été supprimée, a changé de nom ou est temporairement indisponible.</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Bonne Chance Utilisateur.</p>';
+}
+elseif ($error == ""){
+  echo '<h1>Error <span class="errorcode">000</span></h1>';
+  echo '<p class="output">Erreur inconnue</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Bonne Chance Utilisateur.</p>';
+}
+
+else{
+  echo '<h1>Error <span class="errorcode">000</span></h1>';
+  echo '<p class="output">'.$error.'</p>';
+  echo '<p class="output">Veuillez essayer de <a href="javascript:history.back()">retourner en arrière</a> ou de <a href="index.php?action=goToHome">retourné à la page d\'accueil</a>.</p>';
+  echo '<p class="output">Bonne Chance Utilisateur.</p>'; 
+}
+?>
+</div>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 46bc4e52..4603894c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "bootstrap": "^5.2.2"
+        "bootstrap": "^5.2.2",
+        "bootstrap-icons": "^1.10.2"
       }
     },
     "node_modules/@popperjs/core": {
@@ -35,6 +36,11 @@
       "peerDependencies": {
         "@popperjs/core": "^2.11.6"
       }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
+      "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
     }
   },
   "dependencies": {
@@ -49,6 +55,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
       "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==",
       "requires": {}
+    },
+    "bootstrap-icons": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
+      "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
     }
   }
 }
diff --git a/package.json b/package.json
index bfafe910..0091e3c1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "bootstrap": "^5.2.2"
+    "bootstrap": "^5.2.2",
+    "bootstrap-icons": "^1.10.2"
   }
 }