diff --git a/src/components/courseItem.jsx b/src/components/courseItem.jsx
index bc2eece..c3276c9 100644
--- a/src/components/courseItem.jsx
+++ b/src/components/courseItem.jsx
@@ -1,7 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { Link } from "gatsby"
 
-const CourseItem = ({ title, price, description, image }) => {
+import * as ROUTES from "../global/routes"
+
+const CourseItem = ({ title, price, description, image, slug }) => {
   return (
     <div className="col-lg-4 col-md-6 d-flex align-items-stretch">
       <div className="course-item">
@@ -13,7 +16,7 @@ const CourseItem = ({ title, price, description, image }) => {
           </div>
 
           <h3>
-            <a href="course-details.html">{title}</a>
+            <Link to={`${ROUTES.COURSES}/${slug}`}>{title}</Link>
           </h3>
           <p>{description}</p>
         </div>
@@ -26,6 +29,7 @@ export default CourseItem
 
 CourseItem.propTypes = {
   title: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
   price: PropTypes.number.isRequired,
   description: PropTypes.string.isRequired,
   image: PropTypes.node.isRequired,
diff --git a/src/components/courses.jsx b/src/components/courses.jsx
index 0ee6f2c..2e1ddb3 100644
--- a/src/components/courses.jsx
+++ b/src/components/courses.jsx
@@ -8,7 +8,8 @@ import img3 from "../static/img/course-3.jpg"
 
 const data = [
   {
-    title: "Garderie",
+    title: "Primaire",
+    slug: "primaire",
     price: 10,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@@ -16,6 +17,7 @@ const data = [
   },
   {
     title: "Collège",
+    slug: "college",
     price: 15,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@@ -23,6 +25,7 @@ const data = [
   },
   {
     title: "Lycée",
+    slug: "lycee",
     price: 18,
     description:
       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index 84d646a..e151c77 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -48,10 +48,6 @@ const Footer = ({ siteTitle }) => (
           <div className="col-lg-3 col-md-6 footer-links">
             <h4>Nos niveaux</h4>
             <ul>
-              <li>
-                <i className="bx bx-chevron-right"></i>{" "}
-                <Link to={ROUTES.GARDERIE}>Garderie</Link>
-              </li>
               <li>
                 <i className="bx bx-chevron-right"></i>{" "}
                 <Link to={ROUTES.PRIMAIRE}>Primaire</Link>
@@ -64,6 +60,10 @@ const Footer = ({ siteTitle }) => (
                 <i className="bx bx-chevron-right"></i>{" "}
                 <Link to={ROUTES.LYCEE}>Lycée</Link>
               </li>
+              <li>
+                <i className="bx bx-chevron-right"></i>{" "}
+                <Link to={ROUTES.ATELIER}>Ateliers</Link>
+              </li>
             </ul>
           </div>
 
diff --git a/src/global/routes.js b/src/global/routes.js
index bd43001..9cc0a9c 100644
--- a/src/global/routes.js
+++ b/src/global/routes.js
@@ -4,7 +4,7 @@ export const A_PROPOS = "/a-propos"
 export const CONTACT = "/contact"
 export const CALENDAR = "/calendrier"
 export const LEGAL = "/legal"
-export const GARDERIE = COURSES + "/garderie"
+export const ATELIER = COURSES + "/ateliers"
 export const PRIMAIRE = COURSES + "/primaire"
 export const COLLEGE = COURSES + "/college"
 export const LYCEE = COURSES + "/lycee"
diff --git a/src/images/about.jpg b/src/images/about.jpg
index 2029315..c46b47c 100644
Binary files a/src/images/about.jpg and b/src/images/about.jpg differ
diff --git a/src/static/css/style.css b/src/static/css/style.css
index cbeb6c2..99075b5 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -1,12 +1,5 @@
-/**
-* Template Name: Mentor - v2.1.0
-* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
-* Author: BootstrapMade.com
-* License: https://bootstrapmade.com/license/
-*/
-
-/*--------------------------------------------------------------
-# General
+/*--------------------------------------------------------------
+# General
 --------------------------------------------------------------*/
 body {
   font-family: "Open Sans", sans-serif;
@@ -22,12 +15,17 @@ a:hover {
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
-/*--------------------------------------------------------------
-# Back to top button
+/*--------------------------------------------------------------
+# Back to top button
 --------------------------------------------------------------*/
 .back-to-top {
   position: fixed;
@@ -55,8 +53,8 @@ h1, h2, h3, h4, h5, h6 {
   color: #fff;
 }
 
-/*--------------------------------------------------------------
-# Preloader
+/*--------------------------------------------------------------
+# Preloader
 --------------------------------------------------------------*/
 #preloader {
   position: fixed;
@@ -102,8 +100,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-/*--------------------------------------------------------------
-# Disable aos animation delay on mobile devices
+/*--------------------------------------------------------------
+# Disable aos animation delay on mobile devices
 --------------------------------------------------------------*/
 @media screen and (max-width: 768px) {
   [data-aos-delay] {
@@ -111,8 +109,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-/*--------------------------------------------------------------
-# Header
+/*--------------------------------------------------------------
+# Header
 --------------------------------------------------------------*/
 #header {
   background: #fff;
@@ -147,8 +145,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-/*--------------------------------------------------------------
-# Navigation Menu
+/*--------------------------------------------------------------
+# Navigation Menu
 --------------------------------------------------------------*/
 /* Desktop Navigation */
 .nav-menu ul {
@@ -177,7 +175,9 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 500;
 }
 
-.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
+.nav-menu a:hover,
+.nav-menu .active > a,
+.nav-menu li:hover > a {
   color: #5fcf80;
 }
 
@@ -215,7 +215,9 @@ h1, h2, h3, h4, h5, h6 {
   color: #37423b;
 }
 
-.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
+.nav-menu .drop-down ul a:hover,
+.nav-menu .drop-down ul .active > a,
+.nav-menu .drop-down ul li:hover > a {
   color: #5fcf80;
 }
 
@@ -335,7 +337,9 @@ h1, h2, h3, h4, h5, h6 {
   outline: none;
 }
 
-.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
+.mobile-nav a:hover,
+.mobile-nav .active > a,
+.mobile-nav li:hover > a {
   color: #5fcf80;
   text-decoration: none;
 }
@@ -391,13 +395,13 @@ h1, h2, h3, h4, h5, h6 {
   color: #fff;
 }
 
-/*--------------------------------------------------------------
-# Hero Section
+/*--------------------------------------------------------------
+# Hero Section
 --------------------------------------------------------------*/
 #hero {
   width: 100%;
   height: 80vh;
-  background: url("../img/hero-bg.jpg") top center;
+  background: url("../img/hero-bg.jpg") center;
   background-size: cover;
   position: relative;
 }
@@ -476,8 +480,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-/*--------------------------------------------------------------
-# Sections General
+/*--------------------------------------------------------------
+# Sections General
 --------------------------------------------------------------*/
 section {
   padding: 60px 0;
@@ -547,8 +551,8 @@ section {
   margin-bottom: 0;
 }
 
-/*--------------------------------------------------------------
-# About
+/*--------------------------------------------------------------
+# About
 --------------------------------------------------------------*/
 .about .content h3 {
   font-weight: 600;
@@ -593,8 +597,8 @@ section {
   }
 }
 
-/*--------------------------------------------------------------
-# Counts
+/*--------------------------------------------------------------
+# Counts
 --------------------------------------------------------------*/
 .counts {
   padding: 30px 0;
@@ -616,8 +620,8 @@ section {
   color: #37423b;
 }
 
-/*--------------------------------------------------------------
-# Why Us
+/*--------------------------------------------------------------
+# Why Us
 --------------------------------------------------------------*/
 .why-us .content {
   padding: 30px;
@@ -682,8 +686,8 @@ section {
   color: #848484;
 }
 
-/*--------------------------------------------------------------
-# Features
+/*--------------------------------------------------------------
+# Features
 --------------------------------------------------------------*/
 .features {
   padding-top: 0px;
@@ -724,8 +728,8 @@ section {
   color: #5fcf80;
 }
 
-/*--------------------------------------------------------------
-# Courses
+/*--------------------------------------------------------------
+# Courses
 --------------------------------------------------------------*/
 .courses .course-item {
   border-radius: 5px;
@@ -792,8 +796,8 @@ section {
   color: #657a6d;
 }
 
-/*--------------------------------------------------------------
-# Trainers
+/*--------------------------------------------------------------
+# Trainers
 --------------------------------------------------------------*/
 .trainers .member {
   text-align: center;
@@ -847,8 +851,8 @@ section {
   margin: 0 2px;
 }
 
-/*--------------------------------------------------------------
-# Testimonials
+/*--------------------------------------------------------------
+# Testimonials
 --------------------------------------------------------------*/
 .testimonials .testimonial-wrap {
   padding-left: 50px;
@@ -885,7 +889,8 @@ section {
   margin: 0;
 }
 
-.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
+.testimonials .testimonial-item .quote-icon-left,
+.testimonials .testimonial-item .quote-icon-right {
   color: #c1ecce;
   font-size: 26px;
 }
@@ -908,7 +913,8 @@ section {
   margin: 15px auto 15px auto;
 }
 
-.testimonials .owl-nav, .testimonials .owl-dots {
+.testimonials .owl-nav,
+.testimonials .owl-dots {
   margin-top: 5px;
   text-align: center;
 }
@@ -940,8 +946,8 @@ section {
   }
 }
 
-/*--------------------------------------------------------------
-# Cource Details
+/*--------------------------------------------------------------
+# Cource Details
 --------------------------------------------------------------*/
 .course-details h3 {
   font-size: 24px;
@@ -952,7 +958,7 @@ section {
 }
 
 .course-details h3:before {
-  content: '';
+  content: "";
   position: absolute;
   display: block;
   width: 100%;
@@ -963,7 +969,7 @@ section {
 }
 
 .course-details h3:after {
-  content: '';
+  content: "";
   position: absolute;
   display: block;
   width: 60px;
@@ -995,8 +1001,8 @@ section {
   color: #657a6d;
 }
 
-/*--------------------------------------------------------------
-# Cource Details Tabs
+/*--------------------------------------------------------------
+# Cource Details Tabs
 --------------------------------------------------------------*/
 .cource-details-tabs {
   overflow: hidden;
@@ -1058,8 +1064,8 @@ section {
   }
 }
 
-/*--------------------------------------------------------------
-# Events
+/*--------------------------------------------------------------
+# Events
 --------------------------------------------------------------*/
 .events .card {
   border: 0;
@@ -1130,8 +1136,8 @@ section {
   color: #5fcf80;
 }
 
-/*--------------------------------------------------------------
-# Pricing
+/*--------------------------------------------------------------
+# Pricing
 --------------------------------------------------------------*/
 .pricing .box {
   padding: 20px;
@@ -1240,8 +1246,8 @@ section {
   color: #fff;
 }
 
-/*--------------------------------------------------------------
-# Contact
+/*--------------------------------------------------------------
+# Contact
 --------------------------------------------------------------*/
 .contact {
   padding-top: 5px;
@@ -1281,11 +1287,14 @@ section {
   color: #657a6d;
 }
 
-.contact .info .email, .contact .info .phone {
+.contact .info .email,
+.contact .info .phone {
   margin-top: 40px;
 }
 
-.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
   background: #5fcf80;
   color: #fff;
 }
@@ -1349,13 +1358,15 @@ section {
   animation: animate-loading 1s linear infinite;
 }
 
-.contact .php-email-form input, .contact .php-email-form textarea {
+.contact .php-email-form input,
+.contact .php-email-form textarea {
   border-radius: 4px;
   box-shadow: none;
   font-size: 14px;
 }
 
-.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
+.contact .php-email-form input:focus,
+.contact .php-email-form textarea:focus {
   border-color: #5fcf80;
 }
 
@@ -1398,8 +1409,8 @@ section {
   }
 }
 
-/*--------------------------------------------------------------
-# Footer
+/*--------------------------------------------------------------
+# Footer
 --------------------------------------------------------------*/
 #footer {
   color: #37423b;
diff --git a/src/static/img/course-1.jpg b/src/static/img/course-1.jpg
index 9c3275b..7e55e6d 100644
Binary files a/src/static/img/course-1.jpg and b/src/static/img/course-1.jpg differ
diff --git a/src/static/img/course-2.jpg b/src/static/img/course-2.jpg
index 63ecc8f..1fb49de 100644
Binary files a/src/static/img/course-2.jpg and b/src/static/img/course-2.jpg differ
diff --git a/src/static/img/course-3.jpg b/src/static/img/course-3.jpg
index fdb8fa2..9386e62 100644
Binary files a/src/static/img/course-3.jpg and b/src/static/img/course-3.jpg differ
diff --git a/src/static/img/hero-bg.jpg b/src/static/img/hero-bg.jpg
index c04bea8..5b922e3 100644
Binary files a/src/static/img/hero-bg.jpg and b/src/static/img/hero-bg.jpg differ