diff --git a/CSS/styles.css b/CSS/styles.css
index 1a012be..5c90915 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -60,8 +60,44 @@ nav{
 
 }
 
+.button {
+	width: 9.5em;
+	height: 2.3em;
+	margin: 0.5em;
+	background: rgb(255, 0, 0);
+	color: rgb(0, 0, 0);
+	border: none;
+	border-radius: 1.625em;
+	font-size: 20px;
+	font-weight: bold;
+	cursor: pointer;
+	position: relative;
+	z-index: 1;
+	overflow: hidden;
+}
+   
+.button:hover {
+	color: rgb(255, 0, 0);
+}
 
-
+.button:after {
+	content: "";
+	background: rgb(0, 0, 0);
+	position: absolute;
+	z-index: -1;
+	left: -20%;
+	right: -20%;
+	top: 0;
+	bottom: 0;
+	transform: skewX(-45deg) scale(0, 1);
+	transition: all 0.5s;
+}
+   
+.button:hover:after {
+	transform: skewX(-45deg) scale(1, 1);
+	-webkit-transition: all 0.5s;
+	transition: all 0.5s;
+}
 
 
 #icone{
diff --git a/img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg b/img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg
new file mode 100644
index 0000000..9c969cd
Binary files /dev/null and b/img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg differ
diff --git a/index.html b/index.html
index 390d98c..6c0dfa9 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 
 		<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
 		<meta name="keywords" content="casino">
-		<link rel = "icon" type = "image/png" href = "img/icon.png">
+		<link rel = "icon" type = "image/png" href = "img/logo.svg">
 	</head> 
 
 	<body> 
@@ -18,21 +18,21 @@
 			<nav> 
 
 
-				<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>
+				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
 				
 				<ul>
 
-					<li> <a href= "#" class="page" id="page_courante"><p>Accueil</p> </a></li> 
-					<li> <a href= "HTML/page_2.html" class="page" ><p>Nos jeux</p> </a></li> 
-					<li> <a href= "HTML/page_3.html" class="page"><p>Nos partenaires</p> </a> </li> 
-					<li> <a href= "HTML/page_4.html" class="page"><p>A propos de nous </p> </a></li> 
+					<li> <a href= "index.html" class="page" id="page_courante"><button class="button" type="buton" value="Accueil"> Accueil</button></a></li> 
+					<li> <a href= "HTML/page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
+					<li> <a href= "HTML/page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+					<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li> 
 
 				</ul> 
 			</nav>
 		</header>
 
 		<main>
-			<img id="presentation" src="img/casion_background.jpeg" alt="icone du site">
+			<img id="presentation" src="img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg" alt="icone du site">
 			<h1><span class="txt_rouge">Casino du Coeur</span></h1>
 			<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
 
