diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index bef6a9cead9235805b894cce93ab033396d3d277..1d71576b129df81fc868efe53a4d0f83414091a8 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -1,3 +1,4 @@
+@import 'application/variables'
 @import 'bootstrap'
 @import 'simple_form_password_with_hints'
 @import 'simple_form_bs5_file_input'
diff --git a/app/assets/stylesheets/application/layout.sass b/app/assets/stylesheets/application/layout.sass
index 484376aaa1e22db034522910bb22f5d7bc7da07c..0e14173e2d20b6a9e1a8a46d3fe31d86e4565c47 100644
--- a/app/assets/stylesheets/application/layout.sass
+++ b/app/assets/stylesheets/application/layout.sass
@@ -12,13 +12,37 @@ footer
     &-danger
         color: #82322F
 
-h1
-    border-bottom: 1px solid
-    border-top: 1px solid
-    height: 100%
-    min-height: 160px
-    padding-top: 50px
+.extranet
+    header
+        border-bottom: 1px solid
+        border-top: 1px solid
+        min-height: 160px
+        h1, p
+            padding-top: 3rem
 
 .breadcrumb
     font-size: 14px
     padding-bottom: 50px
+.card
+    background: black
+    border: none
+    &, a
+        color: white
+        text-decoration-color: rgba(white, 0.5)
+        &:hover
+            text-decoration-color: white
+
+a
+    color: $primary
+    text-decoration-color: adjust-color($primary, $alpha: -0.8)
+    text-decoration-thickness: 1px
+    text-underline-offset: 3px
+    transition: text-decoration 0.5s
+    &:hover
+        text-decoration-color: $primary
+    &[target="_blank"]
+        &::after
+            background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat
+            background-size: contain
+            content: ""
+            display: inline-block
diff --git a/app/assets/stylesheets/application/variables.sass b/app/assets/stylesheets/application/variables.sass
new file mode 100644
index 0000000000000000000000000000000000000000..2cff045b6011ee11152218ff33e0aeb3fecbce54
--- /dev/null
+++ b/app/assets/stylesheets/application/variables.sass
@@ -0,0 +1,2 @@
+$primary: black
+$border-radius: 0
diff --git a/app/controllers/extranet/application_controller.rb b/app/controllers/extranet/application_controller.rb
index 6ea0f75a966bd71b4d7ad61a8455779daa63738c..ba0116397edf6125094bc8b0790ee968157c22a9 100644
--- a/app/controllers/extranet/application_controller.rb
+++ b/app/controllers/extranet/application_controller.rb
@@ -1,4 +1,5 @@
 class Extranet::ApplicationController < ApplicationController
+  layout 'extranet/layouts/application'
 
   def breadcrumb
     add_breadcrumb t('home'), root_path
diff --git a/app/models/education/cohort.rb b/app/models/education/cohort.rb
index 56885e89522c2d2535b003cfdf023172fcc7cc32..862b7578816503c4866990acc3571278096418e9 100644
--- a/app/models/education/cohort.rb
+++ b/app/models/education/cohort.rb
@@ -31,7 +31,7 @@ class Education::Cohort < ApplicationRecord
                           foreign_key: 'education_cohort_id',
                           association_foreign_key: 'university_person_id'
 
-  scope :ordered, -> { order(:name) }
+  scope :ordered, -> { includes(:academic_year).order('education_academic_years.year DESC') }
 
   def to_s
     "#{program} #{academic_year}"
diff --git a/app/models/university/person.rb b/app/models/university/person.rb
index 457f07b48be05c5350cc2200dbdf85274bd9f15a..a8dfaf724c49f80363320d614f8f530384495f4e 100644
--- a/app/models/university/person.rb
+++ b/app/models/university/person.rb
@@ -86,6 +86,11 @@ class University::Person < ApplicationRecord
                           through: :education_programs,
                           source: :websites
 
+  has_and_belongs_to_many :cohorts,
+                          class_name: 'Education::Cohort',
+                          foreign_key: 'university_person_id',
+                          association_foreign_key: 'education_cohort_id'
+
   accepts_nested_attributes_for :involvements
 
   validates_presence_of   :first_name, :last_name
