diff --git a/src/api.js b/src/api.js
index 3c21718..cae0890 100644
--- a/src/api.js
+++ b/src/api.js
@@ -42,6 +42,12 @@ function collections() {
     return http.get("/collections");
 }
 
+function createCollection(name) {
+    return http.post("/collections", {
+        name,
+    });
+}
+
 function follow(collection) {
     return http.post(`/collections/${collection.id}/follow`);
 }
@@ -72,6 +78,7 @@ export default {
     authenticate,
     logout,
     collections,
+    createCollection,
     follow,
     unfollow,
     addCollectionToLink,
diff --git a/src/components/Collections.vue b/src/components/Collections.vue
new file mode 100644
index 0000000..6b2c53d
--- /dev/null
+++ b/src/components/Collections.vue
@@ -0,0 +1,294 @@
+<!-- This file is part of Flus Browser
+  -- SPDX-License-Identifier: AGPL-3.0-or-later
+  -->
+
+<template>
+    <div>
+        <div v-if="open && ready" class="panel panel--grey panel--rounded flow">
+            <ul v-if="selectedCollections.length > 0" class="list--nostyle flow flow--smaller">
+                <li
+                    v-for="collection in selectedCollections"
+                    class="cols cols--always cols--center cols--gap-smaller"
+                >
+                    <span class="col--extend">
+                        {{ collection.name }}
+
+                        <span v-if="collection.isPublic" class="badge badge--accent">
+                            {{ t('collection.public') }}
+                        </span>
+                    </span>
+
+                    <button
+                        @click="() => removeCollection(collection)"
+                        type="button"
+                        :disabled="form.inProgress() ? 'true' : null"
+                    >
+                        {{ t('collection.remove') }}
+                    </button>
+                </li>
+            </ul>
+
+            <form
+                v-if="notSelectedCollections.length > 0"
+                @submit.prevent="addCollection"
+                class="flow flow--small"
+                :disabled="form.inProgress() ? 'true' : null"
+            >
+                <div v-if="fillMode === 'select'" class="flow flow--smaller">
+                    <div class="cols cols--always cols--center cols--gap-smaller">
+                        <label for="collection-select" class="col--extend">
+                            {{ t('collection.add_to_collection') }}
+                        </label>
+
+                        <div>
+                            <button
+                                type="button"
+                                class="button--smaller"
+                                @click="setFillModeToText"
+                                :disabled="form.inProgress() ? 'true' : null"
+                            >
+                                <Icon name="pencil" />
+                                {{ t('collection.new') }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <select
+                        v-model="newCollectionId"
+                        id="collection-select"
+                        ref="collection-select"
+                        :disabled="form.inProgress() ? 'true' : null"
+                    >
+                        <option v-for="collection in notSelectedCollectionsNoGroup" :value="collection.id">
+                            {{ collection.name }}
+
+                            <template v-if="collection.isPublic">
+                                ({{ t('collection.public') }})
+                            </template>
+                        </option>
+
+                        <optgroup v-for="[groupName, groupCollections] in notSelectedCollectionsByGroup" :label="groupName">
+                            <option v-for="collection in groupCollections" :value="collection.id">
+                                {{ collection.name }}
+
+                                <template v-if="collection.isPublic">
+                                    ({{ t('collection.public') }})
+                                </template>
+                            </option>
+                        </optgroup>
+                    </select>
+                </div>
+
+                <div v-else class="flow flow--smaller">
+                    <div class="cols cols--always cols--center cols--gap-smaller">
+                        <label for="collection-name" class="col--extend">
+                            {{ t('collection.name') }}
+                        </label>
+
+                        <div>
+                            <button
+                                type="button"
+                                class="button--smaller"
+                                @click="setFillModeToSelect"
+                                :disabled="form.inProgress() ? 'true' : null"
+                            >
+                                {{ t('collection.new_cancel') }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <input
+                        type="text"
+                        v-model="newCollectionName"
+                        id="collection-name"
+                        ref="collection-name"
+                        :disabled="form.inProgress() ? 'true' : null"
+                    >
+                </div>
+
+                <div class="text--center">
+                    <button class="button--primary" :disabled="form.inProgress() ? 'true' : null">
+                        {{ t('collection.add') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, useTemplateRef, reactive, computed, watch, onMounted, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+
+import api from "../api.js";
+import http from "../http.js";
+import { store } from "../store.js";
+import form from "../form.js";
+import Collection from "../models/collection.js";
+
+const { t, locale } = useI18n();
+locale.value = store.locale;
+
+const props = defineProps({
+    link: {
+        type: Object,
+        required: true,
+    },
+    open: {
+        type: Boolean,
+    },
+});
+
+const ready = ref(false);
+const collections = ref([]);
+const newCollectionId = ref("");
+const newCollectionName = ref("");
+const fillMode = ref("select");
+
+const collectionSelectRef = useTemplateRef("collection-select");
+const collectionNameRef = useTemplateRef("collection-name");
+
+const selectedCollections = computed(() => {
+    return collections.value.filter((collection) => {
+        return props.link.collections.includes(collection.id);
+    });
+});
+
+const notSelectedCollections = computed(() => {
+    return collections.value.filter((collection) => {
+        return !props.link.collections.includes(collection.id);
+    });
+});
+
+const notSelectedCollectionsNoGroup = computed(() => {
+    return notSelectedCollections.value.filter((collection) => {
+        return collection.group === null;
+    });
+});
+
+const notSelectedCollectionsByGroup = computed(() => {
+    const collectionsWithGroup = notSelectedCollections.value.filter((collection) => {
+        return collection.group !== null;
+    });
+
+    const groupedCollections = Object.groupBy(collectionsWithGroup, (collection) => {
+        return collection.group;
+    });
+
+    return Object.entries(groupedCollections);
+});
+
+async function setFillModeToText() {
+    fillMode.value = "text";
+
+    await nextTick();
+
+    collectionNameRef.value.focus();
+}
+
+async function setFillModeToSelect() {
+    fillMode.value = "select";
+    newCollectionName.value = "";
+
+    await nextTick();
+
+    collectionSelectRef.value.focus();
+}
+
+function setDefaultSelectedCollectionId() {
+    if (notSelectedCollectionsNoGroup.value.length > 0) {
+        newCollectionId.value = notSelectedCollectionsNoGroup.value[0].id;
+    } else if (notSelectedCollections.value.length > 0) {
+        newCollectionId.value = notSelectedCollections.value[0].id;
+    }
+}
+
+function loadCollections() {
+    api.collections().then((fetchedCollections) => {
+        fetchedCollections.sort((collection1, collection2) => {
+            return collection1.name.localeCompare(collection2.name);
+        });
+
+        collections.value = fetchedCollections.map((fetchedCollection) => {
+            const collection = reactive(new Collection());
+            collection.init(fetchedCollection);
+            return collection;
+        });
+
+        setDefaultSelectedCollectionId();
+
+        ready.value = true;
+    });
+}
+
+async function addCollection() {
+    form.startRequest();
+
+    let collection = null;
+
+    if (newCollectionName.value) {
+        // First, check if the "new" name already exists.
+        collection = collections.value.find((collection) => {
+            return collection.name === newCollectionName.value;
+        });
+
+        if (!collection) {
+            try {
+                // No? Then create the collection.
+                const fetchedCollection = await api.createCollection(newCollectionName.value);
+
+                collection = new Collection();
+                collection.init(fetchedCollection);
+
+                collections.value = [...collections.value, collection];
+            } catch (error) {
+                store.notify("error", t("errors.unknown"));
+            }
+        }
+    } else {
+        collection = collections.value.find((collection) => {
+            return collection.id === newCollectionId.value;
+        });
+    }
+
+    if (!collection) {
+        form.finishRequest();
+        return;
+    }
+
+    try {
+        await api.addCollectionToLink(props.link, collection);
+
+        props.link.addCollection(collection);
+
+        setFillModeToSelect();
+    } catch (error) {
+        store.notify("error", t("errors.unknown"));
+    }
+
+    form.finishRequest();
+}
+
+async function removeCollection(collection) {
+    form.startRequest();
+
+    try {
+        await api.removeCollectionFromLink(props.link, collection);
+
+        props.link.removeCollection(collection);
+    } catch (error) {
+        store.notify("error", t("errors.unknown"));
+    }
+
+    form.finishRequest();
+}
+
+watch(
+    () => props.link.collections,
+    () => {
+        setDefaultSelectedCollectionId();
+    },
+);
+
+onMounted(loadCollections);
+</script>
diff --git a/src/components/CollectionsSelector.vue b/src/components/CollectionsSelector.vue
deleted file mode 100644
index f55414c..0000000
--- a/src/components/CollectionsSelector.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<!-- This file is part of Flus Browser
-  -- SPDX-License-Identifier: AGPL-3.0-or-later
-  -->
-
-<template>
-    <div>
-        <div v-if="open && ready" class="panel panel--grey panel--rounded flow">
-            <ul v-if="selectedCollections.length > 0" class="list--nostyle flow flow--smaller">
-                <li
-                    v-for="collection in selectedCollections"
-                    class="cols cols--always cols--center cols--gap-smaller"
-                >
-                    <span class="col--extend">
-                        {{ collection.name }}
-
-                        <span v-if="collection.isPublic" class="badge badge--accent">
-                            {{ t('collection.public') }}
-                        </span>
-                    </span>
-
-                    <button
-                        @click="() => removeCollection(collection)"
-                        type="button"
-                        :disabled="props.disabled"
-                    >
-                        {{ t('collection.remove') }}
-                    </button>
-                </li>
-            </ul>
-
-            <form
-                v-if="notSelectedCollections.length > 0"
-                @submit.prevent="addCollection"
-                class="flow flow--small"
-                :disabled="props.disabled"
-            >
-                <div class="flow flow--smaller">
-                    <label for="collection-select">
-                        {{ t('collection.add_to_collection') }}
-                    </label>
-
-                    <select v-model="newCollectionId" id="collection-select" :disabled="props.disabled">
-                        <option v-for="collection in notSelectedCollectionsNoGroup" :value="collection.id">
-                            {{ collection.name }}
-
-                            <template v-if="collection.isPublic">
-                                ({{ t('collection.public') }})
-                            </template>
-                        </option>
-
-                        <optgroup v-for="[groupName, groupCollections] in notSelectedCollectionsByGroup" :label="groupName">
-                            <option v-for="collection in groupCollections" :value="collection.id">
-                                {{ collection.name }}
-
-                                <template v-if="collection.isPublic">
-                                    ({{ t('collection.public') }})
-                                </template>
-                            </option>
-                        </optgroup>
-                    </select>
-                </div>
-
-                <div class="text--center">
-                    <button class="button--primary" :disabled="props.disabled">
-                        {{ t('collection.add') }}
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted } from "vue";
-import { useI18n } from "vue-i18n";
-
-import api from "../api.js";
-import http from "../http.js";
-import { store } from "../store.js";
-
-const { t, locale } = useI18n();
-locale.value = store.locale;
-
-const props = defineProps({
-    link: {
-        type: Object,
-        required: true,
-    },
-    open: {
-        type: Boolean,
-    },
-    disabled: {
-        type: Boolean,
-    },
-});
-
-const emit = defineEmits(["add", "remove"]);
-
-const ready = ref(false);
-const collections = ref([]);
-const newCollectionId = ref("");
-
-const selectedCollections = computed(() => {
-    return collections.value.filter((collection) => {
-        return props.link.collections.includes(collection.id);
-    });
-});
-
-const notSelectedCollections = computed(() => {
-    return collections.value.filter((collection) => {
-        return !props.link.collections.includes(collection.id);
-    });
-});
-
-const notSelectedCollectionsNoGroup = computed(() => {
-    return notSelectedCollections.value.filter((collection) => {
-        return collection.group === null;
-    });
-});
-
-const notSelectedCollectionsByGroup = computed(() => {
-    const collectionsWithGroup = notSelectedCollections.value.filter((collection) => {
-        return collection.group !== null;
-    });
-
-    const groupedCollections = Object.groupBy(collectionsWithGroup, (collection) => {
-        return collection.group;
-    });
-
-    return Object.entries(groupedCollections);
-});
-
-function setDefaultSelectedCollectionId() {
-    if (notSelectedCollectionsNoGroup.value.length > 0) {
-        newCollectionId.value = notSelectedCollectionsNoGroup.value[0].id;
-    } else if (notSelectedCollections.value.length > 0) {
-        newCollectionId.value = notSelectedCollections.value[0].id;
-    }
-}
-
-function loadCollections() {
-    api.collections().then((userCollections) => {
-        userCollections.sort((collection1, collection2) => {
-            return collection1.name.localeCompare(collection2.name);
-        });
-
-        collections.value = userCollections.map((collection) => {
-            return {
-                id: collection.id,
-                name: collection.name,
-                description: collection.description,
-                group: collection.group,
-                isPublic: collection.is_public,
-            };
-        });
-
-        setDefaultSelectedCollectionId();
-
-        ready.value = true;
-    });
-}
-
-function addCollection() {
-    const collection = collections.value.find((collection) => {
-        return collection.id === newCollectionId.value;
-    });
-
-    if (!collection) {
-        return;
-    }
-
-    emit("add", collection);
-}
-
-function removeCollection(collection) {
-    emit("remove", collection);
-}
-
-watch(
-    () => props.link.collections,
-    () => {
-        setDefaultSelectedCollectionId();
-    },
-);
-
-onMounted(loadCollections);
-</script>
diff --git a/src/i18n.js b/src/i18n.js
index 22fa8e3..57668bb 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -12,6 +12,9 @@ export const i18n = createI18n({
         en: {
             "collection.add": "Confirm",
             "collection.add_to_collection": "Add to a collection",
+            "collection.name": "Collection name",
+            "collection.new": "New",
+            "collection.new_cancel": "Cancel",
             "collection.public": "public",
             "collection.remove": "Remove",
             "errors.@base.invalid_credentials": "The credentials are invalid.",
@@ -85,6 +88,9 @@ export const i18n = createI18n({
         fr: {
             "collection.add": "Confirmer",
             "collection.add_to_collection": "Ajouter à une collection",
+            "collection.name": "Nom de la collection",
+            "collection.new": "Nouvelle",
+            "collection.new_cancel": "Annuler",
             "collection.public": "publique",
             "collection.remove": "Retirer",
             "errors.@base.invalid_credentials": "Les identifiants sont incorrects.",
diff --git a/src/models/collection.js b/src/models/collection.js
new file mode 100644
index 0000000..2e0b5b4
--- /dev/null
+++ b/src/models/collection.js
@@ -0,0 +1,18 @@
+// This file is part of Flus Browser
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export default class {
+    id = "";
+    name = "";
+    description = "";
+    group = "";
+    isPublic = false;
+
+    init(fetchedCollection) {
+        this.id = fetchedCollection.id;
+        this.name = fetchedCollection.name;
+        this.description = fetchedCollection.description;
+        this.group = fetchedCollection.group;
+        this.isPublic = fetchedCollection.is_public;
+    }
+}
diff --git a/src/models/link.js b/src/models/link.js
index 857a1fe..d972329 100644
--- a/src/models/link.js
+++ b/src/models/link.js
@@ -82,8 +82,16 @@ export default class {
         }
     }
 
+    hasCollection(collection) {
+        return this.collections.some((collectionId) => {
+            return collectionId === collection.id;
+        });
+    }
+
     addCollection(collection) {
-        this.collections = [...this.collections, collection.id];
+        if (!this.hasCollection(collection)) {
+            this.collections = [...this.collections, collection.id];
+        }
     }
 
     removeCollection(collection) {
diff --git a/src/screens/LinkScreen.vue b/src/screens/LinkScreen.vue
index 467ce74..c792c26 100644
--- a/src/screens/LinkScreen.vue
+++ b/src/screens/LinkScreen.vue
@@ -48,20 +48,17 @@
                     <button
                         @click="toggleCollections"
                         :aria-expanded="displayCollections"
-                        aria-controls="collections-selector"
+                        aria-controls="collections"
                     >
                         <Icon name="collection" />
                         {{ t("link.count_collections", link.collections.length) }}
                     </button>
                 </div>
 
-                <CollectionsSelector
-                    id="collections-selector"
+                <Collections
+                    id="collections"
                     :link="link"
                     :open="displayCollections"
-                    :disabled="collectionsForm.inProgress()"
-                    @add="addCollection"
-                    @remove="removeCollection"
                 />
             </div>
 
@@ -105,9 +102,8 @@ import browser from "webextension-polyfill";
 import { store } from "../store.js";
 import api from "../api.js";
 import http from "../http.js";
-import collectionsForm from "../form.js";
 import Link from "../models/link.js";
-import CollectionsSelector from "../components/CollectionsSelector.vue";
+import Collections from "../components/Collections.vue";
 import Notes from "../components/Notes.vue";
 
 const { t, locale } = useI18n();
@@ -200,31 +196,5 @@ async function markAsReadLater() {
         });
 }
 
-function addCollection(collection) {
-    collectionsForm.startRequest();
-    api.addCollectionToLink(link, collection)
-        .then(() => {
-            collectionsForm.finishRequest();
-            link.addCollection(collection);
-        })
-        .catch(() => {
-            collectionsForm.finishRequest();
-            store.notify("error", t("errors.unknown"));
-        });
-}
-
-function removeCollection(collection) {
-    collectionsForm.startRequest();
-    api.removeCollectionFromLink(link, collection)
-        .then(() => {
-            collectionsForm.finishRequest();
-            link.removeCollection(collection);
-        })
-        .catch(() => {
-            collectionsForm.finishRequest();
-            store.notify("error", t("errors.unknown"));
-        });
-}
-
 onMounted(refreshForCurrentTab);
 </script>