diff --git a/css/navigate.css b/css/navigate.css
deleted file mode 100644
index 5f5c9d7b..00000000
--- a/css/navigate.css
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
- 
-#search_header {
-	width: 100%;
-	position: absolute;
-}
-
-#search_header div {
-	left: 0;
-	right: 0;
-	top: 0;
-	margin: 5px;
-}
-
-#search_input {
-	width: 100%;
-}
-
-#search_error {
-	text-align: center;
-	color: #f00;
-	margin: 20px;
-}
-
-.search_checkbox {
-	margin-right: 10px !important;
-	opacity: 0.8;
-}
-
-.search_checkbox_sub {
-	margin-right: 10px !important;
-	opacity: 0.65;
-}
-
-.search_input_sub {
-	margin-right: 10px !important;
-	opacity: 0.65;
-}
-
-.search_tags_sub {
-	margin-right: 10px !important;
-	width: 200px;
-	opacity: 0.65;
-}
-
-.search_input_sub_small {
-	width: 70px;
-}
-
-.search_icon {
-	background-image: url('/apps/fulltextsearch/img/fulltextsearch_black.svg');
-}
-
-A.icon-fts {
-	text-indent: 25px;
-}
-
-a.ulsub {
-	padding: 0px 12px 0 12px !important;
-}
-
-/**
-
-*/
-#search_result {
-}
-
-.provider_header {
-	margin-bottom: 35px;
-}
-
-.provider_result {
-}
-
-#noresult {
-	font-style: italic;
-	position: absolute;
-	left: 100px;
-}
-
diff --git a/js/navigate.js b/js/navigate.js
deleted file mode 100644
index 3ac1f049..00000000
--- a/js/navigate.js
+++ /dev/null
@@ -1,495 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-
-/** global: OCA */
-/** global: _ */
-
-var fullTextSearch = OCA.FullTextSearch.api;
-
-
-var elements = {
-	searchTimeout: null,
-	search_input: null,
-	search_submit: null,
-	search_result: null,
-	search_json: null
-};
-
-var Navigate = function () {
-	this.init();
-};
-
-Navigate.prototype = {
-
-	currentTagsResult: {},
-	selectedTags: {},
-
-	init: function () {
-		var self = this;
-
-		elements.search_input = $('#search_input');
-		elements.search_submit = $('#search_submit');
-		elements.search_result = $('#search_result');
-		elements.search_panels = $('#search_navigation');
-//		elements.search_json = $('#search_json');
-		elements.divHeader = $('#search_header');
-		box_elements.searchError = $('#search_error');
-
-		//	fullTextSearch.setEntryTemplate($('#template_entry'), self);
-		fullTextSearch.setResultContainer(elements.search_result);
-
-		elements.search_input.on('input', this.navigateTimedSearch);
-		// function () {
-		// 	self.resetSearch();
-		// 	if (elements.searchTimeout === null && self.initSearch()) {
-		// 		elements.searchTimeout = _.delay(function () {
-		// 			self.initSearch();
-		// 			elements.searchTimeout = null;
-		// 		}, 3000);
-		// 	}
-		// });
-
-		//
-		// $(document).keypress(function (e) {
-		// 	if (e.which === 13) {
-		// 		self.initSearch(true);
-		// 	}
-		// });
-
-		self.initPanels();
-	},
-
-
-	navigateTimedSearch: function () {
-
-		if (curr.lastSearchTimer !== null) {
-			window.clearTimeout(curr.lastSearchTimer);
-		}
-
-		curr.lastSearchTimer = window.setTimeout(function () {
-			OCA.FullTextSearch.navigate.initSearch();
-		}, settings.searchEntryTimer);
-
-		if (curr.lastRequestTimer === null) {
-			curr.lastRequestTimer = window.setTimeout(function () {
-				OCA.FullTextSearch.navigate.initSearch();
-			}, settings.searchRequestTimer);
-		}
-	},
-
-
-	initPanels: function () {
-		var self = this;
-		$.ajax({
-			method: 'GET',
-			url: OC.generateUrl('/apps/fulltextsearch/navigation/panels')
-		}).done(function (res) {
-			self.displayPanels(res);
-		});
-	},
-
-
-	displayPanels: function (data) {
-		var self = this;
-
-		var ak = Object.keys(data);
-		for (var i = 0; i < ak.length; i++) {
-			var providerAppId = ak[i];
-			var title = data[ak[i]]['title'];
-			var options = data[ak[i]]['options'];
-			var css = data[ak[i]]['css'];
-			var icon = data[ak[i]]['icon'];
-			var providerId = data[ak[i]]['provider'];
-
-			if (css !== '') {
-				OC.addStyle(providerAppId, css);
-			}
-
-			var li = $('<li>', {class: (nav.options !== undefined) ? 'collapsible open' : ''});
-			var aIcon = $('<a>', {
-				href: '#',
-				class: (icon !== undefined) ? icon : 'search_icon'
-			});
-			aIcon.addClass('icon-fts').text(title);
-
-			var ul = $('<ul>');
-			// if (nav.options !== undefined) {
-
-			aIcon.on('click', function () {
-				var li = $(this).closest('li');
-				if (li.hasClass('open')) {
-					li.removeClass('open');
-				} else {
-					li.addClass('open');
-				}
-			});
-
-			for (var j = 0; j < options.length; j++) {
-				var sub = options[j];
-				self.displayPanelCheckbox(ul, sub);
-				self.displayPanelInput(ul, sub);
-				self.displayPanelTags(ul, sub);
-				self.displayPanelSearch(providerAppId, ul, sub);
-				//
-				// <p id="tag_filter" class="open">
-				// 		<input value="" style="display: none;" type="text">
-				// 		<ul class="tagit ui-widget ui-widget-content ui-corner-all">
-				// 		<li class="tagit-new">
-				// 		<input class="ui-widget-content ui-autocomplete-input"
-				// placeholder="Filter by tag" autocomplete="off" type="text"> <span role="status"
-				// aria-live="polite" class="ui-helper-hidden-accessible"> 1 result is available,
-				// use up and down arrow keys to navigate.</span></li> <li class="tagit-choice
-				// ui-widget-content ui-state-default ui-corner-all"> <span
-				// class="tagit-label">test</span><a class="close"><span class="text-icon">×</span>
-				// <span class="ui-icon ui-icon-close"></span></a></li> <li class="tagit-choice
-				// ui-widget-content ui-state-default ui-corner-all"> <span
-				// class="tagit-label">perdu</span><a class="close"><span class="text-icon">×</span>
-				// <span class="ui-icon ui-icon-close"></span></a></li></ul> </p>
-
-
-			}
-			// }
-
-			li.append(aIcon);
-			var aInput = $('<input>', {
-				class: 'search_checkbox',
-				type: 'checkbox',
-				'data-provider': ak[i],
-				'data-provider-id': providerId
-			});
-			aInput.change(function () {
-				self.initSearch();
-			});
-
-			li.append(aInput);
-			li.append(ul);
-
-			elements.search_panels.append(li);
-		}
-
-	},
-
-
-	displayPanelOptionTitle: function (sub) {
-		return $('<a>', {
-			href: '#',
-			class: 'ulsub',
-			text: sub.title
-		});
-	},
-
-
-	displayPanelCheckbox: function (ul, sub) {
-
-		if (sub.type !== 'checkbox') {
-			return;
-		}
-
-		var self = this;
-		var subA = this.displayPanelOptionTitle(sub);
-		var subAInput = $('<input>', {
-			class: 'search_checkbox_sub',
-			type: 'checkbox',
-			'data-option': sub.name
-		});
-		subAInput.change(function () {
-			self.initSearch();
-		});
-
-		ul.append($('<li>').append(subA).append(subAInput));
-	},
-
-
-	displayPanelInput: function (ul, sub) {
-		if (sub.type !== 'input') {
-			return;
-		}
-
-		var self = this;
-		var subA = this.displayPanelOptionTitle(sub);
-		var subAInput = $('<input>', {
-			class: 'search_input_sub search_input_sub_' + sub.size,
-			type: 'text',
-			placeholder: sub.placeholder,
-			'data-option': sub.name
-		});
-		subAInput.on('input', function () {
-			self.initSearch();
-		});
-
-		ul.append($('<li>').append(subA).append(subAInput));
-	},
-
-
-	displayPanelTags: function (ul, sub) {
-		if (sub.type !== 'tags') {
-			return;
-		}
-
-		var self = this;
-		var subAInput = $('<input>', {
-			id: sub.name,
-			class: 'search_tags_sub',
-			type: 'text',
-			placeholder: sub.title,
-			list: sub.name + '_datalist',
-			'data-option': sub.name
-		});
-
-		var subADataList = $('<datalist>', {
-			id: sub.name + '_datalist'
-		});
-
-		sub.list.forEach(function (item) {
-			subADataList.append($('<option>', {value: item}));
-		});
-
-
-		/**
-		 * <div class="systemTagsInfoView">
-		 *       <div class="systemTagsInputFieldContainer">
-		 *           <div id="s2id_autogen15" class="select2-container select2-container-multi
-		 * systemTagsInputField systemtags-select2-container">
-		 *               <ul class="select2-choices">
-		 *                   <li class="select2-search-choice">
-		 *                       <div>
-		 *                           <span class="label">dsfsdfds</span>
-		 *                       </div>
-		 *                       <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
-		 *                   </li>
-		 *               </ul>
-		 *           </div>
-		 *           <input class="systemTagsInputField select2-offscreen" name="tags"
-		 * value="5,4,3,1,2,6" tabindex="-1" type="hidden">
-		 *       </div>
-		 * </div>
-		 */
-		// subAInput.on('change', function (e) {
-		// 	var div = $(this);
-		// 	if (e.which === 13 && div.val() !== '') {
-		// 		self.selectPanelTags($(this).attr('id'));
-		// 	}
-		//
-		//
-		// 	var url = '/apps/' + div.attr('data-provider');
-		// 	var route = JSON.parse(div.attr('data-route'));
-		//
-		// 	route.url = url + route.url;
-		// 	self.quickSearch(route, div.val(), function (res) {
-		// 		self.resultTagsSearch(div, res);
-		// 	});
-		// });
-
-		ul.append($('<li>').append(subAInput).append(subADataList));
-	},
-
-	displayPanelSearch: function (appId, ul, sub) {
-		var self = this;
-
-		if (sub.type !== 'search') {
-			return;
-		}
-
-		var subAInput = $('<input>', {
-			id: sub.name,
-			class: 'search_tags_sub',
-			type: 'text',
-			placeholder: sub.title,
-			list: sub.name + '_datalist',
-			'data-option': sub.name,
-			'data-provider': appId,
-			'data-route': JSON.stringify(sub.route)
-		});
-
-		var subADataList = $('<datalist>', {
-			id: sub.name + '_datalist'
-		});
-
-
-		subAInput.on('keypress', function (e) {
-			var div = $(this);
-			if (e.which === 13 && div.val() !== '') {
-				self.selectPanelTags($(this).attr('id'));
-			}
-
-
-			var url = '/apps/' + div.attr('data-provider');
-			var route = JSON.parse(div.attr('data-route'));
-
-			route.url = url + route.url;
-			self.quickSearch(route, div.val(), function (res) {
-				self.resultTagsSearch(div, res);
-			});
-		});
-
-		ul.append($('<li>').append(subAInput).append(subADataList));
-	},
-
-
-	// selectPanelTags: function (panelId) {
-	// 	if (this.currentTagsResult === undefined) {
-	// 		return;
-	// 	}
-	//
-	// 	var tags = this.currentTagsResult[panelId];
-	// 	if (tags.length === 0) {
-	// 		return;
-	// 	}
-	//
-	// 	if (this.selectedTags[panelId] === undefined)
-	// 		this.selectedTags[panelId] = [];
-	// 	this.selectedTags[panelId].push(tags[0]);
-	//
-	// 	console.log('etntree' + JSON.stringify(this.selectedTags[panelId]));
-	// },
-	//
-	//
-	// resultTagsSearch: function (div, res) {
-	// 	this.currentTagsResult[div.attr('id')] = res;
-	// 	var datalistId = div.attr('data-option') + '_datalist';
-	// 	var datalist = $('#' + datalistId);
-	//
-	// 	datalist.empty();
-	// 	res.forEach(function (item) {
-	// 		datalist.append($('<option>', {value: item}));
-	// 	});
-	// },
-
-
-	getProviders: function () {
-		var providers = [];
-		elements.search_panels.find('input').each(function () {
-			if ($(this).hasClass('search_checkbox') && $(this).is(":checked")) {
-				providers.push($(this).attr('data-provider-id'));
-			}
-		});
-
-		if (providers.length === 0) {
-			return 'all';
-		}
-
-		return providers;
-	},
-
-
-	getOptions: function () {
-		var options = {};
-		elements.search_panels.find('input').each(function () {
-			if ($(this).hasClass('search_checkbox_sub')) {
-				options[$(this).attr('data-option')] = (($(this).is(':checked')) ? '1' : '0');
-			}
-
-			if ($(this).hasClass('search_input_sub')) {
-				options[$(this).attr('data-option')] = $(this).val();
-			}
-		});
-
-		return options;
-	},
-
-
-	initSearch: function () {
-		var search = elements.search_input.val();
-
-		if (search.length < 1) {
-			return false;
-		}
-
-		var providers = this.getProviders();
-		var options = this.getOptions();
-
-		this.displayProviderResults(providers);
-
-		var request = {
-			providers: providers,
-			options: options,
-			search: search,
-			page: curr.page
-		};
-
-		fullTextSearch.search(request, this.searchResult);
-		return true;
-	},
-
-
-	quickSearch: function (route, search, callback) {
-		$.ajax({
-			method: route.verb,
-			url: OC.generateUrl(route.url),
-			data: {
-				search: search
-			}
-		}).done(function (res) {
-			if (_.has(res, 'error')) {
-				return;
-			}
-
-			callback(res);
-		});
-	},
-
-
-	displayProviderResults: function (providers) {
-		elements.search_result.children('DIV.provider_header').each(function () {
-			if (providers === 'all' || providers.indexOf($(this).attr('data-id')) > -1) {
-				$(this).stop().slideDown(100).fadeTo(settings.delay_provider, 1);
-			} else if ($(this).css('display') !== 'none') {
-				$(this).stop().fadeTo(settings.delay_provider, 0).slideUp(100);
-			}
-		});
-	},
-
-
-	resetSearch: function () {
-		// if (elements.search_input.val() !== '') {
-		// 	return;
-		// }
-	},
-
-
-	searchResult: function (result) {
-
-		if (elements.search_json !== null) {
-			elements.search_json.text(JSON.stringify(result));
-		}
-
-		// console.log(JSON.stringify(result));
-//			OCA.notification.onFail('Search returned no result');
-//		OCA.notification.onSuccess('Search returned ' + res.meta.size + ' result(s)');
-
-	},
-
-
-	onError: function (message) {
-		console.log('error while searching: ' + message);
-	},
-
-
-	// onEntryGenerated: function (entry) {
-	// 	this.deleteEmptyDiv(entry, '#line1');
-	// 	this.deleteEmptyDiv(entry, '#line2');
-	// },
-
-
-	deleteEmptyDiv: function (entry, divId) {
-		var div = entry.find(divId);
-		if (div.text() === '') {
-			div.remove();
-		}
-	}
-
-
-};
-
-OCA.FullTextSearch.Navigate = Navigate;
-
-
-$(document).ready(function () {
-	OCA.FullTextSearch.navigate = new Navigate();
-});
-
-
-
diff --git a/lib/Controller/NavigationController.php b/lib/Controller/NavigationController.php
index f817d7bc..5a701c5a 100644
--- a/lib/Controller/NavigationController.php
+++ b/lib/Controller/NavigationController.php
@@ -12,15 +12,16 @@
 use OCA\FullTextSearch\AppInfo\Application;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\FullTextSearch\IFullTextSearchManager;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IConfig;
 use OCP\IRequest;
