diff --git a/src/app.js b/src/app.js
index 268b589..6d1e507 100644
--- a/src/app.js
+++ b/src/app.js
@@ -13,6 +13,7 @@ import { isXhr } from "./helpers";
 
 import indexRouter from "./routes";
 import maCollectionRouter from "./routes/ma-collection";
+import collectionRouter from "./routes/collection";
 
 import importAlbumRouterApiV1 from "./routes/api/v1/albums";
 import importSearchRouterApiV1 from "./routes/api/v1/search";
@@ -83,6 +84,7 @@ app.use(
 
 app.use("/", indexRouter);
 app.use("/ma-collection", maCollectionRouter);
+app.use("/collection", collectionRouter);
 app.use("/api/v1/albums", importAlbumRouterApiV1);
 app.use("/api/v1/search", importSearchRouterApiV1);
 app.use("/api/v1/me", importMeRouterApiV1);
@@ -115,7 +117,10 @@ app.use((error, req, res, next) => {
     } else {
         res.status(error.errorCode || 500);
         res.render("index", {
-            page: { title: "500: Oups… le serveur a crashé !", error },
+            page: {
+                title: error.title || "500: Oups… le serveur a crashé !",
+                error,
+            },
             errorCode: error.errorCode || 500,
             viewname: "error",
             user: req.user || null,
diff --git a/src/libs/error.js b/src/libs/error.js
index 562265f..13470f2 100644
--- a/src/libs/error.js
+++ b/src/libs/error.js
@@ -4,9 +4,10 @@
 class ErrorEvent extends Error {
     /**
      * @param  {Number} errorCode
+     * @param  {String} title
      * @param  {Mixed} ...params
      */
-    constructor(errorCode, ...params) {
+    constructor(errorCode, title, ...params) {
         super(...params);
 
         if (Error.captureStackTrace) {
@@ -14,6 +15,7 @@ class ErrorEvent extends Error {
         }
 
         this.errorCode = parseInt(errorCode, 10);
+        this.title = title;
         this.date = new Date();
     }
 }
diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js
index 06220df..8025973 100644
--- a/src/middleware/Albums.js
+++ b/src/middleware/Albums.js
@@ -5,6 +5,7 @@ import xl from "excel4node";
 import Pages from "./Pages";
 
 import AlbumsModel from "../models/albums";
+import UsersModel from "../models/users";
 import ErrorEvent from "../libs/error";
 
 /**
@@ -493,7 +494,7 @@ class Albums extends Pages {
     static async getAllDistincts(field, user) {
         const distincts = await AlbumsModel.find(
             {
-                user,
+                User: user,
             },
             [],
             {
@@ -519,8 +520,11 @@ class Albums extends Pages {
             order = "asc",
             artists_sort,
             format,
+            userId: collectionUserId,
         } = this.req.query;
 
+        let userId = this.req.user?._id;
+
         const where = {};
 
         if (artists_sort) {
@@ -530,8 +534,35 @@ class Albums extends Pages {
             where["formats.name"] = format;
         }
 
+        if (!this.req.user && !collectionUserId) {
+            throw new ErrorEvent(
+                401,
+                "Cette collection n'est pas publique",
+                "Cette collection n'est pas publique"
+            );
+        }
+
+        if (collectionUserId) {
+            const userIsSharingCollection = await UsersModel.findById(
+                collectionUserId
+            );
+
+            if (
+                !userIsSharingCollection ||
+                !userIsSharingCollection.isPublicCollection
+            ) {
+                throw new ErrorEvent(
+                    401,
+                    "Cette collection n'est pas publique",
+                    "Cette collection n'est pas publique"
+                );
+            }
+
+            userId = userIsSharingCollection._id;
+        }
+
         const count = await AlbumsModel.count({
-            user: this.req.user._id,
+            User: userId,
             ...where,
         });
 
@@ -553,7 +584,7 @@ class Albums extends Pages {
 
         const rows = await AlbumsModel.find(
             {
-                user: this.req.user._id,
+                User: userId,
                 ...where,
             },
             [],
@@ -625,6 +656,29 @@ class Albums extends Pages {
 
         this.setPageContent("item", item);
     }
+
+    /**
+     * Méthode permettant de créer la page "collection/:userId"
+     */
+    async loadPublicCollection() {
+        const { userId } = this.req.params;
+
+        const user = await UsersModel.findById(userId);
+
+        if (!user || !user.isPublicCollection) {
+            throw new ErrorEvent(
+                401,
+                "Cet utilisateur ne souhaite pas partager sa collection"
+            );
+        }
+
+        const artists = await Albums.getAllDistincts("artists_sort", userId);
+        const formats = await Albums.getAllDistincts("formats.name", userId);
+
+        this.setPageContent("username", user.username);
+        this.setPageContent("artists", artists);
+        this.setPageContent("formats", formats);
+    }
 }
 
 export default Albums;
diff --git a/src/middleware/Me.js b/src/middleware/Me.js
index 68e0f2f..ae2712c 100644
--- a/src/middleware/Me.js
+++ b/src/middleware/Me.js
@@ -1,7 +1,6 @@
 import Joi from "joi";
-import mongoose from "mongoose";
 
-const Users = mongoose.model("Users");
+import UsersModel from "../models/users";
 
 /**
  * Classe permettant la gestion de l'utilisateur connecté
@@ -23,7 +22,7 @@ class Me {
         });
 
         const value = await schema.validateAsync(body);
-        const update = await Users.findByIdAndUpdate(
+        const update = await UsersModel.findByIdAndUpdate(
             user._id,
             { $set: value },
             { new: true }
diff --git a/src/routes/api/v1/albums.js b/src/routes/api/v1/albums.js
index c8f0f1a..e1caa1f 100644
--- a/src/routes/api/v1/albums.js
+++ b/src/routes/api/v1/albums.js
@@ -9,7 +9,7 @@ const router = express.Router();
 
 router
     .route("/")
-    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+    .get(async (req, res, next) => {
         try {
             const albums = new Albums(req);
             const data = await albums.getAll();
diff --git a/src/routes/collection.js b/src/routes/collection.js
new file mode 100644
index 0000000..6584992
--- /dev/null
+++ b/src/routes/collection.js
@@ -0,0 +1,22 @@
+import express from "express";
+
+import Albums from "../middleware/Albums";
+
+import render from "../libs/format";
+
+// eslint-disable-next-line new-cap
+const router = express.Router();
+
+router.route("/:userId").get(async (req, res, next) => {
+    try {
+        const page = new Albums(req, "collection");
+
+        await page.loadPublicCollection();
+
+        render(res, page);
+    } catch (err) {
+        next(err);
+    }
+});
+
+export default router;
diff --git a/views/error.ejs b/views/error.ejs
index b0e5112..8f80430 100644
--- a/views/error.ejs
+++ b/views/error.ejs
@@ -5,7 +5,9 @@
         <img src="/img/404.svg" alt="Erreur 404" style="max-height: 400px;" />
     </p>
     <% } %>
+    <% if ( process.env.NODE_ENV !== 'production' ) { %>
     <div>
         <pre><%= page.error %></pre>
     </div>
+    <% } %>
 </main>
\ No newline at end of file
diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs
new file mode 100644
index 0000000..9359a12
--- /dev/null
+++ b/views/pages/collection.ejs
@@ -0,0 +1,184 @@
+<main class="layout-maxed ma-collection" id="app">
+    <h1>
+        Collection de <%= page.username %>
+    </h1>
+
+    <div class="filters">
+        <div class="field">
+            <label for="artist">Artiste</label>
+            <select id="artist" v-model="artist" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.artists.length; i += 1 ) {
+                        __append(`<option value="${page.artists[i]}">${page.artists[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="format">Format</label>
+            <select id="format" v-model="format" @change="changeFilter">
+                <option value="">Tous</option>
+                <%
+                    for (let i = 0; i < page.formats.length; i += 1 ) {
+                        __append(`<option value="${page.formats[i]}">${page.formats[i]}</option>`);
+                    }
+                %>
+            </select>
+        </div>
+        <div class="field">
+            <label for="sortOrder">Trier par</label>
+            <select id="sortOrder" v-model="sortOrder" @change="changeSort">
+                <option value="artists_sort-asc">Artiste (A-Z)</option>
+                <option value="artists_sort-desc">Artiste (Z-A)</option>
+                <option value="year-asc">Année (A-Z)</option>
+                <option value="year-desc">Année (Z-A)</option>
+                <option value="country-asc">Pays (A-Z)</option>
+                <option value="country-desc">Pays (Z-A)</option>
+                <option value="formats.name-asc">Format (A-Z)</option>
+                <option value="formats.name-desc">Format (Z-A)</option>
+            </select>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 list">
+        <div class="item"  v-if="!loading" v-for="item in items">
+            <span class="title">
+                {{ item.artists_sort}} - {{ item.title }}
+            </span>
+            <div class="grid grid-cols-2 md:grid-cols-4">
+                <div>
+                    <img :src="item.thumb" :alt="item.title" />
+                </div>
+                <div class="md:col-span-3">
+                    <span><strong>Année :</strong> {{ item.year }}</span>
+                    <br />
+                    <span><strong>Pays :</strong> {{ item.country }}</span>
+                    <br />
+                    <span>
+                        <strong>Format : </strong>
+                        <span v-for="(format, index) in item.formats">
+                            {{ format.name }}
+                            <template v-if="format.descriptions">
+                                (<template v-for="(description, j) in format.descriptions">
+                                    {{description}}<template v-if="j < format.descriptions.length - 1">, </template>
+                                </template>)
+                            </template>
+                            <template v-if="index < item.formats.length - 1">, </template>
+                        </span>
+                    </span>
+                    <br />
+                    <span><strong>Genre :</strong> <template v-for="(genre, index) in item.genres">{{ genre }}<template v-if="index < item.genres.length - 1">, </template></template></span>
+                    <br />
+                    <span><strong>Style :</strong> <template v-for="(style, index) in item.styles">{{ style }}<template v-if="index < item.styles.length - 1">, </template></template></span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="total">
+        <strong>Nombre total d'éléments : </strong>{{total}}
+    </div>
+    <nav class="pagination" role="navigation" aria-label="Pagination">
+        <ul class="pagination-list">
+            <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
+                <template v-if="p < 2 || p > (totalPages - 1) || (page - 1) <= p && page + 1 >= p">
+                    <li>
+                        <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Aller à la page {{p}}">{{ p }}</a>
+                    </li>
+                </template>
+                <template v-if="(page - 3 === p && page - 2 > 1) || (page + 2 === p && page + 2 < totalPages - 1)">
+                    <li>
+                        <a class="pagination-link is-disabled">…</a>
+                    </li>
+                </template>
+            </template>
+        </ul>
+    </nav>
+</main>
+
+<script>
+    const {
+        protocol,
+        host
+    } = window.location;
+
+    Vue.createApp({
+        data() {
+            return {
+                loading: false,
+                items: [],
+                total: 0,
+                page: 1,
+                totalPages: 1,
+                limit: 16,
+                artist: '',
+                format: '',
+                sortOrder: 'artists_sort-asc',
+                sort: 'artists_sort',
+                order: 'asc',
+                userId: "<%= params.userId %>",
+            }
+        },
+        created() {
+            this.fetch();
+        },
+        methods: {
+            fetch() {
+                this.loading = true;
+
+                let url = `/api/v1/albums?userId=${this.userId}&page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
+                if ( this.artist ) {
+                    url += `&artists_sort=${this.artist}`;
+                }
+                if ( this.format ) {
+                    url += `&format=${this.format}`;
+                }
+
+                axios.get(url)
+                    .then( response => {
+                        this.items = response.data.rows;
+                        this.total = response.data.count;
+                        this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
+
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de charger cette collection");
+                    })
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            },
+            next(event) {
+                event.preventDefault();
+
+                this.page += 1;
+
+                this.fetch();
+            },
+            previous(event) {
+                event.preventDefault();
+
+                this.page -= 1;
+
+                this.fetch();
+            },
+            goTo(page) {
+                this.page = page;
+
+                this.fetch();
+            },
+            changeSort() {
+                const [sort,order] = this.sortOrder.split('-');
+                this.sort = sort;
+                this.order = order;
+                this.page = 1;
+
+                this.fetch();
+            },
+            changeFilter() {
+                this.page = 1;
+
+                this.fetch();
+            },
+        }
+  }).mount('#app');
+</script>
diff --git a/views/pages/mon-compte/ma-collection/index.ejs b/views/pages/mon-compte/ma-collection/index.ejs
index 57fcb11..f98d3f9 100644
--- a/views/pages/mon-compte/ma-collection/index.ejs
+++ b/views/pages/mon-compte/ma-collection/index.ejs
@@ -3,6 +3,9 @@
         Ma collection
         <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
     </h1>
+    <a :href="shareLink" v-if="isPublicCollection" target="_blank">
+        <i class="icon-share"></i> Voir ma collection partagée
+    </a>
     <div class="filters">
         <div class="field">
             <label for="artist">Artiste</label>
@@ -257,11 +260,11 @@
                 })
                     .then( (res) => {
                         this.isPublicCollection = res.data.isPublicCollection;
-                        showToastr("Collection partagée", true);
 
                         if ( this.isPublicCollection ) {
-                            console.log('ici', this.shareLink)
-                            window.open(this.shareLink, '_blank');
+                            showToastr("Votre collection est désormais publique", true);
+                        } else {
+                            showToastr("Votre collection n'est plus partagée", true);
                         }
                     })
                     .catch((err) => {