diff --git a/app/controllers/admin/communication/websites/agenda/events_controller.rb b/app/controllers/admin/communication/websites/agenda/events_controller.rb
index 17ad3b8d5..67097b1b1 100644
--- a/app/controllers/admin/communication/websites/agenda/events_controller.rb
+++ b/app/controllers/admin/communication/websites/agenda/events_controller.rb
@@ -30,6 +30,10 @@ def show
     breadcrumb
   end
 
+  def preview
+    render layout: 'admin/layouts/preview'
+  end
+
   def new
     @event.parent = @website.events.find(params[:parent_id]) if params.has_key?(:parent_id)
     @categories = categories
diff --git a/app/controllers/admin/education/programs_controller.rb b/app/controllers/admin/education/programs_controller.rb
index c06dd64c2..0308e4687 100644
--- a/app/controllers/admin/education/programs_controller.rb
+++ b/app/controllers/admin/education/programs_controller.rb
@@ -3,6 +3,7 @@ class Admin::Education::ProgramsController < Admin::Education::Programs::Applica
 
   before_action :load_teacher_people, only: [:new, :edit, :create, :update]
 
+  include Admin::HasPreview
   include Admin::HasStaticAction
   include Admin::Localizable
 
@@ -36,7 +37,6 @@ def show
   end
 
   def preview
-    @website = @program.websites&.first
     render layout: 'admin/layouts/preview'
   end
 
@@ -90,6 +90,11 @@ def restore
 
   protected
 
+  def prepare_preview
+    super
+    @body_class += ' offcanvas-toc'
+  end
+
   def load_part
     part_from_params = params.dig('education_program', 'part')
     @part = part_from_params if ['admission', 'certification', 'pedagogy', 'presentation', 'results'].include?(part_from_params)
diff --git a/app/controllers/admin/university/organizations_controller.rb b/app/controllers/admin/university/organizations_controller.rb
index d8bbbb48c..a471c8773 100644
--- a/app/controllers/admin/university/organizations_controller.rb
+++ b/app/controllers/admin/university/organizations_controller.rb
@@ -4,6 +4,7 @@ class Admin::University::OrganizationsController < Admin::University::Applicatio
                               through_association: :organizations,
                               except: :restore
 
+  include Admin::HasPreview
   include Admin::HasStaticAction
   include Admin::Localizable
 
@@ -36,6 +37,10 @@ def show
     breadcrumb
   end
 
+  def preview
+    render layout: 'admin/layouts/preview'
+  end
+
   def new
     @categories = categories
     breadcrumb
@@ -87,6 +92,11 @@ def restore
 
   protected
 
+  def prepare_preview
+    super
+    @body_class += ' full-width'
+  end
+
   def breadcrumb
     super
     add_breadcrumb  University::Organization.model_name.human(count: 2),
diff --git a/app/controllers/admin/university/people_controller.rb b/app/controllers/admin/university/people_controller.rb
index dce9bac1f..a03c5fb6a 100644
--- a/app/controllers/admin/university/people_controller.rb
+++ b/app/controllers/admin/university/people_controller.rb
@@ -4,6 +4,7 @@ class Admin::University::PeopleController < Admin::University::ApplicationContro
                               through_association: :people,
                               except: :restore
 
+  include Admin::HasPreview
   include Admin::HasStaticAction
   include Admin::Localizable
 
@@ -43,6 +44,10 @@ def show
     breadcrumb
   end
 
+  def preview
+    render layout: 'admin/layouts/preview'
+  end
+
   def new
     @categories = categories
     breadcrumb
@@ -95,6 +100,11 @@ def restore
 
   protected
 
+  def prepare_preview
+    super
+    @body_class += ' full-width'
+  end
+
   def breadcrumb
     super
     add_breadcrumb  University::Person.model_name.human(count: 2),
diff --git a/app/controllers/concerns/admin/has_preview.rb b/app/controllers/concerns/admin/has_preview.rb
index c5df386d1..9a885f3d3 100644
--- a/app/controllers/concerns/admin/has_preview.rb
+++ b/app/controllers/concerns/admin/has_preview.rb
@@ -3,6 +3,7 @@ module Admin::HasPreview
 
   included do
     before_action :set_preview, only: :show
+    before_action :prepare_preview, only: :preview
   end
 
   def preview
@@ -11,9 +12,15 @@ def preview
   end
 
   protected
-  
+
   def set_preview
     @preview = true
   end
+  
+  def prepare_preview
+    @website ||= resource.websites&.first || current_university.websites.first
+    @body_class = resource.hugo_body_class    
+    @body_class += ' full-width' if resource.try(:full_width)
+  end
 
 end
\ No newline at end of file
diff --git a/app/models/communication/website/agenda/event.rb b/app/models/communication/website/agenda/event.rb
index acc47560e..ce4869980 100644
--- a/app/models/communication/website/agenda/event.rb
+++ b/app/models/communication/website/agenda/event.rb
@@ -143,6 +143,10 @@ def sorting_time
     from_day.in_time_zone.to_time
   end
 
+  def hugo_body_class
+    'events__page'
+  end
+
   protected
 
   # Methods for Communication::Website::Agenda::Period::InPeriod
diff --git a/app/models/communication/website/agenda/exhibition.rb b/app/models/communication/website/agenda/exhibition.rb
index 6a1567c07..9eb69c170 100644
--- a/app/models/communication/website/agenda/exhibition.rb
+++ b/app/models/communication/website/agenda/exhibition.rb
@@ -108,6 +108,10 @@ def references
     menus
   end
 
+  def hugo_body_class
+    'exhibitions__page'
+  end
+
   protected
 
   def list_blocks_template_kind
diff --git a/app/models/communication/website/jobboard/job.rb b/app/models/communication/website/jobboard/job.rb
index a454fdc4b..6fb5b6ef3 100644
--- a/app/models/communication/website/jobboard/job.rb
+++ b/app/models/communication/website/jobboard/job.rb
@@ -79,4 +79,8 @@ def current?
     from_day <= Date.current && (to_day.nil? || Date.current <= to_day)
   end
 
