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 beab4e9..95005c4 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
@@ -3816,4 +3816,113 @@ main {
   height: auto;
   aspect-ratio: 1/1;
   object-fit: cover;
+}
+
+#ressources {
+  background-color: #f6f7f3;
+}
+#ressources .layout-content .content_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
+  margin-top: 3rem;
+  margin-left: 15%;
+  margin-bottom: 1rem;
+  width: 70%;
+}
+@media (max-width: 810px) {
+  #ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
+    margin-top: 14rem;
+  }
+}
+#ressources .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";
+}
+#ressources .layout-content .content_container .views-element-container {
+  margin-left: 15%;
+  width: 70%;
+}
+#ressources .layout-content .content_container .views-element-container .view {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+#ressources .layout-content .content_container .views-element-container .view h3 {
+  text-align: center;
+  flex: 0 0 100%;
+}
+#ressources .layout-content .content_container .views-element-container .view h3::before {
+  content: "";
+  display: block;
+  border-bottom: solid 2px rgb(7, 50, 194);
+  margin: auto;
+}
+#ressources .layout-content .content_container .views-element-container .view h3 div .field_name h2 {
+  margin-bottom: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container .view h3 div .field_name h2 a {
+  font-family: "gilroy-light";
+  color: rgb(7, 50, 194);
+  font-size: 1.2rem;
+}
+#ressources .layout-content .content_container .views-element-container .view h3 div .field_description {
+  margin-left: 10%;
+  margin-right: 10%;
+  font-family: "gilroy-light";
+}
+#ressources .layout-content .content_container .views-element-container .view h3 div .field_description p {
+  margin-top: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row {
+  width: 30%;
+  font-size: 0.5rem;
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row h2 {
+  font-family: "gilroy-semibold";
+  color: rgb(7, 50, 194);
+  font-size: 0.6rem;
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row p {
+  font-size: 0.5rem;
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div {
+  display: flex;
+  flex-direction: row;
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div div {
+  border: solid 1px rgb(7, 50, 194);
+  margin-right: 0.2rem;
+  padding: 1.3%;
+  padding-bottom: 0.2%;
+  padding-top: 0.2%;
+  font-size: 0.4rem;
+  font-family: "gilroy-semibold";
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div div a {
+  color: rgb(7, 50, 194);
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_site div a {
+  position: relative;
+  padding-left: 20px;
+  color: rgb(247, 0, 43);
+  font-family: "gilroy-semibold";
+}
+#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_site div a:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1em;
+  height: 1em;
+  background-image: url("../img/map_pointer.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
 }
\ No newline at end of file
diff --git a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
index e6ea426..0e1a0af 100644
--- a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
+++ b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
@@ -60,6 +60,7 @@ function quartiers_de_demain_preprocess_field(&$variables) {
   if (isset($variables['field_name'])) {
     $variables['attributes']['class'][] = 'field_'.$variables['field_name']; 
   }
+
 }
 
 /**
@@ -132,4 +133,7 @@ function quartiers_de_demain_preprocess_block__block_region_second(&$variables)
     unset($variables['content']['field_title']);
     unset($variables['content']['field_field_sous_titre']);
   }
-}
\ No newline at end of file
+}
+
+
+
diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
index dbb5b08..095bf42 100644
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
@@ -11,12 +11,16 @@
             align-items: center;
 
             #block-quartiers-de-demain-titredepage{
-                margin-top: 1rem;
-                width: fit-content;
+                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;
@@ -28,11 +32,14 @@
             .views-element-container{
                 margin-left: 15%;
                 width: 70%;
-                .group-content{
+                // .group-content{
+                //     display: flex;
+                //     flex-direction: row;
+                //     flex-wrap: wrap;
+                .view{
                     display: flex;
                     flex-direction: row;
                     flex-wrap: wrap;
-
                     h3{
                         &::before{
                             content:"";
@@ -47,16 +54,22 @@
                         div{
                             .field_name{
                                 h2{
+                                    margin-bottom: 0.6rem;
                                     a{
                                         font-family: "gilroy-light";
                                         color: $blue_QDD;
-                                        font-size: 2rem;
+                                        font-size: 1.2rem;
                                     }
                                     
                                 }
                             }
                             .field_description{
+                                margin-left: 10%;
+                                margin-right: 10%;
                                 font-family: "gilroy-light";
+                                p{
+                                    margin-top: 0.6rem;
+                                }
                             }
                         }
                         
@@ -118,8 +131,11 @@
 
                         }               
                     }
-
                 }
+
+                    
+
+                // }
                 
             }
             
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 d6c24e9..68a5165 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
@@ -48,6 +48,7 @@
 @import "pages/actualite";
 @import "pages/node-type-site";
 @import "pages/lessites.scss";
+@import "pages/ressources";
 
 
 @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/node--ressource--teaser.html.twig b/web/themes/custom/quartiers_de_demain/templates/node--ressource--teaser.html.twig
new file mode 100644
index 0000000..6675d3a
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/node--ressource--teaser.html.twig
@@ -0,0 +1,128 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+{# <pre>{{ dump(node) }}</pre> #}
+
+{% set ressource_class = '' %}
+{% if node.field_type_de_ressource.entity %}
+  {% set ressource_class = 'type-' ~ node.field_type_de_ressource.entity.name.value|clean_class %}
+{% endif %}
+
+<article{{ attributes.addClass(ressource_class) }}>
+  {{ title_prefix }}
+  {% if label and not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  <div{{ content_attributes }}>
+    {{ content }}
+  </div>
+</article>
+
+
+<article{{ attributes.addClass(ressource_class) }}>
+
+
+  {{ title_prefix }}
+  {% if label and not page %}
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+  {% endif %}
+  {{ title_suffix }}
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  <div{{ content_attributes }}>
+    {{ content }}
+  </div>
+
+</article>
diff --git a/web/themes/custom/quartiers_de_demain/templates/page--ressources.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--ressources.html.twig
new file mode 100644
index 0000000..736533c
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/page--ressources.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="ressources">
+
+  <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 #}
diff --git a/web/themes/custom/quartiers_de_demain/templates/taxonomy-term.html.twig b/web/themes/custom/quartiers_de_demain/templates/taxonomy-term.html.twig
new file mode 100644
index 0000000..d406a48
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/templates/taxonomy-term.html.twig
@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a taxonomy term.
+ *
+ * Available variables:
+ * - url: URL of the current term.
+ * - name: (optional) Name of the current term.
+ * - content: Items for the content of the term (fields and description).
+ *   Use 'content' to print them all, or print a subset such as
+ *   'content.description'. Use the following code to exclude the
+ *   printing of a given child element:
+ *   @code
+ *   {{ content|without('description') }}
+ *   @endcode
+ * - attributes: HTML attributes for the wrapper.
+ * - page: Flag for the full page state.
+ * - term: The taxonomy term entity, including:
+ *   - id: The ID of the taxonomy term.
+ *   - bundle: Machine name of the current vocabulary.
+ * - view_mode: View mode, e.g. 'full', 'teaser', etc.
+ *
+ * @see template_preprocess_taxonomy_term()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{%
+  set ressource_class = 'type-' ~ term.name()
+%}
+
+
+<div{{ attributes.addClass(ressource_class) }}>
+  {{ title_prefix }}
+  {% if name and not page %}
+    <h2><a href="{{ url }}">{{ name }}</a></h2>
+  {% endif %}
+  {{ title_suffix }}
+  {{ content }}
+</div>