diff --git a/src/main/java/ma/yc/airafraik/web/RechercheVolController.java b/src/main/java/ma/yc/airafraik/web/RechercheVolController.java
index aab6efa..0a67e57 100644
--- a/src/main/java/ma/yc/airafraik/web/RechercheVolController.java
+++ b/src/main/java/ma/yc/airafraik/web/RechercheVolController.java
@@ -38,7 +38,7 @@ protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws Se
             //TODO : if those information are not null then we will search for the vols
             Collection<VolEntity> vols = searchVolsService.searchVols(origin,depart,departuredate,retourdate,"1");
             req.setAttribute("vols",vols);
-            req.getRequestDispatcher("recherchePage.jsp").forward(req, resp);
+            req.getRequestDispatcher("recherche-page.jsp").forward(req, resp);
         }
 
 
diff --git a/src/main/java/ma/yc/airafraik/web/RservationConfirmationController.java b/src/main/java/ma/yc/airafraik/web/RservationConfirmationController.java
new file mode 100644
index 0000000..1a02f44
--- /dev/null
+++ b/src/main/java/ma/yc/airafraik/web/RservationConfirmationController.java
@@ -0,0 +1,47 @@
+package ma.yc.airafraik.web;
+
+import jakarta.servlet.ServletConfig;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.annotation.WebServlet;
+import jakarta.servlet.http.HttpServlet;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import ma.yc.airafraik.core.Print;
+import ma.yc.airafraik.entities.VolEntity;
+import ma.yc.airafraik.service.SearchVolsService;
+import ma.yc.airafraik.service.impl.SearchVolsServiceImpl;
+
+import java.io.IOException;
+import java.util.Collection;
+
+@WebServlet(name = "RservationConfirmationController", value = "/reservation-confirmation")
+public class RservationConfirmationController extends HttpServlet {
+
+    private SearchVolsService searchVolsService ;
+    @Override
+    public void init(ServletConfig config) throws ServletException {
+        super.init(config);
+        this.searchVolsService = new SearchVolsServiceImpl();
+    }
+
+    @Override
+    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
+        String id = req.getParameter("id");
+
+        if (id != null) {
+            Print.log("id : " + id);
+            VolEntity vols = searchVolsService.searchVolParId(id);
+            req.setAttribute("vols",vols);
+            req.getRequestDispatcher("reservation-confirmation.jsp").forward(req, resp);
+
+        }else{
+            resp.sendRedirect("/");
+        }
+        super.doGet(req, resp);
+    }
+
+    @Override
+    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
+        super.doPost(req, resp);
+    }
+}
diff --git a/src/main/java/ma/yc/airafraik/web/RservationDetailsController.java b/src/main/java/ma/yc/airafraik/web/RservationDetailsController.java
index 50a6abc..71e47ff 100644
--- a/src/main/java/ma/yc/airafraik/web/RservationDetailsController.java
+++ b/src/main/java/ma/yc/airafraik/web/RservationDetailsController.java
@@ -36,13 +36,15 @@ protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws Se
 
         String id = req.getParameter("id");
         Print.log("id : " + id);
-//        VolEntity reservationEntity = searchVolsService.searchVolParId(id);
+        VolEntity vol = searchVolsService.searchVolParId(id);
+        req.setAttribute("vol",vol);
+        //TODO : we will use this attribute in the jsp page
 
 //        try{
 //            if (reservationEntity != null){
 //                req.setAttribute("reservation",reservationEntity);
         if (id != null) {
-            req.getRequestDispatcher("reservation-details.jsp").forward(req, resp);
+            req.getRequestDispatcher("reservation-confirmation-page.jsp").forward(req, resp);
         }else{
             resp.sendRedirect("/");
         }
diff --git a/src/main/webapp/recherchePage.jsp b/src/main/webapp/recherche-page.jsp
similarity index 92%
rename from src/main/webapp/recherchePage.jsp
rename to src/main/webapp/recherche-page.jsp
index 49e4340..9f6f5b6 100644
--- a/src/main/webapp/recherchePage.jsp
+++ b/src/main/webapp/recherche-page.jsp
@@ -29,7 +29,7 @@
         </div>
     </c:if>
     <c:if test="${not empty vols}">
-        <div class="alert alert-success" role="alert">
+        <div class="alert mt-3 alert-success" role="alert">
             ${vols.size()} vol(s) trouvé(s)
         </div>
     </c:if>