+  def hugo_body_class
+    'jobs__page'
+  end
+
 end
diff --git a/app/models/communication/website/page.rb b/app/models/communication/website/page.rb
index 2bbcb54bf..ec18eb4ed 100644
--- a/app/models/communication/website/page.rb
+++ b/app/models/communication/website/page.rb
@@ -128,6 +128,10 @@ def self.direct_connection_permitted_about_class
     nil
   end
 
+  def hugo_body_class
+    'pages__section'
+  end
+
   protected
 
   def last_ordered_element
diff --git a/app/models/communication/website/page/administration_location.rb b/app/models/communication/website/page/administration_location.rb
index 61476157d..6a2af257f 100644
--- a/app/models/communication/website/page/administration_location.rb
+++ b/app/models/communication/website/page/administration_location.rb
@@ -29,4 +29,8 @@ def dependencies
   def git_path_relative
     'locations/_index.html'
   end
+
+  def hugo_body_class
+    'locations__taxonomy'
+  end
 end
diff --git a/app/models/communication/website/page/communication_agenda.rb b/app/models/communication/website/page/communication_agenda.rb
index cf620635f..2fa391da6 100644
--- a/app/models/communication/website/page/communication_agenda.rb
+++ b/app/models/communication/website/page/communication_agenda.rb
@@ -29,4 +29,8 @@ def git_path_relative
   def special_page_categories
     website.agenda_categories
   end
+
+  def hugo_body_class
+    'events__section'
+  end
 end
diff --git a/app/models/communication/website/page/communication_agenda_exhibition.rb b/app/models/communication/website/page/communication_agenda_exhibition.rb
index ddd9cd92a..494faadc5 100644
--- a/app/models/communication/website/page/communication_agenda_exhibition.rb
+++ b/app/models/communication/website/page/communication_agenda_exhibition.rb
@@ -29,4 +29,8 @@ def git_path_relative
   def special_page_categories
     website.agenda_categories
   end
+
+  def hugo_body_class
+    'exhibitions__section'
+  end
 end
diff --git a/app/models/communication/website/page/communication_jobboard.rb b/app/models/communication/website/page/communication_jobboard.rb
index 3d7249322..097bd4d81 100644
--- a/app/models/communication/website/page/communication_jobboard.rb
+++ b/app/models/communication/website/page/communication_jobboard.rb
@@ -29,4 +29,8 @@ def git_path_relative
   def special_page_categories
     website.jobboard_categories
   end
+
+  def hugo_body_class
+    'jobs__section'
+  end
 end
diff --git a/app/models/communication/website/page/communication_portfolio.rb b/app/models/communication/website/page/communication_portfolio.rb
index 2fea410f6..6cc117ac4 100644
--- a/app/models/communication/website/page/communication_portfolio.rb
+++ b/app/models/communication/website/page/communication_portfolio.rb
@@ -29,4 +29,8 @@ def git_path_relative
   def special_page_categories
     website.portfolio_categories
   end
+
+  def hugo_body_class
+    'projects__section'
+  end
 end
diff --git a/app/models/communication/website/page/communication_post.rb b/app/models/communication/website/page/communication_post.rb
index 0d3153848..fd417d754 100644
--- a/app/models/communication/website/page/communication_post.rb
+++ b/app/models/communication/website/page/communication_post.rb
@@ -30,4 +30,8 @@ def git_path_relative
   def special_page_categories
     website.post_categories
   end
+
+  def hugo_body_class
+    'posts__section'
+  end
 end
diff --git a/app/models/communication/website/page/education_diploma.rb b/app/models/communication/website/page/education_diploma.rb
index 52c01e047..9ad0d5217 100644
--- a/app/models/communication/website/page/education_diploma.rb
+++ b/app/models/communication/website/page/education_diploma.rb
@@ -29,4 +29,8 @@ def dependencies
   def git_path_relative
     'diplomas/_index.html'
   end
+
+  def hugo_body_class
+    'diplomas__taxonomy'
+  end
 end
diff --git a/app/models/communication/website/page/education_program.rb b/app/models/communication/website/page/education_program.rb
index 980c2db8e..5b726159a 100644
--- a/app/models/communication/website/page/education_program.rb
+++ b/app/models/communication/website/page/education_program.rb
@@ -33,4 +33,8 @@ def git_path_relative
   def special_page_categories
     university.education_program_categories
   end
+
+  def hugo_body_class
+    'programs__section'
+  end
 end
diff --git a/app/models/communication/website/page/education_school.rb b/app/models/communication/website/page/education_school.rb
index 11f9de40a..6fd27a30e 100644
--- a/app/models/communication/website/page/education_school.rb
+++ b/app/models/communication/website/page/education_school.rb
@@ -29,4 +29,8 @@ def dependencies
   def git_path_relative
     'schools/_index.html'
   end
+
+  def hugo_body_class
+    'schools__section'
+  end
 end
diff --git a/app/models/communication/website/page/home.rb b/app/models/communication/website/page/home.rb
index f0a5e50dd..ac42035ca 100644
--- a/app/models/communication/website/page/home.rb
+++ b/app/models/communication/website/page/home.rb
@@ -15,4 +15,8 @@ def git_path_relative
   def default_parent
     nil
   end
+
+  def hugo_body_class
+    'page__home'
+  end
 end
diff --git a/app/models/communication/website/page/person.rb b/app/models/communication/website/page/person.rb
index fca16c9e0..d24df83f0 100644
--- a/app/models/communication/website/page/person.rb
+++ b/app/models/communication/website/page/person.rb
@@ -37,4 +37,8 @@ def git_path_relative
   def special_page_categories
     university.person_categories
   end
+
+  def hugo_body_class
+    'persons__section'
+  end
 end
