diff --git a/frontend/bun.lock b/frontend/bun.lock
index 3cbcd3b..94e0692 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -6,17 +6,17 @@
       "name": "raptr",
       "dependencies": {
         "@internationalized/date": "^3.12.4",
-        "@lucide/vue": "^1.61.0",
+        "@lucide/vue": "^1.63.0",
         "@tailwindcss/vite": "^4.3.3",
-        "@tanstack/vue-table": "^8.21.3",
+        "@tanstack/vue-table": "^9.3.1",
         "@vee-validate/zod": "^4.15.1",
         "@vueuse/core": "^15.0.0",
-        "axios": "^1.20.0",
+        "axios": "^1.21.0",
         "chart.js": "^4.6.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.4.17",
-        "marked": "^18.1.1",
+        "marked": "^18.1.2",
         "oidc-client-ts": "^3.5.0",
         "pinia": "^4.1.0",
         "qrcode": "^1.5.4",
@@ -119,7 +119,7 @@
 
     "@kurkle/color": ["@kurkle/color@0.3.4", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
 
-    "@lucide/vue": ["@lucide/vue@1.61.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-XYclbwUQ6Mvf0UskBG9gJH91BdF3VK4Tt6Pv8PSntwPwNnf357PCQnma4TrzOEdwD49UYCtsTafpfytRIxm1cQ=="],
+    "@lucide/vue": ["@lucide/vue@1.63.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-uJu7VLxXlUIw06r8F4ZdUbTHg8+VFTyqN+lxuMXrh0+8RarwyTWo/odWpH/xq7yUskCTNEtSP4K+BPYRECriDQ=="],
 
     "@lukeed/ms": ["@lukeed/ms@2.0.2", "", {}, "sha512-9I2Zn6+NJLfaGoz9jN3lpwDgAYvfGeNYdbAIjJOqzs4Tpc+VU3Jqq4IofSUBKajiDS8k9fZIg18/z13mpk1bsA=="],
 
@@ -189,11 +189,13 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
 
-    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+    "@tanstack/store": ["@tanstack/store@0.11.2", "", {}, "sha512-sJ4mjol8uQsHV0gOJzzjwXfh2Fwm+Sz0+8deqiTm4jGbMdjzNSW+xZCFm0kUa870uhd8yi+DpKnZb5Kc4apa0Q=="],
+
+    "@tanstack/table-core": ["@tanstack/table-core@9.3.1", "", { "dependencies": { "@tanstack/store": "^0.11.2" } }, "sha512-zQvlxSNi2qGM3L4jh85Z6hqMfdIR5qOfD9KHOU32nuKFJGN0RlJ7UvV1lsPb1fPVhpFYI0VP3jJGxLdLDpTKjQ=="],
 
     "@tanstack/virtual-core": ["@tanstack/virtual-core@3.19.8", "", {}, "sha512-Oz/SYBo/aVPyQkwtOw7Q23myITUgFIof2glQqydYJAPL6mH2SkJDkvDKZTklB+7gv5jGLZQhyTcd7SO1A1EODQ=="],
 
-    "@tanstack/vue-table": ["@tanstack/vue-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "vue": ">=3.2" } }, "sha512-rusRyd77c5tDPloPskctMyPLFEQUeBzxdQ+2Eow4F7gDPlPOB1UnnhzfpdvqZ8ZyX2rRNGmqNnQWm87OI2OQPw=="],
+    "@tanstack/vue-table": ["@tanstack/vue-table@9.3.1", "", { "dependencies": { "@tanstack/store": "^0.11.2", "@tanstack/table-core": "9.3.1" }, "peerDependencies": { "vue": ">=3.2" } }, "sha512-7z7nS4UP91rLZ01suGxQBT611ogfBrs7/E+lsKeYS9XdHSRUAzclFvQ4B10F0bC/Q8BrzgXiNH3QzumK7b0Tow=="],
 
     "@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.13.49", "", { "dependencies": { "@tanstack/virtual-core": "3.19.8" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-+hh0M+apciv9RYYVGnaEmcTncH6dpo3e2MTexNlOaTo7WXdLvQ6JSvtmiZCMbcBacZxibXGvVzp7sa1WsmZRHA=="],
 
@@ -279,7 +281,7 @@
 
     "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
 
-    "axios": ["axios@1.20.0", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.6", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg=="],
+    "axios": ["axios@1.21.0", "", { "dependencies": { "follow-redirects": "^1.16.0", "form-data": "^4.0.6", "https-proxy-agent": "^5.0.1", "proxy-from-env": "^2.1.0" } }, "sha512-YCzXMB53Q9PZBsh7yN7wtapit4WepwcHS2fP8QhGsBxSz5YtgYobV7GGlWlAJi+RxfU77GQTQi2DSLUma42EYA=="],
 
     "birpc": ["birpc@2.9.0", "", {}, "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw=="],
 
@@ -449,7 +451,7 @@
 
     "magic-string-ast": ["magic-string-ast@1.0.3", "", { "dependencies": { "magic-string": "^0.30.19" } }, "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA=="],
 
-    "marked": ["marked@18.1.1", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-zEGgrtUG8crk+TrMacJSVABU4DYDDkS8uqgU3ohrn/2fW9C2AEfUrO3m6IhpIpQpl7YcVpiXXC9cSMWDANT3dg=="],
+    "marked": ["marked@18.1.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-DfOnvLAQ6WYeWxWO1u4RyFOeqyHup6dks5PPqnoFiooU7ipRvidO/2j8plhAHIiZg574E9ZlzSjUiPMLAzFkgg=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
diff --git a/frontend/package.json b/frontend/package.json
index 273db9a..93a2ee3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,17 +15,17 @@
     },
     "dependencies": {
         "@internationalized/date": "^3.12.4",
-        "@lucide/vue": "^1.61.0",
+        "@lucide/vue": "^1.63.0",
         "@tailwindcss/vite": "^4.3.3",
-        "@tanstack/vue-table": "^8.21.3",
+        "@tanstack/vue-table": "^9.3.1",
         "@vee-validate/zod": "^4.15.1",
         "@vueuse/core": "^15.0.0",
-        "axios": "^1.20.0",
+        "axios": "^1.21.0",
         "chart.js": "^4.6.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.4.17",
-        "marked": "^18.1.1",
+        "marked": "^18.1.2",
         "oidc-client-ts": "^3.5.0",
         "pinia": "^4.1.0",
         "qrcode": "^1.5.4",
diff --git a/frontend/src/components/assessment/ActivityAssetsManager.vue b/frontend/src/components/assessment/ActivityAssetsManager.vue
index e56cfc4..aaa6272 100644
--- a/frontend/src/components/assessment/ActivityAssetsManager.vue
+++ b/frontend/src/components/assessment/ActivityAssetsManager.vue
@@ -18,9 +18,9 @@ import {
     SearchCode,
     Shield,
     ShieldCheck,
+    Trash,
     User,
     Users,
-    X,
 } from '@lucide/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import ManageAssetsModal from '@/components/assessment/ManageAssetsModal.vue';
@@ -91,6 +91,7 @@ const iconMap: Record<string, any> = {
     Database,
     Shield,
     ShieldCheck,
+    Trash,
     Users,
     Network,
     SearchCode,
@@ -330,11 +331,12 @@ onMounted(() => {
                 
                 <!-- Assets Grid -->
                 <div :class="compact || showOnlySources ? 'flex flex-wrap gap-2' : 'grid grid-cols-2 gap-2'">
+                    <!-- Tiles use isolate so the edit/remove buttons' z-10 stays inside the tile (below the sticky header and tabs) -->
                     <Popover v-for="asset in section.items" :key="asset.id">
                         <PopoverTrigger as-child>
                             <div 
                                 :class="[
-                                    'group relative flex items-center transition-colors cursor-pointer',
+                                    'group relative isolate flex items-center transition-colors cursor-pointer',
                                     compact
                                         ? 'gap-2 px-2 py-1.5 rounded-md border bg-card hover:bg-accent/20'
                                         : 'flex-col justify-center p-3 rounded-lg border-2 bg-card hover:bg-accent/20 min-h-[120px]',
@@ -359,9 +361,10 @@ onMounted(() => {
                                     variant="ghost"
                                     size="icon"
                                     class="absolute top-1 right-1 h-5 w-5 rounded-full text-muted-foreground hover:text-destructive z-10"
+                                    title="Remove from activity"
                                     @click.stop="removeAsset(asset.id, section.key)"
                                 >
-                                    <X class="h-3 w-3" />
+                                    <Trash class="h-3 w-3" />
                                 </Button>
                                 
                                 <!-- Icon -->
@@ -395,9 +398,10 @@ onMounted(() => {
                                     variant="ghost"
                                     size="icon"
                                     :class="['h-5 w-5 rounded-full text-muted-foreground hover:text-destructive shrink-0', asset.deleted ? 'ml-auto' : '']"
+                                    title="Remove from activity"
                                     @click.stop="removeAsset(asset.id, section.key)"
                                 >
-                                    <X class="h-3 w-3" />
+                                    <Trash class="h-3 w-3" />
                                 </Button>
                             </div>
                         </PopoverTrigger>
diff --git a/frontend/src/components/assessment/ActivityForm.vue b/frontend/src/components/assessment/ActivityForm.vue
index 9a8e878..5269cdd 100644
--- a/frontend/src/components/assessment/ActivityForm.vue
+++ b/frontend/src/components/assessment/ActivityForm.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { BookOpen, Copy, History } from '@lucide/vue';
+import { useElementSize } from '@vueuse/core';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import ActivityAssetsManager from '@/components/assessment/ActivityAssetsManager.vue';
@@ -130,38 +131,60 @@ watch(
     },
 );
 
+// The tab bar sticks right below the sticky header, whose height varies
+const stickyHeader = ref<HTMLElement | null>(null);
+const sectionTabs = ref<{ $el: HTMLElement } | null>(null);
+const { height: stickyHeaderHeight } = useElementSize(stickyHeader, undefined, {
+    box: 'border-box',
+});
+
+// Clicking a tab while the bar is stuck jumps to the start of that section
+function onSectionTabClicked() {
+    const tabsEl = sectionTabs.value?.$el;
+    const headerEl = stickyHeader.value;
+    if (!tabsEl || !headerEl) return;
+    if (
+        tabsEl.getBoundingClientRect().top <
+        headerEl.getBoundingClientRect().bottom
+    ) {
+        // scroll-margin-top on the tabs keeps them below the header
+        tabsEl.scrollIntoView({ block: 'start' });
+    }
+}
+
 // Browser-style section tabs: the active tab joins the page below and shows its section colour on top
 const SECTION_TABS = [
     {
         value: 'details',
         label: 'Activity Details',
         dot: 'bg-red-500',
-        accent: 'data-[state=active]:border-t-red-500 dark:data-[state=active]:border-t-red-500',
+        accent: 'hover:border-t-red-500/50 data-[state=active]:border-t-red-500 dark:data-[state=active]:border-t-red-500',
     },
     {
         value: 'detection',
         label: 'Activity Detection',
         dot: 'bg-blue-500',
-        accent: 'data-[state=active]:border-t-blue-500 dark:data-[state=active]:border-t-blue-500',
+        accent: 'hover:border-t-blue-500/50 data-[state=active]:border-t-blue-500 dark:data-[state=active]:border-t-blue-500',
     },
     {
         value: 'evaluation',
         label: 'Evaluation',
         dot: 'bg-purple-500',
-        accent: 'data-[state=active]:border-t-purple-500 dark:data-[state=active]:border-t-purple-500',
+        accent: 'hover:border-t-purple-500/50 data-[state=active]:border-t-purple-500 dark:data-[state=active]:border-t-purple-500',
     },
     {
         value: 'attachments',
         label: 'Attachments',
         dot: 'bg-muted-foreground/50',
-        accent: 'data-[state=active]:border-t-muted-foreground dark:data-[state=active]:border-t-muted-foreground',
+        accent: 'hover:border-t-muted-foreground/50 data-[state=active]:border-t-muted-foreground dark:data-[state=active]:border-t-muted-foreground',
     },
 ] as const;
 
 const SECTION_TAB_CLASS = [
     '-mb-px h-12 min-w-[200px] flex-none justify-start gap-2.5 px-5 text-base',
-    'rounded-t-lg rounded-b-none border border-t-2 border-transparent',
-    'text-muted-foreground dark:text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+    // Inactive tabs look like background browser tabs: light fill, border open at the bottom
+    'rounded-t-lg rounded-b-none border border-t-2 border-border/60 border-b-transparent',
+    'cursor-pointer bg-muted/40 text-muted-foreground dark:text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
     'data-[state=active]:relative data-[state=active]:z-10 data-[state=active]:border-border data-[state=active]:border-b-card data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-none',
     'dark:data-[state=active]:border-border dark:data-[state=active]:border-b-card dark:data-[state=active]:bg-card',
 ].join(' ');
@@ -579,7 +602,7 @@ defineExpose({ hasUnsavedChanges });
 <template>
     <div class="w-full px-4 mx-auto space-y-8 pb-24">
         <!-- Sticky Header -->
-        <div class="sticky top-0 z-20 bg-background pb-4 border-b">
+        <div ref="stickyHeader" class="sticky top-0 z-20 bg-background pb-4 border-b">
             <div class="flex justify-between items-start pt-2">
                 <div>
                     <h2 class="text-3xl font-bold tracking-tight">{{ formData.name || 'Activity Details' }}</h2>
@@ -663,8 +686,19 @@ defineExpose({ hasUnsavedChanges });
         />
 
         <!-- Sections as tabs; hidden tabs stay mounted so the dirty tracking and editor state are kept -->
-        <Tabs v-model="activeSectionTab" :unmount-on-hide="false" class="gap-0">
-        <TabsList class="h-auto w-full items-end justify-start gap-1 rounded-none bg-transparent p-0">
+        <Tabs
+            ref="sectionTabs"
+            v-model="activeSectionTab"
+            :unmount-on-hide="false"
+            class="gap-0"
+            :style="{ scrollMarginTop: `${stickyHeaderHeight}px` }"
+            @update:model-value="onSectionTabClicked"
+        >
+        <!-- Sticky below the header for quick switching while scrolled down -->
+        <TabsList
+            class="sticky z-10 h-auto w-full items-end justify-start gap-1 rounded-none bg-background p-0"
+            :style="{ top: `${stickyHeaderHeight}px` }"
+        >
             <TabsTrigger
                 v-for="tab in SECTION_TABS"
                 :key="tab.value"
diff --git a/frontend/src/components/assessment/ImportActivityGroupTemplatesModal.vue b/frontend/src/components/assessment/ImportActivityGroupTemplatesModal.vue
index c9088ad..dc39053 100644
--- a/frontend/src/components/assessment/ImportActivityGroupTemplatesModal.vue
+++ b/frontend/src/components/assessment/ImportActivityGroupTemplatesModal.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import {
     type ColumnDef,
-    getCoreRowModel,
+    columnFilteringFeature,
+    columnVisibilityFeature,
     type RowSelectionState,
-    useVueTable,
+    rowSelectionFeature,
+    tableFeatures,
+    useTable,
 } from '@tanstack/vue-table';
 import { Loader2 } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
@@ -60,13 +63,20 @@ const sortOrder = ref<'asc' | 'desc' | null>(null);
 // Server-side column filters
 const columnFilters = ref<Record<string, string>>({});
 
+// Table features: filtering runs server-side and selection lives in rowSelection;
+// the features only provide the table APIs used here (getCanFilter, getVisibleCells, row selection state)
+const features = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowSelectionFeature,
+});
+
 // Column definitions
-const columns: ColumnDef<ActivityGroupTemplateRead>[] = [
+const columns: ColumnDef<typeof features, ActivityGroupTemplateRead>[] = [
     {
         id: 'select',
         header: 'select-header',
         cell: 'select-cell',
-        enableSorting: false,
         enableColumnFilter: false,
     },
     {
@@ -83,22 +93,14 @@ const columns: ColumnDef<ActivityGroupTemplateRead>[] = [
     },
 ];
 
-const table = useVueTable({
-    get data() {
-        return groupTemplates.value;
-    },
+const table = useTable<typeof features, ActivityGroupTemplateRead>({
+    features,
+    data: groupTemplates,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    manualSorting: true,
     manualFiltering: true,
     enableRowSelection: true,
     getRowId: (row) => row.id,
-    state: {
-        get rowSelection() {
-            return rowSelection.value;
-        },
-    },
+    state: computed(() => ({ rowSelection: rowSelection.value })),
     onRowSelectionChange: (updaterOrValue) => {
         rowSelection.value =
             typeof updaterOrValue === 'function'
diff --git a/frontend/src/components/assessment/ImportActivityTemplatesModal.vue b/frontend/src/components/assessment/ImportActivityTemplatesModal.vue
index 6bc1ca2..af1f821 100644
--- a/frontend/src/components/assessment/ImportActivityTemplatesModal.vue
+++ b/frontend/src/components/assessment/ImportActivityTemplatesModal.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import {
     type ColumnDef,
-    getCoreRowModel,
+    columnFilteringFeature,
+    columnVisibilityFeature,
     type RowSelectionState,
-    useVueTable,
+    rowSelectionFeature,
+    tableFeatures,
+    useTable,
 } from '@tanstack/vue-table';
 import { Check, ChevronDown, Loader2 } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
@@ -70,13 +73,20 @@ const columnFilters = ref<Record<string, string | string[]>>({});
 // Filter options
 const priorityOptions = ['Critical', 'High', 'Medium', 'Low'];
 
+// Table features: filtering runs server-side and selection lives in rowSelection;
+// the features only provide the table APIs used here (getCanFilter, getVisibleCells, row selection state)
+const features = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowSelectionFeature,
+});
+
 // Column definitions
-const columns: ColumnDef<ActivityTemplateRead>[] = [
+const columns: ColumnDef<typeof features, ActivityTemplateRead>[] = [
     {
         id: 'select',
         header: 'select-header',
         cell: 'select-cell',
-        enableSorting: false,
         enableColumnFilter: false,
     },
     {
@@ -112,22 +122,14 @@ const columns: ColumnDef<ActivityTemplateRead>[] = [
     },
 ];
 
-const table = useVueTable({
-    get data() {
-        return templates.value;
-    },
+const table = useTable<typeof features, ActivityTemplateRead>({
+    features,
+    data: templates,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    manualSorting: true,
     manualFiltering: true,
     enableRowSelection: true,
     getRowId: (row) => row.id,
-    state: {
-        get rowSelection() {
-            return rowSelection.value;
-        },
-    },
+    state: computed(() => ({ rowSelection: rowSelection.value })),
     onRowSelectionChange: (updaterOrValue) => {
         rowSelection.value =
             typeof updaterOrValue === 'function'
diff --git a/frontend/src/components/assessment/ImportCampaignTemplatesModal.vue b/frontend/src/components/assessment/ImportCampaignTemplatesModal.vue
index f9cd7d3..a56d74b 100644
--- a/frontend/src/components/assessment/ImportCampaignTemplatesModal.vue
+++ b/frontend/src/components/assessment/ImportCampaignTemplatesModal.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import {
     type ColumnDef,
-    getCoreRowModel,
+    columnFilteringFeature,
+    columnVisibilityFeature,
     type RowSelectionState,
-    useVueTable,
+    rowSelectionFeature,
+    tableFeatures,
+    useTable,
 } from '@tanstack/vue-table';
 import { Loader2 } from '@lucide/vue';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import {
@@ -61,8 +64,16 @@ const sortOrder = ref<'asc' | 'desc' | null>(null);
 // Server-side column filters
 const columnFilters = ref<Record<string, string>>({});
 
+// Table features: filtering runs server-side and selection lives in rowSelection;
+// the features only provide the table APIs used here (getCanFilter, getVisibleCells, row selection state)
+const features = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowSelectionFeature,
+});
+
 // Column definitions
-const columns: ColumnDef<CampaignTemplateRead>[] = [
+const columns: ColumnDef<typeof features, CampaignTemplateRead>[] = [
     {
         accessorKey: 'name',
         header: 'Name',
@@ -86,23 +97,15 @@ const columns: ColumnDef<CampaignTemplateRead>[] = [
 // Use rowSelection for TanStack table compatibility but restrict to single select
 const rowSelection = ref<RowSelectionState>({});
 
-const table = useVueTable({
-    get data() {
-        return campaignTemplates.value;
-    },
+const table = useTable<typeof features, CampaignTemplateRead>({
+    features,
+    data: campaignTemplates,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    manualSorting: true,
     manualFiltering: true,
     enableRowSelection: true,
     enableMultiRowSelection: false,
     getRowId: (row) => row.id,
-    state: {
-        get rowSelection() {
-            return rowSelection.value;
-        },
-    },
+    state: computed(() => ({ rowSelection: rowSelection.value })),
     onRowSelectionChange: (updaterOrValue) => {
         rowSelection.value =
             typeof updaterOrValue === 'function'
diff --git a/frontend/src/components/assessment/ManageOrderModal.vue b/frontend/src/components/assessment/ManageOrderModal.vue
index 898833a..aec8a37 100644
--- a/frontend/src/components/assessment/ManageOrderModal.vue
+++ b/frontend/src/components/assessment/ManageOrderModal.vue
@@ -252,6 +252,7 @@ async function handleSave() {
                 </div>
 
                 <ScrollArea v-else class="h-full w-full border rounded-lg">
+                    <!-- fallback-on-body: the drag preview is position:fixed; inside the transformed (centred) dialog it would be offset -->
                     <draggable
                         v-model="groups"
                         item-key="id"
@@ -259,6 +260,7 @@ async function handleSave() {
                         ghost-class="opacity-30"
                         animation="200"
                         :force-fallback="true"
+                        :fallback-on-body="true"
                         :scroll="true"
                         class="divide-y"
                     >
@@ -295,6 +297,7 @@ async function handleSave() {
                                         ghost-class="opacity-30"
                                         animation="200"
                                         :force-fallback="true"
+                                        :fallback-on-body="true"
                                         :scroll="true"
                                         :group="{ name: 'activities' }"
                                         class="min-h-[36px]"
diff --git a/frontend/src/components/ui/data-table/DataTable.vue b/frontend/src/components/ui/data-table/DataTable.vue
index cc37c5e..b726492 100644
--- a/frontend/src/components/ui/data-table/DataTable.vue
+++ b/frontend/src/components/ui/data-table/DataTable.vue
@@ -1,15 +1,14 @@
-<script setup lang="ts" generic="TData, TValue">
-import { ref, watch, computed } from 'vue';
+<script setup lang="ts" generic="TData extends RowData">
+import { ref, watch, computed, toRef } from 'vue';
 import {
   FlexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  getFilteredRowModel,
-  useVueTable,
+  useTable,
   type ColumnDef,
-  type SortingState,
   type ColumnFiltersState,
+  type RowData,
+  type SortingState,
 } from '@tanstack/vue-table'
+import { dataTableFeatures, type DataTableFeatures } from './features'
 import {
   Table,
   TableBody,
@@ -44,7 +43,7 @@ interface PaginationMeta {
 }
 
 const props = defineProps<{
-  columns: ColumnDef<TData, TValue>[]
+  columns: ColumnDef<DataTableFeatures, TData>[]
   data: TData[]
   pagination?: PaginationMeta
   pageSize?: number
@@ -63,23 +62,17 @@ const emit = defineEmits<{
 const sorting = ref<SortingState>([])
 const columnFilters = ref<ColumnFiltersState>([])
 
-// Only use client-side sorting when manualSorting is false
-const sortedRowModel = computed(() => props.manualSorting ? undefined : getSortedRowModel())
-// Only use client-side filtering when manualFiltering is false
-const filteredRowModel = computed(() => props.manualFiltering ? undefined : getFilteredRowModel())
-
-const table = useVueTable({
-  get data() { return props.data },
-  get columns() { return props.columns },
-  getCoreRowModel: getCoreRowModel(),
-  getSortedRowModel: sortedRowModel.value,
-  getFilteredRowModel: filteredRowModel.value,
-  manualSorting: props.manualSorting,
-  manualFiltering: props.manualFiltering,
-  state: {
-    get sorting() { return sorting.value },
-    get columnFilters() { return columnFilters.value },
-  },
+// In manual mode the table skips its client-side sorted/filtered row models
+const table = useTable<DataTableFeatures, TData>({
+  features: dataTableFeatures,
+  data: toRef(props, 'data'),
+  columns: toRef(props, 'columns'),
+  manualSorting: toRef(props, 'manualSorting'),
+  manualFiltering: toRef(props, 'manualFiltering'),
+  state: computed(() => ({
+    sorting: sorting.value,
+    columnFilters: columnFilters.value,
+  })),
   onSortingChange: updaterOrValue => {
      sorting.value = typeof updaterOrValue === 'function' ? updaterOrValue(sorting.value) : updaterOrValue
   },
@@ -135,10 +128,7 @@ const handleColumnFilter = (columnId: string, value: string) => {
                   :class="header.column.getCanSort() ? 'cursor-pointer select-none flex items-center gap-2' : ''"
                   @click="header.column.getToggleSortingHandler()?.($event)"
                 >
-                  <FlexRender
-                    :render="header.column.columnDef.header"
-                    :props="header.getContext()"
-                  />
+                  <FlexRender :header="header" />
                   <component
                     v-if="header.column.getCanSort()"
                     :is="header.column.getIsSorted() === 'asc' ? ArrowUp : header.column.getIsSorted() === 'desc' ? ArrowDown : ArrowUpDown"
@@ -214,12 +204,11 @@ const handleColumnFilter = (columnId: string, value: string) => {
             <TableRow
               v-for="row in table.getRowModel().rows"
               :key="row.id"
-              :data-state="row.getIsSelected() ? 'selected' : undefined"
               @click="emit('row-click', row.original)"
               class="cursor-pointer hover:bg-muted/50"
             >
               <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                <FlexRender :cell="cell" />
               </TableCell>
             </TableRow>
           </template>
diff --git a/frontend/src/components/ui/data-table/features.ts b/frontend/src/components/ui/data-table/features.ts
new file mode 100644
index 0000000..b7bbc65
--- /dev/null
+++ b/frontend/src/components/ui/data-table/features.ts
@@ -0,0 +1,37 @@
+import {
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    createFilteredRowModel,
+    createSortedRowModel,
+    filterFn_equals,
+    filterFn_includesString,
+    rowSortingFeature,
+    sortFn_alphanumeric,
+    sortFn_basic,
+    sortFn_datetime,
+    sortFn_text,
+    tableFeatures,
+} from '@tanstack/vue-table';
+
+// Features of the shared DataTable. The row models and functions are only used for
+// client-side sorting/filtering; in manual (server-side) mode the table shows rows as given.
+export const dataTableFeatures = tableFeatures({
+    // columnVisibilityFeature provides row.getVisibleCells() used for rendering
+    columnVisibilityFeature,
+    columnFilteringFeature,
+    rowSortingFeature,
+    filteredRowModel: createFilteredRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    filterFns: {
+        includesString: filterFn_includesString,
+        equals: filterFn_equals,
+    },
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        text: sortFn_text,
+        datetime: sortFn_datetime,
+        basic: sortFn_basic,
+    },
+});
+
+export type DataTableFeatures = typeof dataTableFeatures;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index a5ba58f..64e3552 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -20,6 +20,7 @@ import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import DataTable from '@/components/ui/data-table/DataTable.vue';
+import type { DataTableFeatures } from '@/components/ui/data-table/features';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -120,7 +121,7 @@ const typeFilterOptions = [
 ];
 
 // Columns Definition - filterable columns match backend AssessmentFilter schema
-const columns: ColumnDef<AssessmentRead>[] = [
+const columns: ColumnDef<DataTableFeatures, AssessmentRead>[] = [
     {
         accessorKey: 'name',
         header: 'Name',
diff --git a/frontend/src/views/admin/UserManagementView.vue b/frontend/src/views/admin/UserManagementView.vue
index e5ff1f7..66e495b 100644
--- a/frontend/src/views/admin/UserManagementView.vue
+++ b/frontend/src/views/admin/UserManagementView.vue
@@ -21,6 +21,7 @@ import DateTimeDisplay from '@/components/DateTimeDisplay.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import DataTable from '@/components/ui/data-table/DataTable.vue';
+import type { DataTableFeatures } from '@/components/ui/data-table/features';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -111,7 +112,7 @@ const roleFilterOptions = [
 ];
 
 // Columns Definition - filterable columns match backend UserFilter schema
-const columns: ColumnDef<UserRead>[] = [
+const columns: ColumnDef<DataTableFeatures, UserRead>[] = [
     {
         accessorKey: 'email',
         header: 'Email',