diff --git a/app.js b/app.js
index ace05dc1b3762f670805a908b67ba7b3d5160038..77be80c51a8d33e32e17f4fa3bdd30f849aaca54 100644
--- a/app.js
+++ b/app.js
@@ -112,7 +112,7 @@ app.use(function(err, req, res, next) {
 
   // render the error page
   res.status(err.status || 500);
-  res.render('error');
+  res.render('error', {title: 'ERREUR'});
 });
 
 module.exports = app;
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 910a8befcb44ab516ae713550aaf053beb33dbf0..ced89f440400f3337ac25ebd46aae8aae923618a 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,37 +1,81 @@
+:root {
+  --bg-color: #e3e7f1;
+  --sh-color: #494ca2;
+  --fg-color: #222;
+  --hl-color: #8186d5;
+}
+
 body {
   margin: 0;
   padding: 0;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background: var(--bg-color);
+}
+
+body > main {
+  box-sizing: border-box;
+  padding: 25px;
 }
 
 .msgs {
   display: flex;
   flex-direction: column;
-  position: absolute;
-  left:0;
+  position: fixed;
+  right: 0;
   bottom: 0;
-  margin: 0 0 15px 15px;
+  margin: 0 15px 15px 0;
   min-width: 150px;
 }
 
-#create-form {
-  overflow: hidden;
-  width: min-content;
-}
-
-form > fieldset, form > button {
-  margin-top: 5%;
+fieldset, form > button {
+  margin-top: 15px;
 }
 
 div.form-input {
-  display: inline-block;
   margin-bottom: 15px;
+  color: var(--bg-color);
+  font-weight: bold;
 }
 
 span.error-message {
   color: red;
 }
 
+textarea {
+  border: solid 2px var(--fg-color);
+  border-radius: 5px;
+}
+
+fieldset {
+  border-color: var(--sh-color);
+}
+
+figure {
+  margin: 15px 7px;
+}
+
+legend {
+  color: var(--bg-color);
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.form-input > label {
+  font-weight: bold;
+  color: var(--fg-color);
+  font-size: 1.2em;
+}
+
+.form-input > ul {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+}
+
+.form-input > ul > li {
+  list-style-type: none;
+}
+
 .msg {
   display: flex;
   justify-content: space-between;
@@ -67,23 +111,260 @@ span.error-message {
   cursor: pointer;
 }
 
-.ad-photos {
+.ad-pictures {
   display: flex;
   align-items: center;
-  width: 100%;
-  max-width: 750px;
   justify-content: space-around;
+  /*Forced to specify a width here, otherwise container warps outside of parent*/
+  width: 610px;
 }
 
-.ad-photos > img {
+.ad-pictures > img {
   box-sizing: border-box;
-  border: solid 2px black;
-  padding: 2px;
-  max-width: 25%;
-  height: 100%;
+  border: solid 5px var(--bg-color);
+  border-radius: 5px;
+  background: var(--sh-color);
+  flex: 1;
+  height: auto;
   margin-bottom: 15px;
+  box-shadow: 0 0 5px var(--fg-color);
+  margin: 0 7px;
 }
 
 .reply-form {
   display: none;
+}
+
+.ad {
+  box-sizing: border-box;
+  box-shadow: 0 0 8px var(--fg-color);
+  border-radius: 15px;
+  padding: 25px;
+  width: 700px;
+  background: var(--hl-color);
+  color: var(--fg-color);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+}
+
+.ad-preview {
+  width: 400px;
+}
+
+.ad-infos {
+  margin-bottom: 15px;
+}
+
+.infos-title > h2 {
+  margin: 0;
+  margin-bottom: 0.33em;
+}
+
+.infos-title > h1 {
+  color: var(--bg-color);
+  font-size: 1.8em;
+  margin: 0;
+}
+
+.infos-details {
+  width: 100%;
+  color: var(--bg-color);
+  font-size: 1.2em;
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+
+.ad-details > h2 {
+  margin: 0;
+}
+
+.infos-item > p, .infos-item > time {
+  margin: 0;
+  font-size: 1.3em;
+}
+
+.infos-item > h4 {
+  margin-bottom: 5px;
+  color: var(--fg-color)
+}
+
+.ad-description {
+  color: var(--bg-color);
+  font-size: 1.2em;
+}
+
+button, input[type=submit], a {
+  box-sizing: border-box;
+  background: var(--fg-color);
+  color: var(--bg-color);
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 1.2em;
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+  width: max-content;
+  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+button.alt, input.alt[type=submit], a.alt {
+  background: var(--hl-color);
+  color: var(--bg-color);
+  font-weight: bold;
+}
+
+button:hover, input[type=submit]:hover, a:hover {
+  color: var(--hl-color);
+}
+
+button.alt:hover, input.alt[type=submit]:hover, a.alt:hover {
+  background: var(--sh-color);
+  color: var(--bg-color);
+  font-weight: bold;
+}
+
+button:active, input[type=submit]:active, a:active {
+  background: var(--sh-color);
+  color: var(--fg-color);
+}
+
+.ad-questions {
+  margin-bottom: 15px;
+}
+
+.questions-details > .question:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.question {
+  background: var(--sh-color);
+  padding: 15px;
+  border-radius: 15px;
+  border: solid 3px var(--fg-color);
+  color: var(--bg-color);
+}
+
+.question > main, .reply > main {
+  font-size: 1.2em;
+}
+
+.question > time, .reply > time {
+  font-weight: bold;
+  margin-left: 3em;
+}
+
+.reply {
+  margin-left: 2em;
+}
+
+.reply:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.reply-control {
+  margin-top: 5px;
+}
+
+.reply-btn {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.m-t {
+  margin-top: 5px;
+}
+
+.m-b {
+  margin-bottom: 5px;
+}
+
+.m-l {
+  margin-left: 5px;
+}
+
+.m-r {
+  margin-right: 5px;
+}
+
+.m-t-lg {
+  margin-top: 20px;
+}
+
+.m-b-lg {
+  margin-bottom: 20px;
+}
+
+.m-l-lg {
+  margin-left: 20px;
+}
+
+.m-r-lg {
+  margin-right: 20px;
+}
+
+.ads {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  background: var(--hl-color);
+  box-shadow: 0 2px 5px black;
+  margin-bottom: 5px;
+  padding-top: 5px;
+}
+
+nav>.auth-links, nav>.nav-links {
+  display: flex;
+  align-items: center;
+}
+
+.nav-links a {
+  background: transparent;
+  color: var(--bg-color);
+  font-weight: bold;
+  font-size: 1.4em;
+  cursor: pointer;
+}
+
+.nav-links a:hover {
+  color: var(--fg-color);
+}
+
+.nav-links a:active {
+  color: var(--sh-color);
+}
+
+.auth-links {
+  font-size: 1.2em;
+  color: var(--bg-color);
+}
+
+.auth-links a, .auth-links button {
+  box-sizing: border-box;
+  font-size: 0.9em;
+  padding: 5px 10px;
+  height: max-content;
+  font-weight: bold;
+}
+
+.auth-form {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.auth-form > .form-input {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-input > select {
+  width: min-content;
 }
\ No newline at end of file
diff --git a/routes/ads.js b/routes/ads.js
index 7f8b76d8b7d2c5dcf2977b9d3e6928e1d862eab3..660be336cd46899f3c800b7d195dddb7e41f17e8 100644
--- a/routes/ads.js
+++ b/routes/ads.js
@@ -10,56 +10,67 @@ const upload = multer({
 });
 
 /* GET to get to get to the ad creation form */
-router.get('/create', authorize('agent'), function(req, res, next) {
-  res.render('ads/create');
-})
-    .post('/create', authorize('agent'),
-        upload.array('pictures', 3), function(req, res, next) {
-          const body = req.body;
-          const id = body.id;
-
-          const formData = {
-            title: body.title,
-            type: body.type,
-            transactionStatus: body.transactionStatus,
-            price: body.price && body.price.replace(',', '.'),
-            published: body.published === 'on',
-            description: body.description,
-            availabilityDate: body.availabilityDate === '' ?
-        null : body.availabilityDate,
-          };
-
-          errCallback = (reason) => res.status(406).render('ads/create', reason);
+router
+    .get('/create', authorize('agent'), function(req, res) {
+      res.render('ads/create', {title: 'Créer annonce'});
+    })
+    .post('/create', authorize('agent'), upload.array('pictures', 3), function(
+        req,
+        res,
+    ) {
+      const body = req.body;
+      const id = body.id;
+
+      const formData = {
+        title: body.title,
+        type: body.type,
+        transactionStatus: body.transactionStatus,
+        price: body.price.replace(',', '.'),
+        published: body.published === 'on',
+        description: body.description,
+        availabilityDate:
+        body.availabilityDate === '' ? null : body.availabilityDate,
+      };
 
-          if (req.files && req.files.length) {
-            formData.pictures = req.files.map((f) => ({
-              name: f.fieldName,
-              body: f.buffer,
-            }));
-          }
+      if (req.files.length) {
+        formData.pictures = req.files.map((f) => ({
+          name: f.fieldName,
+          body: f.buffer,
+        }));
+      }
+
+      if (id) {
+      // Peut-être charger l'objet en amont et le retourner si erreur ?
+        adModel.Ad.updateOne({_id: id}, {$set: formData})
+            .exec()
+            .then(() => {
+              req.flash('success', 'Mise à jour réussie !');
+              res.redirect('/ads/');
+            })
+            .catch((reason) => {
+              res.render('ads/create', {
+                title: 'Modifier annonce',
+                errors: reason.errors,
+              });
+            });
+      } else {
+        const newAd = new adModel.Ad(formData);
 
-          if (id) {
-            // Peut-être charger l'objet en amont et le retourner si erreur ?
-            adModel.Ad.updateOne({_id: id}, {$set: formData}).exec()
-                .then((value) => {
-                  req.flash('success', 'Mise à jour réussie !');
-                  res.redirect('/ads/');
-                })
-                .catch((reason) => {
-                  errCallback(reason);
-                });
-          } else {
-            const newAd = new adModel.Ad(formData);
-
-            newAd.save()
-                .then((value) => {
-                  res.redirect('/ads/');
-                })
-                .catch((reason) => {
-                  errCallback(reason);
-                });
-          }
-        })
+        newAd
+            .save()
+            .then(() => {
+              req.flash('success', 'Mise à jour réussie !');
+              res.redirect('/ads/');
+            })
+            .catch((reason) => {
+              console.error(reason);
+              res.render('ads/create', {
+                title: 'Créer annonce',
+                errors: reason.errors,
+              });
+            });
+      }
+    })
     .get('/update/:id', authorize('agent'), function(req, res, next) {
       const id = req.params.id;
       let status;
@@ -78,8 +89,7 @@ router.get('/create', authorize('agent'), function(req, res, next) {
               req.flash('success', 'Mise à jour réussie !');
             }
 
-            res.status(status)
-                .render('ads/create', {ad: ad, errors_update: errors});
+            res.render('ads/create', {title: 'Modifier annonce', ad: ad, errors_update: errors});
           });
     })
     .get('/delete/:id', authorize('agent'), deleteAdAction)
@@ -169,6 +179,7 @@ router.get('/create', authorize('agent'), function(req, res, next) {
 
             // on trie les annonces par ordre alphabétique
             res.render('ads/index', {
+              title: 'Annonces',
               ads: {
                 published: publishedAds,
                 notPublished: notPublishedAds,
@@ -179,6 +190,7 @@ router.get('/create', authorize('agent'), function(req, res, next) {
             console.error(err);
             res.status(500);
             res.render('ads/index', {
+              title: 'Annonces',
               ads: [],
               _messages: [
                 ...res.locals._messages,
@@ -199,7 +211,7 @@ function renderAdAction(published) {
     adModel.Ad.findOne({_id: req.params.id, published}, {'pictures.body': 0})
         .then((ad) => {
           if (ad) {
-            res.render('ads/show', {ad});
+            res.render('ads/show', {title: ad.title, ad});
           } else {
             req.flash('error', 'L\'annonce demandé n\'a pas été trouvé');
             res.redirect('/');
diff --git a/routes/auth.js b/routes/auth.js
index eff9aabe56034cc7d2dd88f0fd053dd33cdcd043..797ba6d76bb8dc2ae525fa2b6ca78ee250fa2515 100644
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -9,6 +9,7 @@ const users = require('../models/user');
 router
     .get('/register', function(req, res, next) {
       res.render('register', {
+        title: 'Inscription',
         roles: Object.values(users.USER_ROLE),
       });
     })
@@ -42,7 +43,7 @@ router
           .catch(next);
     })
     .get('/login', function(req, res, next) {
-      res.render('login');
+      res.render('login', {title: 'Connexion'});
     })
     .post('/login', function(req, res, next) {
       passport.authenticate('local', function(err, user, info) {
diff --git a/views/ads/create.hbs b/views/ads/create.hbs
index 1572d361eae40df247ad9cbd740694455ee3e3f6..0ed3e582395fe204a1065f12b90c787d5577b720 100644
--- a/views/ads/create.hbs
+++ b/views/ads/create.hbs
@@ -1,105 +1,113 @@
-<article>
-
-  <header>
-    <h1>Créer une annonce immobilière</h1>
-
-    <mark class="error-message">
-      {{#each errors_update}}
-      <p>{{this}}</p>
-      {{/each}}
-    </mark>
-  </header>
-
-  <form id="create-form" action="/ads/create" method="POST" enctype="multipart/form-data">
-    <section class="form-input">
-      <label for="title">Titre de l'annonce<span class="required">*</span></label>
-      <input id="title" name="title" type="text" aria-required="true" value="{{ad.title}}" required />
-      <mark class="error-message" role="alert">{{errors.title.message}}</mark>
-    </section>
-
-    <!-- informations de base -> type de bien, statut de la transaction, prix, date de dispo et si l'annonce est publiée -->
-    <fieldset>
-      <legend>Informations sur l'annonce</legend>
-
-      <section class="form-input">
+<h1>Créer une annonce immobilière</h1>
+
+<div class="error-message">
+  {{#each errors_update}}
+  <p>{{this}}</p>
+  {{/each}}
+</div>
+
+<form id="create-form" action="/ads/create" method="POST" class="ad" role="none" enctype="multipart/form-data">
+  <section class="ad-infos">
+  <div class="form-input infos-item">
+    <label for="title">Titre de l'annonce<span class="required">*</span></label>
+    <input id="title" name="title" type="text" aria-required="true" value="{{ad.title}}" required />
+    <span class="error-message">{{errors.title.message}}</span>
+  </div>
+
+  <!-- informations de base -> type de bien, statut de la transaction, prix, date de dispo et si l'annonce est publiée -->
+  <fieldset>
+    <legend>Informations sur l'annonce</legend>
+    <!-- Discard details font size shift -->
+    <section class="infos-details" style="font-size: unset">
+      <div class="form-input">
         <label for="type" id="type-label">Type de bien<span class="required">*</span></label>
         <ul aria-labelledby="type-label" role="radiogroup" aria-required="true">
-          <input id="t1" name="type" type="radio" value="sale" required
-            {{#ifEquals ad.type "sale"}}checked{{/ifEquals}} /> A la vente
-          <input id="t2" name="type" type="radio" value="rental" required
-            {{#ifEquals ad.type "rental"}}checked{{/ifEquals}} /> A la location
+          <li>
+            <input id="t1" name="type" type="radio" value="sale" required
+              {{#ifEquals ad.type "sale"}}checked{{/ifEquals}} /> A la vente
+          </li>
+          <li>
+            <input id="t2" name="type" type="radio" value="rental" required
+              {{#ifEquals ad.type "rental"}}checked{{/ifEquals}} /> A la location
+          </li>
         </ul>
-        <mark class="error-message" role="alert">{{errors.type.message}}</mark>
-      </section>
+        <span class="error-message">{{errors.type.message}}</span>
+      </div>
 
-      <section class="form-input">
+      <div class="form-input">
         <label for="transactionStatus" id="status-label">Statut de la transaction<span class="required">*</span></label>
         <ul aria-labelledby="status-label" role="radiogroup" aria-required="true">
-          <input id="s1" name="transactionStatus" type="radio" value="available" required
-            {{#ifEquals ad.transactionStatus "available"}}checked{{/ifEquals}} /> Disponible
-          <input id="s2" name="transactionStatus" type="radio" value="rented" required
-            {{#ifEquals ad.transactionStatus "rented"}}checked{{/ifEquals}} /> Louée
-          <input id="s3" name="transactionStatus" type="radio" value="sold" required
-            {{#ifEquals ad.transactionStatus "sold"}}checked{{/ifEquals}} /> Vendue
+          <li>
+            <input id="s1" name="transactionStatus" type="radio" value="available" required
+              {{#ifEquals ad.transactionStatus "available"}}checked{{/ifEquals}} /> Disponible
+          </li>
+          <li>
+            <input id="s2" name="transactionStatus" type="radio" value="rented" required
+              {{#ifEquals ad.transactionStatus "rented"}}checked{{/ifEquals}} /> Louée
+          </li>
+          <li>
+            <input id="s3" name="transactionStatus" type="radio" value="sold" required
+              {{#ifEquals ad.transactionStatus "sold"}}checked{{/ifEquals}} /> Vendue
+          </li>
         </ul>
-        <mark class="error-message" role="alert">{{errors.transactionStatus.message}}</mark>
-      </section>
+        <span class="error-message">{{errors.transactionStatus.message}}</span>
+      </div>
 
-      <section class="form-input">
+      <div class="form-input">
         <label for="price">Prix du bien<span class="required">*</span></label>
-        <section>
+        <div>
           <input id="price" name="price" type="text" pattern="\d+(,\d{2})?" aria-required="true"
             value="{{formatPrice ad.price}}" required class="price-input" /> €
-        </section>
-        <mark class="error-message" role="alert">{{errors.price.message}}</mark>
-      </section>
+        </div>
+        <span class="error-message">{{errors.price.message}}</span>
+      </div>
 
-      <section class="form-input">
-        <section>
+      <div class="form-input">
           <label for="published">Annonce publiée</label>
           <input id="published" name="published" type="checkbox"
             {{#unless ad}}checked{{else}}{{#if ad.published}}checked{{/if}}{{/unless}} />
-        </section>
-        <mark class="error-message" role="alert">{{errors.published.message}}</mark>
-      </section>
-    </fieldset>
-
-    <!-- détails -> description longue et éventuelles photos -->
-    <fieldset>
-      <legend>Détails de l'annonce</legend>
-
-      <section class="form-input">
-        <label for="pictures">Photos (3 max)</label>
-        <input id="pictures" name="pictures" type="file" accept="img/*" multiple />
-        <mark class="error-message" role="alert">{{errors.pictures.message}}</mark>
-      </section>
-
-      <figure id="pictures-display" class="ad-photos" role="presentation">
-        {{#with ad as |ad|}}
-        {{#each ad.pictures}}
-        <img src="/ads/{{ad._id}}/picture/{{@index}}" alt="{{title}}" />
-        {{/each}}
-        {{/with}}
-      </figure>
-
-      <section class="form-input">
-        <label for="description">Description du bien</label>
-        <textarea id="description" name="description" rows="5" cols="80">{{ad.description}}</textarea>
-        <mark class="error-message" role="alert">{{errors.description.message}}</mark>
-      </section>
-
-      <section class="form-input">
-        <label for="availabilityDate">Date de disponibilité</label>
-        <input id="availabilityDate" name="availabilityDate" type="date" lang="fr-FR"
-          value="{{dateToISO ad.availabilityDate}}" />
-        <mark class="error-message" role="alert">{{errors.date.message}}</mark>
-      </section>
-    </fieldset>
-
-    <input name="id" type="hidden" value="{{ad._id}}" />
-
+        <span class="error-message">{{errors.published.message}}</span>
+      </div>
+    </section>
+  </fieldset>
+
+  <!-- détails -> description longue et éventuelles photos -->
+  <fieldset>
+    <legend>Détails de l'annonce</legend>
+
+    <div class="form-input">
+      <label for="pictures">Photos (3 max)</label>
+      <input id="pictures" name="pictures" type="file" accept="img/*" multiple />
+      <span class="error-message">{{errors.pictures.message}}</span>
+    </div>
+
+    <div id="pictures-display" class="ad-pictures">
+      {{#with ad as |ad|}}
+      {{#each ad.pictures}}
+      <img src="/ads/{{ad._id}}/picture/{{@index}}" alt="{{title}}" />
+      {{/each}}
+      {{/with}}
+    </div>
+
+    <div class="form-input">
+      <label for="description">Description du bien</label>
+      <textarea id="description" name="description" rows="5" cols="60">{{ad.description}}</textarea>
+      <span class="error-message">{{errors.description.message}}</span>
+    </div>
+
+    <div class="form-input">
+      <label for="availabilityDate">Date de disponibilité</label>
+      <input id="availabilityDate" name="availabilityDate" type="date" lang="fr-FR"
+        value="{{dateToISO ad.availabilityDate}}" />
+      <span class="error-message">{{errors.date.message}}</span>
+    </div>
+  </fieldset>
+  </section>
+
+  <input name="id" type="hidden" value="{{ad._id}}" />
+  <footer>
     <button type="submit">Envoyer</button> <button type="reset">Effacer</button>
-  </form>
-</article>
+  </footer>
+</form>
 
 <script src="/javascript/livePictures.js"></script>
\ No newline at end of file
diff --git a/views/ads/index.hbs b/views/ads/index.hbs
index 66ef9cbfb17511e239bdf07bbc2de34c14873e67..71b4549d887c275ed54ee0fb053ee9a8f77a745c 100644
--- a/views/ads/index.hbs
+++ b/views/ads/index.hbs
@@ -1,48 +1,80 @@
 {{#authorize "agent"}}
 <h1>Annonces non publiées</h1>
 
-<a href="/ads/create">Nouvelle annonce</a>
+<a href="/ads/create" class="m-b-lg alt">Nouvelle annonce</a>
 
-{{#each ads.notPublished}}
-<article>
-  <section>
-    <h1>{{title}}</h1>
-    <section>
-      <p>Type : {{getEnumValue "type" type}}</p>
-      <p>Statut : {{getEnumValue "transactionStatus" transactionStatus}}</p>
-      <p>Prix : {{formatPrice price}} €</p>
-    </section>
-    <time>Disponible le {{dateToLocaleString availabilityDate}}</time>
-  </section>
-  <footer>
-    <a href="/ads/draft/{{_id}}">Voir</a>
-    <button onclick="deleteAd('{{_id}}')">Supprimer</button>
-  </footer>
-</article>
-{{/each}}
+<section class="ads">
+  {{#each ads.notPublished}}
+  <article class="ad ad-preview">
+    <main class="ad-infos">
+      <header class="infos-title">
+        <h1>{{title}}</h1>
+      </header>
+      <section class="infos-details">
+        <section class="infos-item">
+          <h4>Type</h4>
+          <p>{{getEnumValue "type" type}}</p>
+        </section>
+        <section class="infos-item">
+          <h4>Statut</h4>
+          <p>{{getEnumValue "transactionStatus" transactionStatus}}</p>
+        </section>
+        <section class="infos-item">
+          <h4>Prix</h4>
+          <p>{{formatPrice price}} €</p>
+        </section>
+        <section class="infos-item">
+          <h4>Disponible le</h4>
+          <time>{{dateToLocaleString availabilityDate}}</time>
+        </section>
+      </section>
+    </main>
+    <footer>
+      <a href="/ads/draft/{{_id}}">Voir</a>
+      <button onclick="deleteAd('{{_id}}')">Supprimer</button>
+    </footer>
+  </article>
+  {{/each}}
+</section>
 {{/authorize}}
 
 <h1>Liste des annonces immobilières</h1>
 
-{{#each ads.published}}
-<article>
-  <section>
-    <h1>{{title}}</h1>
-    <section>
-      <p>Type : {{getEnumValue "type" type}}</p>
-      <p>Statut : {{getEnumValue "transactionStatus" transactionStatus}}</p>
-      <p>Prix : {{formatPrice price}} €</p>
-    </section>
-    <time>Disponible le {{dateToLocaleString availabilityDate}}</time>
-  </section>
-  <footer>
-    <a href="/ads/{{_id}}">Voir</a>
-    {{#authorize "agent"}}
-    <button onclick="deleteAd('{{_id}}')">Supprimer</button>
-    {{/authorize}}
-  </footer>
-</article>
-{{/each}}
+<section class="ads">
+  {{#each ads.published}}
+  <article class="ad ad-preview">
+    <main class="ad-infos">
+      <header class="infos-title">
+        <h1>{{title}}</h1>
+      </header>
+      <section class="infos-details">
+        <section class="infos-item">
+          <h4>Type</h4>
+          <p>{{getEnumValue "type" type}}</p>
+        </section>
+        <section class="infos-item">
+          <h4>Statut</h4>
+          <p>{{getEnumValue "transactionStatus" transactionStatus}}</p>
+        </section>
+        <section class="infos-item">
+          <h4>Prix</h4>
+          <p>{{formatPrice price}} €</p>
+        </section>
+        <section class="infos-item">
+          <h4>Disponible le</h4>
+          <time>{{dateToLocaleString availabilityDate}}</time>
+        </section>
+      </section>
+    </main>
+    <footer>
+      <a href="/ads/{{_id}}">Voir</a>
+      {{#authorize "agent"}}
+      <button onclick="deleteAd('{{_id}}')">Supprimer</button>
+      {{/authorize}}
+    </footer>
+  </article>
+  {{/each}}
+</section>
 
 {{#authorize "agent"}}
 <script src="/javascript/adDelete.js"></script>
diff --git a/views/ads/show.hbs b/views/ads/show.hbs
index 40ff5b160a4fcec00e93645941726d03f19b87e1..becc5c4791d2ab76eb92e7d765fa708e34a25abc 100644
--- a/views/ads/show.hbs
+++ b/views/ads/show.hbs
@@ -1,16 +1,31 @@
-<article>
-  <header>
-    <h1>Propriété : {{ad.title}}</h1>
-    <section>
-      <p>Type : {{getEnumValue "type" ad.type}}</p>
-      <p>Statut : {{getEnumValue "transactionStatus" ad.transactionStatus}}</p>
-      <p>Prix : {{formatPrice ad.price}} €</p>
+<article class="ad">
+  <header class="ad-infos">
+    <header class="infos-title">
+      <h2>Propriété</h2>
+      <h1>{{ad.title}}</h1>
+    </header>
+    <section class="infos-details">
+      <section class="infos-item">
+        <h4>Type</h4>
+        <p>{{getEnumValue "type" ad.type}}</p>
+      </section>
+      <section class="infos-item">
+        <h4>Statut</h4>
+        <p>{{getEnumValue "transactionStatus" ad.transactionStatus}}</p>
+      </section>
+      <section class="infos-item">
+        <h4>Prix</h4>
+        <p>{{formatPrice ad.price}} €</p>
+      </section>
+      <section class="infos-item">
+        <h4>Disponible le</h4>
+        <time>{{dateToLocaleString ad.availabilityDate}}</time>
+      </section>
     </section>
-    <time>Disponible le {{dateToLocaleString ad.availabilityDate}}</time>
   </header>
-  <section>
+  <section class="ad-details">
     <h2>Images</h2>
-    <figure class="ad-photos">
+    <figure class="ad-pictures">
       {{#with ad as |ad|}}
       {{#each ad.pictures}}
       <img src="/ads/{{ad._id}}/picture/{{@index}}" alt="{{title}}" />
@@ -18,23 +33,24 @@
       {{/with}}
     </figure>
     <h2>Description</h2>
-    <p>{{ad.description}}</p>
+    <p class="ad-description">{{ad.description}}</p>
   </section>
-  <section>
+  {{#if ad.published}}
+  <section class="ad-questions">
     <header>
       <h2>Questions</h2>
     </header>
     {{#authorize "client"}}
-    <section>
+    <section class="question-form">
       <h3>Poser une question</h3>
       <form action="/ads/{{ad._id}}/questions/create" method="POST">
         <textarea name="body" rows="2" cols="60" placeholder="Écrire ici...">
-        </textarea><br/>
-        <input type="submit" value="Envoyer"/>
+        </textarea><br />
+        <input class="m-t" type="submit" value="Envoyer" />
       </form>
     </section>
     {{/authorize}}
-    <details class="questions">
+    <details class="questions-details">
       <summary>
         <h3 style="display: inline-block;">
           Voir les questions
@@ -44,45 +60,48 @@
       {{#each ad.questions}}
       <section class="question">
         <main>
-          <p>{{body}}</p>
+          {{body}}
         </main>
         <time>Posée le {{dateToLocaleString date}} par {{author}}</time>
         {{#authorize "agent"}}
         <section class="reply-control">
           <button class="reply-btn">Répondre</button>
           <section class="reply-form" data-shown="f">
-            <form
-                action="/ads/{{ad._id}}/questions/{{_id}}/answers/create"
-                method="POST">
+            <form action="/ads/{{ad._id}}/questions/{{_id}}/answers/create" method="POST">
               <textarea name="body" rows="2" cols="60" placeholder="Écrire ici...">
-              </textarea><br/>
-              <input type="submit" value="Envoyer"/>
+              </textarea><br />
+              <input type="submit" value="Envoyer réponse" />
             </form>
           </section>
         </section>
         {{/authorize}}
         {{#if this.answers.length}}
-        <details class="replies">
-            <summary>Réponses</summary>
-            {{#each this.answers}}
-            <section class="reply">
-              <main>
-                <p>{{body}}</p>
-              </main>
-              <time>Réponse de {{author}} le {{dateToLocaleString date}}</time>
-            </section>
-            {{/each}}
-          </details>
-        </section>
+        <details class="replies-details">
+          <summary>
+            <h4 style="display: inline-block;">
+              Réponses
+            </h4>
+          </summary>
+          {{#each this.answers}}
+          <section class="reply">
+            <main>
+              {{body}}
+            </main>
+            <time>Réponse de {{author}} le {{dateToLocaleString date}}</time>
+          </section>
+          {{/each}}
+        </details>
         {{else}}
         <p>Aucune réponse</p>
         {{/if}}
+      </section>
       {{else}}
       <p>Aucune question.</p>
       {{/each}}
       {{/with}}
     </details>
   </section>
+  {{/if}}
   {{#authorize "agent"}}
   <footer>
     <a href="/ads/update/{{ad._id}}">Mettre à jour</a>
diff --git a/views/layout.hbs b/views/layout.hbs
index d3b80812a43ee03b7c76e65bffc220a3e76eaf29..42140c43920e7809874a2e9bb9c43974b464a038 100644
--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -1,10 +1,24 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>{{title}}</title>
+    <title>Immoweb - {{title}}</title>
     <link rel='stylesheet' href='/stylesheets/style.css' />
   </head>
   <body>
+    <nav>
+      <section class="nav-links">
+        <a href="/ads/">Accueil</a>
+      </section>
+      <section class="auth-links">
+        {{#if _user}}
+          <p>Connecté en tant que <b>{{_user.name}}</b></p>
+          <a class="m-l-lg m-r-lg" href="/logout">Se Deconnecter</a>
+        {{else}}
+          <a class="m-l" href="/login">Connexion</a>
+          <a class="m-l m-r-lg" href="/register">Inscription</a>
+        {{/if}}
+      </section>
+    </nav>
     <main>
       {{{body}}}
     </main>
diff --git a/views/login.hbs b/views/login.hbs
index bf1dcf2a23af607c161c86622b2dbf4b3f03edd5..1bbec10a6613c3a91e5670c8f6bd28f5b70bfe73 100644
--- a/views/login.hbs
+++ b/views/login.hbs
@@ -1,11 +1,13 @@
 <form method="POST" action="/login">
-    <div>
-        <label>Email</label>
-        <input required type="text" name="username"/>
+  <article class="auth-form">
+    <div class="form-input">
+      <label>Email</label>
+      <input required type="text" name="username" />
     </div>
-    <div>
-        <label>Mot de passe</label>
-        <input required type="password" name="password"/>
+    <div class="form-input">
+      <label>Mot de passe</label>
+      <input required type="password" name="password" />
     </div>
-    <input type="submit" value="Se connecter"/>
+    <input type="submit" value="Se connecter" />
+  </article>
 </form>
\ No newline at end of file
diff --git a/views/register.hbs b/views/register.hbs
index 558a4aa1fd534b7520604cbff27428c64690d69e..491225147ff38fa3ea75903751d2e585463a6e6c 100644
--- a/views/register.hbs
+++ b/views/register.hbs
@@ -1,23 +1,25 @@
 <form method="POST" action="/register">
-  <div>
-    <label>Nom</label>
-    <input required type="text" name="name" />
-  </div>
-  <div>
-    <label>Rôle</label>
-    <select name="role">
-      {{#each roles}}
+  <section class="auth-form">
+    <div class="form-input">
+      <label>Nom</label>
+      <input required type="text" name="name" />
+    </div>
+    <div class="form-input">
+      <label>Rôle</label>
+      <select name="role">
+        {{#each roles}}
         <option value="{{this}}">{{this}}</option>
-      {{/each}}
-    </select>
-  </div>
-  <div>
-    <label>Email</label>
-    <input required type="text" name="email" />
-  </div>
-  <div>
-    <label>Mot de passe</label>
-    <input required type="password" minlength="8" name="password" />
-  </div>
-  <input type="submit" value="S'inscrire" />
+        {{/each}}
+      </select>
+    </div>
+    <div class="form-input">
+      <label>Email</label>
+      <input required type="text" name="email" />
+    </div>
+    <div class="form-input">
+      <label>Mot de passe</label>
+      <input required type="password" minlength="8" name="password" />
+    </div>
+    <input type="submit" value="S'inscrire" />
+  </section>
 </form>
\ No newline at end of file