diff --git a/app/models/communication/website/portfolio/project.rb b/app/models/communication/website/portfolio/project.rb
index 21056124e..299e6382a 100644
--- a/app/models/communication/website/portfolio/project.rb
+++ b/app/models/communication/website/portfolio/project.rb
@@ -91,6 +91,10 @@ def references
     menus
   end
 
+  def hugo_body_class
+    'projects__page'
+  end
+
   protected
 
   def list_blocks_template_kind
diff --git a/app/models/communication/website/post.rb b/app/models/communication/website/post.rb
index 8654f1958..c11f20e4f 100644
--- a/app/models/communication/website/post.rb
+++ b/app/models/communication/website/post.rb
@@ -109,6 +109,10 @@ def published_at_in(language)
     localization_for(language).try(:published_at)
   end
 
+  def hugo_body_class
+    'posts__page'
+  end
+
   protected
 
   def update_authors_status_if_necessary!
diff --git a/app/models/education/program.rb b/app/models/education/program.rb
index f5942fbf0..0a59f8e43 100644
--- a/app/models/education/program.rb
+++ b/app/models/education/program.rb
@@ -144,6 +144,10 @@ def programs
     Education::Program.where(id: id)
   end
 
+  def hugo_body_class
+    'programs__section'
+  end
+
   protected
 
   def check_accessibility
diff --git a/app/models/university/organization.rb b/app/models/university/organization.rb
index d466068a8..333b6371b 100644
--- a/app/models/university/organization.rb
+++ b/app/models/university/organization.rb
@@ -99,6 +99,10 @@ def references
     mentions_by_blocks
   end
 
+  def hugo_body_class
+    'organizations__page'
+  end
+
   protected
 
   def blocks_mentioning_self
diff --git a/app/models/university/person.rb b/app/models/university/person.rb
index 21651a624..f688de57b 100644
--- a/app/models/university/person.rb
+++ b/app/models/university/person.rb
@@ -174,6 +174,10 @@ def full_street_address
     [address, "#{zipcode} #{city} #{country}".strip].join(', ')
   end
 
+  def hugo_body_class
+    'persons__page'
+  end
+
   def to_s_with_mail_in(language)
     best_localization_for(language).to_s_with_mail
   end
diff --git a/app/views/admin/application/preview/_featured_image.html.erb b/app/views/admin/application/preview/_featured_image.html.erb
new file mode 100644
index 000000000..64288f964
--- /dev/null
+++ b/app/views/admin/application/preview/_featured_image.html.erb
@@ -0,0 +1,15 @@
+<%
+if l10n.featured_image.present? && l10n.featured_image.attached? 
+  format = ActiveStorage::Utils.format(l10n.featured_image)
+%>
+  <figure class="featured-image image-<%= format %>">
+    <%= kamifusen_tag l10n.featured_image, alt: l10n.featured_image_alt %>
+    <% if l10n.featured_image_credit.present? %>
+      <figcaption>
+        <div class="credit">
+          <%= sanitize l10n.featured_image_credit %>
+        </div>
+      </figcaption>
+    <% end %>
+  </figure>
+<% end %>
\ No newline at end of file
diff --git a/app/views/admin/application/preview/_hero.html.erb b/app/views/admin/application/preview/_hero.html.erb
index 23f3fecc9..519e0f990 100644
--- a/app/views/admin/application/preview/_hero.html.erb
+++ b/app/views/admin/application/preview/_hero.html.erb
@@ -2,11 +2,10 @@
 @title = @l10n.title
 @subtitle = @l10n.try(:subtitle)
 @summary = @l10n.summary
-@image = @l10n.featured_image
 
 hero_classes = "hero"
-if @image.present? && @image.attached?
-  format = ActiveStorage::Utils.format(@image)
+if @l10n.featured_image.present? && @l10n.featured_image.attached?
+  format = ActiveStorage::Utils.format(@l10n.featured_image)
   hero_classes += " hero--with-image hero--image-#{format}" if format.present?
 end
 %>
@@ -30,9 +29,7 @@ end
           <h1><%= @title %></h1>
         <% end %>
       </div>
-      <figure>
-        <%= kamifusen_tag @image if @image.present? && @image.attached? %>
-      </figure>
+      <%= render 'admin/application/preview/featured_image', l10n: @l10n %>
     </div>
   </div>
 </header>
diff --git a/app/views/admin/application/preview/preview.html.erb b/app/views/admin/application/preview/preview.html.erb
index 882ec3804..2c1ca96e6 100644
--- a/app/views/admin/application/preview/preview.html.erb
+++ b/app/views/admin/application/preview/preview.html.erb
@@ -2,9 +2,7 @@
   <%= render 'admin/application/preview/hero' %>
   <div class="document-content">
     <div class="blocks">
-      <%= render 'admin/communication/contents/show',
-            about: @l10n,
-            strip_javascript: true %>
+      <%= render 'admin/communication/contents/show', about: @l10n, strip_javascript: true %>
     </div>
   </div>
 </main>
