ignore mappin spelling (#408 )

Sync changes with netbird cloud (#407 )
* Update axa oidc library and package.json * Update ACL port state to show correct value * Filter user groups by unique groups only * Add peer multiselect, optimize dropdown performance for peer selection, remove 'all' group from some dropdowns, various ui / ux optimizations * Add peer multiselect, optimize dropdown performance for peer selection, remove 'all' group from some dropdowns, various ui / ux optimizations
2024-08-13 15:59:38 +02:00 · 2024-08-13 15:51:22 +02:00 · 2024-07-31 18:48:59 +02:00 · 2024-07-12 10:35:31 +02:00 · 2024-07-04 15:05:57 +02:00 · 2024-07-04 10:50:37 +02:00
123 changed files with 4637 additions and 1470 deletions
--- a/.github/workflows/codespell.yml
+++ b/.github/workflows/codespell.yml
@@ -12,4 +12,5 @@ jobs:
        uses: codespell-project/actions-codespell@v2
        with:
          only_warn: 1
-          skip: package-lock.json,*.svg
+          skip: package-lock.json,*.svg
+          ignore_words_list: mappin          
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,9 @@ const nextConfig = {
    unoptimized: true,
  },
  reactStrictMode: false,
+  env: {
+    APP_ENV: process.env.APP_ENV || "production",
+  },
 };

 module.exports = nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
      "name": "netbird-dashboard",
      "version": "2.0.0",
      "dependencies": {
-        "@axa-fr/react-oidc": "^5.14.0",
+        "@axa-fr/react-oidc": "^7.22.18",
        "@radix-ui/react-accordion": "^1.1.2",
        "@radix-ui/react-checkbox": "^1.0.4",
        "@radix-ui/react-collapsible": "^1.0.3",
@@ -17,8 +17,9 @@
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-radio-group": "^1.1.3",
-        "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-scroll-area": "^1.1.0",
        "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-slider": "^1.1.2",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
        "@radix-ui/react-tabs": "^1.0.4",
@@ -32,6 +33,7 @@
        "@types/node": "20.10.6",
        "@types/react": "^18",
        "@types/react-dom": "^18",
+        "@types/react-window": "^1.8.8",
        "autoprefixer": "^10",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
@@ -48,7 +50,7 @@
        "framer-motion": "^10.16.4",
        "ip-cidr": "^3.1.0",
        "lodash": "^4.17.21",
-        "lucide-react": "^0.287.0",
+        "lucide-react": "^0.383.0",
        "next": "13.5.5",
        "next-themes": "^0.2.1",
        "punycode": "^2.3.1",
@@ -62,6 +64,7 @@
        "react-jwt": "^1.2.0",
        "react-loading-skeleton": "^3.3.1",
        "react-responsive": "^9.0.2",
+        "react-virtuoso": "^4.9.0",
        "swr": "^2.2.4",
        "tailwind-merge": "^1.14.0",
        "tailwindcss-animate": "^1.0.7",
@@ -93,16 +96,31 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/@axa-fr/react-oidc": {
-      "version": "5.14.2",
-      "resolved": "https://registry.npmjs.org/@axa-fr/react-oidc/-/react-oidc-5.14.2.tgz",
-      "integrity": "sha512-N+ssJlVtVHnsvlusMxY3zLPKCB+lGzeHIxWXUb0WY3uA7Z+jxx7A2m9W1kHbhYzHuihgA3rWIcdKsvtdkeKXwg==",
+    "node_modules/@axa-fr/oidc-client": {
+      "version": "7.22.21",
+      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client/-/oidc-client-7.22.21.tgz",
+      "integrity": "sha512-w6CokGCz9Au0E3bCS5yJCUDlQemGE/TlT8jdN9FltOHI/NUw0Mn/5Rzeh/LOtlo5TIhaOS2nIlCEOY+JEIpj2w==",
+      "hasInstallScript": true,
      "dependencies": {
-        "@openid/appauth": "1.3.1"
+        "@axa-fr/oidc-client-service-worker": "7.22.21"
+      }
+    },
+    "node_modules/@axa-fr/oidc-client-service-worker": {
+      "version": "7.22.21",
+      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client-service-worker/-/oidc-client-service-worker-7.22.21.tgz",
+      "integrity": "sha512-wDZTpRsY36sl4Ah9/ZhzDxybLj46HZjMl7Rn0qLhpK1Sb+GL+d9Agq6xNclkvizDFwuyX6hTaPGQpwcE0WNRQQ=="
+    },
+    "node_modules/@axa-fr/react-oidc": {
+      "version": "7.22.21",
+      "resolved": "https://registry.npmjs.org/@axa-fr/react-oidc/-/react-oidc-7.22.21.tgz",
+      "integrity": "sha512-lEdCt/q7kBXJ1AX+tEK/QAkz4p4G2qOSlhdYxPSSBRIf4ZwZEcmlH6F28W/FySk6tj/coi56dGvmcHz+hSZUDQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@axa-fr/oidc-client": "7.22.21",
+        "@axa-fr/oidc-client-service-worker": "7.22.21"
      },
      "peerDependencies": {
-        "react": "x",
-        "react-dom": "x"
+        "react": "^17.0.0 || ^18.0.0"
      }
    },
    "node_modules/@babel/runtime": {
@@ -542,32 +560,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/@openid/appauth": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@openid/appauth/-/appauth-1.3.1.tgz",
-      "integrity": "sha512-e54kpi219wES2ijPzeHe1kMnT8VKH8YeTd1GAn9BzVBmutz3tBgcG1y8a4pziNr4vNjFnuD4W446Ua7ELnNDiA==",
-      "dependencies": {
-        "@types/base64-js": "^1.3.0",
-        "@types/jquery": "^3.5.5",
-        "base64-js": "^1.5.1",
-        "follow-redirects": "^1.13.3",
-        "form-data": "^4.0.0",
-        "opener": "^1.5.2"
-      }
-    },
-    "node_modules/@openid/appauth/node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
    "node_modules/@popperjs/core": {
      "version": "2.11.8",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -1202,26 +1194,25 @@
      }
    },
    "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
-      "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz",
+      "integrity": "sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==",
      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.1",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
      },
      "peerDependencies": {
        "@types/react": "*",
        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
@@ -1232,6 +1223,148 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-select": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
@@ -1275,6 +1408,230 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.0.tgz",
+      "integrity": "sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-slot": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -1658,24 +2015,11 @@
        "url": "https://github.com/sponsors/tannerlinsley"
      }
    },
-    "node_modules/@types/base64-js": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.3.2.tgz",
-      "integrity": "sha512-Q2Xn2/vQHRGLRXhQ5+BSLwhHkR3JVflxVKywH0Q6fVoAiUE8fFYL2pE5/l2ZiOiBDfA8qUqRnSxln4G/NFz1Sg=="
-    },
    "node_modules/@types/crypto-js": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
    },
-    "node_modules/@types/jquery": {
-      "version": "3.5.29",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
-      "integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==",
-      "dependencies": {
-        "@types/sizzle": "*"
-      }
-    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1717,6 +2061,14 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.8",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -1731,7 +2083,8 @@
    "node_modules/@types/sizzle": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
-      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg=="
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "dev": true
    },
    "node_modules/@types/yauzl": {
      "version": "2.10.3",
@@ -2187,7 +2540,8 @@
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
@@ -2285,6 +2639,7 @@
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -2927,6 +3282,7 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
@@ -3170,6 +3526,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
      "engines": {
        "node": ">=0.4.0"
      }
@@ -4057,25 +4414,6 @@
        "tailwindcss": "^3"
      }
    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -5351,9 +5689,9 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.287.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.287.0.tgz",
-      "integrity": "sha512-auxP2bTGiMoELzX+6ItTeNzLmhGd/O+PHBsrXV2YwPXYCxarIFJhiMOSzFT9a1GWeYPSZtnWdLr79IVXr/5JqQ==",
+      "version": "0.383.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.383.0.tgz",
+      "integrity": "sha512-13xlG0CQCJtzjSQYwwJ3WRqMHtRj3EXmLlorrARt7y+IHnxUCp3XyFNL1DfaGySWxHObDvnu1u1dV+0VMKHUSg==",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
      }
@@ -5396,6 +5734,7 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -5404,6 +5743,7 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -5712,14 +6052,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-      "bin": {
-        "opener": "bin/opener-bin.js"
-      }
-    },
    "node_modules/optionator": {
      "version": "0.9.3",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -6346,6 +6678,18 @@
        }
      }
    },
