diff --git a/changelog/unreleased/enhancement-tags-form b/changelog/unreleased/enhancement-tags-form
new file mode 100644
index 00000000000..97f5b6bdbb5
--- /dev/null
+++ b/changelog/unreleased/enhancement-tags-form
@@ -0,0 +1,10 @@
+Enhancement: Tags form improved
+
+We've improved the tags form in various ways, including visual appearance as well as usability. Auto save, remove tags on backspace, and contextual helper (and more, see issues)
+
+https://github.com/owncloud/web/pull/9525
+https://github.com/owncloud/web/issues/9363
+https://github.com/owncloud/web/issues/9356
+https://github.com/owncloud/web/issues/9360
+https://github.com/owncloud/web/issues/9362
+https://github.com/owncloud/web/issues/9416
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 8164508747d..c2ec731f03a 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
     <label :for="id" class="oc-label" v-text="label" />
+    <oc-contextual-helper
+      v-if="contextualHelper?.isEnabled"
+      v-bind="contextualHelper?.data"
+      class="oc-pl-xs"
+    ></oc-contextual-helper>
     <vue-select
       ref="select"
       :disabled="disabled || readOnly"
@@ -81,9 +86,18 @@
 import Fuse from 'fuse.js'
 import uniqueId from '../../utils/uniqueId'
 import VueSelect from 'vue-select'