diff --git a/app/views/admin/communication/websites/agenda/events/preview.html.erb b/app/views/admin/communication/websites/agenda/events/preview.html.erb
new file mode 100644
index 000000000..f82b4988b
--- /dev/null
+++ b/app/views/admin/communication/websites/agenda/events/preview.html.erb
@@ -0,0 +1,242 @@
+<%
+hero_classes = "hero"
+if @l10n.featured_image.present? && @l10n.featured_image.attached?
+  format = ActiveStorage::Utils.format(@l10n.featured_image)
+  hero_classes += " hero--with-image hero--image-#{format}" if format.present?
+end
+%>
+<main id="main" class="page-with-blocks">
+  <header class="<%= hero_classes %>">
+    <div class="container">
+      <div class="content">
+        <div class="hero-text">
+          <% if @l10n.subtitle.present? %>
+            <hgroup<% if @summary.present? %> class="has-lead"<% end %>>
+              <h1>
+                <%= @l10n.title %>
+                <% if @l10n.subtitle.present? %>
+                  <span><%= @l10n.subtitle %></span>
+                <% end %>
+              </h1>
+            </hgroup>
+          <% else %>
+            <h1><%= @l10n.title %></h1>
+          <% end %>
+          <% if @event.categories.any? %>
+            <ul class="taxonomies-single without-label events-taxonomies">
+              <% @event.categories.ordered_by_position_in_tree.each do |category| %>
+                <li><a href=""><%= category.to_s_in(current_language) %></a></li>
+              <% end %>
+            </ul>
+          <% end %>
+        </div>
+        <%= render 'admin/application/preview/featured_image', l10n: @l10n %>
+      </div>
+    </div>
+  </header>
+  <div itemscope itemtype="https://schema.org/Event">
+    <div class="container event-access">
+      <% if @l10n.text.present? || @l10n.notes.present? %>
+        <div class="event-practicals" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
+          <h2>Informations pratiques</h2>
+          <div>
+            <%= sanitize @l10n.text %>
+            <div class="event-notes">
+              <%= sanitize @l10n.notes %>
+            </div>
+          </div>
+          <% if @l10n.header_cta %>
+            <a href="<%= @l10n.header_cta_url %>" class="btn" target="_blank" rel="noopener">
+              <%= @l10n.header_cta_label %>
+            </a>
+          <% end %>
+        </div>
+      <% end %>
+      <div class="event-slots">
+        <h2 class="events-slots-title">Dates</h2>
+        <div class="event-summary">
+          <span class="date" itemprop="startDate" content="2024-02-03">
+            <%= date_range_i18n @event.from_day,
+                                @event.to_day,
+                                format: :long,
+                                layout: :one_line,
+                                locale: @l10n.language.iso_code %>
+
+          </span>
+          <% if @event.kind_recurring? %>
+            <span class="type">Événement régulier</span>
+          <% end %>
+          <% unless @event.archive? %>
+            <div class="dropdown-calendar">
+              <button type="button" aria-expanded="false" aria-controls="event-dropdown-calendar-primary">
+                <span>Ajouter à mon agenda</span>
+              </button>
+            </div>
+          <% end %>
+        </div>
+        <% if @event.time_slots.any? %>
+          <ul id="all-dates" class="extendable-list">
+            <%
+            @event.time_slots.ordered.each do |time_slot| 
+              time_slot_l10n = time_slot.localization_for(@l10n.language)
+              %>
+              <li class="event-time-slot" itemprop="subEvent" itemscope="" itemtype="https://schema.org/Event">
+                <span class="date"><%= l time_slot_l10n.from_day, format: :long %></span>
+                <p class="hours">
+                  <time><%= l time_slot_l10n.from_hour, format: "%Hh%M" %></time>
+                  <% if time_slot_l10n.to_hour %>
+                    <time><%= l time_slot_l10n.to_hour, format: "%Hh%M" %></time>
+                  <% end %>
+                </p>
+                <% if time_slot_l10n.place %>
+                  <span class="location" itemprop="location"><%= time_slot_l10n.place %></span>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        <% end%>
+      </div>
+    </div>
+    <div class="document-content">
+      <div class="section-sidebar event-sidebar">
+        <div>
+          <% if @l10n.blocks.template_title.published.many? %>
+            <div class="toc-cta">
+              <button class="toc-cta-title" aria-label="Table des matières" type="button">
+                <span data-default="Table des matières">Table des matières</span>
+              </button>
+            </div>
+            <div class="toc-container" aria-hidden="false">
+              <div class="toc-content">
+                <div id="toc-title" class="toc-title" role="heading" aria-level="2">Table des matières</div>
+                <nav class="toc toc-pages" id="nav-toc" aria-labelledby="toc-title">
+                  <ol>
+                    <% @l10n.blocks.template_title.ordered.each do |block| %>
+                      <li><a href="#<%= block.title.parameterize %>"><%= block.title %></a></li>
+                    <% end %>
+                  </ol>
+                </nav>
+                <button name="Fermer" type="button">Fermer</button>
+              </div>
+            </div>
+          <% end %>
+          <% if @event.kind_parent? %>
+            <a href="#programme" class="btn programme-btn">Accéder au programme</a>
+          <% end %>
+        </div>
+      </div>
+      <% if @l10n.summary.present? %>
+        <div class="block block-summary">
+          <div class="container">
+            <div class="block-content">
+              <div class="lead" role="heading" aria-level="2">
+                <%= sanitize @l10n.summary %>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+      <div class="blocks">
+        <%= render 'admin/communication/contents/show', about: @l10n, strip_javascript: true %>
+      </div>
+    </div>
+    <% if @event.kind_parent? %>
+      <div class="container" itemtype="subEvents">
+        <div class="event-programme" id="programme">
+          <ul class="events events--agenda">
+            <%
+            @event.days.ordered.each do |day|
+              events = day.events.ordered
+              next if events.none?
+              %>
+              <li class="events-date events-date--sticky">
+                <h2 class="events-date-title">
+                  <span><%= l day.date, format: :long %></span>
+                </h2>
+                <ol class="events-scheduled">
+                  <%
+                  events.each do |event|
+                    event_l10n = event.localization_for(@l10n.language)
+                    %>
+                    <li itemscope="" itemtype="https://schema.org/Event">
+                      <article class="event event--with-image event--child">
+                        <div class="event-content">
+                          <% if event_l10n.subtitle.present? %>
+                            <hgroup>
+                              <h3 class="event-title" itemprop="name">
+                                <a href="" itemprop="url"><%= event_l10n.title %></a>
+                              </h3>
+                              <p class="event-subtitle"><%= event_l10n.subtitle %></p>
+                            </hgroup>
+                          <% else %>
+                            <h3 class="event-title" itemprop="name">
+                              <a href="" itemprop="url"><%= event_l10n.title %></a>
+                            </h3>
+                          <% end %>
+                          <%
+                          if event.time_slots.one?
+                            time_slot = event.time_slots.first
+                            time_slot_l10n = time_slot.localization_for(@l10n.language)
+                            %>
+                            <p class="event-hours">
+                              <span>
+                                <time><%= l time_slot_l10n.from_hour, format: "%Hh%M" %></time>
+                                <% if time_slot_l10n.to_hour %>
+                                  <time><%= l time_slot_l10n.to_hour, format: "%Hh%M" %></time>
+                                <% end %>
+                              </span>
+                            </p>
+                          <% end %>
+                          <% if event_l10n.summary.present? %>
+                            <div class="event-description" itemprop="description">
+                              <%= sanitize event_l10n.summary %>
+                            </div>
+                          <% end %>
+                          <% if event.categories.any? %>
+                            <ul class="event-categories" aria-label="Catégories">
+                              <% event.categories.ordered_by_position_in_tree.each do |category| %>
+                                <li><a href=""><%= category.to_s_in(@l10n.language) %></a></li>
+                              <% end %>
+                            </ul>
+                          <% end %>
+                        </div>
+                        <div class="media">
+                          <%= kamifusen_tag event_l10n.featured_image, width: 1280 %>
+                        </div>
+                      </article>
+                    </li>
+                  <% end %>
+                </ol>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    <% end %>
+    <%
+    if @event.kind_child?
+      parent = @event.parent
+      parent_l10n = parent.localization_for(@l10n.language)
+      %>
+      <div class="event-parent container">
+        <p class="event-parent__title">Cet événement fait partie de</p>
+        <article class="event event--with-image event--parent">
+          <div class="event-content">
+            <hgroup>
+              <h3 class="event-title"><a href=""><%= parent_l10n.title %></a></h3>
+              <p class="event-subtitle"><%= parent_l10n.subtitle %></p>
+            </hgroup>
+            <div class="event-description" itemprop="description"><%= sanitize parent_l10n.summary %></div>
+            <p class="more meta" aria-hidden="true">En savoir plus</p>
+          </div>
+          <% if parent_l10n.featured_image.attached? %>
+            <div class="media">
+              <%= kamifusen_tag parent_l10n.featured_image %>
+            </div>
+          <% end %>
+        </article>
+      </div>
+    <% end %>
+  </div>
+</main>
+<%= render 'admin/application/preview/lightbox' %>
\ No newline at end of file
diff --git a/app/views/admin/education/programs/preview.html.erb b/app/views/admin/education/programs/preview.html.erb
index a921f0732..c49f242a0 100644
--- a/app/views/admin/education/programs/preview.html.erb
+++ b/app/views/admin/education/programs/preview.html.erb
@@ -1,161 +1,258 @@
-<%
-@title = @l10n.name
-@image = @l10n.best_featured_image
-%>
-<div class="container">
-  <div class="lead" itemprop="abstract">
-    <%= sanitize @l10n.presentation %>
-  </div>
-</div>
-<section id="presentation">
-  <div class="container">
-    <div class="content">
-      <div>
-        <h2><%= Education::Program::Localization.human_attribute_name('presentation') %></h2>
-      </div>
-      <div>
-        <div class="subpart">
-          <%= sanitize @l10n.objectives %>
-        </div>
-        <div class="subpart">
-          <h3>Informations administratives</h3>
-          <div class="table-responsive">
-            <table class="<%= table_classes %> table-infos">
-              <caption>Informations administratives</caption>
-              <tbody>
-                <% if @program.diploma %>
-                  <tr>
-                    <th>Crédits ECTS</th>
-                    <td><%= @program.diploma.ects %></td>
-                  </tr>
-                <% end %>
-                <tr>
-                  <th><%= Education::Program::Localization.human_attribute_name('initial') %></th>
-                  <td><%= t @program.initial %></td>
-                </tr>
-                <tr>
-                  <th><%= Education::Program::Localization.human_attribute_name('continuing') %></th>
-                  <td><%= t @program.continuing %></td>
-                </tr>
-                <tr>
-                  <th><%= Education::Program::Localization.human_attribute_name('apprenticeship') %></th>
-                  <td><%= t @program.apprenticeship %></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+<main id="main" class="page-with-blocks">
+  <header class="hero">
+    <div class="container">
+      <div class="content">
+        <div class="hero-text">
+          <hgroup class="has-lead">
+            <h1><%= @l10n.name %></h1>
+            <%= sanitize @l10n.summary %>
+          </hgroup>
         </div>