diff --git a/app/models/university/person/alumnus/import.rb b/app/models/university/person/alumnus/import.rb
index bf9b5c066ebb284e313293693e80333f5edf1e2a..c35dcadee5096b3e5a8f7c3d93d55a8c11a1a6e4 100644
--- a/app/models/university/person/alumnus/import.rb
+++ b/app/models/university/person/alumnus/import.rb
@@ -30,26 +30,7 @@ class University::Person::Alumnus::Import < ApplicationRecord
 
   def parse
     csv.each do |row|
-      # program
-      # year
-      # first_name
-      # last_name
-      # gender
-      # birth
-      # mail
-      # photo
-      # url
-      # phonepro
-      # phoneperso
-      # mobile
-      # address
-      # zipcode
-      # city
-      # country
-      # status
-      # socialtwitter
-      # sociallinkedin
-      # row['program'] = '23279cab-8bc1-4c75-bcd8-1fccaa03ad55' #TMP local fix
+      row['program'] = '23279cab-8bc1-4c75-bcd8-1fccaa03ad55' #TMP local fix
       program = university.education_programs
                           .find_by(id: row['program'])
       next if program.nil?
@@ -76,23 +57,38 @@ class University::Person::Alumnus::Import < ApplicationRecord
                            .first_or_create
       end
       # TODO all fields
+      # gender
+      # birth
+      # phonepro
+      # phoneperso
+      # address
+      # zipcode
+      # city
+      # country
+      # status
       person.is_alumnus = true
       person.url = url
       person.slug = person.to_s.parameterize.dasherize
-      person.twitter = row['socialtwitter']
-      person.linkedin = row['sociallinkedin']
+      person.twitter ||= row['socialtwitter']
+      person.linkedin ||= row['sociallinkedin']
+      person.biography ||= row['status']
+      person.phone ||= row['mobile']
       byebug unless person.valid?
       person.save
       cohort.people << person unless person.in?(cohort.people)
-      photo = row['photo'].to_s
-      if photo.end_with?('.jpg') || photo.end_with?('.png')
-        filename = File.basename photo
-        begin
-          file = URI.open photo
-          person.picture.attach(io: file, filename: 'some-image.jpg')
-        rescue
-        end
-      end
+      add_picture person, row['photo']
+    end
+  end
+
+  def add_picture(person, photo)
+    return if photo.nil?
+    return if person.picture.attached?
+    return unless photo.end_with?('.jpg') || photo.end_with?('.png')
+    begin
+      file = URI.open photo
+      filename = File.basename photo
+      person.picture.attach(io: file, filename: filename)
+    rescue
     end
   end
 
diff --git a/app/views/extranet/academic_years/index.html.erb b/app/views/extranet/academic_years/index.html.erb
index 88d5b19706f781b93404aaf4e85c07015ae065d9..6c079cc94e1f15e56a8898ffd139820ffb5ee012 100644
--- a/app/views/extranet/academic_years/index.html.erb
+++ b/app/views/extranet/academic_years/index.html.erb
@@ -1,23 +1,26 @@
 <% content_for :title, Education::AcademicYear.model_name.human(count: 2) %>
 
-<h1><%= Education::AcademicYear.model_name.human(count: 2) %></h1>
+<header class="mb-5">
+  <h1><%= Education::AcademicYear.model_name.human(count: 2) %></h1>
+</header>
 