-import { defineComponent, ComponentPublicInstance, onMounted, ref, unref, VNodeRef } from 'vue'
+import {
+  defineComponent,
+  ComponentPublicInstance,
+  onMounted,
+  ref,
+  unref,
+  VNodeRef,
+  PropType
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 import 'vue-select/dist/vue-select.css'
+import { ContextualHelper } from 'design-system/src/helpers'
 
 /**
  * Select component with a trigger and dropdown based on [Vue Select](https://vue-select.org/)
@@ -144,6 +158,14 @@ export default defineComponent({
       type: String,
       default: null
     },
+    /**
+     * oc-contextual-helper can be injected here
+     */
+    contextualHelper: {
+      type: Object as PropType<ContextualHelper>,
+      required: false,
+      default: null
+    },
     /**
      * Key to use as label when option is an object
      * NOTE: this maps to the vue-select prop `label`
diff --git a/packages/design-system/src/helpers/types.ts b/packages/design-system/src/helpers/types.ts
index 65b990a542d..5de150f6b84 100644
--- a/packages/design-system/src/helpers/types.ts
+++ b/packages/design-system/src/helpers/types.ts
@@ -1,6 +1,28 @@
+import { ConfigurationManager } from 'web-pkg'
+
 export type IconFillType = 'fill' | 'line' | 'none'
 export type IconType = {
   name: string
   color?: string
   fillType?: IconFillType
 }
+
+export interface ContextualHelperDataListItem {
+  text: string
+  headline?: boolean
+}
+export interface ContextualHelperData {
+  title: string
+  text?: string
+  list?: ContextualHelperDataListItem[]
+  readMoreLink?: string
+}
+
+export interface ContextualHelperOptions {
+  configurationManager: ConfigurationManager
+}
+
+export interface ContextualHelper {
+  isEnabled: boolean
+  data: ContextualHelperData
+}
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 65619df4e55..8d7a8f6a746 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -28,6 +28,7 @@ exports[`Spaces view loading states should render spaces list after loading has
                         <label class="oc-page-size-label" for="oc-page-size-3">Items per page</label>
                         <div class="oc-page-size-select" input-id="oc-page-size-3" options="20,50,100,250">
                           <label class="oc-label" for="oc-select-4"></label>
+                          <!--v-if-->
                           <div class="v-select vs--single vs--unsearchable oc-select oc-page-size-select" dir="auto" style="background: transparent;">
                             <div aria-expanded="false" aria-label="Search for option" aria-owns="vs2__listbox" class="vs__dropdown-toggle" id="vs2__combobox" role="combobox">
                               <div class="vs__selected-options">
diff --git a/packages/web-app-files/src/components/SideBar/TagsPanel.vue b/packages/web-app-files/src/components/SideBar/TagsPanel.vue
index a21c049c1d6..2885a5bbb29 100644
--- a/packages/web-app-files/src/components/SideBar/TagsPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/TagsPanel.vue
@@ -9,62 +9,63 @@
         class="oc-mb-s"
         :multiple="true"
         :options="availableTags"
+        :contextual-helper="contextualHelper"
         taggable
-        push-tags
         :select-on-key-codes="[keycode('enter'), keycode(',')]"
         :label="$gettext('Add or edit tags')"
         :create-option="createOption"
         :selectable="isOptionSelectable"
         :fix-message-line="true"
+        :map-keydown="keydownMethods"
+        @update:model-value="save"
       >
-        <template #selected-option="{ label }">
-          <span class="oc-flex oc-flex-center">
-            <avatar-image
-              class="oc-flex oc-align-self-center oc-mr-s"
-              :width="16.8"
-              :userid="label"
-              :user-name="label"
-            />
-            <span>{{ label }}</span>
-          </span>
+        <template #selected-option-container="{ option, deselect }">
+          <oc-tag class="tags-control-tag oc-ml-xs" :rounded="true" size="small">
+            <oc-icon name="price-tag-3" size="small" />
+            <span class="oc-text-truncate">{{ option.label }}</span>
+            <span class="oc-flex oc-flex-middle oc-ml-s oc-mr-xs">
+              <oc-icon v-if="option.readonly" class="vs__deselect-lock" name="lock" size="small" />
+              <oc-button
+                v-else
+                appearance="raw"
+                :title="$gettext('Deselect %{label}', { label: option.label })"
+                :aria-label="$gettext('Deselect %{label}', { label: option.label })"
+                class="vs__deselect oc-mx-rm"
+                @mousedown.stop.prevent
+                @click="deselect(option)"
+              >
+                <oc-icon name="close" size="small" />
+              </oc-button>
+            </span>
+          </oc-tag>
         </template>
         <template #option="{ label, error }">
           <div class="oc-flex">
-            <span v-if="showSelectNewLabel({ label })" class="oc-mr-s" v-text="$gettext('New')" />
             <span class="oc-flex oc-flex-center">
-              <avatar-image
-                class="oc-flex oc-align-self-center oc-mr-s"
-                :width="16.8"
-                :userid="label"
-                :user-name="label"
-              />
-              <span>{{ label }}</span>
+              <oc-tag class="tags-control-tag oc-ml-xs" :rounded="true" size="small">
+                <oc-icon name="price-tag-3" size="small" />
+                <span class="oc-text-truncate">{{ label }}</span>
+              </oc-tag>
             </span>
           </div>
           <div v-if="error" class="oc-text-input-danger">{{ error }}</div>
         </template>
       </oc-select>
-      <compare-save-dialog
-        class="edit-compare-save-dialog oc-mb-l"
-        :original-object="{ tags: currentTags.map((t) => t.label) }"
-        :compare-object="{ tags: selectedTags.map((t) => t.label) }"
-        @revert="revertChanges"
-        @confirm="save"
-      ></compare-save-dialog>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, inject, onMounted, ref, unref, VNodeRef, watch } from 'vue'
-import CompareSaveDialog from 'web-pkg/src/components/SideBar/CompareSaveDialog.vue'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { useTask } from 'vue-concurrency'
-import { useClientService, useStore } from 'web-pkg/src/composables'
+import { useClientService, useConfigurationManager, useStore } from 'web-pkg/src/composables'
 import { Resource } from 'web-client'
 import diff from 'lodash-es/difference'
 import { useGettext } from 'vue3-gettext'
 import keycode from 'keycode'
+import { tagsHelper } from 'web-app-files/src/helpers/contextualHelpers'
+import { ContextualHelper } from 'design-system/src/helpers'
 
 const tagsMaxCount = 100
 
@@ -76,18 +77,17 @@ type TagOption = {
 
 export default defineComponent({
   name: 'TagsPanel',
-  components: {
-    CompareSaveDialog
-  },
   setup() {
     const store = useStore()
     const clientService = useClientService()
     const { $gettext } = useGettext()
+    const configurationManager = useConfigurationManager()
 
     const injectedResource = inject<Resource>('resource')
     const resource = computed<Resource>(() => unref(injectedResource))
     const selectedTags = ref<TagOption[]>([])
     const availableTags = ref<TagOption[]>([])
+    let allTags: string[] = []
     const tagSelect: VNodeRef = ref(null)
 
     const currentTags = computed<TagOption[]>(() => {
@@ -98,7 +98,12 @@ export default defineComponent({
       const {
         data: { value: tags = [] }
       } = yield clientService.graphAuthenticated.tags.getTags()
-      availableTags.value = [...tags.map((t) => ({ label: t }))]
+
+      allTags = tags
+      const selectedLabels = new Set(unref(selectedTags).map((o) => o.label))
+      availableTags.value = tags
+        .filter((t) => selectedLabels.has(t) === false)
+        .map((t) => ({ label: t }))
     })
 
     const revertChanges = () => {
@@ -121,8 +126,18 @@ export default defineComponent({
       return !unref(tagSelect).$refs.select.optionExists(option)
     }
 
-    const save = async () => {
+    const save = async (e: TagOption[] | string[]) => {
       try {
+        selectedTags.value = e.map((x) => (typeof x === 'object' ? x : { label: x }))
+        const allAvailableTags = new Set([...allTags, ...unref(availableTags).map((t) => t.label)])
+
+        availableTags.value = diff(
+          Array.from(allAvailableTags),
+          unref(selectedTags).map((o) => o.label)
+        ).map((label) => ({
+          label
+        }))
+
         const { id, tags, fileId } = unref(resource)
         const selectedTagLabels = unref(selectedTags).map((t) => t.label)
         const tagsToAdd = diff(selectedTagLabels, tags)
@@ -149,6 +164,9 @@ export default defineComponent({
         })
 
         eventBus.publish('sidebar.entity.saved')
+        if (unref(tagSelect) !== null) {
+          unref(tagSelect).$refs.search.focus()
+        }
       } catch (e) {
         console.error(e)
         store.dispatch('showErrorMessage', {
@@ -161,6 +179,7 @@ export default defineComponent({
     watch(resource, () => {
       if (unref(resource)?.tags) {
         revertChanges()
+        loadAvailableTagsTask.perform()
       }
     })
 
@@ -171,6 +190,29 @@ export default defineComponent({
       loadAvailableTagsTask.perform()
     })
 
+    const keydownMethods = (map, vm) => {
+      const objectMapping = {
+        ...map
+      }
+      objectMapping[keycode('backspace')] = async (e) => {
+        if (e.target.value || selectedTags.value.length === 0) {
+          return
+        }
+
+        e.preventDefault()
+
+        availableTags.value.push(selectedTags.value.pop())
+        await save(unref(selectedTags))
+      }
+
+      return objectMapping
+    }
+
+    const contextualHelper = {
+      isEnabled: configurationManager.options.contextHelpers,
+      data: tagsHelper({ configurationManager: configurationManager })
+    } as ContextualHelper
+
     return {
       loadAvailableTagsTask,
       availableTags,
@@ -184,7 +226,9 @@ export default defineComponent({
       isOptionSelectable,
       showSelectNewLabel,
       save,
-      keycode
+      keycode,
+      keydownMethods,
+      contextualHelper
     }
   }
 })
@@ -196,4 +240,8 @@ export default defineComponent({
     border-radius: 5px;
   }
 }
+.tags-control-tag {
+  max-width: 12rem;
+  height: var(--oc-space-large);
+}
 </style>
diff --git a/packages/web-app-files/src/helpers/contextualHelpers.ts b/packages/web-app-files/src/helpers/contextualHelpers.ts
index bdf01503753..e62439569c1 100644
--- a/packages/web-app-files/src/helpers/contextualHelpers.ts
+++ b/packages/web-app-files/src/helpers/contextualHelpers.ts
@@ -1,26 +1,11 @@
-import { ConfigurationManager } from 'web-pkg'
 import { omit } from 'lodash-es'
+import { ContextualHelperData, ContextualHelperOptions } from 'design-system/src/helpers'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
   return msg
 }
 
-export interface ContextualHelperDataListItem {
-  text: string
-  headline?: boolean
-}
-export interface ContextualHelperData {
-  title: string
-  text?: string
-  list?: ContextualHelperDataListItem[]
-  readMoreLink?: string
-}
-
-export interface ContextualHelperOptions {
-  configurationManager: ConfigurationManager
-}
-
 export const shareInviteCollaboratorHelp = (options: ContextualHelperOptions) =>
   filterContextHelper(
     {
@@ -154,3 +139,18 @@ const filterContextHelper = (
   }
   return data
 }
+
+export const tagsHelper = (options: ContextualHelperOptions) =>
+  filterContextHelper(
+    {
+      title: $gettext('Who can view tags?'),
+      list: [
+        {
+          text: $gettext(
+            'Everyone who can view the file can view its tags. Likewise, everyone who can edit the file can edit its tags.'
+          )
+        }
+      ]
+    },
+    options
+  )
diff --git a/packages/web-app-files/tests/unit/components/SideBar/TagsPanel.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/TagsPanel.spec.ts
index 17ddd068ace..03fe9822542 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/TagsPanel.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/TagsPanel.spec.ts
@@ -40,9 +40,10 @@ describe('Tags Panel', () => {
   describe('save method', () => {
     it('publishes the "save"-event', async () => {
       const eventStub = jest.spyOn(eventBus, 'publish')
-      const resource = mockDeep<Resource>({ tags: ['a', 'b'] })
-      const { wrapper } = createWrapper(resource)
-      await wrapper.vm.save()
+      const tags = ['a', 'b']
+      const resource = mockDeep<Resource>({ tags: tags })
+      const { wrapper } = createWrapper(resource, mockDeep<ClientService>(), false)
+      await wrapper.vm.save(tags)
       expect(eventStub).toHaveBeenCalled()
     })
   })
@@ -61,11 +62,11 @@ describe('Tags Panel', () => {
       const resource = mockDeep<Resource>({ tags: resourceTags })
       const clientService = mockDeep<ClientService>()
       const stub = clientService.graphAuthenticated.tags.assignTags.mockImplementation()
-      const { wrapper } = createWrapper(resource, clientService)
+      const { wrapper } = createWrapper(resource, clientService, false)
 
       wrapper.vm.selectedTags = selectedTags
 
-      await wrapper.vm.save()
+      await wrapper.vm.save(selectedTags)
 
       /* eslint-disable jest/no-conditional-expect*/
       if (expected.length) {
@@ -90,11 +91,11 @@ describe('Tags Panel', () => {
       const resource = mockDeep<Resource>({ tags: resourceTags })
       const clientService = mockDeep<ClientService>()
       const stub = clientService.graphAuthenticated.tags.unassignTags.mockImplementation()
-      const { wrapper } = createWrapper(resource, clientService)
+      const { wrapper } = createWrapper(resource, clientService, false)
 
       wrapper.vm.selectedTags = selectedTags
 
-      await wrapper.vm.save()
+      await wrapper.vm.save(selectedTags)
 
       /* eslint-disable jest/no-conditional-expect*/
       if (expected.length) {
@@ -119,7 +120,7 @@ describe('Tags Panel', () => {
     const eventStub = jest.spyOn(eventBus, 'publish')
     const { wrapper, storeOptions } = createWrapper(resource, clientService)
     wrapper.vm.selectedTags.push('b')
-    await wrapper.vm.save()
+    await wrapper.vm.save(wrapper.vm.selectedTags)
     expect(assignTagsStub).toHaveBeenCalled()
     expect(eventStub).not.toHaveBeenCalled()
     expect(storeOptions.actions.showErrorMessage).toHaveBeenCalled()
@@ -133,7 +134,7 @@ describe('Tags Panel', () => {
   })
 })
 
-function createWrapper(resource, clientService = mockDeep<ClientService>()) {
+function createWrapper(resource, clientService = mockDeep<ClientService>(), stubVueSelect = true) {
   const storeOptions = defaultStoreMockOptions
   const store = createStore(storeOptions)
   const mocks = { ...defaultComponentMocks(), $clientService: clientService }
@@ -144,7 +145,7 @@ function createWrapper(resource, clientService = mockDeep<ClientService>()) {
         plugins: [...defaultPlugins(), store],
         mocks,
         provide: { ...mocks, resource },
-        stubs: { VueSelect: true, CompareSaveDialog: true }
+        stubs: { VueSelect: stubVueSelect, CompareSaveDialog: true }
       }
     })
   }
diff --git a/packages/web-pkg/src/configuration/manager.ts b/packages/web-pkg/src/configuration/manager.ts
index e9125d7d34e..ef9e251e7c4 100644
--- a/packages/web-pkg/src/configuration/manager.ts
+++ b/packages/web-pkg/src/configuration/manager.ts
@@ -89,6 +89,7 @@ export class ConfigurationManager {
       'contextHelpersReadMore',
       get(options, 'contextHelpersReadMore', true)
     )
+    set(this.optionsConfiguration, 'contextHelpers', get(options, 'contextHelpers', true))
     set(
       this.optionsConfiguration,
       'openLinksWithDefaultApp',
diff --git a/packages/web-pkg/src/configuration/types.ts b/packages/web-pkg/src/configuration/types.ts
index 59bd17054ab..42db3d4f026 100644
--- a/packages/web-pkg/src/configuration/types.ts
+++ b/packages/web-pkg/src/configuration/types.ts
@@ -19,6 +19,7 @@ export interface OptionsConfiguration {
   upload?: UploadOptionsConfiguration
   logoutUrl?: string
   contextHelpersReadMore?: boolean
+  contextHelpers?: boolean
   openLinksWithDefaultApp?: boolean
   tokenStorageLocal?: boolean
 }
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 47d249826d6..0b602d143bb 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -73,9 +73,8 @@ const tagTableCell =
 const tagInFilesTable = '//*[contains(@class, "oc-tag")]//span[text()="%s"]//ancestor::a'
 const tagInDetailsPanel = '//*[@data-testid="tags"]/td//span[text()="%s"]'
 const tagInInputForm =
-  '//span[contains(@class, "vs__selected")]//span[text()="%s"]//ancestor::span//button[contains(@class, "vs__deselect")]'
+  '//span[contains(@class, "tags-control-tag")]//span[text()="%s"]//ancestor::span//button[contains(@class, "vs__deselect")]'
 const tagFormInput = '#tags-form input'
-const compareDialogConfirmBtn = '.compare-save-dialog-confirm-btn'
 const resourcesAsTiles = '#files-view .oc-tiles'
 const fileVersionSidebar = '#oc-file-versions-sidebar'
 const noLinkMessage = '#web .oc-link-resolve-error-message'
@@ -1091,7 +1090,6 @@ export const addTagsToResource = async (args: resourceTagsArgs): Promise<void> =
     await page.locator('.vs__dropdown-option').first().click()
   }
 
-  await page.locator(compareDialogConfirmBtn).click()
   await sidebar.close({ page })
 }
 
@@ -1112,8 +1110,6 @@ export const removeTagsFromResource = async (args: resourceTagsArgs): Promise<vo
   for (const tag of tags) {
     await page.locator(util.format(tagInInputForm, tag)).click()
   }
-
-  await page.locator(compareDialogConfirmBtn).click()
   await sidebar.close({ page })
 }