+        <div class="hero-logos"></div>
       </div>
     </div>
-  </div>
-</section>
-
-<div class="blocks">
-  <%= render 'admin/communication/contents/show', about: @l10n, strip_javascript: true %>
-</div>
-
-<section id="pedagogy">
-  <div class="container">
-    <div class="content">
-      <div>
-        <h2>Pédagogie</h2>
+    <div class="essential-container" id="essentiel">
+      <div class="container">
+        <dl class="essential">
+          <% if @program.diploma %>
+            <dt><%= Education::Program.human_attribute_name(:diploma) %></dt>
+            <dd><a href=""><%= @program.diploma.to_s_in(current_language) %></a></dd>
+            <dt><%= Education::Diploma.human_attribute_name(:level) %></dt>
+            <dd><%= @program.diploma.level_i18n %></dd>
+          <% end %>
+          <% if @l10n.duration %>
+            <dt><%= Education::Program::Localization.human_attribute_name(:duration) %></dt>
+            <dd><%= @l10n.duration %></a></dd>
+          <% end %>
+        <% if @program.locations.any? %>
+          <dt><%= Education::Program.human_attribute_name('locations') %></dt>
+          <dd>
+            <% @program.locations.ordered(current_language).each do |location| %>
+              <a href=""><%= location.to_s_in(current_language) %></a>
+            <% end %>
+          </dd>
+        <% end %>
+        </dl>
       </div>
