diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
index 7322e6f..089e0fa 100644
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -3978,4 +3978,133 @@ main {
 }
 #ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-vidéo) {
   width: 50%;
+}
+
+#actualites {
+  background-color: #f6f7f3;
+}
+#actualites .layout-content .content_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
+  margin-top: 3rem;
+  margin-left: 15%;
+  margin-bottom: 1rem;
+  width: 70%;
+}
+@media (max-width: 810px) {
+  #actualites .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 14rem;
+  }
+}
+#actualites .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
+  width: fit-content;
+  margin: auto;
+  text-transform: none;
+  color: black;
+  font-size: 2rem;
+  font-family: "gilroy-medium";
+}
+#actualites .layout-content .content_container .views-element-container {
+  margin-left: 20%;
+  width: 65%;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
+  width: 100%;
+  font-size: 0.5rem;
+  margin-bottom: 1rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite {
+  width: 100%;
+  padding-bottom: 7rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite a {
+  display: flex;
+  flex-direction: column;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu {
+  order: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 1rem 0rem;
+  margin-bottom: 1rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite a {
+  text-transform: uppercase;
+  color: red;
+  font-size: 0.6rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_type_d_actualite a::before {
+  content: url("../img/type-actu.svg");
+  padding-right: 0.4rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date {
+  color: red;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 1rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .infos-actu .field_field_date::before {
+  content: url("../img/date-actu.svg");
+  padding-right: 0.4rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body {
+  order: 2;
+  padding-bottom: 2rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_body p {
+  font-size: 0.8rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens {
+  order: 3;
+  padding-bottom: 2rem;
+  padding-top: 2rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a {
+  display: flex;
+  flex-direction: row;
+  padding-left: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.6rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a svg {
+  display: none;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a::after {
+  display: inline-flex;
+  content: url("../img/noun-arrow-to-right.svg");
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_liens a:not(.ext) {
+  display: none;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images {
+  order: 5;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images img {
+  width: 100%;
+  height: auto;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption {
+  margin-left: 0;
+  margin-top: 0;
+}
+#actualites .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .node-type-actualite .field_field_images blockquote.image-field-caption p {
+  margin-top: 0;
+  font-size: 0.4rem;
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
new file mode 100644
index 0000000..0b9745e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
@@ -0,0 +1,149 @@
+
+#actualites{
+    background-color: #f6f7f3;
+
+
+    .layout-content{
+        // padding-top: 1rem;
+        .content_container{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            #block-quartiers-de-demain-titredepage{
+                margin-top: 3rem;
+                margin-left: 15%;
+                margin-bottom: 1rem;
+                width: 70%;
+                @media(max-width: 810px){
+                    margin-top: 14rem;
+                }
+                h1{
+                    width: fit-content;
+                    margin: auto;
+                    text-transform: none;
+                    color: black;
+                    font-size: 2rem;
+                    font-family: "gilroy-medium"
+                }
+                
+                
+            }
+            .views-element-container{
+                margin-left: 20%;
+                width: 65%;
+
+                .view-rows-wrapper{
+                    display: flex;
+                    flex-direction: column;
+                    flex-wrap: wrap;
+                    
+                    
+                    .views-row{
+                        width: 100%;
+                        font-size: 0.5rem;
+                        margin-bottom: 1rem;
+                        .node-type-actualite{
+                            width: 100%;
+                            padding-bottom: 7rem;
+                            a{
+                                display: flex;
+                                flex-direction: column;
+                            }
+            
+                            .infos-actu{
+                                order: 1;
+                                display: flex;
+                                flex-direction: row;
+                                padding: 1rem 0rem;
+                                margin-bottom: 1rem;
+                                .field_field_type_d_actualite a{
+                                    text-transform: uppercase;
+                                    color: red;
+                                    font-size: 0.6rem;
+                                    font-weight: 600;
+                                    display: inline-flex;
+                                    align-items: center;
+                                    &::before{
+                                        content: url('../img/type-actu.svg');
+                                        padding-right: 0.4rem;
+                                    }
+                                }
+                                .field_field_date{
+                                    color: red;
+                                    display: inline-flex;
+                                    align-items: center;
+                                    margin-left: 1rem;
+                                    &::before{
+                                        content: url('../img/date-actu.svg');
+                                        padding-right: 0.4rem;
+                                    }
+                                }
+                    
+                            }
+                            .field_body {
+                                order: 2;
+                                padding-bottom: 2rem;
+                                p{
+                                font-size: 0.8rem;
+                                }
+                            }
+                            .field_field_liens{
+                                order: 3;
+                                padding-bottom: 2rem;
+                                padding-top: 2rem;
+                                a{  
+                                    display: flex;
+                                    flex-direction: row;
+                                    padding-left: 0.5rem;
+                                    display: inline-flex;
+                                    align-items: center;
+                                    color: white;
+                                    background: black;
+                                    text-transform: uppercase;
+                                    font-size: 0.6rem;
+                                    svg{
+                                        display: none;
+                                    }
+                                    &::after{
+                                        display: inline-flex;
+                                        content: url("../img/noun-arrow-to-right.svg");
+                                        padding-right: 0.2rem;
+                                        padding-left: 0.2rem;
+                                        
+                                    }
+                                }
+                                
+                                a:not(.ext){
+                                    display: none;
+                                }
+                            }
+            
+                            .field_field_images{
+                                order: 5;
+                                img{
+                                    width: 100%;
+                                    height: auto;
+                                }
+                                blockquote.image-field-caption{
+                                    margin-left: 0;
+                                    margin-top: 0;
+                                    p{
+                                        margin-top: 0;
+                                        font-size: 0.4rem;
+                                    }
+            
+                                }
+                            }
+                        }
+            
+
+                    }
+
+                }
+                
+            }
+            
+        }
+    }
+}
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
index 68a5165..a4b9486 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
@@ -49,6 +49,6 @@
 @import "pages/node-type-site";
 @import "pages/lessites.scss";
 @import "pages/ressources";
-
+@import "pages/actualites";
 
 @import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--actualites.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--actualites.html.twig
new file mode 100644
index 0000000..b4eb1a9
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/page--actualites.html.twig
@@ -0,0 +1,97 @@
+{#
+/**
+ * @file
+ * Claro's theme implementation to display a single Drupal page.
+ *
+ * The doctype, html, head, and body tags are not in this template. Instead
+ * they can be found in the html.html.twig template normally located in the
+ * core/modules/system 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):
+ * - 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.pre_content: Items for the pre-content region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+<div class="layout-container " id="actualites">
+
+  <header role="banner">
+    {{ page.header_left }}
+    {{ page.header_right }}
+    {{ page.header_nav }}
+  </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">
+            
+     {{ 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"> #}
+          <span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
+      {# </section>  #}
+      <div class="footer">
+        <section id="footer-left">{{ page.footer_left }}</section> 
+        <div class='first-row'>
+          <section id="footer-middle">{{ page.footer_middle }}</section> 
+          <section id="footer-right">{{ page.footer_right }}</section> 
+        </div>
+
+      </div> 
+      {# <section id="footer-bottom">{{ page.footer_bottom }}</section>  #}
+    </footer>
+  {# {% endif %} #}
+
+</div>{# /.layout-container #}