Fix config vars (#529)

* Redirect /setup to /peers if not setup is required

* Fix bad state while redirect

* Prevent redirect to /setup if already on /setup

* Fix loading state

.github/workflows/build_and_push.yml

@@ -2,7 +2,6 @@ name: build and push
 on:
   push:
     branches:
-      - "feature/**"
       - main
     tags:
       - "**"
@@ -28,6 +27,33 @@ jobs:
 
       - run: echo '{}' > .local-config.json
 
+      - name: Download IronRDP release TS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.ts"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release JS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.js"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release WASM file
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "ironrdp_web_bg.wasm"
+          out-file-path: 'public/ironrdp-pkg'
+
       - name: Build
         run: npm run build
       -
@@ -44,7 +70,6 @@ jobs:
           images: ${{ env.IMAGE_NAME }}
       -
         name: Login to DockerHub
-        if: github.event_name != 'pull_request'
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.NB_DOCKER_USER }}
@@ -55,7 +80,7 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           platforms: linux/amd64,linux/arm64,linux/arm
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -41,3 +41,8 @@ next-env.d.ts
 .configs/.staging-config.json
 .configs/.temp-config.json
 .configs
+
+/public/ironrdp-pkg/
+/public/netbird.wasm
+.idea
+src/.local-config*

README.md

@@ -26,6 +26,7 @@ The dashboard makes it possible to:
 - NextJS
 - ReactJS
 - Tailwind CSS
+- [React Flow](https://reactflow.dev/) for the Control Center
 - Auth0
 - Nginx
 - Docker

config.json

@@ -13,5 +13,6 @@
   "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
   "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
-  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID"
-}
+  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID",
+  "wasmPath": "$NETBIRD_WASM_PATH"
+}

docker/default.conf

@@ -3,6 +3,14 @@ server {
 	listen [::]:80 default_server;
 
     root /usr/share/nginx/html;
+    location = /netbird.wasm {
+        root /usr/share/nginx/html;
+        default_type application/wasm;
+    }
+    location = /ironrdp-pkg/ironrdp_web_bg.wasm {
+        root /usr/share/nginx/html;
+        default_type application/wasm;
+    }
 
     location / {
       try_files $uri $uri.html $uri/ =404;

docker/init_react_envs.sh

@@ -61,11 +61,12 @@ export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
 export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
+export NETBIRD_WASM_PATH=${NETBIRD_WASM_PATH}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS \$\$NETBIRD_WASM_PATH"
 
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"

docker/nginx.conf

@@ -101,6 +101,7 @@ http {
     application/rss+xml
     application/vnd.geo+json
     application/vnd.ms-fontobject
+    application/wasm
     application/x-font-ttf
     application/x-web-app-manifest+json
     application/xhtml+xml

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@axa-fr/react-oidc": "^7.22.18",
+    "@dagrejs/dagre": "^1.1.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -35,11 +36,15 @@
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
     "@types/crypto-js": "^4.2.2",
+    "@types/d3": "^7.4.3",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-window": "^1.8.8",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "@xyflow/react": "^12.8.4",
     "autoprefixer": "^10",
     "chart.js": "^4.4.8",
     "chroma-js": "^3.1.2",
@@ -47,19 +52,21 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "crypto-js": "^4.2.0",
+    "d3": "^7.9.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
-    "eslint": "^8",
+    "elkjs": "^0.10.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.6.4",
     "framer-motion": "^10.16.4",
+    "ip-address": "^10.1.0",
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.481.0",
-    "next": "^14.2.28",
+    "lucide-react": "^0.539.0",
+    "next": "^14.2.35",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18.3.1",
@@ -83,10 +90,10 @@
     "@faker-js/faker": "^9.5.1",
     "@types/chroma-js": "^3.1.1",
     "@types/js-cookie": "^3.0.6",
-    "eslint-config-next": "^14.2.28",
-    "cypress": "^13.13.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.5",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3.4.17"
   }
 }

public/wasm_exec.js

@@ -0,0 +1,575 @@
+// Copyright 2018 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+"use strict";
+
+(() => {
+	const enosys = () => {
+		const err = new Error("not implemented");
+		err.code = "ENOSYS";
+		return err;
+	};
+
+	if (!globalThis.fs) {
+		let outputBuf = "";
+		globalThis.fs = {
+			constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1, O_DIRECTORY: -1 }, // unused
+			writeSync(fd, buf) {
+				outputBuf += decoder.decode(buf);
+				const nl = outputBuf.lastIndexOf("\n");
+				if (nl != -1) {
+					console.log(outputBuf.substring(0, nl));
+					outputBuf = outputBuf.substring(nl + 1);
+				}
+				return buf.length;
+			},
+			write(fd, buf, offset, length, position, callback) {
+				if (offset !== 0 || length !== buf.length || position !== null) {
+					callback(enosys());
+					return;
+				}
+				const n = this.writeSync(fd, buf);
+				callback(null, n);
+			},
+			chmod(path, mode, callback) { callback(enosys()); },
+			chown(path, uid, gid, callback) { callback(enosys()); },
+			close(fd, callback) { callback(enosys()); },
+			fchmod(fd, mode, callback) { callback(enosys()); },
+			fchown(fd, uid, gid, callback) { callback(enosys()); },
+			fstat(fd, callback) { callback(enosys()); },
+			fsync(fd, callback) { callback(null); },
+			ftruncate(fd, length, callback) { callback(enosys()); },
+			lchown(path, uid, gid, callback) { callback(enosys()); },
+			link(path, link, callback) { callback(enosys()); },
+			lstat(path, callback) { callback(enosys()); },
+			mkdir(path, perm, callback) { callback(enosys()); },
+			open(path, flags, mode, callback) { callback(enosys()); },
+			read(fd, buffer, offset, length, position, callback) { callback(enosys()); },
+			readdir(path, callback) { callback(enosys()); },
+			readlink(path, callback) { callback(enosys()); },
+			rename(from, to, callback) { callback(enosys()); },
+			rmdir(path, callback) { callback(enosys()); },
+			stat(path, callback) { callback(enosys()); },
+			symlink(path, link, callback) { callback(enosys()); },
+			truncate(path, length, callback) { callback(enosys()); },
+			unlink(path, callback) { callback(enosys()); },
+			utimes(path, atime, mtime, callback) { callback(enosys()); },
+		};
+	}
+
+	if (!globalThis.process) {
+		globalThis.process = {
+			getuid() { return -1; },
+			getgid() { return -1; },
+			geteuid() { return -1; },
+			getegid() { return -1; },
+			getgroups() { throw enosys(); },
+			pid: -1,
+			ppid: -1,
+			umask() { throw enosys(); },
+			cwd() { throw enosys(); },
+			chdir() { throw enosys(); },
+		}
+	}
+
+	if (!globalThis.path) {
+		globalThis.path = {
+			resolve(...pathSegments) {
+				return pathSegments.join("/");
+			}
+		}
+	}
+
+	if (!globalThis.crypto) {
+		throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)");
+	}
+
+	if (!globalThis.performance) {
+		throw new Error("globalThis.performance is not available, polyfill required (performance.now only)");
+	}
+
+	if (!globalThis.TextEncoder) {
+		throw new Error("globalThis.TextEncoder is not available, polyfill required");
+	}
+
+	if (!globalThis.TextDecoder) {
+		throw new Error("globalThis.TextDecoder is not available, polyfill required");
+	}
+
+	const encoder = new TextEncoder("utf-8");
+	const decoder = new TextDecoder("utf-8");
+
+	globalThis.Go = class {
+		constructor() {
+			this.argv = ["js"];
+			this.env = {};
+			this.exit = (code) => {
+				if (code !== 0) {
+					console.warn("exit code:", code);
+				}
+			};
+			this._exitPromise = new Promise((resolve) => {
+				this._resolveExitPromise = resolve;
+			});
+			this._pendingEvent = null;
+			this._scheduledTimeouts = new Map();
+			this._nextCallbackTimeoutID = 1;
+
+			const setInt64 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+				this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true);
+			}
+
+			const setInt32 = (addr, v) => {
+				this.mem.setUint32(addr + 0, v, true);
+			}
+
+			const getInt64 = (addr) => {
+				const low = this.mem.getUint32(addr + 0, true);
+				const high = this.mem.getInt32(addr + 4, true);
+				return low + high * 4294967296;
+			}
+
+			const loadValue = (addr) => {
+				const f = this.mem.getFloat64(addr, true);
+				if (f === 0) {
+					return undefined;
+				}
+				if (!isNaN(f)) {
+					return f;
+				}
+
+				const id = this.mem.getUint32(addr, true);
+				return this._values[id];
+			}
+
+			const storeValue = (addr, v) => {
+				const nanHead = 0x7FF80000;
+
+				if (typeof v === "number" && v !== 0) {
+					if (isNaN(v)) {
+						this.mem.setUint32(addr + 4, nanHead, true);
+						this.mem.setUint32(addr, 0, true);
+						return;
+					}
+					this.mem.setFloat64(addr, v, true);
+					return;
+				}
+
+				if (v === undefined) {
+					this.mem.setFloat64(addr, 0, true);
+					return;
+				}
+
+				let id = this._ids.get(v);
+				if (id === undefined) {
+					id = this._idPool.pop();
+					if (id === undefined) {
+						id = this._values.length;
+					}
+					this._values[id] = v;
+					this._goRefCounts[id] = 0;
+					this._ids.set(v, id);
+				}
+				this._goRefCounts[id]++;
+				let typeFlag = 0;
+				switch (typeof v) {
+					case "object":
+						if (v !== null) {
+							typeFlag = 1;
+						}
+						break;
+					case "string":
+						typeFlag = 2;
+						break;
+					case "symbol":
+						typeFlag = 3;
+						break;
+					case "function":
+						typeFlag = 4;
+						break;
+				}
+				this.mem.setUint32(addr + 4, nanHead | typeFlag, true);
+				this.mem.setUint32(addr, id, true);
+			}
+
+			const loadSlice = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return new Uint8Array(this._inst.exports.mem.buffer, array, len);
+			}
+
+			const loadSliceOfValues = (addr) => {
+				const array = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				const a = new Array(len);
+				for (let i = 0; i < len; i++) {
+					a[i] = loadValue(array + i * 8);
+				}
+				return a;
+			}
+
+			const loadString = (addr) => {
+				const saddr = getInt64(addr + 0);
+				const len = getInt64(addr + 8);
+				return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len));
+			}
+
+			const testCallExport = (a, b) => {
+				this._inst.exports.testExport0();
+				return this._inst.exports.testExport(a, b);
+			}
+
+			const timeOrigin = Date.now() - performance.now();
+			this.importObject = {
+				_gotest: {
+					add: (a, b) => a + b,
+					callExport: testCallExport,
+				},
+				gojs: {
+					// Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters)
+					// may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported
+					// function. A goroutine can switch to a new stack if the current stack is too small (see morestack function).
+					// This changes the SP, thus we have to update the SP used by the imported function.
+
+					// func wasmExit(code int32)
+					"runtime.wasmExit": (sp) => {
+						sp >>>= 0;
+						const code = this.mem.getInt32(sp + 8, true);
+						this.exited = true;
+						delete this._inst;
+						delete this._values;
+						delete this._goRefCounts;
+						delete this._ids;
+						delete this._idPool;
+						this.exit(code);
+					},
+
+					// func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
+					"runtime.wasmWrite": (sp) => {
+						sp >>>= 0;
+						const fd = getInt64(sp + 8);
+						const p = getInt64(sp + 16);
+						const n = this.mem.getInt32(sp + 24, true);
+						fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
+					},
+
+					// func resetMemoryDataView()
+					"runtime.resetMemoryDataView": (sp) => {
+						sp >>>= 0;
+						this.mem = new DataView(this._inst.exports.mem.buffer);
+					},
+
+					// func nanotime1() int64
+					"runtime.nanotime1": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000);
+					},
+
+					// func walltime() (sec int64, nsec int32)
+					"runtime.walltime": (sp) => {
+						sp >>>= 0;
+						const msec = (new Date).getTime();
+						setInt64(sp + 8, msec / 1000);
+						this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true);
+					},
+
+					// func scheduleTimeoutEvent(delay int64) int32
+					"runtime.scheduleTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this._nextCallbackTimeoutID;
+						this._nextCallbackTimeoutID++;
+						this._scheduledTimeouts.set(id, setTimeout(
+							() => {
+								this._resume();
+								while (this._scheduledTimeouts.has(id)) {
+									// for some reason Go failed to register the timeout event, log and try again
+									// (temporary workaround for https://github.com/golang/go/issues/28975)
+									console.warn("scheduleTimeoutEvent: missed timeout event");
+									this._resume();
+								}
+							},
+							getInt64(sp + 8),
+						));
+						this.mem.setInt32(sp + 16, id, true);
+					},
+
+					// func clearTimeoutEvent(id int32)
+					"runtime.clearTimeoutEvent": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getInt32(sp + 8, true);
+						clearTimeout(this._scheduledTimeouts.get(id));
+						this._scheduledTimeouts.delete(id);
+					},
+
+					// func getRandomData(r []byte)
+					"runtime.getRandomData": (sp) => {
+						sp >>>= 0;
+						crypto.getRandomValues(loadSlice(sp + 8));
+					},
+
+					// func finalizeRef(v ref)
+					"syscall/js.finalizeRef": (sp) => {
+						sp >>>= 0;
+						const id = this.mem.getUint32(sp + 8, true);
+						this._goRefCounts[id]--;
+						if (this._goRefCounts[id] === 0) {
+							const v = this._values[id];
+							this._values[id] = null;
+							this._ids.delete(v);
+							this._idPool.push(id);
+						}
+					},
+
+					// func stringVal(value string) ref
+					"syscall/js.stringVal": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, loadString(sp + 8));
+					},
+
+					// func valueGet(v ref, p string) ref
+					"syscall/js.valueGet": (sp) => {
+						sp >>>= 0;
+						const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16));
+						sp = this._inst.exports.getsp() >>> 0; // see comment above
+						storeValue(sp + 32, result);
+					},
+
+					// func valueSet(v ref, p string, x ref)
+					"syscall/js.valueSet": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32));
+					},
+
+					// func valueDelete(v ref, p string)
+					"syscall/js.valueDelete": (sp) => {
+						sp >>>= 0;
+						Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16));
+					},
+
+					// func valueIndex(v ref, i int) ref
+					"syscall/js.valueIndex": (sp) => {
+						sp >>>= 0;
+						storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16)));
+					},
+
+					// valueSetIndex(v ref, i int, x ref)
+					"syscall/js.valueSetIndex": (sp) => {
+						sp >>>= 0;
+						Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24));
+					},
+
+					// func valueCall(v ref, m string, args []ref) (ref, bool)
+					"syscall/js.valueCall": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const m = Reflect.get(v, loadString(sp + 16));
+							const args = loadSliceOfValues(sp + 32);
+							const result = Reflect.apply(m, v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, result);
+							this.mem.setUint8(sp + 64, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 56, err);
+							this.mem.setUint8(sp + 64, 0);
+						}
+					},
+
+					// func valueInvoke(v ref, args []ref) (ref, bool)
+					"syscall/js.valueInvoke": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.apply(v, undefined, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueNew(v ref, args []ref) (ref, bool)
+					"syscall/js.valueNew": (sp) => {
+						sp >>>= 0;
+						try {
+							const v = loadValue(sp + 8);
+							const args = loadSliceOfValues(sp + 16);
+							const result = Reflect.construct(v, args);
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, result);
+							this.mem.setUint8(sp + 48, 1);
+						} catch (err) {
+							sp = this._inst.exports.getsp() >>> 0; // see comment above
+							storeValue(sp + 40, err);
+							this.mem.setUint8(sp + 48, 0);
+						}
+					},
+
+					// func valueLength(v ref) int
+					"syscall/js.valueLength": (sp) => {
+						sp >>>= 0;
+						setInt64(sp + 16, parseInt(loadValue(sp + 8).length));
+					},
+
+					// valuePrepareString(v ref) (ref, int)
+					"syscall/js.valuePrepareString": (sp) => {
+						sp >>>= 0;
+						const str = encoder.encode(String(loadValue(sp + 8)));
+						storeValue(sp + 16, str);
+						setInt64(sp + 24, str.length);
+					},
+
+					// valueLoadString(v ref, b []byte)
+					"syscall/js.valueLoadString": (sp) => {
+						sp >>>= 0;
+						const str = loadValue(sp + 8);
+						loadSlice(sp + 16).set(str);
+					},
+
+					// func valueInstanceOf(v ref, t ref) bool
+					"syscall/js.valueInstanceOf": (sp) => {
+						sp >>>= 0;
+						this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0);
+					},
+
+					// func copyBytesToGo(dst []byte, src ref) (int, bool)
+					"syscall/js.copyBytesToGo": (sp) => {
+						sp >>>= 0;
+						const dst = loadSlice(sp + 8);
+						const src = loadValue(sp + 32);
+						if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					// func copyBytesToJS(dst ref, src []byte) (int, bool)
+					"syscall/js.copyBytesToJS": (sp) => {
+						sp >>>= 0;
+						const dst = loadValue(sp + 8);
+						const src = loadSlice(sp + 16);
+						if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) {
+							this.mem.setUint8(sp + 48, 0);
+							return;
+						}
+						const toCopy = src.subarray(0, dst.length);
+						dst.set(toCopy);
+						setInt64(sp + 40, toCopy.length);
+						this.mem.setUint8(sp + 48, 1);
+					},
+
+					"debug": (value) => {
+						console.log(value);
+					},
+				}
+			};
+		}
+
+		async run(instance) {
+			if (!(instance instanceof WebAssembly.Instance)) {
+				throw new Error("Go.run: WebAssembly.Instance expected");
+			}
+			this._inst = instance;
+			this.mem = new DataView(this._inst.exports.mem.buffer);
+			this._values = [ // JS values that Go currently has references to, indexed by reference id
+				NaN,
+				0,
+				null,
+				true,
+				false,
+				globalThis,
+				this,
+			];
+			this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id
+			this._ids = new Map([ // mapping from JS values to reference ids
+				[0, 1],
+				[null, 2],
+				[true, 3],
+				[false, 4],
+				[globalThis, 5],
+				[this, 6],
+			]);
+			this._idPool = [];   // unused ids that have been garbage collected
+			this.exited = false; // whether the Go program has exited
+
+			// Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory.
+			let offset = 4096;
+
+			const strPtr = (str) => {
+				const ptr = offset;
+				const bytes = encoder.encode(str + "\0");
+				new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes);
+				offset += bytes.length;
+				if (offset % 8 !== 0) {
+					offset += 8 - (offset % 8);
+				}
+				return ptr;
+			};
+
+			const argc = this.argv.length;
+
+			const argvPtrs = [];
+			this.argv.forEach((arg) => {
+				argvPtrs.push(strPtr(arg));
+			});
+			argvPtrs.push(0);
+
+			const keys = Object.keys(this.env).sort();
+			keys.forEach((key) => {
+				argvPtrs.push(strPtr(`${key}=${this.env[key]}`));
+			});
+			argvPtrs.push(0);
+
+			const argv = offset;
+			argvPtrs.forEach((ptr) => {
+				this.mem.setUint32(offset, ptr, true);
+				this.mem.setUint32(offset + 4, 0, true);
+				offset += 8;
+			});
+
+			// The linker guarantees global data starts from at least wasmMinDataAddr.
+			// Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr.
+			const wasmMinDataAddr = 4096 + 8192;
+			if (offset >= wasmMinDataAddr) {
+				throw new Error("total length of command line and environment variables exceeds limit");
+			}
+
+			this._inst.exports.run(argc, argv);
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+			await this._exitPromise;
+		}
+
+		_resume() {
+			if (this.exited) {
+				throw new Error("Go program has already exited");
+			}
+			this._inst.exports.resume();
+			if (this.exited) {
+				this._resolveExitPromise();
+			}
+		}
+
+		_makeFuncWrapper(id) {
+			const go = this;
+			return function () {
+				const event = { id: id, this: this, args: arguments };
+				go._pendingEvent = event;
+				go._resume();
+				return event.result;
+			};
+		}
+	}
+})();

src/app/(dashboard)/access-control/page.tsx

