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 df7e176..d15e701 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
@@ -3160,6 +3160,68 @@ body {
   content: url("../img/next.svg");
 }
 
+main {
+  background-color: #f6f7f3;
+}
+
+#lessites .content_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#lessites .content_container #block-quartiers-de-demain-titredepage {
+  margin-top: 1rem;
+  width: fit-content;
+}
+@media (max-width: 810px) {
+  #lessites .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 10rem;
+    grid-column: 2/span 9;
+  }
+}
+#lessites .content_container #block-quartiers-de-demain-titredepage h1 {
+  text-transform: none;
+  color: rgb(7, 50, 194);
+  font-size: 2rem;
+  font-weight: 500;
+}
+#lessites .content_container .view {
+  display: flex;
+  flex-direction: column;
+}
+#lessites .content_container .view .header_view {
+  position: relative !important;
+  height: fit-content;
+  z-index: none;
+}
+#lessites .content_container .view .header_view .view {
+  width: 100vw;
+}
+#lessites .content_container .view .grille--views-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 80%;
+  margin: auto;
+  justify-content: space-between;
+  padding-top: 3rem;
+  font-size: 0.6rem;
+}
+#lessites .content_container .view .grille--views-row .views-row {
+  width: 20%;
+}
+#lessites .content_container .view .grille--views-row .views-row .views-field-title .field-content a {
+  color: rgb(7, 50, 194);
+  font-family: "gilroy-bold";
+  padding-top: 0.5rem;
+}
+#lessites .content_container .view .grille--views-row .views-row .views-field-field-images .field-content img {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+}
+
 @font-face {
   font-family: "gilroy-semibold";
   src: url("../css/fonts/Gilroy/gilroy-semibold-webfont.woff") format("woff");
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss
new file mode 100644
index 0000000..a706b10
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lessites.scss
@@ -0,0 +1,68 @@
+main{
+    background-color: #f6f7f3;
+}
+#lessites{
+   
+    .content_container{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        #block-quartiers-de-demain-titredepage{
+            margin-top: 1rem;
+            width: fit-content;
+            @media(max-width: 810px){
+                margin-top: 10rem;
+                grid-column: 2 /span 9;
+            } 
+
+            h1{
+                text-transform: none;
+                color: $blue_QDD;
+                font-size: 2rem;
+                font-weight: 500;
+            }
+        }
+
+    .view{
+        display: flex;
+        flex-direction: column;
+
+        .header_view {
+            position: relative !important;
+            height: fit-content;
+            z-index: none;
+            .view{
+                width: 100vw;
+            }
+        }
+        .grille--views-row{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: 10px;
+            width: 80%;
+            margin: auto;
+            justify-content: space-between;
+            padding-top: 3rem;
+            font-size: 0.6rem;
+            .views-row{
+                width: 20%;
+                .views-field-title .field-content a{
+                    color: $blue_QDD;
+                    font-family: "gilroy-bold";
+                    padding-top: 0.5rem;
+                }
+                .views-field-field-images .field-content img{
+                    width: 200px;
+                    height: 200px;
+                    object-fit: cover;
+                }
+
+
+            }
+        }
+
+    }
+    }
+}
+
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 02ffbc7..90988d2 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
@@ -47,6 +47,7 @@
 @import "pages/static";
 @import "pages/actualite";
 @import "pages/node-type-site";
+@import "pages/lessites.scss";
 
 
 @import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--lessites.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--lessites.html.twig
new file mode 100644
index 0000000..58dd05c
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/page--lessites.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">
+
+  <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" id="lessites">
+            
+     {{ 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 #}
diff --git a/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig b/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig
new file mode 100644
index 0000000..514fa56
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig
@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+  <div class="grille--views-row">
+
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+      
+    ]
+  %}
+  <div{{ row.attributes.addClass(row_classes) }}>
+    {{- row.content -}}
+  </div>
+{% endfor %}
+  </div>
diff --git a/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig b/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig
index d6b2222..861c5f8 100644
--- a/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig
+++ b/web/themes/custom/quartiers_de_demain/templates/views-view.html.twig
@@ -44,7 +44,7 @@
   {{ title_suffix }}
 
   {% if header %}
-    <header>
+    <header class="header_view">
       {{ header }}
     </header>
   {% endif %}