diff --git a/web/themes/custom/reha/dist/bundle.js b/web/themes/custom/reha/dist/bundle.js
index ba04e88..8ecc928 100644
--- a/web/themes/custom/reha/dist/bundle.js
+++ b/web/themes/custom/reha/dist/bundle.js
@@ -15,7 +15,7 @@
   \********************/
 /***/ (() => {
 
-eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n  'use strict';\n\n  Drupal.behaviors.reha = {\n    attach: function (context, settings) {\n\n      console.log('It works!');\n\n    }\n  };\n\n  \n} (Drupal));\n\njQuery(document).ready(function($){\n\n  // menu déroulant\n\n  //////////////  contacts ///////\n\n  $(\".bouton-contact\").click(function(event) {\n        // Fermer .connexion-full s'il est déroulé\n  if ($(\".connexion-full\").is(\":visible\")) {\n    $(\".connexion-full\").slideUp();\n  }\n  if ($(\".connected-full\").is(\":visible\")) {\n    $(\".connected-full\").slideUp();\n  }\n    // Ouvrir .contacts-full\n    $(\".contacts-full\").slideToggle();\n\n  });\n\n//////////////  connexion ///////\n\n  $(\".bouton-connexion\").click(function(event) {\n      // Fermer .contacts-full s'il est déroulé\n  if ($(\".contacts-full\").is(\":visible\")) {\n    $(\".contacts-full\").slideUp();\n  }\n  // Ouvrir .connexion-full\n    $(\".connexion-full\").slideToggle();\n  });\n  \n  $(\".bouton-connected\").click(function(event) {\n    // Fermer .contacts-full s'il est déroulé\n    if ($(\".contacts-full\").is(\":visible\")) {\n      $(\".contacts-full\").slideUp();\n    }\n    // Ouvrir .connected-full\n    $(\".connected-full\").slideToggle();\n  });\n  \n  $(\".titre\").click(function(event) {\n    if ($(\".connected-full\").is(\":visible\")) {\n      $(\".connected-full\").slideUp();\n    }\n    if ($(\".contacts-full\").is(\":visible\")) {\n      $(\".contacts-full\").slideUp();\n    }\n    if ($(\".connexion-full\").is(\":visible\")) {\n      $(\".connexion-full\").slideUp();\n    }\n    // // Ouvrir .connexion-full\n    //   $(\".connected-full\").slideToggle();\n  });\n  \n  $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n    event.preventDefault();\n    // Ouvrir .connexion-full\n    $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n  });\n\n});\n\n\n//  slideshow home \n\n(function($, window) {\n  console.log('hello slick')\n  $(document).ready(function(){\n      $('.view-id-sites.view-display-id-block_1').slick({\n        slidesToShow: 1,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        centerMode: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: true,\n              arrows: false,\n              draggable: true,\n              centerMode: true,\n            }\n          }]\n      });\n      console.log('salut slick home');\n\n  });\n})(jQuery, window);\n\n\n// document.addEventListener('DOMContentLoaded', function() {\n//   var nav = document.querySelectorAll('main-nav');\n//   var links = nav.querySelectorAll('li > a');\n//   console.log(links);\n\n\n//   links.forEach(function(link) {\n//     if (link.classList.contains('is-active')) {\n//       nav.classList.add('has-active');\n//     }\n//   });\n// });\n\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n// (function($, window) {\n//   var adjustAnchor = function() {\n//       var $anchor = $('.block-views-blockhome-block-1'),\n//               fixedElementHeight = 350;\n//       if ($anchor.length > 0) {\n//           $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n//       }\n//   };\n\n//   $(window).on('hashchange', function() {\n//       adjustAnchor();\n//   });\n\n// })(jQuery, window);\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?");
+eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n  'use strict';\n\n  Drupal.behaviors.reha = {\n    attach: function (context, settings) {\n\n      console.log('It works!');\n\n    }\n  };\n\n  \n} (Drupal));\n\njQuery(document).ready(function($){\n\n  // menu déroulant\n\n  //////////////  contacts ///////\n\n  $(\".bouton-contact\").click(function(event) {\n        // Fermer .connexion-full s'il est déroulé\n  if ($(\".connexion-full\").is(\":visible\")) {\n    $(\".connexion-full\").slideUp();\n  }\n  if ($(\".connected-full\").is(\":visible\")) {\n    $(\".connected-full\").slideUp();\n  }\n    // Ouvrir .contacts-full\n    $(\".contacts-full\").slideToggle();\n\n  });\n\n//////////////  connexion ///////\n\n  $(\".bouton-connexion\").click(function(event) {\n      // Fermer .contacts-full s'il est déroulé\n  if ($(\".contacts-full\").is(\":visible\")) {\n    $(\".contacts-full\").slideUp();\n  }\n  // Ouvrir .connexion-full\n    $(\".connexion-full\").slideToggle();\n  });\n  \n  $(\".bouton-connected\").click(function(event) {\n    // Fermer .contacts-full s'il est déroulé\n    if ($(\".contacts-full\").is(\":visible\")) {\n      $(\".contacts-full\").slideUp();\n    }\n    // Ouvrir .connected-full\n    $(\".connected-full\").slideToggle();\n  });\n  \n  $(\".titre\").click(function(event) {\n    if ($(\".connected-full\").is(\":visible\")) {\n      $(\".connected-full\").slideUp();\n    }\n    if ($(\".contacts-full\").is(\":visible\")) {\n      $(\".contacts-full\").slideUp();\n    }\n    if ($(\".connexion-full\").is(\":visible\")) {\n      $(\".connexion-full\").slideUp();\n    }\n    // // Ouvrir .connexion-full\n    //   $(\".connected-full\").slideToggle();\n  });\n  \n  $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n    event.preventDefault();\n    // Ouvrir .connexion-full\n    $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n  });\n\n});\n\n\n//  slideshow home \n\n(function($, window) {\n  console.log('hello slick')\n  $(document).ready(function(){\n      $('.view-id-sites.view-display-id-block_1').slick({\n        slidesToShow: 1,\n        // slidesToScroll: 1,\n        dots: false,\n        arrows: true,\n        centerMode: true,\n        // centerPadding: '100px',\n        responsive: [\n          {\n            breakpoint: 810,\n            settings: {\n              slidesToShow: 1,\n              adaptiveHeight: true,\n              arrows: false,\n              draggable: true,\n              centerMode: true,\n            }\n          }]\n      });\n      console.log('salut slick home');\n\n  });\n\n  $(document).ready(function(){\n    $('.view-id-actus.view-display-id-block_1').slick({\n      slidesToShow: 3,\n      // slidesToScroll: 1,\n      dots: false,\n      arrows: true,\n      centerMode: true,\n      // centerPadding: '100px',\n      responsive: [\n        {\n          breakpoint: 810,\n          settings: {\n            slidesToShow: 1,\n            adaptiveHeight: true,\n            arrows: false,\n            draggable: true,\n            centerMode: true,\n          }\n        }]\n    });\n    console.log('salut slick home');\n\n});\n\n})(jQuery, window);\n\n\n// document.addEventListener('DOMContentLoaded', function() {\n//   var nav = document.querySelectorAll('main-nav');\n//   var links = nav.querySelectorAll('li > a');\n//   console.log(links);\n\n\n//   links.forEach(function(link) {\n//     if (link.classList.contains('is-active')) {\n//       nav.classList.add('has-active');\n//     }\n//   });\n// });\n\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n// (function($, window) {\n//   var adjustAnchor = function() {\n//       var $anchor = $('.block-views-blockhome-block-1'),\n//               fixedElementHeight = 350;\n//       if ($anchor.length > 0) {\n//           $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n//       }\n//   };\n\n//   $(window).on('hashchange', function() {\n//       adjustAnchor();\n//   });\n\n// })(jQuery, window);\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?");
 
 /***/ }),
 
diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css
index 22c2954..bdb62ea 100644
--- a/web/themes/custom/reha/dist/css/bundle.css
+++ b/web/themes/custom/reha/dist/css/bundle.css
@@ -1797,7 +1797,6 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 .view-display-id-page_1 .views-row {
   width: 30%;
@@ -1888,13 +1887,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   padding-bottom: 2rem;
 }
 .block-views-blockactus-block-1 .view-id-actus {
-  width: 80%;
+  width: 100%;
   margin: auto;
-  display: flex;
-  justify-content: space-between;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row {
-  width: 45%;
+  width: 30%;
+  padding-right: 2rem;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite {
   width: 100%;
@@ -1904,36 +1902,63 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite p.field__item {
   display: none;
 }
-.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .field--name-field-image {
-  order: 1;
-  max-width: 100%;
-  padding-bottom: 1rem;
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite {
+  width: 90%;
+  margin: auto;
 }
-.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .field--name-field-image img {
-  width: 80%;
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .image-actualite img {
+  width: 100%;
   height: auto;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content {
+  position: relative;
+  top: -10px;
   display: flex;
   flex-direction: column;
+  border: solid #fdc300 1px;
+  background-color: rgb(255, 255, 255);
+  padding: 1rem;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content h2 {
   order: 2;
   margin: 0;
-  padding: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-sous-titre {
   order: 3;
+  font-size: 1.3rem;
+}
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-date {
+  order: 4;
+  font-weight: 900;
+  padding-bottom: 1rem;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-type-d-actualite {
   order: 1;
   text-transform: uppercase;
+  font-size: 1.2rem;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-site {
   order: 5;
+  background-color: rgb(153, 147, 174);
+  color: white;
+  border-radius: 50px;
+  width: fit-content;
+  padding: 0.2rem 0.9rem;
 }
-.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-date {
-  order: 4;
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-site .field__item {
+  display: inline;
+}
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content .field--name-field-site a {
+  color: white;
+  font-weight: 900;
+  font-size: 0.8rem;
+  vertical-align: top;
+}
+.block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .infos-content ul.links {
+  order: 6;
+  display: none;
 }
 .block-views-blockactus-block-1 .view-id-actus .views-row .node-type-actualite .body-content {
   display: none;
@@ -2103,6 +2128,9 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-ressources .view-ressources .views-row .node-type-ressource .filtered-content {
   display: flex;
   flex-direction: column;
+  border: solid #fdc300 1px;
+  background-color: rgb(255, 255, 255);
+  padding: 1rem;
 }
 .page-ressources .view-ressources .views-row .node-type-ressource .filtered-content h2 {
   order: 2;
@@ -2172,4 +2200,69 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 }
 .page-node-site .node-type-ressource .body-content .field--name-field-fichiers {
   width: fit-content;
+}
+
+.page-actualites .view-actus {
+  padding-top: 3rem;
+  padding-bottom: 6rem;
+  width: 80%;
+  margin: auto;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .image-actualite {
+  width: 90%;
+  margin: auto;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .image-actualite img {
+  width: 100%;
+  height: auto;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content {
+  position: relative;
+  top: -10px;
+  display: flex;
+  flex-direction: column;
+  border: solid #fdc300 1px;
+  background-color: rgb(255, 255, 255);
+  padding: 1rem;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content h2 {
+  order: 2;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-sous-titre {
+  order: 3;
+  font-size: 1.3rem;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-date {
+  order: 4;
+  font-weight: 900;
+  padding-bottom: 1rem;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-type-d-actualite {
+  order: 1;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-site {
+  order: 5;
+  background-color: rgb(153, 147, 174);
+  color: white;
+  border-radius: 50px;
+  width: fit-content;
+  padding: 0.2rem 0.9rem;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-site .field__item {
+  display: inline;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content .field--name-field-site a {
+  color: white;
+  font-weight: 900;
+  font-size: 0.8rem;
+  vertical-align: top;
+}
+.page-actualites .view-actus .views-row .node-type-actualite .infos-content ul.links {
+  order: 6;
+  display: none;
 }
\ No newline at end of file
diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js
index b2d7cce..f9ac796 100644
--- a/web/themes/custom/reha/js/reha.js
+++ b/web/themes/custom/reha/js/reha.js
@@ -106,6 +106,31 @@ jQuery(document).ready(function($){
       console.log('salut slick home');
 
   });
+
+  $(document).ready(function(){
+    $('.view-id-actus.view-display-id-block_1').slick({
+      slidesToShow: 3,
+      // slidesToScroll: 1,
+      dots: false,
+      arrows: true,
+      centerMode: true,
+      // centerPadding: '100px',
+      responsive: [
+        {
+          breakpoint: 810,
+          settings: {
+            slidesToShow: 1,
+            adaptiveHeight: true,
+            arrows: false,
+            draggable: true,
+            centerMode: true,
+          }
+        }]
+    });
+    console.log('salut slick home');
+
+});
+
 })(jQuery, window);
 
 
diff --git a/web/themes/custom/reha/scss/global/variables/_colors.scss b/web/themes/custom/reha/scss/global/variables/_colors.scss
index cdb9a11..99faf9c 100644
--- a/web/themes/custom/reha/scss/global/variables/_colors.scss
+++ b/web/themes/custom/reha/scss/global/variables/_colors.scss
@@ -7,6 +7,6 @@ $background-home: rgba(153, 147, 174, 0.1);
 $white-button: rgb(255, 255, 255);
 $white-header:rgb(255, 255, 255);
 $yellow-puca: #fdc300;
-
+$gris-violet: rgb(153, 147, 174);
 
 
diff --git a/web/themes/custom/reha/scss/pages/actualites.scss b/web/themes/custom/reha/scss/pages/actualites.scss
new file mode 100644
index 0000000..386c923
--- /dev/null
+++ b/web/themes/custom/reha/scss/pages/actualites.scss
@@ -0,0 +1,81 @@
+.page-actualites{
+    .view-actus{
+        padding-top: 3rem;
+        padding-bottom: 6rem;
+        width: 80%;
+        margin: auto;
+        .views-row{
+            .node-type-actualite{
+    
+                .image-actualite{
+                    width: 90%;
+                    margin: auto;
+                    img{
+                        width: 100%;
+                        height: auto;
+
+                    }
+                   
+                }
+                .infos-content{
+                    position: relative;
+                    top: -10px;
+                    display: flex;
+                    flex-direction: column;
+                    border: solid $yellow-puca 1px;
+                    background-color: $white-button;
+                    padding: 1rem;
+                    h2{
+                        order: 2;
+                        margin: 0;
+                        font-size: 1.5rem;
+                        font-weight: 600;
+                    }
+                    .field--name-field-sous-titre {
+                        order: 3;
+                        font-size: 1.3rem;
+                        // line-height: 0.3rem;
+                    }
+                    .field--name-field-date{
+                        order: 4;
+                        font-weight: 900;
+                        padding-bottom: 1rem;
+                    }
+                
+                    .field--name-field-type-d-actualite{
+                        order: 1;
+                        text-transform: uppercase;
+                        font-size: 1.2rem;
+                    }
+                    .field--name-field-site{
+                        order: 5;
+                        background-color: $gris-violet;
+                        color: white;
+                        border-radius: 50px;
+                        width: fit-content;
+                        padding: 0.2rem 0.9rem;
+                        .field__item{
+                            display: inline;
+                        }         
+                        a{
+                            color: white;
+                            font-weight: 900;
+                            font-size: 0.8rem;
+                            vertical-align: top;
+                        }
+                    }
+                    ul.links{
+                        order: 6;
+                        display: none;
+                    }
+                
+                }
+        
+            }
+    
+        }
+    }
+    
+
+}
+
diff --git a/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss b/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss
index 0090dcf..8fd3132 100644
--- a/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss
+++ b/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss
@@ -9,13 +9,14 @@
         padding-bottom: 2rem;
     }
     .view-id-actus{
-        width: 80%;
+        width: 100%;
         margin: auto;
-        display: flex;
-       justify-content: space-between;
+    //     display: flex;
+    //    justify-content: space-between;
 
         .views-row{
-            width: 45%;
+            width: 30%;
+            padding-right: 2rem;
             .node-type-actualite{
                 width: 100%;
                 display: flex;
@@ -23,37 +24,68 @@
                 p.field__item{
                     display: none;
                 }
-                .field--name-field-image{
-                    order: 1;
-                    max-width: 100%;
-                    padding-bottom: 1rem;
+                .image-actualite{
+                    width: 90%;
+                    margin: auto;
                     img{
-                        width: 80%;
+                        width: 100%;
                         height: auto;
+
                     }
+                   
                 }
                 .infos-content{
+                    position: relative;
+                    top: -10px;
                     display: flex;
                     flex-direction: column;
+                    border: solid $yellow-puca 1px;
+                    background-color: $white-button;
+                    padding: 1rem;
                     h2{
                         order: 2;
                         margin: 0;
-                        padding: 0;
+                        font-size: 1.5rem;
+                        font-weight: 600;
                     }
-                    
                     .field--name-field-sous-titre {
                         order: 3;
-                    }
-                    .field--name-field-type-d-actualite{
-                        order: 1;
-                        text-transform: uppercase;
-                    }
-                    .field--name-field-site{
-                        order: 5;
+                        font-size: 1.3rem;
+                        // line-height: 0.3rem;
                     }
                     .field--name-field-date{
                         order: 4;
+                        font-weight: 900;
+                        padding-bottom: 1rem;
                     }
+                
+                    .field--name-field-type-d-actualite{
+                        order: 1;
+                        text-transform: uppercase;
+                        font-size: 1.2rem;
+                    }
+                    .field--name-field-site{
+                        order: 5;
+                        background-color: $gris-violet;
+                        color: white;
+                        border-radius: 50px;
+                        width: fit-content;
+                        padding: 0.2rem 0.9rem;
+                        .field__item{
+                            display: inline;
+                        }         
+                        a{
+                            color: white;
+                            font-weight: 900;
+                            font-size: 0.8rem;
+                            vertical-align: top;
+                        }
+                    }
+                    ul.links{
+                        order: 6;
+                        display: none;
+                    }
+                
                 }
                 .body-content{
                     display: none;
diff --git a/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss b/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
index d5cf8f6..96e1cdb 100644
--- a/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
+++ b/web/themes/custom/reha/scss/pages/les-sites-pilotes.scss
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-between;
+    // justify-content: space-between;
     .views-row{
         width: 30%;
         padding: 1rem;
diff --git a/web/themes/custom/reha/scss/pages/node-actualite.scss b/web/themes/custom/reha/scss/pages/node-actualite.scss
index 283ee17..e7e5613 100644
--- a/web/themes/custom/reha/scss/pages/node-actualite.scss
+++ b/web/themes/custom/reha/scss/pages/node-actualite.scss
@@ -20,6 +20,9 @@
         .infos-content{
             grid-row: 1;
             grid-column: 3 /span 4;
+            border: solid $yellow-puca 1px;
+            background-color: $white-button;
+            padding: 1rem;
             .field--name-field-type-de-actualite{
                 text-transform: uppercase;
                 font-size: 1.5rem;
diff --git a/web/themes/custom/reha/scss/pages/node-ressource.scss b/web/themes/custom/reha/scss/pages/node-ressource.scss
index 674430c..b9bfa1a 100644
--- a/web/themes/custom/reha/scss/pages/node-ressource.scss
+++ b/web/themes/custom/reha/scss/pages/node-ressource.scss
@@ -20,6 +20,7 @@
         .infos-content{
             grid-row: 1;
             grid-column: 3 /span 4;
+            
             .field--name-field-type-de-ressource{
                 text-transform: uppercase;
                 font-size: 1.5rem;
diff --git a/web/themes/custom/reha/scss/pages/ressources.scss b/web/themes/custom/reha/scss/pages/ressources.scss
index 9cdc899..a7823c6 100644
--- a/web/themes/custom/reha/scss/pages/ressources.scss
+++ b/web/themes/custom/reha/scss/pages/ressources.scss
@@ -40,6 +40,9 @@
                 .filtered-content{
                     display: flex;
                     flex-direction: column;
+                    border: solid $yellow-puca 1px;
+                    background-color: $white-button;
+                    padding: 1rem;
                     h2{
                         order: 2;
                         margin: 0;
diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss
index 216a57f..8cd4fc9 100644
--- a/web/themes/custom/reha/scss/reha.scss
+++ b/web/themes/custom/reha/scss/reha.scss
@@ -40,4 +40,4 @@
 @import "pages/node-site";
 @import "pages/ressources";
 @import "pages/node-ressource";
-
+@import "pages/actualites";
\ No newline at end of file
diff --git a/web/themes/custom/reha/templates/page--actualites.html.twig b/web/themes/custom/reha/templates/page--actualites.html.twig
new file mode 100644
index 0000000..1768a60
--- /dev/null
+++ b/web/themes/custom/reha/templates/page--actualites.html.twig
@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container page-actualites">
+
+  <header role="banner">
+    {{ page.header }}
+  </header>
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content home-page-layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+  {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %}
+    <footer role="contentinfo">
+      <section id="footer-top">{{ page.footer_top }}</section> 
+      <div>
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <section id="footer-middle">{{ page.footer_middle }}</section> 
+        <section id="footer-right">{{ page.footer_right }}</section> 
+      </div> 
+      <section id="footer-bottom">{{ page.footer_bottom }}</section> 
+    </footer>
+  {% endif %}
+
+
+</div>{# /.layout-container #}