diff --git a/Policies.png b/Policies.png
new file mode 100644
index 00000000..263b1e1f
Binary files /dev/null and b/Policies.png differ
diff --git a/preview.png b/preview.png
new file mode 100644
index 00000000..e96e3c7b
Binary files /dev/null and b/preview.png differ
diff --git a/roadrecon/.dockerignore b/roadrecon/.dockerignore
new file mode 100644
index 00000000..13c3b7dc
--- /dev/null
+++ b/roadrecon/.dockerignore
@@ -0,0 +1 @@
+roadrecon.db
\ No newline at end of file
diff --git a/roadrecon/Dockerfile b/roadrecon/Dockerfile
new file mode 100644
index 00000000..f417a1be
--- /dev/null
+++ b/roadrecon/Dockerfile
@@ -0,0 +1,11 @@
+FROM python:3.11-slim AS dev
+COPY . /app
+WORKDIR /app
+RUN pip install .
+CMD [ "python3","/app/roadtools/roadrecon/server.py","--debug" ]
+
+FROM python:3.11-slim AS prod
+COPY . /app
+WORKDIR /app
+RUN pip install .
+CMD [ "python3","/app/roadtools/roadrecon/server.py" ]
\ No newline at end of file
diff --git a/roadrecon/docker-compose.yml b/roadrecon/docker-compose.yml
new file mode 100644
index 00000000..14500b69
--- /dev/null
+++ b/roadrecon/docker-compose.yml
@@ -0,0 +1,21 @@
+services:
+  frontend:
+    build:
+      context: frontend-ng
+      target: ${TARGET:-prod}
+    ports:
+      - 5173:5173
+    volumes:
+      - ./frontend-ng/:/usr/src/app/
+    restart: always
+    depends_on:
+      - backend
+  backend:
+    build:
+      context: .
+      target: ${TARGET:-prod}
+    volumes:
+      - ./:/app/
+    ports:
+      - 5000:5000
+    restart: always
diff --git a/roadrecon/frontend-ng/.gitignore b/roadrecon/frontend-ng/.gitignore
new file mode 100644
index 00000000..53f7466a
--- /dev/null
+++ b/roadrecon/frontend-ng/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/CHANGELOG.md b/roadrecon/frontend-ng/CHANGELOG.md
new file mode 100644
index 00000000..a4386b3c
--- /dev/null
+++ b/roadrecon/frontend-ng/CHANGELOG.md
@@ -0,0 +1,57 @@
+# CHANGELOG.md
+
+## [3.0.0] - 2024-07-05
+
+- Mosaic Redesign
+
+## [2.1.0] - 2023-12-08
+
+Update to Vite 5
+Update dependencies
+
+## [2.0.1] - 2023-10-04
+
+- Dependencies update
+
+## [2.0.0] - 2023-06-01
+
+- Dark version added
+
+## [1.4.3] - 2023-04-11
+
+- Update dependencies
+
+## [1.4.2] - 2023-02-13
+
+- Update dependencies
+- Improve sidebar icons color logic
+
+## [1.4.0] - 2022-08-30
+
+- Update sidebar
+
+## [1.3.0] - 2022-07-15
+
+- Replace Sass with CSS files
+- Update dependencies
+
+## [1.1.0] - 2021-12-13
+
+- Update Tailwind 3
+- Several improvements
+
+## [1.0.3] - 2021-12-10
+
+- Alignment issue
+
+## [1.0.2] - 2021-11-23
+
+- Alignment issue
+
+## [1.0.1] - 2021-11-22
+
+Fix dashboard icon color
+
+## [1.0.0] - 2021-11-22
+
+First release
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/Dockerfile b/roadrecon/frontend-ng/Dockerfile
new file mode 100644
index 00000000..a6a71b47
--- /dev/null
+++ b/roadrecon/frontend-ng/Dockerfile
@@ -0,0 +1,29 @@
+# Build stage
+FROM node:latest AS builder
+
+COPY package*.json /usr/src/
+WORKDIR /usr/src/
+RUN npm install
+ENV PATH /usr/src/node_modules/.bin:$PATH
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+RUN npm run docker
+
+# Development stage
+FROM node:latest AS dev
+COPY package*.json /usr/src/
+WORKDIR /usr/src/
+RUN npm install --include=dev
+ENV PATH /usr/src/node_modules/.bin:$PATH
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+EXPOSE 5173
+CMD ["npm", "run", "dev"]
+
+# Production stage
+FROM nginx:alpine AS prod
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+
+EXPOSE 5173
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/README.md b/roadrecon/frontend-ng/README.md
new file mode 100644
index 00000000..70ced9ec
--- /dev/null
+++ b/roadrecon/frontend-ng/README.md
@@ -0,0 +1,13 @@
+# Roadrecon UI NG
+
+## New features
+
+- New Frontend based on Vite, VueJS and PrimeVue framework
+- Backend pagination for better performance on large databases
+- Added a Policies detail page
+
+## Credits
+
+- Dirk-jan Mollema as the original author of the backend and the tool suite
+- Kevin Tellier for the new UI
+- Template by [Cruip.com](https://cruip.com/)
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/index.html b/roadrecon/frontend-ng/index.html
new file mode 100644
index 00000000..c74165c7
--- /dev/null
+++ b/roadrecon/frontend-ng/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" class="p-dark dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ROADrecon</title>
+  </head>
+  <body class="font-inter antialiased bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400">
+    <script>
+        if (localStorage.getItem('sidebar-expanded') == 'true') {
+            document.querySelector('body').classList.add('sidebar-expanded');
+        } else {
+            document.querySelector('body').classList.remove('sidebar-expanded');
+        }
+    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/roadrecon/frontend-ng/nginx.conf b/roadrecon/frontend-ng/nginx.conf
new file mode 100644
index 00000000..2d97b216
--- /dev/null
+++ b/roadrecon/frontend-ng/nginx.conf
@@ -0,0 +1,16 @@
+server {
+    listen 5173;
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:5000/api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/package.json b/roadrecon/frontend-ng/package.json
new file mode 100644
index 00000000..8effba87
--- /dev/null
+++ b/roadrecon/frontend-ng/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "mosaic-vue",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "docker": "vite build --config vite.config.docker.js",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@primevue/themes": "^4.0.7",
+    "@tailwindcss/forms": "^0.5.7",
+    "@vueuse/core": "^10.7.0",
+    "axios": "^1.7.7",
+    "clipboard": "^2.0.11",
+    "cors": "^2.8.5",
+    "dayjs": "^1.11.13",
+    "flatpickr": "^4.6.13",
+    "moment": "^2.29.4",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.7",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.2.20",
+    "vue-flatpickr-component": "^11.0.3",
+    "vue-router": "^4.2.5",
+    "vue3-json-viewer": "^2.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/compiler-sfc": "^3.2.20",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.4.5"
+  }
+}
diff --git a/roadrecon/frontend-ng/postcss.config.cjs b/roadrecon/frontend-ng/postcss.config.cjs
new file mode 100644
index 00000000..96bb01e7
--- /dev/null
+++ b/roadrecon/frontend-ng/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/public/_redirects b/roadrecon/frontend-ng/public/_redirects
new file mode 100644
index 00000000..f8243379
--- /dev/null
+++ b/roadrecon/frontend-ng/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/public/favicon.ico b/roadrecon/frontend-ng/public/favicon.ico
new file mode 100644
index 00000000..df36fcfb
Binary files /dev/null and b/roadrecon/frontend-ng/public/favicon.ico differ
diff --git a/roadrecon/frontend-ng/src/App.vue b/roadrecon/frontend-ng/src/App.vue
new file mode 100644
index 00000000..55e12f8b
--- /dev/null
+++ b/roadrecon/frontend-ng/src/App.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <Sidebar :sidebarOpen="sidebarOpen" @close-sidebar="sidebarOpen = false" />
+    <!-- Content area -->
+    <div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+      <Header :sidebarOpen="sidebarOpen" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
+      <router-view :key="$route.fullPath"/>
+      <Toast />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import Sidebar from './partials/Sidebar.vue'
+import Header from './partials/Header.vue'
+import Toast from 'primevue/toast';
+import { useDark } from "@vueuse/core";
+
+
+export default {
+  name: 'App',
+  components: {
+    Sidebar,
+    Header,
+    Toast,
+  },
+  setup() {
+
+    const sidebarOpen = ref(false)
+
+    return {
+      sidebarOpen,
+    }  
+  }
+}
+</script>
+
+<style>
+  .p-card {
+    height: min-content;
+  }
+</style>
+
diff --git a/roadrecon/frontend-ng/src/css/additional-styles/flatpickr.css b/roadrecon/frontend-ng/src/css/additional-styles/flatpickr.css
new file mode 100644
index 00000000..c497d4bd
--- /dev/null
+++ b/roadrecon/frontend-ng/src/css/additional-styles/flatpickr.css
@@ -0,0 +1,239 @@
+@import 'flatpickr/dist/flatpickr.min.css';
+
+/* Customise flatpickr */
+* {
+    --calendarPadding: 24px;
+    --daySize: 36px;
+    --daysWidth: calc(var(--daySize)*7);
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -8px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.flatpickr-calendar {
+    border: inherit;
+    @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700/60 left-1/2;
+    margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
+    padding: var(--calendarPadding);
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
+}
+
+@screen lg {
+    .flatpickr-calendar {
+        @apply left-0 right-auto;
+        margin-left: 0;
+    }
+}
+
+.flatpickr-right.flatpickr-calendar {
+    @apply right-0 left-auto;
+    margin-left: 0;
+}
+
+.flatpickr-calendar.animate.open {
+    animation: fpFadeInDown 200ms ease-out;
+}
+
+.flatpickr-calendar.static {
+    position: absolute;
+    top: calc(100% + 4px);
+}
+
+.flatpickr-calendar.static.open {
+    z-index: 20;
+}
+
+.flatpickr-days {
+    width: var(--daysWidth);
+}
+
+.dayContainer {
+    width: var(--daysWidth);
+    min-width: var(--daysWidth);
+    max-width: var(--daysWidth);
+}
+
+.flatpickr-day {
+    @apply bg-gray-50 dark:bg-gray-700/20 text-sm font-medium text-gray-600 dark:text-gray-100;
+    max-width: var(--daySize);
+    height: var(--daySize);
+    line-height: var(--daySize);
+}
+
+.flatpickr-day,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+    border: none;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply bg-transparent;
+}
+
+.flatpickr-day, 
+.flatpickr-day.prevMonthDay, 
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange,
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange,
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+    border-radius: 0;
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+    @apply text-gray-400 dark:text-gray-500;
+}
+
+.rangeMode .flatpickr-day {
+    margin: 0;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+    @apply bg-violet-600 text-violet-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus,
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+    @apply bg-violet-500 text-violet-50;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: none;
+}
+
+.flatpickr-months {
+    align-items: center;
+    margin-top: -8px;
+    margin-bottom: 6px;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+    position: static;
+    height: auto;
+    @apply text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-300;    
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+    width: 7px;
+    height: 11px;
+    fill: currentColor;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+    @apply fill-current;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+    margin-left: -10px;
+}
+
+.flatpickr-months .flatpickr-next-month {
+    margin-right: -10px;
+}
+
+.flatpickr-months .flatpickr-month {
+    @apply text-gray-800 dark:text-gray-100;
+    height: auto;
+    line-height: inherit;
+}
+
+.flatpickr-current-month {
+    @apply text-sm font-medium;
+    position: static;
+    height: auto;
+    width: auto;
+    left: auto;
+    padding: 0;
+}
+
+.flatpickr-current-month span.cur-month {
+    @apply font-medium m-0;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+    background: none;
+}
+
+.flatpickr-current-month input.cur-year {
+    font-weight: inherit;
+    box-shadow: none !important;
+}
+
+.numInputWrapper:hover {
+    background: none;
+}
+
+.numInputWrapper span {
+    display: none;
+}
+
+span.flatpickr-weekday {
+    @apply text-gray-400 dark:text-gray-500 font-medium text-xs;
+}
+
+.flatpickr-calendar.arrowTop::before,
+.flatpickr-calendar.arrowTop::after,
+.flatpickr-calendar.arrowBottom::before,
+.flatpickr-calendar.arrowBottom::after {
+    display: none;
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/css/additional-styles/utility-patterns.css b/roadrecon/frontend-ng/src/css/additional-styles/utility-patterns.css
new file mode 100644
index 00000000..0fc35039
--- /dev/null
+++ b/roadrecon/frontend-ng/src/css/additional-styles/utility-patterns.css
@@ -0,0 +1,138 @@
+/* Typography */
+.h1 {
+    @apply text-4xl font-extrabold tracking-tighter;
+}
+
+.h2 {
+    @apply text-3xl font-extrabold tracking-tighter;
+}
+
+.h3 {
+    @apply text-3xl font-extrabold;
+}
+
+.h4 {
+    @apply text-2xl font-extrabold tracking-tight;
+}
+
+@screen md {
+    .h1 {
+        @apply text-5xl;
+    }
+
+    .h2 {
+        @apply text-4xl;
+    }
+}
+
+/* Buttons */
+.btn,
+.btn-lg,
+.btn-sm,
+.btn-xs {
+    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
+}
+
+.btn {
+    @apply px-3 py-2;
+}
+
+.btn-lg {
+    @apply px-4 py-3;
+}
+
+.btn-sm {
+    @apply px-2 py-1;
+}
+
+.btn-xs {
+    @apply px-2 py-0.5;
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply bg-white dark:bg-gray-900/30 border focus:ring-0 focus:ring-offset-0 dark:disabled:bg-gray-700/30 dark:disabled:border-gray-700 dark:disabled:hover:border-gray-700;
+}
+
+.form-checkbox {
+    @apply rounded;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-sm rounded-lg;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-400 dark:placeholder-gray-500;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-violet-500 checked:bg-violet-500 dark:checked:border-transparent border border-gray-300 focus:border-violet-300 dark:border-gray-700/60 dark:focus:border-violet-500/50;
+}
+
+/* Switch element */
+.form-switch {
+    @apply relative select-none;
+    width: 44px;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+}
+
+.form-switch label > span:first-child {
+    @apply absolute block rounded-full;
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+    right: 50%;
+    transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked + label {
+    @apply bg-violet-500;
+}
+
+.form-switch input[type="checkbox"]:checked + label > span:first-child {
+    left: 22px;
+}
+
+.form-switch input[type="checkbox"]:disabled + label {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-700/20 border border-gray-200 dark:border-gray-700/60;
+}
+
+.form-switch input[type="checkbox"]:disabled + label > span:first-child {
+    @apply bg-gray-400 dark:bg-gray-600;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/css/style.css b/roadrecon/frontend-ng/src/css/style.css
new file mode 100644
index 00000000..531f05c2
--- /dev/null
+++ b/roadrecon/frontend-ng/src/css/style.css
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+/* Additional styles */
+@import 'additional-styles/utility-patterns.css';
+@import 'additional-styles/flatpickr.css';
+
+@import 'tailwindcss/utilities';
+@import 'primeicons/primeicons'
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/images/logo.svg b/roadrecon/frontend-ng/src/images/logo.svg
new file mode 100644
index 00000000..68b702ee
--- /dev/null
+++ b/roadrecon/frontend-ng/src/images/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296.12 179.38"><defs><style>.cls-1,.cls-4{fill:#ed2025;}.cls-2,.cls-3{fill:#0b74b9;}.cls-2,.cls-4{fill-rule:evenodd;}.cls-5{fill:none;}</style></defs><rect class="cls-1" x="186.48" y="120.39" width="2.14" height="2.14"/><path class="cls-2" d="M191.59,108.56h-4v4.38h4Z"/><path class="cls-2" d="M218.79,109H213.6v5.07h5.19Z"/><path class="cls-2" d="M180.55,116.94h-5.13v5.13h5.13Z"/><rect class="cls-3" x="185.47" y="126.02" width="5.13" height="5.13"/><path class="cls-4" d="M200.89,111.44h3.85v-3.85h-3.85Z"/><rect class="cls-3" x="198.33" y="119.47" width="5.13" height="5.13"/><path class="cls-4" d="M180,113.22l2.1,0c0-.71,0-1.39,0-2.1l-2.1,0C180,111.82,180,112.5,180,113.22Z"/><rect class="cls-1" x="206.49" y="116.47" width="6.04" height="6.06" transform="translate(86.37 326.9) rotate(-89)"/><path class="cls-2" d="M192.72,118h2.14V115.9h-2.14Z"/><path class="cls-1" d="M207.3,130.42h-5.13v5.13h5.13v-5.13Z"/><path class="cls-3" d="M41.35,171.48H32.72L21.51,158.61h-7v12.87H7.27V132.94c6.1,0,12.2.05,18.31.05,9.07.06,13.85,6.11,13.85,12.76,0,5.28-2.42,10.61-9.73,12.09L41.35,171ZM14.53,139.76v12.31h11c4.61,0,6.59-3.08,6.59-6.16s-2-6.15-6.59-6.15Z"/><path class="cls-3" d="M82.15,152.46c-.12,9.94-6.22,19.9-19.74,19.9s-19.79-9.73-19.79-19.85,6.49-20.29,19.79-20.29S82.25,142.39,82.15,152.46Zm-32.39.16c.17,6.32,3.58,13.08,12.65,13.08S74.89,158.89,75,152.56c.11-6.48-3.52-13.74-12.59-13.74S49.6,146.13,49.76,152.62Z"/><path class="cls-3" d="M114.8,164.22H94.68l-3.3,7.26H83.52L100.78,133h7.92L126,171.48H118Zm-10.06-23.15-7.15,16.39h14.3Z"/><path class="cls-3" d="M164.28,151.9c.16,9.74-5.77,19.58-19.24,19.58H129.92V133H145C158.23,133,164.11,142.39,164.28,151.9Zm-27.16,12.59H145c8.74,0,12.2-6.37,12-12.64-.17-6-3.69-12-12-12h-7.92Z"/><path class="cls-1" d="M178,136.73v7.7h7.48v5.77H178v11.71c0,2.58,1.43,3.85,3.52,3.85a7.6,7.6,0,0,0,3.24-.83l1.87,5.72a15.07,15.07,0,0,1-5.55,1.16c-5.88.22-9.73-3.14-9.73-9.9V150.2h-5.06v-5.77h5.06v-7Z"/><path class="cls-1" d="M217.44,158c0,7.81-5.33,14.13-14.13,14.13s-14.07-6.32-14.07-14.13,5.39-14.13,14-14.13S217.44,150.2,217.44,158ZM196,158c0,4.13,2.47,8,7.36,8s7.37-3.84,7.37-8-2.86-8-7.37-8C198.47,149.93,196,153.88,196,158Z"/><path class="cls-1" d="M249,158c0,7.81-5.34,14.13-14.13,14.13s-14.08-6.32-14.08-14.13,5.39-14.13,14-14.13S249,150.2,249,158Zm-21.5,0c0,4.13,2.48,8,7.37,8s7.36-3.84,7.36-8-2.85-8-7.36-8C230,149.93,227.5,153.88,227.5,158Z"/><path class="cls-1" d="M260.27,133.05v38.43h-6.66V133.05Z"/><path class="cls-1" d="M283.85,151.57a9.14,9.14,0,0,0-6.71-2.41c-3.19,0-4.94,1-4.94,2.69s1.59,2.75,5.05,3c5.12.33,11.6,1.48,11.6,8.68,0,4.79-3.9,8.91-11.65,8.91-4.29,0-8.58-.71-12.54-4.84l3.3-4.78c1.93,2.14,6.33,3.74,9.35,3.79,2.53.06,4.89-1.26,4.89-3.24s-1.54-2.64-5.39-2.86c-5.11-.38-11.21-2.25-11.21-8.41s6.49-8.47,11.43-8.47c4.24,0,7.43.83,10.56,3.58Z"/><path class="cls-2" d="M207.35,109.29h2.14v-2.13h-2.14Z"/><rect class="cls-1" x="215.47" y="123.82" width="2.14" height="2.14"/><path class="cls-5" d="M132.6,89.21l26.67-10.73-4.7-9.14,26.42-11-5-9.3,23.3-9.73a25.86,25.86,0,0,0-6.07-.72h-.65l-21.09,8.79,5,9.27L150.23,67.57l4.66,9.05L128.17,87.35l4.76,9.11-19.66,7.93h9.07l15-6.06Z"/><path class="cls-3" d="M171.44,47.43l21.09-8.79a25.7,25.7,0,0,0-7.12,1.18v-.27A32,32,0,0,0,123.14,29.3,24.76,24.76,0,0,0,85.67,50.54a24.91,24.91,0,0,0,.43,4.6,24.76,24.76,0,0,0,3.59,49.25h23.58l19.66-7.93-4.76-9.11,26.72-10.73-4.66-9.05L176.48,56.7Z"/><path class="cls-1" d="M182.09,99.05v4.15H186v-1.87h1.85V93.06h6V90.44h5.84v5.94H205v5.53h2.74v-2h2.13v2h3.69V99.05h5.19v-6h7.56V90.74h4.06V87.13h1.82a21.75,21.75,0,0,0,.15-2.44A19.72,19.72,0,0,0,219,66c0-.51.05-1,.05-1.55a25.85,25.85,0,0,0-19.77-25.12L176,49.08l5,9.3-26.42,11,4.7,9.14L132.6,89.21l4.75,9.12-15,6.06h53.9V99.05Zm27.42-6.48h-3.95v-4.2h3.95Zm-8-20.57h5.28v5.33h-5.28Zm-12.68,8.22h3.95v4.19h-3.95Zm-7.3,10.25h3.95v4.19h-3.95Z"/><path class="cls-1" d="M193.79,98.85v5.54h5.41V98.85Z"/><path class="cls-2" d="M224.33,100.82v-.24l-.34.24Z"/><path class="cls-2" d="M222.19,98.68v2.14H224l.34-.24v-1.9Z"/><path class="cls-2" d="M188.5,102.14v2.13h2.14v-2.13Z"/></svg>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/main.js b/roadrecon/frontend-ng/src/main.js
new file mode 100644
index 00000000..a08878a7
--- /dev/null
+++ b/roadrecon/frontend-ng/src/main.js
@@ -0,0 +1,45 @@
+import { createApp } from 'vue'
+import router from './router'
+import App from './App.vue'
+import axios from './plugins/axios'
+import PrimeVue from 'primevue/config';
+import Noir from './presets/Noir.js';
+import ToastService from 'primevue/toastservice';
+import JsonViewer from "vue3-json-viewer";
+
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+import './css/style.css'
+import dayjs from 'dayjs'
+
+export const app = createApp(App)
+app.use(router)
+app.use(axios,{
+    baseUrl: 'http://localhost:5000/'
+})
+app.use(PrimeVue, {
+    theme: {
+        preset: Noir,
+        options: {
+            prefix: 'p',
+            darkModeSelector: '.p-dark',
+            cssLayer: false,
+        }
+    }
+});
+
+//Date conversion
+app.config.globalProperties.$dayjs = dayjs
+
+//Notification service
+app.use(ToastService)
+
+//JSON Viewer
+app.use(JsonViewer);
+
+//Components
+app.component("DataTable",DataTable)
+app.component("Column",Column)
+
+app.mount('#app')
diff --git a/roadrecon/frontend-ng/src/pages/AdministrativeUnits.vue b/roadrecon/frontend-ng/src/pages/AdministrativeUnits.vue
new file mode 100644
index 00000000..6dc0fe18
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/AdministrativeUnits.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="administrativeUnits" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"/>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+const filters = ref();
+
+export default {
+  name: 'AdministrativeUnits',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      administrativeUnits: [],
+      columns: [
+        { field: 'displayName', header: 'Name' },
+        { field: 'description', header: 'Description' },
+        { field: 'membershipRule', header: 'Membership rule' },
+      ],
+      filterFields:["displayName","description","membershipRule"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get("/api/administrativeunits",{params:params})
+        .then(response => {
+            this.administrativeUnits=response.data.items;
+            this.totalRecords=response.data.total;
+        })
+        .catch(error => {
+          showError("Error loading Administrative units from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/ApplicationRoles.vue b/roadrecon/frontend-ng/src/pages/ApplicationRoles.vue
new file mode 100644
index 00000000..9da32e12
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/ApplicationRoles.vue
@@ -0,0 +1,87 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="approles" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+export default {
+  name: 'ApplicationRoles',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      approles: [],
+      columns: [
+        { field: 'principalDisplayName', header: 'Principal Name' },
+        { field: 'principalType', header: 'Principal Type' },
+        { field: 'resourceDisplayName', header: 'Application' },
+        { field: 'value', header: 'Role' },
+        { field: 'desc', header: 'Description' },
+      ],
+      filterFields:["principalDisplayName","principalType","resourceDisplayName","value","desc"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"principalDisplayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/approles`,{params:params})
+        .then(response => {
+            this.approles=response.data.items;
+            this.totalRecords=response.data.total;
+        })
+        .catch(error => {
+            showError("Error loading App roles from API", error.message)
+            console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Applications.vue b/roadrecon/frontend-ng/src/pages/Applications.vue
new file mode 100644
index 00000000..2e301538
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Applications.vue
@@ -0,0 +1,106 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="applications" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { showError } from '../services/toast';
+import { FilterMatchMode } from '@primevue/core/api';
+import axios from 'axios'
+
+const filters = ref();
+
+export default {
+  name: 'Applications',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      applications: [],
+      columns: [
+        { field: 'displayName', header: 'Name' },
+        { field: 'availableToOtherTenants', header: 'Multitenant', isTag: true },
+        { field: 'homepage', header: 'Homepage' },
+        { field: 'publicClient', header: 'OAuth2 public client', isTag: true },
+        { field: 'oauth2AllowImplicitFlow', header: 'OAuth2 implicit flow', isTag: true },
+        { field: 'passwordCredentials', header: 'Passwords' },
+        { field: 'keyCredentials', header: 'Keys' },
+        { field: 'appRoles', header: 'Roles defined' },
+        { field: 'oauth2Permissions', header: 'OAuth2 Permissions' },
+        { field: 'ownerUsers', header: 'Custom owner', isTag: true },
+      ],
+      filterFields:["displayName","availableToOtherTenants","homepage","publicClient","oauth2AllowImplicitFlow","passwordCredentials","keyCredentials","appRoles","oauth2Permissions","ownerUsers"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"displayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/applications`,{params:params})
+        .then(response => {
+            this.applications=response.data.items;
+            this.totalRecords=response.data.total;
+            
+            for(var i=0;i<this.applications.length;i++){
+              this.applications[i].availableToOtherTenants = this.applications[i].availableToOtherTenants ? "True" : "False"
+              this.applications[i].oauth2AllowImplicitFlow = this.applications[i].oauth2AllowImplicitFlow ? "True" : "False"
+              this.applications[i].publicClient = this.applications[i].publicClient ? "True" : "False"
+              this.applications[i].passwordCredentials = this.applications[i].passwordCredentials.length
+              this.applications[i].keyCredentials = this.applications[i].keyCredentials.length
+              this.applications[i].appRoles = this.applications[i].appRoles.length
+              this.applications[i].oauth2Permissions = this.applications[i].oauth2Permissions.length
+              this.applications[i].ownerUsers = this.applications[i].ownerUsers.length > 0 ? "True" : "False"
+            }
+        })
+        .catch(error => {
+            showError("Error loading Applications from API", error.message)
+            console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Dashboard.vue b/roadrecon/frontend-ng/src/pages/Dashboard.vue
new file mode 100644
index 00000000..ee1eb0db
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Dashboard.vue
@@ -0,0 +1,407 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+
+        <!-- Right: Actions -->
+        <div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
+        </div>
+
+      </div>
+      <!-- Cards -->
+      <div class="grid grid-cols-12 p-4 gap-4">
+        <div class="col-span-12">
+          <div class="flex gap-4">
+            <div v-for="(card, index) in cards" class="w-full md:w-1/2 lg:w-1/3 xl:w-1/6">
+              <Card :index @click="goToDetail(index)" class="h-full">
+                <template #content>
+                  <div
+                    class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between h-full !rounded-2xl">
+                    <div class="overview-info">
+                      <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                        {{ card.title }}
+                      </div>
+                      <div class="m-0 text-surface-500 dark:text-surface-300 text-4xl font-semibold">
+                        {{ card.value.toLocaleString('fr-FR') }}
+                      </div>
+                    </div>
+                    <i :class="[, 'pi', card.icon, '!text-3xl']"></i>
+                  </div>
+                </template>
+              </Card>
+            </div>
+          </div>
+        </div>
+        <div class="pt-0 col-span-8">
+          <Card>
+            <template #title>
+              <div class="m-0 text-surface-500 dark:text-surface-300 text-2xl font-semibold">
+                Application consent settings
+              </div>
+            </template>
+            <template #content>
+              <div class="flex gap-4" v-if="appConsentSettings">
+                <div v-for="(setting, index) in appConsentSettings" class="flex m-0! p-2" :class="dynamicWidth">
+                  <Tag class="w-full !p-0">
+                    <Card class="p-tag-info size-full">
+                      <template #content>
+                        <div
+                          class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between h-full !rounded-2xl">
+                          <div v-if="setting == 'ManagePermissionGrantsForOwnedResource.microsoft-dynamically-managed-permissions-for-team'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Resource specific consent for Teams: Managed by Microsoft
+                            </div>
+                          </div>
+                          <div v-else-if="setting == 'ManagePermissionGrantsForOwnedResource.microsoft-dynamically-managed-permissions-for-chat'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Resource specific consent for chats: Managed by Microsoft
+                            </div>
+                          </div>
+                          <div v-else-if="setting == 'ManagePermissionGrantsForSelf.microsoft-user-default-low'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Users can consent to limited permissions only (default)
+                            </div>
+                          </div>
+                          <div v-else-if="setting == 'ManagePermissionGrantsForSelf.microsoft-user-default-legacy'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Users can consent to applications (insecure old default)
+                            </div>
+                          </div>
+                          <div v-else class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Unknown: {{ setting }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </Card>
+                  </Tag>
+                </div>
+              </div>
+              <div v-else>
+                <div class="flex m-0! p-2">
+                  <Tag class="w-full !p-0">
+                    <Card class="p-tag-danger size-full">
+                      <template #content>
+                        <div
+                          class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between h-full !rounded-2xl">
+                          <div class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              User consent is disabled
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </Card>
+                  </Tag>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </div>
+        <div class="pt-0 col-span-4">
+          <Card class="h-full">
+            <template #title>
+              <div class="m-0 text-surface-500 dark:text-surface-300 text-2xl font-semibold">
+                Guest access settings
+              </div>
+            </template>
+            <template #content>
+              <div class="flex gap-4">
+                <div class="flex m-0! p-2 w-full">
+                  <Tag class="w-full !p-0">
+                    <Card class="p-tag-info size-full">
+                      <template #content>
+                        <div
+                          class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between h-full !rounded-2xl">
+                          <div v-if="guestAccessSettings == 'a0b1b346-4d3e-4e8b-98f8-753987be4970'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Same as member users
+                            </div>
+                          </div>
+                          <div v-else-if="guestAccessSettings == '10dae51f-b6af-4016-8d66-8c2a99b929b3'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Limited access (default)
+                            </div>
+                          </div>
+                          <div v-else-if="guestAccessSettings == '2af84b1e-32c8-42b7-82bc-daa82404023b'" class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Restricted access
+                            </div>
+                          </div>
+                          <div v-else class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              Unknown: {{ guestAccessSettings }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </Card>
+                  </Tag>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </div>
+        <div class="col-span-12 xl:col-span-7 pt-0">
+          <Card>
+            <template #title>
+              <div class="m-0 text-surface-500 dark:text-surface-300 text-2xl font-semibold">
+                Default user role permissions
+              </div>
+            </template>
+            <template #content>
+              <div class="flex gap-4">
+                <div v-for="(userPermissionCard, index) in userPermissionCards" class="flex w-1/3 m-0! p-2">
+                  <Tag class="w-full !p-0">
+                    <Card :class="[userPermissionCard.value ? 'p-tag-success' : 'p-tag-danger ']" class="size-full">
+                      <template #content>
+                        <div
+                          class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between h-full !rounded-2xl">
+                          <div class="overview-info">
+                            <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                              {{ userPermissionCard.title }}
+                            </div>
+                            <div class="m-0 text-surface-500 dark:text-surface-300 text-4xl font-semibold">
+                              {{ userPermissionCard.value ? "Yes" : "No" }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                    </Card>
+                  </Tag>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </div>
+        <div class="col-span-12 xl:col-span-5 pt-0">
+          <div class="flex gap-4 items-center h-full">
+            <div v-for="(card, index) in smallCards" class="basis-1/2 h-full">
+              <Card :class="[card.value ? 'p-tag-success' : 'p-tag-danger ']" class="h-full">
+                <template #content>
+                  <div
+                    class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                    <div class="overview-info">
+                      <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                        {{ card.title }}
+                      </div>
+                      <div class="m-0 text-surface-500 dark:text-surface-300 text-4xl font-semibold">
+                        {{ card.value ? "Yes" : "No" }}
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </Card>
+            </div>
+          </div>
+        </div>
+        <div class="col-span-12 xl:col-span-7 pt-0">
+          <Card>
+            <template #title>
+              <div class="m-0 text-surface-500 dark:text-surface-300 text-2xl font-semibold">
+                Tenant domains
+              </div>
+            </template>
+            <template #content>
+              <ObjectTable :lazy="false" :columns :values="tenantDomains" :filterFields :filters :totalRecords :rowsPerPageOptions="[10,25,50]" />
+            </template>
+          </Card>
+        </div>
+        <div class="col-span-12 xl:col-span-5 pt-0 !pl-0">
+          <Card>
+            <template #title>
+              <div class="m-0 text-surface-500 dark:text-surface-300 text-2xl font-semibold">
+                Tenant information
+              </div>
+            </template>
+            <template #content>
+              <div v-for="(item, index) in overviewItems" class="p-6 gap-4"
+                :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+                <div class="flex flex-row justify-items-stretch gap-4">
+                  <div class="justify-self-start basis-1/4 gap-2 ">
+                    <div class="text-md font-semibold font-medium">{{ item.name }}</div>
+                  </div>
+                  <div class="justify-self-start gap-4">
+                    <span class="text-md">{{ item.value }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import Card from 'primevue/card';
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import DataView from 'primevue/dataview';
+import Tag from 'primevue/tag';
+import { showError } from '../services/toast';
+import { FilterMatchMode } from '@primevue/core/api';
+import axios from 'axios'
+
+export default {
+  name: 'Dashboard',
+  props: {
+    name: String
+  },
+  components: {
+    Card,
+    ObjectTable,
+    DataView,
+    Tag
+  },
+  methods: {
+    goToDetail($index) {
+      this.$router.push({ name: this.cards[$index].title });
+    }
+  },
+  computed: {
+    dynamicWidth() {
+      const length = this.guestAccessSettings.length;
+      return ` w-1/${length}`;
+    }
+  },
+  data() {
+    return {
+      cards: [
+        {
+          "title": "Users",
+          "icon": "pi pi-user",
+          "value": 0
+        },
+        {
+          "title": "Groups",
+          "icon": "pi pi-users",
+          "value": 0
+        },
+        {
+          "title": "Applications",
+          "icon": "pi pi-box",
+          "value": 0
+        },
+        {
+          "title": "Service Principals",
+          "icon": "",
+          "value": 0
+        },
+        {
+          "title": "Devices",
+          "icon": "pi pi-desktop",
+          "value": 0
+        },
+        {
+          "title": "Administrative Units",
+          "icon": "",
+          "value": 0
+        }
+      ],
+      smallCards:[],
+      userPermissionCards:[],
+      overviewItems: [],
+      tenantDomains: [],
+      guestAccessSettings: [],
+      columns: [
+        { field: 'name', header: 'Name' },
+        { field: 'type', header: 'Type' },
+        { field: 'capabilities', header: 'Capabilities' },
+        { field: 'default', header: 'Properties' },
+      ],
+      filterFields: ["name","type","capabilities","default"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      appConsentSettings: []
+    }
+  },
+  mounted() {
+    axios
+      .get("/api/stats")
+      .then(response => {
+        const { countAdministrativeUnits, countApplications, countDevices, countGroups, countServicePrincipals, countUsers } = response.data
+        this.cards.filter((o) => { return o.title == "Users" })[0].value = countUsers
+        this.cards.filter((o) => { return o.title == "Groups" })[0].value = countGroups
+        this.cards.filter((o) => { return o.title == "Applications" })[0].value = countApplications
+        this.cards.filter((o) => { return o.title == "Service Principals" })[0].value = countServicePrincipals
+        this.cards.filter((o) => { return o.title == "Devices" })[0].value = countDevices
+        this.cards.filter((o) => { return o.title == "Administrative Units" })[0].value = countAdministrativeUnits
+      })
+      .catch(error => {
+        showError("Error loading stats from API", error.message)
+        console.log(error)
+      })
+
+    axios
+      .get("/api/tenantdetails")
+      .then(response => {
+        this.tenantDomains = response.data.verifiedDomains
+        this.totalRecords = response.data.verifiedDomains.length
+
+        const tenantInformation = [
+          {
+            name: "Name", value: response.data.displayName
+          },
+          {
+            name: "Tenant ID", value: response.data.objectId
+          },
+          {
+            name: "Syncs from AD", value: response.data.dirSyncEnabled ? "Yes" : "No"
+          },
+        ]
+
+        this.overviewItems = tenantInformation
+      })
+      .catch(error => {
+        console.log(error)
+      })
+
+      axios
+      .get("/api/authorizationpolicies")
+      .then(response => {
+        const defaultUserRolePermissions = [
+          {
+            title: "Create Apps", value: response.data[0].defaultUserRolePermissions.allowedToCreateApps
+          },
+          {
+            title: "Create Security Groups", value: response.data[0].defaultUserRolePermissions.allowedToCreateSecurityGroups
+          },
+          {
+            title: "Read Other Users", value: response.data[0].defaultUserRolePermissions.allowedToReadOtherUsers
+          },
+        ]
+        this.userPermissionCards = defaultUserRolePermissions
+
+        this.appConsentSettings = response.data[0].permissionGrantPolicyIdsAssignedToDefaultUserRole
+
+        this.guestAccessSettings = response.data[0].guestUserRoleId
+
+        const smallCardsValues = [
+          {
+            title:"Self-service password reset",
+            value: response.data[0].allowedToUseSSPR
+          },
+          {
+            title:"MSOnline PowerShell blocked",
+            value: response.data[0].blockMsolPowerShell
+          }
+        ]
+        this.smallCards = smallCardsValues
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Devices.vue b/roadrecon/frontend-ng/src/pages/Devices.vue
new file mode 100644
index 00000000..ede4e8a7
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Devices.vue
@@ -0,0 +1,99 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="devices" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+export default {
+  name: 'Devices',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      devices: [],
+      columns: [
+        { field: 'displayName', header: 'Name' },
+        { field: 'deviceManufacturer', header: 'Manufacturer' },
+        { field: 'accountEnabled', header: 'Enabled', isTag: true },
+        { field: 'deviceModel', header: 'Model' },
+        { field: 'deviceOSType', header: 'OS' },
+        { field: 'deviceOSVersion', header: 'OS Version' },
+        { field: 'deviceTrustType', header: 'Trust type' },
+        { field: 'isCompliant', header: 'Compliant', isTag: true },
+        { field: 'isManaged', header: 'Managed', isTag: true },
+        { field: 'isRooted', header: 'Rooted', isTag: true },
+      ],
+      filterFields:["displayName","deviceManufacturer","accountEnabled","deviceModel","deviceOSType","deviceOSVersion","deviceTrustType","isCompliant","isManaged","isRooted"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"displayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/devices`,{params:params})
+        .then(response => {
+            this.devices=response.data.items;
+            this.totalRecords=response.data.total;
+            
+            for(var i=0;i<this.devices.length;i++){
+              this.devices[i].accountEnabled = this.devices[i].accountEnabled ? "True" : "False"
+              this.devices[i].isCompliant = this.devices[i].isCompliant ? "True" : "False"
+              this.devices[i].isManaged = this.devices[i].isManaged ? "True" : "False"
+              this.devices[i].isRooted = this.devices[i].isRooted ? "True" : "False"
+            }
+        })
+        .catch(error => {
+          showError("Error loading devices from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+        });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/DirectoryRoles.vue b/roadrecon/frontend-ng/src/pages/DirectoryRoles.vue
new file mode 100644
index 00000000..1eb44d62
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/DirectoryRoles.vue
@@ -0,0 +1,120 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0 flex">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+          <Button @click="toggleAll" class="ml-4 px-4 py-2">Toggle All</Button>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 rounded-3xl overflow-auto">
+        <Accordion :value="expandedPanels" multiple expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+          <template v-for="(directoryRole, index) in directoryroles">
+            <AccordionPanel :value="String(index)" v-if="directoryRole.assignments.length > 0">
+                <AccordionHeader>
+                  <span class="flex items-center gap-2 w-full">
+                    <Tag severity="info" :value="directoryRole.assignments.length"></Tag>
+                    <span>{{ directoryRole.displayName }}</span>
+                  </span>
+                </AccordionHeader>
+                <AccordionContent>
+                  <ObjectTable multiselect :columns="columns" :values="directoryRole.assignments" :filterFields="filterFields" :filters="filters" :lazy="false" />
+                </AccordionContent>
+            </AccordionPanel>
+          </template>
+        </Accordion>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+import { showError } from '../services/toast';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import axios from 'axios'
+
+const filters = ref();
+
+export default {
+  name: 'DirectoryRoles',
+  props: {
+    name: String,
+  },
+  components: {
+    ObjectTable,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
+    Tag,
+    Button
+  },
+  data(){
+    return {
+      directoryroles: [],
+      assignments: [],
+      columns: [
+        { field: 'principal.displayName', header: 'Principal Name' },
+        { field: 'scopeNames', header: 'Scope' },
+        { field: 'type', header: 'Assignment Type', isTag: true, tagSuccessValue: "Active" },
+        { field: 'principal.objectType', header: 'Principal Type' },
+        { field: 'principal.userPrincipalName', header: 'userPrincipalName' },
+        { field: 'principal.dirSyncEnabled', header: 'Account type' },
+        { field: 'principal.accountEnabled', header: 'Status' },
+      ],
+      filterFields:["principal.displayName","scopeNames","type","principal.objectType","principal.userPrincipalName","principal.dirSyncEnabled","principal.accountEnabled"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      expandedPanels: []
+    }
+  },
+  methods: {
+    toggleAll() {
+      if (this.expandedPanels.length === this.directoryroles.length) {
+        this.expandedPanels = [];
+      } else {
+        this.expandedPanels = this.directoryroles.map((_, index) => String(index));
+      }
+    }
+  },
+  mounted() {
+    axios
+        .get("/api/roledefinitions")
+        .then(response => {
+            this.directoryroles=response.data;
+            for(var i=0;i<this.directoryroles.length;i++){
+              for(var j=0;j<this.directoryroles[i].assignments.length;j++){
+                this.directoryroles[i].assignments[j].scopeNames = this.directoryroles[i].assignments[j].scopeNames[0]
+                this.directoryroles[i].assignments[j].type = this.directoryroles[i].assignments[j].type == "assignment" ? "Active" : "Disabled"
+                if(this.directoryroles[i].assignments[j].principal){
+                  if(this.directoryroles[i].assignments[j].principal.objectType == "User"){
+                    this.directoryroles[i].assignments[j].principal.dirSyncEnabled = this.directoryroles[i].assignments[j].principal.dirSyncEnabled ? "AD" : "Cloud"
+                    this.directoryroles[i].assignments[j].principal.accountEnabled = this.directoryroles[i].assignments[j].principal.accountEnabled ? "Enabled" : "Disabled"
+                  }
+                  if(this.directoryroles[i].assignments[j].principal.objectType == "ServicePrincipal"){
+                    this.directoryroles[i].assignments[j].principal.accountEnabled = this.directoryroles[i].assignments[j].principal.accountEnabled ? "Enabled" : "Disabled"
+                  }
+                }
+              }
+            }
+        })
+        .catch(error => {
+            showError("Error loading role definitions from API", error.message)
+            console.log(error)
+      })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Groups.vue b/roadrecon/frontend-ng/src/pages/Groups.vue
new file mode 100644
index 00000000..e4c9ede6
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Groups.vue
@@ -0,0 +1,101 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="groups" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+const filters = ref();
+
+export default {
+  name: 'Groups',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      mappedUsers: [], // mapped user data
+      groups: [],
+      columns: [
+        { field: 'displayName', header: 'Name' },
+        { field: 'description', header: 'Description' },
+        { field: 'groupTypes', header: 'Group type' },
+        { field: 'dirSyncEnabled', header: 'Group source' },
+        { field: 'mail', header: 'Mail' },
+        { field: 'isPublic', header: 'Public?', isTag: true },
+        { field: 'isAssignableToRole', header: 'Role assignable?', isTag: true },
+        { field: 'membershipRule', header: 'Dynamic membership' }
+      ],
+      filterFields:["displayName","description","groupTypes","dirSyncEnabled","mail","isPublic","isAssignableToRole","membershipRule"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"displayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/groups`,{params:params})
+        .then(response => {
+            this.groups=response.data.items;
+            this.totalRecords=response.data.total;
+            
+            for(var i=0;i<this.groups.length;i++){
+              this.groups[i].dirSyncEnabled = this.groups[i].dirSyncEnabled ? "Synced with AD" : "Cloud-only"
+              this.groups[i].groupTypes = this.groups[i].groupTypes.includes("Unified") ? "Microsoft 365" : "Security"
+              this.groups[i].isPublic = this.groups[i].isPublic ? "True" : "False"
+              this.groups[i].isAssignableToRole = this.groups[i].isAssignableToRole ? "True" : "False"
+            }
+        })
+        .catch(error => {
+          showError("Error loading role definitions from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/OAuth2Permissions.vue b/roadrecon/frontend-ng/src/pages/OAuth2Permissions.vue
new file mode 100644
index 00000000..41041ebf
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/OAuth2Permissions.vue
@@ -0,0 +1,88 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="oauth2permissions" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        noSearch
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+export default {
+  name: 'OAuth2Permissions',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      oauth2permissions: [],
+      columns: [
+        { field: 'type', header: 'Approval type' },
+        { field: 'userdisplayname', header: 'Principal Name' },
+        { field: 'sourceapplication', header: 'Source Application (permissions recipient)' },
+        { field: 'targetapplication', header: 'Target Application (permission to access)' },
+        { field: 'scope', header: 'Scope (permissions)' },
+        { field: 'expiry', header: 'Expiry' },
+      ],
+      filterFields:["type","userdisplayname","sourceapplication","targetapplication","scope","expiry","keyCredentials","appRoles","oauth2Permissions","ownerUsers"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/oauth2permissions`,{params:params})
+        .then(response => {
+            this.oauth2permissions=response.data.items;
+            this.totalRecords=response.data.total;
+        })
+        .catch(error => {
+          showError("Error loading OAuth2 permissions from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+        });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Policies.vue b/roadrecon/frontend-ng/src/pages/Policies.vue
new file mode 100644
index 00000000..5efa29fa
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Policies.vue
@@ -0,0 +1,727 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0 flex">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+          <Button @click="toggleAllPolicies" :class="{'p-button-success':showAllPolicies}" class="ml-4 px-4 py-2">Toggle All policies</Button>
+          <Button @click="toggleEnabledPolicies" :class="{'p-button-success':showEnabledOnly}" class="ml-4 px-4 py-2">Show Enabled Policies</Button>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 rounded-3xl overflow-auto" v-if="!loading">
+        <!--Don't know why its 11 -->
+        <Accordion :value="expandedPoliciesPanels" multiple expandIcon="pi pi-plus" collapseIcon="pi pi-minus" v-if="policies">
+          <template v-for="(policy, index) in filteredPolicies" :key="index">
+            <AccordionPanel :value="String(index)">
+              <AccordionHeader>
+                <span :ref="policy.displayName" class="flex items-center gap-2 w-full">
+                  <Tag :severity="policy.policyDetail.State == 'Enabled' ? 'success' :
+                    policy.policyDetail.State == 'Disabled' ? 'danger' :
+                      'info'" :value="policy.policyDetail.State">
+                  </Tag>
+                  <span>{{ policy.displayName }}</span>
+                </span>
+              </AccordionHeader>
+              <AccordionContent v-if="policy.policyDetail.Conditions">
+                <Tabs value="0" class="rounded">
+                  <TabList>
+                    <Tab value="0">
+                      Overview
+                    </Tab>
+                    <Tab value="1">
+                      Raw
+                    </Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel value="0">
+                      <div v-if="policy.policyDetail.Conditions.Users">
+                        <span class="pi pi-user"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Users</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Users.Include">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="item in policy.policyDetail.Conditions.Users.Include"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element,index in item">
+                                    <template v-if="index == 'GuestsOrExternalUsers'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <p>{{objectType}}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else-if="index == 'Users'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <a v-if="objectType.displayName != 'All'" class="hover:underline" :href="'/User/'+objectType.objectId">{{ objectType.displayName }}</a>
+                                        <p v-else>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else-if="index == 'Groups'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <a v-if="objectType.displayName != 'All'" class="hover:underline" :href="'/Group/'+objectType.objectId">{{ objectType.displayName }}</a>
+                                        <p v-else>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else>
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <p>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Users.Exclude">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="item in policy.policyDetail.Conditions.Users.Exclude"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element,index in item">
+                                    <template v-if="index == 'GuestsOrExternalUsers'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <p>{{ objectType }}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else-if="index == 'Users'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <a v-if="objectType.displayName != 'All'" class="hover:underline" :href="'/User/'+objectType.objectId">{{ objectType.displayName }}</a>
+                                        <p v-else>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else-if="index == 'Groups'">
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <a v-if="objectType.displayName != 'All'" class="hover:underline" :href="'/Group/'+objectType.objectId">{{ objectType.displayName }}</a>
+                                        <p v-else>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                    <template v-else>
+                                      <p>{{index}}:</p>
+                                      <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                        <p>{{ objectType.displayName }}</p>
+                                      </ul>
+                                    </template>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.ServicePrincipals">
+                        <span class="pi pi-user"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Service Principals</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.ServicePrincipals.Include">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="item in policy.policyDetail.Conditions.ServicePrincipals.Include"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element,index in item">
+                                    <p>{{index}}:</p>
+                                    <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                      <a v-if="objectType.displayName != 'All'" class="hover:underline" :href="'/ServicePrincipal/'+objectType.objectId">{{ objectType.displayName }}</a>
+                                      <p v-else>{{ objectType.displayName }}</p>
+                                    </ul>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.ServicePrincipals.Exclude">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="item in policy.policyDetail.Conditions.ServicePrincipals.Exclude"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element,index in item">
+                                    <p>{{index}}:</p>
+                                    <ul v-for="objectType in element" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                      <p>{{ objectType.displayName }}</p>
+                                    </ul>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.Applications">
+                        <span class="pi pi-box"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4"
+                          v-if="policy.policyDetail.Conditions.Applications">Applications</span>
+                        <div class="flex flex-wrap" v-if="policy.policyDetail.Conditions.Applications">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Applications.Include.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.Applications.Include[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <a v-if="element.displayName != 'All'" class="hover:underline" :href="'/Application/'+element.objectId">{{ element.displayName }}</a>
+                                    <p v-else>{{ element.displayName }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Applications.Exclude">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.Applications.Exclude[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <a v-if="element.displayName != 'All'" class="hover:underline" :href="'/Application/'+element.objectId">{{ element.displayName }}</a>
+                                    <p v-else>{{ element.displayName }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.ClientTypes">
+                        <span class="pi pi-mobile"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Client
+                          types</span>
+                        <div class="flex flex-wrap" v-if="policy.policyDetail.Conditions.ClientTypes">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.ClientTypes.Include">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.ClientTypes.Include[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <p v-if="element == 'All'">All ClientTypes</p>
+                                    <p v-else>{{ element }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.ClientTypes.Exclude && policy.policyDetail.Conditions.ClientTypes.Exclude.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.ClientTypes.Exclude[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <p v-if="element == 'All'">All ClientTypes</p>
+                                    <p v-else>{{ element }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.DevicePlatforms">
+                        <span class="pi pi-desktop"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Platforms</span>
+                        <div class="flex flex-wrap" v-if="policy.policyDetail.Conditions.DevicePlatforms">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.DevicePlatforms.Include && policy.policyDetail.Conditions.DevicePlatforms.Include.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.DevicePlatforms.Include[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <p v-if="element == 'All'">All Platforms</p>
+                                    <p v-else>{{ element }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.DevicePlatforms.Exclude && policy.policyDetail.Conditions.DevicePlatforms.Exclude.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.DevicePlatforms.Exclude[0]"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="element in item">
+                                    <p v-if="element == 'All'">All Platforms</p>
+                                    <p v-else>{{ element }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.Devices">
+                        <span class="pi pi-desktop"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Devices</span>
+                        <div class="flex flex-wrap" v-if="policy.policyDetail.Conditions.Devices">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Devices.Include && policy.policyDetail.Conditions.Devices.Include.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="condition in policy.policyDetail.Conditions.Devices.Include" class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="item,index in condition">
+                                    <p v-if="index == 'DeviceRule'">Rule : <i>{{item }}</i></p>
+                                    <p v-if="index == 'DeviceStates'">Device State: {{ item }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Devices.Exclude">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="condition in policy.policyDetail.Conditions.Devices.Exclude"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li v-for="item,index in condition">
+                                    <p v-if="index == 'DeviceRule'">Rule : <i>{{ item }}</i></p>
+                                    <p v-if="index == 'DeviceStates'">Device State: {{ item }}</p>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Conditions.Locations">
+                        <span class="pi pi-desktop"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Locations</span>
+                        <div class="flex flex-wrap" v-if="policy.policyDetail.Conditions.Locations">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Locations.Include  && policy.policyDetail.Conditions.Locations.Include.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Including
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.Locations.Include"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <a v-if="item.displayName != 'All'" class="hover:underline" @click="goto(item)">{{ item }}</a>
+                                  <p v-else>{{ item }}</p>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="flex-1 m-4 p-tag-danger p-4 rounded-2xl"
+                            v-if="policy.policyDetail.Conditions.Locations.Exclude && policy.policyDetail.Conditions.Locations.Exclude.length > 0">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <div class="m-0 mb-1 text-surface-500 dark:text-surface-300 text-lg font-semibold">
+                                  Excluding
+                                </div>
+                                <ul v-for="(item, index) in policy.policyDetail.Conditions.Locations.Exclude"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <a class="hover:underline" @click="goto(item)">{{ item }}</a>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.Controls">
+                        <span class="pi pi-check-circle"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Controls</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-info p-4 rounded-2xl">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <template v-if="policy.policyDetail.Controls">
+                                  <ul v-for="(item, index) in policy.policyDetail.Controls"
+                                    class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                    <li v-for="(control) in item.Control">
+                                      <p v-if="control != Block">{{ control }}</p>
+                                      <p v-else>Deny logon</p>
+                                    </li>
+                                    <li v-for="(stid) in item.AuthStrengthIds">
+                                      <p>{{ resolve_authstrength(stid) }}</p>
+                                    </li>
+                                  </ul>
+                                </template>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="policy.policyDetail.SessionControls">
+                        <span class="pi pi-check-circle"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Session Controls</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-info p-4 rounded-2xl">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <template v-if="policy.policyDetail.SessionControls">
+                                  <ul v-for="(item, index) in policy.policyDetail.SessionControls"
+                                    class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                    <li>
+                                      <p v-if="item == 'SignInFrequency' && policy.policyDetail.SignInFrequencyTimeSpan">{{ item }} : {{ policy.policyDetail.SignInFrequencyTimeSpan.split(".")[0] }} day(s) {{ policy.policyDetail.SignInFrequencyTimeSpan.split(".")[1] }}</p>
+                                      <p v-else-if="item == 'PersistentBrowserSessionMode' && policy.policyDetail.PersistentBrowserSessionMode">{{ item }} : {{ policy.policyDetail.PersistentBrowserSessionMode }}</p>
+                                      <p v-else>{{ item }}</p>
+                                    </li>
+                                  </ul>
+                                </template>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </TabPanel>
+                    <TabPanel value="1">
+                      <pre id="code" class="text-gray-300">
+                        <code>
+                          {{ policy.raw }}
+                        </code>
+                      </pre>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </AccordionContent>
+            </AccordionPanel>
+          </template>
+        </Accordion>
+        <Card v-else>
+          <template class="flex flex-col" #content>
+            <p>No policies</p>
+          </template>
+        </Card>
+
+        <div class="flex">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">Named Locations</h1>
+          <Button @click="toggleAllLocations" class="ml-4 px-4 py-2">Toggle All policies</Button>
+          <Button @click="toggleTrustedLocations" :class="{'p-button-success':showTrustedLocationsOnly}" class="ml-4 px-4 py-2">Show Trusted Locations</Button>
+        </div>
+
+        <Accordion  :value="expandedLocationsPanels" multiple expandIcon="pi pi-plus" collapseIcon="pi pi-minus" v-if="filteredLocations">
+          <template v-for="(location, index) in filteredLocations">
+            <AccordionPanel :value="String(index)">
+              <AccordionHeader>
+                <span :ref="location.displayName">
+                  {{ location.displayName }}
+                  <Tag v-if="location.trusted" severity="success" class="mx-1">Trusted</Tag>
+                  <Tag v-if="location.appliestounknowncountry" severity="info" class="mx-1">Applies to unknown country</Tag>
+                </span>
+              </AccordionHeader>
+              <AccordionContent v-if="location.policyDetail">
+                <Tabs value="0" class="rounded">
+                  <TabList>
+                    <Tab value="0">
+                      Overview
+                    </Tab>
+                    <Tab value="1">
+                      Raw
+                    </Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel value="0">
+                      <div v-if="location.ipranges != ''">
+                        <span class="pi pi-asterisk"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Ip Ranges</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <ul v-for="item in location.ipranges"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li>
+                                    {{ item }}
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="location.associatedpolicies && location.associatedpolicies.length > 1">
+                        <span class="pi pi-link"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Associated Policies</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <ul v-for="item in location.associatedpolicies"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li>
+                                    <a class="hover:underline" @click="goto(item)">{{ item }}</a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="location.policyDetail.CountryIsoCodes && location.policyDetail.CountryIsoCodes.length > 0">
+                        <span class="pi pi-flag"></span>
+                        <span class="text-surface-500 dark:text-surface-300 text-lg font-semibold m-4">Country ISO codes</span>
+                        <div class="flex flex-wrap">
+                          <div class="flex-1 m-4 p-tag-success p-4 rounded-2xl">
+                            <div
+                              class="card bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-300 flex justify-between !rounded-2xl">
+                              <div class="overview-info">
+                                <ul v-for="item in location.policyDetail.CountryIsoCodes"
+                                  class="m-0 text-surface-500 dark:text-surface-300 font-semibold ml-4">
+                                  <li>
+                                    {{ item }}
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </TabPanel>
+                    <TabPanel value="1">
+                      <pre id="code" class="text-gray-300">
+                        <code>
+                          {{ location.raw }}
+                        </code>
+                      </pre>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </AccordionContent>
+            </AccordionPanel>
+          </template>
+        </Accordion>
+      </div>
+      <div class="grid gap-6 rounded-3xl overflow-auto" v-else>
+        <h1 class="text-lg">Loading...</h1>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import Card from 'primevue/card';
+import Tag from 'primevue/tag';
+import axios from 'axios'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ColumnGroup from 'primevue/columngroup';   // optional
+import Row from 'primevue/row';                   // optional
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import { showError } from '../services/toast';
+import Button from 'primevue/button';
+
+const filters = ref();
+
+export default {
+  name: 'Policies',
+  props: {
+    name: String,
+  },
+  components: {
+    DataTable,
+    Tag,
+    Card,
+    Column,
+    ColumnGroup,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
+    Row,
+    Tab,
+    Tabs,
+    TabList,
+    TabPanels,
+    TabPanel,
+    Button
+  },
+  data() {
+    return {
+      policies: [],
+      namedLocations: [],
+      columns: [
+        { field: 'appliesTo', header: 'Applies to' },
+        { field: 'applications', header: 'Applications' },
+        { field: 'onPlatforms', header: 'On platforms' },
+        { field: 'controls', header: 'Controls' },
+        { field: 'policyDetail.Version', header: 'Version' },
+      ],
+      filterFields: ["displayName"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      loading: true,
+      expandedPoliciesPanels: [],
+      expandedLocationsPanels: [],
+      showEnabledOnly: false,
+      showTrustedLocationsOnly: false,
+      showAllPolicies: false
+    }
+  },
+  computed: {
+    filteredPolicies() {
+      if (this.showEnabledOnly) {
+        return this.policies.filter(policy => policy.policyDetail.State === 'Enabled');
+      }
+      return this.policies;
+    },
+    filteredLocations() {
+      if (this.showTrustedLocationsOnly) {
+        return this.namedLocations.filter(namedLocation => namedLocation.trusted === true);
+      }
+      return this.namedLocations;
+    }
+  },
+  mounted() {
+    axios
+      .get("/api/policies")
+      .then(response => {
+        for (var i = 0; i < response.data.length; i++) {
+          if (response.data[i].policyType == 18) {
+            this.policies.push({
+              displayName: response.data[i].displayName,
+              policyDetail: response.data[i].policyDetail,
+              objectId: response.data[i].objectId,
+              raw: JSON.parse(JSON.stringify(response.data[i],null,2))
+            })
+          }
+          else if (response.data[i].policyType == 6){
+            this.namedLocations.push({
+              displayName: response.data[i].displayName,
+              policyDetail: response.data[i].policyDetail,
+              trusted: response.data[i].trusted,
+              appliestounknowncountry: response.data[i].appliestounknowncountry,
+              objectId: response.data[i].objectId,
+              associatedpolicies: response.data[i].associated_policies.split(","),
+              ipranges: response.data[i].ipranges.split(","),
+              raw: JSON.parse(JSON.stringify(response.data[i],null,2))
+            })
+          }
+        }
+      }).finally(()=>{
+        this.loading = false
+      })
+      .catch(error => {
+        showError("Error loading policies from API", error.message)
+        console.log(error)
+      })
+  },
+  methods: {
+    goToDetail(event) {
+      this.$router.push({ name: 'RowDetail', params: { objectId: event.data.objectId, objectType: "Policy" } });
+    },
+    resolve_authstrength(guid){
+      var built_in = {
+        '00000000-0000-0000-0000-000000000002': 'Multi-factor authentication',
+        '00000000-0000-0000-0000-000000000003': 'Passwordless MFA',
+        '00000000-0000-0000-0000-000000000004': 'Phishing-resistant MFA'
+      }
+      try {
+        if (guid == null || guid == '') {
+          return 'No Auth Strength';
+        }
+        result = built_in[guid]
+      } catch (e) {
+        console.error("Error resolving auth strength:", e);
+        return guid;
+      }
+      return result
+    },
+    goto(refName) {
+    	var element = this.$refs[refName];
+      element[0].scrollIntoView({ behavior: "smooth", block: "center" });
+    },
+    toggleAllPolicies() {
+      if (this.expandedPoliciesPanels.length === this.policies.length) {
+        this.expandedPoliciesPanels = [];
+        this.showAllPolicies = false;
+      } else {
+        this.expandedPoliciesPanels = this.policies.map((_, index) => String(index));
+        this.showAllPolicies = true;
+      }
+    },
+    toggleAllLocations() {
+      if (this.expandedLocationsPanels.length === this.policies.length) {
+        this.expandedLocationsPanels = [];
+      } else {
+        this.expandedLocationsPanels = this.policies.map((_, index) => String(index));
+      }
+    },
+    toggleEnabledPolicies() {
+      this.showEnabledOnly = !this.showEnabledOnly;
+    },
+    toggleTrustedLocations() {
+      this.showTrustedLocationsOnly = !this.showTrustedLocationsOnly;
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/RowDetail.vue b/roadrecon/frontend-ng/src/pages/RowDetail.vue
new file mode 100644
index 00000000..1a42d5d1
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/RowDetail.vue
@@ -0,0 +1,742 @@
+<template>
+    <!-- Site header -->
+    <main class="grow">
+        <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+            <!-- Dashboard actions -->
+            <div class="sm:flex sm:justify-between sm:items-center mb-8">
+                <!-- Left: Title -->
+                <div class="mb-4 sm:mb-0">
+                    <h1 v-if="!err" class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ object.displayName }}</h1>
+                    <h1 v-else class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ err }}</h1>
+                    <Tag v-if="(object.objectType == 'User' || object.objectType == 'Device' || object.objectType == 'ServicePrincipal') && object.accountEnabled === true"
+                        severity="success" value="Enabled" />
+                    <Tag v-if="(object.objectType == 'User' || object.objectType == 'Device' || object.objectType == 'ServicePrincipal') && object.accountEnabled === false"
+                        severity="danger" value="Disabled" />
+                </div>
+            </div>
+            <p v-if="loading">Loading...</p>
+            <!-- Cards -->
+            <div class="grid grid-cols-2 gap-4 overflow-auto rounded-3xl p-3">
+                <Card class="grid grid-cols-2 overflow-auto">
+                    <template #content>
+                        <p v-if="err">{{ err }}</p>
+                        <DataView v-else :value="object">
+                            <template #list="slotProps">
+                                <Tabs value="0" class="rounded">
+                                    <TabList>
+                                        <Tab value="0">
+                                            Overview
+                                        </Tab>
+                                        <Tab value="1">
+                                            Raw
+                                        </Tab>
+                                    </TabList>
+                                    <TabPanels>
+                                        <TabPanel value="0">
+                                            <div class="flex flex-col">
+                                                <div v-for="(item, index) in object.overviewItems">
+                                                    <div v-if="checkDisplay(item.value)" class="p-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+                                                        <div v-if="item.value" class="grid grid-rows-2 justify-items-stretch">
+                                                            <div class="justify-self-start gap-2 row-span-2">
+                                                                <div class="text-xl font-black font-bold mt-2">{{ item.name }}</div>
+                                                            </div>
+                                                            <template v-if="Array.isArray(item.value)">
+                                                                <div class="justify-self-start">
+                                                                    <span v-for="value in item.value" class="text-lg">
+                                                                        {{ value }}<br>
+                                                                    </span>
+                                                                </div>
+                                                            </template>
+                                                            <template v-else>
+                                                                <div class="justify-self-start">
+                                                                    <span class="text-lg">{{ item.value }}</span>
+                                                                </div>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </TabPanel>
+                                        <TabPanel value="1">
+                                            <div class="overflow-x-auto">
+                                                <pre id="code" class="text-gray-300">
+                                                    <JsonViewer style="background: none;" :value="rawObject" copyable sort expanded theme="dark"/>
+        </pre>
+                                            </div>
+                                        </TabPanel>
+                                    </TabPanels>
+                                </Tabs>
+                            </template>
+                        </DataView>
+                    </template>
+                </Card>
+                <!-- TODO Add check here -->
+                <Card v-if="activeTabItems.length > 0">
+                    <template #content>
+                        <Tabs value="0" class="rounded">
+                            <TabList class="overflow-x-auto">
+                                <template v-for="(item, tabIndex) in activeTabItems" :key="item.name">
+                                    <Tab :value="String(tabIndex)" v-if="object[item.attribute].length">
+                                        {{ item.name }}
+                                        <Tag v-if="item && item.attribute" severity="info"
+                                            :value="object[item.attribute].length"></Tag>
+                                    </Tab>
+                                </template>
+                            </TabList>
+                            <TabPanels>
+                                <template v-for="(item, tabIndex) in activeTabItems" :key="item.attribute">
+                                    <TabPanel :value="String(tabIndex)" v-if="object[item.attribute].length">
+                                        <ObjectTable 
+                                            :columns="item.columns" 
+                                            :values="object[item.attribute]"
+                                            :filterFields="item.filterFields"
+                                            :filters
+                                            :lazy="false"
+                                        />
+                                    </TabPanel>
+                                </template>
+                            </TabPanels>
+                        </Tabs>
+                    </template>
+                </Card>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import dayjs from 'dayjs';
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import axios from 'axios'
+import Card from 'primevue/card';
+import Tag from 'primevue/tag';
+import DataView from 'primevue/dataview';
+import {JsonViewer} from "vue3-json-viewer"
+import "vue3-json-viewer/dist/vue3-json-viewer.css";
+import { showError } from '../services/toast';
+
+const filters = ref();
+
+export default {
+    name: 'RowDetail',
+    components: {
+        ObjectTable,
+        Card,
+        Tab,
+        Tag,
+        Tabs,
+        TabList,
+        TabPanels,
+        TabPanel,
+        DataView,
+        FilterMatchMode,
+    },
+    data() {
+        return {
+            object: {
+                memberOfRole: [],
+                tabItems: [],
+            },
+            activeTabItems: [],
+            name: "User detail",
+            rawObject: null,
+            err: null,
+            loading: false,
+            columns: {
+                devices: [
+                    { field: 'displayName', header: 'Name' },
+                    { field: 'accountEnabled', header: 'Enabled', isTag: true },
+                    { field: 'deviceManufacturer', header: 'Manufacturer' },
+                    { field: 'deviceModel', header: 'Model' },
+                    { field: 'deviceOSType', header: 'OS' },
+                    { field: 'deviceOSVersion', header: 'OS Version' },
+                    { field: 'deviceTrustType', header: 'Trust type' },
+                    { field: 'isCompliant', header: 'Compliant', isTag: true },
+                    { field: 'isManaged', header: 'Managed', isTag: true },
+                    { field: 'isRooted', header: 'Rooted', isTag: true },
+                ],
+                servicePrincipals: [
+                    { field: 'displayName', header: 'Name' },
+                    { field: 'publisherName', header: 'Publisher' },
+                    { field: 'microsoftFirstParty', header: 'Microsoft app' },
+                    { field: 'passwordCredentials.length', header: 'Passwords' },
+                    { field: 'keyCredentials.length', header: 'Keys' },
+                    { field: 'appRoles.length', header: 'Roles defined' },
+                    { field: 'oauth2Permissions.length', header: 'OAuth2 Permissions' },
+                    { field: 'ownerUsers.length', header: 'Custom owner' },
+                ],
+                applications: [
+                    { field: 'displayName', header: 'Name' },
+                    { field: 'passwordCredentials.length', header: 'Passwords' },
+                    { field: 'keyCredentials.length', header: 'Keys' },
+                    { field: 'appRoles.length', header: 'Roles defined' },
+                    { field: 'oauth2Permissions.length', header: 'OAuth2 Permissions' },
+                    { field: 'appRoles.length', header: 'Custom owner' },
+                ],
+                groupsMembership: [
+                    { field: 'displayName', header: 'Name' },
+                    { field: 'description', header: 'Description' },
+                ]
+            },
+        };
+    },
+    mounted() {
+        const objectId = this.$route.params.objectId;
+        const objectType = this.$route.params.objectType;
+
+        var apiRoute = ""
+
+        if (objectType === "User") {
+            apiRoute = "users"
+        }
+        else if (objectType === "Group") {
+            apiRoute = "groups"
+        }
+        else if (objectType === "Device") {
+            apiRoute = "devices"
+        }
+        else if (objectType === "Application") {
+            apiRoute = "applications"
+        }
+        else if (objectType === "ServicePrincipal") {
+            apiRoute = "serviceprincipals"
+        }
+        else if (objectType === "AdministrativeUnit") {
+            apiRoute = "administrativeunits"
+        }
+        else if (objectType === "Policy") {
+            apiRoute = "policy"
+        }
+
+        this.loading = true
+        axios
+            .get(`/api/${apiRoute}/${objectId}`)
+            .then(response => {
+                this.rawObject = JSON.parse(JSON.stringify(response.data))//Deep copy to ensure its not bound to this.object
+                this.object = response.data;
+                this.object.activeTabItems = []
+
+                if (objectType === "User") {
+                    this.object.tabItems = [
+                        {
+                            name: "Role Membership",
+                            attribute: "memberOfRole",
+                            filterFields: ["displayName", "description"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'description', header: 'Description' },
+                            ],
+                        },
+                        {
+                            name: "Owned Devices",
+                            attribute: "ownedDevices",
+                            filterFields: ["displayName"],
+                            columns: this.columns.devices,
+                        },
+                        {
+                            name: "Owned ServicePrincipals",
+                            attribute: "ownedServicePrincipals",
+                            filterFields: ["displayName"],
+                            columns: this.columns.servicePrincipals,
+                        },
+                        {
+                            name: "Owned Applications",
+                            attribute: "ownedApplications",
+                            filterFields: ["displayName"],
+                            columns: this.columns.applications,
+                        },
+                        {
+                            name: "Owned Groups",
+                            attribute: "ownedGroups",
+                            filterFields: ["displayName"],
+                            columns: this.columns.groupsMembership,
+                        },
+                        {
+                            name: "Group Membership",
+                            attribute: "memberOf",
+                            filterFields: ["displayName", "description"],
+                            columns: this.columns.groupsMembership,
+                        }
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "UserPrincipalName",
+                            value: this.object.userPrincipalName,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Last password change",
+                            value: dayjs(this.object.lastPasswordChangeDateTime).format("DD/MM/YYYY HH:mm"),
+                        },
+                        {
+                            name: "Account source",
+                            value: this.object.dirSyncEnabled ? "Synced with AD" : "Cloud-only",
+                        },
+                        {
+                            name: "Account type",
+                            value: this.object.userType,
+                        },
+                        {
+                            name: "Creation date",
+                            value: dayjs(this.object.createdDateTime).format("DD/MM/YYYY HH:mm"),
+                        },
+                    ];
+                }
+                else if (objectType === "Group") {
+                    this.object.tabItems = [
+                        {
+                            name: "Group memberships (parent groups)",
+                            attribute: "memberOf",
+                            filterFields: ["displayName", "userPrincipalName", "accountEnabled"],
+                            columns: this.columns.groupsMembership,
+                        },
+                        {
+                            name: "Owner users",
+                            attribute: "ownerUsers",
+                            filterFields: ["displayName", "userPrincipalName", "accountEnabled"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'userPrincipalName', header: 'userPrincipalName' },
+                                { field: 'accountEnabled', header: 'Enabled', isTag: true },
+                            ],
+                        },
+                        {
+                            name: "Owner service principals",
+                            attribute: "ownerServicePrincipals",
+                            filterFields: ["displayName", "servicePrincipalType"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'servicePrincipalType', header: 'Type' },
+                            ],
+                        },
+                        {
+                            name: "Member users",
+                            attribute: "memberUsers",
+                            filterFields: ["displayName", "userPrincipalName", "userType", "accountEnabled"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'userPrincipalName', header: 'userPrincipalName' },
+                                { field: 'userType', header: 'Type' },
+                                { field: 'accountEnabled', header: 'Enabled', isTag: true },
+                            ],
+                        },
+                        {
+                            name: "Member groups (subgroups)",
+                            attribute: "memberGroups",
+                            filterFields: ["displayName", "description"],
+                            columns: this.columns.groups,
+                        },
+                        {
+                            name: "Member ServicePrincipal",
+                            attribute: "memberServicePrincipals",
+                            filterFields: ["displayName", "servicePrincipalType"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'servicePrincipalType', header: 'Type' },
+                            ],
+                        },
+                        {
+                            name: "Member devices",
+                            attribute: "memberDevices",
+                            filterFields: ["displayName", "userPrincipalName", "accountEnabled"],
+                            columns: this.columns.devices,
+                        },
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "Description",
+                            value: this.object.description,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Can be assigned to roles ?",
+                            value: this.object.isAssignableToRole ? "Yes" : "No",
+                        },
+                        {
+                            name: "Created",
+                            value: dayjs(this.object.createdDateTime).format("DD/MM/YYYY HH:mm"),
+                        },
+                        {
+                            name: "Group source",
+                            value: this.object.groups ? "Synced with AD" : "Cloud-only",
+                        },
+                    ];
+                }
+                else if (objectType === "Device") {
+                    this.object.tabItems = [
+                        {
+                            name: "Owners",
+                            attribute: "owner",
+                            filterFields: ["name", "userPrincipalName", "accountEnabled"],
+                            columns: [
+                                { field: 'displayName', header: 'Owner' },
+                                { field: 'userPrincipalName', header: 'userPrincipalName' },
+                                { field: 'accountEnabled', header: 'Enabled', isTag: true }
+                            ],
+                        },
+                        {
+                            name: "Groups",
+                            attribute: "memberOf",
+                            filterFields: ["name", "userPrincipalName", "accountEnabled"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'description', header: 'Description' },
+                            ],
+                        },
+                        {
+                            name: "Bitlocker Keys",
+                            attribute: "blkeys",
+                            filterFields: ["keyIdentifier", "keyMaterial"],
+                            columns: [
+                                { field: 'keyIdentifier', header: 'Identifier' },
+                                { field: 'keyMaterial', header: 'Recovery key' }
+                            ],
+                        },
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Device ID",
+                            value: this.object.deviceId,
+                        },
+                        {
+                            name: "Device OS Version",
+                            value: this.object.deviceOSVersion,
+                        },
+                        {
+                            name: "Device OS Type",
+                            value: this.object.deviceOSType,
+                        },
+                    ];
+                }
+                else if (objectType === "Application") {
+                    this.object.tabItems = [
+                        {
+                            name: "Owners",
+                            attribute: "ownerUsers",
+                            filterFields: ["displayName", "userPrincipalName"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'userPrincipalName', header: 'userPrincipalName' },
+                            ],
+                        },
+                        {
+                            name: "Application roles (application permissions)",
+                            attribute: "appRoles",
+                            filterFields: ["value", "allowedMemberTypes", "description", "vale", "id"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'allowedMemberTypes', header: 'Allowed types' },
+                                { field: 'description', header: 'Description' },
+                                { field: 'value', header: 'Value' },
+                                { field: 'id', header: 'ID' },
+                            ],
+                        },
+                        {
+                            name: "OAuth2 permissions (delegated permissions)",
+                            attribute: "oauth2Permissions",
+                            filterFields: ["value", "allowedMemberTypes", "description", "vale", "id"],
+                            columns: [
+                                { field: 'userConsentDisplayName', header: 'User Consent Name' },
+                                { field: 'type', header: 'Allowed types' },
+                                { field: 'userConsentDescription', header: 'User Consent Description' },
+                                { field: 'adminConsentDisplayName', header: 'Admin Consent Name' },
+                                { field: 'adminConsentDescription', header: 'Admin Consent Description' },
+                                { field: 'value', header: 'Value' },
+                                { field: 'id', header: 'ID' },
+                            ],
+                        },
+                        {
+                            name: "Passwords",
+                            attribute: "passwordCredentials",
+                            filterFields: ["value","keyId"],
+                            columns: [
+                                { field: 'value', header: 'Value' },
+                                { field: 'keyId', header: 'Key ID' },
+                            ],
+                        },
+                        {
+                            name: "Keys",
+                            attribute: "keyCredentials",
+                            filterFields: ["type","keyId","usage"],
+                            columns: [
+                                { field: 'type', header: 'Type' },
+                                { field: 'keyId', header: 'Key ID' },
+                                { field: 'usage', header: 'Usage' },
+                            ],
+                        },
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Application ID",
+                            value: this.object.appid,
+                        },
+                        {
+                            name: "Publisher",
+                            value: this.object.ownerServicePrincipals.publisherName,
+                        },
+                        {
+                            name: "Homepage",
+                            value: this.object.homepage,
+                        }
+                    ];
+                    
+                    if(this.object.ownerServicePrincipals.length > 0)
+                    {
+                        this.object.overviewItems.push(
+                            {
+                                name: "Service Principal",
+                                value: this.object.ownerServicePrincipals[0].displayName,
+                            }
+                        )
+                    }
+                }
+                else if (objectType === "ServicePrincipal") {
+                    this.object.tabItems = [
+                        {
+                            name: "App defined permissions (app permissions)",
+                            attribute: "appRoles",
+                            value: "0",
+                            filterFields: ["value", "displayName", "description", "id", "allowedMemberTypes"],
+                            columns: [
+                                { field: 'value', header: 'Value' },
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'description', header: 'Description' },
+                                { field: 'id', header: 'ID' },
+                                { field: 'allowedMemberTypes', header: 'Allowed types' },
+                            ],
+                        },
+                        {
+                            name: "App roles assigned to others",
+                            attribute: "appRolesAssigned",
+                            value: "1",
+                            filterFields: ["principalDisplayName", "principalType", "value", "desc"],
+                            columns: [
+                                { field: 'principalDisplayName', header: 'PrincipalName' },
+                                { field: 'principalType', header: 'Principal Type' },
+                                { field: 'value', header: 'Role' },
+                                { field: 'desc', header: 'Description' },
+                            ],
+                        },
+                        {
+                            name: "App roles assigned to this principal",
+                            attribute: "appRolesAssignedTo",
+                            value: "2",
+                            filterFields: ["value", "displayName", "description", "id", "allowedMemberTypes"],
+                            columns: [
+                                { field: 'principalDisplayName', header: 'PrincipalName' },
+                                { field: 'principalType', header: 'Principal Type' },
+                                { field: 'value', header: 'Role' },
+                                { field: 'resourceDisplayName', header: 'Application' },
+                                { field: 'desc', header: 'Description' },
+                            ],
+                        },
+                        {
+                            name: "OAuth2 permissions (delegated permissions)",
+                            attribute: "oauth2Permissions",
+                            value: "3",
+                            filterFields: ["value", "displayName", "description", "id", "allowedMemberTypes"],
+                            columns: [
+                                { field: 'value', header: 'Value' },
+                                { field: 'userConsentDisplayName', header: 'User Consent Name' },
+                                { field: 'userConsentDescription', header: 'User Consent Description' },
+                                { field: 'adminConsentDisplayName', header: 'Admin Consent Name' },
+                                { field: 'adminConsentDescription', header: 'Admin Consent Description' },
+                                { field: 'id', header: 'Admin Consent Description' },
+                                { field: 'type', header: 'Allowed types' },
+                            ],
+                        },
+                        {
+                            name: "Owner",
+                            attribute: "ownerUsers",
+                            value: "4",
+                            filterFields: ["value", "displayName", "description", "id", "allowedMemberTypes"],
+                            columns: [
+                                { field: 'displayName', header: 'Name' },
+                                { field: 'userPrincipalName', header: 'userPrincipalName' },
+                                { field: 'accountEnabled', header: 'Enabled', isTag: true },
+                            ],
+                        },
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Application ID",
+                            value: this.object.appId,
+                        },
+                        {
+                            name: "Microsoft App",
+                            value: this.object.microsoftFirstParty ? "Yes" : "No",
+                        },
+                        {
+                            name: "Publisher",
+                            value: this.object.publisherName,
+                        },
+                        {
+                            name: "ReplyUrls",
+                            value: this.object.replyUrls,
+                        }
+                    ];
+                }
+                else if (objectType === "AdministrativeUnit") {
+                    this.object.tabItems = [
+                        {
+                            name: "Member users",
+                            attribute: "memberUsers",
+                            filterFields: ["value", "description", "type"],
+                            columns: [
+                                { field: 'value', header: 'Name' },
+                                { field: 'description', header: 'Description' },
+                                { field: 'userType', header: 'userType' },
+                            ],
+                        },
+                        {
+                            name: "Member groups",
+                            attribute: "memberGroups",
+                            filterFields: ["displayName", "description"],
+                            columns: [
+                                { field: 'displayName', header: 'name' },
+                                { field: 'description', header: 'Description' },
+                            ],
+                        },
+                        {
+                            name: "Member devices",
+                            attribute: "memberDevices",
+                            filterFields: ["value", "displayName", "description", "id", "allowedMemberTypes"],
+                            columns: this.columns.devices,
+                        },
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "Description",
+                            value: this.object.description,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                        {
+                            name: "Dynamic Membership",
+                            value: this.object.membershipRule,
+                        },
+                    ];
+                }
+                else if (objectType === "Policy") {
+                    this.object.tabItems = [
+                    ];
+                    this.object.overviewItems = [
+                        {
+                            name: "Display name",
+                            value: this.object.displayName,
+                        },
+                        {
+                            name: "ObjectId",
+                            value: this.object.objectId,
+                        },
+                    ];
+                }
+
+                this.object.nbItems = 0
+
+                for (var i = 0; i < this.object.tabItems.length; i++) {
+                    if (this.object[this.object.tabItems[i].attribute] != undefined && this.object[this.object.tabItems[i].attribute].length > 0) {
+                        this.activeTabItems.push(this.object.tabItems[i])
+                    }
+                }
+            })
+            .catch(error => {
+                if(error.status == 404){
+                    this.err="User not found"
+                    showError(this.err, error.message)
+                    console.log(this.err)
+                    return
+                }
+                else if(error.status == 500){
+                    this.err="Unknown object"
+                    showError(this.err, error.message)
+                    console.log(this.err)
+                    return
+                }
+                else if(error.status != 200){
+                    this.err="Unknown error"
+                    showError(this.err, error.message)
+                    console.log(error)
+                    return
+                }
+            }).finally(() => {
+                this.loading = false;
+            });
+    },
+    methods: {
+        checkDisplay(value) {
+            if (value === null || value === undefined) return false;
+            if (typeof value === 'boolean') return value;
+            if (typeof value === 'string' || Array.isArray(value)) return value.length > 0;
+            return true;
+        },
+    },
+    setup() {
+        const filters = ref();
+        filters.value = {
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS }
+        };
+
+        return {
+            filters,
+        };
+    }
+}
+</script>
+
+<style>
+    .jv-container .jv-code.open {
+        padding: 0 !important;
+    }
+</style>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/ServicePrincipals.vue b/roadrecon/frontend-ng/src/pages/ServicePrincipals.vue
new file mode 100644
index 00000000..d3c8e488
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/ServicePrincipals.vue
@@ -0,0 +1,105 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="serviceprincipals" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios'
+
+const filters = ref();
+
+export default {
+  name: 'ServicePrincipals',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      serviceprincipals: [],
+      columns: [
+        { field: 'accountEnabled', header: 'Enabled', isTag: true, tagSuccessValue: "Enabled" },
+        { field: 'displayName', header: 'Name' },
+        { field: 'servicePrincipalType', header: 'Type' },
+        { field: 'publisherName', header: 'Publisher' },
+        { field: 'microsoftFirstParty', header: 'Microsoft app', isTag: true },
+        { field: 'passwordCredentials', header: 'Passwords', isTag: true },
+        { field: 'keyCredentials', header: 'Keys', isTag: true },
+        { field: 'appRoles', header: 'Roles defined' },
+        { field: 'oauth2Permissions', header: 'OAuth2 Permissions' },
+        { field: 'ownerUsers', header: 'Custom owner', isTag: true },
+      ],
+      filterFields:["accountEnabled","displayName","servicePrincipalType","publisherName","microsoftFirstParty","passwordCredentials","keyCredentials","appRoles","oauth2Permissions","ownerUsers"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"displayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/serviceprincipals`,{params:params})
+        .then(response => {
+            this.serviceprincipals=response.data.items;
+            this.totalRecords=response.data.total;
+            
+            for(var i=0;i<this.serviceprincipals.length;i++){
+              this.serviceprincipals[i].accountEnabled = this.serviceprincipals[i].accountEnabled ? "Enabled" : "Disabled"
+              this.serviceprincipals[i].microsoftFirstParty = this.serviceprincipals[i].microsoftFirstParty ? "True" : "False"
+              this.serviceprincipals[i].passwordCredentials = this.serviceprincipals[i].passwordCredentials.length > 0 ? "True" : "False"
+              this.serviceprincipals[i].keyCredentials = this.serviceprincipals[i].keyCredentials.length > 0 ? "True" : "False"
+              this.serviceprincipals[i].appRoles = this.serviceprincipals[i].appRoles.length > 0 ? this.serviceprincipals[i].appRoles.length : 0
+              this.serviceprincipals[i].oauth2Permissions = this.serviceprincipals[i].oauth2Permissions.length > 0 ? this.serviceprincipals[i].oauth2Permissions.length : 0
+              this.serviceprincipals[i].ownerUsers = this.serviceprincipals[i].ownerUsers.length > 0 ? "True" : "False"
+            }
+        })
+        .catch(error => {
+          showError("Error loading service principals from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+      });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/pages/Users.vue b/roadrecon/frontend-ng/src/pages/Users.vue
new file mode 100644
index 00000000..9fb9b096
--- /dev/null
+++ b/roadrecon/frontend-ng/src/pages/Users.vue
@@ -0,0 +1,101 @@
+<template>
+  <!-- Site header -->
+  <main class="grow">
+    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full mx-auto">
+      <!-- Dashboard actions -->
+      <div class="sm:flex sm:justify-between sm:items-center mb-8">
+
+        <!-- Left: Title -->
+        <div class="mb-4 sm:mb-0">
+          <h1 class="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">{{ name }}</h1>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="grid gap-6 overflow-auto rounded-3xl">
+        <ObjectTable 
+        :columns="columns" 
+        :values="users" 
+        :filterFields="filterFields" 
+        :filters="filters" 
+        :totalRecords
+        :loading
+        :tagFields=tagFields
+        multiselect
+        paginatorPosition="both"
+        @pageChange="fetchData"
+        @inputTextUpdated="fetchData"
+        @pageSort="fetchData"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import { ref, toRaw } from 'vue'
+import ObjectTable from '../partials/dashboard/ObjectTable.vue'
+import { FilterMatchMode } from '@primevue/core/api';
+import { showError } from '../services/toast';
+import axios from 'axios';
+import dayjs from 'dayjs';
+
+const filters = ref();
+
+export default {
+  name: 'Users',
+  props: {
+    name: String
+  },
+  components: {
+    ObjectTable
+  },
+  data(){
+    return {
+      mappedUsers: [], // mapped user data
+      users: [],
+      columns: [
+        { field: 'displayName', header: 'Name' },
+        { field: 'userPrincipalName', header: 'UserPrincipalName' },
+        { field: 'accountEnabled', header: 'Enabled', isTag: true },
+        { field: 'mail', header: 'Email' },
+        { field: 'department', header: 'Department' },
+        { field: 'lastPasswordChangeDateTime', header: 'Last password change' },
+        { field: 'jobTitle', header: 'Job title' },
+        { field: 'userType', header: 'User type' },
+      ],
+      filterFields:["displayName","userPrincipalName","accountEnabled","mail","department","lastPasswordChangeDateTime","jobTitle","mobile","objectType","member"],
+      filters: {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+      },
+      totalRecords: 0,
+      loading: false,
+    }
+  },
+  mounted() {
+    this.fetchData({page:1,rows:50,sortedField:"displayName",sortOrder:-1})
+  },
+  methods: {
+    fetchData(params) {
+      this.loading = true
+      axios
+        .get(`/api/users`,{params:params})
+        .then(response => {
+            this.users=response.data.items;
+            this.totalRecords=response.data.total;
+            
+            for(var i=0;i<this.users.length;i++){
+              this.users[i].accountEnabled = this.users[i].accountEnabled ? "True" : "False"
+              this.users[i].lastPasswordChangeDateTime = dayjs(this.users[i].lastPasswordChangeDateTime).format("DD/MM/YYYY HH:mm")
+            }
+        })
+        .catch(error => {
+          showError("Error loading users from API", error.message)
+          console.log(error)
+      })
+      .finally(() => {
+          this.loading = false;
+        });
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/partials/Banner.vue b/roadrecon/frontend-ng/src/partials/Banner.vue
new file mode 100644
index 00000000..c9a55570
--- /dev/null
+++ b/roadrecon/frontend-ng/src/partials/Banner.vue
@@ -0,0 +1,28 @@
+<template>
+  <div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-50">
+    <div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
+      <div class='text-gray-500 inline-flex'><a class="font-medium hover:underline text-gray-50" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download<span class="hidden sm:inline"> on GitHub</span></a> <span class="italic px-1.5">or</span> <a class="font-medium hover:underline text-emerald-400" href="https://cruip.com/mosaic/" target="_blank" rel="noreferrer">Check Premium Version</a></div>
+      <button class="text-gray-500 hover:text-gray-400 pl-2 ml-3 border-l border-gray-700/60"  @click="open = false">
+        <span class="sr-only">Close</span>
+        <svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
+          <path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
+        </svg>
+      </button>
+    </div>    
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name: 'Banner',
+  props: ['open'],
+  setup() {
+    const open = ref(true)
+    return {
+      open,
+    }    
+  }  
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/partials/Header.vue b/roadrecon/frontend-ng/src/partials/Header.vue
new file mode 100644
index 00000000..678d071b
--- /dev/null
+++ b/roadrecon/frontend-ng/src/partials/Header.vue
@@ -0,0 +1,69 @@
+<template>
+  <header
+    class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30"
+    :class="[
+      variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-sm lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
+      variant === 'v2' ? 'dark:before:bg-gray-800' : '',
+      variant === 'v3' ? 'dark:before:bg-gray-900' : '',
+    ]"
+  >
+    <div class="px-4 sm:px-6 lg:px-8">
+      <div
+        class="flex items-center justify-between h-16"
+        :class="variant === 'v2' || variant === 'v3' ? '' : 'lg:border-b border-gray-200 dark:border-gray-700/60'"
+      >
+
+        <!-- Header: Left side -->
+        <div class="flex">
+          <Button icon="pi pi-arrow-left" label="Back" v-show="$route.path != '/'" @click="goBack()" />
+
+          <!-- Hamburger button -->
+          <button class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 lg:hidden" @click.stop="$emit('toggle-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <rect x="4" y="5" width="16" height="2" />
+              <rect x="4" y="11" width="16" height="2" />
+              <rect x="4" y="17" width="16" height="2" />
+            </svg>
+          </button>
+
+        </div>
+
+        <!-- Header: Right side 
+        <div class="flex items-center space-x-3">
+          <ThemeToggle />
+        </div>-->
+
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import { ref } from 'vue'
+import Button from 'primevue/button';
+
+export default {
+  name: 'Header',
+  props: [
+    'sidebarOpen',
+    'variant',
+  ],
+  components: {
+    Button
+  },
+  methods:{
+    goBack() {
+      if(this.$router.path !== "/"){
+        this.$router.back()
+      }
+    }
+  },
+  setup() {
+    const searchModalOpen = ref(false)
+    return {
+      searchModalOpen,
+    }  
+  }  
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/partials/Sidebar.vue b/roadrecon/frontend-ng/src/partials/Sidebar.vue
new file mode 100644
index 00000000..81771abd
--- /dev/null
+++ b/roadrecon/frontend-ng/src/partials/Sidebar.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="min-w-fit">
+    <!-- Sidebar backdrop (mobile only) -->
+    <div class="fixed inset-0 bg-gray-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
+
+    <!-- Sidebar -->
+    <div
+      id="sidebar"
+      ref="sidebar"
+      class="flex lg:!flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
+      :class="[variant === 'v2' ?  'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-sm', sidebarOpen ? 'translate-x-0' : '-translate-x-64']"
+    >
+
+      <!-- Sidebar header -->
+      <div class="flex justify-between mb-10 pr-3 sm:px-2">
+        <!-- Close button -->
+        <button
+          ref="trigger"
+          class="lg:hidden text-gray-500 hover:text-gray-400"
+          @click.stop="$emit('close-sidebar')"
+          aria-controls="sidebar"
+          :aria-expanded="sidebarOpen"
+        >
+          <span class="sr-only">Close sidebar</span>
+          <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
+          </svg>
+        </button>
+        <!-- Logo -->
+        <router-link class="block" to="/">
+          <div class="grid place-content-center">
+            <img width="60%" class="self-center m-auto" :src="Logo"/>
+          </div>
+        </router-link>
+      </div>
+
+      <!-- Links -->
+      <div class="space-y-8">
+        <!-- Pages group -->
+        <div>
+          <h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
+            <span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">•••</span>
+            <span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span>
+          </h3>
+          <ul class="mt-3" >
+            <router-link v-if="!route" v-for="route in sidebarRoutes" :to="route.path" custom v-slot="{ href, navigate, isExactActive }">
+              <li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-[linear-gradient(135deg,var(--tw-gradient-stops))]" :class="isExactActive && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'">
+                <a class="block text-gray-800 dark:text-gray-100 truncate transition" :class="isExactActive ? '' : 'hover:text-gray-900 dark:hover:text-white'" :href="href" @click="navigate">
+                  <div class="flex items-center">
+                    <span :class="route.icon"></span> 
+                    <span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">{{ route.name }}</span>
+                  </div>
+                </a>
+              </li>
+            </router-link>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Links -->
+      <div class="inline-flex mt-auto">
+        <!-- Pages group -->
+        <div>
+          <p>Copyright (c) 2024</p>
+          <p>Dirk-jan Mollema</p>
+        </div>
+      </div>
+
+      <!-- Expand / collapse button -->
+      <div class="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
+        <div class="w-12 pl-4 pr-3 py-2">
+          <button class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" @click.prevent="sidebarExpanded = !sidebarExpanded">
+            <span class="sr-only">Expand / collapse sidebar</span>
+            <svg class="shrink-0 fill-current text-gray-400 dark:text-gray-500 sidebar-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <path d="M15 16a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v14a1 1 0 0 1-1 1ZM8.586 7H1a1 1 0 1 0 0 2h7.586l-2.793 2.793a1 1 0 1 0 1.414 1.414l4.5-4.5A.997.997 0 0 0 12 8.01M11.924 7.617a.997.997 0 0 0-.217-.324l-4.5-4.5a1 1 0 0 0-1.414 1.414L8.586 7M12 7.99a.996.996 0 0 0-.076-.373Z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { routes } from '../router'
+import Logo from '../images/logo.svg?url'
+
+import SidebarLinkGroup from './SidebarLinkGroup.vue'
+
+export default {
+  name: 'Sidebar',
+  props: [
+    'sidebarOpen',
+    'variant'
+  ],
+  components: {
+    SidebarLinkGroup
+  },
+  data(){
+
+    return {
+      sidebarRoutes: routes.filter(route => route.hideNavbar !== true)
+    }
+  },
+  setup(props, { emit }) {
+    const items = ref(routes)
+
+    const trigger = ref(null)
+    const sidebar = ref(null)
+
+    const storedSidebarExpanded = localStorage.getItem('sidebar-expanded')
+    const sidebarExpanded = ref(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true')
+
+    const currentRoute = useRouter().currentRoute.value
+
+    // close on click outside
+    const clickHandler = ({ target }) => {
+      if (!sidebar.value || !trigger.value) return
+      if (
+        !props.sidebarOpen ||
+        sidebar.value.contains(target) ||
+        trigger.value.contains(target)
+      ) return
+      emit('close-sidebar')
+    }
+
+    // close if the esc key is pressed
+    const keyHandler = ({ keyCode }) => {
+      if (!props.sidebarOpen || keyCode !== 27) return
+      emit('close-sidebar')
+    } 
+
+    onMounted(() => {
+      document.addEventListener('click', clickHandler)
+      document.addEventListener('keydown', keyHandler)
+    })
+
+    onUnmounted(() => {
+      document.removeEventListener('click', clickHandler)
+      document.removeEventListener('keydown', keyHandler)
+    })
+
+    watch(sidebarExpanded, () => {
+      localStorage.setItem('sidebar-expanded', sidebarExpanded.value)
+      if (sidebarExpanded.value) {
+        document.querySelector('body').classList.add('sidebar-expanded')
+      } else {
+        document.querySelector('body').classList.remove('sidebar-expanded')
+      }
+    })
+
+    return {
+      Logo,
+      trigger,
+      sidebar,
+      sidebarExpanded,
+      currentRoute
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/partials/SidebarLinkGroup.vue b/roadrecon/frontend-ng/src/partials/SidebarLinkGroup.vue
new file mode 100644
index 00000000..4c6467c1
--- /dev/null
+++ b/roadrecon/frontend-ng/src/partials/SidebarLinkGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-[linear-gradient(135deg,var(--tw-gradient-stops))]" :class="activeCondition && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'">
+    <slot :handleClick="handleClick" :expanded="expanded" />
+  </li>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  name: 'SidebarLinkGroup',
+  props: ['activeCondition'],
+  setup(props) {
+    const expanded = ref(props.activeCondition)
+
+    const handleClick = () => {
+      expanded.value = !expanded.value
+    }
+
+    return {
+      expanded,
+      handleClick,
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/partials/dashboard/ObjectTable.vue b/roadrecon/frontend-ng/src/partials/dashboard/ObjectTable.vue
new file mode 100644
index 00000000..89162120
--- /dev/null
+++ b/roadrecon/frontend-ng/src/partials/dashboard/ObjectTable.vue
@@ -0,0 +1,294 @@
+<template>
+  <div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+    <header v-if="title" class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex justify-between items-center">
+      <h2 class="font-semibold text-gray-800 dark:text-gray-100">{{ title }}</h2>
+    </header>
+    <div>
+      <!-- Table -->
+      <div class="overflow-x-auto">
+        <DataTable 
+          paginator
+          resizableColumns
+          columnResizeMode="fit"
+          :paginatorPosition="paginatorPosition" 
+          :rows="rowsPerPageOptions[0]" 
+          :lazy="lazy" 
+          selectionMode="single" 
+          tableStyle="min-width: 50rem"
+          v-model:filters="filters"
+          size="small" 
+          :value="values" 
+          :loading="loading"
+          :rowsPerPageOptions="rowsPerPageOptions" 
+          :globalFilterFields="filterFields" 
+          :totalRecords="totalRecords"
+          @row-click="handleRowClick" 
+          @page="pageChange" 
+          @sort="sortPage" 
+          class="selectable-text">
+          <template #header>
+            <div class="flex">
+              <IconField v-if="!noSearch">
+                <InputIcon>
+                  <i class="pi pi-search" />
+                </InputIcon>
+                <InputText v-model="filters['global'].value" placeholder="Global Search.."
+                  @update:modelValue="inputTextUpdated" />
+              </IconField>
+              <Button v-if="exportCSV" @click="exportToCSV" class="bg-blue-500 text-white px-4 py-2 rounded">Export to CSV</Button>
+              <MultiSelect
+                v-if="multiselect" 
+                :modelValue="selectedColumns" 
+                :options="columns" 
+                optionLabel="header"
+                display="chip"
+                @update:modelValue="onToggle"
+                placeholder="Select Columns" 
+              />
+              <span v-if="totalRecords" class="pl-3 self-center text-gray-400">
+                {{ totalRecords.toLocaleString('fr-FR') }} results
+              </span>
+            </div>
+          </template>
+          <template #empty> No data found. </template>
+          <template #loading> Loading data. Please wait. </template>
+          <template v-for="col of selectedColumns" :key="col.field">
+            <Column 
+              :sortable="true" 
+              :sortField="col.field" 
+              :field="col.field" 
+              :header="col.header" 
+              style="width: 10%" 
+              class="selectable-text">
+              <template v-if="col.isTag" #body="slotProps">
+                <Tag 
+                  :value="slotProps.data[col.field]" 
+                  :severity="slotProps.data[col.field] == col.tagSuccessValue || String(slotProps.data[col.field]).toLowerCase() === 'true' ? 'success' : 'danger'" 
+                />
+              </template>
+            </Column>
+          </template>
+        </DataTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .selectable-text {
+    user-select: text;
+  }
+  .p-paginator {
+    justify-content: left !important;
+  }
+</style>
+
+<script>
+import { ref } from 'vue'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import { FilterMatchMode } from '@primevue/core/api';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import InputText from 'primevue/inputtext';
+import MultiSelect from 'primevue/multiselect';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import axios from 'axios';
+
+export default {
+  name: 'ObjectTable',
+  data() {
+    return {
+      page: 0,
+      rows: 20,
+      sortedField: "",
+      sortOrder: 0,
+      selectedColumns: this.columns, // Initialize with all columns
+      allData: [] // Store all data for export
+    }
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true, // Array of column names (or object keys)
+    },
+    values: {
+      type: Array,
+      required: true, // Array of objects to display
+    },
+    filterFields: {
+      type: Array,
+      required: false
+    },
+    totalRecords: {
+      type: Number,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    rowsPerPageOptions: {
+      type: Array,
+      required: false,
+      default: () => [20, 50, 100, 1000]
+    },
+    sortedField: {
+      type: String,
+      required: false
+    },
+    paginatorPosition: {
+      type: String,
+      required: false
+    },
+    sortOrder: {
+      type: Number,
+      required: false
+    },
+    tagFields: {
+      type: Array,
+      required: false
+    },
+    multiselect:{
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    exportToCSV:{
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  components: {
+    InputText,
+    InputIcon,
+    IconField,
+    FilterMatchMode,
+    Column,
+    DataTable,
+    Tag,
+    MultiSelect,
+    Button
+  },
+  methods: {
+    async fetchAllData() {
+      try {
+        const response = await axios.get('/api/data', {
+          params: {
+            // Add any necessary parameters for fetching all data
+          }
+        });
+        this.allData = response.data;
+      } catch (error) {
+        console.error('Error fetching all data:', error);
+      }
+    },
+    async exportToCSV() {
+      const csvContent = [];
+      const headers = this.selectedColumns.map(col => col.header);
+      csvContent.push(headers.join(','));
+
+      this.allData.forEach(row => {
+        const rowData = this.selectedColumns.map(col => row[col.field]);
+        csvContent.push(rowData.join(','));
+      });
+
+      const blob = new Blob([csvContent.join('\n')], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+      const url = URL.createObjectURL(blob);
+      link.setAttribute('href', url);
+      link.setAttribute('download', 'table_data.csv');
+      link.style.visibility = 'hidden';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    onToggle(val) {
+      this.selectedColumns = this.columns.filter(col => val.includes(col));
+    },
+    handleRowClick(event) {
+      const selection = window.getSelection().toString();
+      if (!selection) {
+        this.goToDetail(event);
+      }
+    },
+    goToDetail(event) {
+      if(event.data.principal){
+        this.$router.push({ name: 'RowDetail', params: { objectId: event.data.principal.objectId, objectType: event.data.principal.objectType } });
+      }
+      else if(event.data.type == "user"){
+        this.$router.push({ name: 'RowDetail', params: { objectId: event.data.userid, objectType: "User" } });
+      }
+      else{
+        this.$router.push({ name: 'RowDetail', params: { objectId: event.data.objectId, objectType: event.data.objectType } });
+      }
+    },
+    pageChange(event) {
+      this.page = event.page
+      this.rows = event.rows
+
+      var params = { 
+        page: this.page + 1,
+        rows: this.rows,
+        search: this.filters.global.value,
+        sortedField: this.sortedField,
+        sortOrder: this.sortOrder
+      }
+      this.$emit('pageChange', params)
+    },
+    sortPage(event){
+      this.sortedField = event.sortField
+      this.sortOrder = event.sortOrder
+
+      var params = { 
+        page: this.page + 1, 
+        rows: this.rows,
+        search: this.filters.global.value,
+        sortedField: this.sortedField,
+        sortOrder: this.sortOrder
+      }
+      this.$emit('pageSort', params)
+    },
+    inputTextUpdated(){
+      var params = { 
+        page: this.page + 1, 
+        rows: this.rows,
+        sortedField: this.sortedField,
+        sortOrder: this.sortOrder
+      }
+
+      // Limits search to 3 characters minimum for performance
+      if(this.filters.global.value.length >= 3){
+        params.search = this.filters.global.value
+      }
+      
+      this.$emit('inputTextUpdated', params)
+    }
+  },
+  setup() {
+    const filters = ref({
+      global: {
+        value: null,
+        matchMode: FilterMatchMode.CONTAINS
+      },
+    });
+
+    return {
+      filters,
+    };
+  }
+}
+</script>
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/plugins/axios.ts b/roadrecon/frontend-ng/src/plugins/axios.ts
new file mode 100644
index 00000000..5a21e250
--- /dev/null
+++ b/roadrecon/frontend-ng/src/plugins/axios.ts
@@ -0,0 +1,15 @@
+import axios from 'axios'
+import type {App} from 'vue'
+
+interface AxiosOptions {
+    baseUrl?: string
+    token?: string
+}
+
+export default {
+    install: (app: App, options: AxiosOptions) => {
+        app.config.globalProperties.$axios = axios.create({
+            baseURL: options.baseUrl
+        })
+    }
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/presets/Noir.js b/roadrecon/frontend-ng/src/presets/Noir.js
new file mode 100644
index 00000000..b63a1b11
--- /dev/null
+++ b/roadrecon/frontend-ng/src/presets/Noir.js
@@ -0,0 +1,53 @@
+import { definePreset } from '@primevue/themes';
+        import Aura from '@primevue/themes/aura';
+
+        const Noir = definePreset(Aura, {
+            semantic: {
+                primary: {
+                50: '{surface.50}',
+                100: '{surface.100}',
+                200: '{surface.200}',
+                300: '{surface.300}',
+                400: '{surface.400}',
+                500: '{surface.500}',
+                600: '{surface.600}',
+                700: '{surface.700}',
+                800: '{surface.800}',
+                900: '{surface.900}',
+                950: '{surface.950}'
+                },
+                colorScheme: {
+                    light: {
+                        primary: {
+                        color: '{primary.950}',
+                        contrastColor: '#ffffff',
+                        hoverColor: '{primary.900}',
+                        activeColor: '{primary.800}'
+                        },
+                        highlight: {
+                        background: '{primary.950}',
+                        focusBackground: '{primary.700}',
+                        color: '#ffffff',
+                        focusColor: '#ffffff'
+                        },
+                    },
+                    dark: {
+                        primary: {
+                        color: '{primary.50}',
+                        contrastColor: '{primary.950}',
+                        hoverColor: '{primary.100}',
+                        activeColor: '{primary.200}'
+                        },
+                        highlight: {
+                        background: '{primary.50}',
+                        focusBackground: '{primary.300}',
+                        color: '{primary.950}',
+                        focusColor: '{primary.950}'
+                        }
+                    }
+                }
+            }
+        });
+
+        export default Noir;
+        
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/router.js b/roadrecon/frontend-ng/src/router.js
new file mode 100644
index 00000000..cf19de09
--- /dev/null
+++ b/roadrecon/frontend-ng/src/router.js
@@ -0,0 +1,113 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Dashboard from './pages/Dashboard.vue'
+import Users from './pages/Users.vue'
+import Groups from './pages/Groups.vue'
+import Devices from './pages/Devices.vue'
+import AdministrativeUnits from './pages/AdministrativeUnits.vue'
+import DirectoryRoles from './pages/DirectoryRoles.vue'
+import Applications from './pages/Applications.vue'
+import ServicePrincipals from './pages/ServicePrincipals.vue'
+import ApplicationRoles from './pages/ApplicationRoles.vue'
+import OAuth2Permissions from './pages/OAuth2Permissions.vue'
+import Policies from './pages/Policies.vue'
+import RowDetail from './pages/RowDetail.vue'
+
+const routerHistory = createWebHistory()
+
+export const routes = [
+  {
+    path: '/',
+    name: 'Dashboard',
+    component: Dashboard,
+    props: {name: 'Dashboard'},
+    icon: "pi pi-home"
+  },
+  {
+    path: '/Users',
+    name: 'Users',
+    component: Users,
+    props: {name: 'Users'},
+    icon: "pi pi-user"
+  },
+  {
+    path: '/Groups',
+    name: 'Groups',
+    component: Groups,
+    props: {name: 'Groups'},
+    icon: "pi pi-users"
+  },
+  {
+    path: '/Devices',
+    name: 'Devices',
+    component: Devices,
+    props: {name: 'Devices'},
+    icon: "pi pi-desktop"
+  },
+  {
+    path: '/AdministrativeUnits',
+    name: 'Administrative Units',
+    component: AdministrativeUnits,
+    props: {name: 'Administrative Units'},
+    icon: "pi pi-stop"
+  },
+  {
+    path: '/DirectoryRoles',
+    name: 'Directory Roles',
+    component: DirectoryRoles,
+    props: {name: 'Directory Roles'},
+    icon: "pi pi-stop"
+  },
+  {
+    path: '/Applications',
+    name: 'Applications',
+    component: Applications,
+    props: {name: 'Applications'},
+    icon: "pi pi-box"
+  },
+  {
+    path: '/ServicePrincipals',
+    name: 'Service Principals',
+    component: ServicePrincipals,
+    props: {name: 'ServicePrincipals'},
+    icon: "pi pi-crown"
+  },
+  {
+    path: '/ApplicationRoles',
+    name: 'Application Roles',
+    component: ApplicationRoles,
+    props: {name: 'Application Roles'},
+    icon: "pi pi-stop"
+  },
+  {
+    path: '/OAuth2Permissions',
+    name: 'Oauth2 Permissions',
+    component: OAuth2Permissions,
+    props: {name: 'OAuth2 Permissions'},
+    icon: "pi pi-stop"
+  },
+  {
+    path: '/Policies',
+    name: 'Policies',
+    component: Policies,
+    props: {name: 'Policies'},
+    icon: "pi pi-list-check"
+  },
+  {
+    path: '/:objectType/:objectId',
+    name: 'RowDetail',
+    component: RowDetail,
+    hideNavbar: true,
+  },
+  {
+    path: '/:catchAll(.*)',
+    redirect: '/'
+  }
+]
+
+const router = createRouter({
+  history: routerHistory,
+  routes: routes,
+  mode: 'history'
+})
+
+export default router
diff --git a/roadrecon/frontend-ng/src/services/toast.js b/roadrecon/frontend-ng/src/services/toast.js
new file mode 100644
index 00000000..a023e1f5
--- /dev/null
+++ b/roadrecon/frontend-ng/src/services/toast.js
@@ -0,0 +1,12 @@
+import {app} from '../main';
+
+const lifeTime = 3000;
+
+export function showInfo(title = 'I am title', body = 'I am body') {
+    app.config.globalProperties.$toast.add({ severity: 'info', summary: title, detail: body, life: lifeTime });
+}
+
+export function showError(title = 'I am title', body = 'I am body') {
+    console.log("printing error")
+    app.config.globalProperties.$toast.add({ severity: 'error', summary: title, detail: body, life: lifeTime });
+}
\ No newline at end of file
diff --git a/roadrecon/frontend-ng/src/utils/Utils.js b/roadrecon/frontend-ng/src/utils/Utils.js
new file mode 100644
index 00000000..d720abc3
--- /dev/null
+++ b/roadrecon/frontend-ng/src/utils/Utils.js
@@ -0,0 +1,34 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfigFile from '@tailwindConfig'
+
+export const tailwindConfig = () => {
+  return resolveConfig(tailwindConfigFile)
+}
+
+export const hexToRGB = (h) => {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h.length === 4) {
+    r = `0x${h[1]}${h[1]}`;
+    g = `0x${h[2]}${h[2]}`;
+    b = `0x${h[3]}${h[3]}`;
+  } else if (h.length === 7) {
+    r = `0x${h[1]}${h[2]}`;
+    g = `0x${h[3]}${h[4]}`;
+    b = `0x${h[5]}${h[6]}`;
+  }
+  return `${+r},${+g},${+b}`;
+};
+
+export const formatValue = (value) => Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumSignificantDigits: 3,
+  notation: 'compact',
+}).format(value);
+
+export const formatThousands = (value) => Intl.NumberFormat('en-US', {
+  maximumSignificantDigits: 3,
+  notation: 'compact',
+}).format(value);
diff --git a/roadrecon/frontend-ng/tailwind.config.js b/roadrecon/frontend-ng/tailwind.config.js
new file mode 100644
index 00000000..c70db3c2
--- /dev/null
+++ b/roadrecon/frontend-ng/tailwind.config.js
@@ -0,0 +1,139 @@
+import plugin from "tailwindcss/plugin";
+import forms from '@tailwindcss/forms';
+
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          50: '#F9FAFB',
+          100: '#F3F4F6',
+          200: '#E5E7EB',
+          300: '#BFC4CD',
+          400: '#9CA3AF',
+          500: '#6B7280',
+          600: '#4B5563',
+          700: '#374151',
+          800: '#1F2937',
+          900: '#111827',
+          950: '#030712',
+        },
+        violet: {
+          50: '#F1EEFF',
+          100: '#E6E1FF',
+          200: '#D2CBFF',
+          300: '#B7ACFF',
+          400: '#9C8CFF',
+          500: '#8470FF',
+          600: '#755FF8',
+          700: '#5D47DE',
+          800: '#4634B1',
+          900: '#2F227C',
+          950: '#1C1357',
+        },
+        sky: {
+          50: '#E3F3FF',
+          100: '#D1ECFF',
+          200: '#B6E1FF',
+          300: '#A0D7FF',
+          400: '#7BC8FF',
+          500: '#67BFFF',
+          600: '#56B1F3',
+          700: '#3193DA',
+          800: '#1C71AE',
+          900: '#124D79',
+          950: '#0B324F',
+        },
+        green: {
+          50: '#D2FFE2',
+          100: '#B1FDCD',
+          200: '#8BF0B0',
+          300: '#67E294',
+          400: '#4BD37D',
+          500: '#3EC972',
+          600: '#34BD68',
+          700: '#239F52',
+          800: '#15773A',
+          900: '#0F5429',
+          950: '#0A3F1E',
+        },
+        red: {
+          50: '#FFE8E8',
+          100: '#FFD1D1',
+          200: '#FFB2B2',
+          300: '#FF9494',
+          400: '#FF7474',
+          500: '#FF5656',
+          600: '#FA4949',
+          700: '#E63939',
+          800: '#C52727',
+          900: '#941818',
+          950: '#600F0F',
+        },
+        yellow: {
+          50: '#FFF2C9',
+          100: '#FFE7A0',
+          200: '#FFE081',
+          300: '#FFD968',
+          400: '#F7CD4C',
+          500: '#F0BB33',
+          600: '#DFAD2B',
+          700: '#BC9021',
+          800: '#816316',
+          900: '#4F3D0E',
+          950: '#342809',
+        },
+      },
+      fontFamily: {
+        inter: ['Inter', 'sans-serif'],
+      },
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1.5' }],
+        sm: ['0.875rem', { lineHeight: '1.5715' }],
+        base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
+        '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
+        '4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
+        '5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
+        '6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
+      },
+      screens: {
+        xs: '480px',
+      },
+      borderWidth: {
+        3: '3px',
+      },
+      minWidth: {
+        36: '9rem',
+        44: '11rem',
+        56: '14rem',
+        60: '15rem',
+        72: '18rem',
+        80: '20rem',
+      },
+      maxWidth: {
+        '8xl': '88rem',
+        '9xl': '96rem',
+      },
+      zIndex: {
+        60: '60',
+      },
+    },
+  },
+  plugins: [
+    forms,
+    // add custom variant for expanding sidebar
+    plugin(({ addVariant, e }) => {
+      addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
+      });
+    }),
+  ],
+};
diff --git a/roadrecon/frontend-ng/vite.config.docker.js b/roadrecon/frontend-ng/vite.config.docker.js
new file mode 100644
index 00000000..3bd027ee
--- /dev/null
+++ b/roadrecon/frontend-ng/vite.config.docker.js
@@ -0,0 +1,45 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import svgLoader from 'vite-svg-loader'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    'process.env': process.env
+  },
+  plugins: [vue(), svgLoader()],
+  resolve: {
+    alias: {
+      '@tailwindConfig': path.resolve(__dirname, 'tailwind.config.js'),
+    },
+  },
+  optimizeDeps: {
+    include: [
+      '@tailwindConfig',
+    ]
+  },  
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    }
+  },
+  server:{
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://backend:5000',
+        changeOrigin: true,
+      },
+    },
+    fs: {
+      allow: [
+        '/usr/src/app/node_modules/primeicons/',
+        '/usr/src/app/node_modules/vue3-json-viewer/',
+        '/usr/src/app/node_modules/vite/dist/client',
+        '/usr/src/app/src'
+      ]
+    }
+  }
+})
diff --git a/roadrecon/frontend-ng/vite.config.js b/roadrecon/frontend-ng/vite.config.js
new file mode 100644
index 00000000..5daf5018
--- /dev/null
+++ b/roadrecon/frontend-ng/vite.config.js
@@ -0,0 +1,47 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import svgLoader from 'vite-svg-loader'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    'process.env': process.env
+  },
+  plugins: [vue(), svgLoader()],
+  resolve: {
+    alias: {
+      '@tailwindConfig': path.resolve(__dirname, 'tailwind.config.js'),
+    },
+  },
+  optimizeDeps: {
+    include: [
+      '@tailwindConfig',
+    ]
+  },  
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    outDir: '../roadtools/roadrecon/dist_gui',
+    emptyOutDir: true, // also necessary
+  },
+  server:{
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://backend:5000',
+        changeOrigin: true,
+      },
+    },
+    fs: {
+      allow: [
+        '/usr/src/app/node_modules/primeicons/',
+        '/usr/src/app/node_modules/vue3-json-viewer/',
+        '/usr/src/app/node_modules/vite/dist/client',
+        '/usr/src/app/src'
+      ]
+    }
+  }
+})
diff --git a/roadrecon/roadtools/roadrecon/server.py b/roadrecon/roadtools/roadrecon/server.py
index 1b0c6ff2..d3f01858 100644
--- a/roadrecon/roadtools/roadrecon/server.py
+++ b/roadrecon/roadtools/roadrecon/server.py
@@ -1,18 +1,28 @@
+import sys
 from flask import Flask, request, jsonify, abort, send_from_directory, redirect, send_file
 from flask_sqlalchemy import SQLAlchemy
 from flask_marshmallow import Marshmallow
 from flask_cors import CORS
 from marshmallow_sqlalchemy import ModelConverter
 from marshmallow import fields
-from roadtools.roadlib.metadef.database import User, JSON, Group, DirectoryRole, ServicePrincipal, AppRoleAssignment, TenantDetail, Application, Device, OAuth2PermissionGrant, AuthorizationPolicy, DirectorySetting, AdministrativeUnit, RoleDefinition
+from roadtools.roadlib.metadef.database import User, Policy, JSON, Group, DirectoryRole, ServicePrincipal, AppRoleAssignment, TenantDetail, Application, Device, OAuth2PermissionGrant, AuthorizationPolicy, DirectorySetting, AdministrativeUnit, RoleDefinition
 import os
+import logging
 import argparse
-from sqlalchemy import func, and_, or_, select
+from sqlalchemy import func, and_, or_, select, desc, asc, cast
+from sqlalchemy.event import listens_for
+from sqlalchemy.pool import _ConnectionRecord
 import mimetypes
+import json
+import zlib
+import base64
+from html import escape
 
 app = Flask(__name__)
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
+logging.getLogger('werkzeug').setLevel(logging.DEBUG)
+
 # This will get initialized later on
 db = None
 ma = Marshmallow(app)
@@ -43,6 +53,11 @@ class Meta:
         model = User
         fields = ('objectId', 'objectType', 'userPrincipalName', 'displayName', 'mail', 'lastDirSyncTime', 'accountEnabled', 'department', 'lastPasswordChangeDateTime', 'jobTitle', 'mobile', 'dirSyncEnabled', 'strongAuthenticationDetail', 'userType', 'searchableDeviceKey')
 
+class PoliciesSchema(ma.Schema):
+    class Meta:
+        model = Policy
+        fields = ('objectId', 'objectType', 'deletionTimestamp', 'displayName', 'keyCredentials', 'policyType', 'policyDetail', 'policyIdentifier', 'tenantDefaultPolicy')
+
 class DevicesSchema(ma.Schema):
     class Meta:
         model = User
@@ -51,7 +66,7 @@ class Meta:
 class DirectoryRoleSchema(ma.Schema):
     class Meta:
         model = DirectoryRole
-        fields = ('displayName', 'description')
+        fields = ('displayName', 'description', 'objectId', 'objectType', 'objectId', 'objectType')
 
 class OAuth2PermissionGrantsSchema(ma.SQLAlchemyAutoSchema):
     class Meta:
@@ -111,6 +126,10 @@ class Meta(RTModelSchema.Meta):
     ownedApplications = fields.Nested(ApplicationsSchema, many=True)
     ownedGroups = fields.Nested(GroupsSchema, many=True)
 
+class PolicySchema(RTModelSchema):
+    class Meta(RTModelSchema.Meta):
+        model = Policy
+
 class DeviceSchema(RTModelSchema):
     class Meta(RTModelSchema.Meta):
         model = Device
@@ -167,6 +186,7 @@ class Meta(RTModelSchema.Meta):
 
 # Instantiate all schemas
 user_schema = UserSchema()
+policy_schema = PolicySchema()
 device_schema = DeviceSchema()
 group_schema = GroupSchema()
 application_schema = ApplicationSchema()
@@ -176,6 +196,7 @@ class Meta(RTModelSchema.Meta):
 administrativeunit_schema = AdministrativeUnitSchema()
 authorizationpolicy_schema = AuthorizationPolicySchema(many=True)
 users_schema = UsersSchema(many=True)
+policies_schema = PoliciesSchema(many=True)
 devices_schema = DevicesSchema(many=True)
 groups_schema = GroupsSchema(many=True)
 applications_schema = ApplicationsSchema(many=True)
@@ -183,6 +204,114 @@ class Meta(RTModelSchema.Meta):
 directoryroles_schema = DirectoryRolesSchema(many=True)
 administrativeunits_schema = AdministrativeUnitsSchema(many=True)
 
+
+def _translate_locations(locs):
+    policies = db.session.query(Policy).filter(Policy.policyType == 6).all()
+    out = []
+    # Not sure if there can be multiple
+    for policy in policies:
+        for pdetail in policy.policyDetail:
+            detaildata = json.loads(pdetail)
+            if 'KnownNetworkPolicies' in detaildata and detaildata['KnownNetworkPolicies']['NetworkId'] in locs:
+                out.append(detaildata['KnownNetworkPolicies']['NetworkName'])
+    # New format
+    for loc in locs:
+        policies = db.session.query(Policy).filter(Policy.policyType == 6, Policy.policyIdentifier == loc).all()
+        for policy in policies:
+            out.append(policy.displayName)
+    return out
+
+def parse_compressed_cidr(detail):
+    if not 'CompressedCidrIpRanges' in detail:
+            return ''
+    compressed = detail['CompressedCidrIpRanges']
+    b = base64.b64decode(compressed)
+    cstr = zlib.decompress(b, -zlib.MAX_WBITS)
+    decoded_cidrs = escape(cstr.decode()).split(",")
+    return decoded_cidrs
+
+def parse_associated_policies(location_object, is_trusted_location,condition_policy_list):
+    found_pols = []
+
+    for pol in condition_policy_list:
+        if not pol.policyDetail:
+            continue
+        parsed = json.loads(pol.policyDetail[0])
+        if not parsed.get('Conditions') or not parsed.get('Conditions').get('Locations'):
+            continue
+
+        cloc = parsed.get('Conditions').get('Locations')
+        incl = cloc.get('Include') or []
+        excl = cloc.get('Exclude') or []
+        for i in incl:
+            if location_object in i.get('Locations') or (is_trusted_location and "AllTrusted" in i.get('Locations')):
+                found_pols.append(pol.displayName)
+
+        for i in excl:
+            if location_object in i.get('Locations') or (is_trusted_location and "AllTrusted" in i.get('Locations')):
+                found_pols.append(pol.displayName)
+
+    return found_pols
+
+# Function to build a dynamic filter
+def build_dynamic_filter(schema, search_string):
+    search_string = f"%{search_string}%"  # SQL wildcard for partial match
+    filters = []
+
+    # Iterate through each field defined in the schema's Meta class
+    for field in schema._declared_fields.keys():
+        # Ensure the attribute exists in the User model
+        if hasattr(User, field):
+            filters.append(getattr(User, field).like(search_string))  # Build the filter for each field
+
+    # Return an OR combination of all filters
+    return or_(*filters)
+
+def query_all_items(request,schema,model,fields):
+    page = request.args.get('page', type=int)
+    rows = request.args.get('rows', type=int)
+    search = request.args.get('search', type=str)
+    sortedField = request.args.get('sortedField', type=str)
+    sortOrder = request.args.get('sortOrder', type=int)
+
+    query = db.session.query(model)
+    
+    if search:
+        # For now only search on the userPrincipalName and displayName fields, others will be added with advanced filtering
+        #filter = build_dynamic_filter(user_schema, search)
+        filters = []
+        for field in fields:
+            filters.append(getattr(model,field).like(f'%{search}%'))
+        
+        query = query.filter(or_(*filters))
+    
+    if sortedField:
+        field = getattr(model, sortedField)
+        if hasattr(field, 'type') and isinstance(field.type, JSON):
+            # For JSON fields, use the length of the JSON array for sorting
+            field = func.json_array_length(cast(field, db.Text))
+        elif hasattr(field, 'property') and hasattr(field.property, 'direction'):
+            # Handle relationship fields
+            field = field.property.direction.mapper.class_.id
+        if sortOrder == 1:
+            query = query.order_by(field.desc())
+        elif sortOrder == -1:
+            query = query.order_by(field.asc())
+
+    if page is None and rows is None:
+        all_items = query.all()
+        result = {
+            'items': schema.dump(all_items),
+            'total': None
+        }
+    else:
+        all_items = query.paginate(page=page, per_page=rows)
+        result = {
+            'items': schema.dump(all_items),
+            'total': all_items.total
+        }
+    return jsonify(result)
+
 @app.route("/")
 def get_index():
     return send_file('dist_gui/index.html')
@@ -200,10 +329,7 @@ def get_gui(path):
 
 @app.route("/api/users", methods=["GET"])
 def get_users():
-    all_users = db.session.query(User).all()
-    result = users_schema.dump(all_users)
-    return jsonify(result)
-
+    return query_all_items(request, users_schema, User, ["userPrincipalName"])
 
 @app.route("/api/users/<id>", methods=["GET"])
 def user_detail(id):
@@ -212,12 +338,237 @@ def user_detail(id):
         abort(404)
     return user_schema.jsonify(user)
 
+@app.route("/api/policies", methods=["GET"])
+def get_policies():
+    policies = db.session.query(Policy).filter(or_(Policy.policyType == 18,Policy.policyType == 6)).order_by(Policy.displayName.asc()).all()
+    results = policies_schema.dump(policies)
+
+    for policy in results:
+        if policy['policyType'] == 18:
+            policy['policyDetail'] = json.loads(policy['policyDetail'][0])
+            if 'Conditions' in policy['policyDetail']:
+                conditions = policy['policyDetail']['Conditions']
+                if 'Applications' in conditions:
+                    applications = conditions['Applications']
+                    for key in applications.keys():
+                        for (index, object_type) in enumerate(applications[key]):
+                            resolved = []
+                            if 'Applications' in object_type:
+                                if 'Applications' in applications[key][index]:
+                                    for app in applications[key][index]['Applications']:
+                                        if app == "All":
+                                            print(applications,file=sys.stderr)
+                                            break
+                                        # If its an appId (UUID)
+                                        elif len(app) == 36:
+                                            application = db.session.query(ServicePrincipal).filter(ServicePrincipal.appId == app).first()
+                                            if application is not None:
+                                                resolved.append({
+                                                    'displayName': application.displayName,
+                                                    'objectId': app
+                                                })
+                                            else:
+                                                resolved.append({
+                                                    'displayName': app,
+                                                    'objectId': app
+                                                })
+                                        # Already resolved, just pass
+                                        else:
+                                            resolved.append({
+                                                'displayName':app,
+                                                'objectId':'None'
+                                            })
+                            if len(resolved) > 0:
+                                applications[key][index]['Applications'] = resolved
+                            else:
+                                applications[key][index] = []
+                        if len(applications[key][index]) == 0:
+                            del applications[key][index]
+                    if len(applications[key]) == 0:
+                        del conditions['Applications']
+                if 'ServicePrincipals' in conditions:
+                    serviceprincipals = conditions['ServicePrincipals']
+                    for key in serviceprincipals.keys():
+                        resolved = []
+                        for (index, object_type) in enumerate(serviceprincipals[key]):
+                            if 'ServicePrincipals' in serviceprincipals[key][index]:
+                                for sp in serviceprincipals[key][index]['ServicePrincipals']:
+                                    if sp == "All":
+                                        resolved.append({
+                                            'displayName':'All',
+                                            'objectId':'None'
+                                        })
+                                    # If its an objectId (UUID)
+                                    elif len(sp) == 36:
+                                        serviceprincipal = db.session.query(ServicePrincipal).filter(ServicePrincipal.objectId == sp).first()
+                                        if serviceprincipal is not None:
+                                            resolved.append({
+                                                'displayName': serviceprincipal.displayName,
+                                                'objectId': sp
+                                            })
+                                        else:
+                                            resolved.append({
+                                                'displayName': sp,
+                                                'objectId': sp
+                                            })
+                                    elif sp == "None":
+                                        pass
+                                    # Already resolved, just pass
+                                    else:
+                                        resolved.append({
+                                            'displayName': sp,
+                                            'objectId':'None'
+                                        })
+                            serviceprincipals[key][index]['ServicePrincipals'] = resolved
+                if 'Users' in conditions:
+                    users = conditions['Users']
+                    for key in users.keys():
+                        for (index, object_type) in enumerate(users[key]):
+                            if 'Users' in object_type:
+                                resolved = []
+                                if 'Users' in users[key][index]:
+                                    for usr in users[key][index]['Users']:
+                                        if usr == 'None':
+                                            users[key][index] = users[key][index].pop('Users')
+                                            break
+                                        if usr == "All":
+                                            resolved.append({
+                                                'displayName':'All',
+                                                'objectId':'None'
+                                            })
+                                        # If its an appId (UUID)
+                                        elif len(usr) == 36:
+                                            user = db.session.query(User).filter(User.objectId == usr).first()
+                                            if user is not None:
+                                                resolved.append({
+                                                    'displayName': user.displayName,
+                                                    'objectId': usr
+                                                })
+                                            else:
+                                                resolved.append({
+                                                    'displayName': usr,
+                                                    'objectId': usr
+                                                })
+                                        # Already resolved, just pass
+                                        else:
+                                            resolved.append({
+                                                'displayName': usr,
+                                                'objectId':'None'
+                                            })
+                                if len(resolved) > 0:
+                                    users[key][index]['Users'] = resolved
+                            if 'Groups' in object_type:
+                                resolved = []
+                                if 'Groups' in users[key][index]:
+                                    for grp in users[key][index]['Groups']:
+                                        if grp == "All":
+                                            resolved.append({
+                                                'displayName':'All',
+                                                'objectId':'None'
+                                            })
+                                        # If its an appId (UUID)
+                                        elif len(grp) == 36:
+                                            group = db.session.query(Group).filter(Group.objectId == grp).first()
+                                            if group is not None:
+                                                resolved.append({
+                                                    'displayName': group.displayName,
+                                                    'objectId': grp
+                                                })
+                                            else:
+                                                resolved.append({
+                                                    'displayName': grp,
+                                                    'objectId': grp
+                                                })
+                                        elif grp == "None":
+                                            pass
+                                        # Already resolved, just pass
+                                        else:
+                                            resolved.append({
+                                                'displayName': grp,
+                                                'objectId':'None'
+                                            })
+                                users[key][index]['Groups'] = resolved
+                            if 'Roles' in object_type:
+                                resolved = []
+                                if 'Roles' in users[key][index]:
+                                    for rle in users[key][index]['Roles']:
+                                        if rle == "All":
+                                            resolved.append({
+                                                'displayName':'All',
+                                                'objectId':'None'
+                                            })
+                                        # If its an appId (UUID)
+                                        elif len(rle) == 36:
+                                            role = db.session.query(RoleDefinition).filter(RoleDefinition.objectId == rle).first()
+                                            if role is not None:
+                                                resolved.append({
+                                                    'displayName': role.displayName,
+                                                    'objectId': rle
+                                                })
+                                            else:
+                                                resolved.append({
+                                                    'displayName': rle,
+                                                    'objectId': rle
+                                                })
+                                        elif rle == "None":
+                                            pass
+                                        # Already resolved, just pass
+                                        else:
+                                            resolved.append({
+                                                'displayName': rle,
+                                                'objectId':'None'
+                                            })
+                                    users[key][index]['Roles'] = resolved
+                    #Cleaning up data from DB
+                    keys_to_remove = []
+                    for key, value in users.items():
+                        if isinstance(value, list) and all(isinstance(item, list) and item == ["None"] for item in value):
+                            keys_to_remove.append(key)
+                    for key in keys_to_remove:
+                        del users[key]
+                    if not users:
+                        del conditions['Users']
+                if 'Locations' in conditions:
+                    locations = conditions['Locations']
+                    for key in locations.keys():
+                        for (index, object_type) in enumerate(locations[key]):
+                            if "All" not in object_type['Locations']:
+                                translated = _translate_locations(object_type['Locations'])
+                            else:
+                                translated = object_type['Locations']
+                        conditions['Locations'][key] = translated
+        elif policy['policyType'] == 6:
+            policy['policyDetail'] = json.loads(policy['policyDetail'][0])
+
+            detail = None
+            oldpolicy = False
+
+            if 'KnownNetworkPolicies' in policy['policyDetail']:
+                    detail = policy['policyDetail']['KnownNetworkPolicies']
+                    oldpolicy = True
+            else:
+                detail = policy['policyDetail']
+            if not oldpolicy:
+                policy['trusted'] = ("trusted" in detail.get("Categories","") if detail.get("Categories") else False)
+                policy['appliestounknowncountry'] = str(detail.get("ApplyToUnknownCountry")) if detail.get("ApplyToUnknownCountry") is not None else False
+                policy['ipranges'] = ",".join(parse_compressed_cidr(detail))
+                policy['categories'] = ",".join(detail.get("Categories")) if detail.get("Categories") is not None else ""
+                policy['associated_policies'] = ",".join(parse_associated_policies(policy['policyIdentifier'],policy['trusted'],policies))
+                policy['country_codes'] = ",".join(detail.get("CountryIsoCodes")) if detail.get("CountryIsoCodes") else None
+            else:
+                policy['name'] = detail.get("NetworkName")
+                policy['trusted'] = ("trusted" in detail.get("Categories","") if detail.get("Categories") else False)
+                policy['appliestounknowncountry'] = str(detail.get("ApplyToUnknownCountry")) if detail.get("ApplyToUnknownCountry") is not None else False
+                policy['ipranges'] = ",".join(detail.get('CidrIpRanges')) if detail.get("CidrIpRanges") else ""
+                policy['categories'] = ", ".join(detail.get("Categories")) if detail.get("Categories") is not None else ""
+                policy['associated_policies'] = ",".join(parse_associated_policies(detail.get('NetworkId'),policy['trusted'],policies))
+                policy['country_codes'] =  ",".join(detail.get("CountryIsoCodes")) if detail.get("CountryIsoCodes") else None
+
+    return jsonify(results)
+
 @app.route("/api/devices", methods=["GET"])
 def get_devices():
-    all_devices = db.session.query(Device).all()
-    result = devices_schema.dump(all_devices)
-    return jsonify(result)
-
+    return query_all_items(request, devices_schema, Device, ["displayName"])
 
 @app.route("/api/devices/<id>", methods=["GET"])
 def device_detail(id):
@@ -236,9 +587,7 @@ def user_groups(id):
 
 @app.route("/api/groups", methods=["GET"])
 def get_groups():
-    all_groups = db.session.query(Group).all()
-    result = groups_schema.dump(all_groups)
-    return jsonify(result)
+    return query_all_items(request, groups_schema, Group, ["displayName"])
 
 @app.route("/api/groups/<id>", methods=["GET"])
 def group_detail(id):
@@ -249,9 +598,7 @@ def group_detail(id):
 
 @app.route("/api/administrativeunits", methods=["GET"])
 def get_administrativeunits():
-    all_administrativeunits = db.session.query(AdministrativeUnit).all()
-    result = administrativeunits_schema.dump(all_administrativeunits)
-    return jsonify(result)
+    return query_all_items(request, administrativeunits_schema, AdministrativeUnit, ["displayName"])
 
 @app.route("/api/administrativeunits/<id>", methods=["GET"])
 def administrativeunit_detail(id):
@@ -262,15 +609,22 @@ def administrativeunit_detail(id):
 
 @app.route("/api/serviceprincipals", methods=["GET"])
 def get_sps():
-    all_sps = db.session.query(ServicePrincipal).all()
-    return serviceprincipals_schema.jsonify(all_sps)
+    return query_all_items(request, serviceprincipals_schema, ServicePrincipal, ["displayName"])
 
 @app.route("/api/serviceprincipals/<id>", methods=["GET"])
 def sp_detail(id):
     sp = db.session.get(ServicePrincipal, id)
     if not sp:
         abort(404)
-    return serviceprincipal_schema.jsonify(sp)
+    result = serviceprincipal_schema.dump(sp)
+    for (i,elem) in enumerate(sp.appRolesAssigned):
+        resource_data = get_approle_by_resources_(sp.appRolesAssigned[i].resourceId)
+        result['appRolesAssigned'][i]['desc'] = resource_data[0]['desc']
+        result['appRolesAssigned'][i]['value'] = resource_data[0]['value']
+    if len(sp.appRolesAssignedTo) > 0:
+        principal_data = get_approles_by_principal_(sp.appRolesAssigned[0].resourceId)
+        result['appRolesAssignedTo'] = principal_data
+    return jsonify(result)
 
 @app.route("/api/serviceprincipals-by-appid/<id>", methods=["GET"])
 def sp_detail_by_appid(id):
@@ -281,9 +635,7 @@ def sp_detail_by_appid(id):
 
 @app.route("/api/applications", methods=["GET"])
 def get_applications():
-    all_applications = db.session.query(Application).all()
-    result = applications_schema.dump(all_applications)
-    return jsonify(result)
+    return query_all_items(request, applications_schema, Application, ["displayName"])
 
 @app.route("/api/mfa", methods=["GET"])
 def get_mfa():
@@ -420,51 +772,117 @@ def process_approle(approles, ar):
     if ar.principalType == 'Group':
         sp = db.session.get(Group, ar.principalId)
     if ar.id == '00000000-0000-0000-0000-000000000000':
-        approles.append({'objid':sp.objectId,
-                         'ptype':ar.principalType,
-                         'pname':sp.displayName,
-                         'app':ar.resourceDisplayName,
-                         'value':'Default',
-                         'desc':'Default Role',
-                         'spid':ar.resourceId,
-                        })
+        if sp is not None and ar is not None:
+            approles.append({'objectId':sp.objectId,
+                            'principalType':ar.principalType,
+                            'principalDisplayName':sp.displayName,
+                            'resourceDisplayName':ar.resourceDisplayName,
+                            'value':'Default',
+                            'desc':'Default Role',
+                            'spid':ar.resourceId,
+                            })
     else:
         for approle in rsp.appRoles:
             if approle['id'] == ar.id:
-                approles.append({'objid':sp.objectId,
-                                 'ptype':ar.principalType,
-                                 'pname':sp.displayName,
-                                 'app':ar.resourceDisplayName,
-                                 'value':approle['value'],
-                                 'desc':approle['displayName'],
-                                 'spid':ar.resourceId,
-                                })
+                if sp is not None and ar is not None:
+                    approles.append({'objectId':sp.objectId,
+                                    'principalType':ar.principalType,
+                                    'principalDisplayName':sp.displayName,
+                                    'resourceDisplayName':ar.resourceDisplayName,
+                                    'value':approle['value'],
+                                    'desc':approle['displayName'],
+                                    'spid':ar.resourceId,
+                                    })
 
 @app.route("/api/approles", methods=["GET"])
 def get_approles():
+    page = request.args.get('page', type=int)
+    rows = request.args.get('rows', type=int)
+    search = request.args.get('search', type=str)
+    sortedField = request.args.get('sortedField', type=str)
+    sortOrder = request.args.get('sortOrder', type=int)
+
     approles = []
-    for ar in db.session.query(AppRoleAssignment).all():
+    query = db.session.query(AppRoleAssignment)
+
+    if search:
+        # For now only search on the userPrincipalName and displayName fields, others will be added with advanced filtering
+        #filter = build_dynamic_filter(user_schema, search)
+        filters = []
+        filters.append(AppRoleAssignment.principalDisplayName.like(f'%{search}%'))
+        
+        query = query.filter(or_(*filters))
+    
+    if sortedField:
+        if sortOrder == 1:
+            query = query.order_by(getattr(AppRoleAssignment,sortedField).desc())
+        elif sortOrder == -1:
+            query = query.order_by(getattr(AppRoleAssignment,sortedField).asc())
+
+    if page is None and rows is None:
+        result = query.all()
+    else:
+        result = query.paginate(page=page, per_page=rows)
+    
+    for ar in result:
         process_approle(approles, ar)
-    return jsonify(approles)
+    
+    result = {'items':approles,'total':result.total}
 
-@app.route("/api/approles_by_resource/<spid>", methods=["GET"])
-def get_approles_by_resource(spid):
+    return jsonify(result)
+
+def get_approle_by_resources_(spid):
     approles = []
     for ar in db.session.query(AppRoleAssignment).filter(AppRoleAssignment.resourceId == spid):
         process_approle(approles, ar)
-    return jsonify(approles)
+    return approles
 
-@app.route("/api/approles_by_principal/<pid>", methods=["GET"])
-def get_approles_by_principal(pid):
+@app.route("/api/approles_by_resource/<spid>", methods=["GET"])
+def get_approles_by_resource(spid):
+    return jsonify(get_approle_by_resources_(spid))
+
+def get_approles_by_principal_(pid):
     approles = []
     for ar in db.session.query(AppRoleAssignment).filter(AppRoleAssignment.principalId == pid):
         process_approle(approles, ar)
-    return jsonify(approles)
+    return approles
+
+@app.route("/api/approles_by_principal/<pid>", methods=["GET"])
+def get_approles_by_principal(pid):
+    jsonify(get_approles_by_principal_(pid))
 
 @app.route("/api/oauth2permissions", methods=["GET"])
 def get_oauth2permissions():
+    page = request.args.get('page', type=int)
+    rows = request.args.get('rows', type=int)
+    search = request.args.get('search', type=str)
+    sortedField = request.args.get('sortedField', type=str)
+    sortOrder = request.args.get('sortOrder', type=int)
+
+    query = db.session.query(OAuth2PermissionGrant)
+
+    if search:
+        # For now only search on the userPrincipalName and displayName fields, others will be added with advanced filtering
+        #filter = build_dynamic_filter(user_schema, search)
+        filters = []
+        filters.append(ServicePrincipal.displayName.like(f'%{search}%'))
+        
+        query = query.filter(or_(*filters))
+
+    if sortedField:
+        if sortOrder == 1:
+            query = query.order_by(getattr(OAuth2PermissionGrant,sortedField).desc())
+        elif sortOrder == -1:
+            query = query.order_by(getattr(OAuth2PermissionGrant,sortedField).asc())
+
+    if page is None and rows is None:
+        result = query.all()
+        result.total = len(result)
+    else:
+        result = query.paginate(page=page, per_page=rows)
+
     oauth2permissions = []
-    for permgrant in db.session.query(OAuth2PermissionGrant).all():
+    for permgrant in result:
         grant = {}
         rsp = db.session.get(ServicePrincipal, permgrant.clientId)
         if permgrant.consentType == 'Principal':
@@ -484,7 +902,8 @@ def get_oauth2permissions():
         grant['expiry'] = permgrant.expiryTime.strftime("%Y-%m-%dT%H:%M:%S")
         grant['scope'] = permgrant.scope
         oauth2permissions.append(grant)
-    return jsonify(oauth2permissions)
+
+    return jsonify({'items':oauth2permissions,'total':result.total})
 
 @app.route("/api/roledefinitions", methods=["GET"])
 def get_allroles():
@@ -508,6 +927,8 @@ def get_allroles():
                 'scopeIds': sids
             }
             principalType, principal = resolve_objectid(assignment.principalId)
+            if principal == None:
+                break
             aobj['principal'] = principal
 
             roleobj['assignments'].append(aobj)
@@ -535,6 +956,8 @@ def get_allroles():
                 'scopeIds': sids
             }
             principalType, principal = resolve_objectid(assignment.principalId)
+            if principal == None:
+                break
             aobj['principal'] = principal
             roleobj['assignments'].append(aobj)
             if principalType == 'Group':
@@ -617,6 +1040,7 @@ def main(args=None):
                             help='HTTP Server port (default=5000)',
                             default=5000)
         args = parser.parse_args()
+    
     if not ':/' in args.database:
         if args.database[0] != '/':
             app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(os.getcwd(), args.database)
@@ -628,7 +1052,7 @@ def main(args=None):
     if args.profile:
         from werkzeug.middleware.profiler import ProfilerMiddleware
         app.wsgi_app = ProfilerMiddleware(app.wsgi_app, restrictions=[5])
-    app.run(debug=args.debug, port=args.port)
+    app.run(debug=args.debug, host='0.0.0.0', port=args.port)
 
 if __name__ == '__main__':
     main()