diff --git a/web/sites/development.services.yml b/web/sites/development.services.yml
index c92f72fb..07319d1f 100644
--- a/web/sites/development.services.yml
+++ b/web/sites/development.services.yml
@@ -5,7 +5,7 @@
 parameters:
   http.response.debug_cacheability_headers: true
   twig.config:
-    debug: false
+    debug: true
     auto_reload: true
 services:
   cache.backend.null:
diff --git a/web/themes/custom/popsu_colloque/css/layout.css b/web/themes/custom/popsu_colloque/css/layout.css
index ea49f696..6a932ceb 100644
--- a/web/themes/custom/popsu_colloque/css/layout.css
+++ b/web/themes/custom/popsu_colloque/css/layout.css
@@ -6,3 +6,9 @@
  *
  * @see https://www.drupal.org/project/drupal/issues/2349711
  */
+article img,
+.side_notes img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
diff --git a/web/themes/custom/popsu_colloque/js/script.js b/web/themes/custom/popsu_colloque/js/script.js
new file mode 100644
index 00000000..8c1df405
--- /dev/null
+++ b/web/themes/custom/popsu_colloque/js/script.js
@@ -0,0 +1,38 @@
+function notes() {
+
+  var $link = $('#presentation a');
+  $link.each(function(){
+    $(this).click(function(e) {
+      if ($(this).is('#ressource')) {
+        e.preventDefault();
+        var $url = $(this).attr("href");
+
+        if ($( ".side_notes" )[0]) {
+          $( ".side_notes" ).remove();
+        }
+
+        $("<div class='side_notes'/>").insertAfter("article");
+
+        ajax($url);
+      }else{
+        // nothing
+      }
+    });
+  })
+
+  function ajax($url) {
+    $.ajax({
+      url: $url,
+      method: "GET",
+      dataType:'html',
+      async: true,
+      success: function(data) {
+          $(data).find('article > div:not(.__wrap_side) .__wrapper').appendTo('.side_notes');
+      },
+    })
+  }
+}
+
+$( document ).ready(function() {
+  notes();
+});
diff --git a/web/themes/custom/popsu_colloque/popsu_colloque.libraries.yml b/web/themes/custom/popsu_colloque/popsu_colloque.libraries.yml
index 0e08c0bb..12d33e86 100644
--- a/web/themes/custom/popsu_colloque/popsu_colloque.libraries.yml
+++ b/web/themes/custom/popsu_colloque/popsu_colloque.libraries.yml
@@ -9,5 +9,6 @@ global-styling:
 global-scripts:
   js:
     css/bootstrap/js/bootstrap.min.js: {}
+    js/script.js: {}
   dependencies:
     - core/jquery
diff --git a/web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig b/web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig
new file mode 100644
index 00000000..aaea5387
--- /dev/null
+++ b/web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig
@@ -0,0 +1,98 @@
+{#
+/**
+ * @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()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes }} id="presentation">
+  {{ 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/popsu_colloque/template/node/node.html.twig b/web/themes/custom/popsu_colloque/template/node/node.html.twig
index 0833ae40..a18469a9 100644
--- a/web/themes/custom/popsu_colloque/template/node/node.html.twig
+++ b/web/themes/custom/popsu_colloque/template/node/node.html.twig
@@ -73,7 +73,6 @@
  */
 #}
 <article{{ attributes }}>
-
   {{ title_prefix }}
   {% if label and not page %}
     <h2{{ title_attributes }}>
diff --git a/web/themes/custom/popsu_colloque/template/node/page--node.html.twig b/web/themes/custom/popsu_colloque/template/page--node.html.twig
similarity index 99%
rename from web/themes/custom/popsu_colloque/template/node/page--node.html.twig
rename to web/themes/custom/popsu_colloque/template/page--node.html.twig
index 200ceef9..ced8ef32 100644
--- a/web/themes/custom/popsu_colloque/template/node/page--node.html.twig
+++ b/web/themes/custom/popsu_colloque/template/page--node.html.twig
@@ -46,7 +46,6 @@
  */
 #}
 <div class="layout-container">
-
   <header role="banner">
     {{ page.header }}
   </header>
diff --git a/web/themes/custom/popsu_colloque/template/page.html.twig b/web/themes/custom/popsu_colloque/template/page.html.twig
new file mode 100644
index 00000000..0d027bba
--- /dev/null
+++ b/web/themes/custom/popsu_colloque/template/page.html.twig
@@ -0,0 +1,89 @@
+{#
+/**
+ * @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">
+  <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">
+      {{ 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 %}
+    <footer role="contentinfo">
+      {{ page.footer }}
+    </footer>
+  {% endif %}
+
+</div>{# /.layout-container #}