diff --git a/Views/Contact.html b/Views/Contact.html
index 8202e95..835eca3 100644
--- a/Views/Contact.html
+++ b/Views/Contact.html
@@ -15,23 +15,7 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="row GradientText header">
-                <div class="col">
-                    <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"><button class="btn-hover color-1">Accueil</button></a></li>
-                        <li><a href="Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
-                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
-                        <li><a href="Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
-                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
-                    </ul>
-                </div>
-            </div>
-            <hr/>
-        </header>
+        <div class="row" id="header"></div>
         <div class="row GradientBorder" style="text-align: center;">
             <div class="row">
                 <h1>Me contacter</h1>
@@ -55,6 +39,7 @@
 </html>
 <script>
     $(document).ready(function(){
-        $("#footer").load("Views/footer.html");
+        $("#header").load("header.html");
+        $("#footer").load("footer.html");
     });
 </script>
diff --git a/Views/Objectif.html b/Views/Objectif.html
index 8c15bee..02e9f5f 100644
--- a/Views/Objectif.html
+++ b/Views/Objectif.html
@@ -15,23 +15,7 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="row GradientText header">
-                <div class="col">
-                    <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"><button class="btn-hover color-1">Accueil</button></a></li>
-                        <li><a href="Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
-                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
-                        <li><a href="Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
-                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
-                    </ul>
-                </div>
-            </div>
-            <hr/>
-        </header>
+        <div class="row" id="header"></div>
         <div class="row GradientBorder">
             <div class="row" style="text-align: center;">
                 <h1>Mes objectifs</h1>
@@ -49,6 +33,7 @@
 </html>
 <script>
     $(document).ready(function(){
-        $("#footer").load("Views/footer.html");
+        $("#header").load("header.html");
+        $("#footer").load("footer.html");
     });
 </script>
diff --git a/Views/Portfolio.html b/Views/Portfolio.html
index 3ecf35f..ab642af 100644
--- a/Views/Portfolio.html
+++ b/Views/Portfolio.html
@@ -15,23 +15,7 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="row GradientText header">
-                <div class="col">
-                    <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"><button class="btn-hover color-1">Accueil</button></a></li>
-                        <li><a href="Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
-                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
-                        <li><a href="Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
-                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
-                    </ul>
-                </div>
-            </div>
-            <hr/>
-        </header>
+        <div class="row" id="header"></div>
         <div class="row GradientBorder">
             <div class="row" style="text-align: center;">
                 <h1>Mes projets</h1>
@@ -49,6 +33,7 @@
 </html>
 <script>
     $(document).ready(function(){
-        $("#footer").load("Views/footer.html");
+        $("#header").load("header.html");
+        $("#footer").load("footer.html");
     });
 </script>
diff --git a/Views/Technologies.html b/Views/Technologies.html
index ec3f4b5..b1a293c 100644
--- a/Views/Technologies.html
+++ b/Views/Technologies.html
@@ -15,23 +15,7 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="row GradientText header">
-                <div class="col">
-                    <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"><button class="btn-hover color-1">Accueil</button></a></li>
-                        <li><a href="Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
-                        <li><a href="Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
-                        <li><a href="Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
-                        <li><a href="Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
-                    </ul>
-                </div>
-            </div>
-            <hr/>
-        </header>
+        <div class="row" id="header"></div>
         <div class="row GradientBorder">
             <div class="row" style="text-align: center;">
                 <h1>Technologies</h1>
@@ -49,6 +33,7 @@
 </html>
 <script>
     $(document).ready(function(){
-        $("#footer").load("Views/footer.html");
+        $("#header").load("header.html");
+        $("#footer").load("footer.html");
     });
 </script>
diff --git a/Views/header.html b/Views/header.html
new file mode 100644
index 0000000..edb6840
--- /dev/null
+++ b/Views/header.html
@@ -0,0 +1,17 @@
+<header>
+    <div class="row GradientText header">
+        <div class="col">
+            <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"><button class="btn-hover color-1">Accueil</button></a></li>
+                <li><a href="Views/Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
+                <li><a href="Views/Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
+                <li><a href="Views/Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
+                <li><a href="Views/Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
+            </ul>
+        </div>
+    </div>
+    <hr/>
+</header>
\ No newline at end of file
diff --git a/index.html b/index.html
index 337ddd8..04e419b 100644
--- a/index.html
+++ b/index.html
@@ -15,23 +15,7 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="row GradientText header">
-                <div class="col">
-                    <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"><button class="btn-hover color-1">Accueil</button></a></li>
-                        <li><a href="Views/Technologies.html" class="GradientText"><button class="btn-hover color-1">Technologies</button></a></li>
-                        <li><a href="Views/Portfolio.html" class="GradientText"><button class="btn-hover color-1">Projets</button></a></li>
-                        <li><a href="Views/Objectif.html" class="GradientText"><button class="btn-hover color-1">Objectifs</button></a></li>
-                        <li><a href="Views/Contact.html" class="GradientText"><button class="btn-hover color-1">Contact</button></a></li>
-                    </ul>
-                </div>
-            </div>
-            <hr/>
-        </header>
+        <div class="row" id="header"></div>
         <div class="row GradientBorder">
             <p>Test</p>
         </div>
@@ -46,6 +30,7 @@
 </html>
 <script>
     $(document).ready(function(){
+        $("#header").load("Views/header.html");
         $("#footer").load("Views/footer.html");
     });
 </script>