-      <div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('content') %></h3>
-          <%= sanitize @l10n.content %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('pedagogy') %></h3>
-          <%= sanitize @l10n.pedagogy %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('evaluation') %></h3>
-          <%= sanitize @l10n.evaluation %>
-        </div>
-        <div class="subpart">
-          <h3>Enseignants·es</h3>
-          <div class="table-responsive">
-            <table class="table-persons">
-              <caption>Enseignants·es</caption>
-              <tbody>
-                <% @program.university_person_involvements.each do |involvement| %>
-                  <% involvement_l10n = involvement.best_localization_for(@l10n.language) %>
+    </div>
+  </header>
+  <div class="document-content">
+    <div class="toc-cta"></div>
+    <section id="présentation">
+      <div class="container">
+        <div class="content">
+          <h2>Présentation</h2>
+          <div>
+            <%= render 'admin/application/preview/featured_image', l10n: @l10n %>
+            <% if @l10n.presentation %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name(:presentation) %></h3>
+                <%= sanitize @l10n.presentation %>
+              </section>
+            <% end %>
+            <% if @l10n.best_objectives %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name(:objectives) %></h3>
+                <%= sanitize @l10n.best_objectives %>
+              </section>
+            <% end %>
+          </div>
+          <% if @l10n.blocks.published.any? %>
+            <div class="blocks">
+              <%= render 'admin/communication/contents/show', about: @l10n, strip_javascript: true %>
+            </div>
+          <% end %>
+          <div>
+            <section id="objectifs">
+              <h3>Informations administratives</h3>
+              <table class="program-table">
+                <caption>Informations administratives</caption>
+                <tbody>
+                  <% if @program.diploma %>
+                    <tr>
+                      <th scope="row"><%= Education::Diploma.human_attribute_name('ects') %></th>
+                      <td><%= @program.diploma.ects %></td>
+                    </tr>
+                  <% end %>
                   <tr>
-                    <th scope="row"><a><%= involvement.to_s_in(@l10n.language) %></a></th>
-                    <td><%= involvement_l10n.description %></td>
+                    <th scope="row"><%= Education::Program.human_attribute_name('initial') %></th>
+                    <td><%= t @program.initial %></td>
                   </tr>
-                <% end %>
-              </tbody>
-            </table>
+                  <tr>
+                    <th scope="row"><%= Education::Program.human_attribute_name('continuing') %></th>
+                    <td><%= t @program.continuing %></td>
+                  </tr>
+                  <tr>
+                    <th scope="row"><%= Education::Program.human_attribute_name('apprenticeship') %></th>
+                    <td><%= t @program.apprenticeship %></td>
+                  </tr>
+                  <tr>
+                    <th scope="row"><%= Education::Program.human_attribute_name('capacity') %></th>
+                    <td><%= @program.capacity %></td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-</section>
+    </section>
 
-<section id="results">
-  <div class="container">
-    <div class="content">
-      <div>
-        <h2>Après la formation</h2>
+    <section id="pédagogie">
+      <div class="container">
+        <div class="content">
+          <h2>Pédagogie</h2>
+          <div>
+            <% if @l10n.best_content %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('content') %></h3>
+                <%= sanitize @l10n.best_content %>
+              </section>
+            <% end %>
+            <% if @l10n.best_pedagogy %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('pedagogy') %></h3>
+                <%= sanitize @l10n.best_pedagogy %>
+              </section>
+            <% end %>
+            <% if @l10n.best_evaluation %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('evaluation') %></h3>
+                <%= sanitize @l10n.best_evaluation %>
+              </section>
+            <% end %>
+            <% if @program.university_person_involvements.any? %>
+              <section>
+                <h3>Enseignants·es</h3>
+                <ul class="list-persons">
+                  <% @program.university_person_involvements.each do |involvement| %>
+                    <% involvement_l10n = involvement.best_localization_for(@l10n.language) %>
+                    <li>
+                      <a><%= involvement.to_s_in(@l10n.language) %></a>
+                      <p><%= involvement_l10n.description %></p>
+                    </li>
+                  <% end %>
+                </ul>
+              </section>
+            <% end %>
+          </div>
+        </div>
       </div>
-    <div>
-    <div class="subpart">
-      <h3><%= Education::Program::Localization.human_attribute_name('opportunities') %></h3>
-      <%= sanitize @l10n.opportunities %>
-      <h3><%= Education::Program::Localization.human_attribute_name('results') %></h3>
-      <%= sanitize @l10n.results %>
-    </div>
-  </div>
-</section>
+    </section>
 
-<section id="admission">
-  <div class="container">
-    <div class="content">
-      <div>
-        <h2>Admission</h2>
-      </div>
-      <div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('prerequisites') %></h3>
-          <%= sanitize @l10n.prerequisites %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('pricing') %></h3>
-          <%= sanitize @l10n.pricing %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('registration') %></h3>
-          <%= sanitize @l10n.registration %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('accessibility') %></h3>
-          <%= sanitize @l10n.accessibility %>
-        </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('other') %></h3>
-          <%= sanitize @l10n.other %>
-        </div>
-        <div class="subpart">
-          <h3>Rôles</h3>
-          <% @program.university_roles.each do |role| %>
-            <% role_l10n = role.best_localization_for(@l10n.language) %>
-            <p>
-              <b><%= role_l10n.description %></b><br>
-              <% role.people.each do |person| %>
-                <a><%= person.to_s_in(@l10n.language) %></a><br>
-                <a rel="noreferrer" target="_blank"><%= person.email %></a><br>
-              <% end %>
-            </p>
-          <% end %>
+    <section id="après-la-formation">
+      <div class="container">
+        <div class="content">
+          <h2>Après la formation</h2>
+          <div>
+            <% if @l10n.best_opportunities %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('opportunities') %></h3>
+                <%= sanitize @l10n.best_opportunities %>
+              </section>
+            <% end %>
+            <% if @l10n.best_results %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('results') %></h3>
+                <%= sanitize @l10n.best_results %>
+              </section>
+            <% end %>
+          </div>
         </div>
