diff --git a/javascripts/collection.js b/javascripts/collection.js
index d9a24e0..f99e921 100644
--- a/javascripts/collection.js
+++ b/javascripts/collection.js
@@ -32,6 +32,9 @@ Vue.createApp({
         this.fetch();
     },
     methods: {
+        formatParams(param) {
+            return param.replace("&", "%26").replace("+", "%2B");
+        },
         fetch() {
             this.loading = true;
             this.total = 0;
@@ -64,19 +67,19 @@ Vue.createApp({
 
             let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
-                url += `&artists_sort=${this.artist.replace("&", "%26")}`;
+                url += `&artists_sort=${this.formatParams(this.artist)}`;
             }
             if (this.format) {
-                url += `&format=${this.format.replace("&", "%26")}`;
+                url += `&format=${this.formatParams(this.format)}`;
             }
             if (this.year) {
                 url += `&year=${this.year}`;
             }
             if (this.genre) {
-                url += `&genre=${this.genre.replace("&", "%26")}`;
+                url += `&genre=${this.formatParams(this.genre)}`;
             }
             if (this.style) {
-                url += `&style=${this.style.replace("&", "%26")}`;
+                url += `&style=${this.formatParams(this.style)}`;
             }
 
             axios
@@ -101,19 +104,19 @@ Vue.createApp({
         changeUrl() {
             let url = `?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
             if (this.artist) {
-                url += `&artists_sort=${this.artist.replace("&", "%26")}`;
+                url += `&artists_sort=${this.formatParams(this.artist)}`;
             }
             if (this.format) {
-                url += `&format=${this.format.replace("&", "%26")}`;
+                url += `&format=${this.formatParams(this.format)}`;
             }
             if (this.year) {
                 url += `&year=${this.year}`;
             }
             if (this.genre) {
-                url += `&genre=${this.genre.replace("&", "%26")}`;
+                url += `&genre=${this.formatParams(this.genre)}`;
             }
             if (this.style) {
-                url += `&style=${this.style.replace("&", "%26")}`;
+                url += `&style=${this.formatParams(this.style)}`;
             }
 
             window.location.href = url;
diff --git a/views/pages/collection.ejs b/views/pages/collection.ejs
index 51974c8..8680885 100644
--- a/views/pages/collection.ejs
+++ b/views/pages/collection.ejs
@@ -72,6 +72,9 @@
     </div>
     <nav class="pagination" role="navigation" aria-label="Pagination">
         <ul class="pagination-list">
+            <li v-if="page > 1">
+                <a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">&laquo;</a>
+            </li>
             <template v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
                 <template v-if="p < 2 || p > (totalPages - 1) || (Number(page) - 1) <= p && Number(page) + 1 >= p">
                     <li>
@@ -84,6 +87,9 @@
                     </li>
                 </template>
             </template>
+            <li v-if="page < totalPages">
+                <a class="pagination-link" @click="goTo(totalPages)" aria-label="Aller à la derière page">&raquo;</a>
+            </li>
         </ul>
     </nav>