diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index ec3599aef..932db0909 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -216,6 +216,7 @@ löydy
 löytää
 löytävät
 löytynyt
+luettelo
 luku
 lukuoikeus
 luo
@@ -496,6 +497,7 @@ tulisi
 tuloksia
 tunniste
 tunnisteet
+tunnisteista
 tunnisteita
 tunnukselle
 tunnuksen
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef4df6f61..d538a2c2c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #601) Implement new visual style using `csc-ui` in rest of the login and error pages
 - (GH #601) Add a language selector to login page menu bar, using `csc-ui`
 - (GH #920) Optimize docker builds, making them faster by leveraging more caching mechanisms and removing unnecessary package installation
+- (GH #1007) Create new Taginput component to replace Buefy's taginput component
 
 ### Fixed
 
diff --git a/swift_browser_ui_frontend/src/common/conv.js b/swift_browser_ui_frontend/src/common/conv.js
index 796660f22..d1ec70780 100644
--- a/swift_browser_ui_frontend/src/common/conv.js
+++ b/swift_browser_ui_frontend/src/common/conv.js
@@ -227,7 +227,7 @@ export function makeGetObjectsMetaURL(project, container, objects) {
   );
 }
 
-export const taginputConfirmKeys = [",", ";", ":", ".", " ", "Tab", "Enter"];
+export const taginputConfirmKeys = ["Tab", "Enter", " ", ",", ";", ".", ":"];
 
 export function truncate(value, length) {
   if (!value) {
diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index 70eaa2b53..ca285b3a0 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -1,4 +1,5 @@
 import store from "@/common/store";
+import { taginputConfirmKeys } from "@/common/conv";
 
 export function toggleCreateFolderModal(folderName) {
   store.commit("toggleCreateFolderModal", true);
@@ -69,5 +70,22 @@ export async function getAccessDetails (
     : [];
 }
 
+export function addNewTag (event, currentTags, onBlur) {
+  if (taginputConfirmKeys.includes(event.key) || onBlur) {
+    event.preventDefault();
+    const newTag = event.target.value.trim();
+    event.target.value = "";
+    if (newTag !== "" && !currentTags.includes(newTag)) {
+      currentTags.push(newTag);
+    }
+  }
+  return currentTags;
+}
+
+export function deleteTag (event, tag, currentTags) {
+  event.preventDefault();
+  return currentTags.filter(el => el !== tag);
+}
+
 
 
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index f9389eae3..50de29100 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -487,7 +487,9 @@ let default_translations = {
       list_of_shareids: "list of share ids",
       folder_tabs: "different types of folder",
       searchbox: "search for folders",
+      tagsList: "list of tags",
       edit_tag: "modify current tags",
+      delete_tag: "delete tag",
       footer: "copyright information",
     },
   },
@@ -962,7 +964,9 @@ let default_translations = {
       list_of_shareids: "lista jaa tunnuksista",
       folder_tabs: "erityyppisiä kansioita",
       searchbox: "etsi kansioita",
+      tagsList: "luettelo tunnisteista",
       edit_tag: "muokata nykyisiä tunnisteita",
+      delete_tag: "poista tunniste",
       footer: "tekijänoikeustiedot",
     },
   },
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index c16dc1e5b..880ead0e2 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -28,24 +28,18 @@
             :loading="loadingFoldername"
           />
         </b-field>
-        <b-field
-          custom-class="has-text-dark"
-          :label="$t('message.tagName')"
+        <label
+          class="taginput-label"
           label-for="copy-folder-taginput"
         >
-          <b-taginput
-            id="copy-folder-taginput"
-            v-model="tags"
-            ellipsis
-            maxlength="20"
-            has-counter
-            rounded
-            type="is-primary"
-            :placeholder="$t('message.tagPlaceholder')"
-            :confirm-keys="taginputConfirmKeys"
-            :on-paste-separators="taginputConfirmKeys"
-          />
-        </b-field>
+          {{ $t('message.tagName') }}
+        </label>
+        <TagInput
+          id="copy-folder-taginput"
+          :tags="tags"
+          @addTag="addingTag"
+          @deleteTag="deletingTag"
+        />
       </c-card-content>
     </div>
     <c-card-actions justify="space-between">
@@ -73,24 +67,28 @@
 import { debounce, delay } from "lodash";
 import {
   swiftCopyContainer,
-  taginputConfirmKeys,
   updateContainerMeta,
 } from "@/common/api";
 
-import { modifyBrowserPageStyles } from "@/common/globalFunctions";
+import {
+  addNewTag,
+  deleteTag,
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
 import escapeRegExp from "lodash/escapeRegExp";
 import { useObservable } from "@vueuse/rxjs";
 import { liveQuery } from "dexie";
+import TagInput from "@/components/TagInput.vue";
 
 export default {
   name: "CopyFolderModal",
+  components: { TagInput },
   data() {
     return {
       folderExists: false,
       folderName: "",
       loadingFoldername: true,
       tags: [],
-      taginputConfirmKeys,
       folders: [],
     };
   },
@@ -256,6 +254,12 @@ export default {
         );
       });
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -303,4 +307,4 @@ c-card-actions {
 c-card-actions > c-button {
   margin: 0;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index e136212a3..6f65dd451 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -24,26 +24,19 @@
             data-testid="folder-name"
           />
         </b-field>
-        <b-field
-          custom-class="has-text-dark"
-          :label="$t('message.tagName')"
-          label-for="folder-taginput"
+        <label
+          class="taginput-label"
+          label-for="create-folder-taginput"
         >
-          <b-taginput
-            id="folder-taginput"
-            v-model="tags"
-            aria-close-label="delete-tag"
-            ellipsis
-            maxlength="20"
-            has-counter
-            rounded
-            type="is-primary"
-            :placeholder="$t('message.tagPlaceholder')"
-            :confirm-keys="taginputConfirmKeys"
-            :on-paste-separators="taginputConfirmKeys"
-            data-testid="folder-tag"
-          />
-        </b-field>
+          {{ $t('message.tagName') }}
+        </label>
+        <TagInput
+          id="create-folder-taginput"
+          :tags="tags"
+          data-testid="folder-tag"
+          @addTag="addingTag"
+          @deleteTag="deletingTag"
+        />
         <p class="info-text is-size-6">
           {{ $t("message.container_ops.createdFolder") }}
           <b>{{ active.name }}</b>.
@@ -82,22 +75,24 @@
 <script>
 import { swiftCreateContainer } from "@/common/api";
 import {
-  taginputConfirmKeys,
   tokenize,
 } from "@/common/conv";
 
 import {
+  addNewTag,
+  deleteTag,
   modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
+import TagInput from "@/components/TagInput.vue";
 
 export default {
   name: "CreateFolderModal",
+  components: { TagInput },
   data() {
     return {
       folderName: "",
       tags: [],
-      taginputConfirmKeys,
       projectNumber: "",
     };
   },
@@ -152,6 +147,12 @@ export default {
       this.create = true;
       modifyBrowserPageStyles();
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -174,7 +175,7 @@ export default {
   }
 }
 
-@media screen and (max-height: 580px) and (max-width: 773px), 
+@media screen and (max-height: 580px) and (max-width: 773px),
 (max-width: 533px) {
   .add-folder {
     top: -9rem;
diff --git a/swift_browser_ui_frontend/src/components/EditTagsModal.vue b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
index cdecfa267..9cc3444dc 100644
--- a/swift_browser_ui_frontend/src/components/EditTagsModal.vue
+++ b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
@@ -4,23 +4,11 @@
       {{ $t('message.editTags') }}
     </h2>
     <c-card-content>
-      <b-field
-        custom-class="has-text-dark"
-      >
-        <b-taginput
-          v-model="tags"
-          :aria-label="$t('label.edit_tag')"
-          aria-close-label="delete-tag"
-          ellipsis
-          maxlength="20"
-          has-counter
-          rounded
-          type="is-primary"
-          :placeholder="$t('message.tagPlaceholder')"
-          :confirm-keys="taginputConfirmKeys"
-          :on-paste-separators="taginputConfirmKeys"
-        />
-      </b-field>
+      <TagInput
+        :tags="tags"
+        @addTag="addingTag"
+        @deleteTag="deletingTag"
+      />
     </c-card-content>
     <c-card-actions justify="space-between">
       <c-button
@@ -49,22 +37,28 @@ import {
 } from "@/common/api";
 
 import {
-  taginputConfirmKeys,
   getTagsForObjects,
   getTagsForContainer,
 } from "@/common/conv";
 
-import { modifyBrowserPageStyles } from "@/common/globalFunctions";
+import {
+  addNewTag,
+  deleteTag,
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
+import TagInput from "@/components/TagInput.vue";
+import { mdiClose } from "@mdi/js";
 
 export default {
   name: "EditTagsModal",
+  components: { TagInput },
   data() {
     return {
       container: null,
       object: null,
       tags: [],
       isObject: false,
-      taginputConfirmKeys,
+      mdiClose,
     };
   },
   computed: {
@@ -188,6 +182,12 @@ export default {
         });
       this.toggleEditTagsModal();
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -204,6 +204,7 @@ export default {
   max-height: 75vh;
 }
 
+h2 { margin: 0 !important; }
 
 c-card-content {
   color: var(--csc-dark-grey);
@@ -214,4 +215,5 @@ c-card-actions {
   padding: 0;
 }
 
+
 </style>
diff --git a/swift_browser_ui_frontend/src/components/ShareModal.vue b/swift_browser_ui_frontend/src/components/ShareModal.vue
index d0c70b37e..4ed7c2349 100644
--- a/swift_browser_ui_frontend/src/components/ShareModal.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModal.vue
@@ -64,17 +64,13 @@
             {{ $t("message.share.share_guide_step2") }}
           </li>
         </ul>
-        <b-field
-          custom-class="field"
-          type="is-dark"
-        >
-          <b-taginput
-            v-model="tags"
-            :aria-label="$t('label.list_of_shareids')"
-            ellipsis
-            :placeholder="$t('message.share.field_placeholder')"
-          />
-        </b-field>
+        <TagInput
+          :tags="tags"
+          :aria-label="$t('label.list_of_shareids')"
+          :placeholder="$t('message.share.field_placeholder')"
+          @addTag="addingTag"
+          @deleteTag="deletingTag"
+        />
         <c-flex>
           <c-select
             v-control
@@ -140,14 +136,19 @@ import {
   getSharedContainerAddress,
 } from "@/common/api";
 
-import { modifyBrowserPageStyles } from "@/common/globalFunctions";
+import {
+  addNewTag,
+  deleteTag,
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
 
 import ShareModalTable from "@/components/ShareModalTable";
+import TagInput from "@/components/TagInput.vue";
 import { mdiClose, mdiInformationOutline } from "@mdi/js";
 
 export default {
   name: "ShareModal",
-  components: { ShareModalTable },
+  components: { ShareModalTable, TagInput },
   data () {
     return {
       tags: [],
@@ -351,6 +352,12 @@ export default {
       this.isPermissionRemoved = true;
       this.closeSharedNotificationWithTimeout();
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -423,17 +430,13 @@ export default {
   }
 
   c-select {
-    color: var(--csc-dark-grey);
+    color: $csc-dark-grey;
   }
 
   c-link > span {
     font-size: 0.875rem;
   }
 
-  .field {
-    margin: 2rem 0 0 0;
-  }
-
   c-flex, .shared-notification {
     display: flex;
     flex-direction: row;
@@ -461,6 +464,4 @@ export default {
     margin-bottom: 1.5rem;
     box-shadow: 2px 4px 4px 0px var(--csc-light-grey);
   }
-
-
 </style>
diff --git a/swift_browser_ui_frontend/src/components/TagInput.vue b/swift_browser_ui_frontend/src/components/TagInput.vue
new file mode 100644
index 000000000..ee5ecaad6
--- /dev/null
+++ b/swift_browser_ui_frontend/src/components/TagInput.vue
@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="tags-list"
+    :aria-label="$t(ariaLabel)"
+  >
+    <c-tag
+      v-for="tag in tags"
+      :key="tag"
+      active
+    >
+      {{ tag }}
+      <c-icon
+        :path="mdiClose"
+        :alt="$t('label.delete_tag')"
+        color="white"
+        size="16"
+        @click="$emit('deleteTag', $event, tag)"
+      />
+    </c-tag>
+    <input
+      id="tag-input"
+      type="text"
+      :aria-label="$t('label.edit_tag')"
+      maxlength="20"
+      :placeholder="$t(placeholder)"
+      @blur="$emit('addTag', $event, true)"
+      @keydown="$emit('addTag', $event)"
+    >
+  </div>
+</template>
+
+<script>
+import { mdiClose } from "@mdi/js";
+
+export default {
+  name: "TagInput",
+  props: {
+    tags: {
+      type: Array,
+      default: () => [],
+    },
+    ariaLabel: {
+      type: String,
+      default: "label.tagsList",
+    },
+    placeholder: {
+      type: String,
+      default: "message.tagPlaceholder",
+    },
+  },
+  data() {
+    return {
+      mdiClose,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/css/prod.scss";
+
+.tags-list {
+  min-height: 3rem;
+  background: transparent;
+  border: 1px solid $csc-dark-grey;
+  margin: 1rem 0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.tags-list:focus-within {
+  border: 2px solid $csc-primary;
+}
+
+.tags-list input {
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+}
+</style>
\ No newline at end of file
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index f5bd502cc..c8cf77a8a 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -73,7 +73,7 @@
             :value="$t('message.encrypt.advancedOptions')"
           >
             <c-container>
-              <c-checkbox 
+              <c-checkbox
                 v-csc-model="ownPrivateKey"
                 :label="$t('message.encrypt.ephemeral')"
               />
@@ -96,7 +96,7 @@
               </c-flex>
             </c-container>
             <c-container>
-              <c-checkbox 
+              <c-checkbox
                 v-csc-model="multipleReceivers"
                 :label="$t('message.encrypt.multipleReceivers')"
               />
@@ -157,7 +157,6 @@ import EncryptedUploadSession from "@/common/upload";
 import { getUploadEndpoint } from "@/common/api";
 import {
   getHumanReadableSize,
-  taginputConfirmKeys,
   truncate,
   computeSHA256,
 } from "@/common/conv";
@@ -178,7 +177,6 @@ export default {
     return {
       inputFolder: "",
       selectedFolder: null,
-      taginputConfirmKeys,
       filteredItems: [],
       tooLarge: false,
       ownPrivateKey: false,
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 889e4861d..4f27f9458 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -267,4 +267,8 @@ c-modal {
   padding: 1rem;
 }
 
+.taginput-label {
+  font-weight: bold;
+  margin-bottom: -2rem;
+}
 </style>
diff --git a/swift_browser_ui_frontend/src/views/DirectShare.vue b/swift_browser_ui_frontend/src/views/DirectShare.vue
index 31e76e0de..c66b8f0db 100644
--- a/swift_browser_ui_frontend/src/views/DirectShare.vue
+++ b/swift_browser_ui_frontend/src/views/DirectShare.vue
@@ -40,22 +40,21 @@
     <b-field
       :label="$t('message.share.container')"
     >
-      <b-input 
+      <b-input
         v-model="container"
         name="container"
         expanded
         aria-required="true"
       />
     </b-field>
-    <b-field
-      :label="$t('message.share.field_label')"
-    >
-      <b-taginput
-        v-model="tags"
-        :placeholder="$t('message.share.field_placeholder')"
-      />
-    </b-field>
-
+    <TagInput
+      id="shareid-tags"
+      :tags="tags"
+      :aria-label="$t('label.list_of_shareids')"
+      :placeholder="$t('message.share.field_placeholder')"
+      @addTag="addingTag"
+      @deleteTag="deletingTag"
+    />
     <b-field>
       <p class="control">
         <button
@@ -77,8 +76,16 @@ import {
   getSharedContainerAddress,
 } from "@/common/api.js";
 
+import {
+  addNewTag,
+  deleteTag,
+} from "@/common/globalFunctions";
+
+import TagInput from "@/components/TagInput.vue";
+
 export default {
   name: "DirectShare",
+  components: { TagInput },
   data () {
     return {
       container: "",
@@ -193,6 +200,12 @@ export default {
         delay(this.checkMultiProject, wait, [wait * 2]);
       }
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>