@@ -33,7 +33,7 @@ export default function AccessControlPage() {
         <div className={"p-default py-6"}>
           <Breadcrumbs>
             <Breadcrumbs.Item
-              href={"/policies"}
+              href={"/access-control"}
               label={"Access Control"}
               icon={<AccessControlIcon size={14} />}
             />

src/app/(dashboard)/control-center/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Control Center - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/dns/nameservers/page.tsx

@@ -7,7 +7,7 @@ import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
-import { ExternalLinkIcon, ServerIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
@@ -15,7 +15,7 @@ import { NameserverGroup } from "@/interfaces/Nameserver";
 import PageContainer from "@/layouts/PageContainer";
 
 const NameserverGroupTable = lazy(
-  () => import("@/modules/dns-nameservers/table/NameserverGroupTable"),
+  () => import("@/modules/dns/nameservers/table/NameserverGroupTable"),
 );
 
 export default function NameServers() {
@@ -32,7 +32,7 @@ export default function NameServers() {
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
-            href={"/dns"}
+            href={"/dns/nameservers"}
             label={"DNS"}
             icon={<DNSIcon size={13} />}
           />
@@ -40,7 +40,7 @@ export default function NameServers() {
             href={"/dns/nameservers"}
             label={"Nameservers"}
             active
-            icon={<ServerIcon size={13} />}
+            icon={<DNSIcon size={13} />}
           />
         </Breadcrumbs>
         <h1 ref={headingRef}>Nameservers</h1>

src/app/(dashboard)/dns/zones/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Zones - DNS - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/dns/zones/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import DNSIcon from "@/assets/icons/DNSIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { DNS_ZONE_DOCS_LINK, DNSZone } from "@/interfaces/DNS";
+import PageContainer from "@/layouts/PageContainer";
+import { DNSZonesProvider } from "@/modules/dns/zones/DNSZonesProvider";
+import DNSZoneIcon from "@/assets/icons/DNSZoneIcon";
+
+const DNSZonesTable = lazy(
+  () => import("@/modules/dns/zones/table/DNSZonesTable"),
+);
+
+export default function DNSZonePage() {
+  const { permission } = usePermissions();
+
+  const { data: zones, isLoading } = useFetchApi<DNSZone[]>("/dns/zones");
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item label={"DNS"} icon={<DNSIcon size={13} />} />
+          <Breadcrumbs.Item
+            href={"/dns/zones"}
+            label={"Zones"}
+            active
+            icon={<DNSZoneIcon size={16} />}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Zones</h1>
+        <Paragraph>
+          Manage DNS zones to control domain name resolution for your network.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={DNS_ZONE_DOCS_LINK} target={"_blank"}>
+            DNS Zones
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess page={"DNS Zones"} hasAccess={permission?.dns?.read}>
+        <Suspense fallback={<SkeletonTable />}>
+          <DNSZonesProvider>
+            <DNSZonesTable
+              isLoading={isLoading}
+              headingTarget={portalTarget}
+              data={zones}
+            />
+          </DNSZonesProvider>
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

src/app/(dashboard)/group/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Group - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/group/page.tsx

@@ -0,0 +1,340 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import FullTooltip from "@components/FullTooltip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { GroupBadgeIcon } from "@components/ui/GroupBadgeIcon";
+import { PageNotFound } from "@components/ui/PageNotFound";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import useRedirect from "@hooks/useRedirect";
+import useFetchApi from "@utils/api";
+import { cn, singularize } from "@utils/helpers";
+import { FolderGit2Icon, Layers3Icon, PencilIcon } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useState } from "react";
+import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import DNSIcon from "@/assets/icons/DNSIcon";
+import DNSZoneIcon from "@/assets/icons/DNSZoneIcon";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
+import TeamIcon from "@/assets/icons/TeamIcon";
+import { GroupProvider, useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import RoutesProvider from "@/contexts/RoutesProvider";
+import { Group, GROUP_TOOLTIP_TEXT } from "@/interfaces/Group";
+import PageContainer from "@/layouts/PageContainer";
+import { GroupDNSZonesSection } from "@/modules/groups/details/GroupDNSZonesSection";
+import { GroupNameserversSection } from "@/modules/groups/details/GroupNameserversSection";
+import { GroupNetworkRoutesSection } from "@/modules/groups/details/GroupNetworkRoutesSection";
+import { GroupPeersSection } from "@/modules/groups/details/GroupPeersSection";
+import { GroupPoliciesSection } from "@/modules/groups/details/GroupPoliciesSection";
+import { GroupResourcesSection } from "@/modules/groups/details/GroupResourcesSection";
+import { GroupSetupKeysSection } from "@/modules/groups/details/GroupSetupKeysSection";
+import { GroupUsersSection } from "@/modules/groups/details/GroupUsersSection";
+import useGroupDetails from "@/modules/groups/details/useGroupDetails";
+
+export default function GroupPage() {
+  const queryParameter = useSearchParams();
+  const { isRestricted } = usePermissions();
+  const groupId = queryParameter.get("id");
+  const {
+    data: group,
+    isLoading,
+    error,
+  } = useFetchApi<Group>(`/groups/${groupId}`, true);
+
+  useRedirect("/groups", false, !groupId || isRestricted);
+
+  if (isRestricted) {
+    return (
+      <PageContainer>
+        <RestrictedAccess page={"Group Information"} />
+      </PageContainer>
+    );
+  }
+
+  if (error)
+    return (
+      <PageNotFound
+        title={error?.message}
+        description={
+          "The group you are attempting to access cannot be found. It may have been deleted, or you may not have permission to view it. Please verify the URL or return to the dashboard."
+        }
+      />
+    );
+
+  return group && !isLoading ? (
+    <PageContainer>
+      <RoutesProvider>
+        <GroupProvider group={group} isDetailPage={true}>
+          <div className={"p-default py-6 pb-0 w-full mb-[6px]"}>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href={"/groups"}
+                label={"Groups"}
+                icon={<FolderGit2Icon size={14} />}
+              />
+              <Breadcrumbs.Item label={group.name} active />
+            </Breadcrumbs>
+            <GroupDetailsName />
+          </div>
+          <GroupOverviewTabs group={group} />
+        </GroupProvider>
+      </RoutesProvider>
+    </PageContainer>
+  ) : (
+    <FullScreenLoading />
+  );
+}
+
+const GroupDetailsName = () => {
+  const { group, isJWTGroup, isAllowedToRename, openGroupRenameModal } =
+    useGroupContext();
+  const { permission } = usePermissions();
+
+  return (
+    <div className={"w-full"}>
+      <h1 className={"flex items-center gap-3 w-full whitespace-nowrap"}>
+        <GroupBadgeIcon id={group?.id} issued={group?.issued} size={20} />
+        {group.name}
+        {group.name !== "All" && permission?.groups?.update && (
+          <div>
+            <FullTooltip
+              content={
+                <div className={"text-xs max-w-xs"}>
+                  {isJWTGroup
+                    ? GROUP_TOOLTIP_TEXT.RENAME.JWT
+                    : GROUP_TOOLTIP_TEXT.RENAME.INTEGRATION}
+                </div>
+              }
+              interactive={false}
+              disabled={isAllowedToRename}
+              className={"w-full block"}
+            >
+              <div
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  !isAllowedToRename &&
+                    "opacity-40 cursor-not-allowed pointer-events-none",
+                )}
+                onClick={openGroupRenameModal}
+              >
+                <PencilIcon size={16} />
+              </div>
+            </FullTooltip>
+          </div>
+        )}
+      </h1>
+    </div>
+  );
+};
+
+const validAllGroupTabs = [
+  "policies",
+  "resources",
+  "network-routes",
+  "nameservers",
+  "zones",
+];
+
+const validOtherGroupTabs = ["users", "peers", "setup-keys"];
+
+const GroupOverviewTabs = ({ group }: { group: Group }) => {
+  const searchParams = useSearchParams();
+
+  const getInitialTab = () => {
+    const isAllGroup = group.name === "All";
+    const tabParam = searchParams.get("tab");
+    const validTabs = isAllGroup
+      ? validAllGroupTabs
+      : [...validAllGroupTabs, ...validOtherGroupTabs];
+    if (tabParam === null) return isAllGroup ? "policies" : "users";
+    if (isAllGroup) {
+      return validTabs.includes(tabParam) ? tabParam : "policies";
+    }
+    return validTabs.includes(tabParam) ? tabParam : "users";
+  };
+
+  const [tab, setTab] = useState(getInitialTab());
+  const { groupDetails, isLoading } = useGroupDetails(group?.id || "");
+
+  const peersCount = groupDetails?.peers_count || 0;
+  const usersCount = groupDetails?.users?.length || 0;
+  const policiesCount = groupDetails?.policies?.length || 0;
+  const resourcesCount = groupDetails?.resources_count || 0;
+  const routesCount = groupDetails?.routes?.length || 0;
+  const nameserversCount = groupDetails?.nameservers?.length || 0;
+  const zonesCount = groupDetails?.zones?.length || 0;
+  const setupKeysCount = groupDetails?.setupKeys?.length || 0;
+
+  return (
+    <Tabs
+      defaultValue={tab}
+      onValueChange={(v) => setTab(v)}
+      value={tab}
+      className={"pt-2 pb-0 mb-0"}
+    >
+      <TabsList justify={"start"} className={"px-8"}>
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"users"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <TeamIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Users", usersCount)}
+          </TabsTrigger>
+        )}
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"peers"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <PeerIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Peers", peersCount)}
+          </TabsTrigger>
+        )}
+
+        <TabsTrigger
+          value={"policies"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <AccessControlIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Policies", policiesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"resources"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <Layers3Icon size={14} />
+          {singularize("Resources", resourcesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"network-routes"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <NetworkRoutesIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Network Routes", routesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"nameservers"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <DNSIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Nameservers", nameserversCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"zones"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <DNSZoneIcon
+            size={16}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Zones", zonesCount)}
+        </TabsTrigger>
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"setup-keys"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <SetupKeysIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Setup Keys", setupKeysCount)}
+          </TabsTrigger>
+        )}
+      </TabsList>
+
+      <TabsContent value={"users"} className={"pb-8"}>
+        <GroupUsersSection users={groupDetails?.users} isLoading={isLoading} />
+      </TabsContent>
+
+      <TabsContent value={"peers"} className={"pb-8"}>
+        <GroupPeersSection
+          peers={groupDetails?.peersOfGroup}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"policies"} className={"pb-8"}>
+        <GroupPoliciesSection
+          policies={groupDetails?.policies}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"resources"} className={"pb-8"}>
+        <GroupResourcesSection
+          resources={groupDetails?.networkResources}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"network-routes"} className={"pb-8"}>
+        <GroupNetworkRoutesSection
+          routes={groupDetails?.routes}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"nameservers"} className={"pb-8"}>
+        <GroupNameserversSection
+          nameserverGroups={groupDetails?.nameservers}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"zones"} className={"pb-8"}>
+        <GroupDNSZonesSection
+          zones={groupDetails?.zones}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"setup-keys"} className={"pb-8"}>
+        <GroupSetupKeysSection
+          setupKeys={groupDetails?.setupKeys}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+};

