diff --git a/front/src/AddCollection.vue b/front/src/AddCollection.vue
index 3c6657a..243719d 100644
--- a/front/src/AddCollection.vue
+++ b/front/src/AddCollection.vue
@@ -29,7 +29,7 @@ function createCollection() {
     if (res.ok) {
       addingCollection.value = false
       collection.value.name = ''
-      emit('created')
+      res.json().then((json) => emit('created', json.id))
     } else {
       res.json().then((json) => (errors.value = json))
     }
diff --git a/front/src/CollectionsBrowser.vue b/front/src/CollectionsBrowser.vue
index 16aa1ad..9ac0a83 100644
--- a/front/src/CollectionsBrowser.vue
+++ b/front/src/CollectionsBrowser.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { getCollections } from './api.js'
+import { useRouter } from 'vue-router'
 import CollectionListElement from './CollectionListElement.vue'
 import Pagination from './Pagination.vue'
 import AddCollection from './AddCollection.vue'
 
+const router = useRouter()
 const limit = 5
 const pageNumber = ref(1)
 
@@ -29,13 +31,17 @@ function pageChange(newPageNumber) {
   data.value = null
   fetchData()
 }
+
+function goToCollection(id) {
+  router.push(`/collection/${id}`)
+}
 </script>
 
 <template>
   <div>
     <div v-if="error">{{ $t('collections.error', { error: error.message }) }}</div>
     <div v-else-if="data">
-      <AddCollection @created="fetchData" />
+      <AddCollection @created="goToCollection" />
       <div class="collectionslist">
         <div class="my-2" v-for="collection in data.collections" :key="collection.id">
           <CollectionListElement v-bind="collection" />