@@ -67,9 +67,9 @@
                 <h3><c:out value="${vol.prix}" /> - MAD</h3>
                 <form action="reservation-details" method="get">
                     <input type="hidden" name="id" value="${vol.id}">
-                    <input type="submit" value="Réservez">
+                    <input class="button-reservation"  type="submit" value="Réservez">
                 </form>
-                <a href="reservation-details/${vol.id}">Réservez</a>
+<%--                <a href="reservation-details/${vol.id}">Réservez</a>--%>
                 <p>
                     Lorem ipsum dolor, sit amet consectetur.
                 </p>
diff --git a/src/main/webapp/reservation-confirmation-page.jsp b/src/main/webapp/reservation-confirmation-page.jsp
new file mode 100644
index 0000000..be0525b
--- /dev/null
+++ b/src/main/webapp/reservation-confirmation-page.jsp
@@ -0,0 +1,65 @@
+<%@ page import="java.util.Collection" %>
+<%@ page import="ma.yc.airafraik.entities.VolEntity" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<%
+    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+
+%>
+
+
+<!DOCTYPE html>
+<html lang="en">
+<link rel="stylesheet" href="./static/css/vol-card.css">
+<link rel="stylesheet" href="./static/css/reservation-details.css">
+
+<jsp:include page="templates/head.jsp"/>
+
+<body>
+<div class="site-wrap">
+<jsp:include page="templates/header.jsp"/>
+<div class="container mt-4">
+    <h2>Contact Details</h2>
+    <form id="reservation-form" method="post" action="reservation-confirmation">
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="name">Full Name</label>
+                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter your full name" required>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email address" required>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="phone">Phone Number</label>
+            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Enter your phone number" required>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="flight">Flight Number</label>
+                    <input type="text" class="form-control" id="flight" name="flight" placeholder="Enter your flight number" required>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="date">Flight Date</label>
+                    <input type="date" class="form-control" id="date" name="date" required>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="comments">Additional Comments</label>
+            <textarea class="form-control" id="comments" name="comments" rows="4" placeholder="Any additional comments or special requests"></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+    <jsp:include page="templates/footer.jsp"/>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/reservation-details.jsp b/src/main/webapp/reservation-details.jsp
index 49cd7f4..264478e 100644
--- a/src/main/webapp/reservation-details.jsp
+++ b/src/main/webapp/reservation-details.jsp
@@ -1,18 +1,157 @@
-<%--
-  Created by IntelliJ IDEA.
-  User: pc
-  Date: 19/10/2023
-  Time: 14:42
-  To change this template use File | Settings | File Templates.
---%>
-<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<html>
-<head>
-    <title>Title</title>
-</head>
+<%@ page import="java.util.Collection" %>
+<%@ page import="ma.yc.airafraik.entities.VolEntity" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<%
+    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+    VolEntity vol = request.getAttribute("vol") != null ? (VolEntity) request.getAttribute("vol") : null;
+%>
+
+
+<!DOCTYPE html>
+<html lang="en">
+<link rel="stylesheet" href="./static/css/vol-card.css">
+<link rel="stylesheet" href="./static/css/reservation-details.css">
+
+<jsp:include page="templates/head.jsp"/>
+
 <body>