-        <div class="subpart">
-          <h3><%= Education::Program::Localization.human_attribute_name('contacts') %></h3>
-          <%= sanitize @l10n.contacts %>
+      </div>
+    </section>
+
+    <section id="admission">
+      <div class="container">
+        <div class="content">
+          <h2>Admission</h2>
+          <div>
+            <% if @l10n.best_prerequisites %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('prerequisites') %></h3>
+                <%= sanitize @l10n.best_prerequisites %>
+              </section>
+            <% end %>
+            <% if @l10n.best_pricing %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('pricing') %></h3>
+                <%= sanitize @l10n.best_pricing %>
+              </section>
+            <% end %>
+            <% if @l10n.pricing_initial %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('pricing_initial') %></h3>
+                <%= sanitize @l10n.pricing_initial %>
+              </section>
+            <% end %>
+            <% if @l10n.pricing_continuing %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('pricing_continuing') %></h3>
+                <%= sanitize @l10n.pricing_continuing %>
+              </section>
+            <% end %>
+            <% if @l10n.pricing_apprenticeship %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('pricing_apprenticeship') %></h3>
+                <%= sanitize @l10n.pricing_apprenticeship %>
+              </section>
+            <% end %>
+            <% if @l10n.best_registration %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('registration') %></h3>
+                <%= sanitize @l10n.best_registration %>
+              </section>
+            <% end %>
+            <% if @l10n.best_accessibility %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('accessibility') %></h3>
+                <%= sanitize @l10n.best_accessibility %>
+              </section>
+            <% end %>
+            <% if @l10n.best_other %>
+              <section class="rich-text">
+                <h3><%= Education::Program::Localization.human_attribute_name('other') %></h3>
+                <%= sanitize @l10n.best_other %>
+              </section>
+            <% end %>
+            <% if @program.university_roles.any? %>
+              <section>
+                <h3>Rôles</h3>
+                <% @program.university_roles.each do |role| %>
+                  <% role_l10n = role.best_localization_for(@l10n.language) %>
+                  <p>
+                    <b><%= role_l10n.description %></b><br>
+                    <% role.people.each do |person| %>
+                      <a><%= person.to_s_in(@l10n.language) %></a><br>
+                      <a rel="noreferrer" target="_blank"><%= person.email %></a><br>
+                    <% end %>
+                  </p>
+                <% end %>
+              </section>
+            <% end %>
+            <section class="rich-text">
+              <h3><%= Education::Program::Localization.human_attribute_name('contacts') %></h3>
+              <%= sanitize @l10n.contacts %>
+            </section>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
+
+    <% if @program.qualiopi_certified %>
+      <section id="certification">
+        <div class="container">
+          <div class="content">
+            <h2>Certification</h2>
+            <div>
+              <section class="rich-text">
+                <img src="https://example.osuny.org/assets/images/certifications/qualiopi.svg" alt="Qualiopi, processus certifié, République Française" class="logo-qualiopi">
+                <%= sanitize @l10n.qualiopi_text %>
+              </section>
+            </div>
+          </div>
+        </div>
+      </section>
+    <% end %>
   </div>
-</section>
+</main>
\ No newline at end of file
diff --git a/app/views/admin/layouts/preview.html.erb b/app/views/admin/layouts/preview.html.erb
index 723c35d0e..c94ba4eef 100644
--- a/app/views/admin/layouts/preview.html.erb
+++ b/app/views/admin/layouts/preview.html.erb
@@ -26,7 +26,7 @@
       <%= javascript_include_tag 'leaflet' %>
     <% end %>
   </head>
-  <body class="<%= 'full-width' if @l10n.about.try(:full_width) %>">
+  <body class="<%= @body_class %>">
     <%= yield %>
   </body>
   <script src="https://example.osuny.org/js/preview.js"></script>
diff --git a/app/views/admin/university/organizations/preview.html.erb b/app/views/admin/university/organizations/preview.html.erb
new file mode 100644
index 000000000..198c4fee0
--- /dev/null
+++ b/app/views/admin/university/organizations/preview.html.erb
@@ -0,0 +1,22 @@
+<main id="main" class="page-with-blocks">
+  <header class="hero hero--with-image hero--image-square">
+    <div class="container">
+      <div class="content">
+        <div class="hero-text">
+          <hgroup class="has-lead">
+            <h1><%= @l10n.to_s %></h1>
+            <%= sanitize @l10n.summary %>
+          </hgroup>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="document-content">
+    <div class="blocks">
+      <%= render 'admin/communication/contents/show',
+            about: @l10n,
+            strip_javascript: true %>
+    </div>
+  </div>
+</main>
+<%= render 'admin/application/preview/lightbox' %>
\ No newline at end of file
diff --git a/app/views/admin/university/organizations/show.html.erb b/app/views/admin/university/organizations/show.html.erb
index a2d61bb8d..f27213f0f 100644
--- a/app/views/admin/university/organizations/show.html.erb
+++ b/app/views/admin/university/organizations/show.html.erb
@@ -4,6 +4,7 @@
   <%= button_advanced do %>
     <%= destroy_link @organization %>
   <% end %>
+  <%= preview_link %>
   <%= edit_link @organization %>
 <% end %>
 