-<table class="<%= table_classes %>">
-  <thead>
-    <tr>
-      <th><%= Education::AcademicYear.model_name.human %></th>
-      <th><%= Education::Cohort.model_name.human(count: 2) %></th>
-      <th><%= University::Person::Alumnus.model_name.human(count: 2) %></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% @academic_years.each do |year| %>
-      <tr>
-        <td><%= link_to year, year %></td>
-        <td><%= year.cohorts.count %></td>
-        <td><%= year.people.count %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<div class="row">
+  <% @academic_years.each do |year| %>
+    <div class="col-md-3">
+      <article class="card mb-4">
+        <div class="card-body">
+          <h2 class="mb-5">
+            <%= link_to year, year, class: 'stretched-link' %>
+          </h2>
+          <p class="text-end mb-0">
+            <%= year.cohorts.count %>
+            <%= Education::Cohort.model_name.human(count: year.cohorts.count).downcase %>
+            <br>
+            <%= year.people.count %>
+            <%= University::Person::Alumnus.model_name.human(count: year.people.count).downcase %>
+          </p>
+        </div>
+      </article>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/extranet/academic_years/show.html.erb b/app/views/extranet/academic_years/show.html.erb
index 48f1cdc0ec4ecbc8fdbb8de7ba2549367c66ce4a..b4db00980201f886b562422faa0a6b85f71bcb44 100644
--- a/app/views/extranet/academic_years/show.html.erb
+++ b/app/views/extranet/academic_years/show.html.erb
@@ -1,9 +1,17 @@
 <% content_for :title, @academic_year %>
 
-<h1><%= @academic_year %></h1>
+<header class="mb-5">
+  <h1><%= @academic_year %></h1>
+</header>
 
-<% @academic_year.cohorts.each do |cohort| %>
-  <%= link_to cohort, cohort %>
-<% end %>
+<h2 class="mb-4">
+  <%= @academic_year.cohorts.count %>
+  <%= Education::Cohort.model_name.human(count: @academic_year.cohorts.count).downcase %>
+</h2>
+<%= render 'extranet/cohorts/list', cohorts: @academic_year.cohorts %>
 
+<h2 class="mt-5 mb-4">
+  <%= @academic_year.people.count %>
+  <%= University::Person::Alumnus.model_name.human(count: @academic_year.people.count).downcase %>
+</h2>
 <%= render 'extranet/persons/list', people: @academic_year.people %>
diff --git a/app/views/extranet/cohorts/_list.html.erb b/app/views/extranet/cohorts/_list.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..dee24aecaa565215d54598631b5a4011319d6bc7
--- /dev/null
+++ b/app/views/extranet/cohorts/_list.html.erb
@@ -0,0 +1,17 @@
+<div class="row">
+  <% cohorts.each do |cohort| %>
+    <div class="col-md-6">
+      <article class="card mb-4">
+        <div class="card-body">
+          <h2 class="mb-5">
+            <%= link_to cohort, cohort, class: 'stretched-link' %>
+          </h2>
+          <p class="text-end mb-0">
+            <%= cohort.people.count %>
+            <%= University::Person::Alumnus.model_name.human(count: cohort.people.count).downcase %>
+          </p>
+        </div>
+      </article>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/extranet/cohorts/index.html.erb b/app/views/extranet/cohorts/index.html.erb
index ab5e66756adab71e2cce22366236959c8de40db9..bf32bf86b3ee261df48e4ae5ec4655aba0d197b0 100644
--- a/app/views/extranet/cohorts/index.html.erb
+++ b/app/views/extranet/cohorts/index.html.erb
@@ -1,21 +1,7 @@
 <% content_for :title, Education::Cohort.model_name.human(count: 2) %>
 
-<h1><%= Education::Cohort.model_name.human(count: 2) %></h1>
+<header class="mb-5">
+  <h1><%= Education::Cohort.model_name.human(count: 2) %></h1>
+</header>
 
-<table class="<%= table_classes %>">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% @cohorts.each do |cohort| %>
-      <tr>
-        <td><%= link_to cohort, cohort %></td>
-        <td><%= cohort.people.count %></td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<%= render 'extranet/cohorts/list', cohorts: @cohorts %>
diff --git a/app/views/extranet/cohorts/show.html.erb b/app/views/extranet/cohorts/show.html.erb
index 87e03ef914c18531328a7ab1fd2e426821e2c416..69da25296c024df6bac2a231ff2aa154941c349f 100644
--- a/app/views/extranet/cohorts/show.html.erb
+++ b/app/views/extranet/cohorts/show.html.erb
@@ -1,5 +1,17 @@
 <% content_for :title, @cohort %>
 
