diff --git a/website/html/index.html b/website/html/index.html
index 5da1c74..296db36 100644
--- a/website/html/index.html
+++ b/website/html/index.html
@@ -3,10 +3,227 @@
   <head>
     <meta charset="UTF-8">
     <title>Icing</title>
-    <link rel="stylesheet" href="style.css"/>
+    <!-- <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>
-    <img src="static/logo.webp" alt="Icing logo">
-    <p>Hello, World</p>
+    <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>
