diff --git a/changelog/unreleased/enhancement-condensed-files-view b/changelog/unreleased/enhancement-condensed-files-view
index ffd6899e2bb..93b8cf44d24 100644
--- a/changelog/unreleased/enhancement-condensed-files-view
+++ b/changelog/unreleased/enhancement-condensed-files-view
@@ -1,7 +1,7 @@
 Enhancement: Add switch to enable condensed resource table
 
 We've added a switch to have a more condensed resource table. 
-The change gets saved to the route and persisted across folder 
+The change gets saved to the url and persisted across folder 
 navigation in all files, spaces and favorites views.
 
 https://github.com/owncloud/web/pull/7976
diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
new file mode 100644
index 00000000000..5c5d0fac35b
--- /dev/null
+++ b/changelog/unreleased/enhancement-resources-tiles-view
@@ -0,0 +1,9 @@
+Enhancement: Add tiles view for resource display
+
+We've added a switch to change from the known resource table to a tiles view.
+The change gets saved to the url and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7991
+https://github.com/owncloud/web/issues/6378
+https://github.com/owncloud/web/issues/6379
+https://github.com/owncloud/web/issues/6380
diff --git a/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon b/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon
new file mode 100644
index 00000000000..cd9b3e8d2ce
--- /dev/null
+++ b/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon
@@ -0,0 +1,5 @@
+Enhancement: Add option to hide icon/thumbnail OcResource
+
+We added a property to the OcResource component so it can be displayed without icon/thumbnail.
+
+https://github.com/owncloud/web/pull/7991
diff --git a/packages/design-system/src/components/OcResource/OcResource.spec.ts b/packages/design-system/src/components/OcResource/OcResource.spec.ts
index 8c85981b5d8..9ebe182b25f 100644
--- a/packages/design-system/src/components/OcResource/OcResource.spec.ts
+++ b/packages/design-system/src/components/OcResource/OcResource.spec.ts
@@ -128,4 +128,20 @@ describe('OcResource', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('can be used without icon/thumbnail', () => {
+    const wrapper = mount(Resource, {
+      props: {
+        resource: fileResourceWithoutParentFoldername,
+        isIconDisplayed: false,
+        parentFolderNameDefault: 'Example parent folder name'
+      },
+      global: {
+        stubs
+      }
+    })
+
+    expect(wrapper.find('oc-resource-thumbnail').exists()).toBeFalsy()
+    expect(wrapper.find('oc-resource-icon').exists()).toBeFalsy()
+  })
 })
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
index 69e52772eb7..f0c9bc6876a 100644
--- a/packages/design-system/src/components/OcResource/OcResource.vue
+++ b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="oc-resource oc-text-overflow">
     <oc-resource-link
+      v-if="isIconDisplayed"
       :resource="resource"
       :is-resource-clickable="isResourceClickable"
       :folder-link="folderLink"
@@ -16,7 +17,7 @@
       />
       <oc-resource-icon v-else :resource="resource" />
     </oc-resource-link>
-    <div class="oc-resource-details oc-text-overflow">
+    <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
       <oc-resource-link
         v-slot="{ opensInNewWindowDescriptionId }"
         :resource="resource"
