diff --git a/app/assets/stylesheets/extranet.sass b/app/assets/stylesheets/extranet.sass
index 432c569b9b2eed5f570a1a2d64df9e8a9efbc2d9..fbe2f9a170a7b434572be4c270901da6afebe16e 100644
--- a/app/assets/stylesheets/extranet.sass
+++ b/app/assets/stylesheets/extranet.sass
@@ -5,13 +5,14 @@
 
 // Vendors
 @import 'bootstrap'
-@import 'bootstrap-print-css/css/bootstrap-print.min'
+@import 'bootstrap-icons/font/bootstrap-icons.css'
 @import 'simple_form_password_with_hints'
 @import 'simple_form_bs5_file_input'
 @import 'gdpr/cookie_consent'
 @import 'cropperjs/dist/cropper'
 
 // Default
+@import 'extranet/bootstrap-icons'
 @import 'extranet/_default/base/*'
 @import 'extranet/_default/layouts/*'
 @import 'extranet/_default/components/*'
diff --git a/app/assets/stylesheets/extranet/bootstrap-icons.sass b/app/assets/stylesheets/extranet/bootstrap-icons.sass
new file mode 100644
index 0000000000000000000000000000000000000000..bebfb572308e1386be6ed22b3921d439bcfa7ab2
--- /dev/null
+++ b/app/assets/stylesheets/extranet/bootstrap-icons.sass
@@ -0,0 +1,5 @@
+@import 'bootstrap-print-css/css/bootstrap-print.min'
+
+@font-face
+  font-family: "bootstrap-icons"
+  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff")
\ No newline at end of file
diff --git a/app/views/extranet/cohorts/_index.cards.html.erb b/app/views/extranet/cohorts/_index.cards.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..e95a2f6271b0b4bdf0ede9be7352a7fbcc4b98b3
--- /dev/null
+++ b/app/views/extranet/cohorts/_index.cards.html.erb
@@ -0,0 +1,21 @@
+<% cohorts_paged = @cohorts.ordered.page(params[:page]).per(60) %>
+<div class="row">
+  <% cohorts_paged.each do |cohort| %>
+  <div class="col-md-4 col-xl-3">
+    <article class="card">
+      <div class="card-body">
+        <h2><%= link_to cohort.program, cohort, class: 'stretched-link' %></h2>
+        <p><%= cohort.academic_year.year %></p>
+        <p class="small">
+          <%= cohort.people.count %>
+          <%= University::Person::Alumnus.model_name.human(count: cohort.people.count).downcase %>
+        </p>
+        <p class="text-end mb-0">
+          <i class="bi bi-arrow-right"></i>
+        </p>
+      </div>
+    </article>
+  </div>
+  <% end %>
+</div>
+<%= paginate cohorts_paged, theme: 'bootstrap-5', window: 2 %>
diff --git a/app/views/extranet/cohorts/_index.facets.html.erb b/app/views/extranet/cohorts/_index.facets.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..642682d7c9dd4da7bd37f028ef481230577299a0
--- /dev/null
+++ b/app/views/extranet/cohorts/_index.facets.html.erb
@@ -0,0 +1,8 @@
+<div class="row">
+  <div class="col-md-3">
+    <%= render 'faceted_search/facets', facets: @facets %>
+  </div>
+  <div class="col-md-8 offset-md-1">
+    <%= render 'extranet/cohorts/list', cohorts: @cohorts %>
+  </div>
+</div>
diff --git a/app/views/extranet/cohorts/index.html.erb b/app/views/extranet/cohorts/index.html.erb
index 5cc630029fd4b47af9cb84d846dddbd13d48287e..492272752baafc018490e66806d0cc7c28be0ec7 100644
--- a/app/views/extranet/cohorts/index.html.erb
+++ b/app/views/extranet/cohorts/index.html.erb
@@ -8,11 +8,8 @@
   </p>
 </header>
 
-<div class="row">
-  <div class="col-md-3">
-    <%= render 'faceted_search/facets', facets: @facets %>
-  </div>
-  <div class="col-md-8 offset-md-1">
-    <%= render 'extranet/cohorts/list', cohorts: @cohorts %>
-  </div>
-</div>
+<% if current_extranet.should_show_years? %>
+  <%= render 'index.facets' %>
+<% else %>
+  <%= render 'index.cards' %>
+<% end %>
\ No newline at end of file
diff --git a/package.json b/package.json
index 4c549cf3434b0480c0db24fd05131273aa68d777..a2d8609753fa6d742370cbe63d1ffe0e334f4361 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   },
   "dependencies": {
     "16": "0.0.2",
+    "bootstrap-icons": "^1.9.1",
     "bootstrap-print-css": "^1.0.1",
     "cropperjs": "^1.5.12",
     "jquery-cropper": "^1.0.1",
diff --git a/yarn.lock b/yarn.lock
index f3c70d15757615d0d8e15920b958f4cdb99f234b..3b61a7621ac123d36be4225421140ad4434b643c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -104,6 +104,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
   integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
 
+bootstrap-icons@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz#cf22d91a25447645e45c49ebde4e56eafdfe761b"
+  integrity sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==
+
 bootstrap-print-css@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bootstrap-print-css/-/bootstrap-print-css-1.0.1.tgz#acc0264388caebbad0805e60c869d42cd6fe55bf"