diff --git a/components/footer.html b/components/footer.html
new file mode 100644
index 0000000..406c58e
--- /dev/null
+++ b/components/footer.html
@@ -0,0 +1,5 @@
+<div id="footer">
+    <p>footer</p>
+    <p>Color Palette based on https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2</p>
+    <p>And : https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097</p>
+</div>
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
index e2db9e7..3add66a 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,15 +1,23 @@
+:root {
+    --color-dark: #2D2424;
+    --color-main-light: #A55540;
+    --color-main: #5C3D2E;
+    --color-light: #E79A58;
+    --color-white: #E1D5D2;
+    --color-gray: #4B4A5A;
+}
+
 * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     scroll-behavior: smooth;
-  }
-  
-  h1 {
+}
+
+h1 {
     font-family: "Comic Sans MS", "Comic Sans", cursive;
-  }
-  
-  p {
+}
+
+p {
     font-family: 'Josefin Sans', sans-serif;
-  }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 0000000..9bfdcd1
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,6 @@
+#footer
+{
+    height: 30rem;
+    background-color: var(--color-dark);
+    color: var(--color-white);
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index e3752eb..75fc258 100644
--- a/css/index.css
+++ b/css/index.css
@@ -20,6 +20,7 @@
   padding: 0 0 0 2rem;
   z-index: 1;
   font-size: larger;
+  color: var(--color-dark);
 }
 
 .presentation-img {
@@ -45,7 +46,7 @@
 }
 
 .description {
-  background-color: #f97b22;
+  background-color: var(--color-main-light);
   width: 100%;
   height: 55rem;
   display: flex;
diff --git a/css/navbar.css b/css/navbar.css
index 1dcead7..73f85ba 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -10,7 +10,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    background-color: #f5a122;
+    background-color: var(--color-light);
     z-index: 3;
     overflow: initial;
 }
@@ -54,7 +54,7 @@ button {
 #navbar_text-container a:hover {
     transform: translateY(-2px);
     background-color: rgba(255, 255, 255, 0.75);
-    color: #9e6b1f;
+    color: var(--color-main);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
@@ -82,6 +82,6 @@ button {
 
 .navbar_dropdown a:hover {
     transform: translateX(5px) !important;
-    background-color: #f5a122 !important;
-    color: white !important;
+    background-color: var(--color-light) !important;
+    color: var(--color-white) !important;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 1f65f2c..0e0502c 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
         rel="stylesheet">
     <link href="css/base.css" rel="stylesheet">
     <link href="css/navbar.css" rel="stylesheet">
+    <link href="css/footer.css" rel="stylesheet">
     <link href="css/index.css" rel="stylesheet">
 </head>
 
@@ -66,6 +67,7 @@
             <img class="placeholder" src="assets/meilleurappelersaoul.jpg"></img>
         </div>
     </div>
+    <Footer></Footer>
 </body>
 
 </html>
diff --git a/js/base.js b/js/base.js
index c0c6c7c..38e3b07 100644
--- a/js/base.js
+++ b/js/base.js
@@ -90,4 +90,5 @@ function concatPath(slashNum, basePath)
 
 window.addEventListener('load', function () {
     load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", this.document.getElementsByTagName("head")[0]);
+    load(urlStr+"components/footer.html", document.getElementsByTagName("Footer")[0], urlStr+"js/footer.js", this.document.getElementsByTagName("head")[0]);
 })
\ No newline at end of file
diff --git a/js/footer.js b/js/footer.js
new file mode 100644
index 0000000..e69de29