@@ -139,6 +140,14 @@ export default defineComponent({
       required: false,
       default: true
     },
+    /**
+     * Asserts whether the resource thumbnail should be displayed
+     */
+    isIconDisplayed: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -206,7 +215,6 @@ export default defineComponent({
 
   &-details {
     display: block;
-    padding-left: var(--oc-space-small);
 
     a {
       text-decoration: none;
diff --git a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
index 0c37995617b..d76bc4b9604 100644
--- a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
+++ b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`OcResource displays parent folder name default if calculated name is em
       <!---->
     </span>
   </button>
-  <div class="oc-resource-details oc-text-overflow">
+  <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
       <!-- @slot Content of the button -->
       <!--v-if-->
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index ccab464f752..169eb5cff1d 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -9,7 +9,7 @@
       class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle"
       :resource="resource"
       :folder-link="resourceRoute"
-      @click="$emit('click', $event)"
+      @click="$emit('click')"
     >
       <oc-tag
         v-if="resource.disabled"
@@ -20,27 +20,34 @@
       </oc-tag>
       <!-- Slot for resource image, renders resource type icon by default -->
       <slot name="imageField" :item="resource">
-        <oc-img v-if="resource.thumbnail" class="tile-preview" :src="resource.thumbnail" />
+        <oc-img
+          v-if="resource.thumbnail"
+          class="tile-preview oc-rounded-top"
+          :src="resource.thumbnail"
+        />
         <oc-resource-icon
           v-else
           :resource="resource"
           size="xxlarge"
-          class="tile-default-image oc-p-m"
+          class="tile-default-image oc-pt-s"
         />
       </slot>
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
-        <div class="oc-flex oc-flex-middle oc-text-truncate">
+        <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
           <oc-resource
             :resource="resource"
+            :is-icon-displayed="false"
             :folder-link="resourceRoute"
-            @click="$emit('click', $event)"
+            @click="$emit('click')"
           />
         </div>
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
           <slot name="actions" :item="resource" />
+          <!-- Slot for contextmenu -->
+          <slot name="contextMenu" :item="resource" />
         </div>
       </div>
       <p
@@ -93,9 +100,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tile-card {
-  box-shadow: none !important;
   background-color: var(--oc-color-background-highlight) !important;
+  box-shadow: none !important;
   height: 100%;
+  outline: 1px solid var(--oc-color-border);
 
   &.state-trashed {
     cursor: pointer;
@@ -121,16 +129,17 @@ export default defineComponent({
     }
 
     .tile-preview {
-      min-width: 252px;
-      height: auto;
       aspect-ratio: 16/9;
+      height: auto;
       object-fit: cover;
+      width: 100%;
     }
   }
 
-  .resource-name {
-    overflow: hidden;
+  .resource-name-wrapper {
     color: var(--oc-color-text-default);
+    max-width: 70%;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index 1ae481ae336..c4feaf6e057 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -5,15 +5,16 @@ exports[`OcTile component renders default space correctly 1`] = `
   <oc-resource-link-stub class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle" isresourceclickable="true" resource="[object Object]">
     <!--v-if-->
     <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->
@@ -27,15 +28,16 @@ exports[`OcTile component renders disabled space correctly 1`] = `
     <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" rounded="false" size="medium" type="span">
       <span>Disabled</span>
     </oc-tag-stub> <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 7a7e89c66fa..7f49c4d8b96 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -142,7 +142,11 @@ export default defineComponent({
       if (!this.displayViewModeSwitch) {
         return []
       }
-      return [ViewModeConstants.condensedTable, ViewModeConstants.default]
+      return [
+        ViewModeConstants.condensedTable,
+        ViewModeConstants.default,
+        ViewModeConstants.tilesView
+      ]
     }
   },
   mounted() {
diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 08c15691b15..7e89aa5e891 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -2,15 +2,15 @@
   <div class="oc-flex oc-flex-middle">
     <div
       v-if="viewModes.length"
-      data-testid="viewmode-switch-buttons"
-      class="oc-button-group oc-visible@s oc-mr-s"
+      class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s"
     >
       <oc-button
         v-for="viewMode in viewModes"
         :key="viewMode.name"
         v-oc-tooltip="$gettext(viewMode.label)"
+        :class="viewMode.name"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
-        :label="$gettext(viewMode.label)"
+        :aria-label="$gettext(viewMode.label)"
         @click="setViewMode(viewMode)"
       >
         <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />
@@ -148,6 +148,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.viewmode-switch-buttons {
+  flex-flow: initial;
+}
+
 #files-view-options-btn {
   vertical-align: middle;
   border: 3px solid transparent;
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index ea9d41bbd66..af40165daf2 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -182,11 +182,14 @@
 </template>
 
 <script lang="ts">
-import { eventBus } from 'web-pkg/src/services/eventBus'
+import { defineComponent, PropType, computed } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from 'web-pkg/src/constants'
-import { SortDir } from '../../composables'
-import { determineSortFields } from '../../helpers/ui/resourceTable'
+import { basename, dirname } from 'path'
+import { useWindowSize } from '@vueuse/core'
+import { Resource } from 'web-client'
+import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
+import { ShareTypes } from 'web-client/src/helpers/share'
+
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
@@ -194,29 +197,27 @@ import {
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
-import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
-
-import Rename from '../../mixins/actions/rename'
-import { defineComponent, PropType, computed } from 'vue'
-import { Resource } from 'web-client'
-import { ClipboardActions } from '../../helpers/clipboardActions'
-import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
-import { ShareTypes } from 'web-client/src/helpers/share'
-import { createLocationSpaces, createLocationShares, createLocationCommon } from '../../router'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from 'web-pkg/src/constants'
+import { eventBus } from 'web-pkg/src/services/eventBus'
 import {
   displayPositionedDropdown,
   formatDateFromJSDate,
   formatRelativeDateFromJSDate
 } from 'web-pkg/src/helpers'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
-import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { basename, dirname } from 'path'
-import { useWindowSize } from '@vueuse/core'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
+import { SortDir } from 'web-app-files/src/composables'
+import { useResourceRouteResolver } from 'web-app-files/src/composables/filesList/useResourceRouteResolver'
+import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
+import { ClipboardActions } from 'web-app-files/src/helpers/clipboardActions'
+import { isResourceTxtFileAlmostEmpty } from 'web-app-files/src/helpers/resources'
+import { determineSortFields } from 'web-app-files/src/helpers/ui/resourceTable'
+import Rename from 'web-app-files/src/mixins/actions/rename'
+import { createLocationShares, createLocationCommon } from 'web-app-files/src/router'
+import { ref } from 'vue'
+
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
@@ -398,24 +399,38 @@ export default defineComponent({
     'update:selectedIds',
     'update:modelValue'
   ],
-  setup() {
+  setup(props, context) {
     const store = useStore()
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
     const { width } = useWindowSize()
     const hasTags = computed(
       () => useCapabilityFilesTags().value && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
     )
 
+    const resourceRouteResolver = useResourceRouteResolver(
+      {
+        space: ref(props.space),
+        spaces,
+        targetRouteCallback: computed(() => props.targetRouteCallback)
+      },
+      context
+    )
+
     return {
+      resourceRouteResolver,
       ViewModeConstants,
       hasTags,
-      isUserContext: useUserContext({ store }),
       hasShareJail: useCapabilityShareJailEnabled(),
-      hasProjectSpaces: useCapabilityProjectSpacesEnabled()
+      hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
+      isUserContext: useUserContext({ store })
     }
   },
   data() {
     return {
       constants: {
+        ImageDimension,
         EVENT_TROW_MOUNTED
       }
     }
@@ -612,7 +627,10 @@ export default defineComponent({
         .length
     },
     openRenameDialog(item) {
-      this.$_rename_trigger({ resources: [item] }, this.getMatchingSpace(item))
+      this.$_rename_trigger(
+        { resources: [item] },
+        this.resourceRouteResolver.getMatchingSpace(item)
+      )
     },
     openTagsSidebar() {
       eventBus.publish(SideBarEventTopics.open)
@@ -629,49 +647,23 @@ export default defineComponent({
       eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
     },
     folderLink(file) {
-      return this.createFolderLink({ path: file.path, fileId: file.fileId, resource: file })
+      return this.resourceRouteResolver.createFolderLink({
+        path: file.path,
+        fileId: file.fileId,
+        resource: file
+      })
     },
     parentFolderLink(file) {
       if (file.shareId && file.path === '/') {
         return createLocationShares('files-shares-with-me')
       }
 
-      return this.createFolderLink({
+      return this.resourceRouteResolver.createFolderLink({
         path: dirname(file.path),
         ...(file.parentFolderId && { fileId: file.parentFolderId }),
         resource: file
       })
     },
-    createFolderLink(options: CreateTargetRouteOptions) {
-      if (this.targetRouteCallback) {
-        return this.targetRouteCallback(options)
-      }
-
-      const { path, fileId, resource } = options
-      let space
-      if (resource.shareId) {
-        space = buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: basename(resource.shareRoot),
-          serverUrl: configurationManager.serverUrl
-        })
-      } else if (!resource.shareId && !this.getInternalSpace(resource.storageId)) {
-        if (path === '/') {
-          return createLocationShares('files-shares-with-me')
-        }
-        // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
-        return { name: 'resolvePrivateLink', params: { fileId } }
-      } else {
-        space = this.getMatchingSpace(resource)
-      }
-      if (!space) {
-        return {}
-      }
-      return createLocationSpaces(
-        'files-spaces-generic',
-        createFileRouteOptions(space, { path, fileId })
-      )
-    },
     fileDragged(file) {
       this.addSelectedResource(file)
     },
@@ -715,7 +707,7 @@ export default defineComponent({
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
-      this.$emit('rowMounted', resource, component)
+      this.$emit('rowMounted', resource, component, this.constants.ImageDimension.Thumbnail)
     },
     fileClicked(data) {
       /**
@@ -756,7 +748,7 @@ export default defineComponent({
       this.emitSelect(this.resources.map((resource) => resource.id))
     },
     emitFileClick(resource) {
-      let space = this.getMatchingSpace(resource)
+      let space = this.resourceRouteResolver.getMatchingSpace(resource)
       if (!space) {
         space = buildShareSpaceResource({
           shareId: resource.shareId,
@@ -822,22 +814,9 @@ export default defineComponent({
         ownerName: resource.owner[0].displayName
       })
     },
-    getInternalSpace(storageId) {
-      return this.space || this.spaces.find((space) => space.id === storageId)
-    },
-    getMatchingSpace(resource: Resource): SpaceResource {
-      return (
-        this.getInternalSpace(resource.storageId) ||
-        buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      )
-    },
     getDefaultParentFolderName(resource) {
       if (this.hasProjectSpaces) {
-        const matchingSpace = this.getMatchingSpace(resource)
+        const matchingSpace = this.resourceRouteResolver.getMatchingSpace(resource)
         if (matchingSpace?.driveType === 'project') {
           return matchingSpace.name
         }
@@ -853,7 +832,7 @@ export default defineComponent({
           : basename(resource.shareRoot)
       }
 
-      if (!this.getInternalSpace(resource.storageId)) {
+      if (!this.resourceRouteResolver.getInternalSpace(resource.storageId)) {
         return this.$gettext('Shared with me')
       }
 
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 79f0b519e21..d9d9006eeca 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -1,19 +1,56 @@
 <template>
   <div>
-    <oc-list class="oc-tiles oc-flex">
+    <oc-list class="oc-tiles oc-flex" :class="tileWidth === 'small' ? 'small-tiles' : ''">
       <li v-for="(resource, index) in data" :key="resource.id" class="oc-tiles-item">
         <oc-tile
-          :ref="`row-${index}`"
+          :ref="
+            (el) => {
+              tileRefs.tiles[index] = el
+            }
+          "
           :resource="resource"
           :resource-route="getRoute(resource)"
-          @click="tileResourceClicked(resource, $event)"
-          @contextmenu="$emit(EVENT_TROW_CONTEXTMENU, $refs[`row-${index}`][0], $event, resource)"
+          @vue:mounted="$emit('rowMounted', resource, tileRefs.tiles[index], ImageDimension.Tile)"
+          @contextmenu="showContextMenu($event, index, tileRefs.tiles[index])"
+          @click="emitTileClick(resource)"
         >
-          <template #imageField="{ item }">
-            <slot name="image" :item="item" />
+          <template #imageField>
+            <slot name="image" :resource="resource" />
           </template>
-          <template #actions="{ item }">
-            <slot name="actions" :item="item" />
+          <template #actions>
+            <slot name="actions" :resource="resource" />
+          </template>
+          <template #contextMenu>
+            <div>
+              <oc-button
+                :id="`space-context-btn-${resource.getDomSelector()}`"
+                :ref="
+                  (el) => {
+                    tileRefs.dropBtns[index] = el
+                  }
+                "
+                v-oc-tooltip="contextMenuLabel"
+                :aria-label="contextMenuLabel"
+                appearance="raw"
+                @click="resetDropPosition($event, index, tileRefs.dropBtns[index])"
+              >
+                <oc-icon name="more-2" />
+              </oc-button>
+              <oc-drop
+                :ref="
+                  (el) => {
+                    tileRefs.dropEls[index] = el
+                  }
+                "
+                :drop-id="`space-context-drop-${resource.getDomSelector()}`"
+                close-on-click
+                mode="manual"
+                :options="{ delayHide: 0 }"
+                padding-size="small"
+              >
+                <slot name="contextMenuActions" :resource="resource" />
+              </oc-drop>
+            </div>
           </template>
         </oc-tile>
       </li>
@@ -24,17 +61,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { onBeforeUpdate, defineComponent, PropType, computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useStore } from 'web-pkg/src/composables'
+import { ImageDimension } from 'web-pkg/src/constants'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { displayPositionedDropdown } from 'web-pkg/src/helpers/contextMenuDropdown'
+import { createLocationSpaces } from 'web-app-files/src/router'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { EVENT_TROW_CONTEXTMENU } from 'web-pkg/src/constants'
+import { useResourceRouteResolver } from '../../composables/filesList'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -45,12 +84,46 @@ export default defineComponent({
     data: {
       type: Array as PropType<Resource[]>,
       default: () => []
+    },
+    tileWidth: {
+      type: String,
+      default: ''
+    },
+    targetRouteCallback: {
+      type: Function,
+      required: false,
+      default: undefined
+    },
+    space: {
+      type: Object as PropType<SpaceResource>,
+      required: false,
+      default: null
     }
   },
-  setup() {
+  emits: ['fileClick', 'rowMounted'],
+  setup(props, context) {
     const store = useStore()
     const { $gettext } = useGettext()
 
+    const tileRefs = ref({
+      tiles: [],
+      dropBtns: [],
+      dropEls: []
+    })
+
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
+
+    const resourceRouteResolver = useResourceRouteResolver(
+      {
+        space: ref(props.space),
+        spaces,
+        targetRouteCallback: computed(() => props.targetRouteCallback)
+      },
+      context
+    )
+
     const getRoute = (resource) => {
       if (resource.type === 'space') {
         return resource.disabled
@@ -63,23 +136,71 @@ export default defineComponent({
               })
             )
       }
-      return { path: '#' }
+      if (resource.type === 'folder') {
+        return resourceRouteResolver.createFolderLink({
+          path: resource.path,
+          fileId: resource.fileId,
+          resource: resource
+        })
+      }
+      return { path: '' }
     }
 
-    const tileResourceClicked = (resource, event) => {
-      // Needs to handle file actions and potentially disabled folders also
+    const emitTileClick = (resource) => {
       if (resource.disabled && resource.type === 'space') {
         store.dispatch('showMessage', {
           title: $gettext('Disabled spaces cannot be entered'),
           status: 'warning'
         })
       }
+      if (resource.type !== 'space' && resource.type !== 'folder') {
+        resourceRouteResolver.createFileAction(resource)
+      }
     }
 
+    const contextMenuLabel = computed(() => {
+      return $gettext('Show context menu')
+    })
+
+    const resetDropPosition = (event, index, reference) => {
+      const drop = tileRefs.value.dropEls[index].tippy
+
+      if (drop === undefined) {
+        return
+      }
+      displayPositionedDropdown(drop, event, reference)
+    }
+
+    const showContextMenu = (event, index, reference) => {
+      event.preventDefault()
+      const drop = tileRefs.value.dropEls[index]
+
+      if (drop === undefined) {
+        return
+      }
+      displayPositionedDropdown(drop.tippy, event, reference)
+    }
+
+    onBeforeUpdate(() => {
+      tileRefs.value = {
+        tiles: [],
+        dropBtns: [],
+        dropEls: []
+      }
+    })
+
     return {
-      EVENT_TROW_CONTEXTMENU,
+      contextMenuLabel,
+      emitTileClick,
       getRoute,
-      tileResourceClicked
+      resetDropPosition,
+      showContextMenu,
+      tileRefs
+    }
+  },
+  data() {
+    return {
+      ImageDimension
     }
   }
 })
@@ -87,16 +208,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tiles {
-  flex-wrap: wrap;
-  gap: 15px;
+  column-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 14rem);
   justify-content: flex-start;
+  row-gap: 1rem;
 
-  .oc-tiles-item {
-    width: 252px;
-
-    @media (max-width: $oc-breakpoint-xsmall-max) {
-      width: 100%;
-    }
+  &.small-tiles {
+    grid-template-columns: repeat(auto-fill, 12rem);
   }
 }
 </style>
diff --git a/packages/web-app-files/src/composables/filesList/index.ts b/packages/web-app-files/src/composables/filesList/index.ts
new file mode 100644
index 00000000000..25cf331cd80
--- /dev/null
+++ b/packages/web-app-files/src/composables/filesList/index.ts
@@ -0,0 +1 @@
+export * from './useResourceRouteResolver'
diff --git a/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts b/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts
new file mode 100644
index 00000000000..12bfdc5094c
--- /dev/null
+++ b/packages/web-app-files/src/composables/filesList/useResourceRouteResolver.ts
@@ -0,0 +1,92 @@
+import { unref, Ref } from 'vue'
+import { basename } from 'path'
+
+import { ConfigurationManager } from 'web-pkg/src'
+import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { createLocationSpaces, createLocationShares } from '../../router'
+import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
+import { Resource, SpaceResource } from 'web-client/src'
+import { buildShareSpaceResource } from 'web-client/src/helpers'
+
+type ResourceRouteResolverOptions = {
+  configurationManager?: ConfigurationManager
+  targetRouteCallback?: Ref<any>
+  space?: Ref<SpaceResource>
+  spaces: Ref<SpaceResource[]>
+}
+
+export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
+  const configurationManager = options.configurationManager || useConfigurationManager()
+
+  const getInternalSpace = (storageId) => {
+    return unref(options.space) || unref(options.spaces).find((space) => space.id === storageId)
+  }
+
+  const getMatchingSpace = (resource: Resource): SpaceResource => {
+    return (
+      getInternalSpace(resource.storageId) ||
+      buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    )
+  }
+
+  const targetRouteCallback = options.targetRouteCallback
+
+  const createFolderLink = (createTargetRouteOptions: CreateTargetRouteOptions) => {
+    if (unref(targetRouteCallback)) {
+      return unref(targetRouteCallback)(createTargetRouteOptions)
+    }
+
+    const { path, fileId, resource } = createTargetRouteOptions
+    let space
+    if (resource.shareId) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: basename(resource.shareRoot),
+        serverUrl: configurationManager.serverUrl
+      })
+    } else if (!resource.shareId && !getInternalSpace(resource.storageId)) {
+      if (path === '/') {
+        return createLocationShares('files-shares-with-me')
+      }
+      // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
+      return { name: 'resolvePrivateLink', params: { fileId } }
+    } else {
+      space = getMatchingSpace(resource)
+    }
+    if (!space) {
+      return {}
+    }
+    return createLocationSpaces(
+      'files-spaces-generic',
+      createFileRouteOptions(space, { path, fileId })
+    )
+  }
+
+  const createFileAction = (resource: Resource) => {
+    let space = getMatchingSpace(resource)
+    if (!space) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    }
+    /**
+     * Triggered when a default action is triggered on a file
+     * @property {object} resource resource for which the event is triggered
+     */
+    context.emit('fileClick', { space, resources: [resource] })
+  }
+
+  return {
+    getInternalSpace,
+    getMatchingSpace,
+    createFileAction,
+    createFolderLink
+  }
+}
diff --git a/packages/web-app-files/src/composables/viewMode/constants.ts b/packages/web-app-files/src/composables/viewMode/constants.ts
index 58d87a68971..6f3ee0253ae 100644
--- a/packages/web-app-files/src/composables/viewMode/constants.ts
+++ b/packages/web-app-files/src/composables/viewMode/constants.ts
@@ -22,5 +22,13 @@ export abstract class ViewModeConstants {
       fillType: 'none'
     }
   }
+  static readonly tilesView: ViewMode = {
+    name: 'resource-tiles',
+    label: $gettext('Switch to tiles view'),
+    icon: {
+      name: 'apps-2',
+      fillType: 'line'
+    }
+  }
   static readonly queryName: string = 'view-mode'
 }
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index e2f5587f304..d541e81bfb6 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -1,10 +1,10 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { RouteLocation } from 'vue-router'
+import { RouteLocation, RouteLocationRaw } from 'vue-router'
 import omit from 'lodash-es/omit'
 
 export interface BreadcrumbItem {
   text: string
-  to?: RouteLocation
+  to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
 }
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index f9253428e5b..90d69526517 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -44,6 +44,39 @@
             </span>
           </template>
         </no-content-message>
+        <resource-tiles
+          v-else-if="viewMode === ViewModeConstants.tilesView.name"
+          :data="paginatedResources"
+          class="oc-px-m oc-pt-l"
+          tile-width="small"
+          :target-route-callback="resourceTargetRouteCallback"
+          :space="space"
+          @rowMounted="rowMounted"
+          @fileClick="$_fileActions_triggerDefaultAction"
+        >
+          <!-- Share quickactions targets current folder, not resource... -->
+          <!-- <template #actions="{ resource }">
+            <quick-actions
+              :class="resource.preview"
+              class="oc-visible@s"
+              :item="resource"
+              :actions="app.quickActions"
+            />
+          </template> -->
+          <template #contextMenuActions="{ resource }">
+            <context-actions :space="space" :items="[resource]" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-tiles>
         <resource-table
           v-else
           id="files-space-table"
@@ -97,8 +130,28 @@
 </template>
 
 <script lang="ts">
+import { debounce, omit } from 'lodash-es'
+import { basename } from 'path'
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  PropType,
+  onBeforeUnmount,
+  onMounted,
+  unref
+} from 'vue'
+import { RouteLocationNamedRaw } from 'vue-router'
 import { mapGetters, mapState, mapActions, mapMutations, useStore } from 'vuex'
-import { debounce } from 'lodash-es'
+import { useGettext } from 'vue3-gettext'
+import { Resource } from 'web-client'
+import {
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  isPublicSpaceResource,
+  isShareSpaceResource,
+  SpaceResource
+} from 'web-client/src/helpers'
 
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../../mixins/fileActions'
@@ -113,44 +166,23 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-
+import { useRoute } from 'web-pkg/src/composables'
+import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
+import { ImageType } from 'web-pkg/src/constants'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension, ImageType } from 'web-pkg/src/constants'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { BreadcrumbItem, breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { createLocationPublic, createLocationSpaces } from '../../router'
-import { useResourcesViewDefaults } from '../../composables'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  PropType,
-  onBeforeUnmount,
-  onMounted,
-  unref
-} from 'vue'
+import { useResourcesViewDefaults, ViewModeConstants } from '../../composables'
 import { ResourceTransfer, TransferType } from '../../helpers/resource'
-import { Resource } from 'web-client'
-import { useRoute } from 'web-pkg/src/composables'
-import { Location } from 'vue-router'
-import {
-  isPersonalSpaceResource,
-  isProjectSpaceResource,
-  isPublicSpaceResource,
-  isShareSpaceResource,
-  SpaceResource
-} from 'web-client/src/helpers'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
 import { FolderLoaderOptions } from '../../services/folder'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import omit from 'lodash-es/omit'
-import { useDocumentTitle } from 'web-pkg/src/composables/appDefaults/useDocumentTitle'
-import { basename } from 'path'
-import { useGettext } from 'vue3-gettext'
+import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink/types'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -170,6 +202,7 @@ export default defineComponent({
     Pagination,
     QuickActions,
     ResourceTable,
+    ResourceTiles,
     SideBar,
     SpaceHeader
   },
@@ -199,13 +232,17 @@ export default defineComponent({
     const store = useStore()
     let loadResourcesEventToken
 
-    const resourceTargetRouteCallback = ({ path, fileId }: CreateTargetRouteOptions): Location => {
+    const resourceTargetRouteCallback = ({
+      path,
+      fileId
+    }: CreateTargetRouteOptions): RouteLocationNamedRaw => {
       const { params, query } = createFileRouteOptions(props.space, { path, fileId })
       if (isPublicSpaceResource(props.space)) {
         return createLocationPublic('files-public-link', { params, query })
       }
       return createLocationSpaces('files-spaces-generic', { params, query })
     }
+
     const hasSpaceHeader = computed(() => {
       // for now the space header is only available in the root of a project space.
       return props.space.driveType === 'project' && props.item === '/'
@@ -334,10 +371,11 @@ export default defineComponent({
 
     return {
       ...resourcesViewDefaults,
-      resourceTargetRouteCallback,
       breadcrumbs,
       hasSpaceHeader,
-      performLoaderTask
+      resourceTargetRouteCallback,
+      performLoaderTask,
+      ViewModeConstants
     }
   },
 
@@ -422,7 +460,7 @@ export default defineComponent({
       }
     },
 
-    rowMounted(resource, component) {
+    rowMounted(resource, component, dimensions) {
       if (!this.displayThumbnails) {
         return
       }
@@ -431,8 +469,8 @@ export default defineComponent({
         unobserve()
         this.loadPreview({
           resource,
-          isPublic: false,
-          dimensions: ImageDimension.Thumbnail,
+          isPublic: isPublicSpaceResource(this.space),
+          dimensions,
           type: ImageType.Thumbnail
         })
       }, 250)
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 4d30dd8c26a..9db59d4566f 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -25,48 +25,29 @@
           </template>
         </no-content-message>
         <div v-else class="spaces-list oc-px-m oc-mt-l">
-          <resource-tiles :data="spaces" @contextmenu-clicked="showContextMenu">
-            <template #image="{ item }">
+          <resource-tiles :data="spaces">
+            <template #image="{ resource }">
               <img
-                v-if="imageContentObject[item.id]"
+                v-if="imageContentObject[resource.id]"
                 class="space-image tile-image oc-rounded-top"
-                :src="imageContentObject[item.id]['data']"
+                :src="imageContentObject[resource.id]['data']"
                 alt=""
               />
             </template>
-            <template #actions="{ item }">
+            <template #actions="{ resource }">
               <div>
                 <oc-button
                   v-oc-tooltip="showSpaceMemberLabel"
                   :aria-label="showSpaceMemberLabel"
                   appearance="raw"
-                  @click="openSidebarSharePanel(item)"
+                  @click="openSidebarSharePanel(resource)"
                 >
                   <oc-icon name="group" fill-type="line" />
                 </oc-button>
               </div>
-              <div>
-                <oc-button
-                  :id="`space-context-btn-${item.getDomSelector()}`"
-                  :ref="`spaceContextBtn-${item.getDomSelector()}`"
-                  v-oc-tooltip="contextMenuLabel"
-                  :aria-label="contextMenuLabel"
-                  appearance="raw"
-                  @click.stop.prevent="resetDropPosition($event, item)"
-                >
-                  <oc-icon name="more-2" />
-                </oc-button>
-                <oc-drop
-                  :ref="`spaceContextDrop-${item.getDomSelector()}`"
-                  :drop-id="`space-context-drop-${item.getDomSelector()}`"
-                  close-on-click
-                  mode="manual"
-                  :options="{ delayHide: 0 }"
-                  padding-size="small"
-                >
-                  <space-context-actions :space="item" :items="[item]" />
-                </oc-drop>
-              </div>
+            </template>
+            <template #contextMenuActions="{ resource }">
+              <space-context-actions :space="resource" :items="[resource]" />
             </template>
           </resource-tiles>
         </div>
@@ -102,13 +83,13 @@ import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 
 export default defineComponent({
   components: {
-    ResourceTiles,
-    FilesViewWrapper,
-    SideBar,
     AppBar,
     AppLoadingSpinner,
     CreateSpace,
+    FilesViewWrapper,
     NoContentMessage,
+    ResourceTiles,
+    SideBar,
     SpaceContextActions
   },
   setup() {
@@ -164,9 +145,6 @@ export default defineComponent({
     showSpaceMemberLabel() {
       return this.$gettext('Show members')
     },
-    contextMenuLabel() {
-      return this.$gettext('Show context menu')
-    },
     hasCreatePermission() {
       return this.$permissionManager.hasSpaceManagement()
     }
@@ -201,7 +179,7 @@ export default defineComponent({
           loadPreview({
             resource,
             isPublic: false,
-            dimensions: ImageDimension.Preview,
+            dimensions: ImageDimension.Tile,
             server: configurationManager.serverUrl,
             userId: this.user.id,
             token: this.accessToken
@@ -223,41 +201,6 @@ export default defineComponent({
   },
   methods: {
     ...mapMutations('Files', ['SET_FILE_SELECTION']),
-
-    resetDropPosition(event, item) {
-      const drop = this.$refs[`spaceContextDrop-${item.getDomSelector()}`]
-
-      if (drop === undefined) {
-        return
-      }
-      this.displayPositionedDropdown(drop, event, item)
-    },
-    showContextMenu(_row, event, item) {
-      event.preventDefault()
-      const drop = this.$refs[`spaceContextDrop-${item.getDomSelector()}`]
-
-      this.displayPositionedDropdown(drop, event, item)
-    },
-    displayPositionedDropdown(dropdown, event, item) {
-      const contextMenuButtonPos =
-        this.$refs[`spaceContextBtn-${item.getDomSelector()}`].$el.getBoundingClientRect()
-
-      if (!dropdown || !contextMenuButtonPos) {
-        return
-      }
-
-      dropdown.tippy.setProps({
-        getReferenceClientRect: () => ({
-          width: 0,
-          height: 0,
-          top: event.clientY,
-          bottom: event.clientY,
-          left: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x,
-          right: event.type === 'contextmenu' ? event.clientX : contextMenuButtonPos.x
-        })
-      })
-      dropdown.show()
-    },
     openSidebarSharePanel(space: SpaceResource) {
       this.SET_FILE_SELECTION([space])
       eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
index b1a60d7d336..2c02598b988 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.ts
@@ -43,7 +43,7 @@ describe('ViewOptions component', () => {
   })
   it('initially does not show a viewmode switcher', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.find('[data-testid="viewmode-switch-buttons"]').exists()).toBeFalsy()
+    expect(wrapper.find('.viewmode-switch-buttons').exists()).toBeFalsy()
   })
   it('shows a viewmode switcher if more than one viewModes are passed', () => {
     const { wrapper } = getWrapper(
@@ -52,7 +52,7 @@ describe('ViewOptions component', () => {
         viewModes: [ViewModeConstants.condensedTable, ViewModeConstants.default]
       }
     )
-    const viewModeSwitchButtons = wrapper.find('[data-testid="viewmode-switch-buttons"]')
+    const viewModeSwitchButtons = wrapper.find('.viewmode-switch-buttons')
     expect(viewModeSwitchButtons.html()).toMatchSnapshot()
   })
 })
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 48ec8d16464..b89aebb5109 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -274,7 +274,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle passes viewModes
       <!--v-if-->
       <!--v-if-->
       <div class="oc-flex">
-        <view-options-stub viewmodes="[object Object],[object Object]"></view-options-stub>
+        <view-options-stub viewmodes="[object Object],[object Object],[object Object]"></view-options-stub>
         <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
index 074389064e5..b8ffee2832e 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.ts.snap
@@ -32,8 +32,8 @@ exports[`ViewOptions component sets the correct initial files page limit 1`] = `
 `;
 
 exports[`ViewOptions component shows a viewmode switcher if more than one viewModes are passed 1`] = `
-<div class="oc-button-group oc-visible@s oc-mr-s">
-  <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to condensed table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
-  <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" label="Switch to default table view" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
+<div class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s">
+  <oc-button-stub appearance="outline" arialabel="Switch to condensed table view" class="resource-table-condensed" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
+  <oc-button-stub appearance="outline" arialabel="Switch to default table view" class="resource-table" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index 97b8d2237ea..4543e19b275 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -18,21 +18,21 @@ const spacesResources = [
   }
 ]
 
-describe('OcTileGrid component', () => {
+describe('ResourceTiles component', () => {
   it('renders an array of spaces correctly', () => {
     const wrapper = getWrapper({ data: spacesResources })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('renders a footer slot', () => {
-    const wrapper = getWrapper({}, { footer: 'Hello, OcTileGrid footer!' })
+    const wrapper = getWrapper({}, { footer: 'Hello, ResourceTiles footer!' })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('emits context menu event upon right click on tile', async () => {
+  it('emits fileClick event upon click on tile', async () => {
     const wrapper = getWrapper({ data: spacesResources })
-    await wrapper.find('oc-tile').trigger('contextmenu')
-    expect(wrapper.emitted().contextmenuClicked.length).toBe(1)
+    await wrapper.find('oc-tile').trigger('click')
+    expect(wrapper.emitted().click).toBeTruthy()
   })
 
   function getWrapper(props = {}, slots = {}) {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index a8aa23bb736..d5fdae990fd 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OcTileGrid component renders a footer slot 1`] = `
+exports[`ResourceTiles component renders a footer slot 1`] = `
 <div>
-  <oc-list class="oc-tiles oc-flex"></oc-list> <!-- @slot Footer of the tiles list --> Hello, OcTileGrid footer!
+  <oc-list class="oc-tiles oc-flex"></oc-list> <!-- @slot Footer of the tiles list --> Hello, ResourceTiles footer!
 </div>
 `;
 
-exports[`OcTileGrid component renders an array of spaces correctly 1`] = `
+exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
 <div>
   <oc-list class="oc-tiles oc-flex">
     <li class="oc-tiles-item">
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 27050f28030..986cfd6c505 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,6 +1,6 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
-import { mock, mockDeep } from 'jest-mock-extended'
-import { SpaceResource } from 'web-client/src/helpers'
+import { mock } from 'jest-mock-extended'
+
 import {
   createStore,
   defaultPlugins,
@@ -11,6 +11,29 @@ import {
   RouteLocation
 } from 'web-test-helpers'
 
+const spacesResources = [
+  {
+    id: '1',
+    name: 'Some space',
+    driveType: 'project',
+    description: 'desc',
+    path: '',
+    type: 'space',
+    isFolder: true,
+    getDriveAliasAndItem: () => '1'
+  },
+  {
+    id: '2',
+    name: 'Some other space',
+    driveType: 'project',
+    description: 'desc',
+    path: '',
+    type: 'space',
+    isFolder: true,
+    getDriveAliasAndItem: () => '2'
+  }
+]
+
 describe('Projects view', () => {
   it('appBar always present', () => {
     const { wrapper } = getMountedWrapper()
@@ -32,20 +55,7 @@ describe('Projects view', () => {
       expect(wrapper.find('.no-content-message').exists()).toBeTruthy()
     })
     it('lists all available project spaces', async () => {
-      const spaces = [
-        mockDeep<SpaceResource>({
-          id: '1',
-          name: 'Some space',
-          driveType: 'project',
-          description: 'desc'
-        }),
-        mockDeep<SpaceResource>({
-          id: '2',
-          name: 'Some other space',
-          driveType: 'project',
-          description: 'desc'
-        })
-      ]
+      const spaces = spacesResources
       const { wrapper } = getMountedWrapper({ spaces })
       await wrapper.vm.loadResourcesTask.last
       // "space" is undefined for "space-context-actions", seems to be a bug because it's definitely not
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 2aac4162d09..7a29a8d9648 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -9,10 +9,10 @@ exports[`Projects view different files view states lists all available project s
         <div>
           <ul class="oc-list oc-my-rm oc-mx-rm oc-tiles oc-flex">
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="undefined" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="undefined" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
           </ul> <!-- @slot Footer of the tiles list -->
         </div>
diff --git a/packages/web-pkg/src/constants.ts b/packages/web-pkg/src/constants.ts
index 6c9864974c2..0c0c673cd39 100644
--- a/packages/web-pkg/src/constants.ts
+++ b/packages/web-pkg/src/constants.ts
@@ -4,6 +4,7 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 
 export abstract class ImageDimension {
   static readonly Thumbnail: [number, number] = [36, 36]
+  static readonly Tile: [number, number] = [1000, 1000]
   static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }
diff --git a/tests/e2e/cucumber/features/smoke/tiles.feature b/tests/e2e/cucumber/features/smoke/tiles.feature
new file mode 100644
index 00000000000..306d7617ffe
--- /dev/null
+++ b/tests/e2e/cucumber/features/smoke/tiles.feature
@@ -0,0 +1,27 @@
+Feature: Tiles
+    As a user
+    I want to view and navigate resources displayed as tiles
+    So that I can identify them better
+
+    Background:
+        Given "Admin" creates following users
+            | id    |
+            | Alice |
+
+    Scenario: Users can navigate web via tiles
+        Given "Admin" creates following users
+            | id    |
+            | Alice |
+        And "Alice" logs in
+        And "Alice" opens the "files" app
+        And "Alice" creates the following resources
+            | resource    | type   |
+            | tile_folder | folder |
+        And "Alice" switches to the tiles-view
+        And "Alice" sees the resources displayed as tiles
+        And "Alice" opens folder "tile_folder"
+        And "Alice" creates the following resources
+            | resource     | type   |
+            | tile_folder2 | folder |
+        And "Alice" sees the resources displayed as tiles
+        And "Alice" logs out
diff --git a/tests/e2e/cucumber/steps/ui/resources.ts b/tests/e2e/cucumber/steps/ui/resources.ts
index 35d180ac9d6..7bd3204173d 100644
--- a/tests/e2e/cucumber/steps/ui/resources.ts
+++ b/tests/e2e/cucumber/steps/ui/resources.ts
@@ -262,6 +262,25 @@ When(
   }
 )
 
+When(
+  '{string} switches to the tiles-view',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    await resourceObject.switchToTilesViewMode()
+  }
+)
+
+When(
+  '{string} sees the resources displayed as tiles',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const isVisible = await resourceObject.areResourcesShownAsTiles()
+    expect(isVisible).toBe(true)
+  }
+)
+
 export const processDownload = async (
   stepTable: DataTable,
   pageObject: any,
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 6b31dfb5a35..767a1de974e 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -13,7 +13,8 @@ const downloadFolderButtonSidedBar =
 const downloadButtonBatchAction = '.oc-files-actions-download-archive-trigger'
 const checkBox = `//*[@data-test-resource-name="%s"]//ancestor::tr//input`
 const checkBoxForTrashbin = `//*[@data-test-resource-path="%s"]//ancestor::tr//input`
-export const fileRow = '//ancestor::tr'
+export const fileRow =
+  '//ancestor::*[(contains(@class, "oc-tile-card") or contains(@class, "oc-tbody-tr"))]'
 export const resourceNameSelector = `[data-test-resource-name="%s"]`
 const addNewResourceButton = `#new-file-menu-btn`
 const createNewFolderButton = '#new-folder-btn'
@@ -60,6 +61,7 @@ const tagInInputForm =
   '//span[contains(@class, "vs__selected")]//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'
 
 export const clickResource = async ({
   page,
@@ -79,8 +81,7 @@ export const clickResource = async ({
       )
     ])
 
-    // toDo: remove me
-    // @jannik: please have a look here what we can wait for to be sure that it's there
+    // TODO: Refactor so the line below becomes unnecessary
     await new Promise((resolve) => setTimeout(resolve, 250))
   }
 }
@@ -766,6 +767,21 @@ export const getDisplayedResourcesFromFilesList = async (page): Promise<string[]
   return files
 }
 
+export interface switchViewModeArgs {
+  page: Page
+  target: 'resource-table' | 'resource-tiles'
+}
+
+export const clickViewModeToggle = async (args: switchViewModeArgs): Promise<void> => {
+  const { page, target } = args
+  await page.locator(`.viewmode-switch-buttons .${target}`).click()
+}
+
+export const getTilesVisibility = async (args): Promise<boolean> => {
+  const { page } = args
+  return await page.locator(resourcesAsTiles).isVisible()
+}
+
 export const showHiddenResources = async (page): Promise<void> => {
   await page.locator(filesViewOptionButton).click()
   await page.locator(hiddenFilesToggleButton).click()
diff --git a/tests/e2e/support/objects/app-files/resource/index.ts b/tests/e2e/support/objects/app-files/resource/index.ts
index ac3e66fa954..2bb323ec347 100644
--- a/tests/e2e/support/objects/app-files/resource/index.ts
+++ b/tests/e2e/support/objects/app-files/resource/index.ts
@@ -40,7 +40,9 @@ import {
   clickResourceTag,
   getDisplayedResourcesArgs,
   getDisplayedResourcesFromFilesList,
-  resourceTagsArgs
+  resourceTagsArgs,
+  clickViewModeToggle,
+  getTilesVisibility
 } from './actions'
 
 export class Resource {
@@ -54,7 +56,7 @@ export class Resource {
     const startUrl = this.#page.url()
     await createResources({ ...args, page: this.#page })
     await this.#page.goto(startUrl)
-    await this.#page.waitForSelector('.files-table')
+    await this.#page.waitForSelector('#files-view')
   }
 
   async upload(args: Omit<uploadResourceArgs, 'page'>): Promise<void> {
@@ -184,6 +186,14 @@ export class Resource {
     await clickResource({ page: this.#page, path: resource })
   }
 
+  async switchToTilesViewMode(): Promise<void> {
+    await clickViewModeToggle({ page: this.#page, target: 'resource-tiles' })
+  }
+
+  async areResourcesShownAsTiles(): Promise<boolean> {
+    return await getTilesVisibility({ page: this.#page })
+  }
+
   async showHiddenFiles(): Promise<void> {
     await showHiddenResources(this.#page)
   }