diff --git a/index.html b/index.html
index 3952c25..e64241a 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,26 @@
 	<link rel="shortcut icon" type="image/x-icon" href="images/logo.jpg" />
 </head>
 <body>
-    <header class="banniere">
-        <img src="images/logo.jpg" alt="logo de l'association" height="70" width="70"/>
-        <h1>Collectif Karäfon</h1>      
+    <header>
+        <div class="titre">
+            <img src="images/logo.jpg" alt="logo de l'association" height="70" width="70"/>
+            <h1 id="collectif_karafon">Collectif Karäfon</h1> 
+            <p id="festival_itinerant">Festival itinérant</p>            
+        </div>
+        <div class="buttons">
+        <input name="button" id="boutonAccueil" onclick="fonctionAccueil()" value="Accueil" type="button" > <br/>
+        <input name="button" id="boutonPrésentation" onclick="fonctionPrésentation()" value="Présentation" type="button" > <br/>
+        <input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="Historique" type="button" > <br/>
+        <input name="button" id="boutonProchainsEvenements" onclick="fonctionProchainsEvenements()" value="Prochaine événements" type="button" > <br/>
+        <input name="button" id="boutonContact" onclick="fonctioncontact()" value="Contact" type="button" > <br/>            
+        </div>
+
+
     </header>
     <div class="centrer">
         <img src="/photos/festival.jpg" alt="photo du festival"/>
         <h1> prochaine édition en juillet</h1>
-    </div>
-        <input name="button" id="boutonHistorique" onclick="fonctionHistorique()" value="historique" type="button" > <br/>
-    </div>   
+
 </body>
 <script id=historique type="text/javascript">
     function fonctionHistorique(){
diff --git a/karafon_style.css b/karafon_style.css
index ebe5ac9..922d1c6 100644
--- a/karafon_style.css
+++ b/karafon_style.css
@@ -3,22 +3,27 @@ html {
 }
 
 header {
-    background-color: rgb(39, 140, 180);
-    padding: 100px; 
-    width: 100%;
-    height: auto;  
-    position: relative;
-    top: 0;  
-    left: 0; 
-    /*z-index: 1000; 
-    box-sizing: border-box; */
-    margin-top: auto;
-    margin-right: auto;
-    margin-bottom: auto;
-    margin-left: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgb(40,140,180);
+    padding: 20px;
+    text-align: center;
 
 }
 
+.buttons{
+    text-align: center;
+    display: flex;
+    align-items: flex-end;
+    box-sizing: border-box;
+    gap: 10px;
+}
+
+.title {
+    text-align: center;
+}
+
 p {
     font-weight: bold;
 }
@@ -27,8 +32,22 @@ img{
     position: static;
 }
 
-
+input[type=button] {
+    display: inline-block;
+    bottom: 10px;
+    font-weight: bold;
+    background-color: rgb(244, 243, 150);
+    border-radius: 4px;
+    width: 150px;
+    padding: 7px;
+    cursor:pointer;
+}
 
 .centrer{
     text-align: center;
+}
+
+#festival_karafon {
+    align-self: flex-start;
+
 }
\ No newline at end of file