-    <h1>
-        Reservation effectuée avec succès !
-    </h1>
+<div class="site-wrap">
+    <jsp:include page="templates/header.jsp"/>
+    <% assert vol != null; %>
+    <div class="container">
+        <div class="container m-4 reservation-details-container">
+            <div class="flight-details">
+                <h2>
+                    This is the flight you have selected :
+                </h2>
+                <div class="flight-details-container">
+                    <div class="flight-information-card">
+                        <div class="vol-card">
+                            <div class="vols-info">
+                                <div class="vol-info">
+                                    <div class="logo-vol-comapny">
+                                        <img  src="https://beebom.com/wp-content/uploads/2018/12/IranAir.jpg" alt="logo">
+                                    </div>
+                                    <div class="vol-info-heure-depart">
+                                        <p>12:00</p>
+                                        <p>
+                                            Safi (SFI)
+                                        </p>
+                                    </div>
+                                    <div class="rounded-divider"></div>
+                                    <div class="vol-info-heure-arrive">
+                                        <p>14:00</p>
+                                        <p>
+                                            Casablanca (CMN)
+                                        </p>
+                                    </div>
+                                    <div class="vol-duration">
+                                        <p>2h</p>
+                                    </div>
+                                </div>
+                                <div class="vol-info">
+                                    <div class="logo-vol-comapny">
+                                        <img  src="https://beebom.com/wp-content/uploads/2018/12/IranAir.jpg" alt="logo">
+                                    </div>
+                                    <div class="vol-info-heure-depart">
+                                        <p>12:00</p>
+                                        <p>
+                                            Casablanca (CMN)
+                                        </p>
+                                    </div>
+                                    <div class="rounded-divider"></div>
+                                    <div class="vol-info-heure-arrive">
+                                        <p>14:00</p>
+                                        <p>
+                                            Rabat (RBA)
+                                        </p>
+                                    </div>
+                                    <div class="vol-duration">
+                                        <p>2h</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="vol-reservation">
+                                <h3> 435 - MAD </h3>
+                                <p>
+                                    Lorem ipsum dolor, sit amet consectetur .
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="customzie-your-flight-conatainer">
+                    <div class="basic">
+                        <h2>Basic </h2>
+                    </div>
+                    <div class="smart">
+                        <h2>smart</h2>
+                    </div>
+                    <div class="permium">
+                        <h2>Permium</h2>
+                    </div>
+                </div>
+                <div class="for-passangers">
+                    <h2>For the passanagers </h2>
+                </div>
+                <div class="more-extracs">
+                    <h2>Special meal on the board </h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Rerum, maiores itaque eaque, id adipisci cumque atque mollitia
+                        impedit blanditiis sint odio, autem eveniet dolorum earum pariatur
+                        quisquam accusantium similique nemo.
+                    </p>
+                </div>
+            </div>
+            <div class="your-booking">
+                <h2>
+                    Your booking details :
+                </h2>
+                <div class="your-booking-container">
+                    <img src="" alt="" class="your-booking-image">
+                    <div class="your-booking-header">
+                        <div class="from-info">
+                            <p>Marrakech</p>
+                            <p>From</p>
+                            <p>17-10-2023</p>
+                        </div>
+                        <div class="logo-info">
+                            🛫
+                        </div>
+                        <div class="to-info">
+                            <p>Istanbul </p>
+                            <p>to</p>
+                            <p>18-10-2023</p>
+                        </div>
+                    </div>
+                    <div class="booking-details">
+                        <hr>
+                        <div class="passnger">
+                            <p>1 Passenger</p>
+                            <p>430.33</p>
+                        </div>
+                        <hr>
+                        <div class="your-booking-total">
+                            <p>Total </p>
+                            <h2>494.22$</h2>
+                        </div>
+                        <div>
+                            <p>Payment method</p>
+                            <p>Visa</p>
+                        </div>
+                        <form class="confirmation" method="get" action="reservation-confirmation">
+                            <input type="hidden" name="id" value="<%=vol.getId()%>" >
+                            <input class="button-reservation btn btn-sm btn-primary"  type="submit" value="Confirm">
+                        </form>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <jsp:include page="templates/footer.jsp"/>
+</div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/sandbox/assets/styles.css b/src/main/webapp/sandbox/assets/styles.css
index a124168..3458c16 100644
--- a/src/main/webapp/sandbox/assets/styles.css
+++ b/src/main/webapp/sandbox/assets/styles.css
@@ -117,4 +117,11 @@ div.rounded-divider {
     text-align: center;
     font-size: 0.9rem;
     grid-row: span 1;
-}
\ No newline at end of file
+}
+
+.reservation-details-container{
+    display: grid;
+    grid-template-columns: 2fr 1fr ; 
+}
+
+
diff --git a/src/main/webapp/sandbox/componenets/assets/styles.css b/src/main/webapp/sandbox/componenets/assets/styles.css
new file mode 100644
index 0000000..2ed4e87
--- /dev/null
+++ b/src/main/webapp/sandbox/componenets/assets/styles.css
@@ -0,0 +1,174 @@
+body{
+    background-color: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+div.rounded-divider {
+    border-top: 4px solid #bbb;
+    border-radius: 5px;
+    width: 40%;
+    margin: auto;
+
+}
+
+.logo-vol-comapny{
+    width: 80px;
+    border-radius: 50%;
+    height: 80px;
+}
+
+.logo-vol-comapny  img {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+}
+
+.vol-card{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 0.5rem;
+    border: 2px solid #bbb;
+    margin: 1rem;
+    border-radius: 5px;
+    max-width: 859px;
+
+}
+
+.vol-info{
+    display: flex;
+    gap: 1rem;
+    
+
+}
+
+.container{
+    display: grid;
+    justify-content: center;
+    align-items: center;
+}
+
+.vol-duration{
+    display: grid;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+}
+
+.vols-info{
+    display: grid;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    grid-column: span 2;    
+    margin: 0.5rem; 
+}
+
+.vol-info-heure-depart , .vol-info-heure-arrive{
+    display: grid;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.9rem;
+    justify-content: center;
+    text-align: center;
+
+
+}
+
+
+.vol-reservation{
+    display: grid;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    justify-content: center;
+    text-align: center;
+}
+
+
+button{
+    all: unset;
+}
+.vol-reservation a ,button{
+    text-decoration: none;
+    color: white;
+    background-color: rgb(58, 58, 252);
+    padding: 0.5rem;
+    border-radius: 5px;
+    /* min-width: 100px; */
+    text-align: center;
+    margin: 0.5rem;
+    grid-row: span 2;
+
+}
+
+
+.vol-reservation h3{
+    grid-row: span 4;
+}
+
+.vol-reservation p{
+    text-decoration: none;
+    color: #5a5555;
+    text-align: center;
+    font-size: 0.9rem;
+    grid-row: span 1;
+}
+
+
+.reservation-details-container{
+    display: grid;
+    grid-template-columns: 2fr 1fr ; 
+    gap: 2rem;
+}
+
+.your-booking-header{
+    display: flex;
+    justify-content: space-between;
+    justify-items: center;
+    align-items: center;
+    text-align: center;
+}
+.your-booking-header p{
+    margin: 0.4rem;
+    /* padding: 0.1rem; */
+}
+
+.your-booking-total{
+    display: flex;
+    justify-content: space-between;
+    justify-items: center;
+
+}
+
+.your-booking{
+    border: 2px solid #bbb;
+    border-radius: 5px;
+    padding: 1rem;
+
+}
+.booking-details  > .passnger{
+    display: flex;
+    justify-content: space-between;
+}
+
+.confirmation{
+    display: grid;
+    grid-template-columns: 1fr ;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: 1rem;
+
+}
+
diff --git a/src/main/webapp/sandbox/componenets/reservation-details.html b/src/main/webapp/sandbox/componenets/reservation-details.html
new file mode 100644
index 0000000..46cedc8
--- /dev/null
+++ b/src/main/webapp/sandbox/componenets/reservation-details.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reservation details</title>
+    <link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+    <div class="container reservation-details-container">
+        <div class="flight-details">
+            <h2>
+                This is the flight you have selected :
+            </h2>
+            <div class="flight-details-container">
+                <div class="flight-information-card">
+                    <div class="vol-card">
+                        <div class="vols-info">
+                            <div class="vol-info">
+                                <div class="logo-vol-comapny">
+                                    <img  src="https://beebom.com/wp-content/uploads/2018/12/IranAir.jpg" alt="logo">
+                                </div>
+                                <div class="vol-info-heure-depart">
+                                    <p>12:00</p>
+                                    <p>
+                                        Safi (SFI)
+                                    </p>
+                                </div>
+                                <div class="rounded-divider"></div>
+                                <div class="vol-info-heure-arrive">
+                                    <p>14:00</p>
+                                    <p>
+                                        Casablanca (CMN)
+                                    </p>
+                                </div>
+                                <div class="vol-duration">
+                                    <p>2h</p>
+                                </div>
+                            </div>
+                            <div class="vol-info">
+                                <div class="logo-vol-comapny">
+                                    <img  src="https://beebom.com/wp-content/uploads/2018/12/IranAir.jpg" alt="logo">
+                                </div>
+                                <div class="vol-info-heure-depart">
+                                    <p>12:00</p>
+                                    <p>
+                                        Casablanca (CMN)
+                                    </p>
+                                </div>
+                                <div class="rounded-divider"></div>
+                                <div class="vol-info-heure-arrive">
+                                    <p>14:00</p>
+                                    <p>
+                                        Rabat (RBA)
+                                    </p>
+                                </div>
+                                <div class="vol-duration">
+                                    <p>2h</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="vol-reservation">
+                            <h3> 435 - MAD </h3>
+                            <a href="#">Rservez</a>
+                            <p>
+                                Lorem ipsum dolor, sit amet consectetur . 
+                            </p>
+                            <p>
+                                Message details
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="customzie-your-flight-conatainer">
+                <div class="basic">
+                    <h2>Basic </h2> 
+                </div>
+                <div class="smart">
+                    <h2>smart</h2>
+                </div>
+                <div class="permium">
+                    <h2>Permium</h2>
+                </div>
+            </div>
+            <div class="for-passangers">
+                <h2>For the passanagers </h2>
+            </div>
+            <div class="more-extracs">
+                <h2>Special meal on the board </h2>
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                    Rerum, maiores itaque eaque, id adipisci cumque atque mollitia 
+                    impedit blanditiis sint odio, autem eveniet dolorum earum pariatur
+                     quisquam accusantium similique nemo.
+                </p>
+            </div>
+            <div class="confirmation">
+                <button>Confirm</button>
+            </div>
+        </div>
+        <div class="your-booking">
+            <h2>
+                Your booking details :
+            </h2>
+            <div class="your-booking-container">
+                <img src="" alt="" class="your-booking-image">
+                <div class="your-booking-header">
+                    <div class="from-info">
+                        <p>Marrakech</p>
+                        <p>From</p>
+                        <p>17-10-2023</p>
+                    </div>
+                    <div class="logo-info">
+                        🛫
+                    </div>
+                    <div class="to-info">
+                        <p>Istanbul </p>
+                        <p>to</p>
+                        <p>18-10-2023</p>
+                    </div>
+                </div>
+                <div class="booking-details">
+                    <hr>
+                    <div class="passnger">
+                        <p>1 Passenger</p>
+                        <p>430.33</p>
+                    </div>
+                    <hr>
+                    <div class="your-booking-total">
+                        <p>Total </p>
+                        <h2>494.22$</h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/static/css/reservation-details.css b/src/main/webapp/static/css/reservation-details.css
new file mode 100644
index 0000000..377f9d6
--- /dev/null
+++ b/src/main/webapp/static/css/reservation-details.css
@@ -0,0 +1,49 @@
+
+
+.reservation-details-container{
+    display: grid;
+    grid-template-columns: 2fr 1fr ;
+    gap: 2rem;
+}
+
+.your-booking-header{
+    display: flex;
+    justify-content: space-between;
+    justify-items: center;
+    align-items: center;
+    text-align: center;
+}
+.your-booking-header p{
+    margin: 0.4rem;
+    /* padding: 0.1rem; */
+}
+
+.your-booking-total{
+    display: flex;
+    justify-content: space-between;
+    justify-items: center;
+
+}
+
+.your-booking{
+    border: 2px solid #bbb;
+    border-radius: 5px;
+    padding: 1rem;
+
+}
+.booking-details  > .passnger{
+    display: flex;
+    justify-content: space-between;
+}
+
+.confirmation{
+    display: grid;
+    grid-template-columns: 1fr ;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-top: 90%;
+
+}
+
diff --git a/src/main/webapp/static/css/vol-card.css b/src/main/webapp/static/css/vol-card.css
index 33dfdee..396fde9 100644
--- a/src/main/webapp/static/css/vol-card.css
+++ b/src/main/webapp/static/css/vol-card.css
@@ -79,7 +79,7 @@ div.rounded-divider {
     text-align: center;
 }
 
-.vol-reservation a{
+.vol-reservation a input{
     text-decoration: none;
     color: white;
     background-color: rgb(58, 58, 252);
@@ -92,6 +92,18 @@ div.rounded-divider {
 
 }
 
+.button-reservation{
+    text-decoration: none;
+    color: white;
+    background-color: rgb(58, 58, 252);
+    padding: 0.5rem;
+    border-radius: 5px;
+    /* min-width: 100px; */
+    text-align: center;
+    margin: 0.5rem;
+    grid-row: span 2;
+}
+
 .vol-reservation h3{
     grid-row: span 4;
 }
diff --git a/src/main/webapp/templates/footer.jsp b/src/main/webapp/templates/footer.jsp
index 22248ea..4cdfd0d 100644
--- a/src/main/webapp/templates/footer.jsp
+++ b/src/main/webapp/templates/footer.jsp
@@ -35,7 +35,7 @@
             <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
                 <h3 class="footer-heading mb-4">Promo</h3>
                 <a href="#" class="block-6">
-                    <img src="static/images/hero_1.jpg" alt="Image placeholder" class="img-fluid rounded mb-4">
+                    <img src="https://images.ctfassets.net/m9ph4qvas97u/4VYlrTPvr4aa92PEHhyTuJ/5272b54d2f7e686ce08202119384d800/oneworld-alliance-royal-air-maroc-RAM_logo_horizontal.png?fm=webp&q=80" alt="Image placeholder" class="img-fluid rounded mb-4">
                     <h3 class="font-weight-light  mb-0">Finding Your Perfect Shoes</h3>
                     <p>Promo from nuary 15 &mdash; 25, 2019</p>
                 </a>