diff --git a/app/views/admin/university/people/preview.html.erb b/app/views/admin/university/people/preview.html.erb
new file mode 100644
index 000000000..756bf4aeb
--- /dev/null
+++ b/app/views/admin/university/people/preview.html.erb
@@ -0,0 +1,145 @@
+<main id="main" class="page-with-blocks">
+  <header class="hero hero--with-image hero--image-square">
+    <div class="container">
+      <div class="content">
+        <div class="hero-text">
+          <hgroup class="has-lead">
+            <h1><%= @l10n.to_s %></h1>
+            <%= sanitize @l10n.summary %>
+          </hgroup>
+        </div>
+        <figure class="image-square lightbox-figure">
+          <%= kamifusen_tag @person.featured_image if @person.featured_image.present? && @person.featured_image.attached? %>
+        </figure>
+      </div>
+    </div>
+  </header>
+  <div class="document-content">
+    <div class="container">
+      <div class="informations">
+        <div class="biography">
+          <div class="rich-text">
+            <%= sanitize @l10n.biography %>
+          </div>
+        </div>
+        <!-- TODO
+        <div class="roles">
+        </div>
+        -->
+      </div>
+      <!-- TODO
+      <div class="taxonomies-container">
+        <ul class="taxonomies-single persons-taxonomies with-label" aria-label="Catégories">
+          <li class="terms">
+            <span class="taxonomy-title">Catégories</span>
+            <ul class="taxonomy-children" aria-label="Catégories">
+              <li><a href="https://example.osuny.org/fr/equipe/categories/design/">Design</a></li>
+            </ul>
+          </li>
+          <li class="terms taxonomy-dev">
+            <span class="taxonomy-title">Développement web</span>
+            <ul class="taxonomy-children" aria-label="Catégories">
+              <li><a href="https://example.osuny.org/fr/equipe/categories/dev/back/">Back</a></li>
+            </ul>
+          </li>
+          <li class="terms taxonomy-langues">
+            <span class="taxonomy-title">Langues</span>
+            <ul class="taxonomy-children" aria-label="Catégories">
+              <li><a href="https://example.osuny.org/fr/equipe/categories/langues/anglais/">Anglais</a></li>
+              <li><a href="https://example.osuny.org/fr/equipe/categories/langues/japonais/">Japonais</a></li>
+            </ul>
+          </li>
+          <li class="terms taxonomy-nationalite">
+            <span class="taxonomy-title">Nationalité</span>
+            <ul class="taxonomy-children" aria-label="Catégories">
+              <li><a href="https://example.osuny.org/fr/equipe/categories/nationalite/uruguay/">Uruguay</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      -->
+      <div class="contacts-details">
+        <ul>
+          <% 
+          if @l10n.url.present?
+            detail = ContactDetails::Website.new(@l10n.url)
+            if detail.present? 
+              %>
+              <li class="website">
+                <span><%= t('contact_details.websites.website.label') %></span>
+                <a href="<%= detail.value %>" target="_blank" rel="noopener noreferrer" itemprop="url"><%= detail.label %></a>
+              </li>
+              <%
+            end
+          end
+          %>
+          <% if @person.email.present? %>
+            <li class="email">
+              <span><%= t('contact_details.emails.email.label') %></span>
+              <a href="mailto:<%= @person.email %>" itemprop="email" ><%= @person.email %></a>
+            </li>
+          <% end %>
+          <%
+          ContactDetails::SOCIAL_NETWORKS.each do |attribute|
+            should_show = is_information_public?(@person, attribute)
+            if should_show
+              data = ContactDetails.find_social(attribute, @person, @l10n)
+              next if data.blank?
+              kind = "ContactDetails::#{attribute.to_s.camelize}".constantize
+              detail = kind.new data
+              if detail.present?
+          %>
+            <li class="<%= attribute %>">
+              <span><%= attribute.to_s.titleize %></span>
+              <a href="<%= detail.value %>" ><%= detail.label %></a>
+            </li>
+          <%
+              end
+            end
+          end
+          %>
+          <%
+          ContactDetails::PHONES.each do |attribute|
+            if @person.respond_to?(attribute)
+              should_show = is_information_public?(@person, attribute)
+              if should_show
+                data = @person.public_send(attribute)
+                detail = ContactDetails::Phone.new data
+                if detail.present?
+          %>
+            <li class="<%= attribute %>">
+              <span><%= University::Person.human_attribute_name(attribute) %></span>
+              <a href="<%= detail.value %>" ><%= detail.label %></a>
+            </li>
+          <%
+                end
+              end
+            end
+          end
+          %>
+          <%
+          if @person.respond_to?(:address)
+            should_show = is_information_public?(@person, :address)
+            if should_show
+              label = t('contact_details.postal_address.address.label')
+              address_formatter = Osuny::AddressFormatter.new(about: @person, l10n: @l10n, language: @l10n.language)
+          %>
+            <li class="address">
+              <span><%= label %></span>
+              <%= address_formatter.to_html.html_safe %>
+            </li>
+          <%
+            end
+          end
+          %>
+        </ul>
+      </div>
+    </div>
+    <div class="blocks">
+      <%= render 'admin/communication/contents/show',
+            about: @l10n,
+            strip_javascript: true %>
+    </div>
+  </div>
+</main>
+<%= render 'admin/application/preview/lightbox' %>
\ No newline at end of file
diff --git a/app/views/admin/university/people/show.html.erb b/app/views/admin/university/people/show.html.erb
index 86c0b9e03..4b636703b 100644
--- a/app/views/admin/university/people/show.html.erb
+++ b/app/views/admin/university/people/show.html.erb
@@ -5,6 +5,7 @@
     <%= destroy_link @person %>
     <%= static_link static_admin_university_person_path(@person) %>
   <% end %>
+  <%= preview_link %>
   <%= edit_link @person %>
 <% end %>
 
diff --git a/config/routes/admin/university.rb b/config/routes/admin/university.rb
index f86e00a8f..5510e689b 100644
--- a/config/routes/admin/university.rb
+++ b/config/routes/admin/university.rb
@@ -27,6 +27,7 @@
     end
     member do
       get :static
+      get :preview
       get 'administrator/static' => 'people/administrators#static', as: 'static_administrator' 
       get 'author/static' => 'people/authors#static', as: 'static_author' 
       get 'experiences' => 'people/experiences#edit'
@@ -50,6 +51,7 @@
     end
     member do
       get :static
+      get :preview
       post :restore
     end
   end