-<h1><%= @cohort %></h1>
+<header class="mb-5">
+  <div class="row">
+    <div class="col-md-8">
+      <h1><%= @cohort %></h1>
+    </div>
+    <div class="col-md-4 text-end">
+      <p>
+        <%= @cohort.people.count %>
+        <%= University::Person::Alumnus.model_name.human(count: @cohort.people.count).downcase %>
+      </p>
+    </div>
+  </div>
+</header>
 
 <%= render 'extranet/persons/list', people: @cohort.people %>
diff --git a/app/views/extranet/layouts/application.html.erb b/app/views/extranet/layouts/application.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..1d50fec29506064e9324f1e8ab9b7dc9f317226e
--- /dev/null
+++ b/app/views/extranet/layouts/application.html.erb
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title><%= yield :title %></title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag 'application', media: 'all' %>
+    <%= javascript_include_tag 'application' %>
+    <%= favicon_link_tag 'favicon.png' %>
+  </head>
+  <body class="extranet <%= body_classes %>">
+    <%= render 'nav' %>
+    <main class="container">
+      <%= render_breadcrumbs builder: Appstack::BreadcrumbsOnRailsBuilder %>
+      <%= yield %>
+    </main>
+    <%= render 'footer' %>
+    <%= render 'gdpr/cookie_consent' %>
+    <%= render 'bugsnag' %>
+  </body>
+</html>
diff --git a/app/views/extranet/organizations/index.html.erb b/app/views/extranet/organizations/index.html.erb
index 8e991ba36327a5d4c931e44cbb7fc5c06023d94e..5796718de6abe4e3aee343cff839fdb3ac81f74a 100644
--- a/app/views/extranet/organizations/index.html.erb
+++ b/app/views/extranet/organizations/index.html.erb
@@ -1,6 +1,8 @@
 <% content_for :title, University::Organization.model_name.human(count: 2) %>
 
-<h1><%= University::Organization.model_name.human(count: 2) %></h1>
+<header class="mb-5">
+  <h1><%= University::Organization.model_name.human(count: 2) %></h1>
+</header>
 
 <table class="<%= table_classes %>">
   <thead>
@@ -18,3 +20,4 @@
     <% end %>
   </tbody>
 </table>
+<%= paginate @organizations, theme: 'bootstrap-5' %>
diff --git a/app/views/extranet/organizations/show.html.erb b/app/views/extranet/organizations/show.html.erb
index 39b24130fa4451934fc800724765ad58ded63dc4..0794ba8fd7b373246a382b9e2001f33240b492fe 100644
--- a/app/views/extranet/organizations/show.html.erb
+++ b/app/views/extranet/organizations/show.html.erb
@@ -1,3 +1,5 @@
 <% content_for :title, @organization %>
 
-<h1><%= @organization %></h1>
+<header class="mb-5">
+  <h1><%= @organization %></h1>
+</header>
diff --git a/app/views/extranet/persons/_list.html.erb b/app/views/extranet/persons/_list.html.erb
index d642ff08d3e4535a9a98926153711c69b25efa42..577ec80f7ff386520578e4c2ae242985d3094af9 100644
--- a/app/views/extranet/persons/_list.html.erb
+++ b/app/views/extranet/persons/_list.html.erb
@@ -1,8 +1,6 @@
 <%
 people_paged = people.ordered.page(params[:page]).per(60)
 %>
-<p><%= people.count %> <%= University::Person::Alumnus.model_name.human(count: 2).downcase %></p>
-
 <div class="row">
   <% people_paged.each do |person| %>
     <div class="col-xxl-2 col-md-3">
diff --git a/app/views/extranet/persons/index.html.erb b/app/views/extranet/persons/index.html.erb
index b854f15b7de7cc787fc271e715f609a3fabbf04c..f12ba91324d414923362034d30c58f500749eb0c 100644
--- a/app/views/extranet/persons/index.html.erb
+++ b/app/views/extranet/persons/index.html.erb
@@ -1,5 +1,17 @@
 <% content_for :title, University::Person::Alumnus.model_name.human(count: 2) %>
 
