diff --git a/CSS/Main.css b/CSS/Main.css
index 5da2c5d..3906373 100644
--- a/CSS/Main.css
+++ b/CSS/Main.css
@@ -10,18 +10,19 @@ body{
 }
 hr {
     width: 100%;
-    background: linear-gradient(to right, purple, orange);
+    background: linear-gradient(to right, #25aae1, #16b468);
     border-width: 1em;
 }
 
+
 .Glow ul {
     margin: 0;
     padding: 0;
     display: flex;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    /*position: relative;*/
+    /*top: 50%;
+    left: center;*/
+    /*transform: translate(-50%, -50%);*/
 }
   
 .Glow ul li {
@@ -30,13 +31,13 @@ hr {
 }
   
 .Glow ul li a {
-    position: relative; 
+    position: relative;
     display: block;
     width: 60px;
     height: 60px;
     text-align: center;
     line-height: 63px;
-    background: #333;
+    background: #141414;
     border-radius: 50%;
     font-size: 30px;
     color: #666;
@@ -51,7 +52,7 @@ hr {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background: #ffee10;
+    background: linear-gradient(to right, #25aae1, #16b468);
     transition: .5s;
     transform: scale(.9);
     z-index: -1;
@@ -59,13 +60,13 @@ hr {
   
 .Glow ul li a:hover::before {
     transform: scale(1.1);
-    box-shadow: 0 0 15px #ffee10;
+    box-shadow: 0 0 15px #16b468;
 }
   
 .Glow ul li a:hover {
-    color: #ffee10;
-    box-shadow: 0 0 5px #ffee10;
-    text-shadow: 0 0 5px #ffee10;
+    color: linear-gradient(to right, #25aae1, #16b468);
+    box-shadow: 0 0 5px #25aae1;
+    text-shadow: 0 0 5px #25aae1;
 }
 
 .header{
@@ -79,13 +80,13 @@ hr {
 }
 .GradientBorder{
     border: 5px solid;
-    border-image: linear-gradient(to bottom, purple, orange) 1 100%;
+    border-image: linear-gradient(to bottom, #25aae1, #16b468) 1 100%;
     border-style: solid;
     border-width: 3px;
     padding: 1rem;
 }
 .GradientText{
-    background-image: linear-gradient(to left, purple, orange, purple);
+    background-image: linear-gradient(to left, #25aae1, #16b468, #25aae1);
     background-clip: text;
     color: transparent;
 }
@@ -104,13 +105,40 @@ hr {
 .menu li{
     display: inline;
 }
-.menu li a{
+.menu li button{
     display: inline-block;
     padding: 10px;
     text-decoration: none;
 }
-.menu li a:hover{
-    background-image: linear-gradient(to left, orange, purple, orange);
-    background-clip: text;
+
+.btn-hover {
+    font-size: 16px;
+    font-weight: 600;
     color: transparent;
+    cursor: pointer;
+    text-align:center;
+    border: none;
+    background-size: 300% 100%;
+    background-clip: text;
+
+    border-radius: 50px;
+    moz-transition: all .4s ease-in-out;
+    -o-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    transition: all .4s ease-in-out;
+}
+
+.btn-hover:hover {
+    background-position: 100% 0;
+    moz-transition: all .4s ease-in-out;
+    -o-transition: all .4s ease-in-out;
+    -webkit-transition: all .4s ease-in-out;
+    transition: all .4s ease-in-out;
+}
+
+.btn-hover:focus {
+    outline: none;
+}
+.btn-hover.color-1 {
+    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #16b468);
 }
diff --git a/Views/Contact.html b/Views/Contact.html
index 6e8d8ae..27a8da8 100644
--- a/Views/Contact.html
+++ b/Views/Contact.html
@@ -18,13 +18,13 @@
         <header>
             <div class="row GradientText header">
                 <div class="col">
-                    <a href="index.html"><img src="../Content/Logo.png" class="logo"/></a>
+                    <a href="../index.html"><img src="../Content/Logo.png" class="logo"/></a>
                 </div>
                 <div class="col menu">
                     <ul>
-                        <li><a href="../index.html" class="GradientText">Accueil</a></li>
-                        <li><a href="Portfolio.html" class="GradientText">Portfolio</a></li>
-                        <li><a href="Contact.html" class="GradientText">Contact</a></li>
+                        <li><a href="../index.html" class="GradientText"><button class="btn-hover color-1">Accueil</button></a></li>
+                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Portfolio</button></a></li>
+                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
                     </ul>
                 </div>
             </div>
diff --git a/Views/Portfolio.html b/Views/Portfolio.html
index 6e8d8ae..27a8da8 100644
--- a/Views/Portfolio.html
+++ b/Views/Portfolio.html
@@ -18,13 +18,13 @@
         <header>
             <div class="row GradientText header">
                 <div class="col">
-                    <a href="index.html"><img src="../Content/Logo.png" class="logo"/></a>
+                    <a href="../index.html"><img src="../Content/Logo.png" class="logo"/></a>
                 </div>
                 <div class="col menu">
                     <ul>
-                        <li><a href="../index.html" class="GradientText">Accueil</a></li>
-                        <li><a href="Portfolio.html" class="GradientText">Portfolio</a></li>
-                        <li><a href="Contact.html" class="GradientText">Contact</a></li>
+                        <li><a href="../index.html" class="GradientText"><button class="btn-hover color-1">Accueil</button></a></li>
+                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Portfolio</button></a></li>
+                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
                     </ul>
                 </div>
             </div>
diff --git a/index.html b/index.html
index ad6db5f..3b7719d 100644
--- a/index.html
+++ b/index.html
@@ -22,9 +22,9 @@
                 </div>
                 <div class="col menu">
                     <ul>
-                        <li><a href="index.html" class="GradientText">Accueil</a></li>
-                        <li><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
-                        <li><a href="Views/Contact.html" class="GradientText">Contact</a></li>
+                        <li><a href="index.html" class="GradientText"><button class="btn-hover color-1">Accueil</button></a></li>
+                        <li><a href="Views/Portfolio.html" class="GradientText"><button class="btn-hover color-1">Portfolio</button></a></li>
+                        <li><a href="Views/Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
                     </ul>
                 </div>
             </div>
@@ -63,17 +63,6 @@
             </footer>
         </div>
     </div>
-    <!--Scripts pour le header et le footer-->
-    <script>
-        $.get('../Content/Footer.html', function (data){}); {
-            $('footer').replaceWith(data);
-        }
-    </script>
-    <script>
-        $.get('../Content/Header.html', function (data){}); {
-            $('Header').replaceWith(data);
-        }
-    </script>
     
     <!--Scripts à inclure-->
     <script src="Javascricp/Main.js"></script>