diff --git a/ts/components/common/NavigationLink.vue b/ts/components/common/NavigationLink.vue
index eb3ba853..5303ab7d 100644
--- a/ts/components/common/NavigationLink.vue
+++ b/ts/components/common/NavigationLink.vue
@@ -1,6 +1,6 @@
 <template>
-	<a
-		:href="to"
+	<RouterLink
+		:to="to"
 		data-bs-toggle="tooltip"
 		data-bs-placement="right"
 		:title="label"
@@ -14,7 +14,7 @@
 			<span>{{ notificationCount > 99 ? "99+" : notificationCount }}</span>
 			<span class="visually-hidden">unread notifications</span>
 		</span>
-	</a>
+	</RouterLink>
 </template>
 
 <script setup lang="ts">
diff --git a/ts/router.ts b/ts/router.ts
index 4e5b297c..c0c05f45 100644
--- a/ts/router.ts
+++ b/ts/router.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import type { RouteRecordRaw } from "vue-router";
 import Home from "./view/Home.vue";
 import About from "./view/About.vue";
+import Intelligence from "./view/Intelligence.vue";
 
 const routes: RouteRecordRaw[] = [
 	{
@@ -14,6 +15,11 @@ const routes: RouteRecordRaw[] = [
 		name: "About",
 		component: About,
 	},
+	{
+		path: "/intelligence",
+		name: "Intelligence",
+		component: Intelligence,
+	},
 ];
 
 const router = createRouter({
diff --git a/html/template/sync/intelligence-root.html b/ts/view/Intelligence.vue
similarity index 87%
rename from html/template/sync/intelligence-root.html
rename to ts/view/Intelligence.vue
index b2f00af0..220ab8a1 100644
--- a/html/template/sync/intelligence-root.html
+++ b/ts/view/Intelligence.vue
@@ -1,34 +1,4 @@
-{{ template "sync/layout/authenticated.html" . }}
-
-{{ define "title" }}Planning{{ end }}
-{{ define "extraheader" }}
-	<style>
-		.report-card {
-			transition: all 0.3s;
-			border-radius: 10px;
-		}
-		.report-card:hover {
-			transform: translateY(-5px);
-			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-		}
-		.card-header {
-			border-radius: 10px 10px 0 0 !important;
-		}
-		.report-item {
-			padding: 12px;
-			border-left: 4px solid transparent;
-			transition: all 0.2s;
-		}
-		.report-item:hover {
-			background-color: rgba(0, 0, 0, 0.05);
-			border-left: 4px solid #0d6efd;
-		}
-		body {
-			background-color: #f8f9fa;
-		}
-	</style>
-{{ end }}
-{{ define "content" }}
+<template>
 	<div class="container py-5">
 		<div class="row g-4">
 			<!-- Technician Supervision -->
@@ -171,4 +141,34 @@
 			</div>
 		</div>
 	</div>
-{{ end }}
+</template>
+
+<script setup lang="ts">
+// No special logic needed for this component
+</script>
+
+<style scoped>
+.report-card {
+	transition: all 0.3s;
+	border-radius: 10px;
+}
+.report-card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+.card-header {
+	border-radius: 10px 10px 0 0 !important;
+}
+.report-item {
+	padding: 12px;
+	border-left: 4px solid transparent;
+	transition: all 0.2s;
+}
+.report-item:hover {
+	background-color: rgba(0, 0, 0, 0.05);
+	border-left: 4px solid #0d6efd;
+}
+body {
+	background-color: #f8f9fa;
+}
+</style>