diff --git a/website/html/description.html b/website/html/description.html
new file mode 100644
index 0000000..296db36
--- /dev/null
+++ b/website/html/description.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Icing</title>
+    <!-- <link rel="stylesheet" href="style.css"/> -->
+  <style>
+    /* Theme colors */
+    :root {
+      --primary-color: #000000; /* Green accent color */
+      --background-color: #f5f5f5; /* Light background */
+      --text-color: #333; /* Dark text */
+      --secondary-text-color: #777; /* Secondary text color */
+    }
+
+    /* Base styles */
+    .content {
+      margin: 20px auto;
+      max-width: 900px;
+      padding: 40px;
+      background-color: var(--background-color);
+      color: var(--text-color);
+      border-radius: 8px;
+      font-family: 'Open Sans', Arial, sans-serif;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .title {
+      font-size: 2.5em;
+      color: var(--primary-color);
+      margin-bottom: 30px;
+      text-align: center;
+      animation: fadeInDown 1s ease;
+    }
+
+    .section-title {
+      font-size: 1.8em;
+      color: var(--primary-color);
+      margin-top: 40px;
+      margin-bottom: 20px;
+      position: relative;
+      animation: fadeInLeft 1s ease;
+    }
+
+    .section-title::after {
+      content: '';
+      width: 50px;
+      height: 3px;
+      background-color: var(--primary-color);
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+    }
+
+    p, li {
+      line-height: 1.6;
+      font-size: 1.1em;
+      animation: fadeIn 1s ease;
+    }
+
+    ul {
+      margin-left: 20px;
+      list-style-type: disc;
+    }
+
+    .features ul li {
+      margin-bottom: 10px;
+    }
+
+    .team-list {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .team-list li {
+      margin-bottom: 8px;
+      font-weight: bold;
+      color: var(--text-color);
+    }
+
+    .back-link-container {
+      text-align: center;
+      margin-top: 40px;
+      animation: fadeInUp 1s ease;
+    }
+
+    .back-link {
+      text-decoration: none;
+      color: var(--primary-color);
+      font-weight: bold;
+      border: 2px solid var(--primary-color);
+      padding: 10px 20px;
+      border-radius: 5px;
+      transition: background-color 0.3s, color 0.3s;
+    }
+
+    .back-link:hover {
+      background-color: var(--primary-color);
+      color: #fff;
+    }
+
+      @keyframes fadeInDown {
+        from {
+          opacity: 0;
+          transform: translateY(-20px);
+        } to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes fadeInLeft {
+        from {
+          opacity: 0;
+          transform: translateX(-20px);
+        } to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        } to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        } to {
+          opacity: 1;
+        }
+      }
+
+      /* Responsive Design */
+      @media (max-width: 768px) {
+        .content {
+          padding: 20px;
+        }
+
+        .title {
+          font-size: 2em;
+        }
+
+        .section-title {
+          font-size: 1.5em;
+        }
+
+        p, li {
+          font-size: 1em;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .content {
+          padding: 15px;
+        }
+
+        .title {
+          font-size: 1.8em;
+        }
+
+        .section-title {
+          font-size: 1.2em;
+        }
+
+        p, li {
+          font-size: 0.9em;
+        }
+      }
+
+      a {
+        color: var(--primary-color);
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="description" class="content">
+      <h1 class="title">Project Description</h1>
+
+      <div class="project-overview">
+        <h2 class="section-title">What is Icing?</h2>
+        <p>
+        Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
+        </p>
+      </div>
+
+      <div class="features">
+        <h2 class="section-title">Key Features</h2>
+        <ul>
+          <li><strong>End-to-End Encryption:</strong> Secure your calls with robust encryption protocols.</li>
+          <li><strong>Transparent:</strong> If your peer doesn't use Icing, the call remains completely normal.</li>
+          <li><strong>Analogic-based:</strong> An open-source, exportable, protocol that <strong>works without internet.</strong></li>
+        </ul>
+      </div>
+
+      <div class="how-it-works">
+        <h2 class="section-title">How It Works</h2>
+        <p>
+        Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
+        </p>
+        <p>
+        During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
+        </p>
+      </div>
+
+      <div class="team">
+        <h2 class="section-title">Our Team</h2>
+        <p>
+        We are a team of five dedicated individuals working on this solution:
+        </p>
+        <ul class="team-list">
+          <li><a href="https://github.com/AlexisDanlos/" target="_blank">Alexis Danlos</a></li>
+          <li><a href="https://github.com/AustralEpitech/" target="_blank">AustralEpitech</a></li>
+          <li><a href="https://github.com/Bartoszkk/" target="_blank">Bartoszkk</a></li>
+          <li><a href="https://github.com/FlorianGRIFFON/" target="_blank">Florian GRIFFON</a></li>
+          <li><a href="https://github.com/STCB/" target="_blank">STCB</a></li>
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/website/html/index.html b/website/html/index.html
index 296db36..e1ec852 100644
--- a/website/html/index.html
+++ b/website/html/index.html
@@ -1,229 +1,31 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
-    <title>Icing</title>
-    <!-- <link rel="stylesheet" href="style.css"/> -->
-  <style>
-    /* Theme colors */
-    :root {
-      --primary-color: #000000; /* Green accent color */
-      --background-color: #f5f5f5; /* Light background */
-      --text-color: #333; /* Dark text */
-      --secondary-text-color: #777; /* Secondary text color */
-    }
-
-    /* Base styles */
-    .content {
-      margin: 20px auto;
-      max-width: 900px;
-      padding: 40px;
-      background-color: var(--background-color);
-      color: var(--text-color);
-      border-radius: 8px;
-      font-family: 'Open Sans', Arial, sans-serif;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .title {
-      font-size: 2.5em;
-      color: var(--primary-color);
-      margin-bottom: 30px;
-      text-align: center;
-      animation: fadeInDown 1s ease;
-    }
-
-    .section-title {
-      font-size: 1.8em;
-      color: var(--primary-color);
-      margin-top: 40px;
-      margin-bottom: 20px;
-      position: relative;
-      animation: fadeInLeft 1s ease;
-    }
-
-    .section-title::after {
-      content: '';
-      width: 50px;
-      height: 3px;
-      background-color: var(--primary-color);
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-    }
-
-    p, li {
-      line-height: 1.6;
-      font-size: 1.1em;
-      animation: fadeIn 1s ease;
-    }
-
-    ul {
-      margin-left: 20px;
-      list-style-type: disc;
-    }
-
-    .features ul li {
-      margin-bottom: 10px;
-    }
-
-    .team-list {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .team-list li {
-      margin-bottom: 8px;
-      font-weight: bold;
-      color: var(--text-color);
-    }
-
-    .back-link-container {
-      text-align: center;
-      margin-top: 40px;
-      animation: fadeInUp 1s ease;
-    }
-
-    .back-link {
-      text-decoration: none;
-      color: var(--primary-color);
-      font-weight: bold;
-      border: 2px solid var(--primary-color);
-      padding: 10px 20px;
-      border-radius: 5px;
-      transition: background-color 0.3s, color 0.3s;
-    }
-
-    .back-link:hover {
-      background-color: var(--primary-color);
-      color: #fff;
-    }
-
-      @keyframes fadeInDown {
-        from {
-          opacity: 0;
-          transform: translateY(-20px);
-        } to {
-          opacity: 1;
-          transform: translateY(0);
-        }
+    <style>
+      .centered {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        font-size: 3em;
+        margin: 0;
       }
 
-      @keyframes fadeInLeft {
-        from {
-          opacity: 0;
-          transform: translateX(-20px);
-        } to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      @keyframes fadeInUp {
-        from {
-          opacity: 0;
-          transform: translateY(20px);
-        } to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        } to {
-          opacity: 1;
-        }
-      }
-
-      /* Responsive Design */
-      @media (max-width: 768px) {
-        .content {
-          padding: 20px;
-        }
-
-        .title {
-          font-size: 2em;
-        }
-
-        .section-title {
-          font-size: 1.5em;
-        }
-
-        p, li {
-          font-size: 1em;
-        }
-      }
-
-      @media (max-width: 480px) {
-        .content {
-          padding: 15px;
-        }
-
-        .title {
-          font-size: 1.8em;
-        }
-
-        .section-title {
-          font-size: 1.2em;
-        }
-
-        p, li {
-          font-size: 0.9em;
-        }
-      }
-
-      a {
-        color: var(--primary-color);
+      .no-underline {
         text-decoration: none;
+        color: inherit;
+      }
+
+      body {
+        margin: 0;
       }
     </style>
   </head>
   <body>
-    <div id="description" class="content">
-      <h1 class="title">Project Description</h1>
-
-      <div class="project-overview">
-        <h2 class="section-title">What is Icing?</h2>
-        <p>
-        Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
-        </p>
-      </div>
-
-      <div class="features">
-        <h2 class="section-title">Key Features</h2>
-        <ul>
-          <li><strong>End-to-End Encryption:</strong> Secure your calls with robust encryption protocols.</li>
-          <li><strong>Transparent:</strong> If your peer doesn't use Icing, the call remains completely normal.</li>
-          <li><strong>Analogic-based:</strong> An open-source, exportable, protocol that <strong>works without internet.</strong></li>
-        </ul>
-      </div>
-
-      <div class="how-it-works">
-        <h2 class="section-title">How It Works</h2>
-        <p>
-        Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
-        </p>
-        <p>
-        During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
-        </p>
-      </div>
-
-      <div class="team">
-        <h2 class="section-title">Our Team</h2>
-        <p>
-        We are a team of five dedicated individuals working on this solution:
-        </p>
-        <ul class="team-list">
-          <li><a href="https://github.com/AlexisDanlos/" target="_blank">Alexis Danlos</a></li>
-          <li><a href="https://github.com/AustralEpitech/" target="_blank">AustralEpitech</a></li>
-          <li><a href="https://github.com/Bartoszkk/" target="_blank">Bartoszkk</a></li>
-          <li><a href="https://github.com/FlorianGRIFFON/" target="_blank">Florian GRIFFON</a></li>
-          <li><a href="https://github.com/STCB/" target="_blank">STCB</a></li>
-        </ul>
-      </div>
-    </div>
+  <div id="home">
+    <h1 class="centered">
+      <router-link to="/description" class="no-underline">ICING</router-link>
+    </h1>
+  </div>
   </body>
 </html>