src/app/(dashboard)/groups/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Groups - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/groups/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon, FolderGit2Icon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import InlineLink from "@/components/InlineLink";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import PageContainer from "@/layouts/PageContainer";
+
+const GroupsTable = lazy(() => import("@/modules/groups/table/GroupsTable"));
+
+export default function GroupsPage() {
+  const { permission } = usePermissions();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/groups"}
+            label={"Groups"}
+            icon={<FolderGit2Icon size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Groups</h1>
+        <Paragraph>
+          Here is the overview of the groups of your organization. You can
+          delete the unused ones.
+        </Paragraph>
+        <Paragraph>
+          Learn more about{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/manage-network-access"}
+            target={"_blank"}
+          >
+            Groups
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+      <RestrictedAccess hasAccess={permission.groups.read} page={"Groups"}>
+        <Suspense fallback={<SkeletonTable />}>
+          <GroupsTable headingTarget={portalTarget} />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

src/app/(dashboard)/network-routes/page.tsx

@@ -7,7 +7,7 @@ import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
-import { ExternalLinkIcon } from "lucide-react";
+import { ArrowUpRightIcon, ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -16,6 +16,7 @@ import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
+import { Callout } from "@components/Callout";
 
 const NetworkRoutesTable = lazy(
   () => import("@/modules/route-group/NetworkRoutesTable"),
@@ -59,6 +60,17 @@ export default function NetworkRoutes() {
               </InlineLink>
               in our documentation.
             </Paragraph>
+
+            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+              <span>
+                We recommend using the new Networks concept to easier visualise
+                and manage access to your resources.{" "}
+                <InlineLink href={"/networks"}>
+                  Go to Networks
+                  <ArrowUpRightIcon size={14} />
+                </InlineLink>
+              </span>
+            </Callout>
           </div>
 
           <RestrictedAccess hasAccess={permission.routes.read}>

src/app/(dashboard)/network/page.tsx

@@ -1,7 +1,15 @@
 "use client";
 
 import Breadcrumbs from "@components/Breadcrumbs";
+import Button from "@components/Button";
 import Card from "@components/Card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
 import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import Separator from "@components/Separator";
@@ -12,12 +20,14 @@ import { cn } from "@utils/helpers";
 import {
   ArrowUpRightIcon,
   HelpCircle,
+  MoreVertical,
   PencilLineIcon,
   ServerIcon,
   ShieldCheckIcon,
   ShieldXIcon,
+  Trash2,
 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -25,8 +35,10 @@ import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
-import NetworkModal from "@/modules/networks/NetworkModal";
-import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import {
+  NetworkProvider,
+  useNetworksContext,
+} from "@/modules/networks/NetworkProvider";
 import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
 import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
 
@@ -77,35 +89,24 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
 
           <div className={"flex justify-between max-w-6xl"}>
             <div
-              className={cn(
-                "flex items-center",
-                !network.description && "gap-2",
-              )}
+              className={"w-full lg:w-1/2 flex justify-between items-center"}
             >
-              <NetworkInformationSquare
-                name={network.name}
-                active={isActive}
-                size={"lg"}
-                description={network.description}
-              />
-              {permission.networks.update && (
-                <button
-                  className={
-                    "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                  }
-                  onClick={() => setNetworkModal(true)}
-                >
-                  <PencilLineIcon size={18} />
-                </button>
-              )}
-              <NetworkModal
-                open={networkModal}
-                setOpen={setNetworkModal}
-                onUpdated={() => {
-                  mutate(`/networks/${network.id}`);
-                }}
-                network={network}
-              />
+              <div
+                className={cn(
+                  "flex items-center w-full",
+                  !network.description && "gap-2",
+                )}
+              >
+                <NetworkInformationSquare
+                  name={network.name}
+                  active={isActive}
+                  size={"lg"}
+                  description={network.description}
+                />
+              </div>
+              <NetworkProvider network={network}>
+                <NetworkActions />
+              </NetworkProvider>
             </div>
           </div>
 
@@ -124,6 +125,56 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   );
 }
 
+function NetworkActions() {
+  const { permission } = usePermissions();
+  const { deleteNetwork, openEditNetworkModal, network } = useNetworksContext();
+  const router = useRouter();
+
+  if (!network) return;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        asChild={true}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Button variant={"secondary"} className={"!px-3"}>
+          <MoreVertical size={16} className={"shrink-0"} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-auto" align="end">
+        <DropdownMenuItem
+          onClick={() => openEditNetworkModal(network)}
+          disabled={!permission.networks.update}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <PencilLineIcon size={14} className={"shrink-0"} />
+            Rename
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={() =>
+            deleteNetwork(network).then(() => router.push("/networks"))
+          }
+          variant={"danger"}
+          disabled={!permission.networks.delete}
+        >
+          <div className={"flex gap-3 items-center"}>
+            <Trash2 size={14} className={"shrink-0"} />
+            Delete
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const isHighlyAvailable = !!(
     network?.routing_peers_count && network?.routing_peers_count >= 2
@@ -154,7 +205,7 @@ function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
   const policyCount = network.policies?.length ?? 0;
 
   return (
-    <Card>
+    <Card className={"w-full lg:w-1/2"}>
       <Card.List>
         <Card.ListItem
           tooltip={false}

src/app/(dashboard)/peer/page.tsx

@@ -4,8 +4,6 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import Button from "@components/Button";
 import { Callout } from "@components/Callout";
 import Card from "@components/Card";
-import FancyToggleSwitch from "@components/FancyToggleSwitch";
-import FullTooltip from "@components/FullTooltip";
 import HelpText from "@components/HelpText";
 import { Input } from "@components/Input";
 import { Label } from "@components/Label";
@@ -28,22 +26,20 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
-import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
+  ArrowRightIcon,
   Barcode,
+  CalendarDays,
   Cpu,
   FlagIcon,
   Globe,
   History,
-  LockIcon,
   MapPin,
   MonitorSmartphoneIcon,
   NetworkIcon,
   PencilIcon,
-  TerminalSquare,
-  TimerResetIcon,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
@@ -63,8 +59,12 @@ import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
-import { PeerExpirationToggle } from "@/modules/peer/PeerExpirationToggle";
 import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
+import { PeerSSHToggle } from "@/modules/peer/PeerSSHToggle";
+import { RDPButton } from "@/modules/remote-access/rdp/RDPButton";
+import { SSHButton } from "@/modules/remote-access/ssh/SSHButton";
+import Link from "next/link";
+import { PeerExpirationSettings } from "@/modules/peer/PeerExpirationSettings";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
@@ -78,13 +78,6 @@ export default function PeerPage() {
 
   useRedirect("/peers", false, !peerId || isRestricted);
 
-  const peerKey = useMemo(() => {
-    let id = peer?.id ?? "";
-    let ssh = peer?.ssh_enabled ? "1" : "0";
-    let expiration = peer?.login_expiration_enabled ? "1" : "0";
-    return `${id}-${ssh}-${expiration}`;
-  }, [peer]);
-
   if (isRestricted) {
     return (
       <PageContainer>
@@ -104,8 +97,8 @@ export default function PeerPage() {
     );
 
   return peer && !isLoading ? (
-    <PeerProvider peer={peer} key={peerId}>
-      <PeerOverview key={peerKey} />
+    <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
+      <PeerOverview key={peer?.id} />
     </PeerProvider>
   ) : (
     <FullScreenLoading />
@@ -138,19 +131,12 @@ function PeerOverview() {
 const PeerGeneralInformation = () => {
   const router = useRouter();
   const { mutate } = useSWRConfig();
-  const { peer, user, peerGroups, openSSHDialog, update } = usePeer();
-  const [ssh, setSsh] = useState(peer.ssh_enabled);
+  const { peer, user, peerGroups, update } = usePeer();
   const [name, setName] = useState(peer.name);
   const [showEditNameModal, setShowEditNameModal] = useState(false);
-  const [loginExpiration, setLoginExpiration] = useState(
-    peer.login_expiration_enabled,
-  );
-  const [inactivityExpiration, setInactivityExpiration] = useState(
-    peer.inactivity_expiration_enabled,
-  );
   const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
     useGroupHelper({
-      initial: peerGroups,
+      initial: peerGroups?.filter((g) => g?.name !== "All"),
       peer,
     });
 
@@ -158,10 +144,7 @@ const PeerGeneralInformation = () => {
    * Detect if there are changes in the peer information, if there are changes, then enable the save button.
    */
   const { hasChanges, updateRef: updateHasChangedRef } = useHasChanges([
-    ssh,
     selectedGroups,
-    loginExpiration,
-    inactivityExpiration,
   ]);
 
   const updatePeer = async (newName?: string) => {
@@ -171,9 +154,6 @@ const PeerGeneralInformation = () => {
     if (permission.peers.update) {
       const updateRequest = update({
         name: newName ?? name,
-        ssh,
-        loginExpiration,
-        inactivityExpiration,
       });
       batchCall = groupCalls ? [...groupCalls, updateRequest] : [updateRequest];
     } else {
@@ -186,12 +166,7 @@ const PeerGeneralInformation = () => {
       promise: Promise.all(batchCall).then(() => {
         mutate("/peers/" + peer.id);
         mutate("/groups");
-        updateHasChangedRef([
-          ssh,
-          selectedGroups,
-          loginExpiration,
-          inactivityExpiration,
-        ]);
+        updateHasChangedRef([selectedGroups]);
       }),
       loadingMessage: "Saving the peer...",
     });
@@ -242,9 +217,21 @@ const PeerGeneralInformation = () => {
             </h1>
             <LoginExpiredBadge loginExpired={peer.login_expired} />
           </div>
-          <div className={"flex items-center gap-8"}>
-            <Paragraph className={"flex items-center"}>{user?.email}</Paragraph>
-          </div>
+          {(user?.id || user?.email) && (
+            <div className={"flex items-center gap-8"}>
+              <Paragraph className={"flex items-center"}>
+                <Link
+                  href={`/team/user?id=${user?.id}`}
+                  className={
+                    "hover:text-nb-gray-200 transition-all flex items-center gap-1"
+                  }
+                >
+                  {user?.email || user?.id}
+                  <ArrowRightIcon size={14} />
+                </Link>
+              </Paragraph>
+            </div>
+          )}
         </div>
         <div className={"flex gap-4"}>
           <Button
@@ -275,77 +262,19 @@ const PeerGeneralInformation = () => {
         <PeerInformationCard peer={peer} />
 
         <div className={"flex flex-col gap-6 lg:w-1/2 transition-all"}>
-          <div>
-            <PeerExpirationToggle
-              peer={peer}
-              value={loginExpiration}
-              icon={<TimerResetIcon size={16} />}
-              onChange={(state) => {
-                setLoginExpiration(state);
-                !state && setInactivityExpiration(false);
-              }}
-            />
-            {permission.peers.update && !!peer?.user_id && (
-              <div
-                className={cn(
-                  "border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
-                  !loginExpiration
-                    ? "opacity-50 pointer-events-none"
-                    : "bg-nb-gray-930/80",
-                )}
-              >
-                <PeerExpirationToggle
-                  peer={peer}
-                  variant={"blank"}
-                  value={inactivityExpiration}
-                  onChange={setInactivityExpiration}
-                  title={"Require login after disconnect"}
-                  description={
-                    "Enable to require authentication after users disconnect from management for 10 minutes."
-                  }
-                  className={
-                    !loginExpiration ? "opacity-40 pointer-events-none" : ""
-                  }
-                />
-              </div>
-            )}
-          </div>
+          <PeerExpirationSettings />
 
-          <FullTooltip
-            content={
-              <div
-                className={"flex gap-2 items-center !text-nb-gray-300 text-xs"}
-              >
-                <LockIcon size={14} />
-                <span>
-                  {`You don't have the required permissions to update this
-                          setting.`}
-                </span>
-              </div>
-            }
-            interactive={false}
-            className={"w-full block"}
-            disabled={permission.peers.update}
-          >
-            <FancyToggleSwitch
-              value={ssh}
-              disabled={!permission.peers.update}
-              onChange={(set) =>
-                !set
-                  ? setSsh(false)
-                  : openSSHDialog().then((confirm) => setSsh(confirm))
-              }
-              label={
-                <>
-                  <TerminalSquare size={16} />
-                  SSH Access
-                </>
-              }
-              helpText={
-                "Enable the SSH server on this peer to access the machine via an secure shell."
-              }
-            />
-          </FullTooltip>
+          <PeerSSHToggle />
+
+          {/* Remote Access Buttons */}
+          <div>
+            <Label>Remote Access</Label>
+            <HelpText>Connect directly to this peer via SSH or RDP.</HelpText>
+            <div className="flex gap-3">
+              <SSHButton peer={peer} />
+              <RDPButton peer={peer} />
+            </div>
+          </div>
 
           {permission.groups.read && (
             <div>
@@ -569,6 +498,23 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
             />
           )}
 
+          {peer.created_at && (
+            <Card.ListItem
+              label={
+                <>
+                  <CalendarDays size={16} />
+                  Registered on
+                </>
+              }
+              value={
+                dayjs(peer.created_at).format("D MMMM, YYYY [at] h:mm A") +
+                " (" +
+                dayjs().to(peer.created_at) +
+                ")"
+              }
+            />
+          )}
+
           <Card.ListItem
             label={
               <>

src/app/(dashboard)/settings/page.tsx

@@ -4,6 +4,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
 import {
   AlertOctagonIcon,
+  FingerprintIcon,
   FolderGit2Icon,
   LockIcon,
   MonitorSmartphoneIcon,
@@ -19,9 +20,10 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import ClientSettingsTab from "@/modules/settings/ClientSettingsTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
-import GroupsTab from "@/modules/settings/GroupsTab";
+import IdentityProvidersTab from "@/modules/settings/IdentityProvidersTab";
 import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
+import GroupsSettings from "@/modules/settings/GroupsSettings";
 
 export default function NetBirdSettings() {
   const queryParams = useSearchParams();
@@ -53,6 +55,13 @@ export default function NetBirdSettings() {
                 <ShieldIcon size={14} />
                 Authentication
               </VerticalTabs.Trigger>
+              {account?.settings?.embedded_idp_enabled &&
+                permission.identity_providers.read && (
+                  <VerticalTabs.Trigger value="identity-providers">
+                    <FingerprintIcon size={14} />
+                    Identity Providers
+                  </VerticalTabs.Trigger>
+                )}
               <VerticalTabs.Trigger value="groups">
                 <FolderGit2Icon size={14} />
                 Groups
@@ -80,8 +89,10 @@ export default function NetBirdSettings() {
         >
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
+            {account?.settings?.embedded_idp_enabled &&
+              permission.identity_providers.read && <IdentityProvidersTab />}
             {account && <PermissionsTab account={account} />}
-            {account && <GroupsTab account={account} />}
+            {account && <GroupsSettings account={account} />}
             {account && <NetworkSettingsTab account={account} />}
             {account && <ClientSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}

src/app/(dashboard)/team/user/page.tsx

@@ -9,6 +9,7 @@ import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useRedirect from "@hooks/useRedirect";
@@ -16,7 +17,15 @@ import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
 import dayjs from "dayjs";
-import { Ban, GalleryHorizontalEnd, History, Mail, User2 } from "lucide-react";
+import {
+  Ban,
+  GalleryHorizontalEnd,
+  History,
+  KeyRoundIcon,
+  Mail,
+  MonitorSmartphoneIcon,
+  User2,
+} from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -33,6 +42,7 @@ import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 import UserBlockCell from "@/modules/users/table-cells/UserBlockCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
+import { UserPeersSection } from "@/modules/users/UserPeersSection";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
 
 export default function UserPage() {
@@ -80,6 +90,7 @@ type Props = {
 function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
+  const isServiceUser = !!user?.is_service_user;
   const { mutate } = useSWRConfig();
   const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
@@ -91,7 +102,6 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
     });
 
   const [role, setRole] = useState(user.role || Role.User);
-
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
     role,
     selectedGroups,
@@ -114,13 +124,24 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
           `/${user.id}`,
         )
         .then(() => {
-          mutate(`/users?service_user=${user.is_service_user}`);
+          mutate(`/users?service_user=${isServiceUser}`);
           updateChangesRef([role, selectedGroups]);
         }),
       loadingMessage: "Saving changes...",
     });
   };
 
+  const isProfilePage = !!user?.is_current && !isServiceUser;
+  const canViewTokens = permission?.pats?.read;
+  const canViewPeers = permission?.peers?.read;
+
+  const showAccessTokens = (user?.is_current || isServiceUser) && canViewTokens;
+  const showPeers = !isServiceUser && canViewPeers;
+  const showTabs = isProfilePage && showPeers && showAccessTokens;
+  const showSeparator = !showTabs;
+
+  const [tab, setTab] = useState(isServiceUser ? "access-tokens" : "peers");
+
   return (
     <PageContainer>
       <div className={"p-default py-6 mb-4"}>
@@ -132,7 +153,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             icon={<TeamIcon size={13} />}
           />
 
-          {user.is_service_user ? (
+          {isServiceUser ? (
             <Breadcrumbs.Item
               href={"/team/service-users"}
               label={"Service Users"}
@@ -158,7 +179,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                   "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
                 }
                 style={
-                  user.is_service_user
+                  isServiceUser
                     ? {
                         color: "white",
                       }
@@ -171,13 +192,13 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                       }
                 }
               >
-                {user.is_service_user ? (
+                {isServiceUser ? (
                   <IconSettings2 size={16} />
                 ) : (
                   user?.name?.charAt(0) || user?.id?.charAt(0)
                 )}
               </div>
-              <h1 className={"flex items-center gap-3"}>
+              <h1 className={"flex items-center gap-3"} title={user?.id}>
                 {user.name || user.id}
               </h1>
             </div>
@@ -188,7 +209,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                 variant={"default"}
                 className={"w-full"}
                 onClick={() => {
-                  user.is_service_user
+                  isServiceUser
                     ? router.push("/team/service-users")
                     : router.push("/team/users");
                 }}
@@ -212,7 +233,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
         <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
           <UserInformationCard user={user} />
           <div className={"flex flex-col gap-8 w-1/2 "}>
-            {!user.is_service_user && isOwnerOrAdmin && (
+            {!isServiceUser && isOwnerOrAdmin && (
               <div>
                 <Label>Auto-assigned groups</Label>
                 <HelpText>
@@ -238,7 +259,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
-                  hideOwner={user.is_service_user}
+                  hideOwner={isServiceUser}
                   currentUser={user}
                   disabled={isLoggedInUser || !permission.users.update}
                 />
@@ -248,38 +269,65 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
         </div>
       </div>
 
-      {(user.is_current || user.is_service_user) && permission.pats.read && (
-        <>
-          <Separator />
-          <div className={"px-8 py-6"}>
-            <div className={"max-w-6xl"}>
-              <div className={"flex justify-between items-center"}>
-                <div>
-                  <h2>Access Tokens</h2>
-                  <Paragraph>
-                    Access tokens give access to NetBird API.
-                  </Paragraph>
-                </div>
-                <div className={"inline-flex gap-4 justify-end"}>
+      {showSeparator && <Separator />}
+
+      <Tabs
+        defaultValue={tab}
+        onValueChange={setTab}
+        value={tab}
+        className={"pb-0 mb-0"}
+      >
+        <TabsList justify={"start"} className={"px-8"} hidden={!showTabs}>
+          {showPeers && (
+            <TabsTrigger value={"peers"}>
+              <MonitorSmartphoneIcon size={16} />
+              Peers
+            </TabsTrigger>
+          )}
+          {showAccessTokens && (
+            <TabsTrigger value={"access-tokens"}>
+              <KeyRoundIcon size={16} />
+              Access Tokens
+            </TabsTrigger>
+          )}
+        </TabsList>
+        {showPeers && (
+          <TabsContent value={"peers"} className={"pb-8"}>
+            <UserPeersSection user={user} />
+          </TabsContent>
+        )}
+        {showAccessTokens && (
+          <TabsContent value={"access-tokens"} className={"pb-8"}>
+            <div className={"px-8"}>
+              <div className={"max-w-6xl"}>
+                <div className={"flex justify-between items-center"}>
                   <div>
-                    <CreateAccessTokenModal user={user}>
-                      <Button
-                        variant={"primary"}
-                        data-cy={"access-token-open-modal"}
-                        disabled={!permission.pats.create}
-                      >
-                        <IconCirclePlus size={16} />
-                        Create Access Token
-                      </Button>
-                    </CreateAccessTokenModal>
+                    <h2>Access Tokens</h2>
+                    <Paragraph>
+                      Access tokens give access to NetBird API.
+                    </Paragraph>
+                  </div>
+                  <div className={"inline-flex gap-4 justify-end"}>
+                    <div>
+                      <CreateAccessTokenModal user={user}>
+                        <Button
+                          variant={"primary"}
+                          data-cy={"access-token-open-modal"}
+                          disabled={!permission.pats.create}
+                        >
+                          <IconCirclePlus size={16} />
+                          Create Access Token
+                        </Button>
+                      </CreateAccessTokenModal>
+                    </div>
                   </div>
                 </div>
+                <AccessTokensTable user={user} />
               </div>
-              <AccessTokensTable user={user} />
             </div>
-          </div>
-        </>
-      )}
+          </TabsContent>
+        )}
+      </Tabs>
     </PageContainer>
   );
 }

src/app/(remote-access)/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import UsersProvider from "@/contexts/UsersProvider";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+      <UsersProvider>{children}</UsersProvider>
+  );
+}

src/app/(remote-access)/peer/rdp/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { notify } from "@components/Notification";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { IconCircleX } from "@tabler/icons-react";
+import useFetchApi from "@utils/api";
+import { Loader2Icon } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { Peer } from "@/interfaces/Peer";
+import { RDPCertificateModal } from "@/modules/remote-access/rdp/RDPCertificateModal";
+import { RDPCredentialsModal } from "@/modules/remote-access/rdp/RDPCredentialsModal";
+import { useRDPQueryParams } from "@/modules/remote-access/rdp/useRDPQueryParams";
+import {
+  RDPCredentials,
+  RDPStatus,
+  useRemoteDesktop,
+} from "@/modules/remote-access/rdp/useRemoteDesktop";
+import {
+  NetBirdStatus,
+  useNetBirdClient,
+} from "@/modules/remote-access/useNetBirdClient";
+import { cn } from "@utils/helpers";
+import { isNetbirdSSHProtocolSupported } from "@utils/version";
+
+export default function RDPPage() {
+  const { peerId } = useRDPQueryParams();
+
+  const {
+    data: peer,
+    isLoading,
+    error,
+  } = useFetchApi<Peer>(`/peers/${peerId}`, true, false, !!peerId);
+
+  return (
+    <div className={"w-screen h-screen overflow-hidden fixed inset-0"}>
+      {peerId && peer && !isLoading ? (
+        <RDPSession key={peer.id} peer={peer} />
+      ) : (
+        <FullScreenLoading />
+      )}
+    </div>
+  );
+}
+
+type Props = {
+  peer: Peer;
+};
+
+function RDPSession({ peer }: Props) {
+  const client = useNetBirdClient();
+  const [isNetBirdConnecting, setIsNetBirdConnecting] = useState(false);
+  const rdp = useRemoteDesktop(client);
+  const [credentialsModal, setCredentialsModal] = useState(true);
+  const [credentials, setCredentials] = useState<RDPCredentials | null>(null);
+  const connected = useRef(false);
+
+  useEffect(() => {
+    document.title = `${peer.name} - ${peer.ip} - RDP`;
+  }, [peer.ip, peer.name, connected, rdp]);
+
+  const sendErrorNotification = (title: string, message: string) => {
+    notify({
+      title: title,
+      description: message,
+      icon: <IconCircleX size={24} />,
+      backgroundColor: "bg-red-500",
+      duration: 10000,
+    });
+  };
+
+  const reset = useCallback(async () => {
+    setCredentials(null);
+    connected.current = false;
+    setCredentialsModal(true);
+    rdp.session?.disconnect();
+    await client.disconnect();
+  }, [client, rdp]);
+
+  /**
+   * Establishes a connection to the peer
+   */
+  const connect = async (rdpCredentials: RDPCredentials) => {
+    if (!peer?.id) return;
+    if (client.status === NetBirdStatus.DISCONNECTED) {
+      try {
+        setCredentials(rdpCredentials);
+        setIsNetBirdConnecting(true);
+        const protocol = isNetbirdSSHProtocolSupported(peer.version)
+          ? "netbird-ssh"
+          : "tcp";
+        await client.connectTemporary(peer.id, [
+          `${protocol}/${rdpCredentials.port}`,
+        ]);
+        setIsNetBirdConnecting(false);
+      } catch (error) {
+        sendErrorNotification(
+          "NetBird Connection Error",
+          (error as Error).message,
+        );
+        setIsNetBirdConnecting(false);
+      }
+    }
+  };
+
+  const startSession = useCallback(async () => {
+    if (!credentials) return;
+    try {
+      const result = await rdp.connect({
+        hostname: peer.ip,
+        port: credentials.port,
+        username: credentials.username,
+        password: credentials.password,
+        domain: credentials.domain,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+      if (result === RDPStatus.CONNECTED) {
+        connected.current = true;
+      } else {
+      }
+    } catch (error) {
+      sendErrorNotification("RDP Connection Error", (error as Error).message);
+      setCredentialsModal(true);
+      await reset();
+    }
+  }, [credentials, peer.ip, rdp, reset]);
+
+  /**
+   * Establish RDP session when NetBird connection is ready
+   */
+  useEffect(() => {
+    if (
+      client.status === NetBirdStatus.CONNECTED &&
+      rdp.status === RDPStatus.DISCONNECTED &&
+      credentials &&
+      !connected.current &&
+      !isNetBirdConnecting
+    ) {
+      startSession().catch(console.error);
+    }
+  }, [
+    client.status,
+    credentials,
+    peer.ip,
+    rdp,
+    startSession,
+    isNetBirdConnecting,
+  ]);
+
+  /**
+   * Display notifications for RDP and NetBird client errors
+   */
+  useEffect(() => {
+    if (rdp.error) {
+      sendErrorNotification("RDP Error", rdp.error);
+    }
+    if (client.error) {
+      sendErrorNotification("NetBird Client Error", client.error);
+    }
+  }, [rdp, client]);
+
+  /**
+   * Close credentials modal when RDP is connected
+   */
+  useEffect(() => {
+    if (rdp.status === RDPStatus.CONNECTED) {
+      setCredentialsModal(false);
+    }
+  }, [rdp.status]);
+
+  const isLoading =
+    client.status === NetBirdStatus.CONNECTING ||
+    rdp.status === RDPStatus.CONNECTING ||
+    rdp.isResizing ||
+    isNetBirdConnecting;
+
+  return (
+    <>
+      {/* Credentials Modal */}
+      <RDPCredentialsModal
+        open={credentialsModal}
+        peer={peer}
+        onConnect={connect}
+        loading={isLoading}
+      />
+
+      {/* Certificate Modal */}
+      <RDPCertificateModal
+        open={!!rdp.pendingCertificate}
+        certificateInfo={rdp.pendingCertificate}
+        onAccept={rdp.acceptCertificatePrompt}
+        onReject={async () => {
+          rdp.rejectCertificatePrompt();
+          await reset();
+        }}
+      />
+
+      {rdp.isResizing && (
+        <div
+          className={
+            "fixed w-screen h-screen z-50 backdrop-blur bg-black/50 flex items-center justify-center"
+          }
+        >
+          <Loader2Icon size={20} className={"animate-spin"} />
+        </div>
+      )}
+
+      {/* RDP Canvas  */}
+      <canvas
+        ref={rdp.canvasRef}
+        className={cn(
+          rdp.status === RDPStatus.CONNECTED ? "block" : "hidden",
+          "w-full h-full select-none bg-nb-gray-950",
+        )}
+        style={{ imageRendering: "pixelated" }}
+      />
+    </>
+  );
+}

src/app/(remote-access)/peer/ssh/page.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { PageNotFound } from "@components/ui/PageNotFound";
+import useFetchApi, { ErrorResponse } from "@utils/api";
+import { CircleXIcon, InfoIcon, Loader2Icon } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import type { Peer } from "@/interfaces/Peer";
+import { Terminal } from "@/modules/remote-access/ssh/Terminal";
+import { SSHStatus, useSSH } from "@/modules/remote-access/ssh/useSSH";
+import { useSSHQueryParams } from "@/modules/remote-access/ssh/useSSHQueryParams";
+import {
+  NetBirdStatus,
+  useNetBirdClient,
+} from "@/modules/remote-access/useNetBirdClient";
+import {
+  isNativeSSHSupported,
+  isNetbirdSSHProtocolSupported,
+} from "@utils/version";
+
+export default function SSHPage() {
+  const { peerId, username, port } = useSSHQueryParams();
+
+  const {
+    data: peer,
+    isLoading,
+    error,
+  } = useFetchApi<Peer>(`/peers/${peerId}`, true, false, !!peerId);
+
+  if (error) {
+    return (
+      <div className={"w-screen h-screen overflow-hidden"}>
+        <ErrorMessage
+          error={{
+            message:
+              "This peer may have been deleted, or you may not have permission to view it.",
+            code: error.code,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={"w-screen h-screen overflow-hidden"}>
+      {peerId && peer && !isLoading && username && port ? (
+        <SSHTerminal
+          key={peer.id}
+          peer={peer}
+          username={username}
+          port={port}
+        />
+      ) : (
+        <LoadingMessage message={"Starting ssh session..."} />
+      )}
+    </div>
+  );
+}
+
+type Props = {
+  username: string;
+  port: string;
+  peer: Peer;
+};
+
+function SSHTerminal({ username, port, peer }: Props) {
+  const client = useNetBirdClient();
+  const connected = useRef(false);
+  const sshConnectedOnce = useRef(false);
+
+  const {
+    connect: ssh,
+    disconnect,
+    status,
+    session,
+    error: sshError,
+  } = useSSH(client);
+
+  const isSSHConnecting = status === SSHStatus.CONNECTING;
+  const isSSHConnected = status === SSHStatus.CONNECTED;
+  const isSSHDisconnected = status === SSHStatus.DISCONNECTED;
+  const isClientDisconnected = client.status === NetBirdStatus.DISCONNECTED;
+  const isClientConnecting = client.status === NetBirdStatus.CONNECTING;
+
+  useEffect(() => {
+    document.title = `${username}@${peer.ip} - ${peer.hostname}`;
+  }, [username, peer, client]);
+
+  const handleReconnect = async () => {
+    if (!peer?.id) return;
+    if (isSSHConnected || isSSHConnecting) return;
+    connected.current = false;
+    try {
+      const aclPort = isNativeSSHSupported(peer.version) ? "22022" : port;
+      const protocol = isNetbirdSSHProtocolSupported(peer.version)
+        ? "netbird-ssh"
+        : "tcp";
+      const rules = [`${protocol}/${aclPort}`];
+      await client?.connectTemporary(peer.id, rules);
+      await ssh({
+        hostname: peer.ip,
+        port: Number(port),
+        username,
+      });
+    } catch (error) {
+      console.error("Reconnection failed:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (isSSHConnected || isSSHConnecting) return;
+    if (isClientConnecting || client.status === NetBirdStatus.CONNECTED) return;
+
+    const connect = async () => {
+      if (!peer.id) return;
+      if (connected.current) return;
+      connected.current = true;
+
+      try {
+        const aclPort = isNativeSSHSupported(peer.version) ? "22022" : port;
+        const protocol = isNetbirdSSHProtocolSupported(peer.version)
+          ? "netbird-ssh"
+          : "tcp";
+        const rules = [`${protocol}/${aclPort}`];
+        await client?.connectTemporary(peer.id, rules);
+        const res = await ssh({
+          hostname: peer.ip,
+          port: Number(port),
+          username,
+        });
+        if (res === SSHStatus.CONNECTED) {
+          sshConnectedOnce.current = true;
+        }
+      } catch (error) {
+        console.error("Connection error:", error);
+      }
+    };
+
+    if (isClientDisconnected) connect().catch(console.error);
+  }, [
+    isClientDisconnected,
+    isSSHConnected,
+    isSSHConnecting,
+    isClientConnecting,
+    peer.id,
+    port,
+    ssh,
+    username,
+    client.connectTemporary,
+    client.status,
+  ]);
+
+  if (client.error) {
+    return <ErrorMessage error={{ message: client.error, code: 0 }} />;
+  }
+
+  if (sshError) {
+    return <ErrorMessage error={{ message: sshError, code: 0 }} />;
+  }
+
+  if (isSSHDisconnected && sshConnectedOnce.current) {
+    return (
+      <DisconnectedMessage
+        username={username}
+        peerIp={peer.ip}
+        onReconnect={handleReconnect}
+      />
+    );
+  }
+
+  return (
+    <>
+      {session && <Terminal session={session} onClose={disconnect} />}
+      {!isSSHConnected && (
+        <LoadingMessage message={`Connecting to ${username}@${peer.ip}...`} />
+      )}
+    </>
+  );
+}
+
+type MessageProps = {
+  message?: string;
+  error?: ErrorResponse;
+};
+
+const LoadingMessage = ({ message }: MessageProps) => {
+  return (
+    <div
+      className={
+        "w-full h-full flex items-center justify-center flex-col text-center"
+      }
+    >
+      <div className="text-nb-gray-200 font-normal text-base flex gap-2 items-center justify-center">
+        <Loader2Icon size={16} className={"animate-spin shrink-0"} />
+        {message}
+      </div>
+    </div>
+  );
+};
+
+const ErrorMessage = ({ error }: MessageProps) => {
+  return (
+    <div
+      className={
+        "w-full h-full flex items-center justify-center flex-col text-center"
+      }
+    >
+      <div className="text-nb-gray-200 font-normal text-base flex gap-2 items-center justify-center">
+        <CircleXIcon size={16} className={"shrink-0 text-red-500"} />
+        {error?.message}
+      </div>
+    </div>
+  );
+};
+
+type DisconnectedMessageProps = {
+  username: string;
+  peerIp: string;
+  onReconnect: () => void;
+};
+
+const DisconnectedMessage = ({
+  username,
+  peerIp,
+  onReconnect,
+}: DisconnectedMessageProps) => {
+  return (
+    <div
+      className={
+        "w-full h-full flex items-center justify-center flex-col text-center gap-4"
+      }
+    >
+      <div className="text-nb-gray-200 font-normal text-base flex gap-2 items-center justify-center">
+        <InfoIcon size={16} className={"shrink-0 text-nb-gray-200"} />
+        Disconnected from {username}@{peerIp}
+        <button
+          className={
+            "underline-offset-4 items-center transition-all duration-200 inline-flex texts-inherit gap-1 text-netbird hover:underline font-normal"
+          }
+          onClick={onReconnect}
+        >
+          Reconnect
+        </button>
+      </div>
+    </div>
+  );
+};

src/app/globals.css

@@ -157,3 +157,20 @@ p {
 .animate-bg-scroll-faster {
     animation: bg-scroll 1.8s linear infinite;
 }
+
+/**
+ * Terminal (xterm)
+ */
+.xterm {
+    @apply m-0 p-1 box-border h-full w-full;
+}
+
+.xterm-viewport {
+    @apply m-0 p-0 box-border;
+}
+
+
+/* Control Center */
+.react-flow__node-groupNode .selected{
+    @apply border-netbird;
+}

src/app/not-found.tsx

@@ -35,6 +35,7 @@ export default function NotFound() {
 }
 
 const Redirect = ({ url, queryParams }: Props) => {
-  useRedirect("/peers" + (queryParams && `?${queryParams}`));
+  const params = queryParams && `?${queryParams}`;
+  useRedirect(url == "/" ? `/peers${params}` : `${url}${params}`, true);
   return <FullScreenLoading />;
 };

src/app/page.tsx

@@ -37,6 +37,6 @@ export default function Home() {
 
 const Redirect = ({ url, queryParams }: Props) => {
   const params = queryParams && `?${queryParams}`;
-  useRedirect(url == "/" ? `/peers${params}` : `${url}${params}`);
+  useRedirect(url == "/" ? `/peers${params}` : `${url}${params}`, true);
   return <FullScreenLoading />;
 };

src/app/setup/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Instance Setup - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/setup/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import InstanceSetupWizard from "@/modules/instance-setup/InstanceSetupWizard";
+import { useInstanceSetup } from "@/contexts/InstanceSetupProvider";
+import { useRouter } from "next/navigation";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useEffect } from "react";
+
+export default function SetupPage() {
+  const { setupRequired, loading } = useInstanceSetup();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !setupRequired) router.replace("/peers");
+  }, [loading, setupRequired]);
+
+  return loading || !setupRequired ? (
+    <FullScreenLoading />
+  ) : (
+    <InstanceSetupWizard />
+  );
+}

src/assets/icons/AuthentikIcon.tsx

@@ -0,0 +1,28 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function AuthentikIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-0.03 59.9 512.03 392.1"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M279.9 141h17.9v51.2h-17.9zm46.6-2.2h17.9v40h-17.9zM65.3 197.3c-24 0-46 13.2-57.4 34.3h30.4c13.5-11.6 33-15 47.1 0h32.2c-12.6-17.1-31.4-34.3-52.3-34.3"
+        fill="#fd4b2d"
+      />
+      <path
+        d="M108.7 262.4C66.8 350-6.6 275.3 38.3 231.5H7.9C-15.9 273 17 329 65.3 327.8c37.4 0 68.2-55.5 68.2-65.3 0-4.3-6-17.6-16-31H85.4c10.7 9.7 20 23.7 23.3 30.9m1.1-2.6"
+        fill="#fd4b2d"
+      />
+      <path
+        d="M512 140.3v231.3c0 44.3-36.1 80.4-80.4 80.4h-34.1v-78.8h-163V452h-34.1c-44.4 0-80.4-36.1-80.4-80.4v-72.8h258.4v-139H253.6V238H119.9v-97.6c0-3.1.2-6.2.5-9.2.4-3.7 1.1-7.3 2-10.8.3-1.1.6-2.3 1-3.4.1-.3.2-.6.3-.8.2-.6.4-1.1.5-1.7.2-.5.4-1.1.6-1.7s.5-1.2.7-1.8.5-1.2.8-1.8c2-4.7 4.4-9.3 7.3-13.6l.1-.1c.7-1.1 1.5-2.1 2.3-3.2.7-.9 1.3-1.7 2-2.6.8-.9 1.6-1.9 2.4-2.8s1.6-1.8 2.4-2.6l.1-.1c.4-.5.9-.9 1.4-1.4 3-2.9 6.2-5.6 9.6-8 .9-.7 1.9-1.3 2.8-1.9 1.1-.7 2.2-1.4 3.3-2 2.1-1.2 4.2-2.4 6.5-3.4.7-.3 1.4-.7 2.1-1 3.1-1.3 6.2-2.5 9.4-3.4 1.2-.4 2.5-.7 3.7-1 .6-.2 1.2-.3 1.8-.4 3.6-.8 7.2-1.3 10.9-1.6l1.6-.1h.8c1.2-.1 2.4-.1 3.7-.1h231.3c1.2 0 2.5 0 3.7.1h.8l1.6.1c3.7.3 7.3.8 10.9 1.6.6.1 1.2.3 1.8.4 1.3.3 2.5.6 3.7 1 3.2.9 6.3 2.1 9.4 3.4.7.3 1.4.6 2.1 1 2.2 1 4.4 2.2 6.5 3.4 1.1.7 2.2 1.3 3.3 2 1 .6 1.9 1.3 2.8 1.9 3.9 2.8 7.6 6 11 9.4.8.8 1.7 1.7 2.4 2.6.8.9 1.6 1.9 2.4 2.8.7.8 1.3 1.7 2 2.6.8 1.1 1.5 2.1 2.3 3.2l.1.1c2.9 4.3 5.3 8.8 7.3 13.6.2.6.5 1.2.8 1.8.2.6.5 1.2.7 1.8.2.5.4 1.1.6 1.7s.4 1.1.5 1.7c.1.3.2.6.3.8.3 1.1.7 2.3 1 3.4.9 3.6 1.6 7.2 2 10.8 0 3.1.2 6.1.2 9.2"
+        fill="#fd4b2d"
+      />
+      <path
+        d="M498.3 95.5H133.5c14.9-22.2 40-35.6 66.7-35.6h231.3c26.9 0 51.9 13.4 66.8 35.6m13.2 35.6H120.4c1.4-12.8 6-25 13.1-35.6h364.8c7.2 10.6 11.7 22.9 13.2 35.6m.5 9.2v26.4H378.3v-6.9H253.6v6.9H119.9v-26.4c0-3.1.2-6.2.5-9.2h391.1c.3 3.1.5 6.1.5 9.2M119.9 166.7h133.7v35.6H119.9zm258.4 0H512v35.6H378.3zm-258.4 35.6h133.7v35.6H119.9zm258.4 0H512v35.6H378.3z"
+        fill="#fd4b2d"
+      />
+    </svg>
+  );
+}

src/assets/icons/ControlCenterIcon.tsx

@@ -0,0 +1,22 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function ControlCenterIcon(props: IconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...iconProperties(props)}
+    >
+      <path d="M5 3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm0 12a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5Zm12 0a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm0-12a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-2Z" />
+      <path
+        fillRule="evenodd"
+        d="M10 6.5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1ZM10 18a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Zm-4-4a1 1 0 0 1-1-1v-2a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1Zm12 0a1 1 0 0 1-1-1v-2a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/assets/icons/DNSZoneIcon.tsx

@@ -0,0 +1,19 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function DNSZoneIcon(props: IconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        fillRule="evenodd"
+        d="M5 5a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2H5Zm9 2a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H14Zm3 0a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17ZM3 17v-3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm11-2a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H14Zm3 0a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/assets/icons/IdentityProviderIcons.tsx

@@ -0,0 +1,30 @@
+import { SSOIdentityProviderType } from "@/interfaces/IdentityProvider";
+import React from "react";
+import GoogleIcon from "@/assets/icons/GoogleIcon";
+import MicrosoftIcon from "@/assets/icons/MicrosoftIcon";
+import EntraIcon from "@/assets/icons/EntraIcon";
+import OktaIcon from "@/assets/icons/OktaIcon";
+import PocketIdIcon from "@/assets/icons/PocketIdIcon";
+import ZitadelIcon from "@/assets/icons/ZitadelIcon";
+import AuthentikIcon from "@/assets/icons/AuthentikIcon";
+import KeycloakIcon from "@/assets/icons/KeycloakIcon";
+import { KeyRound } from "lucide-react";
+
+export const idpIcon = (
+  type: SSOIdentityProviderType,
+  size: number = 16,
+): React.ReactNode => {
+  const icons: Record<SSOIdentityProviderType, React.ReactNode> = {
+    google: <GoogleIcon size={size} />,
+    microsoft: <MicrosoftIcon size={size} />,
+    entra: <EntraIcon size={size} />,
+    okta: <OktaIcon size={size} className="text-nb-gray-300" />,
+    pocketid: <PocketIdIcon size={size} />,
+    zitadel: <ZitadelIcon size={size} />,
+    authentik: <AuthentikIcon size={size} />,
+    keycloak: <KeycloakIcon size={size} />,
+    oidc: <KeyRound size={size} className="text-nb-gray-400" />,
+  };
+
+  return icons[type];
+};

src/assets/icons/JumpcloudIcon.tsx

@@ -0,0 +1,19 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function JumpcloudIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="167"
+      height="82"
+      viewBox="0 0 167 82"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M166.911 58.3592C166.911 64.3815 164.519 70.1571 160.26 74.4155C156.002 78.6739 150.226 81.0662 144.204 81.0662H137.961C137.31 73.4972 129.5 67.0612 118.46 64.0722C121.244 61.3253 123.148 57.8124 123.931 53.9803C124.713 50.1482 124.338 46.17 122.854 42.5515C121.369 38.933 118.842 35.8378 115.594 33.6594C112.345 31.481 108.522 30.3178 104.611 30.3178C100.7 30.3178 96.8772 31.481 93.6289 33.6594C90.3805 35.8378 87.8534 38.933 86.3689 42.5515C84.8843 46.17 84.5094 50.1482 85.2918 53.9803C86.0743 57.8124 87.9786 61.3253 90.7628 64.0722C85.5111 65.3278 80.6301 67.8055 76.5167 71.3037C73.9207 69.8152 71.1411 68.6726 68.2487 67.9049C70.6422 65.5587 72.2829 62.5529 72.9614 59.2707C73.6399 55.9884 73.3255 52.5784 72.0584 49.4755C70.7913 46.3726 68.6288 43.7174 65.8467 41.8484C63.0646 39.9793 59.7888 38.9812 56.4372 38.9812C53.0855 38.9812 49.8098 39.9793 47.0277 41.8484C44.2455 43.7174 42.0831 46.3726 40.816 49.4755C39.5488 52.5784 39.2345 55.9884 39.913 59.2707C40.5915 62.5529 42.2321 65.5587 44.6257 67.9049C35.9237 70.3154 29.5841 75.1364 28.2342 80.9698H21.991C16.0936 80.7777 10.502 78.2999 6.39821 74.0603C2.2944 69.8206 0 64.1513 0 58.2508C0 52.3503 2.2944 46.681 6.39821 42.4413C10.502 38.2016 16.0936 35.7238 21.991 35.5317C24.8814 35.5419 27.7438 36.0981 30.4278 37.1709C32.2478 33.2162 35.1686 29.8695 38.8407 27.5312C42.5128 25.1928 46.7807 23.9618 51.1341 23.9854C51.6885 23.9854 52.2429 23.9854 52.7732 23.9854C53.9093 18.1059 56.8018 12.7093 61.0689 8.50798C65.336 4.30669 70.7769 1.49837 76.6733 0.453829C82.5698 -0.590709 88.6443 0.177651 94.095 2.65746C99.546 5.13728 104.116 9.21191 107.203 14.3434C110.733 13.2708 114.463 13.023 118.104 13.6193C121.746 14.2155 125.202 15.6397 128.206 17.7822C131.21 19.9247 133.682 22.7283 135.432 25.977C137.182 29.2257 138.162 32.8326 138.298 36.52C141.665 35.6031 145.198 35.4762 148.622 36.1492C152.046 36.8222 155.269 38.277 158.038 40.4001C160.808 42.5233 163.049 45.2574 164.588 48.3892C166.127 51.5211 166.922 54.9661 166.911 58.4557V58.3592Z"
+        fill="#4CC2BF"
+      />
+    </svg>
+  );
+}

src/assets/icons/KeycloakIcon.tsx

@@ -0,0 +1,88 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function KeycloakIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...iconProperties(props)}
+    >
+      <g transform="translate(.714 .07)">
+        <path
+          d="M432.9 149.2c-1.4 0-2.7-.7-3.4-2L370.1 44.1c-.7-1.2-2-2-3.5-2H124.2c-1.4 0-2.7.7-3.4 2L58.9 150.9l23.9 34.9c-.7 1.2-6.2 24-5.5 25.2L58.9 360.9l61.9 106.9c.7 1.2 2 2 3.4 2h242.4c1.4 0 2.7-.7 3.5-2l59.4-103.2c.7-1.2 2-2 3.4-2h73.8c2.4 0 4.4-2 4.4-4.4V153.6c0-2.4-2-4.4-4.4-4.4z"
+          fill="#4d4d4d"
+        />
+        <path d="M72.7 245.3 6.4 269.4l-6.6-11.3c-.7-1.2-.7-2.7 0-3.9l30-52z" fill="#e1e1e1" />
+        <path d="M511.3 258.3V309l-43.7-44.5z" fill="#c8c8c8" />
+        <path
+          d="m467.5 264.5 43.7 44.5v49.6c0 2.4-2 4.4-4.4 4.4H456z"
+          fill="#c2c2c2"
+        />
+        <path d="M467.5 264.5 456 362.9h-61.2l-18.5-44.7z" fill="#c7c7c7" />
+        <path d="M511.3 211.2v47l-43.7 6.2z" fill="#cecece" />
+        <path
+          d="M511.3 153.6v57.6l-43.7 53.2-33.1-115.3h72.2c2.4-.1 4.5 1.8 4.6 4.3z"
+          fill="#d3d3d3"
+        />
+        <path d="M394.8 362.9h-32.3l-8.4-12 22.1-32.7z" fill="#c6c6c6" />
+        <path d="m467.5 264.5-121.1-51.2 63.7-64.1h24.4z" fill="#d5d5d5" />
+        <path d="m346.5 213.3 29.8 105 91.2-53.8z" fill="#d0d0d0" />
+        <path d="m353.8 362.9.4-12 8.4 12z" fill="#bfbfbf" />
+        <path d="m410.1 149.2-63.7 64.1-11.4-57.4 24.6-6.8h50.5z" fill="#d9d9d9" />
+        <path d="m346.5 213.3-147 33.9 154.7 103.7z" fill="#d4d4d4" />
+        <path d="m346.5 213.3 7.7 137.6 22.1-32.7z" fill="#d0d0d0" />
+        <path d="m335 155.9-135.5 91.2 147-33.9z" fill="#d9d9d9" />
+        <path d="m199.5 247.2-63.7 115.7H99.6L72.7 245.3z" fill="#d8d8d8" />
+        <path
+          d="m134.3 149.2-61.5 96.1L57.3 155l2.2-3.8c.7-1.2 2-1.9 3.4-1.9z"
+          fill="#e2e2e2"
+        />
+        <path
+          d="M99.6 362.9H62.7c-1.4 0-2.8-.8-3.5-2L6.4 269.4l66.4-24.1z"
+          fill="#d8d8d8"
+        />
+        <path d="M29.9 202.1 57.1 155l15.7 90.3z" fill="#e4e4e4" />
+        <path d="m335 155.9-40.8-6.8H159.4l40.1 98z" fill="#dedede" />
+        <path d="m199.5 247.2-40.1-98h-25.1l-61.5 96.1z" fill="#dedede" />
+        <path d="M324.7 362.9h29.1l.4-12z" fill="#c5c5c5" />
+        <path d="M266.7 362.9h58l29.5-12-154.7-103.7 27.9 115.7z" fill="#d0d0d0" />
+        <path d="m227.4 362.9-27.9-115.7-63.7 115.7z" fill="#d1d1d1" />
+        <path d="m335.4 149.2-.4 6.8 24.6-6.8z" fill="#ddd" />
+        <path d="m335 155.9-3.8-6.8h-37z" fill="#e3e3e3" />
+        <path d="m335 155.9.4-6.8h-4.2z" fill="#e2e2e2" />
+        <path
+          d="m223.9 151-59.7 103.4c-.3.5-.4 1.1-.4 1.7h-41.7l82-142q.75.45 1.2 1.2l18.6 32.3c.5 1.1.5 2.4 0 3.4"
+          fill="#00b8e3"
+        />
+        <path
+          d="M223.8 364.9 205.3 397q-.45.75-1.2 1.2l-82-142.2h41.7c0 .6.1 1.1.4 1.6l59.6 103.2c.8 1.2.9 2.9 0 4.1"
+          fill="#33c6e9"
+        />
+        <path
+          d="m204 114.2-82 141.9-20.6 35.6-19.6-34c-.3-.5-.4-1-.4-1.6s.1-1.2.4-1.7l19.9-34.4 60.4-104.5c.6-1.1 1.8-1.8 3-1.8h37.2c.6 0 1.2.2 1.7.5"
+          fill="#008aaa"
+        />
+        <path
+          d="M204 398.2c-.5.3-1.1.5-1.8.5h-37.1c-1.3 0-2.4-.7-3-1.8l-55.2-95.6-5.5-9.5 20.6-35.6z"
+          fill="#00b8e3"
+        />
+        <path
+          d="m368.9 256.1-82 142q-.75-.45-1.2-1.2L267 364.7c-.5-1-.5-2.3 0-3.3L326.7 258c.3-.5.5-1.2.5-1.8z"
+          fill="#008aaa"
+        />
+        <path
+          d="M409.4 256.1c0 .6-.2 1.3-.5 1.8l-80.3 139.3c-.6 1-1.8 1.7-3 1.6h-37c-.6 0-1.2-.2-1.8-.5L368.9 256l20.6-35.6 19.5 33.8c.3.7.4 1.3.4 1.9"
+          fill="#00b8e3"
+        />
+        <path
+          d="M368.9 256.1h-41.7c0-.6-.2-1.2-.5-1.8L267 151.2c-.6-1.1-.6-2.5 0-3.6l18.6-32.2q.45-.75 1.2-1.2z"
+          fill="#00b8e3"
+        />
+        <path
+          d="m389.4 220.5-20.6 35.6-82-142c.6-.3 1.2-.5 1.8-.5h37.1c1.2 0 2.3.6 3 1.6z"
+          fill="#33c6e9"
+        />
+      </g>
+    </svg>
+  );
+}

src/assets/icons/MicrosoftIcon.tsx

@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function MicrosoftIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 221 221"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path fill="#F1511B" d="M104.868 104.868H0V0h104.868z" />
+      <path fill="#80CC28" d="M220.654 104.868H115.788V0h104.866z" />
+      <path fill="#00ADEF" d="M104.865 220.695H0V115.828h104.865z" />
+      <path fill="#FBBC09" d="M220.654 220.695H115.788V115.828h104.866z" />
+    </svg>
+  );
+}

src/assets/icons/OIDCIcon.tsx

@@ -0,0 +1,27 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function OIDCIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="173"
+      height="174"
+      viewBox="0 0 173 174"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M76.3945 173.48L103.325 154.065L102.072 0L76.3945 20.041V173.48Z"
+        fill="#FF8E00"
+      />
+      <path
+        d="M76.7077 173.48C-24.0221 157.466 -26.8926 69.7689 76.0814 50.7288L76.3945 68.8909C3.35034 81.0694 12.6045 146.598 76.3945 156.257L76.7077 173.48Z"
+        fill="white"
+      />
+      <path
+        d="M103.011 68.2646C115.468 68.3493 126.32 74.0515 137.144 79.8508L121.174 91.7502H172.216L172.529 56.9916L156.558 68.8909C140.397 60.7278 125.542 50.9315 103.011 50.7288V68.2646Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

src/assets/icons/PocketIdIcon.tsx

@@ -0,0 +1,17 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function PocketIdIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <circle cx="256" cy="256" r="256" fill="#fff" />
+      <path
+        d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z"
+        fill="#191919"
+      />
+    </svg>
+  );
+}

src/assets/icons/SlackIcon.tsx

@@ -0,0 +1,30 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function SlackIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="127"
+      height="127"
+      viewBox="0 0 127 127"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z"
+        fill="#E01E5A"
+      />
+      <path
+        d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z"
+        fill="#36C5F0"
+      />
+      <path
+        d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z"
+        fill="#2EB67D"
+      />
+      <path
+        d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z"
+        fill="#ECB22E"
+      />
+    </svg>
+  );
+}

src/assets/icons/ZitadelIcon.tsx

@@ -0,0 +1,32 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function ZitadelIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 80 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <defs>
+        <linearGradient
+          id="zitadel-grad"
+          x1="3.86"
+          x2="76.88"
+          y1="47.89"
+          y2="47.89"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF8F00" />
+          <stop offset="1" stopColor="#FE00FF" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#zitadel-grad)"
+        fillRule="evenodd"
+        d="M17.12 39.17l1.42 5.32-6.68 6.68 9.12 2.44 1.43 5.32-19.77-5.3L17.12 39.17zM58.82 22.41l-5.32-1.43-2.44-9.12-6.68 6.68-5.32-1.43 14.47-14.47 5.3 19.77zM52.65 67.11l3.89-3.89 9.12 2.44-2.44-9.12 3.9-3.9 5.29 19.77-19.76-5.3zM36.43 69.54l-1.18-12.07 8.23 2.21-7.05 9.86zM23 23.84l5.02 11.04 6.02-6.02L23 23.84zM69.32 36.2l-12.07-1.18 2.2 8.23 9.87-7.05z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/assets/nameservers/dns0-zero.svg

@@ -1,12 +0,0 @@
-<svg width="573" height="148" viewBox="0 0 573 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4_4)">
-<path d="M0.739014 125.602V33.09H28.239C34.491 33.09 39.919 34.274 44.524 36.638C49.128 39.004 52.698 42.341 55.233 46.65C57.767 50.958 59.034 56.071 59.034 61.984V96.58C59.034 102.41 57.767 107.5 55.233 111.85C52.698 116.203 49.128 119.581 44.523 121.99C39.918 124.397 34.491 125.601 28.239 125.601L0.739014 125.602ZM16.58 111.028H28.24C32.801 111.028 36.433 109.741 39.138 107.163C41.841 104.587 43.193 101.06 43.193 96.581V61.984C43.193 57.592 41.841 54.107 39.138 51.529C36.433 48.952 32.801 47.663 28.239 47.663H16.58V111.028ZM76.396 125.602V33.09H95.786L121.512 107.86C121.216 104.673 120.942 101.483 120.688 98.292C120.386 94.5366 120.154 90.776 119.991 87.012C119.821 83.169 119.738 79.812 119.738 76.938V33.09H134.185V125.602H114.795L89.323 50.832C89.491 53.283 89.703 56.239 89.956 59.702C90.2137 63.2478 90.4251 66.7967 90.59 70.348C90.758 73.982 90.844 77.318 90.844 80.36V125.602H76.396ZM181.582 126.869C175.245 126.869 169.752 125.812 165.107 123.701C160.46 121.591 156.889 118.569 154.398 114.64C151.905 110.711 150.616 106.086 150.533 100.763H166.374C166.374 104.565 167.747 107.543 170.494 109.698C173.238 111.852 176.976 112.929 181.709 112.929C186.271 112.929 189.839 111.874 192.417 109.761C194.993 107.65 196.282 104.735 196.282 101.017C196.282 97.892 195.374 95.167 193.558 92.842C191.74 90.52 189.142 88.936 185.764 88.09L175.119 85.175C167.852 83.318 162.256 79.979 158.327 75.164C154.398 70.348 152.434 64.518 152.434 57.675C152.434 52.438 153.616 47.875 155.982 43.988C158.347 40.103 161.705 37.103 166.058 34.99C170.408 32.88 175.54 31.822 181.455 31.822C190.409 31.822 197.506 34.125 202.745 38.729C207.983 43.335 210.645 49.523 210.73 57.295H194.888C194.888 53.663 193.704 50.812 191.34 48.741C188.974 46.671 185.637 45.636 181.328 45.636C177.188 45.636 173.978 46.608 171.697 48.551C169.416 50.495 168.275 53.24 168.275 56.788C168.275 60 169.141 62.724 170.873 64.962C172.603 67.202 175.119 68.786 178.413 69.714L189.439 72.756C196.789 74.616 202.407 77.932 206.294 82.704C210.179 87.478 212.124 93.371 212.124 100.383C212.124 105.623 210.856 110.248 208.322 114.26C205.787 118.273 202.239 121.378 197.677 123.574C193.114 125.77 187.748 126.869 181.582 126.869ZM257.366 126.869C251.366 126.869 246.17 125.729 241.778 123.448C237.384 121.167 233.985 117.957 231.577 113.816C229.169 109.678 227.965 104.818 227.965 99.242V59.45C227.965 53.874 229.169 49.017 231.577 44.876C233.984 40.738 237.384 37.526 241.778 35.245C246.17 32.964 251.366 31.823 257.366 31.823C263.449 31.823 268.665 32.963 273.017 35.245C277.367 37.526 280.747 40.738 283.156 44.876C285.563 49.016 286.767 53.874 286.767 59.45V99.243C286.767 104.819 285.563 109.679 283.156 113.817C280.748 117.957 277.346 121.167 272.954 123.449C268.56 125.729 263.364 126.869 257.366 126.869ZM257.366 113.183C261.758 113.183 265.265 111.915 267.885 109.381C270.502 106.846 271.813 103.468 271.813 99.242V59.45C271.813 55.227 270.503 51.846 267.885 49.312C265.265 46.777 261.758 45.51 257.366 45.51C252.972 45.51 249.466 46.777 246.848 49.312C244.228 51.846 242.918 55.227 242.918 59.45V99.243C242.918 103.469 244.228 106.847 246.848 109.382C249.465 111.916 252.972 113.183 257.366 113.183ZM257.366 87.583C254.915 87.583 252.909 86.781 251.346 85.175C249.782 83.571 249.002 81.5 249.002 78.965C249.002 76.431 249.762 74.403 251.283 72.883C252.803 71.362 254.831 70.601 257.366 70.601C259.901 70.601 261.928 71.361 263.449 72.883C264.969 74.403 265.73 76.431 265.73 78.966C265.73 81.5 264.97 83.571 263.45 85.176C261.928 86.781 259.9 87.583 257.366 87.583Z" fill="black"/>
-<path d="M332.69 126.999C329.057 126.999 326.164 125.941 324.01 123.831C321.855 121.72 320.778 118.847 320.778 115.213C320.778 111.581 321.855 108.686 324.01 106.532C326.164 104.378 329.057 103.3 332.69 103.3C336.322 103.3 339.217 104.378 341.372 106.532C343.526 108.686 344.603 111.582 344.603 115.213C344.603 118.847 343.526 121.72 341.372 123.831C339.217 125.941 336.322 126.999 332.691 126.999H332.69ZM381.862 125.732V33.219H437.369V47.032H397.449V71.112H432.934V84.798H397.45V111.918H437.37V125.732H381.862ZM484.766 126.999C475.725 126.999 468.65 124.528 463.539 119.585C458.426 114.643 455.872 107.906 455.872 99.372V33.219H471.84V99.245C471.84 103.639 472.937 107.061 475.135 109.51C477.331 111.962 480.54 113.185 484.766 113.185C488.905 113.185 492.095 111.962 494.334 109.51C496.572 107.06 497.693 103.639 497.693 99.245V33.219H513.66V99.372C513.66 107.906 511.126 114.642 506.057 119.585C500.987 124.528 493.891 126.999 484.767 126.999H484.766Z" fill="#686868"/>
-<path d="M549 0H573V148H549V0Z" fill="#FFCC03"/>
-</g>
-<defs>
-<clipPath id="clip0_4_4">
-<rect width="573" height="148" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/nameservers/dns0.svg

@@ -1,12 +0,0 @@
-<svg width="573" height="148" viewBox="0 0 573 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4_4)">
-<path d="M0.739014 125.602V33.09H28.239C34.491 33.09 39.919 34.274 44.524 36.638C49.128 39.004 52.698 42.341 55.233 46.65C57.767 50.958 59.034 56.071 59.034 61.984V96.58C59.034 102.41 57.767 107.5 55.233 111.85C52.698 116.203 49.128 119.581 44.523 121.99C39.918 124.397 34.491 125.601 28.239 125.601L0.739014 125.602ZM16.58 111.028H28.24C32.801 111.028 36.433 109.741 39.138 107.163C41.841 104.587 43.193 101.06 43.193 96.581V61.984C43.193 57.592 41.841 54.107 39.138 51.529C36.433 48.952 32.801 47.663 28.239 47.663H16.58V111.028ZM76.396 125.602V33.09H95.786L121.512 107.86C121.216 104.673 120.942 101.483 120.688 98.292C120.386 94.5366 120.154 90.776 119.991 87.012C119.821 83.169 119.738 79.812 119.738 76.938V33.09H134.185V125.602H114.795L89.323 50.832C89.491 53.283 89.703 56.239 89.956 59.702C90.2137 63.2478 90.4251 66.7967 90.59 70.348C90.758 73.982 90.844 77.318 90.844 80.36V125.602H76.396ZM181.582 126.869C175.245 126.869 169.752 125.812 165.107 123.701C160.46 121.591 156.889 118.569 154.398 114.64C151.905 110.711 150.616 106.086 150.533 100.763H166.374C166.374 104.565 167.747 107.543 170.494 109.698C173.238 111.852 176.976 112.929 181.709 112.929C186.271 112.929 189.839 111.874 192.417 109.761C194.993 107.65 196.282 104.735 196.282 101.017C196.282 97.892 195.374 95.167 193.558 92.842C191.74 90.52 189.142 88.936 185.764 88.09L175.119 85.175C167.852 83.318 162.256 79.979 158.327 75.164C154.398 70.348 152.434 64.518 152.434 57.675C152.434 52.438 153.616 47.875 155.982 43.988C158.347 40.103 161.705 37.103 166.058 34.99C170.408 32.88 175.54 31.822 181.455 31.822C190.409 31.822 197.506 34.125 202.745 38.729C207.983 43.335 210.645 49.523 210.73 57.295H194.888C194.888 53.663 193.704 50.812 191.34 48.741C188.974 46.671 185.637 45.636 181.328 45.636C177.188 45.636 173.978 46.608 171.697 48.551C169.416 50.495 168.275 53.24 168.275 56.788C168.275 60 169.141 62.724 170.873 64.962C172.603 67.202 175.119 68.786 178.413 69.714L189.439 72.756C196.789 74.616 202.407 77.932 206.294 82.704C210.179 87.478 212.124 93.371 212.124 100.383C212.124 105.623 210.856 110.248 208.322 114.26C205.787 118.273 202.239 121.378 197.677 123.574C193.114 125.77 187.748 126.869 181.582 126.869ZM257.366 126.869C251.366 126.869 246.17 125.729 241.778 123.448C237.384 121.167 233.985 117.957 231.577 113.816C229.169 109.678 227.965 104.818 227.965 99.242V59.45C227.965 53.874 229.169 49.017 231.577 44.876C233.984 40.738 237.384 37.526 241.778 35.245C246.17 32.964 251.366 31.823 257.366 31.823C263.449 31.823 268.665 32.963 273.017 35.245C277.367 37.526 280.747 40.738 283.156 44.876C285.563 49.016 286.767 53.874 286.767 59.45V99.243C286.767 104.819 285.563 109.679 283.156 113.817C280.748 117.957 277.346 121.167 272.954 123.449C268.56 125.729 263.364 126.869 257.366 126.869ZM257.366 113.183C261.758 113.183 265.265 111.915 267.885 109.381C270.502 106.846 271.813 103.468 271.813 99.242V59.45C271.813 55.227 270.503 51.846 267.885 49.312C265.265 46.777 261.758 45.51 257.366 45.51C252.972 45.51 249.466 46.777 246.848 49.312C244.228 51.846 242.918 55.227 242.918 59.45V99.243C242.918 103.469 244.228 106.847 246.848 109.382C249.465 111.916 252.972 113.183 257.366 113.183ZM257.366 87.583C254.915 87.583 252.909 86.781 251.346 85.175C249.782 83.571 249.002 81.5 249.002 78.965C249.002 76.431 249.762 74.403 251.283 72.883C252.803 71.362 254.831 70.601 257.366 70.601C259.901 70.601 261.928 71.361 263.449 72.883C264.969 74.403 265.73 76.431 265.73 78.966C265.73 81.5 264.97 83.571 263.45 85.176C261.928 86.781 259.9 87.583 257.366 87.583Z" fill="black"/>
-<path d="M332.69 126.999C329.057 126.999 326.164 125.941 324.01 123.831C321.855 121.72 320.778 118.847 320.778 115.213C320.778 111.581 321.855 108.686 324.01 106.532C326.164 104.378 329.057 103.3 332.69 103.3C336.322 103.3 339.217 104.378 341.372 106.532C343.526 108.686 344.603 111.582 344.603 115.213C344.603 118.847 343.526 121.72 341.372 123.831C339.217 125.941 336.322 126.999 332.691 126.999H332.69ZM381.862 125.732V33.219H437.369V47.032H397.449V71.112H432.934V84.798H397.45V111.918H437.37V125.732H381.862ZM484.766 126.999C475.725 126.999 468.65 124.528 463.539 119.585C458.426 114.643 455.872 107.906 455.872 99.372V33.219H471.84V99.245C471.84 103.639 472.937 107.061 475.135 109.51C477.331 111.962 480.54 113.185 484.766 113.185C488.905 113.185 492.095 111.962 494.334 109.51C496.572 107.06 497.693 103.639 497.693 99.245V33.219H513.66V99.372C513.66 107.906 511.126 114.642 506.057 119.585C500.987 124.528 493.891 126.999 484.767 126.999H484.766Z" fill="#359CEF"/>
-<path d="M549 0H573V148H549V0Z" fill="#FFCC03"/>
-</g>
-<defs>
-<clipPath id="clip0_4_4">
-<rect width="573" height="148" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/auth/OIDCProvider.tsx

@@ -7,7 +7,6 @@ import {
 } from "@axa-fr/react-oidc";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { useLocalStorage } from "@hooks/useLocalStorage";
-import { useRedirect } from "@hooks/useRedirect";
 import loadConfig, { buildExtras } from "@utils/config";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
@@ -58,6 +57,10 @@ export default function OIDCProvider({ children }: Props) {
       "utm_content",
       "utm_campaign",
       "hs_id",
+      "page",
+      "page_size",
+      "user",
+      "port",
     ];
 
     try {
@@ -71,8 +74,7 @@ export default function OIDCProvider({ children }: Props) {
   const withCustomHistory = () => {
     return {
       replaceState: (url: any) => {
-        router.replace(url);
-        window.dispatchEvent(new Event("popstate"));
+        window?.location?.replace(url);
       },
     };
   };
@@ -101,16 +103,17 @@ export default function OIDCProvider({ children }: Props) {
 
   // We bypass authentication for pages that do not require auth.
   // E.g., when we just want to show installation steps for public.
-  if (path === "/install") return children;
+  // Or the instance setup wizard for first-time setup.
+  if (path === "/install" || path === "/setup") return children;
 
   return mounted && providerConfig ? (
     <OidcProvider
       configuration={providerConfig}
-      //withCustomHistory={withCustomHistory}
+      withCustomHistory={withCustomHistory}
       authenticatingComponent={FullScreenLoading}
       authenticatingErrorComponent={OIDCError}
       loadingComponent={FullScreenLoading}
-      callbackSuccessComponent={CallBackSuccess}
+      callbackSuccessComponent={FullScreenLoading}
       onEvent={onEvent}
       onSessionLost={() => void 0}
       //sessionLostComponent={SessionLost}
@@ -121,11 +124,3 @@ export default function OIDCProvider({ children }: Props) {
     <FullScreenLoading />
   );
 }
-
-const CallBackSuccess = () => {
-  const params = useSearchParams();
-  const errorParam = params.get("error");
-  const currentPath = usePathname();
-  useRedirect(currentPath, true, !errorParam);
-  return <FullScreenLoading />;
-};

src/components/Badge.tsx

@@ -32,6 +32,10 @@ const variants = cva("", {
       green: ["bg-green-950 border-green-500 border text-green-400"],
       netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
     },
+    size: {
+      default: "text-[0.75rem] py-1.5 px-3",
+      xs: "text-[0.6rem] py-[0.3rem] px-2",
+    },
     hover: {
       none: [],
       blue: ["hover:bg-sky-200"],
@@ -42,7 +46,7 @@ const variants = cva("", {
       red: ["hover:bg-red-950/40"],
       gray: ["hover:bg-nb-gray-900"],
       grayer: ["hover:bg-nb-gray-900"],
-      "gray-ghost": ["hover:bg-nb-gray-900"],
+      "gray-ghost": ["hover:bg-nb-gray-800 cursor-pointer"],
       green: ["hover:bg-green-950/50"],
       netbird: ["hover:bg-netbird-950/50"],
     },
@@ -53,6 +57,7 @@ export default function Badge({
   children,
   className,
   variant = "blue",
+  size = "default",
   useHover = false,
   disabled = false,
   ...props
@@ -60,8 +65,8 @@ export default function Badge({
   return (
     <div
       className={cn(
-        "relative z-10 cursor-inherit whitespace-nowrap rounded-md text-[12px] py-1.5 px-3 font-normal flex gap-1.5 items-center justify-center transition-all",
-        variants({ variant, hover: useHover ? variant : "none" }),
+        "relative z-10 cursor-inherit whitespace-nowrap rounded-md font-normal flex gap-1.5 items-center justify-center transition-all",
+        variants({ variant, hover: useHover ? variant : "none", size }),
         disabled && "cursor-not-allowed opacity-50 select-none",
         className,
       )}

src/components/Button.tsx

@@ -18,7 +18,7 @@ export const buttonVariants = cva(
     "relative",
     "text-sm focus:z-10 focus:ring-2 font-medium  focus:outline-none whitespace-nowrap shadow-sm",
     "inline-flex gap-2 items-center justify-center transition-colors focus:ring-offset-1",
-    "disabled:opacity-20 disabled:cursor-not-allowed disabled:dark:text-nb-gray-300 dark:ring-offset-neutral-950/50",
+    "disabled:opacity-40 disabled:cursor-not-allowed disabled:dark:text-nb-gray-300 dark:ring-offset-neutral-950/50",
   ],
   {
     variants: {
@@ -34,7 +34,7 @@ export const buttonVariants = cva(
         secondary: [
           "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
           "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
-          "dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-700/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
+          "dark:bg-nb-gray-920 dark:text-gray-400 dark:border-gray-700/40 dark:hover:text-white dark:hover:bg-nb-gray-910",
         ],
         secondaryLighter: [
           "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
@@ -76,6 +76,7 @@ export const buttonVariants = cva(
         "default-outline": [
           "dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
           "dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-nb-gray-900/30 dark:hover:border-nb-gray-800/50",
+          "data-[state=open]:dark:text-white data-[state=open]:dark:bg-nb-gray-900/30 data-[state=open]:dark:border-nb-gray-800/50",
         ],
         danger: [
           "", // TODO - add danger button styles for light mode

src/components/ButtonGroup.tsx

@@ -34,7 +34,7 @@ const ButtonGroupButton = forwardRef(
         border={2}
         rounded={false}
         className={cn(
-          "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[41px]",
+          "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[40px]",
           "!py-2.5 !px-4",
           className,
         )}

src/components/Callout.tsx

@@ -26,7 +26,7 @@ export const calloutVariants = cva(
 
 export const Callout = ({
   children,
-  icon = <InfoIcon size={14} className={"shrink-0 relative top-[2px]"} />,
+  icon = <InfoIcon size={14} className={"shrink-0 relative top-[3px]"} />,
   className,
   variant = "default",
 }: Props) => {

src/components/DropdownMenu.tsx

@@ -81,7 +81,7 @@ const menuItemVariants = cva("", {
   variants: {
     variant: {
       default:
-        "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-gray-400 dark:data-[state=open]:bg-nb-gray-900 dark:data-[state=open]:text-gray-50",
+        "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-nb-gray-300 dark:data-[state=open]:bg-nb-gray-900 dark:data-[state=open]:text-gray-50",
       danger:
         "dark:focus:bg-red-900/20 dark:focus:text-red-500 dark:text-red-500",
     },
@@ -93,25 +93,53 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "danger";
+    href?: string;
+    target?: string;
+    rel?: string;
   }
->(({ className, inset, variant = "default", onClick, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex select-none items-center rounded-md pr-2 pl-3 py-1.5 text-sm outline-none",
-      "transition-colors focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50  cursor-pointer ",
-      inset && "pl-8",
-      menuItemVariants({ variant }),
+>(
+  (
+    {
       className,
-    )}
-    onClick={(e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onClick && onClick(e);
-    }}
-    {...props}
-  />
-));
+      inset,
+      variant = "default",
+      onClick,
+      href,
+      target,
+      rel,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+          "relative flex select-none items-center rounded-md pr-2 pl-3 py-1.5 text-sm outline-none",
+          "transition-colors focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50  cursor-pointer ",
+          inset && "pl-8",
+          menuItemVariants({ variant }),
+          className,
+        )}
+        onClick={(e) => {
+          if (href) return;
+          e.preventDefault();
+          e.stopPropagation();
+          onClick && onClick(e);
+        }}
+        {...props}
+      >
+        {href ? (
+          <a href={href} target={target} rel={rel}>
+            {props.children}
+          </a>
+        ) : (
+          props.children
+        )}
+      </DropdownMenuPrimitive.Item>
+    );
+  },
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<

src/components/FullTooltip.tsx

@@ -25,6 +25,8 @@ type Props = {
   customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
   delayDuration?: number;
   skipDelayDuration?: number;
+  alignOffset?: number;
+  sideOffset?: number;
 } & TooltipProps &
   TooltipVariants;
 
@@ -45,6 +47,8 @@ export default function FullTooltip({
   delayDuration = 1,
   skipDelayDuration = 300,
   variant = "default",
+  alignOffset = 20,
+  sideOffset,
 }: Props) {
   const [open, setOpen] = useState(!!keepOpen);
 
@@ -83,7 +87,8 @@ export default function FullTooltip({
         )}
         {!disabled && (
           <TooltipContent
-            alignOffset={20}
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
             forceMount={true}
             className={contentClassName}
             variant={variant}

src/components/HoverCard.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { TooltipVariants, tooltipVariants } from "./Tooltip";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> &
+    TooltipVariants
+>(
+  (
+    {
+      className = "px-4 py-2.5",
+      sideOffset = 7,
+      side = "top",
+      variant = "default",
+      ...props
+    },
+    ref,
+  ) => (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        ref={ref}
+        asChild={true}
+        side={side}
+        sideOffset={sideOffset}
+        className={cn(tooltipVariants({ variant }), className)}
+        {...props}
+      >
+        <div>{props.children}</div>
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
+  ),
+);
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

src/components/InlineLink.tsx

@@ -27,6 +27,8 @@ export const linkVariants = cva(
         default: "text-netbird hover:underline font-normal",
         faded: "text-nb-gray-400 hover:text-nb-gray-300 hover:underline",
         white: "text-nb-gray-100 hover:text-white hover:underline",
+        dashed:
+          "text-nb-gray-100/90 underline font-normal decoration-dashed hover:text-white",
       },
     },
   },

src/components/Input.tsx

@@ -2,8 +2,9 @@ import FullTooltip from "@components/FullTooltip";
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
 import { cva, VariantProps } from "class-variance-authority";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, Eye, EyeOff } from "lucide-react";
 import * as React from "react";
+import { useState } from "react";
 
 type InputVariants = VariantProps<typeof inputVariants>;
 
@@ -16,8 +17,9 @@ export interface InputProps
   icon?: React.ReactNode;
   error?: string;
   errorTooltip?: boolean;
-  errorTooltipPosition?: "top" | "top-right";
+  errorTooltipPosition?: "top" | "top-right" | "bottom";
   prefixClassName?: string;
+  showPasswordToggle?: boolean;
 }
 
 const inputVariants = cva("", {
@@ -61,10 +63,29 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       errorTooltipPosition = "top",
       variant = "default",
       prefixClassName,
+      showPasswordToggle = false,
       ...props
     },
     ref,
   ) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const isPasswordType = type === "password";
+    const inputType = isPasswordType && showPassword ? "text" : type;
+
+    const passwordToggle =
+      isPasswordType && showPasswordToggle ? (
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className={"hover:text-white transition-all"}
+          aria-label={"Toggle password visibility"}
+        >
+          {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+        </button>
+      ) : null;
+
+    const suffix = passwordToggle || customSuffix;
+
     return (
       <>
         <div className={cn("flex relative h-[42px]", maxWidthClass)}>
@@ -94,7 +115,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </div>
 
           <input
-            type={type}
+            type={inputType}
             ref={ref}
             {...props}
             className={cn(
@@ -103,7 +124,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
               customPrefix && "!border-l-0 !rounded-l-none",
-              customSuffix && "!pr-16",
+              suffix && "!pr-16",
               icon && "!pl-10",
               "border",
               className,
@@ -116,7 +137,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               props.disabled && "opacity-30",
             )}
           >
-            {customSuffix}
+            {suffix}
           </div>
           {error && errorTooltip && (
             <div

src/components/Label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const labelVariants = cva(
-  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1 inline-block dark:text-nb-gray-200 flex items-center gap-2",
+  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block dark:text-nb-gray-200 flex items-center gap-2",
 );
 
 const Label = React.forwardRef<

src/components/ListItem.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cn } from "@utils/helpers";
+
+export const ListItem = ({
+  icon,
+  label,
+  value,
+  className,
+}: {
+  icon?: React.ReactNode;
+  label: string;
+  value: string | React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex justify-between gap-12 border-b border-nb-gray-920 py-2 px-4 last:border-b-0",
+        className,
+      )}
+    >
+      <div className={"flex items-center gap-2 text-nb-gray-100 font-medium"}>
+        {icon}
+        {label}
+      </div>
+      <div className={"text-nb-gray-300"}>{value}</div>
+    </div>
+  );
+};

src/components/NoPeersGettingStarted.tsx

@@ -0,0 +1,44 @@
+import InlineLink from "@components/InlineLink";
+import SquareIcon from "@components/SquareIcon";
+import AddPeerButton from "@components/ui/AddPeerButton";
+import GetStartedTest from "@components/ui/GetStartedTest";
+import { ExternalLinkIcon } from "lucide-react";
+import * as React from "react";
+import PeerIcon from "@/assets/icons/PeerIcon";
+
+type Props = {
+  showBackground?: boolean;
+};
+
+export const NoPeersGettingStarted = ({ showBackground = true }) => {
+  return (
+    <GetStartedTest
+      showBackground={showBackground}
+      icon={
+        <SquareIcon
+          icon={<PeerIcon className={"fill-nb-gray-200"} size={20} />}
+          color={"gray"}
+          size={"large"}
+        />
+      }
+      title={"Get Started with NetBird"}
+      description={
+        "It looks like you don't have any connected machines.\n" +
+        "Get started by adding one to your network."
+      }
+      button={<AddPeerButton />}
+      learnMore={
+        <>
+          Learn more in our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started"}
+            target={"_blank"}
+          >
+            Getting Started Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </>
+      }
+    />
+  );
+};

src/components/PeerGroupSelector.tsx

@@ -43,6 +43,13 @@ import type { Peer } from "@/interfaces/Peer";
 import { PolicyRuleResource } from "@/interfaces/Policy";
 import { User } from "@/interfaces/User";
 import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
+import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
+
+const groupsSearchPredicate = (item: Group, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item?.id?.toLowerCase().includes(lowerCaseQuery) ?? false;
+};
 
 interface MultiSelectProps {
   values: Group[];
@@ -60,6 +67,7 @@ interface MultiSelectProps {
   dataCy?: string;
   showResourceCounter?: boolean;
   showResources?: boolean;
+  showPeers?: boolean;
   resource?: PolicyRuleResource;
   onResourceChange?: (resource?: PolicyRuleResource) => void;
   placeholder?: string;
@@ -67,6 +75,7 @@ interface MultiSelectProps {
   align?: "start" | "end";
   side?: "top" | "bottom";
   users?: User[];
+  placeholderForSearch?: string;
 }
 export function PeerGroupSelector({
   onChange,
@@ -84,6 +93,7 @@ export function PeerGroupSelector({
   dataCy = "group-selector-dropdown",
   showResourceCounter = true,
   showResources = false,
+  showPeers = false,
   resource,
   onResourceChange,
   placeholder = "Add or select group(s)...",
@@ -91,16 +101,36 @@ export function PeerGroupSelector({
   align = "start",
   side = "bottom",
   users,
+  placeholderForSearch = 'Search groups or add new group by pressing "Enter"...',
 }: Readonly<MultiSelectProps>) {
+  const { data: resources, isLoading: isResourcesLoading } = useFetchApi<
+    NetworkResource[]
+  >("/networks/resources");
+
+  const { data: peers, isLoading: isPeersLoading } =
+    useFetchApi<Peer[]>("/peers");
+
   const { groups, dropdownOptions, setDropdownOptions, addDropdownOptions } =
     useGroups();
+
   const searchRef = React.useRef<HTMLInputElement>(null);
+
   const [inputRef, { width }] = useElementSize<
     HTMLButtonElement | HTMLSpanElement
   >();
-  const [search, setSearch] = useState("");
-  const { data: resources, isLoading } = useFetchApi<NetworkResource[]>(
-    "/networks/resources",
+
+  const [open, setOpen] = useState(false);
+
+  const sortedDropdownOptions = useSortedDropdownOptions(
+    dropdownOptions,
+    values,
+    open,
+  );
+
+  const [filteredGroups, search, setSearch] = useSearch(
+    sortedDropdownOptions,
+    groupsSearchPredicate,
+    { filter: true, debounce: 150 },
   );
 
   // Update dropdown options when groups change
@@ -141,7 +171,15 @@ export function PeerGroupSelector({
     const groupResources: GroupResource[] | undefined =
       (group?.resources as GroupResource[]) || [];
 
-    if (peer) groupPeers?.push({ id: peer?.id as string, name: peer?.name });
+    if (peer) {
+      const peerInGroup = groupPeers?.find((p) => p?.id === peer?.id);
+      if (!peerInGroup) {
+        groupPeers?.push({
+          id: peer?.id as string,
+          name: peer?.name,
+        });
+      }
+    }
 
     if (!group && !option) {
       addDropdownOptions([
@@ -189,16 +227,6 @@ export function PeerGroupSelector({
     return isSearching && groupDoesNotExist && !isAllGroup;
   }, [search, dropdownOptions]);
 
-  const [open, setOpen] = useState(false);
-
-  const folderIcon = useMemo(() => {
-    return <FolderGit2 size={12} className={"shrink-0"} />;
-  }, []);
-
-  const peerIcon = useMemo(() => {
-    return <MonitorSmartphoneIcon size={14} className={"shrink-0"} />;
-  }, []);
-
   const [slice, setSlice] = useState(10);
 
   const [tab, setTab] = useState("groups");
@@ -219,12 +247,6 @@ export function PeerGroupSelector({
     onChange(union);
   };
 
-  const sortedDropdownOptions = useSortedDropdownOptions(
-    dropdownOptions,
-    values,
-    open,
-  );
-
   // Reset the search input when switching tabs
   useEffect(() => {
     setSearch("");
@@ -233,10 +255,12 @@ export function PeerGroupSelector({
     }, 0);
   }, [tab]);
 
-  const searchPlaceholder =
-    tab === "groups"
-      ? 'Search groups or add new group by pressing "Enter"...'
-      : "Search resource...";
+  const searchPlaceholder = useMemo(() => {
+    if (tab === "groups") return placeholderForSearch;
+    if (tab === "resources") return "Search resource...";
+    if (tab === "peers") return "Search peer...";
+    return "Search...";
+  }, [tab, placeholderForSearch]);
 
   const selectResource = (resource?: NetworkResource) => {
     onResourceChange?.(
@@ -250,6 +274,15 @@ export function PeerGroupSelector({
     onChange([]);
   };
 
+  const selectPeer = (peer?: Peer) => {
+    if (!peer?.id) return;
+    onResourceChange?.({
+      id: peer.id,
+      type: "peer",
+    });
+    onChange([]);
+  };
+
   return (
     <Popover
       open={open}
@@ -284,10 +317,11 @@ export function PeerGroupSelector({
                 "flex items-center gap-2 border-nb-gray-700 flex-wrap h-full"
               }
             >
-              {resource && showResources && (
+              {resource && (
                 <ResourceBadge
                   className={"py-[3px]"}
                   resource={resources?.find((r) => r.id === resource.id)}
+                  peer={peers?.find((p) => p.id === resource.id)}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -364,16 +398,7 @@ export function PeerGroupSelector({
         side={side}
         sideOffset={10}
       >
-        <Command
-          className={"w-full flex"}
-          loop
-          filter={(value, search) => {
-            const formatValue = trim(value.toLowerCase());
-            const formatSearch = trim(search.toLowerCase());
-            if (formatValue.includes(formatSearch)) return 1;
-            return 0;
-          }}
-        >
+        <Command className={"w-full flex"} loop shouldFilter={false}>
           <CommandList className={"w-full"}>
             <div className={"relative"}>
               <CommandInput
@@ -414,13 +439,17 @@ export function PeerGroupSelector({
             </div>
 
             <Tabs defaultValue={"groups"} value={tab} onValueChange={setTab}>
-              {showResources && <TabTriggers searchRef={searchRef} />}
+              <TabTriggers
+                searchRef={searchRef}
+                showPeers={showPeers}
+                showResources={showResources}
+              />
               <TabsContent value={"groups"} className={"p-0 my-0"}>
                 <CommandGroup>
                   <ScrollArea
                     className={cn(
                       "max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3",
-                      sortedDropdownOptions.length == 0 && !search && "py-0",
+                      filteredGroups.length == 0 && !search && "py-0",
                     )}
                   >
                     {searchedGroupNotFound && (
@@ -433,8 +462,8 @@ export function PeerGroupSelector({
                         value={search}
                         onClick={(e) => e.preventDefault()}
                       >
-                        <Badge variant={"gray-ghost"}>
-                          {folderIcon}
+                        <Badge variant={"gray-ghost"} className={"h-7"}>
+                          <FolderGit2 size={12} className={"shrink-0"} />
                           {search}
                         </Badge>
                         <div
@@ -448,7 +477,7 @@ export function PeerGroupSelector({
                       </CommandItem>
                     )}
 
-                    {sortedDropdownOptions.slice(0, slice).map((option) => {
+                    {filteredGroups.slice(0, slice).map((option) => {
                       const isSelected =
                         values.find((group) => group.name == option.name) !=
                         undefined;
@@ -490,10 +519,14 @@ export function PeerGroupSelector({
                             onClick={(e) => e.preventDefault()}
                           >
                             <div className={"flex items-center gap-2"}>
-                              <GroupBadge group={option} showNewBadge={true} />
+                              <GroupBadge
+                                group={option}
+                                showNewBadge={true}
+                                className={"h-7"}
+                              />
                             </div>
 
-                            <div className={"flex items-center gap-5"}>
+                            <div className={"flex items-center gap-4"}>
                               {option?.id && showRoutes && (
                                 <AccessControlGroupCount group_id={option.id} />
                               )}
@@ -502,16 +535,12 @@ export function PeerGroupSelector({
                                 <ResourcesCounter group={option} />
                               )}
 
-                              <div className={"flex gap-3 items-center"}>
+                              <div className={"flex gap-4 items-center"}>
                                 {!users ? (
-                                  <div
-                                    className={
-                                      "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
-                                    }
-                                  >
-                                    {peerIcon}
-                                    {peerCount} Peer(s)
-                                  </div>
+                                  <PeerCounter
+                                    group={option}
+                                    showResourceCounter={showResourceCounter}
+                                  />
                                 ) : (
                                   <UsersCounter
                                     group={option}
@@ -519,7 +548,6 @@ export function PeerGroupSelector({
                                     selected={isSelected}
                                   />
                                 )}
-
                                 <Checkbox checked={isSelected} />
                               </div>
                             </div>
@@ -535,12 +563,23 @@ export function PeerGroupSelector({
                   <ResourcesList
                     search={search}
                     resources={resources}
-                    isLoading={isLoading}
+                    isLoading={isResourcesLoading}
                     value={resource}
                     onChange={selectResource}
                   />
                 </TabsContent>
               )}
+              {showPeers && (
+                <TabsContent value={"peers"} className={"p-0 my-0"}>
+                  <PeersList
+                    search={search}
+                    peers={peers}
+                    isLoading={isPeersLoading}
+                    value={resource}
+                    onChange={selectPeer}
+                  />
+                </TabsContent>
+              )}
             </Tabs>
           </CommandList>
         </Command>
@@ -551,9 +590,15 @@ export function PeerGroupSelector({
 
 const TabTriggers = ({
   searchRef,
+  showResources = false,
+  showPeers = false,
 }: {
   searchRef: React.MutableRefObject<HTMLInputElement | null>;
+  showResources?: boolean;
+  showPeers?: boolean;
 }) => {
+  if (!showResources && !showPeers) return null;
+
   return (
     <TabsList justify={"start"} className={"px-3"}>
       <TabsTrigger
@@ -569,19 +614,38 @@ const TabTriggers = ({
         />
         Groups
       </TabsTrigger>
-      <TabsTrigger
-        value={"resources"}
-        className={"text-[.8rem] font-normal"}
-        onClick={() => searchRef.current?.focus()}
-      >
-        <Layers3Icon
-          className={
-            "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-          }
-          size={14}
-        />
-        Resource
-      </TabsTrigger>
+
+      {showResources && (
+        <TabsTrigger
+          value={"resources"}
+          className={"text-[.8rem] font-normal"}
+          onClick={() => searchRef.current?.focus()}
+        >
+          <Layers3Icon
+            className={
+              "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+            }
+            size={14}
+          />
+          Resources
+        </TabsTrigger>
+      )}
+
+      {showPeers && (
+        <TabsTrigger
+          value={"peers"}
+          className={"text-[.8rem] font-normal"}
+          onClick={() => searchRef.current?.focus()}
+        >
+          <MonitorSmartphoneIcon
+            className={
+              "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+            }
+            size={14}
+          />
+          Peers
+        </TabsTrigger>
+      )}
     </TabsList>
   );
 };
@@ -599,7 +663,14 @@ const UsersCounter = ({
     users?.filter((user) => user.auto_groups.includes(group.id as string)) ||
     [];
 
-  if (usersOfGroup.length === 0) return null;
+  if (usersOfGroup.length === 0)
+    return (
+      <span
+        className={"group-hover/user-stack:text-nb-gray-200 text-nb-gray-300"}
+      >
+        0 User(s)
+      </span>
+    );
 
   return (
     <HorizontalUsersStack
@@ -614,6 +685,31 @@ const UsersCounter = ({
   );
 };
 
+const PeerCounter = ({
+  group,
+  showResourceCounter,
+}: {
+  group: Group;
+  showResourceCounter?: boolean;
+}) => {
+  const peerCount = group.peers?.length ?? group?.peers_count ?? 0;
+  const resourcesCount = group?.resources_count ?? 0;
+  const hidePeerCounter =
+    showResourceCounter && peerCount === 0 && resourcesCount > 0;
+
+  return (
+    <div
+      className={cn(
+        "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2",
+        hidePeerCounter && "hidden",
+      )}
+    >
+      <MonitorSmartphoneIcon size={14} className={"shrink-0"} />
+      {peerCount} Peer(s)
+    </div>
+  );
+};
+
 const ResourcesCounter = ({ group }: { group: Group }) => {
   return group?.resources_count && group.resources_count > 0 ? (
     <div
@@ -700,7 +796,7 @@ const ResourcesList = ({
                   useHover={true}
                   data-cy={"group-badge"}
                   variant={"gray-ghost"}
-                  className={cn("transition-all group whitespace-nowrap")}
+                  className={cn("transition-all group whitespace-nowrap h-7")}
                   onClick={(e) => {
                     e.preventDefault();
                   }}
@@ -736,3 +832,107 @@ const ResourcesList = ({
     </Radio>
   );
 };
+
+const peersSearchPredicate = (item: Peer, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.ip.toLowerCase().includes(lowerCaseQuery);
+};
+
+const PeersList = ({
+  search,
+  peers,
+  isLoading,
+  value,
+  onChange,
+}: {
+  search: string;
+  peers?: Peer[];
+  isLoading: boolean;
+  value?: PolicyRuleResource;
+  onChange: (peer: Peer) => void;
+}) => {
+  const [filteredItems, _, setSearch] = useSearch(
+    peers || [],
+    peersSearchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  useEffect(() => {
+    setSearch(search);
+  }, [search, setSearch]);
+
+  if (isLoading) {
+    return (
+      <div className={"max-h-[195px] flex flex-col gap-1 py-2 px-2"}>
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+      </div>
+    );
+  }
+
+  if (search != "" && filteredItems.length == 0) {
+    return (
+      <DropdownInfoText className={"mt-5 max-w-sm mx-auto"}>
+        There are no peers matching your search. Please try a different search
+        term.
+      </DropdownInfoText>
+    );
+  }
+
+  if (search == "" && filteredItems.length == 0) {
+    return (
+      <DropdownInfoText className={"mt-5 max-w-sm mx-auto"}>
+        There are no peers available yet. <br />
+        Go to <InlineLink href={"/peers"}>Peers</InlineLink> to add some peers.
+      </DropdownInfoText>
+    );
+  }
+
+  return (
+    <Radio defaultValue={value?.id} name={"peer"} value={value?.id}>
+      <VirtualScrollAreaList
+        items={filteredItems}
+        onSelect={onChange}
+        itemClassName={"dark:aria-selected:bg-nb-gray-800/20"}
+        renderItem={(res) => {
+          if (!res?.id) return;
+
+          return (
+            <Fragment key={res.id}>
+              <div className={"flex items-center gap-2"}>
+                <Badge
+                  useHover={true}
+                  data-cy={"group-badge"}
+                  variant={"gray-ghost"}
+                  className={cn(
+                    "transition-all group whitespace-nowrap h-7 px-2",
+                  )}
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                >
+                  <PeerOperatingSystemIcon os={res.os} />
+                  <TextWithTooltip text={res?.name || ""} maxChars={20} />
+                </Badge>
+              </div>
+
+              <div className={"flex items-center gap-5"}>
+                <div
+                  className={
+                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                  }
+                >
+                  {res.ip}
+                  <RadioItem value={res.id} />
+                </div>
+              </div>
+            </Fragment>
+          );
+        }}
+      />
+    </Radio>
+  );
+};

src/components/PeerSelector.tsx

@@ -4,7 +4,6 @@ import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
-import { getOperatingSystem } from "@hooks/useOperatingSystem";
 import { useSearch } from "@hooks/useSearch";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
@@ -16,7 +15,7 @@ import { memo, useEffect, useState } from "react";
 import { useElementSize } from "@/hooks/useElementSize";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
-import { OSLogo } from "@/modules/peers/PeerOSCell";
+import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
 
 const MapPinIcon = memo(() => <MapPin size={12} />);
 MapPinIcon.displayName = "MapPinIcon";
@@ -182,7 +181,6 @@ export function PeerSelector({
                 togglePeer(item);
               }}
               renderItem={(option) => {
-                const os = getOperatingSystem(option.os);
                 const isSupported = isRoutingPeerSupported(
                   option.version,
                   option.os,
@@ -210,19 +208,10 @@ export function PeerSelector({
                           : "text-nb-gray-300",
                       )}
                     >
-                      <div
-                        className={cn(
-                          "flex items-center justify-center grayscale brightness-[100%] contrast-[40%]",
-                          "w-4 h-4 shrink-0",
-                          os === OperatingSystem.WINDOWS && "p-[2.5px]",
-                          os === OperatingSystem.APPLE && "p-[2.7px]",
-                          os === OperatingSystem.FREEBSD && "p-[1.5px]",
-                          !isSupported && "opacity-50",
-                        )}
-                      >
-                        <OSLogo os={option.os} />
-                      </div>
-
+                      <PeerOperatingSystemIcon
+                        os={option.os}
+                        className={isSupported ? "" : "opacity-50"}
+                      />
                       <div className={cn(!isSupported && "opacity-50")}>
                         <TextWithTooltip
                           text={option.name}

src/components/PortSelector.tsx

@@ -139,7 +139,11 @@ export function PortSelector({
                 <Badge
                   key={x}
                   variant={"gray"}
-                  onClick={() => toggle(x)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggle(x);
+                  }}
                   className={"uppercase tracking-wider font-medium py-1"}
                 >
                   {x}

src/components/SegmentedTabs.tsx

@@ -44,10 +44,12 @@ function Trigger({
   children,
   value,
   disabled = false,
+  className,
 }: {
   children: React.ReactNode;
   value: string;
   disabled?: boolean;
+  className?: string;
 }) {
   const currentValue = useTabContext();
   return (
@@ -60,6 +62,7 @@ function Trigger({
           : disabled
           ? ""
           : "text-nb-gray-400 hover:bg-nb-gray-900/50",
+        className,
       )}
       value={value}
     >

src/components/SidebarItem.tsx

@@ -79,6 +79,7 @@ export default function SidebarItem({
                 : "text-gray-600 hover:bg-gray-200 dark:text-nb-gray-400 dark:hover:bg-nb-gray-900/50",
             )}
             onClick={handleClick}
+            data-cy={"left-navigation-item"}
           >
             {isChild && isNavigationCollapsed && !mobileNavOpen && (
               <div

src/components/Tabs.tsx

@@ -39,38 +39,43 @@ const Tabs = React.forwardRef<
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
 type TabListProps = {
+  hidden?: boolean;
   justify?: "start" | "end" | "center" | "between";
 };
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & TabListProps
->(({ className, justify = "center", ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "flex flex-nowrap text-neutral-500 dark:text-nb-gray-400 w-full relative",
-      className,
-      justify == "center" && "justify-center justify-items-end",
-      justify == "start" && "justify-start",
-      justify == "end" && "justify-end",
-      justify == "between" && "justify-between",
-    )}
-    {...props}
-  >
-    <span
-      className={
-        "absolute left-0 dark:bg-nb-gray-900 bg-nb-gray-100 w-full h-[1px] bottom-0 z-0"
-      }
-    />
-    <ScrollArea>
-      <div className={"relative z-[1] flex flex-nowrap w-full "}>
-        {props.children}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  </TabsPrimitive.List>
-));
+>(({ className, justify = "center", hidden = false, ...props }, ref) => {
+  return (
+    !hidden && (
+      <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+          "flex flex-nowrap text-neutral-500 dark:text-nb-gray-400 w-full relative",
+          className,
+          justify == "center" && "justify-center justify-items-end",
+          justify == "start" && "justify-start",
+          justify == "end" && "justify-end",
+          justify == "between" && "justify-between",
+        )}
+        {...props}
+      >
+        <span
+          className={
+            "absolute left-0 dark:bg-nb-gray-900 bg-nb-gray-100 w-full h-[1px] bottom-0 z-0"
+          }
+        />
+        <ScrollArea>
+          <div className={"relative z-[1] flex flex-nowrap w-full "}>
+            {props.children}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </TabsPrimitive.List>
+    )
+  );
+});
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<

src/components/Tooltip.tsx

@@ -22,14 +22,14 @@ export const tooltipVariants = cva(
     variants: {
       variant: {
         default: [
-          "bg-white dark:bg-nb-gray-940",
-          "text-neutral-950 dark:text-neutral-50",
-          "border-neutral-200 dark:border-nb-gray-930",
+          "bg-nb-gray-940",
+          "text-neutral-50",
+          "border-neutral-200 border-nb-gray-930",
         ],
         lighter: [
-          "bg-white dark:bg-nb-gray-920",
-          "text-neutral-950 dark:text-neutral-50",
-          "border-neutral-200 dark:border-nb-gray-900",
+          "bg-nb-gray-920",
+          "text-neutral-50",
+          "border-neutral-200 border-nb-gray-900",
         ],
       },
     },

src/components/VirtualScrollAreaList.tsx

@@ -14,6 +14,7 @@ type Props<T extends { id?: string }> = {
   renderHeading?: (item: T) => React.ReactNode;
   renderBeforeItem?: (item: T) => React.ReactNode;
   itemClassName?: string;
+  itemClassNameWithItem?: (item: T) => string;
   itemWrapperClassName?: string;
   scrollAreaClassName?: string;
   maxHeight?: number;
@@ -21,6 +22,7 @@ type Props<T extends { id?: string }> = {
   estimatedHeadingHeight?: number;
   heightAdjustment?: number;
   groupKey?: (item: T) => string | undefined;
+  itemKey?: (item: T) => string;
 };
 
 export function VirtualScrollAreaList<T extends { id?: string }>({
@@ -30,6 +32,7 @@ export function VirtualScrollAreaList<T extends { id?: string }>({
   renderBeforeItem,
   renderHeading,
   itemClassName,
+  itemClassNameWithItem,
   itemWrapperClassName,
   scrollAreaClassName,
   maxHeight,
@@ -37,6 +40,7 @@ export function VirtualScrollAreaList<T extends { id?: string }>({
   estimatedHeadingHeight = 16,
   heightAdjustment = 8,
   groupKey,
+  itemKey,
 }: Readonly<Props<T>>) {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const [lastInputMethod, setLastInputMethod] = useState<"mouse" | "keyboard">(
@@ -159,10 +163,14 @@ export function VirtualScrollAreaList<T extends { id?: string }>({
                     setSelected(index);
                   }
                 }}
-                id={option.id}
+                id={itemKey ? itemKey(option) : option?.id}
                 onClick={() => onClick(option)}
                 ariaSelected={selected === index}
-                itemClassName={itemClassName}
+                itemClassName={
+                  itemClassNameWithItem
+                    ? itemClassNameWithItem(option)
+                    : itemClassName
+                }
                 className={itemWrapperClassName}
                 isLast={index === items.length - 1}
               >

src/components/select/SelectDropdown.tsx

@@ -23,6 +23,8 @@ export interface SelectOption {
     width?: number;
     country?: string;
   }>;
+  renderItem?: () => React.ReactNode;
+  searchValue?: string;
 }
 
 interface SelectDropdownProps {
@@ -37,6 +39,11 @@ interface SelectDropdownProps {
   searchPlaceholder?: string;
   isLoading?: boolean;
   variant?: ButtonVariants["variant"];
+  className?: string;
+  size?: "xs" | "sm";
+  children?: React.ReactNode;
+  maxHeight?: number;
+  triggerClassName?: string;
 }
 
 export function SelectDropdown({
@@ -51,6 +58,11 @@ export function SelectDropdown({
   searchPlaceholder = "Search...",
   isLoading = false,
   variant = "input",
+  className,
+  size = "sm",
+  children,
+  maxHeight,
+  triggerClassName,
 }: Readonly<SelectDropdownProps>) {
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
 
@@ -74,11 +86,51 @@ export function SelectDropdown({
   const filteredItems = React.useMemo(() => {
     if (isEmpty(debouncedSearch)) return options;
     return options.filter((item) => {
-      const value = `${item.label}${item.value}` || "";
+      const value = item?.searchValue || `${item.label}${item.value}` || "";
       return value.toLowerCase().includes(debouncedSearch.toLowerCase());
     });
   }, [options, debouncedSearch]);
 
+  const Loading = () => {
+    return (
+      <div className={"flex items-center gap-2"}>
+        <Skeleton width={20} />
+        <Skeleton width={100} />
+      </div>
+    );
+  };
+
+  const SelectedItem = () => {
+    return (
+      <div className={"flex items-center gap-2.5"}>
+        {selected?.icon && <selected.icon size={14} width={14} />}
+        <div
+          className={cn(
+            "flex flex-col text-sm font-medium",
+            size === "xs" && "text-xs",
+          )}
+        >
+          <span className={"text-nb-gray-200"}>{selected?.label}</span>
+        </div>
+      </div>
+    );
+  };
+
+  const PlaceholderItem = () => {
+    return (
+      <div className={"flex items-center gap-2.5"}>
+        <div
+          className={cn(
+            "flex flex-col text-sm font-medium",
+            size === "xs" && "text-xs",
+          )}
+        >
+          <span className={"text-nb-gray-200"}>{placeholder}</span>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Popover
       open={open}
@@ -91,45 +143,30 @@ export function SelectDropdown({
         setOpen(isOpen);
       }}
     >
-      <PopoverTrigger asChild={true} disabled={disabled || isLoading}>
-        <Button
-          variant={variant}
-          disabled={disabled || isLoading}
-          ref={inputRef}
-          className={"w-full"}
-        >
-          <div className={"w-full flex justify-between items-center gap-2"}>
-            {isLoading ? (
-              <div className={"flex gap-2"}>
-                <Skeleton width={20} />
-                <Skeleton width={100} />
+      <PopoverTrigger
+        asChild={!children}
+        disabled={disabled || isLoading}
+        className={triggerClassName}
+      >
+        {children ? (
+          children
+        ) : (
+          <Button
+            variant={variant}
+            disabled={disabled || isLoading}
+            ref={inputRef}
+            className={cn("w-full focus:outline-none", className)}
+          >
+            <div className={"w-full flex justify-between items-center gap-2"}>
+              {isLoading && <Loading />}
+              {!isLoading && selected && <SelectedItem />}
+              {!isLoading && !selected && <PlaceholderItem />}
+              <div className={"pl-2"}>
+                <ChevronsUpDown size={18} className={"shrink-0"} />
               </div>
-            ) : selected ? (
-              <React.Fragment>
-                <div className={"flex items-center gap-2.5"}>
-                  {selected?.icon && <selected.icon size={14} width={14} />}
-                  <div className={"flex flex-col text-sm font-medium"}>
-                    <span className={"text-nb-gray-200"}>
-                      {selected?.label}
-                    </span>
-                  </div>
-                </div>
-              </React.Fragment>
-            ) : (
-              <React.Fragment>
-                <div className={"flex items-center gap-2.5"}>
-                  <div className={"flex flex-col text-sm font-medium"}>
-                    <span className={"text-nb-gray-200"}>{placeholder}</span>
-                  </div>
-                </div>
-              </React.Fragment>
-            )}
-
-            <div className={"pl-2"}>
-              <ChevronsUpDown size={18} className={"shrink-0"} />
             </div>
-          </div>
-        </Button>
+          </Button>
+        )}
       </PopoverTrigger>
       <PopoverContent
         className="w-full p-0 shadow-sm  shadow-nb-gray-950 focus:outline-none"
@@ -164,18 +201,22 @@ export function SelectDropdown({
 
             <ScrollArea
               className={cn(
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 pb-2 pr-3",
+                "overflow-y-auto flex flex-col gap-1 pl-2 pr-3",
                 !showSearch && "pt-2",
               )}
+              style={{
+                maxHeight: maxHeight ?? 380,
+              }}
             >
               <CommandGroup>
-                <div className={"grid grid-cols-1 gap-1"}>
+                <div className={"grid grid-cols-1 gap-1 pb-2"}>
                   {filteredItems.map((option) => (
                     <SelectDropdownItem
                       option={option}
                       toggle={toggle}
                       key={option.value}
                       showValue={showValues}
+                      size={size}
                     />
                   ))}
                 </div>
@@ -192,10 +233,12 @@ const SelectDropdownItem = ({
   option,
   toggle,
   showValue = false,
+  size = "sm",
 }: {
   option: SelectOption;
   toggle: (value: string) => void;
   showValue?: boolean;
+  size: "xs" | "sm";
 }) => {
   const value = option.value || "" + option.label || "";
   const elementRef = useRef<HTMLDivElement>(null);
@@ -213,7 +256,7 @@ const SelectDropdownItem = ({
     <div ref={elementRef} className={"transition-all"}>
       {visible ? (
         <CommandItem
-          value={value}
+          value={option?.searchValue ?? value}
           ref={elementRef}
           className={"py-1 px-2"}
           onSelect={() => toggle(option.value)}
@@ -221,13 +264,23 @@ const SelectDropdownItem = ({
         >
           <div className={"flex items-center gap-2.5 p-1"}>
             {option.icon && <option.icon size={14} width={14} />}
-            <div className={"flex flex-col text-sm font-medium"}>
-              <span className={"text-nb-gray-200"}>{option.label}</span>
-            </div>
+            {option?.renderItem && option.renderItem()}
+            {!option?.renderItem && (
+              <div
+                className={cn(
+                  "flex flex-col text-sm font-medium",
+                  size === "xs" && "text-xs",
+                )}
+              >
+                <span className={"text-nb-gray-200"}>{option.label}</span>
+              </div>
+            )}
           </div>
           {showValue && (
             <div className={"flex items-center gap-2.5 p-1"}>
-              <Paragraph className={cn("text-sm text-right")}>
+              <Paragraph
+                className={cn("text-sm text-right", size === "xs" && "text-xs")}
+              >
                 {option.value}
               </Paragraph>
             </div>

src/components/select/SelectDropdownSearchInput.tsx

@@ -1,4 +1,3 @@
-import { IconArrowBack } from "@tabler/icons-react";
 import { cn } from "@utils/helpers";
 import { SearchIcon } from "lucide-react";
 import * as React from "react";
@@ -38,15 +37,9 @@ export const SelectDropdownSearchInput = forwardRef<HTMLInputElement, Props>(
             <SearchIcon size={14} />
           </div>
         </div>
-        <div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>
-          <div
-            className={
-              "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
-            }
-          >
-            <IconArrowBack size={10} />
-          </div>
-        </div>
+        <div
+          className={"absolute right-0 top-0 h-full flex items-center pr-4"}
+        ></div>
       </div>
     );
   },

src/components/skeletons/SkeletonTable.tsx

@@ -10,7 +10,7 @@ export default function SkeletonTable({ withHeader = true }: Readonly<Props>) {
   return (
     <div className={"w-full"}>
       {withHeader && <SkeletonTableHeader />}
-      <div className={"mt-6"}>
+      <div className={"mt-6 relative -top-1"}>
         <TableSkeletonRow />
         <TableSkeletonRow odd />
         <TableSkeletonRow />
@@ -68,7 +68,7 @@ export const SkeletonTableHeader = ({
   return (
     <div
       className={cn(
-        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between",
+        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between relative -top-1",
         className,
       )}
     >

src/components/table/DataTable.tsx

@@ -133,6 +133,7 @@ interface DataTableProps<TData, TValue> {
   getStartedCard?: React.ReactNode;
   placeholders?: TData[];
   renderExpandedRow?: (row: TData) => React.ReactNode;
+  renderRow?: (row: TData, children: React.ReactNode) => React.ReactNode;
   minimal?: boolean;
   className?: string;
   inset?: boolean;
@@ -193,6 +194,7 @@ export function DataTable<TData, TValue>({
   onRowClick,
   getStartedCard,
   renderExpandedRow,
+  renderRow,
   minimal,
   className,
   tableClassName,
@@ -507,7 +509,7 @@ export function DataTable<TData, TValue>({
                 {table.getRowModel().rows?.length ? (
                   table.getRowModel().rows.map((row) => {
                     const expandedRow = renderExpandedRow?.(row.original);
-                    return (
+                    const rowContent = (
                       <AccordionItem
                         value={row.original.id}
                         asChild={true}
@@ -597,6 +599,10 @@ export function DataTable<TData, TValue>({
                         </>
                       </AccordionItem>
                     );
+
+                    return renderRow
+                      ? renderRow(row.original, rowContent)
+                      : rowContent;
                   })
                 ) : (
                   <TableRowUnstyledComponent>

src/components/table/DataTableMultiSelectPopup.tsx

@@ -0,0 +1,89 @@
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { AnimatePresence, motion } from "framer-motion";
+import { MonitorSmartphoneIcon } from "lucide-react";
+import * as React from "react";
+
+type Props<T> = {
+  selectedItems?: T[];
+  label?: string;
+  onCanceled?: () => void;
+  rightSide?: React.ReactNode;
+};
+
+export function DataTableMultiSelectPopup<T>({
+  onCanceled,
+  label = "Peer(s) selected",
+  selectedItems,
+  rightSide,
+}: Props<T>) {
+  const count = selectedItems?.length || 0;
+  return (
+    <AnimatePresence>
+      {count > 0 && (
+        <div
+          className={"fixed -bottom-16 z-50 w-full left-0 pointer-events-none"}
+        >
+          <motion.div
+            exit={{
+              y: 100,
+            }}
+          >
+            <AnimatePresence>
+              <motion.div
+                animate={{ y: 0 }}
+                initial={{ y: 100 }}
+                exit={{ y: 100 }}
+                transition={{
+                  type: "spring",
+                  stiffness: 270,
+                  damping: 25,
+                  duration: 0.35,
+                }}
+                className={cn(
+                  "max-w-xl mx-auto border relative z-[50] bg-nb-gray-800 border-nb-gray-900 shadow-2xl border-b-0 overflow-hidden pointer-events-auto",
+                  "rounded-t-lg",
+                )}
+              >
+                <AnimatePresence mode={"popLayout"}>
+                  <div
+                    className={
+                      "flex gap-2 items-center text-sm px-6 pt-3.5 pb-20 bg-nb-gray-920/90 text-nb-gray-200 justify-between"
+                    }
+                  >
+                    <div className={"flex gap-2 items-center"}>
+                      <MonitorSmartphoneIcon size={16} className={""} />
+                      <span>
+                        <span className={"font-medium text-white"}>
+                          {count}
+                        </span>{" "}
+                        {label}
+                      </span>
+                    </div>
+                    <div className={"flex gap-2 items-center"}>
+                      {rightSide}
+                      <FullTooltip
+                        content={<span className={"text-xs"}>Cancel</span>}
+                      >
+                        <Button
+                          onClick={onCanceled}
+                          variant={"default-outline"}
+                          size={"xs"}
+                          className={"!h-9 !w-9"}
+                        >
+                          <IconX size={16} className={"shrink-0"} />
+                        </Button>
+                      </FullTooltip>
+                    </div>
+                  </div>
+                </AnimatePresence>
+              </motion.div>
+            </AnimatePresence>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/table/Table.tsx

@@ -104,7 +104,7 @@ const TableRow = React.forwardRef<
       " transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
       "dark:data-[state=selected]:border-nb-gray-900",
       minimal
-        ? "dark:hover:bg-nb-gray-900/10"
+        ? "dark:hover:bg-nb-gray-910/[15%]"
         : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-940 hover:bg-neutral-100/50",
       className,
     )}

src/components/ui/AddGroupButton.tsx

@@ -0,0 +1,115 @@
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+  ModalTrigger,
+} from "@components/modal/Modal";
+import { ExternalLinkIcon, FolderGit2Icon, PlusCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
+import { useApiCall } from "@/utils/api";
+import ModalHeader from "../modal/ModalHeader";
+import { notify } from "../Notification";
+import Paragraph from "../Paragraph";
+import Separator from "../Separator";
+
+export const AddGroupButton = () => {
+  const create = useApiCall<Group>("/groups", true).post;
+  const { mutate } = useSWRConfig();
+  const [name, setName] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const { permission } = usePermissions();
+
+  const createGroup = () => {
+    notify({
+      title: "Create Group",
+      description: `Group '${name}' successfully created`,
+      loadingMessage: "Creating group...",
+      promise: create({ name }).then((g) => {
+        setOpen(false);
+        setName("");
+        mutate("/groups");
+        router.push(`/group?id=${g?.id}`);
+      }),
+    });
+  };
+
+  return (
+    permission?.groups?.create && (
+      <Modal open={open} onOpenChange={setOpen}>
+        <ModalTrigger asChild>
+          <Button
+            variant={"primary"}
+            size={"sm"}
+            className={"ml-auto h-[42px]"}
+          >
+            <PlusCircle size={16} />
+            Create Group
+          </Button>
+        </ModalTrigger>
+        <ModalContent maxWidthClass={"max-w-xl"}>
+          <ModalHeader
+            icon={<FolderGit2Icon size={18} />}
+            title="Create Group"
+            description="Create a group to manage and organize access in your network"
+            color="netbird"
+          />
+          <Separator />
+          <div className={"px-8 flex-col flex gap-6 py-6"}>
+            <div>
+              <Label>Name</Label>
+              <HelpText>
+                Set an easily identifiable name for your group
+              </HelpText>
+              <Input
+                tabIndex={0}
+                placeholder={"e.g., Developers"}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+          </div>
+          <ModalFooter className={"items-center"}>
+            <div className={"w-full"}>
+              <Paragraph className={"text-sm mt-auto"}>
+                Learn more about
+                <InlineLink
+                  href={"https://docs.netbird.io/how-to/manage-network-access"}
+                  target={"_blank"}
+                >
+                  Groups
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Paragraph>
+            </div>
+            <div className={"flex gap-3 w-full justify-end"}>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+
+              <Button
+                variant={"primary"}
+                data-cy={"submit-route"}
+                disabled={!name}
+                onClick={createGroup}
+              >
+                <PlusCircle size={16} />
+                Create Group
+              </Button>
+            </div>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    )
+  );
+};

src/components/ui/AnnouncementBanner.tsx

@@ -12,21 +12,22 @@ const variants = cva(
       variant: {
         default:
           "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
-        important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
+        important:
+          "from-netbird to-netbird-400 bg-gradient-to-b text-black font-normal",
       },
       tagBadge: {
         default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
-        important: "bg-white text-netbird font-medium",
+        important: "bg-nb-gray-900 text-nb-gray-200 font-medium",
       },
       closeButton: {
         default:
           "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
         important:
-          "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
+          "bg-netbird rounded-md p-1 text-nb-gray-900 hover:bg-nb-gray-900 hover:text-nb-gray-200",
       },
       inlineLink: {
         default: "text-nb-blue-400 hover:underline",
-        important: "!text-white underline hover:opacity-80",
+        important: "!text-black underline hover:opacity-80",
       },
     },
   },

src/components/ui/GetStartedTest.tsx

@@ -10,6 +10,7 @@ type Props = {
   description?: string;
   button?: React.ReactNode;
   learnMore?: React.ReactNode;
+  showBackground?: boolean;
 };
 
 export default function GetStartedTest({
@@ -18,28 +19,33 @@ export default function GetStartedTest({
   description,
   button,
   learnMore,
+  showBackground = true,
 }: Props) {
   return (
     <div className={"px-8 mt-8"}>
       <Card className={"w-full relative overflow-hidden"}>
-        <div
-          className={
-            "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
-          }
-        ></div>
-        <div
-          className={
-            "absolute w-full h-full left-0 top-0 z-10 px-5 py-3 overflow-hidden"
-          }
-        >
-          <div className={"flex flex-col gap-2"}>
-            <Skeleton className={"w-full"} height={70} duration={4} />
-            <Skeleton className={"w-full"} height={70} duration={4} />
-            <Skeleton className={"w-full"} height={70} duration={4} />
-            <Skeleton className={"w-full"} height={70} duration={4} />
-            <Skeleton className={"w-full"} height={70} duration={4} />
-          </div>
-        </div>
+        {showBackground && (
+          <>
+            <div
+              className={
+                "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+              }
+            ></div>
+            <div
+              className={
+                "absolute w-full h-full left-0 top-0 z-10 px-5 py-3 overflow-hidden"
+              }
+            >
+              <div className={"flex flex-col gap-2"}>
+                <Skeleton className={"w-full"} height={70} duration={4} />
+                <Skeleton className={"w-full"} height={70} duration={4} />
+                <Skeleton className={"w-full"} height={70} duration={4} />
+                <Skeleton className={"w-full"} height={70} duration={4} />
+                <Skeleton className={"w-full"} height={70} duration={4} />
+              </div>
+            </div>
+          </>
+        )}
         <div className={"w-full h-full z-20 relative left-0 top-0 flex py-8"}>
           <div className={"inline-flex justify-center w-full"}>
             <div>

src/components/ui/GroupBadge.tsx

@@ -6,6 +6,7 @@ import { cn } from "@utils/helpers";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 import { Group } from "@/interfaces/Group";
+import { useRouter } from "next/navigation";
 
 type Props = {
   group: Group;
@@ -17,6 +18,9 @@ type Props = {
   maxChars?: number;
   maxWidth?: string;
   hideTooltip?: boolean;
+  textClassName?: string;
+  redirectGroupTab?: string;
+  redirectToGroupPage?: boolean;
 };
 
 export default function GroupBadge({
@@ -29,19 +33,33 @@ export default function GroupBadge({
   maxChars = 20,
   maxWidth,
   hideTooltip = false,
+  textClassName,
+  redirectGroupTab,
+  redirectToGroupPage = false,
 }: Readonly<Props>) {
   const isNew = !group?.id;
+  const router = useRouter();
+
+  const handleGroupPageRedirect = () => {
+    if (!group?.id) return;
+    let redirectUrl = `/group?id=${group.id}`;
+    if (redirectGroupTab) {
+      redirectUrl += `&tab=${encodeURIComponent(redirectGroupTab)}`;
+    }
+    router.push(redirectUrl);
+  };
 
   return (
     <Badge
       key={group.id ?? group.name}
-      useHover={true}
+      useHover={!!onClick || redirectToGroupPage}
       data-cy={"group-badge"}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={(e) => {
         e.preventDefault();
         onClick?.(e);
+        if (redirectToGroupPage) handleGroupPageRedirect();
       }}
     >
       <GroupBadgeIcon id={group?.id} issued={group?.issued} />
@@ -49,6 +67,7 @@ export default function GroupBadge({
         text={group?.name || ""}
         maxChars={maxChars}
         maxWidth={maxWidth}
+        className={textClassName}
         hideTooltip={hideTooltip}
       />
       {children}

src/components/ui/GroupBadgeIcon.tsx

@@ -2,7 +2,9 @@ import { FolderGit2 } from "lucide-react";
 import * as React from "react";
 import EntraIcon from "@/assets/icons/EntraIcon";
 import GoogleIcon from "@/assets/icons/GoogleIcon";
+import JumpcloudIcon from "@/assets/icons/JumpcloudIcon";
 import JWTIcon from "@/assets/icons/JWTIcon";
+import OIDCIcon from "@/assets/icons/OIDCIcon";
 import OktaIcon from "@/assets/icons/OktaIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { GroupIssued } from "@/interfaces/Group";
@@ -11,22 +13,35 @@ import { useGroupIdentification } from "@/modules/groups/useGroupIdentification"
 export const GroupBadgeIcon = ({
   id,
   issued,
+  size = 12,
 }: {
   id?: string;
   issued?: GroupIssued;
+  size?: number;
 }) => {
   const { groups } = useGroups();
   const group = groups?.find((g) => g.id === id);
 
-  const { isAzureGroup, isGoogleGroup, isOktaGroup, isJWTGroup } =
-    useGroupIdentification({ id, issued: issued ?? group?.issued });
+  const {
+    isAzureGroup,
+    isGoogleGroup,
+    isOktaGroup,
+    isJWTGroup,
+    isJumpcloudGroup,
+    isOIDCGroup,
+  } = useGroupIdentification({ id, issued: issued ?? group?.issued });
 
   if (isGoogleGroup)
-    return <GoogleIcon size={11} className={"shrink-0 mr-0.5"} />;
+    return <GoogleIcon size={size - 1} className={"shrink-0 mr-0.5"} />;
   if (isAzureGroup)
-    return <EntraIcon size={13} className={"shrink-0 mr-0.5"} />;
-  if (isOktaGroup) return <OktaIcon size={11} className={"shrink-0 mr-0.5"} />;
-  if (isJWTGroup) return <JWTIcon size={12} className={"shrink-0"} />;
+    return <EntraIcon size={size + 1} className={"shrink-0 mr-0.5"} />;
+  if (isOktaGroup)
+    return <OktaIcon size={size - 1} className={"shrink-0 mr-0.5"} />;
+  if (isJumpcloudGroup)
+    return <JumpcloudIcon size={size + 2} className={"shrink-0 mr-0.5"} />;
+  if (isOIDCGroup)
+    return <OIDCIcon size={size} className={"shrink-0 mr-0.5"} />;
+  if (isJWTGroup) return <JWTIcon size={size} className={"shrink-0"} />;
 
-  return <FolderGit2 size={12} className={"shrink-0"} />;
+  return <FolderGit2 size={size} className={"shrink-0"} />;
 };

src/components/ui/HelpAndSupportButton.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import {
+  ArrowUpRightIcon,
+  BookText,
+  CircleQuestionMark,
+  MailIcon,
+  MessageSquareShare,
+  MessagesSquareIcon,
+  TriangleAlert,
+} from "lucide-react";
+import { useState } from "react";
+import Button from "@components/Button";
+import { cn } from "@utils/helpers";
+import SlackIcon from "@/assets/icons/SlackIcon";
+import { isNetBirdHosted } from "@utils/netbird";
+
+export default function HelpAndSupportButton() {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  return (
+    <DropdownMenu
+      modal={false}
+      open={dropdownOpen}
+      onOpenChange={setDropdownOpen}
+    >
+      <DropdownMenuTrigger asChild={true}>
+        <Button
+          size={"xs"}
+          variant={"default-outline"}
+          className={cn(
+            "!rounded-full h-[38px] w-[38px] !p-0",
+            dropdownOpen && "text-white",
+          )}
+        >
+          <CircleQuestionMark size={18} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1 px-1">
+            <div className="text-sm font-normal leading-none text-nb-gray-200 py-1">
+              Help and Support
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          href="https://docs.netbird.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+          asChild
+        >
+          <div className={"flex gap-3 items-center"}>
+            <BookText size={14} />
+            Documentation
+          </div>
+          <DropdownMenuShortcut>
+            <ArrowUpRightIcon size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          href="https://docs.netbird.io/help/troubleshooting-client"
+          target="_blank"
+          rel="noopener noreferrer"
+          asChild
+        >
+          <div className={"flex gap-3 items-center"}>
+            <TriangleAlert size={14} />
+            Troubleshooting
+          </div>
+          <DropdownMenuShortcut>
+            <ArrowUpRightIcon size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        {isNetBirdHosted() && (
+          <DropdownMenuItem href="mailto:support@netbird.io?subject=Support Request">
+            <div className={"flex gap-3 items-center"}>
+              <MailIcon size={14} />
+              support@netbird.io
+            </div>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          href="https://forum.netbird.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+          asChild
+        >
+          <div className={"flex gap-3 items-center"}>
+            <MessagesSquareIcon size={14} />
+            NetBird Forum
+          </div>
+          <DropdownMenuShortcut>
+            <ArrowUpRightIcon size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          href="https://docs.netbird.io/slack-url"
+          target="_blank"
+          rel="noopener noreferrer"
+          asChild
+        >
+          <div className={"flex gap-3 items-center"}>
+            <SlackIcon size={14} />
+            NetBird Slack
+          </div>
+          <DropdownMenuShortcut>
+            <ArrowUpRightIcon size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          href={"https://forms.gle/TeLw2zrXEdw6RcQ36"}
+          target={"_blank"}
+          rel="noopener noreferrer"
+          asChild
+        >
+          <div className={"flex gap-3 items-center"}>
+            <MessageSquareShare size={14} />
+            Feedback
+          </div>
+          <DropdownMenuShortcut>
+            <ArrowUpRightIcon size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/ui/InstallNetBirdButton.tsx

@@ -0,0 +1,21 @@
+import Button from "@components/Button";
+import { Modal, ModalTrigger } from "@components/modal/Modal";
+import { DownloadIcon } from "lucide-react";
+import React, { useState } from "react";
+import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
+
+export function InstallNetBirdButton() {
+  const [installModal, setInstallModal] = useState(false);
+
+  return (
+    <Modal open={installModal} onOpenChange={setInstallModal}>
+      <ModalTrigger asChild>
+        <Button variant={"secondary"} size={"sm"}>
+          <DownloadIcon size={16} />
+          Install NetBird
+        </Button>
+      </ModalTrigger>
+      <SetupModal />
+    </Modal>
+  );
+}

src/components/ui/MemoizedNetBirdIcon.tsx

@@ -3,7 +3,7 @@ import { memo } from "react";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 
 const MemoizedNetBirdIcon = () => {
-  return <NetBirdIcon size={16} />;
+  return <NetBirdIcon size={14} />;
 };
 
 export default memo(MemoizedNetBirdIcon);

src/components/ui/MultipleGroups.tsx

@@ -1,19 +1,21 @@
 import Badge from "@components/Badge";
-import { ScrollArea } from "@components/ScrollArea";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@components/Tooltip";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@components/HoverCard";
+import { ScrollArea } from "@components/ScrollArea";
 import GroupBadge from "@components/ui/GroupBadge";
-import PeerBadge from "@components/ui/PeerBadge";
+import PeerCountBadge from "@components/ui/PeerCountBadge";
+import ResourceCountBadge from "@components/ui/ResourceCountBadge";
 import { cn } from "@utils/helpers";
 import { ArrowRightIcon, PencilLineIcon } from "lucide-react";
 import * as React from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useUsers } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
 import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
 
 type Props = {
   groups: Group[];
@@ -21,6 +23,9 @@ type Props = {
   description?: string;
   onClick?: () => void;
   className?: string;
+  showResources?: boolean;
+  redirectGroupTab?: string;
+  showUsers?: boolean;
 };
 
 export default function MultipleGroups({
@@ -29,6 +34,9 @@ export default function MultipleGroups({
   description = "Use groups to control what this peer can access",
   onClick,
   className,
+  showResources = false,
+  showUsers = false,
+  redirectGroupTab,
 }: Readonly<Props>) {
   const { permission } = usePermissions();
 
@@ -45,13 +53,9 @@ export default function MultipleGroups({
   const otherGroups = orderedGroups.length > 0 ? orderedGroups.slice(1) : [];
 
   return (
-    <TooltipProvider
-      disableHoverableContent={false}
-      delayDuration={200}
-      skipDelayDuration={200}
-    >
-      <Tooltip>
-        <TooltipTrigger asChild={true}>
+    <div className={"flex"}>
+      <HoverCard openDelay={200} closeDelay={100}>
+        <HoverCardTrigger>
           <div
             className={cn("inline-flex items-center gap-2 z-0", className)}
             data-cy={"multiple-groups"}
@@ -78,9 +82,9 @@ export default function MultipleGroups({
               </Badge>
             )}
           </div>
-        </TooltipTrigger>
+        </HoverCardTrigger>
         {orderedGroups && orderedGroups.length > 0 && (
-          <TooltipContent
+          <HoverCardContent
             className={"p-0"}
             onClick={(e) => e.stopPropagation()}
           >
@@ -102,19 +106,31 @@ export default function MultipleGroups({
                           "flex gap-2 items-center justify-between w-full"
                         }
                       >
-                        <GroupBadge group={group}></GroupBadge>
+                        <GroupBadge
+                          group={group}
+                          className={"py-0"}
+                          textClassName={"py-1.5"}
+                          redirectToGroupPage={true}
+                          redirectGroupTab={redirectGroupTab}
+                        ></GroupBadge>
                         <ArrowRightIcon size={14} />
-                        <PeerBadge> {group.peers_count} Peer(s)</PeerBadge>
+                        {showResources ? (
+                          <ResourceCountBadge group={group} />
+                        ) : showUsers ? (
+                          <UserCountStack group={group} />
+                        ) : (
+                          <PeerCountBadge group={group} />
+                        )}
                       </div>
                     )
                   );
                 })}
               </div>
             </ScrollArea>
-          </TooltipContent>
+          </HoverCardContent>
         )}
-      </Tooltip>
-    </TooltipProvider>
+      </HoverCard>
+    </div>
   );
 }
 
@@ -129,3 +145,17 @@ export const TransparentEditIconButton = () => {
     </div>
   );
 };
+
+export const UserCountStack = ({ group }: { group: Group }) => {
+  const { users } = useUsers();
+  const usersOfGroup =
+    users?.filter((user) => user.auto_groups.includes(group.id as string)) ||
+    [];
+  return (
+    <HorizontalUsersStack
+      users={usersOfGroup}
+      side={"right"}
+      isAllGroup={group?.name === "All"}
+    />
+  );
+};

src/components/ui/NoResults.tsx

@@ -14,7 +14,9 @@ type Props = {
   className?: string;
   hasFiltersApplied?: boolean;
   onResetFilters?: () => void;
+  contentClassName?: string;
 };
+
 export default function NoResults({
   icon,
   title = "Could not find any results",
@@ -23,6 +25,7 @@ export default function NoResults({
   className,
   hasFiltersApplied = false,
   onResetFilters,
+  contentClassName,
 }: Props) {
   const router = useRouter();
   const pathname = usePathname();
@@ -65,7 +68,9 @@ export default function NoResults({
           <Skeleton className={"w-full"} height={70} duration={4} />
         </div>
       </div>
-      <div className={cn("max-w-md mx-auto relative z-20 py-6")}>
+      <div
+        className={cn("max-w-md mx-auto relative z-20 py-6", contentClassName)}
+      >
         <div
           className={
             "mx-auto w-14 h-14 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"

src/components/ui/NoResultsCard.tsx

@@ -1,5 +1,6 @@
 import Card from "@components/Card";
 import Paragraph from "@components/Paragraph";
+import { cn } from "@utils/helpers";
 import { FilterX } from "lucide-react";
 import React from "react";
 import Skeleton from "react-loading-skeleton";
@@ -9,15 +10,18 @@ type Props = {
   title?: string;
   description?: string;
   children?: React.ReactNode;
+  className?: string;
 };
+
 export default function NoResultsCard({
   icon,
   title = "Could not find any results",
   description = "We couldn't find any results. Please try a different search term or change your filters.",
   children,
+  className,
 }: Readonly<Props>) {
   return (
-    <div className={"px-8 mt-8"}>
+    <div className={cn("px-8 mt-8", className)}>
       <Card className={"w-full relative overflow-hidden"}>
         <div
           className={

src/components/ui/PeerCountBadge.tsx

@@ -0,0 +1,65 @@
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn, singularize } from "@utils/helpers";
+import { MonitorSmartphoneIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useMemo } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import ResourceCountBadge from "@components/ui/ResourceCountBadge";
+
+type Props = {
+  group?: Group;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+
+export default function PeerCountBadge({
+  group,
+  variant = "gray",
+  className,
+}: Props) {
+  const router = useRouter();
+  const { dropdownOptions, groups } = useGroups();
+
+  const currentGroup = useMemo(() => {
+    const options = dropdownOptions?.find((g) => g.name === group?.name);
+    return options ?? groups?.find((g) => g.name === group?.name);
+  }, [group, dropdownOptions, groups]);
+
+  const peerCount = useMemo(() => {
+    let peerCount = currentGroup?.peers_count ?? 0;
+    let countedPeers = currentGroup?.peers?.length ?? 0;
+    if (peerCount !== countedPeers) {
+      peerCount = countedPeers;
+    }
+    return peerCount;
+  }, [currentGroup]);
+
+  const canRedirect = !!group?.id && group?.name !== "All";
+
+  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (canRedirect) router.push(`/group?id=${group?.id}&tab=peers`);
+  };
+
+  const resourcesCount = group?.resources_count ?? 0;
+  const showResources = resourcesCount > 0 && peerCount === 0;
+
+  return showResources ? (
+    <ResourceCountBadge group={group} />
+  ) : (
+    <Badge
+      variant={variant}
+      className={cn(
+        className,
+        "px-3 gap-2 whitespace-nowrap",
+        canRedirect && "cursor-pointer",
+      )}
+      onClick={onClick}
+      useHover={canRedirect}
+    >
+      <MonitorSmartphoneIcon size={12} />
+      {singularize("Peers", peerCount, true)}
+    </Badge>
+  );
+}

src/components/ui/PolicyDirection.tsx

@@ -2,7 +2,7 @@ import Badge from "@components/Badge";
 import { cn } from "@utils/helpers";
 import React, { useEffect, useMemo } from "react";
 import LongArrowLeftIcon from "@/assets/icons/LongArrowLeftIcon";
-import { PolicyRuleResource } from "@/interfaces/Policy";
+import { PolicyRuleResource, Protocol } from "@/interfaces/Policy";
 
 type Props = {
   disabled?: boolean;
@@ -10,6 +10,7 @@ type Props = {
   onChange: (value: Direction) => void;
   className?: string;
   destinationResource?: PolicyRuleResource;
+  protocol?: Protocol;
 };
 
 export type Direction = "bi" | "in" | "out";
@@ -20,8 +21,10 @@ export default function PolicyDirection({
   onChange,
   className,
   destinationResource,
+  protocol,
 }: Readonly<Props>) {
   const toggleDirection = () => {
+    if (protocol === "netbird-ssh") return;
     if (value == "bi") {
       onChange("in");
     } else {
@@ -30,41 +33,49 @@ export default function PolicyDirection({
   };
 
   useEffect(() => {
+    if (protocol === "netbird-ssh") {
+      onChange("in");
+      return;
+    }
     if (disabled) onChange("bi");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabled]);
+  }, [disabled, protocol]);
+
+  const isNetworkResource =
+    !!destinationResource && destinationResource?.type !== "peer";
 
   const topBadgeClass = useMemo(() => {
-    if (destinationResource) return "blueDark";
+    if (isNetworkResource) return "blueDark";
     if (value === "bi") return "green";
     if (value === "in") return "blueDark";
     return "gray";
-  }, [value, destinationResource]);
+  }, [value, isNetworkResource]);
 
   const topArrowClass = useMemo(() => {
-    if (destinationResource) return "fill-sky-500";
+    if (isNetworkResource) return "fill-sky-500";
     if (value === "bi") return "fill-green-500";
     if (value === "in") return "fill-sky-500";
     return "fill-gray-500";
-  }, [value, destinationResource]);
+  }, [value, isNetworkResource]);
 
   const bottomBadgeClass = useMemo(() => {
-    if (destinationResource) return "gray";
+    if (isNetworkResource) return "gray";
     if (value === "bi") return "green";
     return "gray";
-  }, [value, destinationResource]);
+  }, [value, isNetworkResource]);
 
   const bottomArrowClass = useMemo(() => {
-    if (destinationResource) return "fill-gray-500";
+    if (isNetworkResource) return "fill-gray-500";
     if (value === "bi") return "fill-green-500";
     return "fill-gray-500";
-  }, [value, destinationResource]);
+  }, [value, isNetworkResource]);
 
   return (
     <button
       className={cn(
         "flex flex-col gap-2 mt-[23px] cursor-pointer select-none",
-        disabled && "opacity-50 pointer-events-none",
+        (disabled || protocol === "netbird-ssh") &&
+          "opacity-50 pointer-events-none",
         "hover:opacity-80 transition-all",
         className,
       )}

src/components/ui/ResourceBadge.tsx

@@ -4,9 +4,13 @@ import { cn } from "@utils/helpers";
 import { GlobeIcon, NetworkIcon, WorkflowIcon, XIcon } from "lucide-react";
 import * as React from "react";
 import { NetworkResource } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
 
 type Props = {
   resource?: NetworkResource;
+  peer?: Peer;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   showX?: boolean;
   children?: React.ReactNode;
@@ -15,35 +19,44 @@ type Props = {
 export default function ResourceBadge({
   onClick,
   resource,
+  peer,
   showX = false,
   children,
   className,
 }: Readonly<Props>) {
-  if (!resource) return;
+  if (!resource && !peer) return;
+
+  const isPeer = !!peer;
+  const key = resource ? resource.id || resource?.name : peer?.id || peer?.name;
 
   return (
     <Badge
-      key={resource.id || resource?.name}
+      key={key}
       useHover={true}
       data-cy={"resource-badge"}
       variant={"gray-ghost"}
-      className={cn("transition-all group whitespace-nowrap", className)}
+      className={cn(
+        "transition-all group whitespace-nowrap",
+        className,
+        isPeer && "px-2",
+      )}
       onClick={(e) => {
         e.preventDefault();
         onClick?.(e);
       }}
     >
-      {resource.type === "host" && (
-        <WorkflowIcon size={12} className={"shrink-0"} />
-      )}
-      {resource.type === "domain" && (
-        <GlobeIcon size={12} className={"shrink-0"} />
-      )}
-      {resource.type === "subnet" && (
-        <NetworkIcon size={12} className={"shrink-0"} />
+      {isPeer ? (
+        <>
+          <PeerOperatingSystemIcon os={peer?.os} />
+          <TruncatedText text={peer?.name || ""} maxChars={20} />
+        </>
+      ) : (
+        <>
+          <ResourceIcon type={resource?.type || ""} />
+          <TruncatedText text={resource?.name || ""} maxChars={20} />
+        </>
       )}
 
-      <TruncatedText text={resource?.name || ""} maxChars={20} />
       {children}
       {showX && (
         <XIcon
@@ -56,3 +69,16 @@ export default function ResourceBadge({
     </Badge>
   );
 }
+
+const ResourceIcon = ({ type }: { type: string }) => {
+  switch (type) {
+    case "host":
+      return <WorkflowIcon size={12} className={"shrink-0"} />;
+    case "domain":
+      return <GlobeIcon size={12} className={"shrink-0"} />;
+    case "subnet":
+      return <NetworkIcon size={12} className={"shrink-0"} />;
+    default:
+      return null;
+  }
+};

src/components/ui/ResourceCountBadge.tsx

@@ -0,0 +1,33 @@
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn, singularize } from "@utils/helpers";
+import { LayersIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { Group } from "@/interfaces/Group";
+
+type Props = {
+  group?: Group;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+
+export default function ResourceCountBadge({ group }: Props) {
+  const router = useRouter();
+  const hasId = !!group?.id;
+
+  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (hasId) router.push(`/group?id=${group?.id}&tab=resources`);
+  };
+
+  return (
+    <Badge
+      className={cn("px-3 gap-2 whitespace-nowrap", hasId && "cursor-pointer")}
+      variant={"gray"}
+      onClick={onClick}
+      useHover={hasId}
+    >
+      <LayersIcon size={12} />
+      {singularize("Resources", group?.resources_count, true)}
+    </Badge>
+  );
+}

src/components/ui/TextWithTooltip.tsx

@@ -24,7 +24,7 @@ export default function TextWithTooltip({
     <FullTooltip
       disabled={charCount <= maxChars || hideTooltip}
       interactive={false}
-      className={"truncate w-full min-w-0"}
+      className={"truncate w-auto min-w-0"}
       skipDelayDuration={350}
       delayDuration={200}
       content={

src/components/ui/TruncatedText.tsx

@@ -1,4 +1,4 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
 import { cn } from "@utils/helpers";
 import React, { useMemo, useState } from "react";
 
@@ -55,38 +55,28 @@ export default function TruncatedText({
   }
 
   return (
-    <HoverCard.Root
-      openDelay={650}
-      closeDelay={100}
-      open={open}
-      onOpenChange={setOpen}
-    >
-      <HoverCard.Trigger asChild={true}>
+    <Tooltip delayDuration={650} open={open} onOpenChange={setOpen}>
+      <TooltipTrigger asChild={true}>
         <div className="w-full min-w-0 inline-block" style={containerStyle}>
           <div ref={contentRef} className={cn(className, "truncate")}>
             {text}
           </div>
         </div>
-      </HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          onMouseLeave={() => setOpen(false)}
-          onMouseEnter={() => setOpen(false)}
-          alignOffset={20}
-          sideOffset={4}
-          className={cn(
-            "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50",
-            className,
-            "px-3 py-1.5",
-          )}
-        >
-          <div className="text-neutral-300 flex flex-col gap-1">
-            <div className="max-w-xs break-all whitespace-normal text-xs">
-              {text}
-            </div>
+      </TooltipTrigger>
+      <TooltipContent
+        alignOffset={20}
+        sideOffset={4}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className={cn(className, "px-3 py-1.5")}
+      >
+        <div className="text-neutral-300 flex flex-col gap-1">
+          <div className="max-w-xs break-all whitespace-normal text-xs">
+            {text}
           </div>
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
+        </div>
+      </TooltipContent>
+    </Tooltip>
   );
 }

src/components/ui/UserAvatar.tsx

@@ -1,7 +1,7 @@
 import { cn, generateColorFromUser } from "@utils/helpers";
-import { Avatar } from "flowbite-react";
 import * as React from "react";
 import { useState } from "react";
+import Image from "next/image";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 
 type Props = {
@@ -13,26 +13,27 @@ export const UserAvatar = ({ size = "default" }: Props) => {
   const [pictureLoaded, setPictureLoaded] = useState(true);
 
   const getAvatarSize = () => {
-    if (size === "small") return "sm";
-    if (size === "large") return "lg";
-    return "md";
+    if (size === "small") return 32;
+    if (size === "default") return 40;
+    if (size === "large") return 48;
+    return 35.2;
   };
 
-  return pictureLoaded ? (
-    <Avatar
-      alt=""
-      img={user?.picture}
-      rounded
+  return pictureLoaded && user?.picture ? (
+    <Image
+      src={user?.picture}
+      alt={""}
       onError={() => setPictureLoaded(false)}
-      size={getAvatarSize()}
-      className={"shrink-0"}
+      width={getAvatarSize()}
+      height={getAvatarSize()}
+      className={"rounded-full"}
     />
   ) : (
     <div
       className={cn(
         "rounded-full flex items-center justify-center bg-nb-gray-900 text-netbird uppercase",
         size == "small" && "w-8 h-8",
-        size == "medium" && "w-[2.3rem] h-[2.3rem]",
+        size == "medium" && "w-[2.2rem] h-[2.2rem]",
         size == "default" && "w-10 h-10",
         size == "large" && "w-12 h-12",
       )}

src/components/ui/UserDropdown.tsx

@@ -41,7 +41,7 @@ export default function UserDropdown() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
-          <div className="flex flex-col space-y-1">
+          <div className="flex flex-col space-y-0.5 px-1">
             <div className="text-sm font-medium leading-none dark:text-gray-300">
               <TextWithTooltip
                 text={user?.name}

src/contexts/AnalyticsProvider.tsx

@@ -17,6 +17,12 @@ declare global {
   }
 }
 
+export type HubspotFormField = {
+  objectTypeId?: string;
+  name: string;
+  value: string;
+};
+
 const AnalyticsContext = React.createContext(
   {} as {
     initialized: boolean;

src/contexts/AnnouncementProvider.tsx

@@ -4,7 +4,18 @@ import md5 from "crypto-js/md5";
 import React, { useEffect, useState } from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 
-const initialAnnouncements: Announcement[] = [];
+const initialAnnouncements: Announcement[] = [
+  {
+    tag: "New",
+    text: "NetBird v0.62 Released - Local Users and Simplified IdP Integration",
+    link: "https://netbird.io/knowledge-hub/local-users-simplified-idp",
+    linkText: "Read Release Article",
+    variant: "important", // "default" or "important"
+    isExternal: true,
+    closeable: true,
+    isCloudOnly: false,
+  },
+];
 
 export interface Announcement extends AnnouncementVariant {
   tag: string;

src/contexts/DialogProvider.tsx

@@ -66,6 +66,8 @@ export default function DialogProvider({ children }: Props) {
           <ModalContent
             maxWidthClass={dialogOptions.maxWidthClass || "max-w-[400px]"}
             showClose={false}
+            onInteractOutside={(e) => e.preventDefault()}
+            onPointerDownOutside={(e) => e.preventDefault()}
           >
             <ModalHeader
               center={dialogOptions.type == "center"}

src/contexts/GroupProvider.tsx

@@ -0,0 +1,335 @@
+import { notify } from "@components/Notification";
+import { useApiCall } from "@utils/api";
+import * as React from "react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import { User } from "@/interfaces/User";
+import { EditGroupNameModal } from "@/modules/groups/EditGroupNameModal";
+import { useGroupIdentification } from "@/modules/groups/useGroupIdentification";
+
+type Props = {
+  group: Group;
+  children?: React.ReactNode;
+  isDetailPage?: boolean;
+};
+
+const GroupContext = React.createContext(
+  {} as {
+    group: Group;
+    deleteGroup: () => Promise<void>;
+    renameGroup: (name: string) => Promise<void>;
+    isRegularGroup: boolean;
+    isIntegrationGroup: boolean;
+    isJWTGroup: boolean;
+    isAllowedToDelete: boolean;
+    isAllowedToRename: boolean;
+    openGroupRenameModal?: () => void;
+    addPeersToGroup: (peers: Peer[]) => Promise<void>;
+    removePeersFromGroup: (peer: Peer[]) => Promise<void>;
+    addUsersToGroup: (users: User[]) => Promise<void>;
+    removeUsersFromGroup: (users: User[]) => Promise<void>;
+  },
+);
+
+export const GroupProvider = ({
+  group,
+  children,
+  isDetailPage = true,
+}: Props) => {
+  const { permission } = usePermissions();
+  const [groupNameModal, setGroupNameModal] = useState(false);
+  const { mutate } = useSWRConfig();
+  const { deleteGroupDropdownOption, updateGroupDropdown } = useGroups();
+  const groupRequest = useApiCall<Group>("/groups/" + group.id);
+  const userRequest = useApiCall<User>("/users");
+  const { confirm } = useDialog();
+  const { isRegularGroup, isIntegrationGroup, isJWTGroup } =
+    useGroupIdentification({
+      id: group?.id,
+      issued: group?.issued,
+    });
+
+  const isAllowedToRename = isRegularGroup && permission?.groups?.update;
+  const isAllowedToDelete = !isIntegrationGroup && permission?.groups?.delete;
+
+  const handleDelete = async () => {
+    if (!isAllowedToDelete) return Promise.reject("Not allowed to delete");
+
+    const promise = groupRequest.del().then(() => {
+      deleteGroupDropdownOption(group.name);
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+    });
+
+    notify({
+      title: "Delete Group " + group.name,
+      description: "Group successfully deleted",
+      promise,
+      loadingMessage: "Deleting group...",
+    });
+
+    return promise;
+  };
+
+  const deleteGroup = async () => {
+    const choice = await confirm({
+      title: `Delete '${group.name}'?`,
+      description:
+        "Are you sure you want to delete this group? This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+    if (!choice) return;
+    handleDelete().then();
+  };
+
+  const renameGroup = (name: string) => {
+    if (!isAllowedToRename) return Promise.reject("Not allowed to rename");
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const promise = groupRequest
+      .put({ ...group, peers: currentPeerIds, name })
+      .then(() => {
+        updateGroupDropdown(group.name, { ...group, name });
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: `Rename Group ${group.name}`,
+      description: "Group successfully renamed to " + name,
+      promise,
+      loadingMessage: "Renaming group...",
+    });
+
+    return promise;
+  };
+
+  const removePeersFromGroup = async (peers: Peer[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    const peer = peers.length === 1 ? peers[0] : undefined;
+
+    const choice = await confirm({
+      title: peer
+        ? `Remove peer '${peer.name}' from '${group.name}'?`
+        : `Remove peers from '${group.name}'?`,
+      description: peer
+        ? `Are you sure you want to remove this peer from the group? You can add it back later if needed.`
+        : `Are you sure you want to remove these peers from the group? You can add them back later if needed.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "warning",
+      maxWidthClass: "max-w-lg",
+    });
+
+    if (!choice) return Promise.resolve();
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const newPeerIds = currentPeerIds.filter((pid) => {
+      return !peers.find((peer) => peer.id === pid);
+    });
+    const promise = groupRequest
+      .put({ ...group, peers: newPeerIds })
+      .then(() => {
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: `Remove Peer from Group`,
+      description: peer
+        ? `Peer '${peer.name}' successfully removed from group '${group.name}'`
+        : `Peers successfully removed from group '${group.name}'`,
+      promise,
+      loadingMessage: peer
+        ? "Removing peer from group..."
+        : `Removing peers from group...`,
+    });
+
+    return promise;
+  };
+
+  const addPeersToGroup = async (peers: Peer[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const newPeerIds = [...currentPeerIds, ...peers.map((peer) => peer.id)];
+
+    const uniquePeerIds = Array.from(new Set(newPeerIds));
+
+    const promise = groupRequest
+      .put({ ...group, peers: uniquePeerIds })
+      .then(() => {
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: "Adding peers to group",
+      description: `Peers were successfully added to ${group.name}.`,
+      promise,
+      loadingMessage: "Adding peers to group...",
+    });
+
+    return promise;
+  };
+
+  const removeUserFromGroup = async (
+    user: User,
+    returnOnlyPromise?: boolean,
+  ) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+
+    const currentGroupIds = user.auto_groups?.map((g) => g) || [];
+    const newGroupIds = currentGroupIds.filter((gid) => gid !== group.id);
+    const promise = userRequest
+      .put({ ...user, auto_groups: newGroupIds }, `/${user.id}`)
+      .then(() => {
+        if (returnOnlyPromise) return;
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+        mutate("/users?service_user=false");
+      });
+
+    if (!returnOnlyPromise) {
+      notify({
+        title: `Remove User from Group ${group.name}`,
+        description: `User '${user.name}' was successfully removed from group '${group.name}'.`,
+        promise,
+        loadingMessage: "Removing user from group...",
+      });
+    }
+
+    return promise;
+  };
+
+  const removeUsersFromGroup = async (users: User[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+    let promises = users.map((user) => removeUserFromGroup(user, true));
+
+    const user = users.length === 1 ? users[0] : undefined;
+
+    const choice = await confirm({
+      title: user
+        ? `Remove user '${user?.name ?? user?.id}' from '${group.name}'?`
+        : `Remove users from '${group.name}'?`,
+      description: user
+        ? `Are you sure you want to remove this user from the group? You can add it back later if needed.`
+        : `Are you sure you want to remove these users from the group? You can add them back later if needed.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "warning",
+      maxWidthClass: "max-w-lg",
+    });
+    if (!choice) return Promise.resolve();
+
+    const promise = Promise.all(promises).then(() => {
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+      mutate("/users?service_user=false");
+    });
+    notify({
+      title: `Remove Users from Group ${group.name}`,
+      description: `Users were successfully removed from group '${group.name}'.`,
+      promise,
+      loadingMessage: "Removing users from group...",
+    });
+    return promise;
+  };
+
+  const addUserToGroup = async (user: User, returnOnlyPromise?: boolean) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+    const currentGroupIds = user.auto_groups?.map((g) => g) || [];
+    const newGroupIds = Array.from(new Set([...currentGroupIds, group.id]));
+    const promise = userRequest
+      .put({ ...user, auto_groups: newGroupIds }, `/${user.id}`)
+      .then(() => {
+        if (returnOnlyPromise) return;
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+        mutate("/users?service_user=false");
+      });
+    if (!returnOnlyPromise) {
+      notify({
+        title: `Add User to Group ${group.name}`,
+        description: `User '${user.name}' was successfully added to group '${group.name}'.`,
+        promise,
+        loadingMessage: "Adding user to group...",
+      });
+    }
+    return promise;
+  };
+
+  const addUsersToGroup = async (users: User[]) => {
+    let promises = users.map((user) => addUserToGroup(user, true));
+    const promise = Promise.all(promises).then(() => {
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+      mutate("/users?service_user=false");
+    });
+    notify({
+      title: `Add Users to Group ${group.name}`,
+      description: `Users were successfully added to group '${group.name}'.`,
+      promise,
+      loadingMessage: "Adding users to group...",
+    });
+    return promise;
+  };
+
+  const openGroupRenameModal = () => {
+    if (!isAllowedToRename) return;
+    setGroupNameModal(true);
+  };
+
+  return (
+    <GroupContext.Provider
+      value={{
+        group,
+        deleteGroup,
+        renameGroup,
+        isRegularGroup,
+        isIntegrationGroup,
+        isJWTGroup,
+        isAllowedToDelete,
+        isAllowedToRename,
+        openGroupRenameModal,
+        addPeersToGroup,
+        removePeersFromGroup,
+        addUsersToGroup,
+        removeUsersFromGroup,
+      }}
+    >
+      <EditGroupNameModal
+        initialName={group.name}
+        open={groupNameModal}
+        onOpenChange={setGroupNameModal}
+        onSuccess={(newName) =>
+          renameGroup(newName).then(() => {
+            setGroupNameModal(false);
+          })
+        }
+      />
+      {children}
+    </GroupContext.Provider>
+  );
+};
+
+export const useGroupContext = () => {
+  const context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error("useGroup must be used within a GroupProvider");
+  }
+  return context;
+};