diff --git a/index.html b/index.html
index 531d0a9f..607f2700 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,107 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-<title>CDPP SPASE resource descriptions</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Your Institute - Homepage</title>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  #header {
+    background-color: #fff;
+    color: rgba(69, 128, 168, 0.663); 
+    padding: 10px 0;
+    text-align: center;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  }
+ 
+  #title {
+    text-align: center;
+    font-size: 1.2em;
+    background-color:  rgb(10, 56, 87);
+    
+    color: white;
+  }
+  #content {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
+  }
+  #navigation {
+    background-color:rgb(24, 99, 134, 0.822); 
+    padding:0 10px ;
+    min-width: 180px;
+    color: #fff;
+    font-size: 1.1em;
+  }
+  #background-image {
+    flex: 1;
+    background-color: rgba(174, 226, 250, 0.822); 
+    /* background-image:url(home.png);  
+    background-size: cover;
+    background-position: bottom; */
+
+  }
+  li{list-style-type: none; }
+  li a{
+    color:#fff;     
+    font-size: 0.9em; 
+    text-decoration: none; 
+  }
+
+  #box{
+      /* background-color: rgba(4, 69, 99, 0.849);  */
+      background-color: transparent; 
+      width: 70%;
+      height: fit-content;
+      display: flex;
+      margin: 20px;
+      padding: 10px;
+      color:rgb(10, 56, 87);
+    }
+
+</style>
 </head>
 <body>
-<h1> SPASE resource descriptions with the CNES naming authority. </h1>
-  <h2> CDPP </h2>
-  <a href="./CNES/NumericalData/index.html">NumericalData <br>
-  <a href="./CNES/Instrument/index.html">Instrument <br>
-  <a href="./CNES/Observatory/index.html">Observatory <br>
-  <a href="./CNES/Person/index.html">Person <br>
-  <a href="./CNES/Repository/index.html">Repository <br>
+  <div id="header">
+    <img src="CNES_LOGO_complet_blanc.png" width="180px" height="auto" alt="CNESLogo">  
+    <img src="CDPP_logo_bleu.png" width="auto" height="70px" alt="CDPPLogo" > 
+  </div>
+
+  <div id="title">
+  <h2 >Les métadonnées du CDPP organisées par ressource SPASE </h2>
+  </div>
+
+
+  <div id="content">
+    <div id="navigation">
+      <h2>Recherche </h2>
+      <ul>
+        <li><a href="#">NumericalData</a></li>
+        <li><a href="#">Instrument</a></li>
+        <li><a href="#">Observatory</a></li>
+        <li><a href="#">Person</a></li>
+        <li><a href="#">Repository</a></li>
+      </ul>
+    </div>
+    <div id="background-image">
+        <div id="box">
+        <p>Les données sont organisées par mission/expériences/jeux de données.
+            <br><br><br><br>
+        </p>
+       </div>
+    </div>
+  </div>
 </body>
 </html>