+use OCP\Util;
 
 class NavigationController extends Controller {
 	public function __construct(
 		IRequest $request,
 		private IConfig $config,
-		private IFullTextSearchManager $fullTextSearchManager,
+		private IInitialState $initialStateService,
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}
@@ -35,11 +36,12 @@ public function __construct(
 	 */
 	public function navigate(): TemplateResponse {
 		$themingName = $this->config->getAppValue('theming', 'name', 'Nextcloud');
-		$data = ['themingName' => $themingName];
+		$this->initialStateService->provideInitialState('themingName', $themingName);
 
-		$this->fullTextSearchManager->addJavascriptAPI();
+		Util::addScript(Application::APP_ID, 'fulltextsearch-navigate');
+		Util::addStyle(Application::APP_ID, 'fulltextsearch-navigate');
 
-		return new TemplateResponse(Application::APP_ID, 'navigate', $data);
+		return new TemplateResponse(Application::APP_ID, 'navigate');
 	}
 
 }
diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 7751a8bb..b0151b65 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -36,7 +36,7 @@ public function setConfig(array $save): void {
 		foreach (array_keys($save) as $k) {
 			switch ($k) {
 				case ConfigLexicon::APP_NAVIGATION:
-					$this->appConfig->setAppValueBool($k, $save[$k]);
+					$this->appConfig->setAppValueBool($k, (bool)$save[$k]);
 					break;
 
 				case ConfigLexicon::SEARCH_PLATFORM:
diff --git a/src/Navigate.vue b/src/Navigate.vue
new file mode 100644
index 00000000..265a2fd5
--- /dev/null
+++ b/src/Navigate.vue
@@ -0,0 +1,374 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcContent appName="fulltextsearch">
+		<NcAppNavigation :ariaLabel="t('fulltextsearch', 'Search filters')">
+			<template #search>
+				<NcAppNavigationSearch
+					v-model="search"
+					:label="t('fulltextsearch', 'Search on {theme}', { theme: themingName })"
+					@update:modelValue="triggerSearch()"/>
+			</template>
+
+			<ul class="provider-filters">
+				<li v-for="(panel, appId) in panels" :key="appId" class="provider-filters__provider">
+					<NcCheckboxRadioSwitch
+						type="switch"
+						v-model="providerEnabled[appId]"
+						style="width: 100%"
+						@update:modelValue="onProviderEnabledChange(appId, $event)">
+						{{ panel.title }}
+					</NcCheckboxRadioSwitch>
+
+					<ul v-if="panel.options.length > 0" class="provider-filters__options">
+						<li v-for="option in panel.options" :key="option.name">
+							<NcCheckboxRadioSwitch
+								v-if="option.type === 'checkbox'"
+								type="checkbox"
+								:modelValue="isOptionChecked(appId, option.name)"
+								:placeholder="option.placeholder"
+								style="width: 100%"
+								@update:modelValue="onOptionChange(appId, option.name, $event ? '1' : '0')">
+								{{ option.title }}
+							</NcCheckboxRadioSwitch>
+							<NcTextField
+								v-else-if="option.type === 'input'"
+								:modelValue="getOptionValue(appId, option.name)"
+								:label="option.title"
+								:placeholder="option.placeholder"
+								style="width: 100%"
+								@update:modelValue="onOptionChange(appId, option.name, String($event))" />
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</NcAppNavigation>
+
+		<NcAppContent>
+			<NcEmptyContent v-if="error" :name="t('fulltextsearch', 'Error')" :description="error" />
+
+			<NcEmptyContent v-else-if="!hasSearched" :name="t('fulltextsearch', 'Search for content')" />
+
+			<NcEmptyContent v-else-if="loading && results.length === 0" :name="t('fulltextsearch', 'Searching …')">
+				<template #icon>
+					<NcLoadingIcon :size="64" />
+				</template>
+			</NcEmptyContent>
+
+			<NcEmptyContent v-else-if="totalResultsCount === 0" :name="t('fulltextsearch', 'No results')" />
+
+			<div v-else class="search-results">
+				<section v-for="providerResult in results" :key="providerResult.provider.id" class="search-results__provider">
+					<h3>
+						{{ providerResultTitle(providerResult) }}
+					</h3>
+
+					<ul>
+						<NcListItem
+							v-for="doc in providerResult.documents"
+							:key="doc.id"
+							:name="doc.title"
+							:href="doc.link || undefined"
+							target="_blank"
+							:details="doc.source">
+							<template #subname>
+								{{ firstExcerpt(doc) }}
+							</template>
+						</NcListItem>
+					</ul>
+
+					<div v-if="providerResult.meta.total > pageSize" class="search-results__pagination">
+						<NcButton
+							variant="tertiary"
+							:disabled="(providerPage[providerResult.provider.id] ?? 1) <= 1"
+							@click="changeProviderPage(providerResult, -1)">
+							{{ t('fulltextsearch', 'Previous page') }}
+						</NcButton>
+						<span>{{ providerPage[providerResult.provider.id] ?? 1 }} / {{ maxPage(providerResult) }}</span>
+						<NcButton
+							variant="tertiary"
+							:disabled="(providerPage[providerResult.provider.id] ?? 1) >= maxPage(providerResult)"
+							@click="changeProviderPage(providerResult, 1)">
+							{{ t('fulltextsearch', 'Next page') }}
+						</NcButton>
+					</div>
+				</section>
+			</div>
+		</NcAppContent>
+	</NcContent>
+</template>
+
+<script setup lang="ts">
+import type { INavigationPanels, ISearchDocument, ISearchErrorResponse, ISearchResponse, ISearchResult } from './types.d.ts'
+
+import axios from '@nextcloud/axios'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { computed, onMounted, reactive, ref } from 'vue'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
+import NcAppNavigationSearch from '@nextcloud/vue/components/NcAppNavigationSearch'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcContent from '@nextcloud/vue/components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import { logger } from './logger.ts'
+
+/** How many documents the server returns for a single provider on a single page. */
+const pageSize = 10
+/** Debounce, in ms, before a keystroke in the search field triggers a new search. */
+const searchDebounce = 500
+
+const themingName = loadState<string>('fulltextsearch', 'themingName')
+
+const panels = ref<INavigationPanels>({})
+const providerEnabled = reactive<Record<string, boolean>>({})
+const providerOptions = reactive<Record<string, Record<string, string>>>({})
+
+const search = ref('')
+const results = ref<ISearchResult[]>([])
+const providerPage = reactive<Record<string, number>>({})
+const loading = ref(false)
+const hasSearched = ref(false)
+const error = ref('')
+
+let searchTimer: ReturnType<typeof window.setTimeout> | null = null
+
+const totalResultsCount = computed(() => results.value.reduce((total, providerResult) => total + providerResult.documents.length, 0))
+
+/**
+ * Load the list of Content Providers and the filter options they want displayed in this
+ * navigation page, and initialize their default filter values.
+ */
+async function loadPanels(): Promise<void> {
+	const { data } = await axios.get<INavigationPanels>(generateUrl('/apps/fulltextsearch/navigation/panels'))
+	panels.value = data
+
+	for (const [appId, panel] of Object.entries(data)) {
+		providerEnabled[appId] = true
+		providerOptions[appId] = {}
+
+		for (const option of panel.options) {
+			providerOptions[appId][option.name] = option.type === 'checkbox' ? '0' : ''
+		}
+	}
+}
+
+/**
+ * @param appId app id of the Content Provider, as returned by `GET /navigation/panels`
+ * @param optionName name/key of the option to read
+ */
+function getOptionValue(appId: string, optionName: string): string {
+	return providerOptions[appId]?.[optionName] ?? ''
+}
+
+/**
+ * @param appId app id of the Content Provider, as returned by `GET /navigation/panels`
+ * @param optionName name/key of the option to read
+ */
+function isOptionChecked(appId: string, optionName: string): boolean {
+	return getOptionValue(appId, optionName) === '1'
+}
+
+/**
+ * @param appId app id of the Content Provider whose enabled state changed
+ * @param enabled whether the provider should now be included in searches
+ */
+function onProviderEnabledChange(appId: string, enabled: boolean): void {
+	providerEnabled[appId] = enabled
+	triggerSearch(true)
+}
+
+/**
+ * @param appId app id of the Content Provider the option belongs to
+ * @param optionName name/key of the option, as sent back to the search request
+ * @param value new value, '1'/'0' for checkboxes or free text for inputs
+ */
+function onOptionChange(appId: string, optionName: string, value: string): void {
+	providerOptions[appId][optionName] = value
+	triggerSearch(true)
+}
+
+/**
+ * @returns the `provider` id (not app id) of every enabled Content Provider, or 'all' if none was
+ * explicitly disabled - matching what `Api#search` expects.
+ */
+function selectedProviders(): string[] | 'all' {
+	const entries = Object.entries(panels.value)
+	const selected = entries.filter(([appId]) => providerEnabled[appId]).map(([, panel]) => panel.provider)
+
+	return selected.length === entries.length ? 'all' : selected
+}
+
+/** @returns the merged option values of every enabled Content Provider, as the search API expects them. */
+function selectedOptions(): Record<string, string> {
+	return Object.entries(panels.value)
+		.filter(([appId]) => providerEnabled[appId])
+		.reduce((options, [appId]) => ({ ...options, ...providerOptions[appId] }), {})
+}
+
+/**
+ * Run a search request, either across every enabled provider (`providerId` omitted) or scoped to
+ * a single one when paginating its results.
+ *
+ * @param providerId `provider` id (not app id) to scope the request to, or undefined for all enabled providers
+ * @param page page number to request, 1-indexed
+ */
+async function runSearch(providerId: string | undefined, page: number): Promise<ISearchResult[]> {
+	const request = {
+		providers: providerId ?? selectedProviders(),
+		options: selectedOptions(),
+		search: search.value,
+		page,
+		size: pageSize,
+	}
+
+	const { data } = await axios.get<ISearchResponse>(generateUrl('/apps/fulltextsearch/v1/search'), {
+		params: { request: JSON.stringify(request) },
+	})
+
+	return data.result
+}
+
+/**
+ * @param e error caught from an axios request against the search API
+ */
+function errorMessage(e: unknown): string {
+	return (e as { response?: { data?: ISearchErrorResponse } }).response?.data?.message
+		?? t('fulltextsearch', 'Failed to reach server. Try reloading the page')
+}
+
+/**
+ * Debounce and (re-)run a full search across every enabled provider, replacing the current results.
+ *
+ * @param immediate skip the debounce, used when a filter (rather than the search field) changed
+ */
+function triggerSearch(immediate = false): void {
+	if (searchTimer !== null) {
+		window.clearTimeout(searchTimer)
+		searchTimer = null
+	}
+
+	if (search.value.trim().length < 1) {
+		results.value = []
+		hasSearched.value = false
+		error.value = ''
+		return
+	}
+
+	const run = async () => {
+		loading.value = true
+		error.value = ''
+		hasSearched.value = true
+
+		try {
+			for (const panel of Object.values(panels.value)) {
+				providerPage[panel.provider] = 1
+			}
+
+			results.value = await runSearch(undefined, 1)
+		} catch (e) {
+			error.value = errorMessage(e)
+			results.value = []
+			logger.error('FullTextSearch request failed', { error: e })
+		} finally {
+			loading.value = false
+		}
+	}
+
+	if (immediate) {
+		run()
+	} else {
+		searchTimer = window.setTimeout(run, searchDebounce)
+	}
+}
+
+/**
+ * @param providerResult section whose page is changing
+ * @param direction -1 for the previous page, 1 for the next page
+ */
+async function changeProviderPage(providerResult: ISearchResult, direction: 1 | -1): Promise<void> {
+	const providerId = providerResult.provider.id
+	const nextPage = (providerPage[providerId] ?? 1) + direction
+	providerPage[providerId] = nextPage
+
+	try {
+		const [updated] = await runSearch(providerId, nextPage)
+		const index = results.value.findIndex((result) => result.provider.id === providerId)
+		if (updated && index > -1) {
+			results.value[index] = updated
+		}
+	} catch (e) {
+		error.value = errorMessage(e)
+		logger.error('FullTextSearch pagination request failed', { error: e })
+	}
+}
+
+/**
+ * @param providerResult result section to compute the last page number for
+ */
+function maxPage(providerResult: ISearchResult): number {
+	return Math.max(1, Math.ceil(providerResult.meta.total / pageSize))
+}
+
+/**
+ * @param doc search result document to read the first excerpt from
+ */
+function firstExcerpt(doc: ISearchDocument): string {
+	return doc.excerpts?.[0]?.excerpt ?? ''
+}
+
+/**
+ * @param providerResult result section to build the translated header for
+ */
+function providerResultTitle(providerResult: ISearchResult): string {
+	return t(
+		'fulltextsearch',
+		'{title} — {total} results in {time} ms',
+		{
+			title: providerResult.provider.name,
+			total: providerResult.meta.total,
+			time: providerResult.meta.time,
+		},
+	)
+}
+
+onMounted(() => {
+	loadPanels()
+})
+</script>
+
+<style scoped lang="scss">
+.provider-filters {
+	padding: 0 calc(var(--default-grid-baseline) * 2);
+
+	&__options {
+		display: flex;
+		flex-direction: column;
+		padding-inline-start: calc(var(--default-grid-baseline) * 4);
+	}
+}
+
+.search-results {
+	padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
+
+	&__provider {
+		margin-bottom: calc(var(--default-grid-baseline) * 6);
+	}
+
+	&__pagination {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+		margin-top: calc(var(--default-grid-baseline) * 2);
+	}
+}
+</style>
diff --git a/src/navigate.ts b/src/navigate.ts
new file mode 100644
index 00000000..62299703
--- /dev/null
+++ b/src/navigate.ts
@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import Navigate from './Navigate.vue'
+
+const app = createApp(Navigate)
+app.mount('#content')
diff --git a/src/types.d.ts b/src/types.d.ts
index e53c056e..344ff7e8 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -27,3 +27,71 @@ export interface ISettingsUpdatedEventDetail {
 	/** `IFullTextSearchProvider::getId()` of every registered provider, only populated once a platform is selected. */
 	providers: string[]
 }
+
+/**
+ * One `ISearchOption` as serialized by `OC\FullTextSearch\Model\SearchOption`, describing a
+ * single filter control a Content Provider wants displayed in the navigation panel.
+ */
+export interface ISearchOption {
+	name: string
+	title: string
+	type: 'checkbox' | 'input'
+	size: string
+	placeholder: string
+}
+
+/** One entry of the `GET /navigation/panels` response, keyed by the provider's app id. */
+export interface INavigationPanel {
+	provider: string
+	title: string
+	options: ISearchOption[]
+	css: string
+	icon: string
+}
+
+export type INavigationPanels = Record<string, INavigationPanel>
+
+export interface ISearchExcerpt {
+	source: string
+	excerpt: string
+}
+
+/** `OC\FullTextSearch\Model\IndexDocument::jsonSerialize()`, trimmed to the fields the UI uses. */
+export interface ISearchDocument {
+	id: string
+	providerId: string
+	title: string
+	link: string
+	source: string
+	hash: string
+	tags: string[]
+	excerpts: ISearchExcerpt[] | null
+	score: string
+}
+
+export interface ISearchResultMeta {
+	timedOut: boolean
+	time: number
+	count: number
+	total: number
+	maxScore: number
+}
+
+/** One entry of the `result` array, i.e. one provider's contribution to a search. */
+export interface ISearchResult {
+	provider: { id: string, name: string }
+	documents: ISearchDocument[]
+	meta: ISearchResultMeta
+}
+
+export interface ISearchResponse {
+	result: ISearchResult[]
+	status: number
+	version: string
+}
+
+export interface ISearchErrorResponse {
+	status: number
+	exception: string
+	message: string
+}
diff --git a/templates/navigate.php b/templates/navigate.php
index e4b257c5..d16a9f21 100644
--- a/templates/navigate.php
+++ b/templates/navigate.php
@@ -6,51 +6,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-use OCA\FullTextSearch\AppInfo\Application;
-use OCP\Util;
-
-Util::addScript(Application::APP_ID, 'navigate');
-Util::addStyle(Application::APP_ID, 'navigate');
-
-/** @var \OCP\IL10N $l */
-/** @var array $_ */
-
 ?>
 
-<div id="app-navigation">
-	<ul id="search_navigation">
-		<li style="height: 50px">
-			<div id="search_header">
-				<div>
-					<input id="search_input"
-						   placeholder="<?php
-						   /** @phpstan-ignore function.notFound */
-						   p($l->t('Search on %s', [$_['themingName']])); ?>">
-				</div>
-			</div>
-		</li>
-	</ul>
-</div>
-
-<div id="app-content">
-	<div id="search_error"></div>
-	<div id="search_result"></div>
-</div>
-
-<!-- <div id="search_json"></div> -->
-
-
-<script id="template_entry" type="text/template">
-	<div class="result_entry_default">
-		<div class="result_entry_left">
-			<div id="title">&nbsp;</div>
-			<div id="line1">&nbsp;</div>
-			<div id="line2">&nbsp;</div>
-		</div>
-		<div class="result_entry_right">
-			<div id="source">&nbsp;</div>
-			<div id="score">&nbsp;</div>
-		</div>
-	</div>
-
-</script>
+<div id="content" class="app-fulltextsearch"></div>
diff --git a/vite.config.ts b/vite.config.ts
index 08792036..6e0a726e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import { createAppConfig } from '@nextcloud/vite-config'
 
 export default createAppConfig({
 	'settings-admin': 'src/settings-admin.ts',
+	'navigate': 'src/navigate.ts',
 }, {
 	// Setup REUSE information extraction
 	extractLicenseInformation: {