-<h1><%= University::Person::Alumnus.model_name.human(count: 2) %></h1>
+<header class="mb-5">
+  <div class="row">
+    <div class="col-md-9">
+      <h1><%= University::Person::Alumnus.model_name.human(count: 2) %></h1>
+    </div>
+    <div class="col-md-3 text-end">
+      <p>
+        <%= @people.count %>
+        <%= University::Person::Alumnus.model_name.human(count: @people.count).downcase %>
+      </p>
+    </div>
+  </div>
+</header>
 
 <%= render 'extranet/persons/list', people: @people %>
diff --git a/app/views/extranet/persons/show.html.erb b/app/views/extranet/persons/show.html.erb
index 034873013d285abf5879d5caa5e9e22628d6738b..fe745e11e75ad62333d129e973a5d73068df491f 100644
--- a/app/views/extranet/persons/show.html.erb
+++ b/app/views/extranet/persons/show.html.erb
@@ -1,8 +1,10 @@
 <% content_for :title, @person %>
 
-<div class="row">
+<div class="row mb-5">
   <div class="col-md-9">
-    <h1><%= @person %></h1>
+    <header style="height: 100%">
+      <h1><%= @person %></h1>
+    </header>
   </div>
   <div class="col-md-3">
     <% if @person.picture.attached? %>
@@ -12,3 +14,41 @@
     <% end %>
   </div>
 </div>
+
+<div class="row">
+  <div class="col-md-6">
+    <p><%= @person.biography %></p>
+  </div>
+  <div class="offset-md-3 col-md-3">
+    <dl>
+      <% @person.cohorts.each do |cohort| %>
+        <dt><%= cohort.program %></dt>
+        <dd><%= link_to cohort.academic_year, cohort %></dd>
+      <% end %>
+      <% if @person.phone %>
+        <dt><%= University::Person.human_attribute_name(:phone) %></dt>
+        <dd><a href="tel:<%= @person.phone %>" target="_blank" rel="noreferrer"><%= @person.phone %></a></dd>
+      <% end %>
+      <% if @person.email %>
+        <dt><%= University::Person.human_attribute_name(:email) %></dt>
+        <dd><a href="mailto:<%= @person.email %>" target="_blank" rel="noreferrer"><%= @person.email %></a></dd>
+      <% end %>
+      <% if @person.url %>
+        <dt><%= University::Person.human_attribute_name(:url) %></dt>
+        <dd><a href="<%= @person.url %>" target="_blank" rel="noreferrer"><%= @person.url %></a></dd>
+      <% end %>
+      <% if @person.linkedin %>
+        <dt><%= University::Person.human_attribute_name(:linkedin) %></dt>
+        <dd><a href="<%= @person.linkedin %>" target="_blank" rel="noreferrer"><%= @person.linkedin %></a></dd>
+      <% end %>
+      <% if @person.twitter %>
+        <dt><%= University::Person.human_attribute_name(:twitter) %></dt>
+        <dd>
+          <a href="<%= @person.twitter %>" target="_blank" rel="noreferrer">
+            <%= @person.twitter.gsub('https://twitter.com/', '') %>
+          </a>
+        </dd>
+      <% end %>
+    </dl>
+  </div>
+</div>
diff --git a/config/navigation.rb b/config/navigation.rb
index f5202790206588dfe8dd40c142cd19d8961ff6df..cb9701bc517107013309b64883701c420ee87d3b 100644
--- a/config/navigation.rb
+++ b/config/navigation.rb
@@ -4,17 +4,17 @@ SimpleNavigation::Configuration.run do |navigation|
   navigation.highlight_on_subpath = true
   navigation.selected_class = 'active'
   navigation.items do |primary|
+    primary.item  :person,
+                  University::Person::Alumnus.model_name.human(count: 2),
+                  university_persons_path
     primary.item  :years,
                   Education::AcademicYear.model_name.human(count: 2),
                   education_academic_years_path
-    primary.item  :organizations,
-                  University::Organization.model_name.human(count: 2),
-                  university_organizations_path
     primary.item  :cohorts,
                   Education::Cohort.model_name.human(count: 2),
                   education_cohorts_path
-    primary.item  :person,
-                  University::Person::Alumnus.model_name.human(count: 2),
-                  university_persons_path
+    primary.item  :organizations,
+                  University::Organization.model_name.human(count: 2),
+                  university_organizations_path
   end
 end