+    "node_modules/react-virtuoso": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.10.0.tgz",
+      "integrity": "sha512-CyxU5TYMH4bw2cybH0bNqN/yIg2q2Vd0kbs92tQc5ResZALAIzIVJY4JL6BHgJFQjwrLhCYrFwKq0p+lvBgA0w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
    "cypress:open": "cypress open"
  },
  "dependencies": {
-    "@axa-fr/react-oidc": "^5.14.0",
+    "@axa-fr/react-oidc": "^7.22.18",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
@@ -22,8 +22,9 @@
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
@@ -37,6 +38,7 @@
    "@types/node": "20.10.6",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "@types/react-window": "^1.8.8",
    "autoprefixer": "^10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
@@ -53,7 +55,7 @@
    "framer-motion": "^10.16.4",
    "ip-cidr": "^3.1.0",
    "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
+    "lucide-react": "^0.383.0",
    "next": "13.5.5",
    "next-themes": "^0.2.1",
    "punycode": "^2.3.1",
@@ -67,6 +69,7 @@
    "react-jwt": "^1.2.0",
    "react-loading-skeleton": "^3.3.1",
    "react-responsive": "^9.0.2",
+    "react-virtuoso": "^4.9.0",
    "swr": "^2.2.4",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -23,6 +23,7 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
@@ -57,6 +58,8 @@ import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
+import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
+import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
 import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
@@ -64,8 +67,11 @@ import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
 export default function PeerPage() {
  const queryParameter = useSearchParams();
  const peerId = queryParameter.get("id");
-  const { data: peer } = useFetchApi<Peer>("/peers/" + peerId);
-  return peer ? (
+  const { data: peer, isLoading } = useFetchApi<Peer>("/peers/" + peerId, true);
+
+  useRedirect("/peers", false, !peerId);
+
+  return peer && !isLoading ? (
    <PeerProvider peer={peer}>
      <PeerOverview />
    </PeerProvider>
@@ -127,6 +133,7 @@ function PeerOverview() {
  };

  const { isUser } = useLoggedInUser();
+  const hasExitNodes = useHasExitNodes(peer);

  return (
    <PageContainer>
@@ -320,6 +327,7 @@ function PeerOverview() {
                    disabled={isUser}
                    onChange={setSelectedGroups}
                    values={selectedGroups}
+                    hideAllGroup={true}
                    peer={peer}
                  />
                </FullTooltip>
@@ -342,7 +350,8 @@ function PeerOverview() {
                  </Paragraph>
                </div>
                <div className={"inline-flex gap-4 justify-end"}>
-                  <div>
+                  <div className={"gap-4 flex"}>
+                    <AddExitNodeButton peer={peer} firstTime={!hasExitNodes} />
                    <AddRouteDropdownButton />
                  </div>
                </div>
--- a/src/app/(dashboard)/peers/page.tsx
+++ b/src/app/(dashboard)/peers/page.tsx
@@ -4,13 +4,12 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
-import useFetchApi from "@utils/api";
+import { usePortalElement } from "@hooks/usePortalElement";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useGroups } from "@/contexts/GroupsProvider";
+import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
 import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
-import { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";

@@ -21,24 +20,22 @@ export default function Peers() {

  return (
    <PageContainer>
-      {permission?.dashboard_view === "blocked" ? (
+      {permission.dashboard_view === "blocked" ? (
        <PeersBlockedView />
      ) : (
-        <PeersView />
+        <PeersProvider>
+          <PeersView />
+        </PeersProvider>
      )}
    </PageContainer>
  );
 }

 function PeersView() {
-  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
+  const { peers, isLoading } = usePeers();
  const { users } = useUsers();
-  const { refresh } = useGroups();
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();

  const peersWithUser = peers?.map((peer) => {
    if (!users) return peer;
@@ -58,7 +55,7 @@ function PeersView() {
            icon={<PeerIcon size={13} />}
          />
        </Breadcrumbs>
-        <h1>{peers && peers.length > 1 ? `${peers.length} Peers` : "Peers"}</h1>
+        <h1 ref={headingRef}>Peers</h1>
        <Paragraph>
          A list of all machines and devices connected to your private network.
          Use this view to manage peers.
@@ -76,7 +73,11 @@ function PeersView() {
        </Paragraph>
      </div>
      <Suspense fallback={<SkeletonTable />}>
-        <PeersTable isLoading={isLoading} peers={peersWithUser} />
+        <PeersTable
+          isLoading={isLoading}
+          peers={peersWithUser}
+          headingTarget={portalTarget}
+        />
      </Suspense>
    </>
  );
--- a/src/app/(dashboard)/setup-keys/page.tsx
+++ b/src/app/(dashboard)/setup-keys/page.tsx
@@ -7,7 +7,7 @@ import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useMemo } from "react";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { Group } from "@/interfaces/Group";
@@ -22,16 +22,21 @@ export default function SetupKeys() {
  const { data: setupKeys, isLoading } = useFetchApi<SetupKey[]>("/setup-keys");
  const { groups } = useGroups();

-  const setupKeysWithGroups = setupKeys?.map((setupKey) => {
-    if (!setupKey.auto_groups) return setupKey;
-    if (!groups) return setupKey;
-    return {
-      ...setupKey,
-      groups: setupKey.auto_groups.map((group) => {
-        return groups.find((g) => g.id === group) || undefined;
-      }) as Group[] | undefined,
-    };
-  });
+  const setupKeysWithGroups = useMemo(() => {
+    if (!setupKeys) return [];
+    return setupKeys?.map((setupKey) => {
+      if (!setupKey.auto_groups) return setupKey;
+      if (!groups) return setupKey;
+      return {
+        ...setupKey,
+        groups: setupKey.auto_groups
+          ?.map((group) => {
+            return groups.find((g) => g.id === group) || undefined;
+          })
+          .filter((group) => group !== undefined) as Group[],
+      };
+    });
+  }, [setupKeys, groups]);

  return (
    <PageContainer>
--- a/src/app/(dashboard)/team/user/page.tsx
+++ b/src/app/(dashboard)/team/user/page.tsx
@@ -10,6 +10,7 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import useRedirect from "@hooks/useRedirect";
 import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
@@ -42,6 +43,8 @@ export default function UserPage() {
    return users?.find((u) => u.id === userId);
  }, [users, userId]);

+  useRedirect("/team/users", false, !userId);
+
  return !isLoading && user ? (
    <UserOverview user={user} />
  ) : (
@@ -184,7 +187,7 @@ function UserOverview({ user }: Props) {
          )}
        </div>

-        <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
+        <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 && (
@@ -197,6 +200,7 @@ function UserOverview({ user }: Props) {
                  disabled={isUser}
                  onChange={setSelectedGroups}
                  values={selectedGroups}
+                  hideAllGroup={true}
                />
              </div>
            )}
@@ -211,6 +215,8 @@ function UserOverview({ user }: Props) {
                <UserRoleSelector
                  value={role}
                  onChange={setRole}
+                  hideOwner={user.is_service_user}
+                  currentUser={user}
                  disabled={
                    isLoggedInUser ||
                    !isOwnerOrAdmin ||
@@ -298,15 +304,18 @@ function UserInformationCard({ user }: { user: User }) {

        {!isServiceUser && (
          <>
-            <Card.ListItem
-              label={
-                <>
-                  <Ban size={16} />
-                  Block User
-                </>
-              }
-              value={<UserBlockCell user={user} isUserPage={true} />}
-            />
+            {!user.is_current && user.role != Role.Owner && (
+              <Card.ListItem
+                label={
+                  <>
+                    <Ban size={16} />
+                    Block User
+                  </>
+                }
+                value={<UserBlockCell user={user} isUserPage={true} />}
+              />
+            )}
+
            <Card.ListItem
              label={
                <>
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -68,4 +68,9 @@ p {

 .stepper-bg-variant .step-circle {
    @apply !border-[#1d2024];
+}
+
+.webkit-scroll{
+    -webkit-overflow-scrolling: touch;
+    -webkit-transform: translate3d(0, 0, 0);
 }
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,14 +1,40 @@
 "use client";

 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useLocalStorage } from "@hooks/useLocalStorage";
+import { useRedirect } from "@hooks/useRedirect";
+import { useEffect, useState } from "react";

+type Props = {
+  url: string;
+  queryParams?: string;
+};
 export default function NotFound() {
-  const router = useRouter();
-  useEffect(() => {
-    router.push("/peers");
-  });
+  const [mounted, setMounted] = useState(false);
+  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
+    "netbird-query-params",
+    "",
+  );
+  const [queryParams, setQueryParams] = useState("");

-  return <FullScreenLoading />;
+  useEffect(() => {
+    setQueryParams(tempQueryParams);
+    setTempQueryParams("");
+    setMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return mounted ? (
+    <Redirect
+      url={window?.location?.pathname || "/"}
+      queryParams={queryParams}
+    />
+  ) : (
+    <FullScreenLoading />
+  );
 }
+
+const Redirect = ({ url, queryParams }: Props) => {
+  useRedirect("/peers" + (queryParams && `?${queryParams}`));
+  return <FullScreenLoading />;
+};
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,41 @@
 "use client";

 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useLocalStorage } from "@hooks/useLocalStorage";
 import { useRedirect } from "@hooks/useRedirect";
+import { useEffect, useState } from "react";
+
+type Props = {
+  url: string;
+  queryParams?: string;
+};

 export default function Home() {
-  useRedirect("/peers");
-  return <FullScreenLoading />;
+  const [mounted, setMounted] = useState(false);
+  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
+    "netbird-query-params",
+    "",
+  );
+  const [queryParams, setQueryParams] = useState("");
+
+  useEffect(() => {
+    setQueryParams(tempQueryParams);
+    setTempQueryParams("");
+    setMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return mounted ? (
+    <Redirect
+      url={window?.location?.pathname || "/"}
+      queryParams={queryParams}
+    />
+  ) : (
+    <FullScreenLoading />
+  );
 }
+
+const Redirect = ({ url, queryParams }: Props) => {
+  useRedirect(url == "/" ? "/peers" : url + (queryParams && `?${queryParams}`));
+  return <FullScreenLoading />;
+};
--- a/src/assets/countries/CountryDERounded.tsx
+++ b/src/assets/countries/CountryDERounded.tsx
@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import deIcon from "@/assets/countries/de.svg";
-
-export const CountryDERounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={deIcon}
-        alt={"de"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};
--- a/src/assets/countries/CountryEURounded.tsx
+++ b/src/assets/countries/CountryEURounded.tsx
@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import euIcon from "@/assets/countries/eu.svg";
-
-export const CountryEURounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={euIcon}
-        alt={"eu"}
-        fill={true}
-        className={"object-cover object-center shrink-0"}
-      />
-    </div>
-  );
-};
--- a/src/assets/countries/CountryJPRounded.tsx
+++ b/src/assets/countries/CountryJPRounded.tsx
@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import jpIcon from "@/assets/countries/jp.svg";
-
-export const CountryJPRounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={jpIcon}
-        alt={"eu"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};
--- a/src/assets/countries/CountryUSRounded.tsx
+++ b/src/assets/countries/CountryUSRounded.tsx
@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import usIcon from "@/assets/countries/us.svg";
-
-export const CountryUSRounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={usIcon}
-        alt={"us"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};
--- a/src/assets/countries/de.svg
+++ b/src/assets/countries/de.svg
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
-	<desc>Flag of Germany</desc>
-	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
-	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
-	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
-</svg>
--- a/src/assets/countries/eu.svg
+++ b/src/assets/countries/eu.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540"><defs><g id="d"><g id="b"><path id="a" d="M0 0v1h.5z" transform="rotate(18 3.157 -.5)"/><use xlink:href="#a" transform="scale(-1 1)"/></g><g id="c"><use xlink:href="#b" transform="rotate(72)"/><use xlink:href="#b" transform="rotate(144)"/></g><use xlink:href="#c" transform="scale(-1 1)"/></g></defs><path fill="#039" d="M0 0h810v540H0z"/><g fill="#fc0" transform="matrix(30 0 0 30 405 270)"><use xlink:href="#d" y="-6"/><use xlink:href="#d" y="6"/><g id="e"><use xlink:href="#d" x="-6"/><use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use xlink:href="#e" transform="scale(-1 1)"/></g></svg>
--- a/src/assets/countries/jp.svg
+++ b/src/assets/countries/jp.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
-<rect fill="#fff" height="600" width="900"/>
-<circle fill="#bc002d" cx="450" cy="300" r="180"/>
-</svg>
--- a/src/assets/countries/us.svg
+++ b/src/assets/countries/us.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7410 3900"><path fill="#b22234" d="M0 0h7410v3900H0z"/><path d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0" stroke="#fff" stroke-width="300"/><path fill="#3c3b6e" d="M0 0h2964v2100H0z"/><g fill="#fff"><g id="d"><g id="c"><g id="e"><g id="b"><path id="a" d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"/><use xlink:href="#a" y="420"/><use xlink:href="#a" y="840"/><use xlink:href="#a" y="1260"/></g><use xlink:href="#a" y="1680"/></g><use xlink:href="#b" x="247" y="210"/></g><use xlink:href="#c" x="494"/></g><use xlink:href="#d" x="988"/><use xlink:href="#c" x="1976"/><use xlink:href="#e" x="2470"/></g></svg>
--- a/src/assets/fonts/Inter.ttf
+++ b/src/assets/fonts/Inter.ttf
--- a/src/assets/icons/CircleIcon.tsx
+++ b/src/assets/icons/CircleIcon.tsx
@@ -16,6 +16,8 @@ export default function CircleIcon({
  return (
    <span
      style={{ width: size + "px", height: size + "px" }}
+      data-cy="circle-icon"
+      data-cy-status={active ? "active" : "inactive"}
      className={cn(
        "rounded-full",
        active
--- a/src/assets/os-icons/FreeBSD.png
+++ b/src/assets/os-icons/FreeBSD.png
--- a/src/auth/OIDCError.tsx
+++ b/src/auth/OIDCError.tsx
@@ -2,7 +2,7 @@ import { useOidc, useOidcUser } from "@axa-fr/react-oidc";
 import Button from "@components/Button";
 import Paragraph from "@components/Paragraph";
 import loadConfig from "@utils/config";
-import { ArrowRightIcon, LogOut } from "lucide-react";
+import { ArrowRightIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
 import { useEffect, useState } from "react";
@@ -55,7 +55,7 @@ export const OIDCError = () => {
            variant={"primary"}
            size={"sm"}
            className={"mt-5"}
-            onClick={() => login("/", { client_id: config.clientId })}
+            onClick={() => logout("/", { client_id: config.clientId })}
          >
            Continue
            <ArrowRightIcon size={16} />
@@ -83,7 +83,6 @@ export const OIDCError = () => {
            onClick={() => logout("/", { client_id: config.clientId })}
          >
            Logout
-            <LogOut size={16} />
          </Button>
        </>
      )}
--- a/src/auth/OIDCProvider.tsx
+++ b/src/auth/OIDCProvider.tsx
@@ -1,11 +1,12 @@
 "use client";

-import { OidcProvider } from "@axa-fr/react-oidc";
 import {
  AuthorityConfiguration,
  OidcConfiguration,
-} from "@axa-fr/react-oidc/dist/vanilla/oidc";
+  OidcProvider,
+} 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";
@@ -29,7 +30,7 @@ const auth0AuthorityConfig: AuthorityConfiguration = {
  revocation_endpoint: new URL("oauth/revoke", config.authority).href,
  end_session_endpoint: new URL("v2/logout", config.authority).href,
  userinfo_endpoint: new URL("userinfo", config.authority).href,
-  //issuer: new URL("", config.authority).href,
+  issuer: new URL("", config.authority).href,
 };

 const onEvent = (configurationName: any, eventName: any, data: any) => {
@@ -43,6 +44,19 @@ export default function OIDCProvider({ children }: Props) {
  const [mounted, setMounted] = useState(false);
  const router = useRouter();
  const path = usePathname();
+  const params = useSearchParams()?.toString();
+  const [, setQueryParams] = useLocalStorage("netbird-query-params", params);
+
+  useEffect(() => {
+    if (
+      params?.includes("tab") ||
+      params?.includes("search") ||
+      params?.includes("id")
+    ) {
+      setQueryParams(params);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  const withCustomHistory = () => {
    return {
--- a/src/auth/SecureProvider.tsx
+++ b/src/auth/SecureProvider.tsx
@@ -11,9 +11,17 @@ export const SecureProvider = ({ children }: Props) => {
  const currentPath = usePathname();

  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined = undefined;
    if (!isAuthenticated) {
-      login(currentPath);
+      timeout = setTimeout(async () => {
+        if (!isAuthenticated) {
+          await login(currentPath);
+        }
+      }, 1500);
    }
+    return () => {
+      clearTimeout(timeout);
+    };
  }, [currentPath, isAuthenticated, login]);

  return (
--- a/src/components/ButtonGroup.tsx
+++ b/src/components/ButtonGroup.tsx
@@ -5,14 +5,16 @@ import React, { forwardRef } from "react";
 type Props = {
  children: React.ReactNode;
  disabled?: boolean;
+  className?: string;
 };

-function ButtonGroup({ children, disabled }: Props) {
+function ButtonGroup({ children, disabled, className }: Props) {
  return (
    <div
      className={cn(
        "rounded-lg border-[1px] dark:border-nb-gray-900 border-neutral-200 overflow-hidden flex items-center justify-center shrink-0 border-separate",
        disabled ? "opacity-100 !border-nb-gray-900/20" : "",
+        className,
      )}
    >
      {children}
@@ -21,7 +23,10 @@ function ButtonGroup({ children, disabled }: Props) {
 }

 const ButtonGroupButton = forwardRef(
-  ({ ...props }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  (
+    { className, ...props }: ButtonProps,
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
    return (
      <Button
        ref={ref}
@@ -31,6 +36,7 @@ const ButtonGroupButton = forwardRef(
        className={cn(
          "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[41px]",
          "!py-2.5 !px-4",
+          className,
        )}
      />
    );
--- a/src/components/DropdownInfoText.tsx
+++ b/src/components/DropdownInfoText.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const DropdownInfoText = ({ children }: Props) => {
+  return (
+    <div className={"text-center pt-2 mb-6 text-nb-gray-400"}>{children}</div>
+  );
+};
--- a/src/components/DropdownInput.tsx
+++ b/src/components/DropdownInput.tsx
@@ -0,0 +1,48 @@
+import { IconArrowBack } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { forwardRef } from "react";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+export const DropdownInput = forwardRef<HTMLInputElement, Props>(
+  ({ value, onChange, placeholder = "Search..." }, ref) => {
+    return (
+      <div className={"relative w-full"}>
+        <input
+          ref={ref}
+          className={cn(
+            "min-h-[42px] w-full relative",
+            "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
+            "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
+            "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
+          )}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+        />
+        <div className={"absolute left-0 top-0 h-full flex items-center pl-4"}>
+          <div className={"flex items-center"}>
+            <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>
+    );
+  },
+);
+
+DropdownInput.displayName = "DropdownInput";
--- a/src/components/HelpText.tsx
+++ b/src/components/HelpText.tsx
@@ -12,14 +12,14 @@ export default function HelpText({
  className,
 }: Props) {
  return (
-    <p
+    <span
      className={cn(
-        "text-[.8rem] dark:text-nb-gray-300",
+        "text-[.8rem] dark:text-nb-gray-300 block font-light tracking-wide",
        margin && "mb-2",
        className,
      )}
    >
      {children}
-    </p>
+    </span>
  );
 }
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -13,6 +13,7 @@ export interface InputProps
  icon?: React.ReactNode;
  error?: string;
  errorTooltip?: boolean;
+  errorTooltipPosition?: "top" | "top-right";
 }

 const inputVariants = cva("", {
@@ -49,6 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      maxWidthClass = "",
      error,
      errorTooltip = false,
+      errorTooltipPosition = "top",
      ...props
    },
    ref,
@@ -105,9 +107,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
          </div>
          {error && errorTooltip && (
            <div
-              className={
-                "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center"
-              }
+              className={cn(
+                errorTooltipPosition == "top" &&
+                  "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center",
+                errorTooltipPosition == "top-right" &&
+                  "absolute -right-6 top-2 h-[0px] w-full flex items-center pr-3 justify-end",
+              )}
            >
              <FullTooltip
                content={
@@ -120,7 +125,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                  </div>
                }
                interactive={false}
-                align={"center"}
+                align={errorTooltipPosition == "top" ? "center" : "end"}
                side={"top"}
                keepOpen={true}
              >
--- a/src/components/NetworkRouteSelector.tsx
+++ b/src/components/NetworkRouteSelector.tsx
@@ -1,5 +1,7 @@
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
@@ -62,8 +64,13 @@ export function NetworkRouteSelector({
    const isSearching = search.length > 0;
    const found =
      dropdownOptions.filter((item) => {
+        const hasDomains = item?.domains ? item.domains.length > 0 : false;
+        const domains =
+          hasDomains && item?.domains ? item?.domains.join(" ") : "";
        return (
-          item.network_id.includes(search) || item.network.includes(search)
+          item.network_id.includes(search) ||
+          item.network?.includes(search) ||
+          domains.includes(search)
        );
      }).length > 0;
    return isSearching && !found;
@@ -102,12 +109,12 @@ export function NetworkRouteSelector({
            {value ? (
              <div
                className={
-                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1"
+                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1 gap-2"
                }
              >
                <div className={"flex items-center gap-2.5 text-sm"}>
                  <NetworkRoutesIcon size={16} />
-                  {value.network_id}
+                  <TextWithTooltip text={value.network_id} maxChars={15} />
                </div>

                <div
@@ -117,6 +124,7 @@ export function NetworkRouteSelector({
                >
                  {value.network}
                </div>
+                <DomainList domains={value?.domains} />
              </div>
            ) : (
              <span>Select an existing network...</span>
@@ -208,15 +216,23 @@ export function NetworkRouteSelector({
                    return (
                      <CommandItem
                        key={option.network + option.network_id}
-                        value={option.network + option.network_id}
+                        value={
+                          option.network +
+                          option.network_id +
+                          option?.domains?.join(", ")
+                        }
                        onSelect={() => {
                          togglePeer(option);
                          setOpen(false);
                        }}
+                        className={"gap-2"}
                      >
                        <div className={"flex items-center gap-2.5 text-sm"}>
                          <NetworkRoutesIcon size={14} />
-                          {option.network_id}
+                          <TextWithTooltip
+                            text={option.network_id}
+                            maxChars={15}
+                          />
                        </div>

                        <div
@@ -226,6 +242,7 @@ export function NetworkRouteSelector({
                        >
                          {option.network}
                        </div>
+                        <DomainList domains={option?.domains} />
                      </CommandItem>
                    );
                  })}
@@ -238,3 +255,23 @@ export function NetworkRouteSelector({
    </Popover>
  );
 }
+
+function DomainList({ domains }: { domains?: string[] }) {
+  const firstDomain = domains ? domains[0] : "";
+  return (
+    domains &&
+    domains.length > 0 && (
+      <FullTooltip
+        content={<div className={"text-xs max-w-sm"}>{domains.join(", ")}</div>}
+      >
+        <div
+          className={
+            "text-xs text-nb-gray-300 block min-w-0 truncate max-w-[180px]"
+          }
+        >
+          {firstDomain} {domains.length > 1 && "+" + (domains.length - 1)}
+        </div>
+      </FullTooltip>
+    )
+  );
+}
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -1,3 +1,4 @@
+import { IconCircleX } from "@tabler/icons-react";
 import type { ErrorResponse } from "@utils/api";
 import { cn } from "@utils/helpers";
 import classNames from "classnames";
@@ -88,7 +89,7 @@ export default function Notification<T>({
              {loading ? (
                <Loader2 size={14} className={"animate-spin"} />
              ) : error ? (
-                <XIcon size={14} />
+                <IconCircleX size={24} />
              ) : (
                icon || <CheckIcon size={14} />
              )}
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -29,6 +29,7 @@ interface MultiSelectProps {
  max?: number;
  disabled?: boolean;
  popoverWidth?: "auto" | number;
+  hideAllGroup?: boolean;
 }
 export function PeerGroupSelector({
  onChange,
@@ -37,6 +38,7 @@ export function PeerGroupSelector({
  max,
  disabled = false,
  popoverWidth = "auto",
+  hideAllGroup = false,
 }: MultiSelectProps) {
  const { groups, dropdownOptions, setDropdownOptions } = useGroups();
  const searchRef = React.useRef<HTMLInputElement>(null);
@@ -47,7 +49,13 @@ export function PeerGroupSelector({
  useEffect(() => {
    if (!groups) return;
    const sortedGroups = sortBy([...groups], "name") as Group[];
-    setDropdownOptions(unionBy(sortedGroups, dropdownOptions, "name"));
+
+    let uniqueGroups = unionBy(sortedGroups, dropdownOptions, "name");
+    uniqueGroups = hideAllGroup
+      ? uniqueGroups.filter((group) => group.name !== "All")
+      : uniqueGroups;
+
+    setDropdownOptions(uniqueGroups);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [groups]);

@@ -66,8 +74,11 @@ export function PeerGroupSelector({
    const option = dropdownOptions.find((option) => option.name == name);
    const groupPeers: GroupPeer[] | undefined =
      (group?.peers as GroupPeer[]) || [];
-    groupPeers &&
-      groupPeers.push({ id: peer?.id as string, name: peer?.name as string });
+
+    if (peer) {
+      groupPeers &&
+        groupPeers.push({ id: peer?.id as string, name: peer?.name as string });
+    }

    if (!group && !option) {
      setDropdownOptions((previous) => [
@@ -100,17 +111,18 @@ export function PeerGroupSelector({
    const isSearching = search.length > 0;
    const groupDoesNotExist =
      dropdownOptions.filter((item) => item.name == trim(search)).length == 0;
-    return isSearching && groupDoesNotExist;
+    const isAllGroup = search.toLowerCase() == "all";
+    return isSearching && groupDoesNotExist && !isAllGroup;
  }, [search, dropdownOptions]);

  const [open, setOpen] = useState(false);

  const folderIcon = useMemo(() => {
-    return <FolderGit2 size={12} />;
+    return <FolderGit2 size={12} className={"shrink-0"} />;
  }, []);

  const peerIcon = useMemo(() => {
-    return <MonitorSmartphoneIcon size={14} />;
+    return <MonitorSmartphoneIcon size={14} className={"shrink-0"} />;
  }, []);

  const [slice, setSlice] = useState(10);
@@ -198,11 +210,12 @@ export function PeerGroupSelector({
          <CommandList className={"w-full"}>
            <div className={"relative"}>
              <CommandInput
+                data-cy={"group-search-input"}
                className={cn(
                  "min-h-[42px] w-full relative",
                  "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
                  "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
+                  "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
                )}
                ref={searchRef}
                value={search}
@@ -237,9 +250,7 @@ export function PeerGroupSelector({

            <CommandGroup>
              <ScrollArea
-                className={
-                  "max-h-[195px]  overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                }
+                className={"max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3"}
              >
                {searchedGroupNotFound && (
                  <CommandItem
--- a/src/components/PeerSelector.tsx
+++ b/src/components/PeerSelector.tsx
@@ -1,21 +1,31 @@
-import { CommandItem } from "@components/Command";
+import { DropdownInfoText } from "@components/DropdownInfoText";
+import { DropdownInput } from "@components/DropdownInput";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
-import { ScrollArea } from "@components/ScrollArea";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { IconArrowBack } from "@tabler/icons-react";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { useSearch } from "@hooks/useSearch";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
-import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
-import { sortBy, trim, unionBy } from "lodash";
-import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
+import { sortBy, unionBy } from "lodash";
+import { ChevronsUpDown, MapPin } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { FcLinux } from "react-icons/fc";
 import { useElementSize } from "@/hooks/useElementSize";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";

+const MapPinIcon = memo(() => <MapPin size={12} />);
+MapPinIcon.displayName = "MapPinIcon";
+
+const LinuxIcon = memo(() => (
+  <span className={"grayscale brightness-[100%] contrast-[40%]"}>
+    <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
+  </span>
+));
+LinuxIcon.displayName = "LinuxIcon";
+
 interface MultiSelectProps {
  value?: Peer;
  onChange: React.Dispatch<React.SetStateAction<Peer | undefined>>;
@@ -23,6 +33,13 @@ interface MultiSelectProps {
  disabled?: boolean;
 }

+const searchPredicate = (item: Peer, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  if (item.hostname.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.ip.toLowerCase().startsWith(lowerCaseQuery);
+};
+
 export function PeerSelector({
  onChange,
  value,
@@ -30,13 +47,16 @@ export function PeerSelector({
  disabled = false,
 }: MultiSelectProps) {
  const { data: peers } = useFetchApi<Peer[]>("/peers");
-
-  const [dropdownOptions, setDropdownOptions] = useState<Peer[]>([]);
-  const searchRef = React.useRef<HTMLInputElement>(null);
  const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
-  const [search, setSearch] = useState("");

-  // Update dropdown options when peers change
+  const [unfilteredItems, setUnfilteredItems] = useState<Peer[]>([]);
+  const [filteredItems, search, setSearch] = useSearch(
+    unfilteredItems,
+    searchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  // Update unfiltered items when peers change
  useEffect(() => {
    if (!peers) return;

@@ -56,7 +76,7 @@ export function PeerSelector({
      });
    }

-    setDropdownOptions(unionBy(options, dropdownOptions, "id"));
+    setUnfilteredItems(unionBy(options, unfilteredItems, "id"));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [peers]);

@@ -68,44 +88,11 @@ export function PeerSelector({
      onChange(peer);
      setSearch("");
    }
+    setOpen(false);
  };

-  const peerNotFound = useMemo(() => {
-    const isSearching = search.length > 0;
-
-    // Search peer by ip or name
-    const peerFound =
-      dropdownOptions.filter((item) => {
-        return (
-          item.name.includes(search) ||
-          item.hostname.includes(search) ||
-          item.ip.includes(search)
-        );
-      }).length > 0;
-
-    return isSearching && !peerFound;
-  }, [search, dropdownOptions]);
-
  const [open, setOpen] = useState(false);

-  const [slice, setSlice] = useState(10);
-
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setSlice(dropdownOptions.length);
-      }, 100);
-    } else {
-      setSlice(10);
-    }
-  }, [open, dropdownOptions]);
-
-  const LinuxIcon = (
-    <span className={"grayscale brightness-[100%] contrast-[40%]"}>
-      <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
-    </span>
-  );
-
  return (
    <Popover
      open={open}
@@ -121,7 +108,7 @@ export function PeerSelector({
      <PopoverTrigger asChild>
        <button
          className={cn(
-            "min-h-[42px] w-full relative items-center group",
+            "min-h-[46px] w-full relative items-center group",
            "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer enabled:hover:dark:bg-nb-gray-900/50",
            "disabled:opacity-40 disabled:cursor-default",
@@ -141,7 +128,7 @@ export function PeerSelector({
                }
              >
                <div className={"flex items-center gap-2.5 text-sm"}>
-                  {LinuxIcon}
+                  <LinuxIcon />
                  <TextWithTooltip text={value.name} maxChars={20} />
                </div>

@@ -150,7 +137,7 @@ export function PeerSelector({
                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
                  }
                >
-                  <MapPin size={12} />
+                  <MapPinIcon />
                  {value.ip}
                </div>
              </div>
@@ -168,113 +155,67 @@ export function PeerSelector({
        style={{
          width: width,
        }}
-        forceMount={true}
        align="start"
        side={"top"}
        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;
-          }}
-        >
-          <CommandList className={"w-full"}>
-            <div className={"relative"}>
-              <CommandInput
-                className={cn(
-                  "min-h-[42px] w-full relative",
-                  "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
-                  "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
-                )}
-                ref={searchRef}
-                value={search}
-                onValueChange={setSearch}
-                placeholder={"Search for peers by name or ip..."}
-              />
-              <div
-                className={
-                  "absolute left-0 top-0 h-full flex items-center pl-4"
-                }
-              >
-                <div className={"flex items-center"}>
-                  <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>
+        <div className={"w-full"}>
+          <DropdownInput
+            value={search}
+            onChange={setSearch}
+            placeholder={"Search for peers by name or ip..."}
+          />

-            <div className={""}>
-              {dropdownOptions.length == 0 && !peerNotFound && (
-                <div
-                  className={
-                    "text-center pb-2 text-nb-gray-500 max-w-xs mx-auto"
-                  }
-                >
-                  {
-                    "Seems like you don't have any linux peers to assign as a routing peer."
-                  }
-                </div>
-              )}
-              {peerNotFound && (
-                <div className={"text-center pb-2 text-nb-gray-500"}>
-                  There are no peers matching your search.
-                </div>
-              )}
-              <CommandGroup>
-                <ScrollArea
-                  className={
-                    "max-h-[180px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                  }
-                >
-                  {dropdownOptions.slice(0, slice).map((option) => {
-                    return (
-                      <CommandItem
-                        key={option.name}
-                        value={option.name + option.id}
-                        onSelect={() => {
-                          togglePeer(option);
-                          setOpen(false);
-                        }}
-                      >
-                        <div className={"flex items-center gap-2.5 text-sm"}>
-                          {LinuxIcon}
-                          <TextWithTooltip text={option.name} maxChars={20} />
-                        </div>
+          {unfilteredItems.length == 0 && (
+            <DropdownInfoText>
+              {
+                "Seems like you don't have any linux peers to assign as a routing peer."
+              }
+            </DropdownInfoText>
+          )}

-                        <div
-                          className={
-                            "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
-                          }
-                        >
-                          <MapPin size={12} />
-                          {option.ip}
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                </ScrollArea>
-              </CommandGroup>
-            </div>
-          </CommandList>
-        </Command>
+          {filteredItems.length == 0 && (
+            <DropdownInfoText>
+              There are no peers matching your search.
+            </DropdownInfoText>
+          )}
+
+          {filteredItems.length > 0 && (
+            <VirtualScrollAreaList
+              items={filteredItems}
+              onSelect={togglePeer}
+              renderItem={(option) => {
+                return (
+                  <>
+                    <div
+                      className={cn(
+                        "flex items-center gap-2.5 text-sm",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                      )}
+                    >
+                      <LinuxIcon />
+                      <TextWithTooltip text={option.name} maxChars={20} />
+                    </div>
+
+                    <div
+                      className={cn(
+                        "font-medium flex items-center gap-1 font-mono text-[10px]",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                      )}
+                    >
+                      <MapPinIcon />
+                      {option.ip}
+                    </div>
+                  </>
+                );
+              }}
+            />
+          )}
+        </div>
      </PopoverContent>
    </Popover>
  );
--- a/src/components/ScrollArea.tsx
+++ b/src/components/ScrollArea.tsx
@@ -4,30 +4,65 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@utils/helpers";
 import * as React from "react";

+type AdditionalScrollAreaProps = {
+  withoutViewport?: boolean;
+};
+
 const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+    AdditionalScrollAreaProps
+>(({ className, children, withoutViewport = false, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn(
+      "relative overflow-hidden will-change-scroll webkit-scroll",
+      className,
+    )}
    {...props}
  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+    {withoutViewport ? (
+      children
+    ) : (
+      <ScrollAreaViewport disableOverflowY={false}>
+        {children}
+      </ScrollAreaViewport>
+    )}
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

+type AdditionalScrollAreaViewportProps = {
+  disableOverflowY?: boolean;
+};
+
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> &
+    AdditionalScrollAreaViewportProps
+>(({ disableOverflowY = true, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Viewport
+      ref={ref}
+      className="h-full w-full rounded-[inherit] will-change-scroll webkit-scroll"
+      {...props}
+      style={
+        disableOverflowY ? { overflowY: undefined, ...props.style } : undefined
+      }
+    />
+  );
+});
+ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+
 const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
+    style={{ boxSizing: "unset", overflow: undefined }}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
@@ -49,4 +84,15 @@ const ScrollBar = React.forwardRef<
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

-export { ScrollArea, ScrollBar };
+const MemoizedScrollArea = React.memo(ScrollArea);
+const MemoizedScrollAreaViewport = React.memo(ScrollAreaViewport);
+const MemoizedScrollBar = React.memo(ScrollBar);
+
+export {
+  MemoizedScrollArea,
+  MemoizedScrollAreaViewport,
+  MemoizedScrollBar,
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+};
--- a/src/components/SegmentedTabs.tsx
+++ b/src/components/SegmentedTabs.tsx
@@ -21,12 +21,19 @@ function SegmentedTabs({ value, onChange, children }: Props) {
  );
 }

-function List({ children }: { children: React.ReactNode }) {
+function List({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
  return (
    <TabsList
-      className={
-        "bg-nb-gray-930/70 p-1.5 rounded-t-lg flex justify-center gap-1 border border-b-0 border-nb-gray-900"
-      }
+      className={cn(
+        "bg-nb-gray-930/70 p-1.5 rounded-t-lg flex justify-center gap-1 border border-b-0 border-nb-gray-900",
+        className,
+      )}
    >
      {children}
    </TabsList>
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@utils/helpers";
+import React from "react";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
+      <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-neutral-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
--- a/src/components/SquareIcon.tsx
+++ b/src/components/SquareIcon.tsx
@@ -15,6 +15,7 @@ const iconVariant = cva(
        green: "bg-green-950 border-green-500 text-green-500",
        purple: "bg-purple-950 border-purple-500 text-purple-500",
        indigo: "bg-indigo-950 border-indigo-500 text-indigo-500",
+        yellow: "bg-yellow-950 border-yellow-400 text-yellow-400",
      },
      size: {
        small: "w-8 h-8",
--- a/src/components/VirtualScrollAreaList.tsx
+++ b/src/components/VirtualScrollAreaList.tsx
@@ -0,0 +1,132 @@
+import {
+  MemoizedScrollArea,
+  MemoizedScrollAreaViewport,
+} from "@components/ScrollArea";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+
+type Props<T extends { id?: string }> = {
+  items: T[];
+  onSelect: (item: T) => void;
+  renderItem?: (item: T) => React.ReactNode;
+};
+
+export function VirtualScrollAreaList<T extends { id?: string }>({
+  items,
+  onSelect,
+  renderItem,
+}: Props<T>) {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    setSelected(0);
+  }, [items]);
+
+  const scrollToItem = useCallback((index: number) => {
+    virtuosoRef.current?.scrollIntoView({
+      index,
+      behavior: "auto",
+      align: "center",
+    });
+  }, []);
+
+  const navigation = useCallback(
+    (e: KeyboardEvent) => {
+      if (items.length === 0) return;
+      const length = items.length - 1;
+      if (e.code === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+        e.preventDefault();
+        const newSelected = selected === 0 ? length : selected - 1;
+        setSelected(newSelected);
+        scrollToItem(newSelected);
+      } else if (e.key === "ArrowDown" || e.key === "Tab") {
+        e.preventDefault();
+        const newSelected = selected === length ? 0 : selected + 1;
+        setSelected(newSelected);
+        scrollToItem(newSelected);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onSelect?.(items[selected]);
+      }
+    },
+    [items, scrollToItem, selected],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", navigation);
+    return () => {
+      window.removeEventListener("keydown", navigation);
+    };
+  }, [navigation]);
+
+  const renderMemoizedItem = useMemo(() => renderItem, [renderItem]);
+
+  return (
+    <MemoizedScrollArea
+      withoutViewport={true}
+      className={"max-h-[195px] flex flex-col gap-1 py-2"}
+    >
+      <Virtuoso
+        ref={virtuosoRef}
+        overscan={50}
+        data={items}
+        computeItemKey={(index) => items[index].id as string}
+        context={{ selected, setSelected, onClick: onSelect }}
+        itemContent={(index, option, { selected, setSelected, onClick }) => {
+          return (
+            <VirtualScrollListItemWrapper
+              onMouseEnter={() => setSelected(index)}
+              id={option.id}
+              onClick={() => onClick(option as T)}
+              ariaSelected={selected === index}
+            >
+              {renderMemoizedItem ? renderMemoizedItem(option) : option.id}
+            </VirtualScrollListItemWrapper>
+          );
+        }}
+        style={{ height: 195 }}
+        components={{
+          Scroller: MemoizedScrollAreaViewport,
+        }}
+      />
+    </MemoizedScrollArea>
+  );
+}
+
+type ItemWrapperProps = {
+  children: React.ReactNode;
+  id?: string;
+  onMouseEnter?: () => void;
+  onClick?: () => void;
+  ariaSelected?: boolean;
+};
+
+export const VirtualScrollListItemWrapper = memo(
+  ({ id, children, onClick, onMouseEnter, ariaSelected }: ItemWrapperProps) => {
+    return (
+      <div
+        key={id ?? undefined}
+        className={"pr-3 pl-2 webkit-scroll"}
+        onMouseEnter={onMouseEnter}
+        onClick={onClick}
+      >
+        <div
+          className={cn(
+            "text-xs flex justify-between py-2 px-3 cursor-pointer items-center rounded-md",
+            "bg-transparent dark:aria-selected:bg-nb-gray-800/50",
+          )}
+          aria-selected={ariaSelected}
+          role={"listitem"}
+          tabIndex={0}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+VirtualScrollListItemWrapper.displayName = "VirtualScrollListItemWrapper";
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -75,7 +75,10 @@ const ModalContent = React.forwardRef<
          <>
            {children}
            {showClose && (
-              <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
+              <DialogPrimitive.Close
+                data-cy={"modal-close"}
+                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+              >
                <X className="h-4 w-4" />
                <span className="sr-only">Close</span>
              </DialogPrimitive.Close>
--- a/src/components/modal/ModalHeader.tsx
+++ b/src/components/modal/ModalHeader.tsx
@@ -9,6 +9,8 @@ interface Props extends IconVariant {
  description: string | React.ReactNode;
  className?: string;
  margin?: string;
+  truncate?: boolean;
+  children?: React.ReactNode;
 }
 export default function ModalHeader({
  icon,
@@ -17,14 +19,24 @@ export default function ModalHeader({
  color = "netbird",
  className = "pb-6 px-8",
  margin = "mt-0",
+  truncate = false,
+  children,
 }: Props) {
  return (
-    <div className={className}>
-      <div className={"flex items-start gap-5 pr-10"}>
+    <div className={cn(className, "min-w-0")}>
+      <div className={"flex items-start gap-5 pr-10 min-w-0"}>
        {icon && <SquareIcon color={color} icon={icon} />}
-        <div>
+        <div className={"min-w-0"}>
          <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
-          <Paragraph className={cn("text-sm", margin)}>{description}</Paragraph>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <Paragraph
+              className={cn("text-sm", margin, truncate && "!block truncate")}
+            >
+              {description}
+            </Paragraph>
+          )}
        </div>
      </div>
    </div>
--- a/src/components/select/SelectDropdown.tsx
+++ b/src/components/select/SelectDropdown.tsx
@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import { CommandItem } from "@components/Command";
+import Paragraph from "@components/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
 import { SelectDropdownSearchInput } from "@components/select/SelectDropdownSearchInput";
@@ -31,6 +32,7 @@ interface SelectDropdownProps {
  popoverWidth?: "auto" | number;
  options: SelectOption[];
  showSearch?: boolean;
+  showValues?: boolean;
  placeholder?: string;
  searchPlaceholder?: string;
  isLoading?: boolean;
@@ -43,6 +45,7 @@ export function SelectDropdown({
  popoverWidth = "auto",
  options,
  showSearch = false,
+  showValues = false,
  placeholder = "Select...",
  searchPlaceholder = "Search...",
  isLoading = false,
@@ -186,6 +189,7 @@ export function SelectDropdown({
                      option={option}
                      toggle={toggle}
                      key={option.value}
+                      showValue={showValues}
                    />
                  ))}
                </div>
@@ -201,9 +205,11 @@ export function SelectDropdown({
 const SelectDropdownItem = ({
  option,
  toggle,
+  showValue = false,
 }: {
  option: SelectOption;
  toggle: (value: string) => void;
+  showValue?: boolean;
 }) => {
  const value = option.value || "" + option.label || "";
  const elementRef = useRef<HTMLDivElement>(null);
@@ -233,6 +239,13 @@ const SelectDropdownItem = ({
              <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")}>
+                {option.value}
+              </Paragraph>
+            </div>
+          )}
        </CommandItem>
      ) : (
        <div className={"h-[35px] py-1 px-2"}></div>
--- a/src/components/table/DataTable.tsx
+++ b/src/components/table/DataTable.tsx
@@ -1,6 +1,7 @@
 "use client";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
+import { DataTableHeadingPortal } from "@components/table/DataTableHeadingPortal";
 import { DataTablePagination } from "@components/table/DataTablePagination";
 import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
@@ -28,6 +29,7 @@ import {
  getSortedRowModel,
  PaginationState,
  Row,
+  RowSelectionState,
  SortingState,
  Table as TanStackTable,
  useReactTable,
@@ -55,11 +57,15 @@ declare module "@tanstack/table-core" {
 }

 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
-  const val = row.getValue(columnId);
-  if (!val) return false;
-  if (typeof val !== "string") return false;
-  const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
-  return val.toLowerCase().includes(lowerCaseValue);
+  try {
+    const val = row.getValue(columnId);
+    if (!val) return false;
+    if (typeof val !== "string") return false;
+    const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
+    return val.toLowerCase().includes(lowerCaseValue);
+  } catch (e) {
+    return false;
+  }
 };

 const exactMatch: FilterFn<any> = (row, columnId, value) => {
@@ -101,6 +107,7 @@ interface DataTableProps<TData, TValue> {
  aboveTable?: (table: TanStackTable<TData>) => React.ReactNode;
  searchPlaceholder?: string;
  columnVisibility?: VisibilityState;
+  setColumnVisibility?: React.Dispatch<React.SetStateAction<VisibilityState>>;
  sorting?: SortingState;
  setSorting?: React.Dispatch<React.SetStateAction<SortingState>>;
  text?: string;
@@ -122,6 +129,11 @@ interface DataTableProps<TData, TValue> {
  rightSide?: (table: TanStackTable<TData>) => React.ReactNode;
  manualPagination?: boolean;
  showHeader?: boolean;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: React.Dispatch<React.SetStateAction<RowSelectionState>>;
+  useRowId?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+  showResetFilterButton?: boolean;
 }

 export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
@@ -135,6 +147,7 @@ export function DataTableContent<TData, TValue>({
  children,
  searchPlaceholder = "Search...",
  columnVisibility = {},
+  setColumnVisibility,
  sorting = [],
  setSorting,
  text = "rows",
@@ -155,6 +168,11 @@ export function DataTableContent<TData, TValue>({
  rightSide,
  manualPagination = false,
  showHeader = true,
+  rowSelection,
+  setRowSelection,
+  useRowId,
+  headingTarget,
+  showResetFilterButton = true,
 }: DataTableProps<TData, TValue>) {
  const path = usePathname();
  const [columnFilters, setColumnFilters] = useLocalStorage<ColumnFiltersState>(
@@ -172,9 +190,6 @@ export function DataTableContent<TData, TValue>({
      pageSize: 10,
    });

-  const [tableColumnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>(columnVisibility);
-
  const hasInitialData = !!(data && data.length > 0);

  const table = useReactTable({
@@ -192,8 +207,9 @@ export function DataTableContent<TData, TValue>({
    manualPagination: manualPagination,
    state: {
      sorting,
+      rowSelection: rowSelection ?? {},
      columnFilters,
-      columnVisibility: tableColumnVisibility,
+      columnVisibility: columnVisibility,
      globalFilter: globalSearch,
      pagination: paginationState,
    },
@@ -203,6 +219,8 @@ export function DataTableContent<TData, TValue>({
        pageSize: 10,
      },
    },
+    getRowId: useRowId ? (row) => row.id : undefined,
+    onRowSelectionChange: setRowSelection,
    onSortingChange: setSorting,
    onPaginationChange: setPaginationState,
    onColumnFiltersChange: setColumnFilters,
@@ -231,6 +249,7 @@ export function DataTableContent<TData, TValue>({
    table.setPageIndex(0);
    setColumnFilters([]);
    setGlobalSearch("");
+    setRowSelection?.({});
  };

  return (
@@ -244,11 +263,14 @@ export function DataTableContent<TData, TValue>({
            setGlobalSearch={(val) => {
              table.setPageIndex(0);
              setGlobalSearch(val);
+              setRowSelection?.({});
            }}
            placeholder={searchPlaceholder}
          />
          {children && children(table)}
-          <DataTableResetFilterButton onClick={resetFilters} table={table} />
+          {showResetFilterButton && (
+            <DataTableResetFilterButton onClick={resetFilters} table={table} />
+          )}
          <div className={"flex gap-4 flex-wrap grow"}>
            <div className={"flex gap-4 flex-wrap"}></div>
            {rightSide && rightSide(table)}
@@ -408,6 +430,11 @@ export function DataTableContent<TData, TValue>({
      <div className={paginationClassName}>
        <DataTablePagination table={table} text={text} />
      </div>
+      <DataTableHeadingPortal
+        table={table}
+        headingTarget={headingTarget}
+        text={text}
+      />
    </div>
  );
 }
--- a/src/components/table/DataTableHeadingPortal.tsx
+++ b/src/components/table/DataTableHeadingPortal.tsx
@@ -0,0 +1,73 @@
+import { Table } from "@tanstack/react-table";
+import * as React from "react";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+
+type Props<TData> = {
+  table: Table<TData> | null;
+  headingTarget?: HTMLHeadingElement | null;
+  text: string;
+};
+export const DataTableHeadingPortal = function <TData>({
+  table,
+  headingTarget,
+  text = "Items",
+}: Props<TData>) {
+  const hasMounted = useRef(false);
+
+  if (!headingTarget) return;
+
+  if (!hasMounted.current) {
+    headingTarget.innerHTML = "";
+    hasMounted.current = true;
+  }
+
+  const totalItems = table?.getPreFilteredRowModel().rows.length;
+  const filteredItems = table?.getFilteredRowModel().rows.length;
+
+  const hasAnyFiltersActive =
+    table &&
+    !(
+      table?.getState().columnFilters.length <= 0 &&
+      table?.getState().globalFilter === ""
+    );
+
+  return createPortal(
+    <Heading
+      text={text}
+      hasAnyFilterActive={hasAnyFiltersActive}
+      totalItems={totalItems}
+      filteredItems={filteredItems}
+    />,
+    headingTarget,
+  );
+};
+
+type HeadingProps = {
+  hasAnyFilterActive: boolean | null;
+  filteredItems?: number;
+  totalItems?: number;
+  text: string;
+};
+
+const Heading = ({
+  hasAnyFilterActive,
+  filteredItems,
+  totalItems,
+  text,
+}: HeadingProps) => {
+  if (!totalItems || totalItems == 1) {
+    return text;
+  }
+
+  if (hasAnyFilterActive) {
+    return (
+      <>
+        <span className={"text-netbird"}>{filteredItems}</span> of {totalItems}{" "}
+        {text}
+      </>
+    );
+  }
+
+  return `${totalItems} ${text}`;
+};
--- a/src/components/table/DataTableRowsPerPage.tsx
+++ b/src/components/table/DataTableRowsPerPage.tsx
@@ -28,9 +28,10 @@ export function DataTableRowsPerPage<TData>({
            role="combobox"
            aria-expanded={open}
            disabled={disabled}
+            data-cy={"rows-per-page"}
            className="w-[200px] justify-between"
          >
-            <RowsIcon size={15} className={"text-nb-gray-300"} />
+            <RowsIcon size={15} className={"text-nb-gray-300 shrink-0"} />
            <div>
              <span className={"text-white"}>
                {table.getState().pagination.pageSize}
@@ -47,6 +48,7 @@ export function DataTableRowsPerPage<TData>({
                <CommandItem
                  key={val}
                  value={val.toString()}
+                  data-cy={`rows-per-page-value`}
                  onSelect={(currentValue) => {
                    table.setPageSize(Number(currentValue));
                    setOpen(false);
--- a/src/components/ui/DomainListBadge.tsx
+++ b/src/components/ui/DomainListBadge.tsx
@@ -0,0 +1,70 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { GlobeIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  domains: string[];
+};
+export const DomainListBadge = ({ domains }: Props) => {
+  const firstDomain = domains.length > 0 ? domains[0] : undefined;
+
+  return (
+    <DomainsTooltip domains={domains}>
+      <div className={"inline-flex items-center gap-2"}>
+        {firstDomain && (
+          <Badge variant={"gray"}>
+            <GlobeIcon size={10} />
+            {firstDomain}
+          </Badge>
+        )}
+        {domains && domains.length > 1 && (
+          <Badge variant={"gray"}>+ {domains.length - 1}</Badge>
+        )}
+      </div>
+    </DomainsTooltip>
+  );
+};
+
+export const DomainsTooltip = ({
+  domains,
+  children,
+  className,
+}: {
+  domains: string[];
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <FullTooltip
+      interactive={false}
+      className={className}
+      content={
+        <div className={"flex flex-col gap-2 items-start"}>
+          {domains.map((domain) => {
+            return (
+              domain && (
+                <div
+                  key={domain}
+                  className={"flex gap-2 items-center justify-between w-full"}
+                >
+                  <div
+                    className={
+                      "flex gap-2 items-center text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <GlobeIcon size={11} />
+                    {domain}
+                  </div>
+                </div>
+              )
+            );
+          })}
+        </div>
+      }
+      disabled={domains.length <= 1}
+    >
+      {children}
+    </FullTooltip>
+  );
+};
--- a/src/components/ui/GroupBadge.tsx
+++ b/src/components/ui/GroupBadge.tsx
@@ -21,14 +21,17 @@ export default function GroupBadge({
 }: Props) {
  return (
    <Badge
-      key={group.name}
+      key={group.id}
      useHover={true}
      variant={"gray-ghost"}
      className={cn("transition-all group whitespace-nowrap", className)}
-      onClick={onClick}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.();
+      }}
    >
      <FolderGit2 size={12} className={"shrink-0"} />
-      <TextWithTooltip text={group.name} maxChars={20} />
+      <TextWithTooltip text={group?.name || ""} maxChars={20} />
      {children}
      {showX && (
        <XIcon
--- a/src/components/ui/InputDomain.tsx
+++ b/src/components/ui/InputDomain.tsx
@@ -0,0 +1,88 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import { validator } from "@utils/helpers";
+import { uniqueId } from "lodash";
+import { GlobeIcon, MinusCircleIcon } from "lucide-react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Domain } from "@/interfaces/Domain";
+
+type Props = {
+  value: Domain;
+  onChange: (d: Domain) => void;
+  onRemove: () => void;
+  onError?: (error: boolean) => void;
+  error?: string;
+};
+enum ActionType {
+  ADD = "ADD",
+  REMOVE = "REMOVE",
+  UPDATE = "UPDATE",
+}
+
+export const domainReducer = (state: Domain[], action: any): Domain[] => {
+  switch (action.type) {
+    case ActionType.ADD:
+      return [...state, { name: "", id: uniqueId("domain") }];
+    case ActionType.REMOVE:
+      return state.filter((_, i) => i !== action.index);
+    case ActionType.UPDATE:
+      return state.map((n, i) => (i === action.index ? action.d : n));
+    default:
+      return state;
+  }
+};
+
+export default function InputDomain({
+  value,
+  onChange,
+  onRemove,
+  onError,
+}: Readonly<Props>) {
+  const [name, setName] = useState(value?.name || "");
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+    onChange({ ...value, name: e.target.value });
+  };
+
+  const domainError = useMemo(() => {
+    if (name == "") {
+      return "";
+    }
+    const valid = validator.isValidDomain(name);
+    if (!valid) {
+      return "Please enter a valid domain, e.g. example.com or intra.example.com";
+    }
+  }, [name]);
+
+  useEffect(() => {
+    const hasError = domainError !== "" && domainError !== undefined;
+    onError?.(hasError);
+    return () => onError?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [domainError]);
+
+  return (
+    <div className={"flex gap-2 w-full"}>
+      <div className={"w-full"}>
+        <Input
+          customPrefix={<GlobeIcon size={15} />}
+          placeholder={"e.g., example.com"}
+          maxWidthClass={"w-full"}
+          value={name}
+          error={domainError}
+          onChange={handleNameChange}
+        />
+      </div>
+
+      <Button
+        className={"h-[42px]"}
+        variant={"default-outline"}
+        onClick={onRemove}
+      >
+        <MinusCircleIcon size={15} />
+      </Button>
+    </div>
+  );
+}
--- a/src/components/ui/TextWithTooltip.tsx
+++ b/src/components/ui/TextWithTooltip.tsx
@@ -24,14 +24,21 @@ export default function TextWithTooltip({
    <FullTooltip
      disabled={charCount <= maxChars || hideTooltip}
      interactive={false}
-      className={"truncate w-full"}
+      className={"truncate w-full min-w-0"}
      content={
-        <div className={"max-w-xs break-all whitespace-normal"}>{text}</div>
+        <div className={"max-w-xs break-all whitespace-normal text-xs"}>
+          {text}
+        </div>
      }
    >
-      <span className={cn(className, "truncate")}>
-        {charCount > maxChars ? text && `${text.slice(0, maxChars)}...` : text}
-      </span>
+      <div
+        className={"w-full min-w-0 inline-block"}
+        style={{
+          maxWidth: `${maxChars - 2}ch`,
+        }}
+      >
+        <div className={cn(className, "truncate")}>{text}</div>
+      </div>
    </FullTooltip>
  );
 }
--- a/src/contexts/DialogProvider.tsx
+++ b/src/contexts/DialogProvider.tsx
@@ -94,6 +94,7 @@ export default function DialogProvider({ children }: Props) {
                  className={"w-full"}
                  size={"sm"}
                  tabIndex={-1}
+                  data-cy={"confirmation.cancel"}
                  onClick={() => fn.current && fn.current(false)}
                >
                  {dialogOptions.cancelText || "Cancel"}
@@ -109,6 +110,7 @@ export default function DialogProvider({ children }: Props) {
                }
                className={"w-full"}
                size={"sm"}
+                data-cy={"confirmation.confirm"}
                onClick={() => fn.current && fn.current(true)}
              >
                {dialogOptions.confirmText || "Confirm"}
--- a/src/contexts/PeerProvider.tsx
+++ b/src/contexts/PeerProvider.tsx
@@ -77,9 +77,7 @@ export default function PeerProvider({ children, peer }: Props) {
            ? loginExpiration
            : peer.login_expiration_enabled,
        approval_required:
-          approval_required != undefined
-            ? approval_required
-            : peer.approval_required,
+          approval_required == undefined ? undefined : approval_required,
      },
      `/${peer.id}`,
    );
--- a/src/contexts/PeersProvider.tsx
+++ b/src/contexts/PeersProvider.tsx
@@ -1,5 +1,5 @@
 import useFetchApi from "@utils/api";
-import React from "react";
+import React, { useMemo } from "react";
 import type { Peer } from "@/interfaces/Peer";

 type Props = {
@@ -9,15 +9,21 @@ type Props = {
 const PeerContext = React.createContext(
  {} as {
    peers: Peer[] | undefined;
+    isLoading: boolean;
  },
 );

-export default function PeersProvider({ children }: Props) {
-  const { data: peers } = useFetchApi<Peer[]>("/peers");
+export default function PeersProvider({ children }: Readonly<Props>) {
+  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");

-  return (
-    <PeerContext.Provider value={{ peers }}>{children}</PeerContext.Provider>
-  );
+  const data = useMemo(() => {
+    return {
+      peers,
+      isLoading,
+    };
+  }, [peers, isLoading]);
+
+  return <PeerContext.Provider value={data}>{children}</PeerContext.Provider>;
 }

 export const usePeers = () => React.useContext(PeerContext);
--- a/src/contexts/RoutesProvider.tsx
+++ b/src/contexts/RoutesProvider.tsx
@@ -25,7 +25,7 @@ const RoutesContext = React.createContext(
 );

 export default function RoutesProvider({ children }: Props) {
-  const routeRequest = useApiCall<Route>("/routes");
+  const routeRequest = useApiCall<Route>("/routes", true);
  const { mutate } = useSWRConfig();

  const updateRoute = async (
@@ -34,6 +34,8 @@ export default function RoutesProvider({ children }: Props) {
    onSuccess?: (route: Route) => void,
    message?: string,
  ) => {
+    const hasDomains = route.domains ? route.domains.length > 0 : false;
+
    notify({
      title: "Network " + route.network_id + "-" + route.network,
      description: message
@@ -48,7 +50,9 @@ export default function RoutesProvider({ children }: Props) {
            peer: toUpdate.peer ?? (route.peer || undefined),
            peer_groups:
              toUpdate.peer_groups ?? (route.peer_groups || undefined),
-            network: route.network,
+            network: !hasDomains ? route.network : undefined,
+            domains: hasDomains ? route.domains : undefined,
+            keep_route: route.keep_route,
            metric: toUpdate.metric ?? route.metric ?? 9999,
            masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
            groups: toUpdate.groups ?? route.groups ?? [],
@@ -80,7 +84,9 @@ export default function RoutesProvider({ children }: Props) {
          enabled: route.enabled,
          peer: route.peer || undefined,
          peer_groups: route.peer_groups || undefined,
-          network: route.network,
+          network: route?.network || undefined,
+          domains: route?.domains || undefined,
+          keep_route: route?.keep_route || false,
          metric: route.metric || 9999,
          masquerade: route.masquerade,
          groups: route.groups || [],
--- a/src/hooks/useOperatingSystem.ts
+++ b/src/hooks/useOperatingSystem.ts
@@ -2,6 +2,10 @@

 import { OperatingSystem } from "@/interfaces/OperatingSystem";

+/**
+ * Get the operating system of the user based on the user agent of the browser
+ * This is used for the setup modal to show the correct installation guide
+ */
 export default function useOperatingSystem() {
  const isBrowser = typeof window !== "undefined";
  const userAgent = isBrowser ? navigator.userAgent.toLowerCase() : "";
@@ -9,16 +13,26 @@ export default function useOperatingSystem() {
    ? /(iP*)/g.test(navigator.userAgent) && navigator.maxTouchPoints > 2
    : false;
  if (iOS) return OperatingSystem.IOS;
+  // For FreeBSD, we return Linux as we currently don't have an official installation guide for FreeBSD
+  if (userAgent.toLowerCase().includes("freebsd")) return OperatingSystem.LINUX;
  return getOperatingSystem(userAgent);
 }

+/**
+ * Get the operating system based on a string (user agent, api response, etc.)
+ * Falls back to Linux if the operating system is not recognized
+ */
 export const getOperatingSystem = (os: string) => {
+  if (os.toLowerCase().includes("freebsd"))
+    return OperatingSystem.FREEBSD as const;
  if (os.toLowerCase().includes("darwin"))
    return OperatingSystem.APPLE as const;
  if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const;
  if (os.toLowerCase().includes("android"))
    return OperatingSystem.ANDROID as const;
  if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("ipad")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("iphone")) return OperatingSystem.IOS as const;
  if (os.toLowerCase().includes("windows"))
    return OperatingSystem.WINDOWS as const;
  return OperatingSystem.LINUX as const;
--- a/src/hooks/usePortalElement.tsx
+++ b/src/hooks/usePortalElement.tsx
@@ -0,0 +1,12 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function usePortalElement<Element>() {
+  const ref = useRef<Element>(null);
+  const [portalTarget, setPortalTarget] = useState<Element | null>(null);
+
+  useLayoutEffect(() => {
+    setPortalTarget(ref.current);
+  }, []);
+
+  return { ref, portalTarget, setPortalTarget };
+}
--- a/src/hooks/usePrevious.ts
+++ b/src/hooks/usePrevious.ts
@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default usePrevious;
--- a/src/hooks/useRedirect.tsx
+++ b/src/hooks/useRedirect.tsx
@@ -1,8 +1,9 @@
 import loadConfig from "@utils/config";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";

 const config = loadConfig();
+
 export const useRedirect = (
  url: string,
  replace: boolean = false,
@@ -10,24 +11,43 @@ export const useRedirect = (
 ) => {
  const router = useRouter();
  const currentPath = usePathname();
-  const callBackUrls = [config.redirectURI, config.silentRedirectURI];
+  const callBackUrls = useRef([config.redirectURI, config.silentRedirectURI]);
+  const isRedirecting = useRef(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
-    if (!enable) return;
-    if (callBackUrls.includes(url)) return; // Don't redirect to the callback urls to avoid infinite loop
-    if (url === currentPath) return; // Don't redirect to the current page
+    // If redirect is disabled or the url is already in the callback urls or the url is the current path then do not redirect
+    if (!enable || callBackUrls.current.includes(url) || url === currentPath)
+      return;

-    const redirect = replace ? router.replace : router.push; // Replace the current history or add a new one
+    const performRedirect = () => {
+      if (!isRedirecting.current) {
+        isRedirecting.current = true;
+        router.refresh();
+        if (replace) {
+          router.replace(url);
+        } else {
+          router.push(url);
+        }
+        isRedirecting.current = false;
+      }
+    };

-    router.refresh();
-    redirect(url);
+    performRedirect();

-    // Timer in case the user has his browser tab open but not focused
-    const interval = setInterval(() => {
-      router.refresh();
-      redirect(url);
-    }, 1000);
+    // Try to redirect after 1.25 seconds if for whatever reason the redirect did not happen (network change, browser tab open but not focused etc.)
+    intervalRef.current = setInterval(() => {
+      if (!isRedirecting.current) {
+        performRedirect();
+      }
+    }, 1250);

-    return () => clearInterval(interval);
-  }, [replace, router, url, enable]);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [replace, router, url, enable, currentPath]);
 };
+
+export default useRedirect;
--- a/src/hooks/useSearch.ts
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,91 @@
+import { debounce as lodashDebounce, isEqual } from "lodash";
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import usePrevious from "./usePrevious";
+
+export type Predicate<T> = (item: T, query: string) => boolean;
+
+export interface Options {
+  initialQuery?: string;
+  filter?: boolean;
+  debounce?: number;
+}
+
+function filterCollection<T>(
+  collection: T[],
+  predicate: Predicate<T>,
+  query: string,
+  filter: boolean,
+): T[] {
+  if (query) {
+    return collection.filter((item) => predicate(item, query));
+  } else {
+    return filter ? collection : [];
+  }
+}
+
+export function useSearch<T>(
+  collection: T[],
+  predicate: Predicate<T>,
+  { debounce, filter = false, initialQuery = "" }: Options = {},
+): [
+  T[],
+  string,
+  (event: ChangeEvent<HTMLInputElement> | string) => void,
+  (querty: string) => void,
+] {
+  const isMounted = useRef<boolean>(false);
+  const [query, setQuery] = useState<string>(initialQuery);
+  const prevCollection = usePrevious(collection);
+  const prevPredicate = usePrevious(predicate);
+  const prevQuery = usePrevious(query);
+  const prevFilter = usePrevious(filter);
+  const [filteredCollection, setFilteredCollection] = useState<T[]>(() =>
+    filterCollection<T>(collection, predicate, query, filter),
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement> | string) => {
+      setQuery(typeof event === "string" ? event : event.target.value);
+    },
+    [setQuery],
+  );
+
+  const debouncedFilterCollection = useCallback(
+    lodashDebounce(
+      (
+        collection: T[],
+        predicate: Predicate<T>,
+        query: string,
+        filter: boolean,
+      ) => {
+        if (isMounted.current) {
+          setFilteredCollection(
+            filterCollection(collection, predicate, query, filter),
+          );
+        }
+      },
+      debounce,
+    ),
+    [debounce],
+  );
+
+  useEffect(() => {
+    if (
+      !isEqual(collection, prevCollection) ||
+      !isEqual(predicate, prevPredicate) ||
+      !isEqual(query, prevQuery) ||
+      !isEqual(filter, prevFilter)
+    )
+      debouncedFilterCollection(collection, predicate, query, filter);
+  }, [collection, predicate, query, filter]);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return [filteredCollection, query, handleChange, setQuery];
+}
--- a/src/interfaces/Domain.ts
+++ b/src/interfaces/Domain.ts
@@ -0,0 +1,4 @@
+export interface Domain {
+  id?: string;
+  name: string;
+}
--- a/src/interfaces/Nameserver.ts
+++ b/src/interfaces/Nameserver.ts
@@ -17,11 +17,6 @@ export interface Nameserver {
  id?: string;
 }

-export interface Domain {
-  id?: string;
-  name: string;
-}
-
 export const NameserverPresets: Record<string, NameserverGroup> = {
  Default: {
    name: "",
--- a/src/interfaces/OperatingSystem.ts
+++ b/src/interfaces/OperatingSystem.ts
@@ -6,4 +6,5 @@ export enum OperatingSystem {
  DOCKER,
  IOS,
  UNKNOWN,
+  FREEBSD,
 }
--- a/src/interfaces/PostureCheck.ts
+++ b/src/interfaces/PostureCheck.ts
@@ -10,6 +10,7 @@ export interface PostureCheck {
    os_version_check?: OperatingSystemVersionCheck;
    geo_location_check?: GeoLocationCheck;
    peer_network_range_check?: PeerNetworkRangeCheck;
+    process_check?: ProcessCheck;
  };
  policies?: Policy[];
  active?: boolean;
@@ -53,6 +54,17 @@ export interface PeerNetworkRangeCheck {
  action: "allow" | "deny";
 }

+export interface ProcessCheck {
+  processes: Process[];
+}
+
+export interface Process {
+  id: string;
+  linux_path?: string;
+  mac_path?: string;
+  windows_path?: string;
+}
+
 export const windowsKernelVersions: SelectOption[] = [
  { value: "5.0", label: "Windows 2000" },
  { value: "5.1", label: "Windows XP" },
--- a/src/interfaces/Route.ts
+++ b/src/interfaces/Route.ts
@@ -3,26 +3,34 @@ export interface Route {
  description: string;
  enabled: boolean;
  peer?: string;
-  network: string;
+  network?: string;
+  domains?: string[];
  network_id: string;
  network_type?: string;
  metric?: number;
  masquerade: boolean;
  groups: string[];
+  keep_route?: boolean;
+  // Frontend only
  peer_groups?: string[];
  routesGroups?: string[];
  groupedRoutes?: GroupedRoute[];
  group_names?: string[];
+  domain_search?: string;
 }

 export interface GroupedRoute {
  id: string;
  enabled: boolean;
-  network: string;
+  network?: string;
+  domains?: string[];
+  keep_route?: boolean;
  network_id: string;
  high_availability_count: number;
  is_using_route_groups: boolean;
  routes?: Route[];
  group_names?: string[];
  description?: string;
+  description_search?: string;
+  domain_search?: string;
 }
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -6,7 +6,7 @@ import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { Viewport } from "next/dist/lib/metadata/types/extra-types";
-import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import React from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
@@ -16,7 +16,10 @@ import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
 import { NavigationEvents } from "@/contexts/NavigationEvents";

-const inter = Inter({ subsets: ["latin"] });
+const inter = localFont({
+  src: "../assets/fonts/Inter.ttf",
+  display: "swap",
+});

 // Extend dayjs with relativeTime plugin
 dayjs.extend(relativeTime);
--- a/src/modules/access-control/AccessControlModal.tsx
+++ b/src/modules/access-control/AccessControlModal.tsx
@@ -239,12 +239,6 @@ export function AccessControlModalContent({

  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";

-  const buttonDisabled = useMemo(() => {
-    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
-    if (name.length == 0) return true;
-    if (direction != "bi" && ports.length == 0) return true;
-  }, [sourceGroups, destinationGroups, direction, ports, name]);
-
  const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
  const postureChecksLoaded = useRef(false);

@@ -268,6 +262,26 @@ export function AccessControlModalContent({
    }
  }, [initialPostureChecks]);

+  const continuePostureChecksDisabled = useMemo(() => {
+    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
+    if (direction != "bi" && ports.length == 0) return true;
+  }, [sourceGroups, destinationGroups, direction, ports]);
+
+  const submitDisabled = useMemo(() => {
+    if (name.length == 0) return true;
+    if (continuePostureChecksDisabled) return true;
+  }, [name, continuePostureChecksDisabled]);
+
+  const handleProtocolChange = (p: Protocol) => {
+    setProtocol(p);
+    if (p == "icmp") {
+      setPorts([]);
+    }
+    if (p == "all") {
+      setPorts([]);
+    }
+  };
+
  return (
    <ModalContent maxWidthClass={"max-w-2xl"}>
      <ModalHeader
@@ -283,14 +297,17 @@ export function AccessControlModalContent({
        color={"netbird"}
      />

-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
        <TabsList justify={"start"} className={"px-8"}>
          <TabsTrigger value={"policy"}>
            <ArrowRightLeft size={16} />
            Policy
          </TabsTrigger>
-          <PostureCheckTabTrigger />
-          <TabsTrigger value={"general"}>
+          <PostureCheckTabTrigger disabled={continuePostureChecksDisabled} />
+          <TabsTrigger
+            value={"general"}
+            disabled={continuePostureChecksDisabled}
+          >
            <Text
              size={16}
              className={
@@ -315,7 +332,7 @@ export function AccessControlModalContent({
              </div>
              <Select
                value={protocol}
-                onValueChange={(v) => setProtocol(v as Protocol)}
+                onValueChange={(v) => handleProtocolChange(v as Protocol)}
              >
                <SelectTrigger className="w-[140px]">
                  <div className={"flex items-center gap-3"}>
@@ -456,24 +473,74 @@ export function AccessControlModalContent({
          </Paragraph>
        </div>
        <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {!policy ? (
+            <>
+              {tab == "policy" && (
+                <ModalClose asChild={true}>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+              )}

-          <Button
-            variant={"primary"}
-            disabled={buttonDisabled}
-            onClick={submit}
-          >
-            {policy ? (
-              <>Save Changes</>
-            ) : (
-              <>
-                <PlusCircle size={16} />
-                Add Policy
-              </>
-            )}
-          </Button>
+              {tab == "posture_checks" && (
+                <Button variant={"secondary"} onClick={() => setTab("policy")}>
+                  Back
+                </Button>
+              )}
+
+              {tab == "policy" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("posture_checks")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "posture_checks" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("general")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "general" && (
+                <>
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("posture_checks")}
+                  >
+                    Back
+                  </Button>
+
+                  <Button
+                    variant={"primary"}
+                    disabled={submitDisabled}
+                    onClick={submit}
+                  >
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+              <Button
+                variant={"primary"}
+                disabled={submitDisabled}
+                onClick={submit}
+              >
+                Save Changes
+              </Button>
+            </>
+          )}
        </div>
      </ModalFooter>
    </ModalContent>
--- a/src/modules/access-control/table/AccessControlPortsCell.tsx
+++ b/src/modules/access-control/table/AccessControlPortsCell.tsx
@@ -5,7 +5,7 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from "@components/Tooltip";
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { Policy } from "@/interfaces/Policy";

 type Props = {
@@ -19,15 +19,15 @@ export default function AccessControlPortsCell({ policy }: Props) {

  const hasPorts = firstRule?.ports && firstRule?.ports.length > 0;

-  const [firstTwoPorts] = useState(() => {
+  const firstTwoPorts = useMemo(() => {
    if (!hasPorts) return [];
    return firstRule?.ports.slice(0, 2) ?? [];
-  });
+  }, [hasPorts, firstRule]);

-  const [otherPorts] = useState(() => {
+  const otherPorts = useMemo(() => {
    if (!hasPorts) return [];
    return firstRule?.ports.slice(2) ?? [];
-  });
+  }, [hasPorts, firstRule]);

  return (
    <div className={"flex-1"}>
--- a/src/modules/activity/ActivityDescription.tsx
+++ b/src/modules/activity/ActivityDescription.tsx
@@ -3,7 +3,11 @@ import { Label } from "@components/Label";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { cn } from "@utils/helpers";
 import { isLocalDev, isProduction } from "@utils/netbird";
+import { isEmpty } from "lodash";
+import { GlobeIcon } from "lucide-react";
 import React, { useMemo } from "react";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
+import { useCountries } from "@/contexts/CountryProvider";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";

 type Props = {
@@ -54,7 +58,8 @@ export default function ActivityDescription({ event }: Props) {
  if (event.activity_code == "setupkey.peer.add")
    return (
      <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was added
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> was added
+        with the NetBird IP <Value>{m.ip}</Value>
      </div>
    );

@@ -113,29 +118,38 @@ export default function ActivityDescription({ event }: Props) {
   * Route
   */

-  if (event.activity_code == "route.delete")
+  if (event.activity_code == "route.delete") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
    return (
      <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was deleted
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was deleted
      </div>
    );
+  }

-  if (event.activity_code == "route.update")
+  if (event.activity_code == "route.update") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
    return (
      <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was updated
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was updated
      </div>
    );
+  }

-  if (event.activity_code == "route.add")
+  if (event.activity_code == "route.add") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
    return (
      <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was created
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was created
      </div>
    );
+  }

  /**
   * User
@@ -144,21 +158,24 @@ export default function ActivityDescription({ event }: Props) {
  if (event.activity_code == "user.peer.delete")
    return (
      <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was deleted
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> with
+        NetBird IP <Value>{m.ip}</Value> was deleted
      </div>
    );

  if (event.activity_code == "user.peer.add")
    return (
      <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was added
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> was added
+        with the NetBird IP <Value>{m.ip}</Value>
      </div>
    );

  if (event.activity_code == "user.peer.update")
    return (
      <div className={"inline"}>
-        Peer <Value>{m.name}</Value> with ip <Value>{m.ip}</Value> was updated
+        Peer <Value>{m.name}</Value> <PeerConnectionInfo meta={m} /> with
+        NetBird IP <Value>{m.ip}</Value> was updated
      </div>
    );

@@ -252,15 +269,15 @@ export default function ActivityDescription({ event }: Props) {
  if (event.activity_code == "peer.group.delete")
    return (
      <div className={"inline"}>
-        Group <Value>{m.group}</Value> was removed from the peer with the ip{" "}
-        <Value>{m.peer_ip}</Value>
+        Group <Value>{m.group}</Value> was removed from the peer with the
+        NetBird IP <Value>{m.peer_ip}</Value>
      </div>
    );

  if (event.activity_code == "peer.group.add")
    return (
      <div className={"inline"}>
-        Group <Value>{m.group}</Value> was added to the peer with the ip{" "}
+        Group <Value>{m.group}</Value> was added to the peer with the NetBird IP{" "}
        <Value>{m.peer_ip}</Value>
      </div>
    );
@@ -303,7 +320,7 @@ export default function ActivityDescription({ event }: Props) {
  if (event.activity_code == "peer.rename")
    return (
      <div className={"inline"}>
-        Peer with the ip <Value>{m.ip}</Value> was renamed to{" "}
+        Peer with the NetBird IP <Value>{m.ip}</Value> was renamed to{" "}
        <Value>{m.name}</Value>
      </div>
    );
@@ -311,7 +328,7 @@ export default function ActivityDescription({ event }: Props) {
  if (event.activity_code == "peer.approve")
    return (
      <div className={"inline"}>
-        Peer with the ip <Value>{m.ip}</Value> was approved
+        Peer with the NetBird IP <Value>{m.ip}</Value> was approved
      </div>
    );

@@ -477,15 +494,46 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

-  // TODO add activity texts
-  // rule.add
-  // rule.update
-  // rule.delete
-  // setupkey.update
-  // setupkey.overuse
-  // group.update
-  // group.delete
-  // user.peer.login
+  if (event.activity_code == "transferred.owner.role")
+    return <div className={"inline"}>Owner role was transferred</div>;
+
+  /**
+   * EDR
+   */
+  if (event.activity_code == "integrated-validator.api.created")
+    return (
+      <div className={"inline"}>
+        <Value>{m?.platform}</Value> integration created
+      </div>
+    );
+
+  if (event.activity_code == "integrated-validator.api.updated")
+    return (
+      <div className={"inline"}>
+        <Value>{m?.platform}</Value> integration updated
+      </div>
+    );
+
+  if (event.activity_code == "integrated-validator.api.deleted")
+    return (
+      <div className={"inline"}>
+        <Value>{m?.platform}</Value> integration deleted
+      </div>
+    );
+
+  if (event.activity_code == "integrated-validator.host-check.approved")
+    return (
+      <div className={"inline"}>
+        Peer approved by <Value>{m?.platform}</Value> integration
+      </div>
+    );
+
+  if (event.activity_code == "integrated-validator.host-check.denied")
+    return (
+      <div className={"inline"}>
+        Peer rejected by <Value>{m?.platform}</Value> integration
+      </div>
+    );

  return (
    <div className={"flex gap-2.5 items-center"}>
@@ -528,7 +576,7 @@ function Value({
  return children ? (
    <span
      className={cn(
-        "text-nb-gray-200 inline font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]",
+        "text-nb-gray-200 inline-flex gap-1 items-center max-h-[22px] font-medium bg-nb-gray-900 py-[3px] text-[11px] px-[5px] border border-nb-gray-800 rounded-[4px]",
        className,
      )}
    >
@@ -536,3 +584,40 @@ function Value({
    </span>
  ) : null;
 }
+
+function PeerConnectionInfo({ meta }: { meta: any }) {
+  const hasMeta =
+    !isEmpty(meta?.location_country_code) ||
+    !isEmpty(meta?.location_connection_ip);
+  const { countries } = useCountries();
+
+  const countryText = useMemo(() => {
+    if (!countries) return "Unknown";
+    const country = countries.find(
+      (c) => c.country_code === meta?.location_country_code,
+    );
+    if (!country) return "Unknown";
+    if (!meta?.location_city_name) return country.country_name;
+    return `${country.country_name}, ${meta?.location_city_name}`;
+  }, [countries, meta]);
+
+  return hasMeta ? (
+    <>
+      {" "}
+      from{" "}
+      {meta?.location_connection_ip && (
+        <Value>{meta?.location_connection_ip}</Value>
+      )}{" "}
+      {meta?.location_country_code && (
+        <Value>
+          {isEmpty(meta?.location_country_code) ? (
+            <GlobeIcon size={9} className={"text-nb-gray-300"} />
+          ) : (
+            <RoundedFlag country={meta?.location_country_code} size={9} />
+          )}
+          {countryText}
+        </Value>
+      )}
+    </>
+  ) : null;
+}
--- a/src/modules/activity/ActivityTypeIcon.tsx
+++ b/src/modules/activity/ActivityTypeIcon.tsx
@@ -3,6 +3,7 @@ import {
  ArrowLeftRight,
  Blocks,
  Cog,
+  CreditCardIcon,
  FolderGit2,
  Globe,
  HelpCircleIcon,
@@ -10,6 +11,7 @@ import {
  LogIn,
  MonitorSmartphoneIcon,
  NetworkIcon,
+  RefreshCcw,
  Server,
  Shield,
  ShieldCheck,
@@ -71,10 +73,22 @@ export default function ActivityTypeIcon({
    return <User size={size} className={cn(DEFAULT_CLASSES, className)} />;
  } else if (code.startsWith("service")) {
    return <Cog size={size} className={cn(DEFAULT_CLASSES, className)} />;
+  } else if (code.startsWith("billing")) {
+    return (
+      <CreditCardIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
+  } else if (code.startsWith("integrated")) {
+    return (
+      <ShieldCheck size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
  } else if (code.startsWith("posture")) {
    return (
      <ShieldCheck size={size} className={cn(DEFAULT_CLASSES, className)} />
    );
+  } else if (code.startsWith("transferred")) {
+    return (
+      <RefreshCcw size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
  } else {
    return (
      <HelpCircleIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
--- a/src/modules/common-table-rows/ActiveInactiveRow.tsx
+++ b/src/modules/common-table-rows/ActiveInactiveRow.tsx
@@ -10,6 +10,7 @@ type Props = {
  leftSection?: React.ReactNode;
  text?: string | React.ReactNode;
  className?: string;
+  additionalInfo?: React.ReactNode;
 };
 export default function ActiveInactiveRow({
  active,
@@ -18,11 +19,12 @@ export default function ActiveInactiveRow({
  leftSection,
  inactiveDot = "gray",
  className,
+  additionalInfo,
 }: Props) {
  return (
    <div
      className={cn(
-        "flex gap-3 dark:text-neutral-300 text-neutral-500 min-w-[250px] max-w-[250px]",
+        "gap-3 dark:text-neutral-300 text-neutral-500 min-w-0",
        className,
      )}
    >
@@ -34,9 +36,12 @@ export default function ActiveInactiveRow({
            inactiveDot={inactiveDot}
            className={"mt-1 shrink-0"}
          />
-          <div className={"flex flex-col"}>
-            <div className={" font-medium"}>
+          <div className={"flex flex-col min-w-0"}>
+            <div
+              className={"font-medium flex gap-2 items-center justify-center"}
+            >
              <TextWithTooltip text={text as string} maxChars={25} />
+              {additionalInfo}
            </div>
            {children}
          </div>
--- a/src/modules/common-table-rows/GroupsRow.tsx
+++ b/src/modules/common-table-rows/GroupsRow.tsx
@@ -1,3 +1,4 @@
+import Badge from "@components/Badge";
 import Button from "@components/Button";
 import {
  Modal,
@@ -10,6 +11,7 @@ import ModalHeader from "@components/modal/ModalHeader";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
 import MultipleGroups from "@components/ui/MultipleGroups";
+import { IconCirclePlus } from "@tabler/icons-react";
 import { FolderGit2 } from "lucide-react";
 import * as React from "react";
 import { useMemo } from "react";
@@ -27,6 +29,8 @@ type Props = {
  label?: string;
  description?: string;
  peer?: Peer;
+  showAddGroupButton?: boolean;
+  hideAllGroup?: boolean;
 };

 export default function GroupsRow({
@@ -37,6 +41,8 @@ export default function GroupsRow({
  label = "Assigned Groups",
  description = "Use groups to control what this peer can access",
  peer,
+  showAddGroupButton = false,
+  hideAllGroup = false,
 }: Props) {
  const { groups: allGroups } = useGroups();
  const { isUser } = useLoggedInUser();
@@ -59,7 +65,14 @@ export default function GroupsRow({
          setModal && !isUser && setModal(true);
        }}
      >
-        <MultipleGroups groups={foundGroups} label={label} />
+        {foundGroups?.length == 0 && showAddGroupButton ? (
+          <Badge variant={"gray"} useHover={true}>
+            <IconCirclePlus size={14} />
+            Add Groups
+          </Badge>
+        ) : (
+          <MultipleGroups groups={foundGroups} label={label} />
+        )}
      </ModalTrigger>
      <EditGroupsModal
        groups={foundGroups}
@@ -67,6 +80,7 @@ export default function GroupsRow({
        label={label}
        description={description}
        peer={peer}
+        hideAllGroup={hideAllGroup}
      />
    </Modal>
  );
@@ -78,6 +92,7 @@ type EditGroupsModalProps = {
  label?: string;
  description?: string;
  peer?: Peer;
+  hideAllGroup?: boolean;
 };

 export function EditGroupsModal({
@@ -86,6 +101,7 @@ export function EditGroupsModal({
  label,
  description,
  peer,
+  hideAllGroup = false,
 }: EditGroupsModalProps) {
  const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
    useGroupHelper({
@@ -114,6 +130,7 @@ export function EditGroupsModal({
            onChange={setSelectedGroups}
            values={selectedGroups}
            peer={peer}
+            hideAllGroup={hideAllGroup}
          />
        </div>
      </div>
--- a/src/modules/dns-nameservers/NameserverModal.tsx
+++ b/src/modules/dns-nameservers/NameserverModal.tsx
@@ -17,8 +17,9 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
+import InputDomain, { domainReducer } from "@components/ui/InputDomain";
 import { useApiCall } from "@utils/api";
-import { cn, validator } from "@utils/helpers";
+import { cn } from "@utils/helpers";
 import cidr from "ip-cidr";
 import { uniqueId } from "lodash";
 import {
@@ -35,7 +36,7 @@ import {
 import React, { useEffect, useMemo, useReducer, useState } from "react";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
-import { Domain, Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
+import { Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
 import useGroupHelper from "@/modules/groups/useGroupHelper";

 type Props = {
@@ -97,25 +98,12 @@ enum ActionType {
  UPDATE = "UPDATE",
 }

-export const domainReducer = (state: Domain[], action: any) => {
-  switch (action.type) {
-    case ActionType.ADD:
-      return [...state, { name: "", id: uniqueId("ns") }];
-    case ActionType.REMOVE:
-      return state.filter((_, i) => i !== action.index);
-    case ActionType.UPDATE:
-      return state.map((n, i) => (i === action.index ? action.d : n));
-    default:
-      return state;
-  }
-};
-
 export function NameserverModalContent({
  onSuccess,
  preset,
  cell,
 }: ModalProps) {
-  const nsRequest = useApiCall<NameserverGroup>("/dns/nameservers");
+  const nsRequest = useApiCall<NameserverGroup>("/dns/nameservers", true);
  const { mutate } = useSWRConfig();

  const isUpdate = useMemo(() => {
@@ -199,7 +187,7 @@ export function NameserverModalContent({
  // Domains
  const [domains, setDomains] = useReducer(domainReducer, [], () => {
    if (preset?.domains?.length) {
-      return preset.domains.map((d) => ({ name: d, id: uniqueId("ns") }));
+      return preset.domains.map((d) => ({ name: d, id: uniqueId("domain") }));
    }
    return [];
  });
@@ -233,25 +221,27 @@ export function NameserverModalContent({
    return domains.some((d) => d.name === "");
  }, [domains]);

-  const hasAnyError = useMemo(() => {
-    return (
+  const nameLengthError = useMemo(() => {
+    if (name.length > 40) return "Name should be less than 40 characters";
+    return "";
+  }, [name]);
+
+  const canContinueToDomains = useMemo(() => {
+    return !(
      hasNSErrors ||
      nsError ||
-      domainError ||
-      name == "" ||
      nameservers.length == 0 ||
-      hasDomainErrors ||
      groups.length == 0
    );
-  }, [
-    nsError,
-    domainError,
-    name,
-    nameservers,
-    groups,
-    hasNSErrors,
-    hasDomainErrors,
-  ]);
+  }, [hasNSErrors, nsError, nameservers.length, groups.length]);
+
+  const canContinueToGeneral = useMemo(() => {
+    return !(!canContinueToDomains || domainError || hasDomainErrors);
+  }, [canContinueToDomains, domainError, hasDomainErrors]);
+
+  const canSubmit = useMemo(() => {
+    return !(!canContinueToGeneral || nameLengthError !== "" || name == "");
+  }, [canContinueToGeneral, nameLengthError, name]);

  return (
    <ModalContent maxWidthClass={"max-w-xl"}>
@@ -262,7 +252,7 @@ export function NameserverModalContent({
        color={"netbird"}
      />

-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
        <TabsList justify={"start"} className={"px-8"}>
          <TabsTrigger value={"nameserver"}>
            <ServerIcon
@@ -273,7 +263,7 @@ export function NameserverModalContent({
            />
            Nameserver
          </TabsTrigger>
-          <TabsTrigger value={"domains"}>
+          <TabsTrigger value={"domains"} disabled={!canContinueToDomains}>
            <GlobeIcon
              size={16}
              className={
@@ -282,7 +272,7 @@ export function NameserverModalContent({
            />
            Domains
          </TabsTrigger>
-          <TabsTrigger value={"general"}>
+          <TabsTrigger value={"general"} disabled={!canContinueToGeneral}>
            <Text
              size={16}
              className={
@@ -368,7 +358,7 @@ export function NameserverModalContent({
                    <div className={"flex flex-col gap-2 w-full"}>
                      {domains.map((domain, i) => {
                        return (
-                          <DomainInput
+                          <InputDomain
                            key={domain.id}
                            value={domain}
                            onChange={(d) =>
@@ -427,6 +417,7 @@ export function NameserverModalContent({
              <Input
                autoFocus={true}
                tabIndex={0}
+                error={nameLengthError}
                placeholder={"e.g., Public DNS"}
                value={name}
                onChange={(e) => setName(e.target.value)}
@@ -465,20 +456,77 @@ export function NameserverModalContent({
          </Paragraph>
        </div>
        <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {!isUpdate ? (
+            <>
+              {tab == "nameserver" && (
+                <ModalClose asChild={true}>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+              )}

-          <Button variant={"primary"} disabled={hasAnyError} onClick={submit}>
-            {isUpdate ? (
-              <>Save Changes</>
-            ) : (
-              <>
-                <PlusCircle size={16} />
-                Add Nameserver
-              </>
-            )}
-          </Button>
+              {tab == "domains" && (
+                <Button
+                  variant={"secondary"}
+                  onClick={() => setTab("nameserver")}
+                >
+                  Back
+                </Button>
+              )}
+
+              {tab == "nameserver" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("domains")}
+                  disabled={!canContinueToDomains}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "domains" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("general")}
+                  disabled={!canContinueToGeneral}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "general" && (
+                <>
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("domains")}
+                  >
+                    Back
+                  </Button>
+
+                  <Button
+                    variant={"primary"}
+                    disabled={!canSubmit}
+                    onClick={submit}
+                  >
+                    <PlusCircle size={16} />
+                    Add Nameserver
+                  </Button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+              <Button
+                variant={"primary"}
+                disabled={!canSubmit}
+                onClick={submit}
+              >
+                Save Changes
+              </Button>
+            </>
+          )}
        </div>
      </ModalFooter>
    </ModalContent>
@@ -516,7 +564,7 @@ function NameserverInput({
    const validCIDR = cidr.isValidAddress(ip);
    if (!validCIDR) {
      onError && onError(true);
-      return "Please enter a valid CIDR, e.g., 192.168.1.0/24";
+      return "Please enter a valid IP, e.g., 192.168.1.0";
    }
    onError && onError(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -532,7 +580,7 @@ function NameserverInput({
      <div className={"w-full"}>
        <Input
          customPrefix={"IP"}
-          placeholder={"e.g., 172.16.0.0/16"}
+          placeholder={"e.g., 172.16.0.0"}
          maxWidthClass={"w-full"}
          value={ip}
          className={"font-mono !text-[13px]"}
@@ -559,63 +607,3 @@ function NameserverInput({
    </div>
  );
 }
-
-function DomainInput({
-  value,
-  onChange,
-  onRemove,
-  onError,
-}: {
-  value: Domain;
-  onChange: (d: Domain) => void;
-  onRemove: () => void;
-  onError?: (error: boolean) => void;
-  error?: string;
-}) {
-  const [name, setName] = useState(value.name);
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-    onChange({ ...value, name: e.target.value });
-  };
-
-  const domainError = useMemo(() => {
-    if (name == "") {
-      return "";
-    }
-    const valid = validator.isValidDomain(name);
-    if (!valid) {
-      onError && onError(true);
-      return "Please enter a valid domain, e.g. example.com or intra.example.com";
-    }
-    onError && onError(false);
-  }, [name, onError]);
-
-  useEffect(() => {
-    return () => onError && onError(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={"flex gap-2 w-full"}>
-      <div className={"w-full"}>
-        <Input
-          customPrefix={<GlobeIcon size={15} />}
-          placeholder={"e.g., example.com"}
-          maxWidthClass={"w-full"}
-          value={name}
-          error={domainError}
-          onChange={handleNameChange}
-        />
-      </div>
-
-      <Button
-        className={"h-[42px]"}
-        variant={"default-outline"}
-        onClick={onRemove}
-      >
-        <MinusCircleIcon size={15} />
-      </Button>
-    </div>
-  );
-}
--- a/src/modules/exit-node/AddExitNodeButton.tsx
+++ b/src/modules/exit-node/AddExitNodeButton.tsx
@@ -0,0 +1,46 @@
+import Button from "@components/Button";
+import { Modal } from "@components/modal/Modal";
+import { IconCirclePlus, IconDirectionSign } from "@tabler/icons-react";
+import * as React from "react";
+import { useState } from "react";
+import { Peer } from "@/interfaces/Peer";
+import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
+import { RouteModalContent } from "@/modules/routes/RouteModal";
+
+type Props = {
+  peer?: Peer;
+  firstTime?: boolean;
+};
+export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
+  const [modal, setModal] = useState(false);
+
+  return (
+    <>
+      <ExitNodeHelpTooltip>
+        <Button variant={"secondary"} onClick={() => setModal(true)}>
+          {!firstTime ? (
+            <>
+              <IconCirclePlus size={16} />
+              Add Exit Node
+            </>
+          ) : (
+            <>
+              <IconDirectionSign size={16} className={"text-yellow-400"} />
+              Set Up Exit Node
+            </>
+          )}
+        </Button>
+      </ExitNodeHelpTooltip>
+      <Modal open={modal} onOpenChange={setModal}>
+        {modal && (
+          <RouteModalContent
+            onSuccess={() => setModal(false)}
+            peer={peer}
+            isFirstExitNode={firstTime}
+            exitNode={true}
+          />
+        )}
+      </Modal>
+    </>
+  );
+};
--- a/src/modules/exit-node/ExitNodeDropdownButton.tsx
+++ b/src/modules/exit-node/ExitNodeDropdownButton.tsx
@@ -0,0 +1,59 @@
+import { DropdownMenuItem } from "@components/DropdownMenu";
+import { Modal } from "@components/modal/Modal";
+import { getOperatingSystem } from "@hooks/useOperatingSystem";
+import { IconCirclePlus, IconDirectionSign } from "@tabler/icons-react";
+import * as React from "react";
+import { useState } from "react";
+import RoutesProvider from "@/contexts/RoutesProvider";
+import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { Peer } from "@/interfaces/Peer";
+import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
+import { RouteModalContent } from "@/modules/routes/RouteModal";
+
+type Props = {
+  peer: Peer;
+};
+
+export const ExitNodeDropdownButton = ({ peer }: Props) => {
+  const [modal, setModal] = useState(false);
+  const isLinux = getOperatingSystem(peer.os) === OperatingSystem.LINUX;
+  const hasExitNodes = useHasExitNodes(peer);
+
+  return isLinux ? (
+    <>
+      <DropdownMenuItem onClick={() => setModal(true)}>
+        <div className={"flex gap-3 items-center w-full"}>
+          {hasExitNodes ? (
+            <>
+              <IconCirclePlus size={14} className={"shrink-0"} />
+              <div className={"flex justify-between items-center w-full"}>
+                Add Exit Node
+              </div>
+            </>
+          ) : (
+            <>
+              <IconDirectionSign
+                size={14}
+                className={"shrink-0 text-yellow-400"}
+              />
+              <div className={"flex justify-between items-center w-full"}>
+                Set Up Exit Node
+              </div>
+            </>
+          )}
+        </div>
+      </DropdownMenuItem>
+      <Modal open={modal} onOpenChange={setModal}>
+        {modal && (
+          <RoutesProvider>
+            <RouteModalContent
+              onSuccess={() => setModal(false)}
+              peer={peer}
+              exitNode={true}
+            />
+          </RoutesProvider>
+        )}
+      </Modal>
+    </>
+  ) : null;
+};
--- a/src/modules/exit-node/ExitNodeHelpTooltip.tsx
+++ b/src/modules/exit-node/ExitNodeHelpTooltip.tsx
@@ -0,0 +1,47 @@
+import FullTooltip from "@components/FullTooltip";
+import InlineLink from "@components/InlineLink";
+import { ExternalLinkIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  hoverButton?: boolean;
+};
+export const ExitNodeHelpTooltip = ({
+  children,
+  hoverButton = false,
+}: Props) => {
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <FullTooltip
+        hoverButton={hoverButton}
+        content={
+          <div className={"text-xs max-w-xs"}>
+            An exit node is a network route that routes all your internet
+            traffic through one of your peers.
+            <div className={"mt-2"}>
+              Learn more about{" "}
+              <InlineLink
+                href={
+                  "https://docs.netbird.io/how-to/configuring-default-routes-for-internet-traffic"
+                }
+                target={"_blank"}
+                className={"mr-1"}
+              >
+                Exit Nodes
+                <ExternalLinkIcon size={10} />
+              </InlineLink>
+              in our documentation.
+            </div>
+          </div>
+        }
+      >
+        {children}
+      </FullTooltip>
+    </div>
+  );
+};
--- a/src/modules/exit-node/ExitNodePeerIndicator.tsx
+++ b/src/modules/exit-node/ExitNodePeerIndicator.tsx
@@ -0,0 +1,25 @@
+import FullTooltip from "@components/FullTooltip";
+import { IconDirectionSign } from "@tabler/icons-react";
+import * as React from "react";
+import { Peer } from "@/interfaces/Peer";
+import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
+
+type Props = {
+  peer: Peer;
+};
+export const ExitNodePeerIndicator = ({ peer }: Props) => {
+  const hasExitNode = useHasExitNodes(peer);
+
+  return hasExitNode ? (
+    <FullTooltip
+      content={
+        <div className={"text-xs max-w-xs"}>
+          This peer is an exit node. Traffic from the configured distribution
+          groups will be routed through this peer.
+        </div>
+      }
+    >
+      <IconDirectionSign size={15} className={"text-yellow-400 shrink-0"} />
+    </FullTooltip>
+  ) : null;
+};
--- a/src/modules/exit-node/useHasExitNodes.tsx
+++ b/src/modules/exit-node/useHasExitNodes.tsx
@@ -0,0 +1,19 @@
+import useFetchApi from "@utils/api";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { Peer } from "@/interfaces/Peer";
+import { Route } from "@/interfaces/Route";
+
+export const useHasExitNodes = (peer?: Peer) => {
+  const { isOwnerOrAdmin } = useLoggedInUser();
+  const { data: routes } = useFetchApi<Route[]>(
+    `/routes`,
+    false,
+    true,
+    isOwnerOrAdmin,
+  );
+  return peer
+    ? routes?.some(
+        (route) => route?.peer === peer.id && route?.network === "0.0.0.0/0",
+      ) || false
+    : false;
+};
--- a/src/modules/groups/GroupSelector.tsx
+++ b/src/modules/groups/GroupSelector.tsx
@@ -142,7 +142,8 @@ export function GroupSelector({
                <div className={""}>
                  <div className={"grid grid-cols-1 gap-1"}>
                    {orderBy(groups, "name")?.map((item) => {
-                      const value = item.name;
+                      const value = item?.name || "";
+                      if (value === "") return null;
                      const isSelected =
                        values.find((c) => c == value) != undefined;

@@ -173,7 +174,7 @@ export function GroupSelector({
                                  "flex items-center gap-2 whitespace-nowrap text-sm"
                                }
                              >
-                                <FolderGit2 size={15} />
+                                <FolderGit2 size={13} className={"shrink-0"} />
                                <TextWithTooltip text={value} maxChars={15} />
                              </div>
                              <div
--- a/src/modules/peer/PeerRouteNetworkCell.tsx
+++ b/src/modules/peer/PeerRouteNetworkCell.tsx
@@ -1,10 +1,29 @@
+import { IconDirectionSign } from "@tabler/icons-react";
+import { InfoIcon } from "lucide-react";
+import * as React from "react";
 import { Route } from "@/interfaces/Route";
+import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";

 type Props = {
  route: Route;
 };
 export default function PeerRouteNetworkCell({ route }: Props) {
-  return (
+  const isExitNode = route?.network === "0.0.0.0/0";
+
+  return isExitNode ? (
+    <ExitNodeHelpTooltip>
+      <div className={"flex gap-2 items-center dark:text-nb-gray-300 group"}>
+        <IconDirectionSign size={16} className={"text-yellow-400"} />
+        Exit Node{" "}
+        <InfoIcon
+          size={14}
+          className={
+            "text-nb-gray-500 group-hover:text-nb-gray-400 transition-all"
+          }
+        />
+      </div>
+    </ExitNodeHelpTooltip>
+  ) : (
    <div className={"font-mono dark:text-nb-gray-300 flex max-w-[10px]"}>
      {route.network}
    </div>
--- a/src/modules/peer/PeerRoutesTable.tsx
+++ b/src/modules/peer/PeerRoutesTable.tsx
@@ -12,8 +12,9 @@ import { Route } from "@/interfaces/Route";
 import PeerRouteActionCell from "@/modules/peer/PeerRouteActionCell";
 import PeerRouteActiveCell from "@/modules/peer/PeerRouteActiveCell";
 import PeerRouteNameCell from "@/modules/peer/PeerRouteNameCell";
-import PeerRouteNetworkCell from "@/modules/peer/PeerRouteNetworkCell";
 import usePeerRoutes from "@/modules/peer/usePeerRoutes";
+import GroupedRouteNetworkRangeCell from "@/modules/route-group/GroupedRouteNetworkRangeCell";
+import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroupsCell";

 type Props = {
  peer: Peer;
@@ -31,9 +32,24 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
  {
    accessorKey: "network",
    header: ({ column }) => {
-      return <DataTableHeader column={column}>Network Range</DataTableHeader>;
+      return <DataTableHeader column={column}>Network</DataTableHeader>;
    },
-    cell: ({ row }) => <PeerRouteNetworkCell route={row.original} />,
+    cell: ({ row }) => (
+      <GroupedRouteNetworkRangeCell
+        domains={row.original?.domains}
+        network={row.original?.network}
+      />
+    ),
+  },
+  {
+    id: "groups",
+    accessorFn: (r) => r.groups?.length,
+    header: ({ column }) => {
+      return (
+        <DataTableHeader column={column}>Distribution Groups</DataTableHeader>
+      );
+    },
+    cell: ({ row }) => <RouteDistributionGroupsCell route={row.original} />,
  },
  {
    id: "enabled",
--- a/src/modules/peers/PeerActionCell.tsx
+++ b/src/modules/peers/PeerActionCell.tsx
@@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
 import React from "react";
 import { useSWRConfig } from "swr";
 import { usePeer } from "@/contexts/PeerProvider";
+import { ExitNodeDropdownButton } from "@/modules/exit-node/ExitNodeDropdownButton";

 export default function PeerActionCell() {
  const { peer, deletePeer, update, openSSHDialog } = usePeer();
@@ -125,6 +126,9 @@ export default function PeerActionCell() {
              </div>
            </div>
          </DropdownMenuItem>
+
+          <ExitNodeDropdownButton peer={peer} />
+
          <DropdownMenuSeparator />

          <DropdownMenuItem onClick={deletePeer} variant={"danger"}>
--- a/src/modules/peers/PeerGroupCell.tsx
+++ b/src/modules/peers/PeerGroupCell.tsx
@@ -34,6 +34,7 @@ export default function PeerGroupCell() {
      label={"Assigned Groups"}
      description={"Use groups to control what this peer can access"}
      groups={groupIDs || []}
+      hideAllGroup={true}
      onSave={handleSave}
      modal={modal}
      peer={peer}
--- a/src/modules/peers/PeerMultiSelect.tsx
+++ b/src/modules/peers/PeerMultiSelect.tsx
@@ -0,0 +1,457 @@
+import Button from "@components/Button";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import FullTooltip from "@components/FullTooltip";
+import HelpText from "@components/HelpText";
+import { Label } from "@components/Label";
+import { notify } from "@components/Notification";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import { IconX } from "@tabler/icons-react";
+import { RowSelectionState } from "@tanstack/react-table";
+import { useApiCall } from "@utils/api";
+import { cn } from "@utils/helpers";
+import { AnimatePresence, motion } from "framer-motion";
+import { uniq, uniqBy } from "lodash";
+import {
+  CheckCircle,
+  CirclePlus,
+  FolderGit2,
+  Loader2,
+  MonitorSmartphoneIcon,
+  RedoDot,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { usePeers } from "@/contexts/PeersProvider";
+import { Group, GroupPeer } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+
+type Props = {
+  selectedPeers?: RowSelectionState;
+  onCanceled?: () => void;
+};
+export const PeerMultiSelect = ({ selectedPeers = {}, onCanceled }: Props) => {
+  return (
+    <AnimatePresence>
+      {Object.keys(selectedPeers).length > 0 && (
+        <PeerGroupMassAssignmentContent
+          selectedPeers={selectedPeers}
+          onCanceled={onCanceled}
+        />
+      )}
+    </AnimatePresence>
+  );
+};
+
+const PeerGroupMassAssignmentContent = ({
+  selectedPeers = {},
+  onCanceled,
+}: Props) => {
+  const { mutate } = useSWRConfig();
+  const { confirm } = useDialog();
+
+  const { peers } = usePeers();
+
+  const groupCall = useApiCall<Group>("/groups");
+  const getAllGroups = useApiCall<Group[]>("/groups").get;
+  const peerCall = useApiCall<Peer>("/peers", true);
+
+  const [showGroupAssignment, setShowGroupAssignment] = useState(false);
+  const groupAssignmentRef = React.useRef<HTMLDivElement>(null);
+
+  const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
+    useGroupHelper({
+      initial: [],
+    });
+  const [replaceAllGroups, setReplaceAllGroups] = useState(false);
+
+  const peerCount = useMemo(
+    () => Object.keys(selectedPeers).length,
+    [selectedPeers],
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const isLoadingOrSuccess = isLoading || isSuccess;
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      isSuccess && setIsSuccess(false);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [isSuccess]);
+
+  const addGroupsToPeers = async () => {
+    if (replaceAllGroups) {
+      const choice = await confirm({
+        title: `Overwrite existing groups?`,
+        description: `Are you sure you want to overwrite the existing groups of your ${peerCount} selected peer(s)? This action cannot be undone.`,
+        confirmText: "Overwrite",
+        cancelText: "Cancel",
+        type: "warning",
+      });
+      if (!choice) return;
+    }
+    setIsSuccess(false);
+    setIsLoading(true);
+
+    try {
+      const allGroups = await getAllGroups();
+      const selectedGroupCalls = getAllGroupCalls();
+      const selectedPeerIDs = Object.keys(selectedPeers);
+      let currentSelectedGroups = await Promise.all(selectedGroupCalls);
+      currentSelectedGroups = currentSelectedGroups
+        .map((g) => {
+          let findGroup = allGroups?.find((group) => group.id === g.id);
+          if (findGroup) return findGroup;
+          return g;
+        })
+        .filter((g) => g !== undefined);
+      let selectedPeerGroups: Group[] = [];
+
+      if (replaceAllGroups) {
+        // Get all the groups of the selected peers
+        selectedPeerGroups = uniqBy(
+          Object.keys(selectedPeers)
+            .map((id) => {
+              return peers?.find((p) => p.id === id)?.groups ?? [];
+            })
+            .flat()
+            .filter((g) => g !== undefined),
+          "id",
+        );
+
+        // Find the groups
+        selectedPeerGroups =
+          allGroups?.filter((group) =>
+            selectedPeerGroups.find((g) => g.id === group.id),
+          ) ?? [];
+
+        // Remove the peers from the groups
+        selectedPeerGroups = selectedPeerGroups.map((group) => {
+          let previousPeers = group?.peers as GroupPeer[];
+          let previousPeerIDs = previousPeers?.map((p) => p.id);
+          previousPeerIDs = previousPeerIDs
+            .filter((id) => !selectedPeerIDs.includes(id))
+            .filter((id) => id !== "" && id !== null && id !== undefined);
+
+          return {
+            ...group,
+            peers: previousPeerIDs,
+          };
+        }) as Group[];
+      }
+
+      // Add selected peers to the selected groups
+      currentSelectedGroups = currentSelectedGroups
+        .map((group) => {
+          let previousPeers = (group?.peers as GroupPeer[]) ?? [];
+          let previousPeerIDs = previousPeers.map((p) => p.id);
+
+          let peers = uniq(
+            [...previousPeerIDs, ...selectedPeerIDs].filter(
+              (p) => p !== "" && p !== null && p !== undefined,
+            ),
+          );
+          return {
+            ...group,
+            peers,
+          };
+        })
+        .filter((g) => g !== undefined) as Group[];
+
+      // Merge the groups from the peers and the selected groups and remove duplicates
+      currentSelectedGroups = uniqBy(
+        [...currentSelectedGroups, ...selectedPeerGroups],
+        "id",
+      );
+
+      // Remove 'All' group if it exists
+      currentSelectedGroups = currentSelectedGroups.filter(
+        (group) => group.name !== "All",
+      );
+
+      // Create the update calls for each group
+      let updateGroupCalls = () =>
+        Promise.all(
+          currentSelectedGroups.map((group) => {
+            return groupCall.put(
+              {
+                name: group.name,
+                peers: group.peers,
+              },
+              "/" + group.id,
+            );
+          }),
+        );
+
+      notify({
+        title: "Assign Groups to Peers",
+        description: "Groups were successfully assigned to the peers",
+        promise: updateGroupCalls()
+          .then(() => {
+            if (currentSelectedGroups.length > 0) {
+              mutate("/groups");
+              mutate("/peers");
+              setIsSuccess(true);
+            }
+          })
+          .finally(() => {
+            setIsLoading(false);
+          }),
+        loadingMessage: "Updating the groups of the selected peers...",
+      });
+    } catch (e) {
+      setIsLoading(false);
+    }
+  };
+
+  const deleteAllPeers = async () => {
+    const choice = await confirm({
+      title: `Delete '${peerCount}' ${peerCount > 1 ? "peers" : "peer"}?`,
+      description: `Are you sure you want to delete these peers? This action cannot be undone.`,
+      confirmText: "Delete All",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+    if (!choice) return;
+
+    let batchDeleteCalls = () =>
+      Object.keys(selectedPeers).map((id) => {
+        return peerCall.del({}, `/${id}`);
+      });
+
+    notify({
+      title: "Delete Peers",
+      description: "Peers were successfully deleted",
+      promise: Promise.all(batchDeleteCalls()).then(() => {
+        mutate("/peers");
+        onCanceled?.();
+      }),
+      loadingMessage: "Deleting the selected peers...",
+    });
+  };
+
+  return (
+    <div className={"fixed -bottom-16 z-50 w-full left-0 pointer-events-none"}>
+      <motion.div
+        exit={{
+          y: showGroupAssignment
+            ? (groupAssignmentRef?.current?.clientHeight ?? 0) + 55 || 370
+            : 100,
+        }}
+      >
+        <AnimatePresence>
+          {showGroupAssignment && (
+            <motion.div
+              ref={groupAssignmentRef}
+              animate={{ y: 0 }}
+              initial={{ y: 100 }}
+              exit={{
+                y: (groupAssignmentRef?.current?.clientHeight ?? 0) + 55 || 370,
+              }}
+              transition={{
+                type: "spring",
+                stiffness: 276,
+                damping: 25,
+                duration: 0.35,
+              }}
+              className={
+                "max-w-xl mx-auto rounded-t-lg -bottom-14 relative z-[49] flex gap-4 flex-col px-6 pt-6 pb-20 bg-nb-gray-920 border border-nb-gray-900 shadow-2xl border-b-0 overflow-hidden pointer-events-auto"
+              }
+            >
+              <AnimatePresence>
+                {isLoadingOrSuccess && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 260,
+                      damping: 20,
+                      duration: 0.25,
+                    }}
+                    className={
+                      "absolute w-full h-full flex items-center justify-center bg-nb-gray-920/70  z-50 top-0 left-0"
+                    }
+                  >
+                    <motion.span
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 260,
+                        damping: 20,
+                        duration: 0.25,
+                      }}
+                      className={
+                        "flex items-center justify-center gap-2 mb-14 font-normal text-nb-gray-100 text-sm"
+                      }
+                    >
+                      {isLoading && (
+                        <>
+                          <Loader2 size={14} className={"animate-spin"} />
+                          <span>Assigning groups...</span>
+                        </>
+                      )}
+                      {!isLoading && isSuccess && (
+                        <>
+                          <CheckCircle size={14} className={"text-green-400"} />
+                          <span>Groups successfully assigned</span>
+                        </>
+                      )}
+                    </motion.span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+              <div>
+                <Label>Assign Groups</Label>
+                <HelpText>
+                  Assign the following groups to the selected peers. Previously
+                  assigned groups will be kept unless you choose to overwrite
+                  them.
+                </HelpText>
+                <PeerGroupSelector
+                  onChange={setSelectedGroups}
+                  values={selectedGroups}
+                />
+              </div>
+
+              <FancyToggleSwitch
+                value={replaceAllGroups}
+                onChange={setReplaceAllGroups}
+                label={
+                  <div className={"flex gap-2"}>
+                    <RedoDot size={14} />
+                    Overwrite Existing Groups
+                  </div>
+                }
+                helpText={
+                  <div>
+                    Overwrite the existing groups of the peers with the selected
+                    ones. Previously assigned groups will be removed.
+                  </div>
+                }
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          <motion.div
+            animate={{ y: 0 }}
+            initial={{ y: 100 }}
+            exit={{ y: showGroupAssignment ? 370 : 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",
+              !showGroupAssignment && "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"}>
+                      {peerCount}
+                    </span>{" "}
+                    Peer(s) selected
+                  </span>
+                </div>
+                <div className={"flex gap-2 items-center"}>
+                  {!showGroupAssignment ? (
+                    <>
+                      <FullTooltip
+                        content={
+                          <span className={"text-xs"}>Assign Groups</span>
+                        }
+                      >
+                        <Button
+                          onClick={() =>
+                            setShowGroupAssignment(!showGroupAssignment)
+                          }
+                          variant={"default-outline"}
+                          size={"xs"}
+                          className={"!h-9 !w-9"}
+                        >
+                          <FolderGit2 size={16} className={"shrink-0"} />
+                        </Button>
+                      </FullTooltip>
+                      <FullTooltip
+                        content={<span className={"text-xs"}>Delete All</span>}
+                      >
+                        <Button
+                          variant={"danger-outline"}
+                          size={"xs"}
+                          className={"!h-9 !w-9"}
+                          onClick={deleteAllPeers}
+                        >
+                          <Trash2 size={16} className={"shrink-0"} />
+                        </Button>
+                      </FullTooltip>
+                      <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>
+                    </>
+                  ) : (
+                    <>
+                      <Button
+                        size={"xs"}
+                        variant={"secondary"}
+                        className={"!h-9 !px-3.5"}
+                        onClick={onCanceled}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        size={"xs"}
+                        variant={"primary"}
+                        className={"!h-9 !px-3.5"}
+                        disabled={
+                          selectedGroups.length == 0 ||
+                          Object.keys(selectedPeers).length == 0 ||
+                          isLoadingOrSuccess
+                        }
+                        onClick={addGroupsToPeers}
+                      >
+                        {replaceAllGroups ? (
+                          <RedoDot size={14} />
+                        ) : (
+                          <CirclePlus size={14} />
+                        )}
+                        {replaceAllGroups ? "Overwrite" : "Add"} Groups
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+            </AnimatePresence>
+          </motion.div>
+        </AnimatePresence>
+      </motion.div>
+    </div>
+  );
+};
--- a/src/modules/peers/PeerNameCell.tsx
+++ b/src/modules/peers/PeerNameCell.tsx
@@ -1,9 +1,10 @@
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { useMemo } from "react";
-import { useUsers } from "@/contexts/UsersProvider";
+import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
 import { Peer } from "@/interfaces/Peer";
 import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
+import { ExitNodePeerIndicator } from "@/modules/exit-node/ExitNodePeerIndicator";

 type Props = {
  peer: Peer;
@@ -11,22 +12,33 @@ type Props = {
 export default function PeerNameCell({ peer }: Props) {
  const { users } = useUsers();
  const router = useRouter();
+  const { isOwnerOrAdmin } = useLoggedInUser();

  const userOfPeer = useMemo(() => {
    return users?.find((user) => user.id === peer.user_id);
  }, [users, peer.user_id]);

  return (
-    <div
-      className={
-        "flex items-center min-w-[250px] max-w-[250px] 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"
-      }
-      data-testid="peer-name-cell"
-      onClick={() => router.push("/peer?id=" + peer.id)}
-    >
-      <ActiveInactiveRow active={peer.connected} text={peer.name}>
-        <div className={"text-nb-gray-400 font-light"}>{userOfPeer?.email}</div>
-      </ActiveInactiveRow>
+    <div>
+      <div
+        className={
+          "flex items-center max-w-[300px] 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"
+        }
+        data-testid="peer-name-cell"
+        onClick={() => router.push("/peer?id=" + peer.id)}
+      >
+        <ActiveInactiveRow
+          active={peer.connected}
+          text={peer.name}
+          additionalInfo={
+            isOwnerOrAdmin && <ExitNodePeerIndicator peer={peer} />
+          }
+        >
+          <div className={"text-nb-gray-400 font-light truncate"}>
+            {userOfPeer?.email}
+          </div>
+        </ActiveInactiveRow>
+      </div>
    </div>
  );
 }
--- a/src/modules/peers/PeerOSCell.tsx
+++ b/src/modules/peers/PeerOSCell.tsx
@@ -10,6 +10,7 @@ import { FaWindows } from "react-icons/fa6";
 import { FcAndroidOs, FcLinux } from "react-icons/fc";
 import IOSIcon from "@/assets/icons/IOSIcon";
 import AppleLogo from "@/assets/os-icons/apple.svg";
+import FreeBSDLogo from "@/assets/os-icons/FreeBSD.png";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";

@@ -49,6 +50,8 @@ export function OSLogo({ os }: { os: string }) {
    return <FaWindows className={"text-white text-lg"} />;
  if (icon === OperatingSystem.APPLE)
    return <Image src={AppleLogo} alt={""} width={14} />;
+  if (icon === OperatingSystem.FREEBSD)
+    return <Image src={FreeBSDLogo} alt={""} width={18} />;
  if (icon === OperatingSystem.IOS)
    return <IOSIcon className={"fill-white"} size={20} />;
  if (icon === OperatingSystem.ANDROID)
--- a/src/modules/peers/PeersTable.tsx
+++ b/src/modules/peers/PeersTable.tsx
@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import ButtonGroup from "@components/ButtonGroup";
+import { Checkbox } from "@components/Checkbox";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -9,11 +10,15 @@ import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import AddPeerButton from "@components/ui/AddPeerButton";
 import GetStartedTest from "@components/ui/GetStartedTest";
 import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
-import { ColumnDef, SortingState } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
 import { uniqBy } from "lodash";
 import { ExternalLinkIcon } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import React from "react";
+import { usePathname } from "next/navigation";
+import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import PeerProvider from "@/contexts/PeerProvider";
@@ -26,12 +31,36 @@ import PeerActionCell from "@/modules/peers/PeerActionCell";
 import PeerAddressCell from "@/modules/peers/PeerAddressCell";
 import PeerGroupCell from "@/modules/peers/PeerGroupCell";
 import PeerLastSeenCell from "@/modules/peers/PeerLastSeenCell";
+import { PeerMultiSelect } from "@/modules/peers/PeerMultiSelect";
 import PeerNameCell from "@/modules/peers/PeerNameCell";
 import { PeerOSCell } from "@/modules/peers/PeerOSCell";
 import PeerStatusCell from "@/modules/peers/PeerStatusCell";
 import PeerVersionCell from "@/modules/peers/PeerVersionCell";

 const PeersTableColumns: ColumnDef<Peer>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
  {
    accessorKey: "name",
    header: ({ column }) => {
@@ -72,12 +101,12 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
  },
  {
    accessorKey: "group_name_strings",
-    accessorFn: (peer) => peer.groups?.map((g) => g.name).join(", "),
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
    sortingFn: "text",
  },
  {
    accessorKey: "group_names",
-    accessorFn: (peer) => peer.groups?.map((g) => g.name),
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
    sortingFn: "text",
    filterFn: "arrIncludesSome",
  },
@@ -148,10 +177,11 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
 type Props = {
  peers?: Peer[];
  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
-export default function PeersTable({ peers, isLoading }: Props) {
+
+export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
  const { mutate } = useSWRConfig();
-  const router = useRouter();
  const path = usePathname();

  // Default sorting state of the table
@@ -180,193 +210,248 @@ export default function PeersTable({ peers, isLoading }: Props) {

  const { isUser } = useLoggedInUser();

+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+
+  const resetSelectedRows = () => {
+    if (Object.keys(selectedRows).length > 0) {
+      setSelectedRows({});
+    }
+  };
+
  return (
-    <DataTable
-      onRowClick={(row) => router.push("/peer?id=" + row.original.id)}
-      text={"Peers"}
-      sorting={sorting}
-      setSorting={setSorting}
-      columns={PeersTableColumns}
-      data={peers}
-      searchPlaceholder={"Search by name, IP, owner or group..."}
-      columnVisibility={{
-        connected: false,
-        approval_required: false,
-        group_name_strings: false,
-        group_names: false,
-        ip: false,
-        user_name: false,
-        user_email: false,
-        actions: !isUser,
-      }}
-      isLoading={isLoading}
-      getStartedCard={
-        <GetStartedTest
-          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>
-            </>
-          }
-        />
-      }
-      rightSide={() => <>{peers && peers.length > 0 && <AddPeerButton />}</>}
-    >
-      {(table) => (
-        <>
-          <ButtonGroup disabled={peers?.length == 0}>
-            <ButtonGroup.Button
-              disabled={peers?.length == 0}
-              onClick={() => {
-                table.setPageIndex(0);
-                table.setColumnFilters([
-                  {
-                    id: "connected",
-                    value: undefined,
-                  },
-                  {
-                    id: "approval_required",
-                    value: undefined,
-                  },
-                ]);
-              }}
-              variant={
-                table.getColumn("connected")?.getFilterValue() == undefined
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              All
-            </ButtonGroup.Button>
-            <ButtonGroup.Button
-              onClick={() => {
-                table.setPageIndex(0);
-                table.setColumnFilters([
-                  {
-                    id: "connected",
-                    value: true,
-                  },
-                  {
-                    id: "approval_required",
-                    value: undefined,
-                  },
-                ]);
-              }}
-              disabled={peers?.length == 0}
-              variant={
-                table.getColumn("connected")?.getFilterValue() == true
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              Online
-            </ButtonGroup.Button>
-            <ButtonGroup.Button
-              onClick={() => {
-                table.setPageIndex(0);
-                table.setColumnFilters([
-                  {
-                    id: "connected",
-                    value: false,
-                  },
-                  {
-                    id: "approval_required",
-                    value: undefined,
-                  },
-                ]);
-              }}
-              disabled={peers?.length == 0}
-              variant={
-                table.getColumn("connected")?.getFilterValue() == false
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              Offline
-            </ButtonGroup.Button>
-          </ButtonGroup>
-
-          {pendingApprovalCount > 0 && (
-            <Button
-              disabled={peers?.length == 0}
-              onClick={() => {
-                table.setPageIndex(0);
-                let current =
-                  table.getColumn("approval_required")?.getFilterValue() ===
-                  undefined
-                    ? true
-                    : undefined;
-
-                table.setColumnFilters([
-                  {
-                    id: "connected",
-                    value: undefined,
-                  },
-                  {
-                    id: "approval_required",
-                    value: current,
-                  },
-                ]);
-              }}
-              variant={
-                table.getColumn("approval_required")?.getFilterValue() === true
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              Pending Approvals
-              <NotificationCountBadge count={pendingApprovalCount} />
-            </Button>
-          )}
-          <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
-
-          <GroupSelector
-            disabled={peers?.length == 0}
-            values={
-              (table.getColumn("group_names")?.getFilterValue() as string[]) ||
-              []
+    <>
+      <PeerMultiSelect
+        selectedPeers={selectedRows}
+        onCanceled={() => setSelectedRows({})}
+      />
+      <DataTable
+        headingTarget={headingTarget}
+        rowSelection={selectedRows}
+        setRowSelection={setSelectedRows}
+        useRowId={true}
+        text={"Peers"}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={PeersTableColumns}
+        data={peers}
+        searchPlaceholder={"Search by name, IP, owner or group..."}
+        columnVisibility={{
+          connected: false,
+          approval_required: false,
+          group_name_strings: false,
+          group_names: false,
+          ip: false,
+          user_name: false,
+          user_email: false,
+          actions: !isUser,
+        }}
+        isLoading={isLoading}
+        getStartedCard={
+          <GetStartedTest
+            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>
+              </>
            }
-            onChange={(groups) => {
-              table.setPageIndex(0);
-              if (groups.length == 0) {
-                table.getColumn("group_names")?.setFilterValue(undefined);
-                return;
-              } else {
-                table.getColumn("group_names")?.setFilterValue(groups);
-              }
-            }}
-            groups={tableGroups}
          />
+        }
+        rightSide={() => <>{peers && peers.length > 0 && <AddPeerButton />}</>}
+      >
+        {(table) => (
+          <>
+            <ButtonGroup disabled={peers?.length == 0}>
+              <ButtonGroup.Button
+                disabled={peers?.length == 0}
+                onClick={() => {
+                  table.setPageIndex(0);
+                  let groupFilters = table
+                    .getColumn("group_names")
+                    ?.getFilterValue();
+                  table.setColumnFilters([
+                    {
+                      id: "connected",
+                      value: undefined,
+                    },
+                    {
+                      id: "approval_required",
+                      value: undefined,
+                    },
+                    {
+                      id: "group_names",
+                      value: groupFilters ?? [],
+                    },
+                    {
+                      id: "group_names",
+                      value: groupFilters ?? [],
+                    },
+                  ]);
+                  resetSelectedRows();
+                }}
+                variant={
+                  table.getColumn("connected")?.getFilterValue() == undefined
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                All
+              </ButtonGroup.Button>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  let groupFilters = table
+                    .getColumn("group_names")
+                    ?.getFilterValue();
+                  table.setColumnFilters([
+                    {
+                      id: "connected",
+                      value: true,
+                    },
+                    {
+                      id: "approval_required",
+                      value: undefined,
+                    },
+                    {
+                      id: "group_names",
+                      value: groupFilters ?? [],
+                    },
+                    {
+                      id: "group_names",
+                      value: groupFilters ?? [],
+                    },
+                  ]);
+                  resetSelectedRows();
+                }}
+                disabled={peers?.length == 0}
+                variant={
+                  table.getColumn("connected")?.getFilterValue() == true
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Online
+              </ButtonGroup.Button>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  let groupFilters = table
+                    .getColumn("group_names")
+                    ?.getFilterValue();
+                  table.setColumnFilters([
+                    {
+                      id: "connected",
+                      value: false,
+                    },
+                    {
+                      id: "approval_required",
+                      value: undefined,
+                    },
+                    {
+                      id: "group_names",
+                      value: groupFilters ?? [],
+                    },
+                  ]);
+                  resetSelectedRows();
+                }}
+                disabled={peers?.length == 0}
+                variant={
+                  table.getColumn("connected")?.getFilterValue() == false
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Offline
+              </ButtonGroup.Button>
+            </ButtonGroup>

-          <DataTableRefreshButton
-            isDisabled={peers?.length == 0}
-            onClick={() => {
-              mutate("/groups").then();
-              mutate("/users").then();
-              mutate("/peers").then();
-            }}
-          />
-        </>
-      )}
-    </DataTable>
+            {pendingApprovalCount > 0 && (
+              <Button
+                disabled={peers?.length == 0}
+                onClick={() => {
+                  table.setPageIndex(0);
+                  let current =
+                    table.getColumn("approval_required")?.getFilterValue() ===
+                    undefined
+                      ? true
+                      : undefined;
+
+                  table.setColumnFilters([
+                    {
+                      id: "connected",
+                      value: undefined,
+                    },
+                    {
+                      id: "approval_required",
+                      value: current,
+                    },
+                  ]);
+
+                  resetSelectedRows();
+                }}
+                variant={
+                  table.getColumn("approval_required")?.getFilterValue() ===
+                  true
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Pending Approvals
+                <NotificationCountBadge count={pendingApprovalCount} />
+              </Button>
+            )}
+
+            <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
+
+            <GroupSelector
+              disabled={peers?.length == 0}
+              values={
+                (table
+                  .getColumn("group_names")
+                  ?.getFilterValue() as string[]) || []
+              }
+              onChange={(groups) => {
+                table.setPageIndex(0);
+                if (groups.length == 0) {
+                  table.getColumn("group_names")?.setFilterValue(undefined);
+                  return;
+                } else {
+                  table.getColumn("group_names")?.setFilterValue(groups);
+                }
+                resetSelectedRows();
+              }}
+              groups={tableGroups}
+            />
+
+            <DataTableRefreshButton
+              isDisabled={peers?.length == 0}
+              onClick={() => {
+                mutate("/groups").then();
+                mutate("/users").then();
+                mutate("/peers").then();
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </>
  );
 }
--- a/src/modules/posture-checks/checks/PostureCheckProcess.tsx
+++ b/src/modules/posture-checks/checks/PostureCheckProcess.tsx
@@ -0,0 +1,310 @@
+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 { ModalClose, ModalFooter } from "@components/modal/Modal";
+import Paragraph from "@components/Paragraph";
+import { cn, validator } from "@utils/helpers";
+import { isEmpty, uniqueId } from "lodash";
+import {
+  ExternalLinkIcon,
+  MinusCircleIcon,
+  PlusCircle,
+  ServerCogIcon,
+  TerminalIcon,
+} from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import AppleIcon from "@/assets/icons/AppleIcon";
+import WindowsIcon from "@/assets/icons/WindowsIcon";
+import { Process, ProcessCheck } from "@/interfaces/PostureCheck";
+import { PostureCheckCard } from "@/modules/posture-checks/ui/PostureCheckCard";
+
+type Props = {
+  value?: ProcessCheck;
+  onChange: (value: ProcessCheck | undefined) => void;
+};
+
+export const PostureCheckProcess = ({ value, onChange }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PostureCheckCard
+      open={open}
+      setOpen={setOpen}
+      key={open ? 1 : 0}
+      active={value?.processes && value?.processes?.length > 0}
+      title={"Process"}
+      description={
+        "Restrict access in your network based on running processes of a peer."
+      }
+      icon={<ServerCogIcon size={18} />}
+      iconClass={"bg-gradient-to-tr from-nb-gray-500 to-nb-gray-300"}
+      modalWidthClass={"max-w-xl"}
+      onReset={() => onChange(undefined)}
+    >
+      <CheckContent
+        value={value}
+        onChange={(v) => {
+          onChange(v);
+          setOpen(false);
+        }}
+      />
+    </PostureCheckCard>
+  );
+};
+
+const CheckContent = ({ value, onChange }: Props) => {
+  const [processes, setProcesses] = useState<Process[]>(
+    value?.processes
+      ? value.processes.map((p) => {
+          return {
+            id: uniqueId("process"),
+            linux_path: p?.linux_path || "",
+            mac_path: p?.mac_path || "",
+            windows_path: p?.windows_path || "",
+          };
+        })
+      : [
+          {
+            id: uniqueId("process"),
+            linux_path: "",
+            mac_path: "",
+            windows_path: "",
+          },
+        ],
+  );
+
+  const handleProcessChange = (
+    id: string,
+    linux_path: string,
+    mac_path: string,
+    windows_path: string,
+  ) => {
+    const newProcesses = processes.map((p) =>
+      p.id === id ? { ...p, linux_path, mac_path, windows_path } : p,
+    );
+    setProcesses(newProcesses);
+  };
+
+  const removeProcess = (id: string) => {
+    const newProcesses = processes.filter((p) => p.id !== id);
+    setProcesses(newProcesses);
+  };
+
+  const addProcess = () => {
+    setProcesses([
+      ...processes,
+      {
+        id: uniqueId("process"),
+        linux_path: "",
+        mac_path: "",
+        windows_path: "",
+      },
+    ]);
+  };
+
+  const pathErrors = useMemo(() => {
+    if (processes && processes.length > 0) {
+      return processes.map((p) => {
+        return {
+          id: p.id,
+          errorMacPath: p?.mac_path
+            ? validator.isValidUnixFilePath(p?.mac_path || "")
+              ? ""
+              : "Please enter a valid macOS file path"
+            : "",
+          errorLinuxPath: p?.linux_path
+            ? validator.isValidUnixFilePath(p?.linux_path || "")
+              ? ""
+              : "Please enter a valid Unix file path"
+            : "",
+          errorWindowsPath: p?.windows_path
+            ? validator.isValidWindowsFilePath(p?.windows_path || "")
+              ? ""
+              : "Please enter a valid Windows file path"
+            : "",
+        };
+      });
+    } else {
+      return [];
+    }
+  }, [processes]);
+
+  const hasErrorsOrIsEmpty = useMemo(() => {
+    if (processes.length === 0) return true;
+    const hasOnlyEmptyPaths = processes.some(
+      (p) => p.linux_path === "" && p.mac_path === "" && p.windows_path === "",
+    );
+    const hasPathErrors = pathErrors.some(
+      (e) =>
+        e.errorLinuxPath !== "" ||
+        e.errorMacPath !== "" ||
+        e.errorWindowsPath !== "",
+    );
+    return hasOnlyEmptyPaths || hasPathErrors;
+  }, [processes, pathErrors]);
+
+  return (
+    <>
+      <div className={"flex flex-col px-8 gap-2 pb-6"}>
+        <div className={"flex justify-between items-start gap-10 mt-2"}>
+          <div>
+            <Label>Processes</Label>
+            <HelpText className={""}>
+              Add the path of an executable file of the process. You can define
+              a path for Linux, macOS and Windows. Peers will only be allowed to
+              connect if the process is running on their system.
+            </HelpText>
+          </div>
+        </div>
+        {processes.length > 0 && (
+          <div className={"mb-2 flex flex-col gap-4 w-full "}>
+            {processes.map((p) => {
+              return (
+                <div key={p.id} className={"flex gap-2 items-center"}>
+                  <div className={"w-full flex flex-col gap-1.5"}>
+                    <Input
+                      customPrefix={<TerminalIcon size={16} />}
+                      placeholder={"/usr/local/bin/netbird"}
+                      value={p.linux_path}
+                      error={
+                        pathErrors.find((e) => e.id === p.id)?.errorLinuxPath
+                      }
+                      errorTooltip={true}
+                      errorTooltipPosition={"top-right"}
+                      className={"w-full"}
+                      onChange={(e) =>
+                        handleProcessChange(
+                          p.id,
+                          e.target.value,
+                          p?.mac_path || "",
+                          p?.windows_path || "",
+                        )
+                      }
+                    />
+                    <Input
+                      customPrefix={
+                        <AppleIcon
+                          size={16}
+                          className={cn(
+                            pathErrors.find((e) => e.id === p.id)
+                              ?.errorMacPath && "fill-red-500",
+                          )}
+                        />
+                      }
+                      placeholder={
+                        "/Applications/NetBird.app/Contents/MacOS/netbird"
+                      }
+                      value={p.mac_path}
+                      error={
+                        pathErrors.find((e) => e.id === p.id)?.errorMacPath
+                      }
+                      errorTooltip={true}
+                      errorTooltipPosition={"top-right"}
+                      className={"w-full"}
+                      onChange={(e) =>
+                        handleProcessChange(
+                          p.id,
+                          p?.linux_path || "",
+                          e.target.value,
+                          p?.windows_path || "",
+                        )
+                      }
+                    />
+                    <Input
+                      customPrefix={
+                        <WindowsIcon
+                          size={16}
+                          className={cn(
+                            pathErrors.find((e) => e.id === p.id)
+                              ?.errorWindowsPath && "fill-red-500",
+                          )}
+                        />
+                      }
+                      placeholder={`C:\\ProgramData\\NetBird\\netbird.exe`}
+                      value={p.windows_path}
+                      errorTooltip={true}
+                      errorTooltipPosition={"top-right"}
+                      error={
+                        pathErrors.find((e) => e.id === p.id)?.errorWindowsPath
+                      }
+                      className={"w-full"}
+                      onChange={(e) =>
+                        handleProcessChange(
+                          p.id,
+                          p?.linux_path || "",
+                          p?.mac_path || "",
+                          e.target.value,
+                        )
+                      }
+                    />
+                  </div>
+
+                  <Button
+                    className={"h-[42px]"}
+                    variant={"default-outline"}
+                    onClick={() => removeProcess(p.id)}
+                  >
+                    <MinusCircleIcon size={15} />
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <Button
+          variant={"dotted"}
+          size={"sm"}
+          onClick={addProcess}
+          className={"mt-1"}
+        >
+          <PlusCircle size={16} />
+          Add Process
+        </Button>
+      </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-posture-checks#process-check"
+              }
+              target={"_blank"}
+            >
+              Process Check
+              <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"}
+            disabled={hasErrorsOrIsEmpty}
+            onClick={() => {
+              if (isEmpty(processes)) {
+                onChange(undefined);
+              } else {
+                onChange({
+                  processes: processes.filter(
+                    (p) =>
+                      p.linux_path !== "" ||
+                      p.mac_path !== "" ||
+                      p.windows_path !== "",
+                  ),
+                });
+              }
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </ModalFooter>
+    </>
+  );
+};
--- a/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
@@ -0,0 +1,112 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { ScrollArea } from "@components/ScrollArea";
+import { tryGetProcessNameFromPath } from "@utils/helpers";
+import { TerminalIcon } from "lucide-react";
+import * as React from "react";
+import AppleIcon from "@/assets/icons/AppleIcon";
+import WindowsIcon from "@/assets/icons/WindowsIcon";
+import { ProcessCheck } from "@/interfaces/PostureCheck";
+
+type Props = {
+  check?: ProcessCheck;
+  children?: React.ReactNode;
+};
+export const ProcessTooltip = ({ check, children }: Props) => {
+  return check ? (
+    <FullTooltip
+      className={"w-full min-w-0"}
+      interactive={true}
+      contentClassName={"p-0"}
+      content={
+        <div
+          className={
+            "text-neutral-300 text-sm max-w-xs flex flex-col gap-1 min-w-0"
+          }
+        >
+          <div className={"px-4 pt-3"}>
+            <span>
+              <span className={"text-green-500 font-semibold"}>Allow only</span>{" "}
+              peers which are running the following processes
+            </span>
+          </div>
+
+          <ScrollArea
+            className={
+              "max-h-[275px] overflow-y-auto flex flex-col px-4 min-w-0"
+            }
+          >
+            <div className={"flex flex-col gap-3 mt-1 text-xs mb-3.5 min-w-0"}>
+              {check.processes.map((p, index) => {
+                return (
+                  <div className={"flex-col flex gap-1 min-w-0"} key={index}>
+                    {p?.linux_path && (
+                      <Badge
+                        variant={"gray"}
+                        useHover={false}
+                        className={"justify-start font-medium text-xs min-w-0"}
+                      >
+                        <span className={"mr-1.5"}>
+                          <TerminalIcon size={12} />
+                        </span>
+                        <span
+                          className={"truncate inline-block "}
+                          title={p?.linux_path}
+                        >
+                          {tryGetProcessNameFromPath(p?.linux_path) ||
+                            "Unknown path"}
+                        </span>
+                      </Badge>
+                    )}
+
+                    {p?.mac_path && (
+                      <Badge
+                        variant={"gray"}
+                        useHover={false}
+                        className={"justify-start font-medium text-xs min-w-0"}
+                      >
+                        <span className={"mr-1.5"}>
+                          <AppleIcon size={12} />
+                        </span>
+                        <span
+                          className={"truncate inline-block "}
+                          title={p?.mac_path}
+                        >
+                          {tryGetProcessNameFromPath(p?.mac_path) ||
+                            "Unknown path"}
+                        </span>
+                      </Badge>
+                    )}
+
+                    {p?.windows_path && (
+                      <Badge
+                        variant={"gray"}
+                        useHover={false}
+                        className={"justify-start font-medium text-xs min-w-0"}
+                      >
+                        <span className={"mr-1.5"}>
+                          <WindowsIcon size={12} />
+                        </span>
+                        <span
+                          className={"truncate inline-block"}
+                          title={p?.windows_path}
+                        >
+                          {tryGetProcessNameFromPath(p?.windows_path) ||
+                            "Unknown path"}
+                        </span>
+                      </Badge>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        </div>
+      }
+    >
+      {children}
+    </FullTooltip>
+  ) : (
+    children
+  );
+};
--- a/src/modules/posture-checks/modal/PostureCheckModal.tsx
+++ b/src/modules/posture-checks/modal/PostureCheckModal.tsx
@@ -24,6 +24,7 @@ import { PostureCheckGeoLocation } from "@/modules/posture-checks/checks/Posture
 import { PostureCheckNetBirdVersion } from "@/modules/posture-checks/checks/PostureCheckNetBirdVersion";
 import { PostureCheckOperatingSystem } from "@/modules/posture-checks/checks/PostureCheckOperatingSystem";
 import { PostureCheckPeerNetworkRange } from "@/modules/posture-checks/checks/PostureCheckPeerNetworkRange";
+import { PostureCheckProcess } from "@/modules/posture-checks/checks/PostureCheckProcess";

 type Props = {
  open: boolean;
@@ -38,7 +39,7 @@ export default function PostureCheckModal({
  onSuccess,
  postureCheck,
 }: Props) {
-  const postureCheckRequest = useApiCall("/posture-checks");
+  const postureCheckRequest = useApiCall<PostureCheck>("/posture-checks");
  const { mutate } = useSWRConfig();

  const [name, setName] = useState(postureCheck?.name || "");
@@ -58,6 +59,9 @@ export default function PostureCheckModal({
  const [peerNetworkRangeCheck, setPeerNetworkRangeCheck] = useState(
    postureCheck?.checks.peer_network_range_check || undefined,
  );
+  const [processCheck, setProcessCheck] = useState(
+    postureCheck?.checks.process_check || undefined,
+  );

  const validateOSCheck = (osCheck?: OperatingSystemVersionCheck) => {
    if (!osCheck) return;
@@ -98,6 +102,7 @@ export default function PostureCheckModal({
        geo_location_check: validateLocationCheck(geoLocationCheck),
        os_version_check: validateOSCheck(osVersionCheck),
        peer_network_range_check: peerNetworkRangeCheck,
+        process_check: processCheck,
      },
    };

@@ -133,7 +138,8 @@ export default function PostureCheckModal({
    !!nbVersionCheck ||
    !!geoLocationCheck ||
    !!osVersionCheck ||
-    !!peerNetworkRangeCheck;
+    !!peerNetworkRangeCheck ||
+    !!processCheck;
  const canCreate = !isEmpty(name) && isAtLeastOneCheckEnabled;

  const [tab, setTab] = useState("checks");
@@ -163,7 +169,10 @@ export default function PostureCheckModal({
                Checks
              </TabsTrigger>

-              <TabsTrigger value={"general"}>
+              <TabsTrigger
+                value={"general"}
+                disabled={!isAtLeastOneCheckEnabled}
+              >
                <Text
                  size={16}
                  className={
@@ -184,13 +193,17 @@ export default function PostureCheckModal({
                  value={geoLocationCheck}
                  onChange={setGeoLocationCheckCheck}
                />
+                <PostureCheckPeerNetworkRange
+                  value={peerNetworkRangeCheck}
+                  onChange={setPeerNetworkRangeCheck}
+                />
                <PostureCheckOperatingSystem
                  value={osVersionCheck}
                  onChange={setOsVersionCheck}
                />
-                <PostureCheckPeerNetworkRange
-                  value={peerNetworkRangeCheck}
-                  onChange={setPeerNetworkRangeCheck}
+                <PostureCheckProcess
+                  value={processCheck}
+                  onChange={setProcessCheck}
                />
              </>
            </TabsContent>
@@ -243,12 +256,23 @@ export default function PostureCheckModal({
            </div>
            <div className={"flex gap-3 w-full justify-end"}>
              <>
-                <Button
-                  variant={"secondary"}
-                  onClick={() => onOpenChange(false)}
-                >
-                  Cancel
-                </Button>
+                {tab == "checks" && (
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => onOpenChange(false)}
+                  >
+                    Cancel
+                  </Button>
+                )}
+
+                {tab == "general" && (
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("checks")}
+                  >
+                    Back
+                  </Button>
+                )}

                {!postureCheck && tab == "checks" && (
                  <Button
--- a/src/modules/posture-checks/table/PostureCheckBrowseTable.tsx
+++ b/src/modules/posture-checks/table/PostureCheckBrowseTable.tsx
@@ -4,10 +4,14 @@ import { DataTable } from "@components/table/DataTable";
 import DataTableHeader from "@components/table/DataTableHeader";
 import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
 import { useLocalStorage } from "@hooks/useLocalStorage";
-import type { ColumnDef, SortingState } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
 import useFetchApi from "@utils/api";
 import { usePathname } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { PostureCheckChecksCell } from "@/modules/posture-checks/table/cells/PostureCheckChecksCell";
@@ -17,7 +21,7 @@ type Props = {
  onAdd: (checks: PostureCheck[]) => void;
 };

-export default function PostureCheckBrowseTable({ onAdd }: Props) {
+export default function PostureCheckBrowseTable({ onAdd }: Readonly<Props>) {
  const { data: postureChecks, isLoading } =
    useFetchApi<PostureCheck[]>("/posture-checks");
  const { mutate } = useSWRConfig();
@@ -34,9 +38,14 @@ export default function PostureCheckBrowseTable({ onAdd }: Props) {
    ],
  );

+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+
  return (
    <div className={""}>
      <DataTable
+        showResetFilterButton={false}
+        rowSelection={selectedRows}
+        setRowSelection={setSelectedRows}
        isLoading={isLoading}
        text={"Posture Check"}
        sorting={sorting}
@@ -73,14 +82,12 @@ export default function PostureCheckBrowseTable({ onAdd }: Props) {
      >
        {() => {
          return (
-            <>
-              <DataTableRefreshButton
-                isDisabled={postureChecks?.length == 0}
-                onClick={() => {
-                  mutate("/posture-checks");
-                }}
-              />
-            </>
+            <DataTableRefreshButton
+              isDisabled={postureChecks?.length == 0}
+              onClick={() => {
+                mutate("/posture-checks");
+              }}
+            />
          );
        }}
      </DataTable>
--- a/src/modules/posture-checks/table/cells/PostureCheckChecksCell.tsx
+++ b/src/modules/posture-checks/table/cells/PostureCheckChecksCell.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@utils/helpers";
-import { Disc3Icon, FlagIcon, NetworkIcon } from "lucide-react";
+import { Disc3Icon, FlagIcon, NetworkIcon, ServerCogIcon } from "lucide-react";
 import * as React from "react";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import { PostureCheck } from "@/interfaces/PostureCheck";
@@ -7,6 +7,7 @@ import { GeoLocationTooltip } from "@/modules/posture-checks/checks/tooltips/Geo
 import { NetBirdVersionTooltip } from "@/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip";
 import { OperatingSystemTooltip } from "@/modules/posture-checks/checks/tooltips/OperatingSystemTooltip";
 import { PeerNetworkRangeTooltip } from "@/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip";
+import { ProcessTooltip } from "@/modules/posture-checks/checks/tooltips/ProcessTooltip";

 type Props = {
  check: PostureCheck;
@@ -71,6 +72,18 @@ export const PostureCheckChecksCell = ({ check }: Props) => {
              </div>
            </PeerNetworkRangeTooltip>
          )}
+
+          {check.checks.process_check && (
+            <ProcessTooltip check={check.checks.process_check}>
+              <div
+                className={cn(
+                  "bg-gradient-to-tr from-nb-gray-500 to-nb-gray-300 h-8 w-8 rounded-full flex items-center justify-center relative z-[8] hover:scale-[1.1] transition-all",
+                )}
+              >
+                <ServerCogIcon size={14} />
+              </div>
+            </ProcessTooltip>
+          )}
        </div>
      </div>
    </div>
--- a/src/modules/posture-checks/table/cells/PostureCheckPolicyUsageCell.tsx
+++ b/src/modules/posture-checks/table/cells/PostureCheckPolicyUsageCell.tsx
@@ -49,7 +49,10 @@ export const PostureCheckPolicyUsageCell = ({ check }: Props) => {
        interactive={false}
      >
        <Badge
-          onClick={() => router.push("/access-control")}
+          onClick={(e) => {
+            e.stopPropagation();
+            router.push("/access-control");
+          }}
          variant={"gray"}
          useHover={!!(check.policies && check.policies?.length > 0)}
          className={cn(
--- a/src/modules/posture-checks/ui/PostureCheckIcons.tsx
+++ b/src/modules/posture-checks/ui/PostureCheckIcons.tsx
@@ -2,8 +2,7 @@ import { cn } from "@utils/helpers";
 import Image from "next/image";
 import * as React from "react";
 import { FaWindows } from "react-icons/fa6";
-import { CountryDERounded } from "@/assets/countries/CountryDERounded";
-import { CountryUSRounded } from "@/assets/countries/CountryUSRounded";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import AppleLogo from "@/assets/os-icons/apple.svg";

@@ -24,7 +23,7 @@ export const PostureCheckIcons = () => {
            "h-6 w-6 overflow-hidden rounded-full flex items-center justify-center"
          }
        >
-          <CountryDERounded />
+          <RoundedFlag country="de" />
        </div>
      </Circle>
      <Circle className={"z-[3]"}>
@@ -36,7 +35,7 @@ export const PostureCheckIcons = () => {
            "h-6 w-6 overflow-hidden rounded-full flex items-center justify-center"
          }
        >
-          <CountryUSRounded />
+          <RoundedFlag country="us" />
        </div>
      </Circle>
      <Circle className={"z-[1] top-2 "}>
--- a/src/modules/posture-checks/ui/PostureCheckTabTrigger.tsx
+++ b/src/modules/posture-checks/ui/PostureCheckTabTrigger.tsx
@@ -2,9 +2,13 @@ import { TabsTrigger } from "@components/Tabs";
 import { ShieldCheck } from "lucide-react";
 import * as React from "react";

-export const PostureCheckTabTrigger = () => {
+type Props = {
+  disabled?: boolean;
+};
+
+export const PostureCheckTabTrigger = ({ disabled = false }: Props) => {
  return (
-    <TabsTrigger value={"posture_checks"}>
+    <TabsTrigger value={"posture_checks"} disabled={disabled}>
      <ShieldCheck size={16} />
      Posture Checks
    </TabsTrigger>
--- a/src/modules/route-group/GroupedRouteHighAvailabilityCell.tsx
+++ b/src/modules/route-group/GroupedRouteHighAvailabilityCell.tsx
@@ -5,10 +5,10 @@ import { cn } from "@utils/helpers";
 import { HelpCircle, PlusCircle } from "lucide-react";
 import { useRouter } from "next/navigation";
 import * as React from "react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import { GroupedRoute } from "@/interfaces/Route";
-import RouteAddRoutingPeerModal from "@/modules/routes/RouteAddRoutingPeerModal";
+import { useAddRoutingPeer } from "@/modules/routes/RouteAddRoutingPeerProvider";

 type Props = {
  groupedRoute: GroupedRoute;
@@ -43,109 +43,99 @@ export default function GroupedRouteHighAvailabilityCell({
    [],
  );

-  const [modal, setModal] = useState(false);
+  const { openAddRoutingPeerModal } = useAddRoutingPeer();

  return (
-    <>
-      {!groupedRoute.is_using_route_groups && (
-        <RouteAddRoutingPeerModal
-          groupedRoute={groupedRoute}
-          modal={modal}
-          setModal={setModal}
-        />
-      )}
-
-      <FullTooltip
-        interactive={false}
-        content={
-          <div className={"max-w-xs text-xs"}>
-            {!isActive && !groupedRoute.is_using_route_groups && (
-              <>
-                {disabledText}
-                <div className={"inline-flex mt-2"}>
-                  Go ahead and add more routing peers to enable high
-                  availability for this network route.
-                </div>
-              </>
-            )}
-            {isActive && !groupedRoute.is_using_route_groups && (
-              <>
-                {enabledText}
-                <div className={"inline-flex mt-2"}>
-                  You can add more peers to increase the availability of this
-                  network route.
-                </div>
-              </>
-            )}
-            {!isActive && groupedRoute.is_using_route_groups && (
-              <>
-                {disabledText}
-                <div className={"inline-flex mt-2"}>
-                  To configure, you must add more peers to a group in this
-                  route. You can do it in the Peers menu.
-                </div>
-              </>
-            )}
-            {isActive && groupedRoute.is_using_route_groups && (
-              <>
-                {enabledText}
-                <div className={"inline-flex mt-2"}>
-                  You can add more peers to a group in this route by going to
-                  the peers page.
-                </div>
-              </>
-            )}
-          </div>
-        }
-      >
-        <div className={"flex gap-3 items-center"}>
-          <Badge
-            variant={isActive ? "green" : "gray"}
-            className={cn(
-              "inline-flex gap-2  min-w-[110px] font-medium items-center justify-center min-h-[34px]",
-              !isActive && "opacity-30",
-            )}
-            useHover={true}
-          >
-            {isActive ? (
-              <>
-                <div className={"h-2 w-2 rounded-full bg-green-500"}></div>
-                {groupedRoute.high_availability_count} Peer(s)
-              </>
-            ) : (
-              <>
-                <div className={"h-2 w-2 rounded-full bg-nb-gray-700"}></div>
-                Disabled
-              </>
-            )}
-            <HelpCircle size={12} />
-          </Badge>
-          {groupedRoute.is_using_route_groups && (
-            <Button
-              size={"xs"}
-              variant={"secondary"}
-              className={"min-w-[130px]"}
-              onClick={() => router.push("/peers")}
-            >
-              <>
-                <PeerIcon size={12} />
-                Go to Peers
-              </>
-            </Button>
+    <FullTooltip
+      interactive={false}
+      content={
+        <div className={"max-w-xs text-xs"}>
+          {!isActive && !groupedRoute.is_using_route_groups && (
+            <>
+              {disabledText}
+              <div className={"inline-flex mt-2"}>
+                Go ahead and add more routing peers to enable high availability
+                for this network route.
+              </div>
+            </>
+          )}
+          {isActive && !groupedRoute.is_using_route_groups && (
+            <>
+              {enabledText}
+              <div className={"inline-flex mt-2"}>
+                You can add more peers to increase the availability of this
+                network route.
+              </div>
+            </>
+          )}
+          {!isActive && groupedRoute.is_using_route_groups && (
+            <>
+              {disabledText}
+              <div className={"inline-flex mt-2"}>
+                To configure, you must add more peers to a group in this route.
+                You can do it in the Peers menu.
+              </div>
+            </>
+          )}
+          {isActive && groupedRoute.is_using_route_groups && (
+            <>
+              {enabledText}
+              <div className={"inline-flex mt-2"}>
+                You can add more peers to a group in this route by going to the
+                peers page.
+              </div>
+            </>
          )}
-          {!groupedRoute.is_using_route_groups && (
-            <Button
-              size={"xs"}
-              variant={"secondary"}
-              className={"min-w-[130px]"}
-              onClick={() => setModal(true)}
-            >
-              <PlusCircle size={12} />
-              Add Peer
-            </Button>
-          )}{" "}
        </div>
-      </FullTooltip>
-    </>
+      }
+    >
+      <div className={"flex gap-3 items-center"}>
+        <Badge
+          variant={isActive ? "green" : "gray"}
+          className={cn(
+            "inline-flex gap-2  min-w-[110px] font-medium items-center justify-center min-h-[34px]",
+            !isActive && "opacity-30",
+          )}
+          useHover={true}
+        >
+          {isActive ? (
+            <>
+              <div className={"h-2 w-2 rounded-full bg-green-500"}></div>
+              {groupedRoute.high_availability_count} Peer(s)
+            </>
+          ) : (
+            <>
+              <div className={"h-2 w-2 rounded-full bg-nb-gray-700"}></div>
+              Disabled
+            </>
+          )}
+          <HelpCircle size={12} />
+        </Badge>
+        {groupedRoute.is_using_route_groups && (
+          <Button
+            size={"xs"}
+            variant={"secondary"}
+            className={"min-w-[130px]"}
+            onClick={() => router.push("/peers")}
+          >
+            <>
+              <PeerIcon size={12} />
+              Go to Peers
+            </>
+          </Button>
+        )}
+        {!groupedRoute.is_using_route_groups && (
+          <Button
+            size={"xs"}
+            variant={"secondary"}
+            className={"min-w-[130px]"}
+            onClick={() => openAddRoutingPeerModal(groupedRoute)}
+          >
+            <PlusCircle size={12} />
+            Add Peer
+          </Button>
+        )}{" "}
+      </div>
+    </FullTooltip>
  );
 }
--- a/src/modules/route-group/GroupedRouteNetworkRangeCell.tsx
+++ b/src/modules/route-group/GroupedRouteNetworkRangeCell.tsx
@@ -1,8 +1,36 @@
+import { DomainListBadge } from "@components/ui/DomainListBadge";
+import { IconDirectionSign } from "@tabler/icons-react";
+import { InfoIcon } from "lucide-react";
+import * as React from "react";
+import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
+
 type Props = {
-  network: string;
+  network?: string;
+  domains?: string[];
 };
-export default function GroupedRouteNetworkRangeCell({ network }: Props) {
-  return (
+export default function GroupedRouteNetworkRangeCell({
+  network,
+  domains,
+}: Props) {
+  const isExitNode = network === "0.0.0.0/0";
+  const hasDomains = domains ? domains.length > 0 : false;
+
+  return hasDomains && domains ? (
+    <DomainListBadge domains={domains} />
+  ) : isExitNode ? (
+    <ExitNodeHelpTooltip>
+      <div className={"flex gap-2 items-center dark:text-nb-gray-300 group"}>
+        <IconDirectionSign size={16} className={"text-yellow-400"} />
+        Exit Node{" "}
+        <InfoIcon
+          size={14}
+          className={
+            "text-nb-gray-500 group-hover:text-nb-gray-400 transition-all"
+          }
+        />
+      </div>
+    </ExitNodeHelpTooltip>
+  ) : (
    <div className={"font-mono dark:text-nb-gray-300 flex max-w-[10px]"}>
      {network}
    </div>
--- a/src/modules/route-group/NetworkRoutesTable.tsx
+++ b/src/modules/route-group/NetworkRoutesTable.tsx
@@ -17,11 +17,13 @@ import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import GroupRouteProvider from "@/contexts/GroupRouteProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { GroupedRoute, Route } from "@/interfaces/Route";
+import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
 import GroupedRouteActionCell from "@/modules/route-group/GroupedRouteActionCell";
 import GroupedRouteHighAvailabilityCell from "@/modules/route-group/GroupedRouteHighAvailabilityCell";
 import GroupedRouteNameCell from "@/modules/route-group/GroupedRouteNameCell";
 import GroupedRouteNetworkRangeCell from "@/modules/route-group/GroupedRouteNetworkRangeCell";
 import GroupedRouteTypeCell from "@/modules/route-group/GroupedRouteTypeCell";
+import { RouteAddRoutingPeerProvider } from "@/modules/routes/RouteAddRoutingPeerProvider";
 import RouteModal from "@/modules/routes/RouteModal";
 import RouteTable from "@/modules/routes/RouteTable";

@@ -38,6 +40,14 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
    accessorKey: "description",
    sortingFn: "text",
  },
+  {
+    accessorKey: "description_search",
+    sortingFn: "text",
+  },
+  {
+    accessorKey: "domain_search",
+    sortingFn: "text",
+  },
  {
    id: "enabled",
    accessorKey: "enabled",
@@ -49,13 +59,22 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
      return row.group_names?.map((name) => name).join(", ");
    },
  },
+  {
+    id: "domains",
+    accessorFn: (row) => {
+      return row.domains?.map((name) => name).join(", ");
+    },
+  },
  {
    accessorKey: "network",
    header: ({ column }) => {
-      return <DataTableHeader column={column}>Network Range</DataTableHeader>;
+      return <DataTableHeader column={column}>Network</DataTableHeader>;
    },
    cell: ({ row }) => (
-      <GroupedRouteNetworkRangeCell network={row.original.network} />
+      <GroupedRouteNetworkRangeCell
+        network={row.original.network}
+        domains={row.original?.domains}
+      />
    ),
  },
  {
@@ -120,121 +139,135 @@ export default function NetworkRoutesTable({
  );

  return (
-    <DataTable
-      isLoading={isLoading}
-      text={"Network Routes"}
-      sorting={sorting}
-      setSorting={setSorting}
-      columns={GroupedRouteTableColumns}
-      data={groupedRoutes}
-      searchPlaceholder={"Search by network, range, name or groups..."}
-      columnVisibility={{
-        enabled: false,
-        description: false,
-        group_names: false,
-      }}
-      renderExpandedRow={(row) => {
-        const data = cloneDeep(row);
-        return (
-          <GroupRouteProvider groupedRoute={data}>
-            <RouteTable row={data} />
-          </GroupRouteProvider>
-        );
-      }}
-      getStartedCard={
-        <GetStartedTest
-          icon={
-            <SquareIcon
-              icon={
-                <NetworkRoutesIcon className={"fill-nb-gray-200"} size={20} />
-              }
-              color={"gray"}
-              size={"large"}
-            />
-          }
-          title={"Create New Route"}
-          description={
-            "It looks like you don't have any routes. Access LANs and VPC by adding a network route."
-          }
-          button={
-            <RouteModal>
-              <Button variant={"primary"} className={""}>
-                <PlusCircle size={16} />
-                Add Route
-              </Button>
-            </RouteModal>
-          }
-          learnMore={
-            <>
-              Learn more about
-              <InlineLink
-                href={
-                  "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+    <RouteAddRoutingPeerProvider>
+      <DataTable
+        isLoading={isLoading}
+        text={"Network Routes"}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={GroupedRouteTableColumns}
+        data={groupedRoutes}
+        searchPlaceholder={"Search by network, range, name or groups..."}
+        columnVisibility={{
+          enabled: false,
+          description: false,
+          description_search: false,
+          group_names: false,
+          domains: false,
+          domain_search: false,
+        }}
+        renderExpandedRow={(row) => {
+          const data = cloneDeep(row);
+          return (
+            <GroupRouteProvider groupedRoute={data}>
+              <RouteTable row={data} />
+            </GroupRouteProvider>
+          );
+        }}
+        getStartedCard={
+          <GetStartedTest
+            icon={
+              <SquareIcon
+                icon={
+                  <NetworkRoutesIcon className={"fill-nb-gray-200"} size={20} />
                }
-                target={"_blank"}
-              >
-                Network Routes
-                <ExternalLinkIcon size={12} />
-              </InlineLink>
-            </>
-          }
-        />
-      }
-      rightSide={() => (
-        <>
-          {routes && routes?.length > 0 && (
-            <RouteModal>
-              <Button variant={"primary"} className={"ml-auto"}>
-                <PlusCircle size={16} />
-                Add Route
-              </Button>
-            </RouteModal>
-          )}
-        </>
-      )}
-    >
-      {(table) => (
-        <>
-          <ButtonGroup disabled={routes?.length == 0}>
-            <ButtonGroup.Button
-              onClick={() => {
-                table.setPageIndex(0);
-                table.getColumn("enabled")?.setFilterValue(true);
-              }}
-              disabled={routes?.length == 0}
-              variant={
-                table.getColumn("enabled")?.getFilterValue() == true
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              Enabled
-            </ButtonGroup.Button>
-            <ButtonGroup.Button
-              onClick={() => {
-                table.setPageIndex(0);
-                table.getColumn("enabled")?.setFilterValue(undefined);
-              }}
-              disabled={routes?.length == 0}
-              variant={
-                table.getColumn("enabled")?.getFilterValue() == undefined
-                  ? "tertiary"
-                  : "secondary"
-              }
-            >
-              All
-            </ButtonGroup.Button>
-          </ButtonGroup>
-          <DataTableRowsPerPage table={table} disabled={routes?.length == 0} />
-          <DataTableRefreshButton
-            isDisabled={routes?.length == 0}
-            onClick={() => {
-              mutate("/setup-keys").then();
-              mutate("/groups").then();
-            }}
+                color={"gray"}
+                size={"large"}
+              />
+            }
+            title={"Create New Route"}
+            description={
+              "It looks like you don't have any routes. Access LANs and VPC by adding a network route."
+            }
+            button={
+              <div className={"gap-x-4 flex items-center justify-center"}>
+                <AddExitNodeButton />
+                <RouteModal>
+                  <Button variant={"primary"} className={""}>
+                    <PlusCircle size={16} />
+                    Add Route
+                  </Button>
+                </RouteModal>
+              </div>
+            }
+            learnMore={
+              <>
+                Learn more about
+                <InlineLink
+                  href={
+                    "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+                  }
+                  target={"_blank"}
+                >
+                  Network Routes
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </>
+            }
          />
-        </>
-      )}
-    </DataTable>
+        }
+        rightSide={() => (
+          <>
+            {routes && routes?.length > 0 && (
+              <div className={"gap-x-4 ml-auto flex"}>
+                <AddExitNodeButton />
+                <RouteModal>
+                  <Button variant={"primary"} className={""}>
+                    <PlusCircle size={16} />
+                    Add Route
+                  </Button>
+                </RouteModal>
+              </div>
+            )}
+          </>
+        )}
+      >
+        {(table) => (
+          <>
+            <ButtonGroup disabled={routes?.length == 0}>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  table.getColumn("enabled")?.setFilterValue(true);
+                }}
+                disabled={routes?.length == 0}
+                variant={
+                  table.getColumn("enabled")?.getFilterValue() == true
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Enabled
+              </ButtonGroup.Button>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  table.getColumn("enabled")?.setFilterValue(undefined);
+                }}
+                disabled={routes?.length == 0}
+                variant={
+                  table.getColumn("enabled")?.getFilterValue() == undefined
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                All
+              </ButtonGroup.Button>
+            </ButtonGroup>
+            <DataTableRowsPerPage
+              table={table}
+              disabled={routes?.length == 0}
+            />
+            <DataTableRefreshButton
+              isDisabled={routes?.length == 0}
+              onClick={() => {
+                mutate("/setup-keys").then();
+                mutate("/groups").then();
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </RouteAddRoutingPeerProvider>
  );
 }
--- a/src/modules/route-group/useGroupedRoutes.tsx
+++ b/src/modules/route-group/useGroupedRoutes.tsx
@@ -53,15 +53,26 @@ export default function useGroupedRoutes({ routes }: Props) {
      });

      const allGroupNames = [...peerGroupNames, ...distributionGroupNames];
+      const hasDomains = routes[0].domains
+        ? routes[0].domains.length > 0
+        : false;
+
+      const childDescriptions =
+        routes?.map((r) => r?.description).join(", ") || "";
+      const domainString = routes?.map((r) => r.domains?.join(", ")).join(", ");

      results.push({
        id,
        enabled: routes.find((r) => r.enabled) != undefined,
-        network: routes[0].network,
+        network: !hasDomains ? routes[0].network : undefined,
+        domains: hasDomains ? routes[0].domains || undefined : undefined,
+        domain_search: domainString,
+        keep_route: routes[0].keep_route || false,
        network_id: routes[0].network_id,
        high_availability_count: allPeers,
        is_using_route_groups: !!groupPeerRoute,
        description: groupPeerRoute ? groupPeerRoute?.description : undefined,
+        description_search: childDescriptions,
        routes: routes,
        group_names: allGroupNames,
      });
--- a/src/modules/routes/RouteAddRoutingPeerModal.tsx
+++ b/src/modules/routes/RouteAddRoutingPeerModal.tsx
@@ -89,6 +89,13 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
      .map((g) => g.id)
      .filter((id) => id !== undefined) as string[];

+    let useRange = false;
+    if (routeNetwork?.domains) {
+      useRange = routeNetwork.domains.length <= 0;
+    } else {
+      useRange = true;
+    }
+
    createRoute(
      {
        network_id: routeNetwork.network_id,
@@ -96,7 +103,9 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
        enabled: true,
        peer: routingPeer?.id || undefined,
        peer_groups: undefined,
-        network: routeNetwork.network,
+        network: useRange ? routeNetwork.network : undefined,
+        domains: useRange ? undefined : routeNetwork.domains,
+        keep_route: routeNetwork.keep_route || false,
        metric: 9999,
        masquerade: true,
        groups: groupIds,
@@ -139,7 +148,7 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
        <div>
          <Label>Routing Peer</Label>
          <HelpText>
-            Assign a single peer as a routing peer for the Network CIDR.
+            Assign a single peer as a routing peer for the network route.
          </HelpText>
          <PeerSelector
            onChange={setRoutingPeer}
--- a/src/modules/routes/RouteAddRoutingPeerProvider.tsx
+++ b/src/modules/routes/RouteAddRoutingPeerProvider.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { useState } from "react";
+import { GroupedRoute } from "@/interfaces/Route";
+import RouteAddRoutingPeerModal from "@/modules/routes/RouteAddRoutingPeerModal";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const GroupedRouteContext = React.createContext(
+  {} as {
+    openAddRoutingPeerModal: (groupedRoute: GroupedRoute) => void;
+  },
+);
+
+export const RouteAddRoutingPeerProvider = ({ children }: Props) => {
+  const [groupedRoute, setGroupedRoute] = useState<GroupedRoute>();
+  const [modal, setModal] = useState(false);
+  const openAddRoutingPeerModal = (groupedRoute: GroupedRoute) => {
+    setGroupedRoute(groupedRoute);
+    setModal(true);
+  };
+
+  return (
+    <GroupedRouteContext.Provider value={{ openAddRoutingPeerModal }}>
+      {children}
+      {modal && groupedRoute && (
+        <RouteAddRoutingPeerModal
+          groupedRoute={groupedRoute}
+          modal={modal}
+          setModal={setModal}
+        />
+      )}
+    </GroupedRouteContext.Provider>
+  );
+};
+
+export const useAddRoutingPeer = () => {
+  const context = React.useContext(GroupedRouteContext);
+  if (context === undefined) {
+    throw new Error(
+      "useGroupedRoute must be used within a GroupedRouteProvider",
+    );
+  }
+  return context;
+};
--- a/src/modules/routes/RouteModal.tsx
+++ b/src/modules/routes/RouteModal.tsx
@@ -1,7 +1,9 @@
 "use client";

 import Button from "@components/Button";
+import ButtonGroup from "@components/ButtonGroup";
 import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import FullTooltip from "@components/FullTooltip";
 import HelpText from "@components/HelpText";
 import InlineLink from "@components/InlineLink";
 import { Input } from "@components/Input";
@@ -20,23 +22,29 @@ import { PeerSelector } from "@components/PeerSelector";
 import { SegmentedTabs } from "@components/SegmentedTabs";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
+import InputDomain, { domainReducer } from "@components/ui/InputDomain";
+import { IconDirectionSign } from "@tabler/icons-react";
 import { cn } from "@utils/helpers";
 import cidr from "ip-cidr";
 import { uniqBy } from "lodash";
 import {
  ArrowDownWideNarrow,
+  CircleHelp,
  ExternalLinkIcon,
  FolderGit2,
+  GlobeIcon,
+  GlobeLockIcon,
  MonitorSmartphoneIcon,
  NetworkIcon,
  PlusCircle,
+  PlusIcon,
  Power,
  RouteIcon,
  Settings2,
  Text,
  VenetianMask,
 } from "lucide-react";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import { useRoutes } from "@/contexts/RoutesProvider";
 import { Peer } from "@/interfaces/Peer";
@@ -63,19 +71,36 @@ export default function RouteModal({ children }: Props) {
 type ModalProps = {
  onSuccess?: (route: Route) => void;
  peer?: Peer;
+  exitNode?: boolean;
+  isFirstExitNode?: boolean;
 };

-export function RouteModalContent({ onSuccess, peer }: ModalProps) {
+export function RouteModalContent({
+  onSuccess,
+  peer,
+  exitNode,
+  isFirstExitNode = false,
+}: ModalProps) {
  const { createRoute } = useRoutes();
+  const [tab, setTab] = useState("network");

-  // General
-  const [networkIdentifier, setNetworkIdentifier] = useState("");
+  /**
+   * Network Identifier, Description & Network Range
+   */
+  const [networkIdentifier, setNetworkIdentifier] = useState(
+    exitNode
+      ? peer
+        ? `Exit Node (${
+            peer.name.length > 25
+              ? peer.name.substring(0, 25) + "..."
+              : peer.name
+          })`
+        : "Exit Node"
+      : "",
+  );
  const [description, setDescription] = useState("");
-
-  // Network
-  const [networkRange, setNetworkRange] = useState("");
+  const [networkRange, setNetworkRange] = useState(exitNode ? "0.0.0.0/0" : "");
  const [routingPeer, setRoutingPeer] = useState<Peer | undefined>(peer);
-
  const [
    routingPeerGroups,
    setRoutingPeerGroups,
@@ -84,29 +109,49 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
    initial: [],
  });

+  /**
+   * DNS Routes
+   * IP Range or Domain Tab = ip-range or domains
+   */
+  const [domainRoutes, setDomainRoutes] = useReducer(domainReducer, []);
+  const [domainError, setDomainError] = useState<boolean>(false);
+  const [routeType, setRouteTyp] = useState<string>("ip-range");
+  const [keepRoute, setKeepRoute] = useState<boolean>(true);
+
+  const isMasqueradeDisabled = useMemo(() => {
+    if (exitNode) return true;
+    return routeType === "domains";
+  }, [exitNode, routeType]);
+
+  const isDomainOrRangeEntered = useMemo(() => {
+    if (routeType === "ip-range") return networkRange !== "";
+    const isEmptyDomain = domainRoutes.some((d) => d.name === "");
+    const isAtLeastOneDomain = domainRoutes.length > 0;
+    return !isEmptyDomain && isAtLeastOneDomain && !domainError;
+  }, [domainRoutes, routeType, networkRange, domainError]);
+
+  // Enable Masquerade if domain route type is selected
+  useEffect(() => {
+    if (routeType === "domains") setMasquerade(true);
+  }, [routeType]);
+
+  /**
+   * Distribution Groups
+   */
  const [groups, setGroups, { getGroupsToUpdate }] = useGroupHelper({
    initial: [],
  });

-  // Additional Settings
+  /**
+   * Additional Settings
+   */
  const [enabled, setEnabled] = useState<boolean>(true);
  const [metric, setMetric] = useState("9999");
  const [masquerade, setMasquerade] = useState<boolean>(true);

-  // Validate CIDR
-  const cidrError = useMemo(() => {
-    if (networkRange == "") return "";
-    const validCIDR = cidr.isValidAddress(networkRange);
-    if (!validCIDR) return "Please enter a valid CIDR, e.g., 192.168.1.0/24";
-  }, [networkRange]);
-
-  // Refs to manage focus on tab change
-  const networkRangeRef = useRef<HTMLInputElement>(null);
-  const nameRef = useRef<HTMLInputElement>(null);
-  const [peerTab, setPeerTab] = useState("routing-peer");
-
-  // Create route
-  // TODO Refactor to avoid duplicate code
+  /**
+   * Create Route
+   */
  const createRouteHandler = async () => {
    const g1 = getAllRoutingGroupsToUpdate();
    const g2 = getGroupsToUpdate();
@@ -130,6 +175,11 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
      .filter((g) => g !== undefined) as string[];

    const useSinglePeer = peerTab === "routing-peer";
+    const domainRouteNames =
+      routeType === "domains"
+        ? domainRoutes.map((d) => d.name).filter((d) => d !== "")
+        : undefined;
+    const useKeepRoute = routeType === "domains" ? keepRoute : undefined;

    createRoute(
      {
@@ -138,7 +188,9 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
        enabled: enabled,
        peer: useSinglePeer ? routingPeer?.id : undefined,
        peer_groups: useSinglePeer ? undefined : peerGroups || undefined,
-        network: networkRange,
+        network: routeType === "ip-range" ? networkRange : undefined,
+        domains: domainRouteNames,
+        keep_route: useKeepRoute,
        metric: Number(metric) || 9999,
        masquerade: masquerade,
        groups: groupIds,
@@ -147,36 +199,91 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
    );
  };

-  // Is button disabled
-  const isDisabled = useMemo(() => {
-    return (
-      networkIdentifier == "" ||
+  /**
+   * Refs to manage input focus on tab change
+   */
+  const networkRangeRef = useRef<HTMLInputElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const [peerTab, setPeerTab] = useState("routing-peer");
+
+  /**
+   * Validate CIDR Range
+   */
+  const cidrError = useMemo(() => {
+    if (networkRange == "") return "";
+    const validCIDR = cidr.isValidAddress(networkRange);
+    if (!validCIDR) return "Please enter a valid CIDR, e.g., 192.168.1.0/24";
+  }, [networkRange]);
+
+  /**
+   * Allow to create route only when all fields are filled
+   */
+  const isNetworkEntered = useMemo(() => {
+    return !(
      (cidrError && cidrError.length > 1) ||
      (peerTab === "peer-group" && routingPeerGroups.length == 0) ||
      (peerTab === "routing-peer" && !routingPeer) ||
-      groups.length == 0
+      groups.length == 0 ||
+      !isDomainOrRangeEntered
    );
  }, [
-    networkIdentifier,
    cidrError,
    peerTab,
    routingPeerGroups.length,
    routingPeer,
    groups,
+    isDomainOrRangeEntered,
  ]);

-  const [tab, setTab] = useState("network");
+  const networkIdentifierError = useMemo(() => {
+    return (networkIdentifier?.length || 0) > 40
+      ? "Network Identifier must be less than 40 characters"
+      : "";
+  }, [networkIdentifier]);
+
+  const metricError = useMemo(() => {
+    return parseInt(metric) < 1 || parseInt(metric) > 9999
+      ? "Metric must be between 1 and 9999"
+      : "";
+  }, [metric]);
+
+  const isNameEntered = useMemo(() => {
+    return networkIdentifier != "" && networkIdentifierError == "";
+  }, [networkIdentifier, networkIdentifierError]);
+
+  const canCreateOrSave = useMemo(() => {
+    return isNetworkEntered && isNameEntered && metricError == "";
+  }, [isNetworkEntered, isNameEntered, metricError]);

  return (
    <ModalContent maxWidthClass={"max-w-xl"}>
      <ModalHeader
-        icon={<NetworkRoutesIcon className={"fill-netbird"} />}
-        title={"Create New  Route"}
-        description={"Access LANs and VPC by adding a network route."}
-        color={"netbird"}
+        icon={
+          exitNode ? (
+            <IconDirectionSign size={20} />
+          ) : (
+            <NetworkRoutesIcon className={"fill-netbird"} />
+          )
+        }
+        title={
+          exitNode
+            ? isFirstExitNode
+              ? "Set Up Exit Node"
+              : "Add Exit Node"
+            : "Create New  Route"
+        }
+        truncate={!!peer}
+        description={
+          exitNode
+            ? peer
+              ? `Route all traffic through the peer '${peer.name}'`
+              : "Route all internet traffic through a peer"
+            : "Access LANs and VPC by adding a network route."
+        }
+        color={exitNode ? "yellow" : "netbird"}
      />

-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
        <TabsList justify={"start"} className={"px-8"}>
          <TabsTrigger
            value={"network"}
@@ -192,6 +299,7 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
          </TabsTrigger>
          <TabsTrigger
            value={"general"}
+            disabled={!isNetworkEntered}
            onClick={() => nameRef.current?.focus()}
          >
            <Text
@@ -202,7 +310,10 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
            />
            Name & Description
          </TabsTrigger>
-          <TabsTrigger value={"settings"}>
+          <TabsTrigger
+            value={"settings"}
+            disabled={!isNetworkEntered || !isNameEntered}
+          >
            <Settings2
              size={16}
              className={
@@ -212,6 +323,196 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
            Additional Settings
          </TabsTrigger>
        </TabsList>
+        <TabsContent value={"network"} className={"pb-8"}>
+          <div className={"px-8 flex-col flex gap-6"}>
+            <div className={cn(exitNode && "hidden")}>
+              <Label>Route Type</Label>
+              <HelpText>
+                Select your route type to add either a network range or a list
+                of domains.
+              </HelpText>
+              <div className={"flex justify-between items-center w-full"}>
+                <ButtonGroup className={"w-full"}>
+                  <ButtonGroup.Button
+                    variant={routeType == "ip-range" ? "tertiary" : "secondary"}
+                    onClick={() => setRouteTyp("ip-range")}
+                    className={"w-full"}
+                  >
+                    <NetworkIcon size={16} />
+                    Network Range
+                  </ButtonGroup.Button>
+                  <ButtonGroup.Button
+                    variant={routeType == "domains" ? "tertiary" : "secondary"}
+                    onClick={() => setRouteTyp("domains")}
+                    className={"w-full"}
+                  >
+                    <GlobeIcon size={16} />
+                    Domains
+                  </ButtonGroup.Button>
+                </ButtonGroup>
+              </div>
+
+              <div
+                className={cn(
+                  "mt-5 mb-3",
+                  routeType !== "ip-range" && "hidden",
+                )}
+              >
+                <Label>Network Range</Label>
+                <HelpText>Add a private IPv4 address range</HelpText>
+                <Input
+                  ref={networkRangeRef}
+                  customPrefix={<NetworkIcon size={16} />}
+                  placeholder={"e.g., 172.16.0.0/16"}
+                  value={networkRange}
+                  className={"font-mono !text-[13px]"}
+                  error={cidrError}
+                  onChange={(e) => setNetworkRange(e.target.value)}
+                />
+              </div>
+
+              <div
+                className={cn("mt-5 mb-3", routeType !== "domains" && "hidden")}
+              >
+                <Label>Domains</Label>
+                <HelpText>
+                  Add domains that dynamically resolve to one or more IPv4
+                  addresses
+                </HelpText>
+                <div>
+                  {domainRoutes.length > 0 && (
+                    <div className={"flex gap-3 w-full mb-3"}>
+                      <div className={"flex flex-col gap-2 w-full"}>
+                        {domainRoutes.map((domain, i) => {
+                          return (
+                            <InputDomain
+                              key={domain.id}
+                              value={domain}
+                              onChange={(d) =>
+                                setDomainRoutes({
+                                  type: "UPDATE",
+                                  index: i,
+                                  d,
+                                })
+                              }
+                              onError={setDomainError}
+                              onRemove={() =>
+                                setDomainRoutes({
+                                  type: "REMOVE",
+                                  index: i,
+                                })
+                              }
+                            />
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                  <Button
+                    variant={"dotted"}
+                    className={"w-full"}
+                    size={"sm"}
+                    onClick={() => setDomainRoutes({ type: "ADD" })}
+                  >
+                    <PlusIcon size={14} />
+                    Add Domain
+                  </Button>
+                </div>
+                <div className={cn("mt-6 w-full")}>
+                  <FullTooltip
+                    side={"top"}
+                    content={
+                      <div className={"text-xs max-w-xs"}>
+                        DNS records for load-balanced systems often change.
+                        Keeping resolved addresses ensures ongoing connections
+                        to active resources remain uninterrupted.
+                      </div>
+                    }
+                  >
+                    <FancyToggleSwitch
+                      value={keepRoute}
+                      onChange={setKeepRoute}
+                      label={
+                        <>
+                          <div className={"flex gap-2"}>
+                            <GlobeLockIcon size={14} />
+                            Keep Routes
+                            <CircleHelp
+                              size={12}
+                              className={"top-[1px] relative text-nb-gray-300"}
+                            />
+                          </div>
+                        </>
+                      }
+                      helpText={
+                        <div>
+                          Retain previously resolved routes after IP address
+                          updates to maintain stable connections.
+                        </div>
+                      }
+                    />
+                  </FullTooltip>
+                </div>
+              </div>
+            </div>
+
+            {exitNode && peer ? (
+              <></>
+            ) : (
+              <SegmentedTabs value={peerTab} onChange={setPeerTab}>
+                <SegmentedTabs.List>
+                  <SegmentedTabs.Trigger value={"routing-peer"}>
+                    <MonitorSmartphoneIcon size={16} />
+                    Routing Peer
+                  </SegmentedTabs.Trigger>
+
+                  <SegmentedTabs.Trigger value={"peer-group"} disabled={!!peer}>
+                    <FolderGit2 size={16} />
+                    Peer Group
+                  </SegmentedTabs.Trigger>
+                </SegmentedTabs.List>
+                <SegmentedTabs.Content value={"routing-peer"}>
+                  <div>
+                    <HelpText>
+                      Assign a single peer as a routing peer for the
+                      {exitNode ? " exit node." : " network route."}
+                    </HelpText>
+                    <PeerSelector
+                      onChange={setRoutingPeer}
+                      value={routingPeer}
+                      disabled={!!peer}
+                    />
+                  </div>
+                </SegmentedTabs.Content>
+                <SegmentedTabs.Content value={"peer-group"}>
+                  <div>
+                    <HelpText>
+                      Assign a peer group with Linux machines to be used as
+                      {exitNode ? " exit nodes." : " routing peers."}
+                    </HelpText>
+                    <PeerGroupSelector
+                      max={1}
+                      onChange={setRoutingPeerGroups}
+                      values={routingPeerGroups}
+                    />
+                  </div>
+                </SegmentedTabs.Content>
+              </SegmentedTabs>
+            )}
+
+            <div>
+              <Label>Distribution Groups</Label>
+              <HelpText>
+                {exitNode
+                  ? peer
+                    ? `Route all internet traffic through this peer for the following groups`
+                    : `Route all internet traffic through the peer(s) for the following groups`
+                  : "Advertise this route to peers that belong to the following groups"}
+              </HelpText>
+              <PeerGroupSelector onChange={setGroups} values={groups} />
+            </div>
+          </div>
+        </TabsContent>
        <TabsContent value={"general"} className={"px-8 pb-6"}>
          <div className={"flex flex-col gap-6"}>
            <div>
@@ -220,6 +521,7 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
                Add a unique network identifier that is assigned to each device.
              </HelpText>
              <Input
+                error={networkIdentifierError}
                autoFocus={true}
                tabIndex={0}
                ref={nameRef}
@@ -244,69 +546,6 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
            </div>
          </div>
        </TabsContent>
-        <TabsContent value={"network"} className={"pb-8"}>
-          <div className={"px-8 flex-col flex gap-6"}>
-            <div>
-              <Label>Network Range</Label>
-              <HelpText>Add a private IP address range</HelpText>
-              <Input
-                ref={networkRangeRef}
-                customPrefix={<NetworkIcon size={16} />}
-                placeholder={"e.g., 172.16.0.0/16"}
-                value={networkRange}
-                className={"font-mono !text-[13px]"}
-                error={cidrError}
-                onChange={(e) => setNetworkRange(e.target.value)}
-              />
-            </div>
-            <SegmentedTabs value={peerTab} onChange={setPeerTab}>
-              <SegmentedTabs.List>
-                <SegmentedTabs.Trigger value={"routing-peer"}>
-                  <MonitorSmartphoneIcon size={16} />
-                  Routing Peer
-                </SegmentedTabs.Trigger>
-
-                <SegmentedTabs.Trigger value={"peer-group"} disabled={!!peer}>
-                  <FolderGit2 size={16} />
-                  Peer Group
-                </SegmentedTabs.Trigger>
-              </SegmentedTabs.List>
-              <SegmentedTabs.Content value={"routing-peer"}>
-                <div>
-                  <HelpText>
-                    Assign a single peer as a routing peer for the Network CIDR.
-                  </HelpText>
-                  <PeerSelector
-                    onChange={setRoutingPeer}
-                    value={routingPeer}
-                    disabled={!!peer}
-                  />
-                </div>
-              </SegmentedTabs.Content>
-              <SegmentedTabs.Content value={"peer-group"}>
-                <div>
-                  <HelpText>
-                    Assign peer group with Linux machines to be used as routing
-                    peers.
-                  </HelpText>
-                  <PeerGroupSelector
-                    max={1}
-                    onChange={setRoutingPeerGroups}
-                    values={routingPeerGroups}
-                  />
-                </div>
-              </SegmentedTabs.Content>
-            </SegmentedTabs>
-            <div>
-              <Label>Distribution Groups</Label>
-              <HelpText>
-                Advertise this route to peers that belong to the following
-                groups
-              </HelpText>
-              <PeerGroupSelector onChange={setGroups} values={groups} />
-            </div>
-          </div>
-        </TabsContent>
        <TabsContent value={"settings"} className={"pb-4"}>
          <div className={"px-8 flex flex-col gap-6"}>
            <FancyToggleSwitch
@@ -320,24 +559,27 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
              }
              helpText={"Use this switch to enable or disable the route."}
            />
-            <FancyToggleSwitch
-              value={masquerade}
-              onChange={setMasquerade}
-              label={
-                <>
-                  <VenetianMask size={15} />
-                  Masquerade
-                </>
-              }
-              helpText={
-                "Allow access to your private networks without configuring routes on your local routers or other devices."
-              }
-            />
+            {!exitNode && (
+              <FancyToggleSwitch
+                value={masquerade}
+                onChange={setMasquerade}
+                label={
+                  <>
+                    <VenetianMask size={15} />
+                    Masquerade
+                  </>
+                }
+                helpText={
+                  "Allow access to your private networks without configuring routes on your local routers or other devices."
+                }
+              />
+            )}
+
            <div className={cn("flex justify-between")}>
              <div>
-                <Label>Metrics</Label>
+                <Label>Metric</Label>
                <HelpText className={"max-w-[200px]"}>
-                  Lower metrics indicating higher priority routes.
+                  A lower metric indicates higher priority routes.
                </HelpText>
              </div>

@@ -346,6 +588,8 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
                max={9999}
                maxWidthClass={"max-w-[200px]"}
                value={metric}
+                error={metricError}
+                errorTooltip={true}
                type={"number"}
                onChange={(e) => setMetric(e.target.value)}
                customPrefix={
@@ -366,28 +610,64 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
            Learn more about
            <InlineLink
              href={
-                "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+                exitNode
+                  ? "https://docs.netbird.io/how-to/configuring-default-routes-for-internet-traffic"
+                  : "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
              }
              target={"_blank"}
            >
-              Network Routes
+              {exitNode ? "Exit Nodes" : "Network Routes"}
              <ExternalLinkIcon size={12} />
            </InlineLink>
          </Paragraph>
        </div>
        <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {tab == "network" && (
+            <ModalClose asChild={true}>
+              <Button variant={"secondary"}>Cancel</Button>
+            </ModalClose>
+          )}

-          <Button
-            variant={"primary"}
-            disabled={isDisabled}
-            onClick={createRouteHandler}
-          >
-            <PlusCircle size={16} />
-            Add Route
-          </Button>
+          {tab == "general" && (
+            <Button variant={"secondary"} onClick={() => setTab("network")}>
+              Back
+            </Button>
+          )}
+
+          {tab == "settings" && (
+            <Button variant={"secondary"} onClick={() => setTab("general")}>
+              Back
+            </Button>
+          )}
+
+          {tab == "network" && (
+            <Button
+              variant={"primary"}
+              onClick={() => setTab("general")}
+              disabled={!isNetworkEntered}
+            >
+              Continue
+            </Button>
+          )}
+          {tab == "general" && (
+            <Button
+              variant={"primary"}
+              onClick={() => setTab("settings")}
+              disabled={!isNameEntered || !isNetworkEntered}
+            >
+              Continue
+            </Button>
+          )}
+          {tab == "settings" && (
+            <Button
+              variant={"primary"}
+              disabled={!canCreateOrSave}
+              onClick={createRouteHandler}
+            >
+              <PlusCircle size={16} />
+              {exitNode ? "Add Exit Node" : "Add Route"}
+            </Button>
+          )}
        </div>
      </ModalFooter>
    </ModalContent>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maycon Santos	58cec8fcd1	ignore mappin spelling (#408 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details	2024-08-13 15:59:38 +02:00
Eduard Gert	d34ae9beb2	Sync changes with netbird cloud (#407 ) * Update axa oidc library and package.json * Update ACL port state to show correct value * Filter user groups by unique groups only * Add peer multiselect, optimize dropdown performance for peer selection, remove 'all' group from some dropdowns, various ui / ux optimizations * Add peer multiselect, optimize dropdown performance for peer selection, remove 'all' group from some dropdowns, various ui / ux optimizations	2024-08-13 15:51:22 +02:00
Eduard Gert	650496f670	Include all settings in put request to prevent overwrite (#405 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details	2024-07-31 18:48:59 +02:00
Tom Hubrecht	121778c4a6	Fix package-lock.json (#401 )	2024-07-12 10:35:31 +02:00
juliaroesschen	d4102c5d04	fix typo in route update modal (#397 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details	2024-07-04 15:05:57 +02:00
pascal-fischer	e78c35bdbe	Fix DNS modal to allow one char domains (#393 ) * update regex to allow one char domains in DNS routing modal * update regex	2024-07-04 10:50:37 +02:00
juliaroesschen	6ebee98695	Fix typo in Network Routes dialogue (#395 )	2024-07-04 10:48:49 +02:00
juliaroesschen	f4b28d5f40	Fix typo in routes modal	2024-06-28 11:38:39 +02:00
Eduard Gert	b4b6d9295b	Add DNS routes (#390 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details	2024-06-17 09:32:55 +02:00
Maycon Santos	4898742ee9	Fix http://localhost:3000/ url validation case (#388 ) * Fix http://localhost:3000/ url validation case * adjust min regex occurrences	2024-06-12 18:18:14 +02:00
Eduard Gert	79164e9dd5	Add process posture check (#378 ) * Add process posture check * Add support for separate linux and mac paths	2024-06-12 16:32:10 +02:00
Eduard Gert	5caeab118b	UX changes for modals and refactoring (#380 )	2024-05-08 14:42:04 +02:00
Eduard Gert	3f943bb7d4	Use next/font/local instead of next/font/google (#376 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details	2024-04-19 17:12:56 +02:00
Eduard Gert	96b939e6cc	Add changes from cloud repo to public one (#377 ) * Remove unused files * Update activity descriptions * Update SelectDropdown * Update redirect logic for / page * Update HelpText.tsx * Update wording for exit nodes	2024-04-19 17:12:37 +02:00
Eduard Gert	5e13548b81	Add better input validation for setup-keys, nameserver and routes (#373 ) * Return the correct promise for errors * Update icon * Add better validation for routes * Add better validation for DNS * Add better validation for setup keys * Merge exit nodes to input validation	2024-04-17 15:27:21 +02:00
Eduard Gert	2272a1d2a4	Add Exit Nodes (#374 ) * Add exit node feature * Fix spelling * Hide masquerade for exit nodes * Add exit node information to peers list * Change exit node button, add indicator to peers table * Add steps to route modal * Add hook to check if peer has exit nodes * Hide exit node indicator for regular users * Add documentation links	2024-04-17 13:11:38 +02:00
Eduard Gert	fc3da50346	Add fallbacks for setup key name & setup key group names (#370 ) * Add try catch block for global search * Add fallback for group name * Add fallback for setup key name * Do not load setup key modal if it's not open * Check if auto_groups actually exists for the setup keys * Add fallback for group names in setup keys table * Add fallback for group names in peers table	2024-04-11 16:42:27 +02:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540"><defs><g id="d"><g id="b"><path id="a" d="M0 0v1h.5z" transform="rotate(18 3.157 -.5)"/><use xlink:href="#a" transform="scale(-1 1)"/></g><g id="c"><use xlink:href="#b" transform="rotate(72)"/><use xlink:href="#b" transform="rotate(144)"/></g><use xlink:href="#c" transform="scale(-1 1)"/></g></defs><path fill="#039" d="M0 0h810v540H0z"/><g fill="#fc0" transform="matrix(30 0 0 30 405 270)"><use xlink:href="#d" y="-6"/><use xlink:href="#d" y="6"/><g id="e"><use xlink:href="#d" x="-6"/><use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use xlink:href="#e" transform="scale(-1 1)"/></g></svg>