diff --git a/apps/files/src/components/FilesListFilter/FilesListFilter.vue b/apps/files/src/components/FilesListFilter/FilesListFilter.vue
new file mode 100644
index 0000000000000..952c9da96b1f5
--- /dev/null
+++ b/apps/files/src/components/FilesListFilter/FilesListFilter.vue
@@ -0,0 +1,59 @@
+<template>
+	<NcActions force-menu
+		:type="isActive ? 'primary' : 'tertiary'"
+		:menu-name="filterName">
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<template v-if="isActive">
+			<NcActionButton class="files-list-filter__clear-button" close-after-click @click="$emit('reset-filter')">
+				{{ t('files', 'Clear filter') }}
+			</NcActionButton>
+			<NcActionSeparator />
+		</template>
+		<slot />
+	</NcActions>
+</template>
+
+<script lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+
+export default defineComponent({
+	name: 'FilesListFilter',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+	},
+
+	props: {
+		isActive: {
+			type: Boolean,
+			required: true,
+		},
+
+		filterName: {
+			type: String,
+			required: true,
+		},
+	},
+
+	emits: ['reset-filter'],
+
+	methods: {
+		t,
+	},
+})
+</script>
+
+<style scoped>
+.files-list-filter__clear-button :deep(.action-button__text) {
+	color: var(--color-error-text);
+}
+</style>
diff --git a/apps/files/src/components/FilesListFilter/FilesListFilterName.vue b/apps/files/src/components/FilesListFilter/FilesListFilterName.vue
new file mode 100644
index 0000000000000..fd00e1fbe784c
--- /dev/null
+++ b/apps/files/src/components/FilesListFilter/FilesListFilterName.vue
@@ -0,0 +1,98 @@
+<template>
+	<NcTextField :value.sync="query"
+		:label="t('files', 'Filename')"
+		show-trailing-button
+		:trailing-button-label="t('files', 'Clear filter')"
+		@trailing-button-click="resetFilter" />
+</template>
+
+<script lang="ts">
+import type { Node } from '@nextcloud/files'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import debounce from 'debounce'
+import useFilesFilter from '../../composables/useFilesFilter.ts'
+
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+export default defineComponent({
+	name: 'FilesListFilterName',
+
+	components: {
+		NcTextField,
+	},
+
+	props: {
+	},
+
+	setup() {
+		return {
+			...useFilesFilter(),
+		}
+	},
+
+	data() {
+		return {
+			query: '',
+		}
+	},
+
+	computed: {
+		debouncedSetFilter() {
+			return debounce(this.setFilter, 200)
+		},
+	},
+
+	watch: {
+		query(newValue: string) {
+			if (!newValue) {
+				// Remove filter if no query is set
+				this.deleteFilter('files-filter-name')
+			} else {
+				this.debouncedSetFilter()
+			}
+		},
+	},
+
+	mounted() {
+		subscribe('nextcloud:unified-search.search', this.onSearch)
+		subscribe('nextcloud:unified-search.reset', this.resetFilter)
+	},
+
+	beforeDestroy() {
+		this.deleteFilter('files-filter-name')
+
+		unsubscribe('nextcloud:unified-search.search', this.onSearch)
+		unsubscribe('nextcloud:unified-search.reset', this.resetFilter)
+	},
+
+	methods: {
+		t,
+
+		setFilter() {
+			this.addFilter({
+				id: 'files-filter-name',
+				filter: (node: Node) => {
+					if (!this.query) {
+						return true
+					}
+
+					const query = this.query.toLowerCase()
+					return (node.attributes.displayName ?? node.basename).toLowerCase().includes(query)
+				},
+			})
+		},
+
+		onSearch({ query }: { query: string }) {
+			this.query = query ?? ''
+		},
+
+		resetFilter() {
+			this.query = ''
+		},
+	},
+})
+</script>
diff --git a/apps/files/src/components/FilesListFilter/FilesListFilterTime.vue b/apps/files/src/components/FilesListFilter/FilesListFilterTime.vue
new file mode 100644
index 0000000000000..ead67242ccd04
--- /dev/null
+++ b/apps/files/src/components/FilesListFilter/FilesListFilterTime.vue
@@ -0,0 +1,154 @@
+<template>
+	<FilesListFilter :is-active="isActive"
+		:filter-name="label"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiCalendarRange" />
+		</template>
+		<NcActionButton v-for="preset of timePresets"
+			:key="preset.id"
+			type="radio"
+			close-after-click
+			:model-value.sync="selectedOption"
+			:value="preset.id">
+			{{ preset.label }}
+		</NcActionButton>
+		<!-- TODO: Custom time range -->
+	</FilesListFilter>
+</template>
+
+<script lang="ts">
+import type { Node } from '@nextcloud/files'
+
+import { mdiCalendarRange } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import FilesListFilter from './FilesListFilter.vue'
+
+import useFilesFilter from '../../composables/useFilesFilter'
+
+const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+
+const timePresets = [
+	{
+		id: 'today',
+		label: t('files', 'Today'),
+		filter: (time: number) => time > startOfToday(),
+	},
+	{
+		id: 'last-7',
+		label: t('files', 'Last 7 days'),
+		filter: (time: number) => time > (startOfToday() - (7 * 24 * 60 * 60 * 1000)),
+	},
+	{
+		id: 'last-30',
+		label: t('files', 'Last 30 days'),
+		filter: (time: number) => time > (startOfToday() - (30 * 24 * 60 * 60 * 1000)),
+	},
+	{
+		id: 'this-year',
+		label: t('files', 'This year ({year})', { year: (new Date()).getFullYear() }),
+		filter: (time: number) => time > (new Date(startOfToday())).setMonth(0, 1),
+	},
+	{
+		id: 'last-year',
+		label: t('files', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
+		filter: (time: number) => (time > (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1)) && (time < (new Date(startOfToday())).setMonth(0, 1)),
+	},
+] as const
+
+export default defineComponent({
+	components: {
+		FilesListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+
+	props: {
+	},
+
+	setup() {
+		return {
+			...useFilesFilter(),
+			timePresets,
+
+			// icons used in template
+			mdiCalendarRange,
+		}
+	},
+
+	data() {
+		return {
+			selectedOption: null as (typeof timePresets)[number]['id'] | null,
+			timeRangeEnd: null as number | null,
+			timeRangeStart: null as number | null,
+		}
+	},
+
+	computed: {
+		/**
+		 * Is the filter currently active
+		 */
+		isActive() {
+			return this.selectedOption !== null
+		},
+
+		currentPreset() {
+			return timePresets.find(({ id }) => id === this.selectedOption) ?? null
+		},
+
+		label() {
+			if (this.currentPreset) {
+				return this.currentPreset.label
+			}
+			return t('files', 'Modified')
+		},
+	},
+
+	watch: {
+		selectedOption() {
+			if (this.selectedOption === null) {
+				this.deleteFilter('files-filter-time')
+			} else {
+				const preset = this.currentPreset
+				this.addFilter({
+					id: 'files-filter-time',
+					filter: (node: Node) => {
+						if (!node.mtime) {
+							return false
+						}
+
+						const mtime = node.mtime.getTime()
+						if (preset) {
+							return preset.filter(mtime)
+						} else {
+							return (!this.timeRangeStart || this.timeRangeStart < mtime) && (!this.timeRangeEnd || this.timeRangeEnd > mtime)
+						}
+					},
+				})
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		resetFilter() {
+			this.selectedOption = null
+			this.timeRangeEnd = null
+			this.timeRangeStart = null
+		},
+	},
+})
+</script>
+
+<style scoped lang="scss">
+.files-list-filter-time {
+	&__clear-button :deep(.action-button__text) {
+		color: var(--color-error-text);
+	}
+}
+</style>
diff --git a/apps/files/src/components/FilesListFilter/FilesListFilterType.vue b/apps/files/src/components/FilesListFilter/FilesListFilterType.vue
new file mode 100644
index 0000000000000..023a2389f809d
--- /dev/null
+++ b/apps/files/src/components/FilesListFilter/FilesListFilterType.vue
@@ -0,0 +1,196 @@
+<template>
+	<FilesListFilter class="files-list-filter-type"
+		:is-active="isActive"
+		:filter-name="label"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiFile" />
+		</template>
+		<NcActionButton v-for="fileType of availableTypes"
+			:key="fileType.id"
+			type="checkbox"
+			:model-value="selectedOptions.includes(fileType.id)"
+			@click="toggleOption(fileType.id)">
+			<template #icon>
+				<NcIconSvgWrapper :path="fileType.icon" :style="{ color: fileType.color }" />
+			</template>
+			{{ fileType.name }}
+		</NcActionButton>
+	</FilesListFilter>
+</template>
+
+<script lang="ts">
+import type { Node } from '@nextcloud/files'
+
+import { mdiFile, mdiFileDocument, mdiFilePdfBox, mdiFilePresentationBox, mdiFileTableBox, mdiFolder, mdiImage, mdiMovie, mdiMusic } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import FilesListFilter from './FilesListFilter.vue'
+import useFilesFilter from '../../composables/useFilesFilter'
+
+const availableTypes = [
+	{
+		id: 'document',
+		name: t('files', 'Documents'),
+		icon: mdiFileDocument,
+		color: '#49abea',
+		mime: ['x-office/document'],
+	},
+	{
+		id: 'spreadsheet',
+		name: t('files', 'Spreadsheets'),
+		icon: mdiFileTableBox,
+		color: '#9abd4e',
+		mime: ['x-office/spreadsheet'],
+	},
+	{
+		id: 'presentation',
+		name: t('files', 'Presentations'),
+		icon: mdiFilePresentationBox,
+		color: '#f0965f',
+		mime: ['x-office/presentation'],
+	},
+	{
+		id: 'folder',
+		name: t('files', 'Folders'),
+		icon: mdiFolder,
+		color: 'var(--color-primary-element)',
+		mime: ['httpd/unix-directory'],
+	},
+	{
+		id: 'pdf',
+		name: t('files', 'PDFs'),
+		icon: mdiFilePdfBox,
+		color: '#dc5047',
+		mime: ['application/pdf'],
+	},
+	{
+		id: 'audio',
+		name: t('files', 'Audio'),
+		icon: mdiMusic,
+		mime: ['audio'],
+		color: undefined,
+	},
+	{
+		id: 'image',
+		name: t('files', 'Pictures and images'),
+		icon: mdiImage,
+		mime: ['image'],
+		color: undefined,
+	},
+	{
+		id: 'video',
+		name: t('files', 'Videos'),
+		icon: mdiMovie,
+		mime: ['video'],
+		color: undefined,
+	},
+] as const
+
+export default defineComponent({
+	name: 'FilesListFilterType',
+
+	components: {
+		FilesListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+
+	setup() {
+		return {
+			...useFilesFilter(),
+
+			availableTypes,
+			mdiFile,
+		}
+	},
+
+	data() {
+		return {
+			selectedOptions: [] as (typeof availableTypes)[number]['id'][],
+		}
+	},
+
+	computed: {
+		isActive() {
+			return this.selectedOptions.length > 0
+		},
+
+		label() {
+			const selected = availableTypes.filter(({ id }) => this.selectedOptions.includes(id))
+			if (selected.length === 0) {
+				return t('files', 'Type')
+			} else {
+				return selected.map(({ name }) => name).join(', ')
+			}
+		},
+
+		/**
+		 * List of mime types selected for filtering
+		 */
+		mimeList() {
+			const options = this.availableTypes.filter(({ id }) => this.selectedOptions.includes(id))
+			return options.reduce((previous: string[], current) => [...previous, ...current.mime], [] as string[])
+		},
+	},
+
+	watch: {
+		mimeList() {
+			if (this.mimeList.length === 0) {
+				this.deleteFilter('files-filter-type')
+				return
+			}
+
+			this.addFilter({
+				id: 'files-filter-type',
+				filter: (node: Node) => {
+					if (!node.mime) {
+						return false
+					}
+
+					const mime = node.mime.toLowerCase()
+					if (this.mimeList.includes(mime)) {
+						return true
+					} else if (this.mimeList.includes(window.OC.MimeTypeList.aliases[mime])) {
+						return true
+					} else if (this.mimeList.includes(mime.split('/')[0])) {
+						return true
+					}
+					return false
+				},
+			})
+		},
+	},
+
+	methods: {
+		t,
+
+		resetFilter() {
+			this.selectedOptions = []
+		},
+
+		/**
+		 * Toggle option from selected option
+		 * @param option The option ID to toggle
+		 */
+		toggleOption(option: typeof this.selectedOptions[number]) {
+			const idx = this.selectedOptions.findIndex((id) => id === option)
+			if (idx !== -1) {
+				this.selectedOptions.splice(idx, 1)
+			} else {
+				this.selectedOptions.push(option)
+			}
+		},
+	},
+})
+</script>
+
+<style>
+.files-list-filter-type {
+	max-width: 220px;
+}
+</style>
diff --git a/apps/files/src/components/FilesListFilter/FilesListFilters.vue b/apps/files/src/components/FilesListFilter/FilesListFilters.vue
index b7752e9befe13..275634d058363 100644
--- a/apps/files/src/components/FilesListFilter/FilesListFilters.vue
+++ b/apps/files/src/components/FilesListFilter/FilesListFilters.vue
@@ -1,5 +1,8 @@
 <template>
 	<Fragment>
+		<FilesListFilterType ref="filters[]" />
+		<FilesListFilterTime ref="filters[]" />
+		<FilesListFilterName ref="filters[]" />
 	</Fragment>
 </template>
 
@@ -9,8 +12,19 @@ import type { PropType } from 'vue'
 
 import { Fragment } from 'vue-frag'
 import { defineComponent } from 'vue'
+import FilesListFilterTime from './FilesListFilterTime.vue'
+import FilesListFilterType from './FilesListFilterType.vue'
+import FilesListFilterName from './FilesListFilterName.vue'
 
 export default defineComponent({
+	name: 'FilesListFilters',
+
+	components: {
+		Fragment,
+		FilesListFilterTime,
+		FilesListFilterType,
+		FilesListFilterName,
+	},
 
 	props: {
 		currentView: {