diff --git a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
index 6df7484132..a143977640 100644
--- a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
@@ -158,11 +158,11 @@ onMounted(() => {
     return
   }
 
-  document.querySelector(toggle).addEventListener('click', show)
+  document.querySelector(toggle)?.addEventListener('click', show)
 })
 
 onBeforeUnmount(() => {
-  document.querySelector(toggle).removeEventListener('click', show)
+  document.querySelector(toggle)?.removeEventListener('click', show)
   if (unref(drawer)) {
     closeDrawer(unref(drawer).id)
   }
diff --git a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
index 44fbe693ca..df7c740fc7 100644
--- a/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
+++ b/packages/design-system/src/components/OcFloatingActionButton/OcFloatingActionButton.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="fixed flex flex-col items-end bottom-[20px] right-[20px]">
+  <div
+    class="fixed flex flex-col items-end bottom-[20px] right-[20px] z-[calc(var(--z-index-modal)-1)]"
+  >
     <template v-if="expanded">
       <oc-button
         v-for="item in items"
@@ -16,6 +18,7 @@
       </oc-button>
     </template>
     <oc-button
+      :id="buttonId"
       class="rounded-full size-14"
       appearance="filled"
       color-role="primary"
@@ -34,6 +37,11 @@ import { RouteLocationRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
 export interface Props {
+  /**
+   * @docs The id of the primary action button.
+   * @default ''
+   */
+  buttonId?: string
   /**
    * @docs The aria label of the primary action button.
    * @default 'Open actions menu'
@@ -64,8 +72,9 @@ export interface Props {
 }
 
 const {
-  mode = 'menu',
+  buttonId = '',
   ariaLabel = '',
+  mode = 'menu',
   items = [],
   handler = null,
   to = null
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index f4e89e4c24..4dc0130a80 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -7,7 +7,7 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="py-2 px-4 bg-role-surface top-0 z-20"
+            class="pb-2 px-4 bg-role-surface top-0 z-20"
             :class="{ sticky: isSticky }"
           >
             <div class="flex justify-between items-center h-13">
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 8344949486..db45d13816 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
@@ -5,7 +5,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index 261e1ca3e8..fc13cbddd4 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
@@ -65,7 +65,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="py-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index cdf5f3fc63..13c4726ba1 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -1,132 +1,6 @@
 <template>
-  <div v-if="showActions" class="create-and-upload-actions inline-flex mr-2 gap-2">
-    <div v-oc-tooltip="newButtonTooltip">
-      <oc-button
-        id="create-or-upload-menu-btn"
-        key="create-or-upload-menu-btn-enabled"
-        v-oc-tooltip="limitedScreenSpace ? $gettext('Create or Upload') : ''"
-        :aria-label="newButtonAriaLabel"
-        appearance="filled"
-        :disabled="!canUpload"
-      >
-        <oc-icon name="add" />
-        <span v-if="!limitedScreenSpace" v-text="$gettext('Create or Upload')" />
-      </oc-button>
-    </div>
-    <oc-drop
-      :title="$gettext('Create or Upload')"
-      drop-id="create-or-upload-drop"
-      toggle="#create-or-upload-menu-btn"
-      class="w-auto min-w-3xs"
-      mode="click"
-      close-on-click
-      padding-size="small"
-      @show-drop="showDrop"
-    >
-      <oc-list
-        id="create-list"
-        :class="areFileExtensionsShown ? 'sm:min-w-xs' : null"
-        class="py-2 sm:first:pt-0 sm:last:pb-0"
-      >
-        <li>
-          <oc-button
-            id="new-folder-btn"
-            class="w-full"
-            justify-content="left"
-            appearance="raw"
-            @click="createNewFolderAction"
-          >
-            <resource-icon
-              :resource="folderIconResource"
-              size="medium"
-              class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
-            />
-            <span v-text="$gettext('Folder')" />
-          </oc-button>
-        </li>
-      </oc-list>
-      <oc-list v-if="canUpload" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-        <li>
-          <resource-upload btn-class="w-full" :btn-label="$gettext('Files Upload')" />
-        </li>
-        <li>
-          <resource-upload
-            btn-class="w-full"
-            :btn-label="$gettext('Folder Upload')"
-            :is-folder="true"
-          />
-        </li>
-      </oc-list>
-      <oc-list
-        v-if="extensionActions.length"
-        id="extension-list"
-        class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
-      >
-        <li
-          v-for="(action, key) in extensionActions"
-          :key="`${key}-${actionKeySuffix}`"
-          v-oc-tooltip="
-            isActionDisabled(action) && action.disabledTooltip ? action.disabledTooltip() : null
-          "
-        >
-          <oc-button
-            class="w-full"
-            :class="action.class"
-            appearance="raw"
-            justify-content="left"
-            :disabled="isActionDisabled(action)"
-            @click="() => action.handler()"
-          >
-            <oc-icon :name="getActionIcon(action)" fill-type="line" />
-            <span v-text="action.label()"
-          /></oc-button>
-        </li>
-      </oc-list>
-      <oc-list
-        v-for="(group, groupIndex) in createFileActionsGroups"
-        :key="`file-creation-group-${groupIndex}`"
-        class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
-      >
-        <li
-          v-for="(fileAction, fileActionIndex) in group"
-          :key="`file-creation-item-${groupIndex}-${fileActionIndex}`"
-        >
-          <oc-button
-            appearance="raw"
-            class="w-full"
-            justify-content="left"
-            :class="['new-file-btn-' + fileAction.ext]"
-            @click="() => fileAction.handler()"
-          >
-            <resource-icon
-              :resource="getIconResource(fileAction)"
-              size="medium"
-              class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
-            />
-            <span>{{ fileAction.label() }}</span>
-            <span v-if="areFileExtensionsShown && fileAction.ext" class="ml-auto text-sm">
-              {{ fileAction.ext }}
-            </span>
-          </oc-button>
-        </li>
-      </oc-list>
-      <oc-list class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-        <li>
-          <oc-button
-            id="new-shortcut-btn"
-            class="w-full"
-            justify-content="left"
-            appearance="raw"
-            @click="createNewShortcutAction"
-          >
-            <oc-icon name="external-link" size="medium" />
-            <span v-text="$gettext('Shortcut')" />
-            <span v-if="areFileExtensionsShown" class="ml-auto text-sm" v-text="'url'" />
-          </oc-button>
-        </li>
-      </oc-list>
-    </oc-drop>
-    <div v-if="showPasteHereButton" id="clipboard-btns" class="oc-button-group">
+  <div v-if="showActions" class="create-and-upload-actions inline-flex gap-2">
+    <div v-if="showPasteHereButton" id="clipboard-btns" class="oc-button-group mr-2">
       <oc-button
         v-oc-tooltip="pasteHereButtonTooltip"
         :disabled="isPasteHereButtonDisabled"
@@ -153,33 +27,24 @@
 import { useEventListener } from '@vueuse/core'
 import {
   ClipboardActions,
-  FileAction,
   isLocationPublicActive,
   useClipboardStore,
-  useFileActionsCreateNewShortcut,
   useMessages,
   useResourcesStore,
   useRoute,
   useSpacesStore,
   useUserStore,
   useActiveLocation,
-  useFileActionsCreateNewFile,
-  useFileActionsCreateNewFolder,
   useFileActionsPaste,
   useClientService
 } from '@opencloud-eu/web-pkg'
 
-import { computed, onMounted, onBeforeUnmount, unref, watch, ref } from 'vue'
-import { Resource, SpaceResource, isPublicSpaceResource } from '@opencloud-eu/web-client'
+import { computed, onMounted, onBeforeUnmount, unref, watch } from 'vue'
+import { SpaceResource, isPublicSpaceResource } from '@opencloud-eu/web-client'
 import { useService, useUpload, UppyService, UploadResult } from '@opencloud-eu/web-pkg'
 import { HandleUpload } from '../../HandleUpload'
 import { useGettext } from 'vue3-gettext'
-import { useExtensionRegistry } from '@opencloud-eu/web-pkg'
-import { Action, ResourceIcon } from '@opencloud-eu/web-pkg'
-import { v4 as uuidV4 } from 'uuid'
 import { storeToRefs } from 'pinia'
-import { uploadMenuExtensionPoint } from '../../extensionPoints'
-import ResourceUpload from './Upload/ResourceUpload.vue'
 
 const { space, limitedScreenSpace = false } = defineProps<{
   space: SpaceResource
@@ -206,8 +71,6 @@ const { currentFolder } = storeToRefs(resourcesStore)
 
 const isPublicLocation = useActiveLocation(isLocationPublicActive, 'files-public-link')
 
-const areFileExtensionsShown = computed(() => unref(resourcesStore.areFileExtensionsShown))
-
 const computedSpace = computed(() => space)
 
 useUpload({ uppyService })
@@ -233,58 +96,10 @@ const pasteFileAction = () => {
   return unref(pasteFileActions)[0].handler({ space: unref(computedSpace) })
 }
 
-const { actions: createNewFolder } = useFileActionsCreateNewFolder({ space: computedSpace })
-const createNewFolderAction = () => {
-  return unref(createNewFolder)[0].handler()
-}
-
-const { actions: createNewShortcut } = useFileActionsCreateNewShortcut({ space: computedSpace })
-const createNewShortcutAction = () => {
-  return unref(createNewShortcut)[0].handler()
-}
-
-const { actions: createNewFileActions } = useFileActionsCreateNewFile({ space: computedSpace })
-
-const createFileActionsGroups = computed(() => {
-  const result: FileAction[][] = []
-  const externalFileActions = unref(createNewFileActions).filter(({ isExternal }) => isExternal)
-  if (externalFileActions.length) {
-    result.push(externalFileActions)
-  }
-  const appFileActions = unref(createNewFileActions).filter(({ isExternal }) => !isExternal)
-  if (appFileActions.length) {
-    result.push(appFileActions)
-  }
-  return result
-})
-
-const extensionRegistry = useExtensionRegistry()
-const extensionActions = computed(() => {
-  return [
-    ...extensionRegistry.requestExtensions(uploadMenuExtensionPoint).map((e) => e.action)
-  ].filter((e) => e.isVisible())
-})
-
 const canUpload = computed(() => {
   return unref(currentFolder)?.canUpload({ user: userStore.user })
 })
 
-const actionKeySuffix = ref(uuidV4())
-const showDrop = () => {
-  // force actions to be re-rendered when the drop is being opened
-  actionKeySuffix.value = uuidV4()
-}
-
-const isActionDisabled = (action: Action) => {
-  return action.isDisabled ? action.isDisabled() : false
-}
-
-const getActionIcon = (action: Action) => {
-  return typeof action.icon === 'function'
-    ? action.icon({ space: unref(computedSpace) })
-    : action.icon
-}
-
 useEventListener(document, 'paste', (event: ClipboardEvent) => {
   // Ignore file in clipboard if there are already files from OpenCloud in the clipboard
   if (unref(clipboardResources).length || !unref(canUpload)) {
@@ -394,10 +209,6 @@ watch(
   { immediate: true }
 )
 
-const getIconResource = (fileHandler: FileAction) => {
-  return { type: 'file', extension: fileHandler.ext } as Resource
-}
-
 const showPasteHereButton = computed(() => {
   return unref(clipboardResources) && unref(clipboardResources).length !== 0
 })
@@ -405,32 +216,4 @@ const showPasteHereButton = computed(() => {
 const showActions = computed(() => {
   return unref(canUpload) || !unref(isPublicLocation)
 })
-
-const newButtonTooltip = computed(() => {
-  if (!unref(canUpload)) {
-    return $gettext('You have no permission to create or upload files')
-  }
-  return null
-})
-const newButtonAriaLabel = computed(() => {
-  if (unref(newButtonTooltip)) {
-    return unref(newButtonTooltip)
-  }
-
-  return $gettext('Create or upload')
-})
-
-const folderIconResource = computed(() => {
-  return { isFolder: true, extension: '' } as Resource
-})
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .create-and-upload-actions .oc-drop .oc-icon svg {
-    /* reset the resource icon height because the ResourceIcon component messes with it */
-    @apply h-5.5;
-  }
-}x
-</style>
diff --git a/packages/web-app-files/src/components/CreateOrUploadMenu.vue b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
new file mode 100644
index 0000000000..64f9b72e97
--- /dev/null
+++ b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
@@ -0,0 +1,224 @@
+<template>
+  <oc-drop
+    :title="$gettext('New')"
+    :toggle="toggle"
+    drop-id="create-or-upload-drop"
+    class="w-auto min-w-3xs"
+    mode="click"
+    close-on-click
+    padding-size="small"
+    :offset="[-10, 0]"
+    @show-drop="showDrop"
+  >
+    <oc-list
+      id="create-list"
+      :class="areFileExtensionsShown ? 'sm:min-w-xs' : null"
+      class="py-2 sm:first:pt-0 sm:last:pb-0"
+    >
+      <li>
+        <oc-button
+          id="new-folder-btn"
+          class="w-full"
+          justify-content="left"
+          appearance="raw"
+          @click="createNewFolderAction"
+        >
+          <resource-icon
+            :resource="folderIconResource"
+            size="medium"
+            class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+          />
+          <span v-text="$gettext('Folder')" />
+        </oc-button>
+      </li>
+    </oc-list>
+    <oc-list v-if="canUpload" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+      <li>
+        <resource-upload btn-class="w-full" :btn-label="$gettext('Files Upload')" />
+      </li>
+      <li>
+        <resource-upload
+          btn-class="w-full"
+          :btn-label="$gettext('Folder Upload')"
+          :is-folder="true"
+        />
+      </li>
+    </oc-list>
+    <oc-list
+      v-if="extensionActions.length"
+      id="extension-list"
+      class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
+    >
+      <li
+        v-for="(action, key) in extensionActions"
+        :key="`${key}-${actionKeySuffix}`"
+        v-oc-tooltip="
+          isActionDisabled(action) && action.disabledTooltip ? action.disabledTooltip() : null
+        "
+      >
+        <oc-button
+          class="w-full"
+          :class="action.class"
+          appearance="raw"
+          justify-content="left"
+          :disabled="isActionDisabled(action)"
+          @click="() => action.handler()"
+        >
+          <oc-icon :name="getActionIcon(action)" fill-type="line" />
+          <span v-text="action.label()"
+        /></oc-button>
+      </li>
+    </oc-list>
+    <oc-list
+      v-for="(group, groupIndex) in createFileActionsGroups"
+      :key="`file-creation-group-${groupIndex}`"
+      class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
+    >
+      <li
+        v-for="(fileAction, fileActionIndex) in group"
+        :key="`file-creation-item-${groupIndex}-${fileActionIndex}`"
+      >
+        <oc-button
+          appearance="raw"
+          class="w-full"
+          justify-content="left"
+          :class="['new-file-btn-' + fileAction.ext]"
+          @click="() => fileAction.handler()"
+        >
+          <resource-icon
+            :resource="getIconResource(fileAction)"
+            size="medium"
+            class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+          />
+          <span>{{ fileAction.label() }}</span>
+          <span v-if="areFileExtensionsShown && fileAction.ext" class="ml-auto text-sm">
+            {{ fileAction.ext }}
+          </span>
+        </oc-button>
+      </li>
+    </oc-list>
+    <oc-list class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+      <li>
+        <oc-button
+          id="new-shortcut-btn"
+          class="w-full"
+          justify-content="left"
+          appearance="raw"
+          @click="createNewShortcutAction"
+        >
+          <oc-icon name="external-link" size="medium" />
+          <span v-text="$gettext('Shortcut')" />
+          <span v-if="areFileExtensionsShown" class="ml-auto text-sm" v-text="'url'" />
+        </oc-button>
+      </li>
+    </oc-list>
+  </oc-drop>
+</template>
+
+<script setup lang="ts">
+import {
+  FileAction,
+  useFileActionsCreateNewShortcut,
+  useResourcesStore,
+  useUserStore,
+  useFileActionsCreateNewFile,
+  useFileActionsCreateNewFolder,
+  useSpacesStore
+} from '@opencloud-eu/web-pkg'
+
+import { computed, unref, ref } from 'vue'
+import { Resource } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+import { useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { Action, ResourceIcon } from '@opencloud-eu/web-pkg'
+import { v4 as uuidV4 } from 'uuid'
+import { storeToRefs } from 'pinia'
+import { uploadMenuExtensionPoint } from '../extensionPoints'
+import ResourceUpload from './AppBar/Upload/ResourceUpload.vue'
+
+const { toggle } = defineProps<{
+  toggle: string
+}>()
+
+const userStore = useUserStore()
+const language = useGettext()
+const { $gettext } = language
+
+const resourcesStore = useResourcesStore()
+const { currentFolder } = storeToRefs(resourcesStore)
+
+const spacesStore = useSpacesStore()
+const { currentSpace } = storeToRefs(spacesStore)
+
+const areFileExtensionsShown = computed(() => unref(resourcesStore.areFileExtensionsShown))
+
+const { actions: createNewFolder } = useFileActionsCreateNewFolder({ space: currentSpace })
+const createNewFolderAction = () => {
+  return unref(createNewFolder)[0].handler()
+}
+
+const { actions: createNewShortcut } = useFileActionsCreateNewShortcut({ space: currentSpace })
+const createNewShortcutAction = () => {
+  return unref(createNewShortcut)[0].handler()
+}
+
+const { actions: createNewFileActions } = useFileActionsCreateNewFile({ space: currentSpace })
+
+const createFileActionsGroups = computed(() => {
+  const result: FileAction[][] = []
+  const externalFileActions = unref(createNewFileActions).filter(({ isExternal }) => isExternal)
+  if (externalFileActions.length) {
+    result.push(externalFileActions)
+  }
+  const appFileActions = unref(createNewFileActions).filter(({ isExternal }) => !isExternal)
+  if (appFileActions.length) {
+    result.push(appFileActions)
+  }
+  return result
+})
+
+const extensionRegistry = useExtensionRegistry()
+const extensionActions = computed(() => {
+  return [
+    ...extensionRegistry.requestExtensions(uploadMenuExtensionPoint).map((e) => e.action)
+  ].filter((e) => e.isVisible())
+})
+
+const canUpload = computed(() => {
+  return unref(currentFolder)?.canUpload({ user: userStore.user })
+})
+
+const actionKeySuffix = ref(uuidV4())
+const showDrop = () => {
+  // force actions to be re-rendered when the drop is being opened
+  actionKeySuffix.value = uuidV4()
+}
+
+const isActionDisabled = (action: Action) => {
+  return action.isDisabled ? action.isDisabled() : false
+}
+
+const getActionIcon = (action: Action) => {
+  return typeof action.icon === 'function'
+    ? action.icon({ space: unref(currentSpace) })
+    : action.icon
+}
+
+const getIconResource = (fileHandler: FileAction) => {
+  return { type: 'file', extension: fileHandler.ext } as Resource
+}
+
+const folderIconResource = computed(() => {
+  return { isFolder: true, extension: '' } as Resource
+})
+</script>
+<style>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer utilities {
+  #create-or-upload-drop .oc-icon svg {
+    /* reset the resource icon height because the ResourceIcon component messes with it */
+    @apply h-5.5;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/extensionPoints.ts b/packages/web-app-files/src/extensionPoints.ts
index c6b8683971..5f447691ce 100644
--- a/packages/web-app-files/src/extensionPoints.ts
+++ b/packages/web-app-files/src/extensionPoints.ts
@@ -1,6 +1,7 @@
 import {
   ActionExtension,
   ExtensionPoint,
+  FloatingActionButtonExtension,
   FolderViewExtension,
   SidebarPanelExtension
 } from '@opencloud-eu/web-pkg'
@@ -36,6 +37,12 @@ export const fileSideBarExtensionPoint: ExtensionPoint<SidebarPanelExtension<any
   extensionType: 'sidebarPanel',
   multiple: true
 }
+
+export const floatingActionButtonExtension: ExtensionPoint<FloatingActionButtonExtension> = {
+  id: 'global.floating-action-button',
+  extensionType: 'floatingActionButton'
+}
+
 export const folderViewsFolderExtensionPoint: ExtensionPoint<FolderViewExtension> = {
   id: 'app.files.folder-views.folder',
   extensionType: 'folderView'
@@ -95,7 +102,8 @@ export const extensionPoints = () => {
       folderViewsTrashOverviewExtensionPoint,
       folderViewsSharedViaLinkExtensionPoint,
       folderViewsSharedWithOthersExtensionPoint,
-      folderViewsSearchExtensionPoint
+      folderViewsSearchExtensionPoint,
+      floatingActionButtonExtension
     ]
   })
 }
diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index e8c4146817..414a8e631a 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -3,24 +3,33 @@ import {
   Extension,
   useCapabilityStore,
   useConfigStore,
+  useIsFilesAppActive,
+  useResourcesStore,
   useRouter,
   useSearch,
   useUserStore
 } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { SDKSearch } from './search'
 import { useSideBarPanels } from './composables/extensions/useFileSideBars'
 import { useFolderViews } from './composables/extensions/useFolderViews'
 import { useFileActions } from './composables/extensions/useFileActions'
 import { useTrashActions } from './composables/extensions/useTrashActions'
 import { urlJoin } from '@opencloud-eu/web-client'
+import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
+import CreateOrUploadMenu from './components/CreateOrUploadMenu.vue'
 
 export const extensions = (appInfo: ApplicationInformation) => {
   const capabilityStore = useCapabilityStore()
   const configStore = useConfigStore()
   const userStore = useUserStore()
+  const resourcesStore = useResourcesStore()
+  const { currentFolder } = storeToRefs(resourcesStore)
   const router = useRouter()
   const { search: searchFunction } = useSearch()
+  const { $gettext } = useGettext()
+  const isFilesAppActive = useIsFilesAppActive()
 
   const fileActionExtensions = useFileActions()
   const trashActionExtensions = useTrashActions()
@@ -38,6 +47,20 @@ export const extensions = (appInfo: ApplicationInformation) => {
       type: 'search',
       searchProvider: new SDKSearch(capabilityStore, router, searchFunction, configStore)
     },
+    {
+      id: 'com.github.opencloud-eu.web.files.floating-action-button',
+      extensionPointIds: ['global.floating-action-button'],
+      type: 'floatingActionButton',
+      icon: 'add',
+      label: () => $gettext('New'),
+      isActive: () => {
+        return unref(isFilesAppActive)
+      },
+      isDisabled: () => {
+        return !unref(currentFolder)?.canUpload({ user: userStore.user })
+      },
+      dropComponent: CreateOrUploadMenu
+    },
     ...((userStore.user && [
       {
         id: `app.${appInfo.id}.menuItem`,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
index 1d4f789c52..f17df56187 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -30,7 +30,7 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
 
 const elSelector = {
   component: '.create-and-upload-actions',
-  createOrUploadMenuBtn: '#create-or-upload-menu-btn',
+  createOrUploadMenuBtn: '#floating-action-button',
   uploadBtn: '#upload-menu-btn',
   resourceUpload: 'resource-upload-stub',
   newFolderBtn: '#new-folder-btn',
@@ -43,19 +43,10 @@ const elSelector = {
 document.body.innerHTML = '<div id="files-view"></div>'
 
 describe('CreateAndUpload component', () => {
-  describe('action buttons', () => {
-    it('should show and be enabled if file creation is possible', () => {
+  describe('component visibility', () => {
+    it('should be visible when file creation is possible', () => {
       const { wrapper } = getWrapper()
-      expect(wrapper.findComponent<typeof OcButton>(elSelector.uploadBtn)).toBeTruthy()
-      expect(wrapper.findComponent<typeof OcButton>(elSelector.newFolderBtn).props()).toBeTruthy()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-    it('should be disabled if file creation is not possible', () => {
-      const currentFolder = mock<Resource>({ canUpload: () => false })
-      const { wrapper } = getWrapper({ currentFolder, createActions: [] })
-      expect(
-        wrapper.findComponent<typeof OcButton>(elSelector.createOrUploadMenuBtn).props().disabled
-      ).toBeTruthy()
+      expect(wrapper.find(elSelector.component).exists()).toBeTruthy()
     })
     it('should not be visible if file creation is not possible on a public page', () => {
       const currentFolder = mock<Resource>({ canUpload: () => false })
@@ -63,16 +54,6 @@ describe('CreateAndUpload component', () => {
       expect(wrapper.find(elSelector.component).exists()).toBeFalsy()
     })
   })
-  describe('file handlers', () => {
-    it('should always show for uploading files and folders', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
-    })
-    it('should show entries for all new file handlers', () => {
-      const { wrapper } = getWrapper()
-      expect(wrapper.html()).toMatchSnapshot()
-    })
-  })
   describe('clipboard buttons', () => {
     it('should show if clipboard is empty', () => {
       const { wrapper } = getWrapper()
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
deleted file mode 100644
index 772e7fe81c..0000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ /dev/null
@@ -1,115 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
-"<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create or upload" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="create-or-upload-menu-btn">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>Create or Upload</span>
-    </button></div>
-  <oc-drop-stub title="Create or Upload" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#create-or-upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li>
-        <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
-      </li>
-      <li>
-        <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
-      </li>
-    </oc-list-stub>
-    <!--v-if-->
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
-"<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create or upload" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="create-or-upload-menu-btn">
-      <!--v-if-->
-      <!-- @slot Content of the button -->
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>Create or Upload</span>
-    </button></div>
-  <oc-drop-stub title="Create or Upload" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#create-or-upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li>
-        <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
-      </li>
-      <li>
-        <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
-      </li>
-    </oc-list-stub>
-    <!--v-if-->
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
-          <!--v-if-->
-        </button></li>
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
-      <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
-          <!--v-if-->
-          <!-- @slot Content of the button -->
-          <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
-          <!--v-if-->
-        </button></li>
-    </oc-list-stub>
-  </oc-drop-stub>
-  <!--v-if-->
-</div>"
-`;
diff --git a/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts b/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts
new file mode 100644
index 0000000000..c886c04dd8
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/CreateOrUploadMenu.spec.ts
@@ -0,0 +1,116 @@
+import CreateOrUploadMenu from '../../../src/components/CreateOrUploadMenu.vue'
+import { mock } from 'vitest-mock-extended'
+import { Resource } from '@opencloud-eu/web-client'
+import {
+  FileAction,
+  useFileActionsCreateNewFile,
+  useFileActionsCreateNewFolder,
+  useFileActionsCreateNewShortcut,
+  useExtensionRegistry,
+  Extension
+} from '@opencloud-eu/web-pkg'
+import { defaultPlugins, shallowMount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
+import { computed } from 'vue'
+
+vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useFileActionsCreateNewFile: vi.fn(),
+  useFileActionsCreateNewFolder: vi.fn(),
+  useFileActionsCreateNewShortcut: vi.fn()
+}))
+
+const elSelector = {
+  uploadBtn: '#upload-list',
+  resourceUpload: 'resource-upload-stub',
+  newFolderBtn: '#new-folder-btn',
+  newShortcutBtn: '#new-shortcut-btn',
+  extensionList: '#extension-list'
+}
+
+describe('CreateOrUploadMenu component', () => {
+  describe('action buttons', () => {
+    it('should show and be enabled if file creation is possible', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.find(elSelector.uploadBtn)).toBeTruthy()
+      expect(wrapper.find(elSelector.newFolderBtn).exists()).toBeTruthy()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('file handlers', () => {
+    it('should always show for uploading files and folders', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.findAll(elSelector.resourceUpload).length).toBe(2)
+    })
+
+    it('should show entries for all new file handlers', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})
+
+function getWrapper({
+  currentFolder = mock<Resource>({ canUpload: () => true }),
+  areFileExtensionsShown = false,
+  createActions = [
+    mock<FileAction>({ label: () => 'Plain text file', ext: 'txt', isExternal: false }),
+    mock<FileAction>({ label: () => 'Mark-down file', ext: 'md', isExternal: false })
+  ],
+  extensionActions = [],
+  createFolderHandler = vi.fn(),
+  createShortcutHandler = vi.fn()
+}: {
+  currentFolder?: Resource
+  areFileExtensionsShown?: boolean
+  createActions?: FileAction[]
+  extensionActions?: Extension[]
+  createFolderHandler?: () => void
+  createShortcutHandler?: () => void
+} = {}) {
+  const plugins = defaultPlugins({
+    piniaOptions: {
+      resourcesStore: { areFileExtensionsShown, currentFolder }
+    }
+  })
+
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensionActions)
+
+  vi.mocked(useFileActionsCreateNewFile).mockReturnValue({
+    actions: computed(() => createActions)
+  } as any)
+
+  vi.mocked(useFileActionsCreateNewFolder).mockReturnValue({
+    actions: computed(() => [
+      mock<FileAction>({
+        handler: createFolderHandler
+      })
+    ])
+  } as any)
+
+  vi.mocked(useFileActionsCreateNewShortcut).mockReturnValue({
+    actions: computed(() => [
+      mock<FileAction>({
+        handler: createShortcutHandler
+      })
+    ])
+  } as any)
+
+  const mocks = defaultComponentMocks()
+
+  return {
+    mocks,
+    wrapper: shallowMount(CreateOrUploadMenu, {
+      props: {
+        toggle: '#test-toggle'
+      },
+      global: {
+        renderStubDefaultSlot: true,
+        mocks,
+        provide: mocks,
+        plugins
+      }
+    })
+  }
+}
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
new file mode 100644
index 0000000000..c3343dadbe
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CreateOrUploadMenu component > action buttons > should show and be enabled if file creation is possible 1`] = `
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
+  <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
+    </li>
+    <li>
+      <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
+    </li>
+  </oc-list-stub>
+  <!--v-if-->
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-txt">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-md">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-shortcut-btn" class="w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+</oc-drop-stub>"
+`;
+
+exports[`CreateOrUploadMenu component > file handlers > should show entries for all new file handlers 1`] = `
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
+  <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <resource-upload-stub btnlabel="Files Upload" btnclass="w-full" isfolder="false"></resource-upload-stub>
+    </li>
+    <li>
+      <resource-upload-stub btnlabel="Folder Upload" btnclass="w-full" isfolder="true"></resource-upload-stub>
+    </li>
+  </oc-list-stub>
+  <!--v-if-->
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-txt">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="w-full new-file-btn-md">
+        <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+  <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
+    <li>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-shortcut-btn" class="w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
+        <!--v-if-->
+      </oc-button-stub>
+    </li>
+  </oc-list-stub>
+</oc-drop-stub>"
+`;
diff --git a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
index 9ef09621ed..584491aae3 100644
--- a/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
+++ b/packages/web-pkg/src/composables/piniaStores/extensionRegistry/types.ts
@@ -15,6 +15,7 @@ export type ExtensionType = StringUnionOrAnyString<
   | 'sidebarNav'
   | 'sidebarPanel'
   | 'accountExtension'
+  | 'floatingActionButton'
 >
 
 export type Extension = {
@@ -67,6 +68,17 @@ export interface AccountExtension extends Extension {
   icon: string
 }
 
+export interface FloatingActionButtonExtension extends Extension {
+  type: 'floatingActionButton'
+  label: () => string
+  isActive: () => boolean
+  isDisabled?: () => boolean
+  color?: string
+  icon?: string
+  handler?: () => Promise<void> | void
+  dropComponent?: Component
+}
+
 export interface AppMenuItemExtension extends Extension {
   type: 'appMenuItem'
   label: () => string
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 515a334301..a5b48ff3b9 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -10,10 +10,12 @@
     <component :is="layout"></component>
     <modal-wrapper />
   </div>
+  <app-floating-action-button v-if="isMobile" />
 </template>
 <script setup lang="ts">
 import SkipTo from './components/SkipTo.vue'
 import ModalWrapper from './components/ModalWrapper.vue'
+import AppFloatingActionButton from './components/AppFloatingActionButton.vue'
 import { useLayout } from './composables/layout'
 import { computed, onMounted, ref, unref, watch } from 'vue'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
@@ -29,6 +31,7 @@ import { RouteLocation, useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
 import { isEqual } from 'lodash-es'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
 const resourcesStore = useResourcesStore()
 const themeStore = useThemeStore()
@@ -39,6 +42,7 @@ const router = useRouter()
 const route = useRoute()
 useHead()
 const { layout, layoutType } = useLayout({ router })
+const { isMobile } = useIsMobile()
 
 const { onInitialLoad } = useSideBar()
 onInitialLoad()
diff --git a/packages/web-runtime/src/components/AppFloatingActionButton.vue b/packages/web-runtime/src/components/AppFloatingActionButton.vue
new file mode 100644
index 0000000000..48a70cdcc8
--- /dev/null
+++ b/packages/web-runtime/src/components/AppFloatingActionButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-for="floatingActionButton in floatingActionButtonExtensions"
+    :key="floatingActionButton.id"
+  >
+    <template v-if="floatingActionButton.isActive()">
+      <div v-if="!isMobile" class="py-2 px-2">
+        <oc-button
+          :id="getButtonId(floatingActionButton.id)"
+          :disabled="floatingActionButton.isDisabled?.()"
+          appearance="filled"
+          class="oc-app-floating-action-button w-full"
+          @click="floatingActionButton.handler?.()"
+        >
+          <oc-icon :name="floatingActionButton.icon" />
+          <span v-text="floatingActionButton.label()" />
+        </oc-button>
+        <component
+          :is="floatingActionButton.dropComponent"
+          v-if="floatingActionButton.dropComponent"
+          :toggle="`#${getButtonId(floatingActionButton.id)}`"
+        />
+      </div>
+      <template v-else-if="!floatingActionButton.isDisabled?.()">
+        <oc-floating-action-button
+          :button-id="getButtonId(floatingActionButton.id)"
+          class="oc-app-floating-action-button"
+          mode="action"
+          :handler="floatingActionButton.handler"
+        />
+        <component
+          :is="floatingActionButton.dropComponent"
+          v-if="floatingActionButton.dropComponent"
+          :toggle="`#${getButtonId(floatingActionButton.id)}`"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { FloatingActionButtonExtension, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import { useIsMobile } from '@opencloud-eu/design-system/composables'
+
+const { requestExtensions } = useExtensionRegistry()
+const { isMobile } = useIsMobile()
+
+const floatingActionButtonExtensions = computed(() => {
+  return requestExtensions<FloatingActionButtonExtension>({
+    id: 'global.floating-action-button',
+    extensionType: 'floatingActionButton'
+  })
+})
+
+const getButtonId = (extensionId: string): string => {
+  const prefix = unref(isMobile) ? 'mobile-' : ''
+  return `${prefix}app-floating-action-button-${extensionId.replace(/\./g, '-')}`
+}
+</script>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 57975af564..0ae765c7b0 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -4,6 +4,7 @@
     class="bg-role-surface-container z-40 flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"
   >
     <nav class="oc-sidebar-nav mb-4 mt-2 px-1" :aria-label="$gettext('Sidebar navigation menu')">
+      <app-floating-action-button />
       <div
         v-show="isAnyNavItemActive"
         id="nav-highlighter"
@@ -40,6 +41,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
 import SidebarNavItem from './SidebarNavItem.vue'
+import AppFloatingActionButton from '../AppFloatingActionButton.vue'
 import { useCapabilityStore, VersionCheck, NavItem, getBackendVersion } from '@opencloud-eu/web-pkg'
 
 type NavItemRef = InstanceType<typeof SidebarNavItem>
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index a37f7e6c1f..cc1b1d9758 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -42,7 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import { AppLoadingSpinner, CustomComponentTarget } from '@opencloud-eu/web-pkg'
+import {
+  AppLoadingSpinner,
+  CustomComponentTarget,
+  FloatingActionButtonExtension,
+  useExtensionRegistry
+} from '@opencloud-eu/web-pkg'
 import TopBar from '../components/Topbar/TopBar.vue'
 import MessageBar from '../components/MessageBar.vue'
 import SidebarNav from '../components/SidebarNav/SidebarNav.vue'
@@ -56,6 +61,7 @@ const MOBILE_BREAKPOINT = 640
 
 const { $gettext } = useGettext()
 const { navItems } = useNavItems()
+const { requestExtensions } = useExtensionRegistry()
 
 const requiredAuthContext = useRouteMeta('authContext')
 const { areSpacesLoading } = useSpacesLoading()
@@ -73,8 +79,15 @@ const onResize = () => {
   isMobileWidth.value = window.innerWidth < MOBILE_BREAKPOINT
 }
 
+const hasFloatingActionButton = computed(() => {
+  return !!requestExtensions<FloatingActionButtonExtension>({
+    id: 'global.floating-action-button',
+    extensionType: 'floatingActionButton'
+  }).filter((extension) => extension.isActive()).length
+})
+
 const isSidebarVisible = computed(() => {
-  return !unref(isMobileWidth) && unref(navItems).length
+  return !unref(isMobileWidth) && (unref(navItems).length || unref(hasFloatingActionButton))
 })
 
 const isIE11 = !!(window as any).MSInputMethodContext && !!(document as any).documentMode
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 8da068f219..b9f890fb70 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -35,7 +35,7 @@ const breadcrumbResourceNameSelector =
   '//li[contains(@class, "oc-breadcrumb-list-item")]//span[text()=%s]'
 const breadcrumbLastResourceNameSelector = '.oc-breadcrumb-item-text-last'
 const breadcrumbResourceSelector = '//*[@id="files-breadcrumb"]//span[text()=%s]//ancestor::li'
-const addNewResourceButton = `#create-or-upload-menu-btn`
+const addNewResourceButton = `.oc-app-floating-action-button`
 const createNewFolderButton = '#new-folder-btn'
 const createNewTxtFileButton = '.new-file-btn-txt'
 const createNewMdFileButton = '.new-file-btn-md'
@@ -227,6 +227,7 @@ export type createResourceTypes =
   | 'folder'
   | 'txtFile'
   | 'mdFile'
+  | 'Document'
   | 'OpenDocument'
   | 'Microsoft Word'
 
@@ -424,20 +425,27 @@ const createDocumentFile = async (
   args: createResourceArgs,
   editorToOpen: string
 ): Promise<void> => {
-  const { page, name, type, content } = args
+  const { page, name, content, type } = args
   // for creating office suites documents we need the external app provider services to be ready
   // though the service is ready it takes some time for the list of office suites documents to be visible in the dropdown in the webUI
   // which requires a retry to check if the service is ready and the office suites documents is visible in the dropdown
+  let typeLocator = type
+  switch (type) {
+    case 'OpenDocument': {
+      typeLocator = 'Document'
+    }
+  }
+
   const isAppProviderServiceReadyInWebUI = await isAppProviderServiceForOfficeSuitesReadyInWebUI(
     page,
-    type
+    typeLocator
   )
   if (isAppProviderServiceReadyInWebUI === false) {
     throw new Error(
       `The document of type ${type} did not appear in the webUI for ${editorToOpen}. Possible reason could be the app provider service for ${editorToOpen} was not ready yet.`
     )
   }
-  await page.locator(util.format(createNewOfficeDocumentFileBUtton, type)).click()
+  await page.locator(util.format(createNewOfficeDocumentFileBUtton, typeLocator)).click()
   const resourceInput = page.locator(resourceNameInput)
   await resourceInput.clear()
   await resourceInput.fill(name)
diff --git a/tests/woodpecker/app-registry.yaml b/tests/woodpecker/app-registry.yaml
index 883a953fc6..a6010bef4c 100644
--- a/tests/woodpecker/app-registry.yaml
+++ b/tests/woodpecker/app-registry.yaml
@@ -9,21 +9,21 @@ app_registry:
       allow_creation: false
     - mime_type: application/vnd.oasis.opendocument.text
       extension: odt
-      name: OpenDocument
+      name: Document
       description: OpenDocument text document
       icon: ''
       default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.oasis.opendocument.spreadsheet
       extension: ods
-      name: OpenSpreadsheet
+      name: Spreadsheet
       description: OpenDocument spreadsheet document
       icon: ''
       default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.oasis.opendocument.presentation
       extension: odp
-      name: OpenPresentation
+      name: Presentation
       description: OpenDocument presentation document
       icon: ''
       default_app: Collabora
@@ -33,21 +33,21 @@ app_registry:
       name: Microsoft Word
       description: Microsoft Word document
       icon: ''
-      default_app: OnlyOffice
+      default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
       extension: xlsx
       name: Microsoft Excel
       description: Microsoft Excel document
       icon: ''
-      default_app: OnlyOffice
+      default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.openxmlformats-officedocument.presentationml.presentation
       extension: pptx
       name: Microsoft PowerPoint
       description: Microsoft PowerPoint document
       icon: ''
-      default_app: OnlyOffice
+      default_app: Collabora
       allow_creation: true
     - mime_type: application/vnd.jupyter
       extension: ipynb