From 3ba7acdecfd2e70086c16fca1c52be3ee523d17d Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Mon, 23 Dec 2024 11:20:01 +0100
Subject: [PATCH] Add new networks feature (#427)

---
 package-lock.json                             | 567 ++++++++++++------
 package.json                                  |   6 +-
 src/app/(dashboard)/dns/settings/page.tsx     |  29 +-
 src/app/(dashboard)/network-routes/page.tsx   |   5 +-
 src/app/(dashboard)/network/layout.tsx        |   8 +
 src/app/(dashboard)/network/page.tsx          | 229 +++++++
 src/app/(dashboard)/networks/layout.tsx       |   8 +
 src/app/(dashboard)/networks/page.tsx         |  58 ++
 src/app/(dashboard)/settings/page.tsx         |   7 +
 src/app/(dashboard)/team/user/page.tsx        |  20 +-
 src/app/(dashboard)/team/users/page.tsx       |   4 +-
 src/auth/OIDCError.tsx                        |  11 +-
 src/components/Button.tsx                     |   5 +
 src/components/Input.tsx                      |  17 +-
 src/components/PeerGroupSelector.tsx          | 116 +++-
 src/components/Tabs.tsx                       |   7 +-
 src/components/VerticalTabs.tsx               |  33 +-
 src/components/modal/ModalHeader.tsx          |  15 +-
 src/components/table/Table.tsx                |   4 +-
 src/components/ui/GradientFadedBackground.tsx |   2 +-
 src/components/ui/GroupBadge.tsx              |   1 +
 src/components/ui/MultipleGroups.tsx          |   5 +-
 src/components/ui/UserDropdown.tsx            |   5 +-
 src/contexts/DialogProvider.tsx               |   6 +-
 src/contexts/RoutesProvider.tsx               |  11 +-
 src/interfaces/Account.ts                     |   1 +
 src/interfaces/Group.ts                       |   3 +
 src/interfaces/Network.ts                     |  28 +
 src/interfaces/Route.ts                       |   1 +
 src/layouts/Navigation.tsx                    |  41 +-
 src/layouts/PageContainer.tsx                 |   1 +
 .../access-control/AccessControlModal.tsx     |  16 +-
 .../access-control/useAccessControl.ts        |  16 +-
 .../access-tokens/AccessTokenActionCell.tsx   |   7 +-
 .../access-tokens/CreateAccessTokenModal.tsx  |  10 +-
 src/modules/account/useAccount.tsx            |   2 +-
 src/modules/activity/ActivityDescription.tsx  |  92 +++
 src/modules/activity/ActivityTypeIcon.tsx     |   9 +
 src/modules/groups/useGroupIdsToGroups.tsx    |  25 +
 src/modules/networks/NetworkModal.tsx         | 164 +++++
 src/modules/networks/NetworkProvider.tsx      | 340 +++++++++++
 .../NetworkRangeCell.tsx}                     |  18 +-
 src/modules/networks/PolicyCell.tsx           |  30 +
 .../misc/NetworkInformationSquare.tsx         |  82 +++
 .../networks/misc/NetworkNavigation.tsx       |  27 +
 .../misc/NetworkRoutesDeprecationInfo.tsx     |  23 +
 .../resources/NetworkResourceModal.tsx        | 194 ++++++
 .../networks/resources/ResourceActionCell.tsx |  39 ++
 .../resources/ResourceAddressCell.tsx         |  22 +
 .../networks/resources/ResourceGroupCell.tsx  |  15 +
 .../networks/resources/ResourceNameCell.tsx   |  32 +
 .../networks/resources/ResourcePolicyCell.tsx | 101 ++++
 .../resources/ResourceSingleAddressInput.tsx  |  65 ++
 .../networks/resources/ResourceTypeCell.tsx   |  22 +
 .../networks/resources/ResourcesSection.tsx   |  68 +++
 .../networks/resources/ResourcesTable.tsx     | 113 ++++
 .../routing-peers/NetworkRoutingPeerModal.tsx | 337 +++++++++++
 .../routing-peers/NetworkRoutingPeerName.tsx  |  56 ++
 .../NetworkRoutingPeersSection.tsx            |  70 +++
 .../NetworkRoutingPeersTable.tsx              | 100 +++
 .../routing-peers/RoutingPeersActionCell.tsx  |  40 ++
 .../RoutingPeersMasqueradeCell.tsx            |  48 ++
 .../networks/table/NetworkActionCell.tsx      |  67 +++
 .../networks/table/NetworkNameCell.tsx        |  25 +
 .../networks/table/NetworkPolicyCell.tsx      |  56 ++
 .../networks/table/NetworkResourceCell.tsx    |  56 ++
 .../networks/table/NetworkRoutingPeerCell.tsx | 108 ++++
 src/modules/networks/table/NetworksTable.tsx  | 194 ++++++
 .../route-group/NetworkRoutesTable.tsx        |   4 +
 src/modules/route-group/useGroupedRoutes.tsx  |   2 +
 src/modules/routes/RouteModal.tsx             |   1 -
 src/modules/routes/RouteTable.tsx             |   4 +
 src/modules/routes/RouteUpdateModal.tsx       |   4 +
 src/modules/settings/NetworkSettingsTab.tsx   |  88 +++
 src/modules/users/ServiceUserModal.tsx        |   8 +-
 src/modules/users/ServiceUsersTable.tsx       |  12 +-
 src/modules/users/UserRoleSelector.tsx        |   2 +
 .../users/table-cells/UserActionCell.tsx      |   1 +
 .../users/table-cells/UserGroupCell.tsx       |  26 +-
 .../users/table-cells/UserNameCell.tsx        |   5 +-
 .../users/table-cells/UserStatusCell.tsx      |   5 +-
 src/utils/api.tsx                             |  46 +-
 src/utils/helpers.ts                          |  23 +
 src/utils/netbird.ts                          |  10 +-
 tailwind.config.ts                            |   1 +
 85 files changed, 3871 insertions(+), 314 deletions(-)
 create mode 100644 src/app/(dashboard)/network/layout.tsx
 create mode 100644 src/app/(dashboard)/network/page.tsx
 create mode 100644 src/app/(dashboard)/networks/layout.tsx
 create mode 100644 src/app/(dashboard)/networks/page.tsx
 create mode 100644 src/interfaces/Network.ts
 create mode 100644 src/modules/groups/useGroupIdsToGroups.tsx
 create mode 100644 src/modules/networks/NetworkModal.tsx
 create mode 100644 src/modules/networks/NetworkProvider.tsx
 rename src/modules/{peer/PeerRouteNetworkCell.tsx => networks/NetworkRangeCell.tsx} (58%)
 create mode 100644 src/modules/networks/PolicyCell.tsx
 create mode 100644 src/modules/networks/misc/NetworkInformationSquare.tsx
 create mode 100644 src/modules/networks/misc/NetworkNavigation.tsx
 create mode 100644 src/modules/networks/misc/NetworkRoutesDeprecationInfo.tsx
 create mode 100644 src/modules/networks/resources/NetworkResourceModal.tsx
 create mode 100644 src/modules/networks/resources/ResourceActionCell.tsx
 create mode 100644 src/modules/networks/resources/ResourceAddressCell.tsx
 create mode 100644 src/modules/networks/resources/ResourceGroupCell.tsx
 create mode 100644 src/modules/networks/resources/ResourceNameCell.tsx
 create mode 100644 src/modules/networks/resources/ResourcePolicyCell.tsx
 create mode 100644 src/modules/networks/resources/ResourceSingleAddressInput.tsx
 create mode 100644 src/modules/networks/resources/ResourceTypeCell.tsx
 create mode 100644 src/modules/networks/resources/ResourcesSection.tsx
 create mode 100644 src/modules/networks/resources/ResourcesTable.tsx
 create mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx
 create mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
 create mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
 create mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
 create mode 100644 src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
 create mode 100644 src/modules/networks/routing-peers/RoutingPeersMasqueradeCell.tsx
 create mode 100644 src/modules/networks/table/NetworkActionCell.tsx
 create mode 100644 src/modules/networks/table/NetworkNameCell.tsx
 create mode 100644 src/modules/networks/table/NetworkPolicyCell.tsx
 create mode 100644 src/modules/networks/table/NetworkResourceCell.tsx
 create mode 100644 src/modules/networks/table/NetworkRoutingPeerCell.tsx
 create mode 100644 src/modules/networks/table/NetworksTable.tsx
 create mode 100644 src/modules/settings/NetworkSettingsTab.tsx

diff --git a/package-lock.json b/package-lock.json
index 5a85620..6781cce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,8 +50,8 @@
         "framer-motion": "^10.16.4",
         "ip-cidr": "^3.1.0",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.383.0",
-        "next": "13.5.5",
+        "lucide-react": "^0.460.0",
+        "next": "13.5.7",
         "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
         "react": "^18",
@@ -71,7 +71,7 @@
         "typescript": "^5"
       },
       "devDependencies": {
-        "cypress": "^13.3.3",
+        "cypress": "^13.13.0",
         "postcss": "^8",
         "prettier": "3.0.3",
         "tailwindcss": "^3"
@@ -145,10 +145,11 @@
       }
     },
     "node_modules/@cypress/request": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
-      "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.7.tgz",
+      "integrity": "sha512-LzxlLEMbBOPYB85uXrDqvD4MgcenjRBLIns3zyhx7vTPj/0u2eQhzXvPiGcaJrV38Q9dbkExWp6cOHPJ+EtFYg==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -156,16 +157,16 @@
         "combined-stream": "~1.0.6",
         "extend": "~3.0.2",
         "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "http-signature": "~1.3.6",
+        "form-data": "~4.0.0",
+        "http-signature": "~1.4.0",
         "is-typedarray": "~1.0.0",
         "isstream": "~0.1.2",
         "json-stringify-safe": "~5.0.1",
         "mime-types": "~2.1.19",
         "performance-now": "^2.1.0",
-        "qs": "6.10.4",
+        "qs": "6.13.1",
         "safe-buffer": "^5.1.2",
-        "tough-cookie": "^4.1.3",
+        "tough-cookie": "^5.0.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^8.3.2"
       },
@@ -381,9 +382,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.5.tgz",
-      "integrity": "sha512-agvIhYWp+ilbScg81s/sLueZo8CNEYLjNOqhISxheLmD/AQI4/VxV7bV76i/KzxH4iHy/va0YS9z0AOwGnw4Fg=="
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.7.tgz",
+      "integrity": "sha512-uVuRqoj28Ys/AI/5gVEgRAISd0KWI0HRjOO1CTpNgmX3ZsHb5mdn14Y59yk0IxizXdo7ZjsI2S7qbWnO+GNBcA==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.5.5",
@@ -394,12 +396,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.5.tgz",
-      "integrity": "sha512-FvTdcJdTA7H1FGY8dKPPbf/O0oDC041/znHZwXA7liiGUhgw5hOQ+9z8tWvuz0M5a/SDjY/IRPBAb5FIFogYww==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.7.tgz",
+      "integrity": "sha512-7SxmxMex45FvKtRoP18eftrDCMyL6WQVYJSEE/s7A1AW/fCkznxjEShKet2iVVzf89gWp8HbXGaL4hCaseux6g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -409,12 +412,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.5.tgz",
-      "integrity": "sha512-mTqNIecaojmyia7appVO2QggBe1Z2fdzxgn6jb3x9qlAk8yY2sy4MAcsj71kC9RlenCqDmr9vtC/ESFf110TPA==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.7.tgz",
+      "integrity": "sha512-6iENvgyIkGFLFszBL4b1VfEogKC3TDPEB6/P/lgxmgXVXIV09Q4or1MVn+U/tYyYmm7oHMZ3oxGpHAyJ80nA6g==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -424,12 +428,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.5.tgz",
-      "integrity": "sha512-U9e+kNkfvwh/T8yo+xcslvNXgyMzPPX1IbwCwnHHFmX5ckb1Uc3XZSInNjFQEQR5xhJpB5sFdal+IiBIiLYkZA==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.7.tgz",
+      "integrity": "sha512-P42jDX56wu9zEdVI+Xv4zyTeXB3DpqgE1Gb4bWrc0s2RIiDYr6uKBprnOs1hCGIwfVyByxyTw5Va66QCdFFNUg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -439,12 +444,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.5.tgz",
-      "integrity": "sha512-h7b58eIoNCSmKVC5fr167U0HWZ/yGLbkKD9wIller0nGdyl5zfTji0SsPKJvrG8jvKPFt2xOkVBmXlFOtuKynw==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.7.tgz",
+      "integrity": "sha512-A06vkj+8X+tLRzSja5REm/nqVOCzR+x5Wkw325Q/BQRyRXWGCoNbQ6A+BR5M86TodigrRfI3lUZEKZKe3QJ9Bg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -454,12 +460,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.5.tgz",
-      "integrity": "sha512-6U4y21T1J6FfcpM9uqzBJicxycpB5gJKLyQ3g6KOfBzT8H1sMwfHTRrvHKB09GIn1BCRy5YJHrA1G26DzqR46w==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.7.tgz",
+      "integrity": "sha512-UdHm7AlxIbdRdMsK32cH0EOX4OmzAZ4Xm+UVlS0YdvwLkI3pb7AoBEoVMG5H0Wj6Wpz6GNkrFguHTRLymTy6kw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -469,12 +476,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.5.tgz",
-      "integrity": "sha512-OuqWSAQHJQM2EsapPFTSU/FLQ0wKm7UeRNatiR/jLeCe1V02aB9xmzuWYo2Neaxxag4rss3S8fj+lvMLzwDaFA==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.7.tgz",
+      "integrity": "sha512-c50Y8xBKU16ZGj038H6C13iedRglxvdQHD/1BOtes56gwUrIRDX2Nkzn3mYtpz3Wzax0gfAF9C0Nqljt93IxvA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -484,12 +492,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.5.tgz",
-      "integrity": "sha512-+yLrOZIIZDY4uGn9bLOc0wTgs+M8RuOUFSUK3BhmcLav9e+tcAj0jyBHD4aXv2qWhppUeuYMsyBo1I58/eE6Dg==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.7.tgz",
+      "integrity": "sha512-NcUx8cmkA+JEp34WNYcKW6kW2c0JBhzJXIbw+9vKkt9m/zVJ+KfizlqmoKf04uZBtzFN6aqE2Fyv2MOd021WIA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -499,12 +508,13 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.5.tgz",
-      "integrity": "sha512-SyMxXyJtf9ScMH0Dh87THJMXNFvfkRAk841xyW9SeOX3KxM1buXX3hN7vof4kMGk0Yg996OGsX+7C9ueS8ugsw==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.7.tgz",
+      "integrity": "sha512-wXp+/3NVcuyJDED6gJiLXs5dqHaWO7moAB6aBtjlKZvsxBDxpcyjsfRbtHPeYtaT20zCkmPs69H0K25lrVZmlA==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -514,12 +524,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.5.tgz",
-      "integrity": "sha512-n5KVf2Ok0BbLwofAaHiiKf+BQCj1M8WmTujiER4/qzYAVngnsNSjqEWvJ03raeN9eURqxDO+yL5VRoDrR33H9A==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.7.tgz",
+      "integrity": "sha512-PLyD3Dl6jTTkLG8AoqhPGd5pXtSs8wbqIhWPQt3yEMfnYld/dGYuF2YPs3YHaVFrijCIF9pXY3+QOyvP23Zn7g==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -2496,6 +2507,7 @@
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "safer-buffer": "~2.1.0"
       }
@@ -2505,6 +2517,7 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8"
       }
@@ -2541,7 +2554,8 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -2604,15 +2618,17 @@
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
     },
     "node_modules/aws4": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.12.0.tgz",
-      "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==",
-      "dev": true
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/axe-core": {
       "version": "4.7.0",
@@ -2660,6 +2676,7 @@
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "tweetnacl": "^0.14.3"
       }
@@ -2801,6 +2818,35 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
+      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2840,7 +2886,8 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -2915,9 +2962,9 @@
       }
     },
     "node_modules/ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz",
+      "integrity": "sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==",
       "dev": true,
       "funding": [
         {
@@ -2925,6 +2972,7 @@
           "url": "https://github.com/sponsors/sibiraj-s"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -3283,6 +3331,7 @@
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3322,7 +3371,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -3364,24 +3414,25 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cypress": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.0.tgz",
-      "integrity": "sha512-quIsnFmtj4dBUEJYU4OH0H12bABJpSujvWexC24Ju1gTlKMJbeT6tTO0vh7WNfiBPPjoIXLN+OUqVtiKFs6SGw==",
+      "version": "13.17.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.17.0.tgz",
+      "integrity": "sha512-5xWkaPurwkIljojFidhw8lFScyxhtiFHl/i/3zov+1Z5CmY4t9tjIdvSXfu82Y3w7wt0uR9KkucbhkVvJZLQSA==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
-        "@cypress/request": "^3.0.0",
+        "@cypress/request": "^3.0.6",
         "@cypress/xvfb": "^1.2.4",
-        "@types/node": "^18.17.5",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.6.0",
+        "buffer": "^5.7.1",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
+        "ci-info": "^4.0.0",
         "cli-cursor": "^3.1.0",
         "cli-table3": "~0.6.1",
         "commander": "^6.2.1",
@@ -3396,7 +3447,6 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.0",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -3410,7 +3460,8 @@
         "request-progress": "^3.0.0",
         "semver": "^7.5.3",
         "supports-color": "^8.1.1",
-        "tmp": "~0.2.1",
+        "tmp": "~0.2.3",
+        "tree-kill": "1.2.2",
         "untildify": "^4.0.0",
         "yauzl": "^2.10.0"
       },
@@ -3421,15 +3472,6 @@
         "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
-    "node_modules/cypress/node_modules/@types/node": {
-      "version": "18.18.12",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.12.tgz",
-      "integrity": "sha512-G7slVfkwOm7g8VqcEF1/5SXiMjP3Tbt+pXDU3r/qhlM2KkGm786DUD4xyMA2QzEElFrv/KZV9gjygv4LnkpbMQ==",
-      "dev": true,
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -3440,6 +3482,7 @@
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
       },
@@ -3527,6 +3570,7 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3576,6 +3620,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/easy-bem": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
@@ -3586,6 +3644,7 @@
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -3595,7 +3654,8 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.592",
@@ -3693,6 +3753,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-iterator-helpers": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
@@ -3714,6 +3792,18 @@
         "safe-array-concat": "^1.0.1"
       }
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
@@ -4220,7 +4310,8 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/extract-zip": {
       "version": "2.0.1",
@@ -4249,7 +4340,8 @@
       "dev": true,
       "engines": [
         "node >=0.6.0"
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -4427,22 +4519,24 @@
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
     },
     "node_modules/form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
+        "combined-stream": "^1.0.8",
         "mime-types": "^2.1.12"
       },
       "engines": {
-        "node": ">= 0.12"
+        "node": ">= 6"
       }
     },
     "node_modules/fraction.js": {
@@ -4547,14 +4641,24 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
+      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "dunder-proto": "^1.0.0",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4623,6 +4727,7 @@
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
       }
@@ -4733,11 +4838,12 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4792,9 +4898,10 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -4817,9 +4924,10 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4828,14 +4936,15 @@
       }
     },
     "node_modules/http-signature": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
-      "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^2.0.2",
-        "sshpk": "^1.14.1"
+        "sshpk": "^1.18.0"
       },
       "engines": {
         "node": ">=0.10"
@@ -5058,18 +5167,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-ci": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
-      "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
-      "dev": true,
-      "dependencies": {
-        "ci-info": "^3.2.0"
-      },
-      "bin": {
-        "is-ci": "bin.js"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -5305,7 +5402,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
@@ -5364,7 +5462,8 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
@@ -5416,7 +5515,8 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -5432,7 +5532,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/json5": {
       "version": "1.0.2",
@@ -5465,6 +5566,7 @@
       "engines": [
         "node >=0.6.0"
       ],
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -5689,11 +5791,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.383.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.383.0.tgz",
-      "integrity": "sha512-13xlG0CQCJtzjSQYwwJ3WRqMHtRj3EXmLlorrARt7y+IHnxUCp3XyFNL1DfaGySWxHObDvnu1u1dV+0VMKHUSg==",
+      "version": "0.460.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
+      "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==",
+      "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
     "node_modules/matchmediaquery": {
@@ -5704,6 +5807,15 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5735,6 +5847,7 @@
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -5744,6 +5857,7 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -5825,11 +5939,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "13.5.5",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.5.tgz",
-      "integrity": "sha512-LddFJjpfrtrMMw8Q9VLhIURuSidiCNcMQjRqcPtrKd+Fx07MsG7hYndJb/f2d3I+mTbTotsTJfCnn0eZ/YPk8w==",
+      "version": "13.5.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.5.7.tgz",
+      "integrity": "sha512-W7KIRTE+hPcgGdq89P3mQLDX3m7pJ6nxSyC+YxYaUExE+cS4UledB+Ntk98tKoyhsv6fjb2TRAnD7VDvoqmeFg==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "13.5.5",
+        "@next/env": "13.5.7",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
@@ -5844,15 +5959,15 @@
         "node": ">=16.14.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.5",
-        "@next/swc-darwin-x64": "13.5.5",
-        "@next/swc-linux-arm64-gnu": "13.5.5",
-        "@next/swc-linux-arm64-musl": "13.5.5",
-        "@next/swc-linux-x64-gnu": "13.5.5",
-        "@next/swc-linux-x64-musl": "13.5.5",
-        "@next/swc-win32-arm64-msvc": "13.5.5",
-        "@next/swc-win32-ia32-msvc": "13.5.5",
-        "@next/swc-win32-x64-msvc": "13.5.5"
+        "@next/swc-darwin-arm64": "13.5.7",
+        "@next/swc-darwin-x64": "13.5.7",
+        "@next/swc-linux-arm64-gnu": "13.5.7",
+        "@next/swc-linux-arm64-musl": "13.5.7",
+        "@next/swc-linux-x64-gnu": "13.5.7",
+        "@next/swc-linux-x64-musl": "13.5.7",
+        "@next/swc-win32-arm64-msvc": "13.5.7",
+        "@next/swc-win32-ia32-msvc": "13.5.7",
+        "@next/swc-win32-x64-msvc": "13.5.7"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -5929,9 +6044,13 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6175,7 +6294,8 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
@@ -6407,12 +6527,6 @@
       "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
       "dev": true
     },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "dev": true
-    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -6432,12 +6546,13 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.10.4",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.4.tgz",
-      "integrity": "sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==",
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz",
+      "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -6446,12 +6561,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "dev": true
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6763,12 +6872,6 @@
         "throttleit": "^1.0.0"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true
-    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6909,7 +7012,8 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
@@ -6928,7 +7032,8 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/scheduler": {
       "version": "0.23.0",
@@ -7004,13 +7109,72 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -7062,6 +7226,7 @@
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
       "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -7086,7 +7251,8 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/streamsearch": {
       "version": "1.1.0",
@@ -7429,16 +7595,34 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
-    "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+    "node_modules/tldts": {
+      "version": "6.1.69",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.69.tgz",
+      "integrity": "sha512-Oh/CqRQ1NXNY7cy9NkTPUauOWiTro0jEYZTioGbOmcQh6EC45oribyIMJp0OJO3677r13tO6SKdWoGZUx2BDFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "rimraf": "^3.0.0"
+        "tldts-core": "^6.1.69"
       },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.69",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.69.tgz",
+      "integrity": "sha512-nygxy9n2PBUFQUtAXAc122gGo+04/j5qr5TGQFZTHafTKYvmARVXt2cA5rgero2/dnXUfkdPtiJoKmrd3T+wdA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tmp": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8.17.0"
+        "node": ">=14.14"
       }
     },
     "node_modules/to-regex-range": {
@@ -7453,27 +7637,26 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^6.1.32"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=16"
       }
     },
-    "node_modules/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true,
-      "engines": {
-        "node": ">= 4.0.0"
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
       }
     },
     "node_modules/ts-api-utils": {
@@ -7513,6 +7696,7 @@
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
@@ -7524,7 +7708,8 @@
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "dev": true
+      "dev": true,
+      "license": "Unlicense"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -7695,16 +7880,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "dev": true,
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/use-callback-ref": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
@@ -7764,6 +7939,7 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -7776,6 +7952,7 @@
       "engines": [
         "node >=0.6.0"
       ],
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
diff --git a/package.json b/package.json
index 70e1d3a..5dc826a 100644
--- a/package.json
+++ b/package.json
@@ -55,8 +55,8 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.383.0",
-    "next": "13.5.5",
+    "lucide-react": "^0.460.0",
+    "next": "13.5.7",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18",
@@ -76,7 +76,7 @@
     "typescript": "^5"
   },
   "devDependencies": {
-    "cypress": "^13.3.3",
+    "cypress": "^13.13.0",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"
diff --git a/src/app/(dashboard)/dns/settings/page.tsx b/src/app/(dashboard)/dns/settings/page.tsx
index ffbcb36..866f06d 100644
--- a/src/app/(dashboard)/dns/settings/page.tsx
+++ b/src/app/(dashboard)/dns/settings/page.tsx
@@ -14,17 +14,24 @@ import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { Group } from "@/interfaces/Group";
 import { NameserverSettings } from "@/interfaces/NameserverSettings";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 
 export default function NameServerSettings() {
   const { data: settings, isLoading } =
     useFetchApi<NameserverSettings>("/dns/settings");
 
+  const initialDNSGroups = useGroupIdsToGroups(
+    settings?.disabled_management_groups,
+  );
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -55,10 +62,16 @@ export default function NameServerSettings() {
           in our documentation.
         </Paragraph>
         <RestrictedAccess page={"DNS Settings"}>
-          {!isLoading && (
-            <SettingDisabledManagementGroups
-              initial={settings?.disabled_management_groups}
-            />
+          {!isLoading && initialDNSGroups !== undefined ? (
+            <SettingDisabledManagementGroups initialGroups={initialDNSGroups} />
+          ) : (
+            <div>
+              <Skeleton
+                width={"100%"}
+                className={"mt-8 max-w-xl"}
+                height={240}
+              />
+            </div>
           )}
         </RestrictedAccess>
       </div>
@@ -67,16 +80,16 @@ export default function NameServerSettings() {
 }
 
 const SettingDisabledManagementGroups = ({
-  initial,
+  initialGroups,
 }: {
-  initial: string[] | undefined;
+  initialGroups: Group[];
 }) => {
   const settingRequest = useApiCall<NameserverSettings>("/dns/settings");
   const { mutate } = useSWRConfig();
 
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
-      initial: initial || [],
+      initial: initialGroups,
     });
 
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
@@ -108,6 +121,7 @@ const SettingDisabledManagementGroups = ({
           Peers in these groups will require manual domain name resolution
         </HelpText>
         <PeerGroupSelector
+          dataCy={"dns-groups-selector"}
           onChange={setSelectedGroups}
           values={selectedGroups}
         />
@@ -122,6 +136,7 @@ const SettingDisabledManagementGroups = ({
           size={"sm"}
           onClick={saveSettings}
           disabled={!hasChanges}
+          data-cy={"save-changes"}
         >
           Save Changes
         </Button>
diff --git a/src/app/(dashboard)/network-routes/page.tsx b/src/app/(dashboard)/network-routes/page.tsx
index e5b0098..c4646cc 100644
--- a/src/app/(dashboard)/network-routes/page.tsx
+++ b/src/app/(dashboard)/network-routes/page.tsx
@@ -14,6 +14,7 @@ import PeersProvider from "@/contexts/PeersProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
+import { NetworkRoutesDeprecationInfo } from "@/modules/networks/misc/NetworkRoutesDeprecationInfo";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
 
 const NetworkRoutesTable = lazy(
@@ -39,7 +40,9 @@ export default function NetworkRoutes() {
                 icon={<NetworkRoutesIcon size={13} />}
               />
             </Breadcrumbs>
-            <h1 ref={headingRef}>Network Routes</h1>
+            <h1 ref={headingRef}>
+              Network Routes <NetworkRoutesDeprecationInfo size={18} />
+            </h1>
             <Paragraph>
               Network routes allow you to access other networks like LANs and
               VPCs without installing NetBird on every resource.
diff --git a/src/app/(dashboard)/network/layout.tsx b/src/app/(dashboard)/network/layout.tsx
new file mode 100644
index 0000000..7896c60
--- /dev/null
+++ b/src/app/(dashboard)/network/layout.tsx
@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Network - Networks - ${globalMetaTitle}`,
+};
+export default BlankLayout;
diff --git a/src/app/(dashboard)/network/page.tsx b/src/app/(dashboard)/network/page.tsx
new file mode 100644
index 0000000..b86033a
--- /dev/null
+++ b/src/app/(dashboard)/network/page.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import Card from "@components/Card";
+import FullTooltip from "@components/FullTooltip";
+import InlineLink from "@components/InlineLink";
+import Separator from "@components/Separator";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import useRedirect from "@hooks/useRedirect";
+import useFetchApi from "@utils/api";
+import { cn } from "@utils/helpers";
+import {
+  ArrowUpRightIcon,
+  HelpCircle,
+  PencilLineIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+  ShieldXIcon,
+} from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { Network } from "@/interfaces/Network";
+import PageContainer from "@/layouts/PageContainer";
+import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
+import NetworkModal from "@/modules/networks/NetworkModal";
+import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
+import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
+
+export default function NetworkDetailPage() {
+  const queryParameter = useSearchParams();
+  const networkId = queryParameter.get("id");
+  const { data: network, isLoading } = useFetchApi<Network>(
+    `/networks/${networkId}`,
+    true,
+  );
+
+  useRedirect("/networks", false, !networkId);
+
+  return network && !isLoading ? (
+    <NetworkOverview network={network} />
+  ) : (
+    <FullScreenLoading />
+  );
+}
+
+function NetworkOverview({ network }: Readonly<{ network: Network }>) {
+  const { isUser } = useLoggedInUser();
+  const [networkModal, setNetworkModal] = useState(false);
+  const { mutate } = useSWRConfig();
+
+  const isActive = !!(
+    network?.routing_peers_count && network.routing_peers_count > 0
+  );
+
+  return (
+    <PageContainer>
+      <NetworkProvider network={network}>
+        <div className={"p-default py-6 mb-4"}>
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              href={"/networks"}
+              label={"Networks"}
+              disabled={isUser}
+              icon={<NetworkRoutesIcon size={13} />}
+            />
+            <Breadcrumbs.Item
+              href={"/network"}
+              label={network.name}
+              active={true}
+            />
+          </Breadcrumbs>
+
+          <div className={"flex justify-between max-w-6xl"}>
+            <div
+              className={cn(
+                "flex items-center",
+                !network.description && "gap-2",
+              )}
+            >
+              <NetworkInformationSquare
+                name={network.name}
+                active={isActive}
+                size={"lg"}
+                description={network.description}
+              />
+              <button
+                className={
+                  "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                }
+                onClick={() => setNetworkModal(true)}
+              >
+                <PencilLineIcon size={18} />
+              </button>
+              <NetworkModal
+                open={networkModal}
+                setOpen={setNetworkModal}
+                onUpdated={() => {
+                  mutate(`/networks/${network.id}`);
+                }}
+                network={network}
+              />
+            </div>
+          </div>
+
+          <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
+            <NetworkInformationCard network={network} />
+          </div>
+        </div>
+
+        <Separator />
+        <ResourcesSection network={network} />
+        <div className={"h-3"} />
+        <Separator />
+        <NetworkRoutingPeersSection network={network} />
+      </NetworkProvider>
+    </PageContainer>
+  );
+}
+
+function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
+  const isHighlyAvailable = !!(
+    network?.routing_peers_count && network?.routing_peers_count >= 2
+  );
+
+  const disabledText = useMemo(
+    () => (
+      <>
+        High availability is currently{" "}
+        <span className={"text-yellow-400 font-medium"}>inactive</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const enabledText = useMemo(
+    () => (
+      <>
+        High availability is{" "}
+        <span className={"text-green-500 font-medium"}>active</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const policyCount = network.policies?.length ?? 0;
+
+  return (
+    <Card>
+      <Card.List>
+        <Card.ListItem
+          tooltip={false}
+          label={
+            <>
+              <ServerIcon size={16} />
+              High Availability
+            </>
+          }
+          value={
+            <FullTooltip
+              interactive={false}
+              content={
+                <div className={"max-w-xs text-xs"}>
+                  {isHighlyAvailable ? enabledText : disabledText}
+                  {isHighlyAvailable ? (
+                    <div className={"inline-flex mt-2"}>
+                      You can add more routing peers to increase the
+                      availability of this network.
+                    </div>
+                  ) : (
+                    <div className={"inline-flex mt-2"}>
+                      Go ahead and add more routing peers or groups with routing
+                      peers to enable high availability for this network.
+                    </div>
+                  )}
+                </div>
+              }
+            >
+              <div
+                className={cn(
+                  "flex gap-2.5 items-center text-nb-gray-300 text-sm cursor-help",
+                )}
+              >
+                <span
+                  className={cn(
+                    "h-2 w-2 rounded-full",
+                    !isHighlyAvailable ? "bg-yellow-400" : "bg-green-500",
+                  )}
+                ></span>
+                {isHighlyAvailable ? "Active" : "Inactive"}
+                <HelpCircle size={12} />
+              </div>
+            </FullTooltip>
+          }
+        />
+        <Card.ListItem
+          tooltip={false}
+          label={
+            policyCount > 0 ? (
+              <>
+                <ShieldCheckIcon size={16} className={"text-green-500"} />
+                {policyCount}{" "}
+                {policyCount === 1 ? "Active Policy" : "Active Policies"}
+              </>
+            ) : (
+              <>
+                <ShieldXIcon size={16} className={"text-red-500"} />
+                No Active Policies
+              </>
+            )
+          }
+          value={
+            policyCount > 0 ? (
+              <InlineLink href={"/access-control"}>
+                Go to Policies
+                <ArrowUpRightIcon size={14} />
+              </InlineLink>
+            ) : null
+          }
+        />
+      </Card.List>
+    </Card>
+  );
+}
diff --git a/src/app/(dashboard)/networks/layout.tsx b/src/app/(dashboard)/networks/layout.tsx
new file mode 100644
index 0000000..9e71f33
--- /dev/null
+++ b/src/app/(dashboard)/networks/layout.tsx
@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Networks - ${globalMetaTitle}`,
+};
+export default BlankLayout;
diff --git a/src/app/(dashboard)/networks/page.tsx b/src/app/(dashboard)/networks/page.tsx
new file mode 100644
index 0000000..e6ea6b4
--- /dev/null
+++ b/src/app/(dashboard)/networks/page.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { Suspense } from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { Network } from "@/interfaces/Network";
+import PageContainer from "@/layouts/PageContainer";
+import NetworksTable from "@/modules/networks/table/NetworksTable";
+
+export default function Networks() {
+  const { data: networks, isLoading } = useFetchApi<Network[]>("/networks");
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/networks"}
+            label={"Networks"}
+            icon={<NetworkRoutesIcon size={13} />}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Networks</h1>
+        <Paragraph>
+          Networks allow you to access other resources like LANs and VPCs
+          without installing NetBird on every device.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={"#"} target={"_blank"}>
+            Networks
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess>
+        <Suspense fallback={<SkeletonTable />}>
+          <NetworksTable
+            data={networks}
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+          />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx
index fd5f427..9f878d2 100644
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@@ -6,6 +6,7 @@ import {
   AlertOctagonIcon,
   FolderGit2Icon,
   LockIcon,
+  NetworkIcon,
   ShieldIcon,
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
@@ -16,6 +17,7 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
+import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
@@ -47,6 +49,10 @@ export default function NetBirdSettings() {
             <LockIcon size={14} />
             Permissions
           </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="networks">
+            <NetworkIcon size={14} />
+            Networks
+          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -57,6 +63,7 @@ export default function NetBirdSettings() {
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
+            {account && <NetworkSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>
diff --git a/src/app/(dashboard)/team/user/page.tsx b/src/app/(dashboard)/team/user/page.tsx
index d42d823..4fd68a7 100644
--- a/src/app/(dashboard)/team/user/page.tsx
+++ b/src/app/(dashboard)/team/user/page.tsx
@@ -22,11 +22,13 @@ import { useSWRConfig } from "swr";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { Group } from "@/interfaces/Group";
 import { Role, User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 import AccessTokensTable from "@/modules/access-tokens/AccessTokensTable";
 import CreateAccessTokenModal from "@/modules/access-tokens/CreateAccessTokenModal";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 import UserBlockCell from "@/modules/users/table-cells/UserBlockCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
@@ -45,8 +47,10 @@ export default function UserPage() {
 
   useRedirect("/team/users", false, !userId);
 
-  return !isLoading && user ? (
-    <UserOverview user={user} />
+  const userGroups = useGroupIdsToGroups(user?.auto_groups);
+
+  return !isLoading && user && userGroups !== undefined ? (
+    <UserOverview user={user} initialGroups={userGroups} />
   ) : (
     <FullScreenLoading />
   );
@@ -54,16 +58,16 @@ export default function UserPage() {
 
 type Props = {
   user: User;
+  initialGroups: Group[];
 };
 
-function UserOverview({ user }: Props) {
+function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
   const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
-  const initialGroups = user.auto_groups;
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: initialGroups,
@@ -180,6 +184,7 @@ function UserOverview({ user }: Props) {
                 className={"w-full"}
                 disabled={!hasChanges}
                 onClick={save}
+                data-cy={"save-changes"}
               >
                 Save Changes
               </Button>
@@ -201,6 +206,7 @@ function UserOverview({ user }: Props) {
                   onChange={setSelectedGroups}
                   values={selectedGroups}
                   hideAllGroup={true}
+                  dataCy={"user-group-selector"}
                 />
               </div>
             )}
@@ -244,7 +250,10 @@ function UserOverview({ user }: Props) {
                 <div className={"inline-flex gap-4 justify-end"}>
                   <div>
                     <CreateAccessTokenModal user={user}>
-                      <Button variant={"primary"}>
+                      <Button
+                        variant={"primary"}
+                        data-cy={"access-token-open-modal"}
+                      >
                         <IconCirclePlus size={16} />
                         Create Access Token
                       </Button>
@@ -293,6 +302,7 @@ function UserInformationCard({ user }: { user: User }) {
         )}
 
         <Card.ListItem
+          tooltip={false}
           label={
             <>
               <GalleryHorizontalEnd size={16} />
diff --git a/src/app/(dashboard)/team/users/page.tsx b/src/app/(dashboard)/team/users/page.tsx
index 9744224..c0bdeb6 100644
--- a/src/app/(dashboard)/team/users/page.tsx
+++ b/src/app/(dashboard)/team/users/page.tsx
@@ -10,12 +10,14 @@ import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, User2 } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import TeamIcon from "@/assets/icons/TeamIcon";
+import { useGroups } from "@/contexts/GroupsProvider";
 import { User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 
 const UsersTable = lazy(() => import("@/modules/users/UsersTable"));
 
 export default function TeamUsers() {
+  const { isLoading: isGroupsLoading } = useGroups();
   const { data: users, isLoading } = useFetchApi<User[]>(
     "/users?service_user=false",
   );
@@ -60,7 +62,7 @@ export default function TeamUsers() {
         <Suspense fallback={<SkeletonTable />}>
           <UsersTable
             users={users}
-            isLoading={isLoading}
+            isLoading={isLoading || isGroupsLoading}
             headingTarget={portalTarget}
           />
         </Suspense>
diff --git a/src/auth/OIDCError.tsx b/src/auth/OIDCError.tsx
index c857b50..aa04d88 100644
--- a/src/auth/OIDCError.tsx
+++ b/src/auth/OIDCError.tsx
@@ -15,7 +15,9 @@ export const OIDCError = () => {
   const params = useSearchParams();
   const errorParam = params.get("error");
   const accessDenied = errorParam === "access_denied";
+  const invalidRequest = errorParam === "invalid_request";
   const [title, setTitle] = useState(params.get("error_description"));
+  const errorDescription = params.get("error_description");
   const { logout, login } = useOidc();
 
   useEffect(() => {
@@ -72,9 +74,14 @@ export const OIDCError = () => {
         </>
       ) : (
         <>
-          <Paragraph className={"text-center mt-2"}>
+          <Paragraph className={"text-center mt-2 block"}>
             There was an error logging you in. <br />
-            Error: {oidcUserLoadingState}
+            Error:{" "}
+            <span className={"inline capitalize"}>
+              {invalidRequest && errorDescription
+                ? errorDescription
+                : oidcUserLoadingState}
+            </span>
           </Paragraph>
           <Button
             variant={"primary"}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index d9df54c..e93fa7f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -35,6 +35,11 @@ export const buttonVariants = cva(
           "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
           "dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-700/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
         ],
+        secondaryLighter: [
+          "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
+          "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
+          "dark:bg-nb-gray-900/70 dark:text-gray-400 dark:border-gray-700/70 dark:hover:text-white dark:hover:bg-nb-gray-800/60",
+        ],
         input: [
           "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-neutral-200 text-gray-900",
           "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index d865b59..67042aa 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,12 +1,15 @@
 import FullTooltip from "@components/FullTooltip";
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import { AlertCircle } from "lucide-react";
 import * as React from "react";
 
+type InputVariants = VariantProps<typeof inputVariants>;
+
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    InputVariants {
   customPrefix?: React.ReactNode;
   customSuffix?: React.ReactNode;
   maxWidthClass?: string;
@@ -14,6 +17,7 @@ export interface InputProps
   error?: string;
   errorTooltip?: boolean;
   errorTooltipPosition?: "top" | "top-right";
+  prefixClassName?: string;
 }
 
 const inputVariants = cva("", {
@@ -23,6 +27,10 @@ const inputVariants = cva("", {
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
+      darker: [
+        "dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-800",
+        "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
+      ],
       error: [
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
         "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
@@ -51,6 +59,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       error,
       errorTooltip = false,
       errorTooltipPosition = "top",
+      variant = "default",
+      prefixClassName,
       ...props
     },
     ref,
@@ -67,6 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 "flex h-[42px] w-auto rounded-l-md bg-white px-3 py-2 text-sm ",
                 "border  items-center whitespace-nowrap",
                 props.disabled && "opacity-20",
+                prefixClassName,
               )}
             >
               {customPrefix}
@@ -87,7 +98,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             ref={ref}
             {...props}
             className={cn(
-              inputVariants({ variant: error ? "error" : "default" }),
+              inputVariants({ variant: error ? "error" : variant }),
               "flex h-[42px] w-full rounded-md  bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-20  ",
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
diff --git a/src/components/PeerGroupSelector.tsx b/src/components/PeerGroupSelector.tsx
index 08d7e03..f9c3bb4 100644
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -7,22 +7,31 @@ import { ScrollArea } from "@components/ScrollArea";
 import { AccessControlGroupCount } from "@components/ui/AccessControlGroupCount";
 import GroupBadge from "@components/ui/GroupBadge";
 import GroupBadgeWithEditPeers from "@components/ui/GroupBadgeWithEditPeers";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { useSearch } from "@hooks/useSearch";
 import useSortedDropdownOptions from "@hooks/useSortedDropdownOptions";
 import { IconArrowBack } from "@tabler/icons-react";
+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,
   FolderGit2,
+  GlobeIcon,
+  Layers3,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   SearchIcon,
+  WorkflowIcon,
 } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { useElementSize } from "@/hooks/useElementSize";
 import type { Group, GroupPeer } from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
 import type { Peer } from "@/interfaces/Peer";
 
 interface MultiSelectProps {
@@ -241,7 +250,7 @@ export function PeerGroupSelector({
             )}
           </div>
 
-          <div className={"pl-2"}>
+          <div className={"pl-2"} data-cy={"group-selector-open-close"}>
             <ChevronsUpDown
               size={18}
               className={"shrink-0 group-hover:text-nb-gray-300 transition-all"}
@@ -311,7 +320,10 @@ export function PeerGroupSelector({
 
             <CommandGroup>
               <ScrollArea
-                className={"max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3"}
+                className={cn(
+                  "max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3",
+                  sortedDropdownOptions.length == 0 && !search && "py-0",
+                )}
               >
                 {searchedGroupNotFound && (
                   <CommandItem
@@ -382,6 +394,8 @@ export function PeerGroupSelector({
                             <AccessControlGroupCount group_id={option.id} />
                           )}
 
+                          <ResourcesCounter group={option} />
+
                           <div
                             className={
                               "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
@@ -404,3 +418,99 @@ export function PeerGroupSelector({
     </Popover>
   );
 }
+
+const ResourcesCounter = ({ group }: { group: Group }) => {
+  return group?.resources_count && group.resources_count > 0 ? (
+    <div
+      className={
+        "text-nb-gray-300 font-medium flex items-center gap-2 transition-all"
+      }
+    >
+      <Layers3 size={14} className={"shrink-0"} />
+      {group.resources_count} Resource(s)
+    </div>
+  ) : null;
+};
+
+const resourcesSearchPredicate = (item: NetworkResource, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.address.toLowerCase().includes(lowerCaseQuery);
+};
+
+const ResourcesList = ({ search }: { search: string }) => {
+  const { data: resources, isLoading } = useFetchApi<NetworkResource[]>(
+    "/networks/resources",
+  );
+
+  const [filteredItems, _, setSearch] = useSearch(
+    resources || [],
+    resourcesSearchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  useEffect(() => {
+    setSearch(search);
+  }, [search, setSearch]);
+
+  return isLoading ? (
+    <>Loading...</>
+  ) : (
+    filteredItems.length > 0 && (
+      <VirtualScrollAreaList
+        items={filteredItems}
+        onSelect={(option) => null}
+        renderItem={(res) => {
+          const isSelected = false;
+
+          return (
+            <Fragment key={res.id}>
+              <div className={"flex items-center gap-2"}>
+                <Badge
+                  useHover={true}
+                  data-cy={"group-badge"}
+                  variant={"gray-ghost"}
+                  className={cn("transition-all group whitespace-nowrap")}
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                >
+                  {res.type === "host" && (
+                    <WorkflowIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+                  {res.type === "domain" && (
+                    <GlobeIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+                  {res.type === "subnet" && (
+                    <NetworkIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+
+                  <TextWithTooltip text={res?.name || ""} maxChars={20} />
+                </Badge>
+              </div>
+
+              <div className={"flex items-center gap-5"}>
+                <div
+                  className={
+                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                  }
+                >
+                  <Checkbox checked={isSelected} />
+                </div>
+              </div>
+            </Fragment>
+          );
+        }}
+      />
+    )
+  );
+};
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 04b3b5b..9f2c712 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -39,7 +39,7 @@ const Tabs = React.forwardRef<
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
 type TabListProps = {
-  justify?: "start" | "end" | "center";
+  justify?: "start" | "end" | "center" | "between";
 };
 
 const TabsList = React.forwardRef<
@@ -54,6 +54,7 @@ const TabsList = React.forwardRef<
       justify == "center" && "justify-center justify-items-end",
       justify == "start" && "justify-start",
       justify == "end" && "justify-end",
+      justify == "between" && "justify-between",
     )}
     {...props}
   >
@@ -63,7 +64,9 @@ const TabsList = React.forwardRef<
       }
     />
     <ScrollArea>
-      <div className={"relative z-[1] flex flex-nowrap"}>{props.children}</div>
+      <div className={"relative z-[1] flex flex-nowrap w-full "}>
+        {props.children}
+      </div>
       <ScrollBar orientation="horizontal" />
     </ScrollArea>
   </TabsPrimitive.List>
diff --git a/src/components/VerticalTabs.tsx b/src/components/VerticalTabs.tsx
index 56897ea..d894662 100644
--- a/src/components/VerticalTabs.tsx
+++ b/src/components/VerticalTabs.tsx
@@ -11,17 +11,36 @@ type Props = {
   onChange: (value: string) => void;
   children: React.ReactNode;
 };
+
+const TabSwitchContext = React.createContext<{
+  switchTab: (value: string) => void;
+}>({
+  switchTab: () => {},
+});
+
+export const useTabSwitchContext = () => {
+  return React.useContext(TabSwitchContext);
+};
+
 function VerticalTabs({ value, onChange, children }: Props) {
   return (
     <TabContext.Provider value={value || ""}>
-      <Tabs.Root
-        orientation={"vertical"}
-        className={"block lg:flex bg-nb-gray"}
-        value={value}
-        onValueChange={(value) => onChange(value)}
+      <TabSwitchContext.Provider
+        value={{
+          switchTab: (value: string) => {
+            onChange(value);
+          },
+        }}
       >
-        {children}
-      </Tabs.Root>
+        <Tabs.Root
+          orientation={"vertical"}
+          className={"block lg:flex bg-nb-gray"}
+          value={value}
+          onValueChange={(value) => onChange(value)}
+        >
+          {children}
+        </Tabs.Root>
+      </TabSwitchContext.Provider>
     </TabContext.Provider>
   );
 }
diff --git a/src/components/modal/ModalHeader.tsx b/src/components/modal/ModalHeader.tsx
index 0da6a26..4c9b716 100644
--- a/src/components/modal/ModalHeader.tsx
+++ b/src/components/modal/ModalHeader.tsx
@@ -11,6 +11,7 @@ interface Props extends IconVariant {
   margin?: string;
   truncate?: boolean;
   children?: React.ReactNode;
+  center?: boolean;
 }
 export default function ModalHeader({
   icon,
@@ -21,13 +22,21 @@ export default function ModalHeader({
   margin = "mt-0",
   truncate = false,
   children,
+  center,
 }: Props) {
   return (
     <div className={cn(className, "min-w-0")}>
-      <div className={"flex items-start gap-5 pr-10 min-w-0"}>
+      <div className={"flex items-start gap-5 min-w-0"}>
         {icon && <SquareIcon color={color} icon={icon} />}
-        <div className={"min-w-0"}>
-          <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
+        <div className={cn("min-w-0", center && "text-center")}>
+          <h2
+            className={cn(
+              "text-lg my-0 leading-[1.5]",
+              center && "text-center",
+            )}
+          >
+            {title}
+          </h2>
           {children ? (
             <>{children}</>
           ) : (
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index 0cbf5be..fc11992 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -101,11 +101,11 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      " transition-colors data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
+      " transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
       "dark:data-[state=selected]:border-nb-gray-900",
       minimal
         ? "dark:hover:bg-nb-gray-900/10"
-        : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-900/20 hover:bg-neutral-100/50",
+        : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-940 hover:bg-neutral-100/50",
       className,
     )}
     {...props}
diff --git a/src/components/ui/GradientFadedBackground.tsx b/src/components/ui/GradientFadedBackground.tsx
index ed53829..283615e 100644
--- a/src/components/ui/GradientFadedBackground.tsx
+++ b/src/components/ui/GradientFadedBackground.tsx
@@ -4,7 +4,7 @@ export const GradientFadedBackground = () => {
   return (
     <div
       className={
-        "h-full w-full absolute left-0 top-0 rounded-md overflow-hidden z-0"
+        "h-full w-full absolute left-0 top-0 rounded-md overflow-hidden z-0 pointer-events-none"
       }
     >
       <div
diff --git a/src/components/ui/GroupBadge.tsx b/src/components/ui/GroupBadge.tsx
index b3e7a38..641fdc1 100644
--- a/src/components/ui/GroupBadge.tsx
+++ b/src/components/ui/GroupBadge.tsx
@@ -27,6 +27,7 @@ export default function GroupBadge({
     <Badge
       key={group.id || group.name}
       useHover={true}
+      data-cy={"group-badge"}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={(e) => {
diff --git a/src/components/ui/MultipleGroups.tsx b/src/components/ui/MultipleGroups.tsx
index d269590..8b34787 100644
--- a/src/components/ui/MultipleGroups.tsx
+++ b/src/components/ui/MultipleGroups.tsx
@@ -34,7 +34,10 @@ export default function MultipleGroups({
     <TooltipProvider disableHoverableContent={false}>
       <Tooltip delayDuration={1}>
         <TooltipTrigger asChild={true}>
-          <div className={"inline-flex items-center gap-2 z-0"}>
+          <div
+            className={"inline-flex items-center gap-2 z-0"}
+            data-cy={"multiple-groups"}
+          >
             {firstGroup && <GroupBadge group={firstGroup} />}
             {otherGroups && otherGroups.length > 0 && (
               <Badge
diff --git a/src/components/ui/UserDropdown.tsx b/src/components/ui/UserDropdown.tsx
index c69d23e..c6c5ce8 100644
--- a/src/components/ui/UserDropdown.tsx
+++ b/src/components/ui/UserDropdown.tsx
@@ -33,10 +33,9 @@ export default function UserDropdown() {
     logout("/", { client_id: config.clientId }).then();
   };
 
-  useHotkeys("shift+mod+l", () => logout(), []);
-
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  useHotkeys("shift+mod+l", () => logoutSession(), []);
   const { permission } = useLoggedInUser();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   return (
     <DropdownMenu
diff --git a/src/contexts/DialogProvider.tsx b/src/contexts/DialogProvider.tsx
index 74336b7..4816516 100644
--- a/src/contexts/DialogProvider.tsx
+++ b/src/contexts/DialogProvider.tsx
@@ -24,7 +24,7 @@ type DialogOptions = {
   description?: string | React.ReactNode;
   confirmText?: string;
   cancelText?: string;
-  type?: "default" | "warning" | "danger";
+  type?: "default" | "warning" | "danger" | "center";
   children?: React.ReactNode;
 };
 
@@ -51,6 +51,7 @@ export default function DialogProvider({ children }: Props) {
     default: "",
     warning: <AlertCircle size={18} />,
     danger: <AlertTriangle size={18} />,
+    center: "",
   };
 
   return (
@@ -61,8 +62,9 @@ export default function DialogProvider({ children }: Props) {
         onOpenChange={(open) => fn.current && fn.current(open)}
       >
         {dialogOptions && (
-          <ModalContent maxWidthClass={"max-w-lg"} showClose={false}>
+          <ModalContent maxWidthClass={"max-w-[400px]"} showClose={false}>
             <ModalHeader
+              center={dialogOptions.type == "center"}
               title={dialogOptions.title || "Confirmation"}
               margin={"mt-1"}
               description={
diff --git a/src/contexts/RoutesProvider.tsx b/src/contexts/RoutesProvider.tsx
index 6bf5f2d..3481075 100644
--- a/src/contexts/RoutesProvider.tsx
+++ b/src/contexts/RoutesProvider.tsx
@@ -20,6 +20,7 @@ const RoutesContext = React.createContext(
       toUpdate: Partial<Route>,
       onSuccess?: (route: Route) => void,
       message?: string,
+      options?: { remove_access_control_groups?: boolean },
     ) => void;
   },
 );
@@ -33,6 +34,7 @@ export default function RoutesProvider({ children }: Readonly<Props>) {
     toUpdate: Partial<Route>,
     onSuccess?: (route: Route) => void,
     message?: string,
+    options?: { remove_access_control_groups?: boolean },
   ) => {
     const hasDomains = route.domains ? route.domains.length > 0 : false;
 
@@ -54,10 +56,11 @@ export default function RoutesProvider({ children }: Readonly<Props>) {
             metric: toUpdate.metric ?? route.metric ?? 9999,
             masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
             groups: toUpdate.groups ?? route.groups ?? [],
-            access_control_groups:
-              toUpdate.access_control_groups ??
-              route.access_control_groups ??
-              undefined,
+            access_control_groups: options?.remove_access_control_groups
+              ? undefined
+              : toUpdate.access_control_groups ??
+                route.access_control_groups ??
+                undefined,
           },
           `/${route.id}`,
         )
diff --git a/src/interfaces/Account.ts b/src/interfaces/Account.ts
index c951505..73f1545 100644
--- a/src/interfaces/Account.ts
+++ b/src/interfaces/Account.ts
@@ -11,5 +11,6 @@ export interface Account {
     jwt_groups_claim_name: string;
     jwt_allow_groups: string[];
     regular_users_view_blocked: boolean;
+    routing_peer_dns_resolution_enabled: boolean;
   };
 }
diff --git a/src/interfaces/Group.ts b/src/interfaces/Group.ts
index 301c80c..8b800fc 100644
--- a/src/interfaces/Group.ts
+++ b/src/interfaces/Group.ts
@@ -3,6 +3,9 @@ export interface Group {
   name: string;
   peers?: GroupPeer[] | string[];
   peers_count?: number;
+  resources?: string[];
+  resources_count?: number;
+
   // Frontend only
   keepClientState?: boolean;
 }
diff --git a/src/interfaces/Network.ts b/src/interfaces/Network.ts
new file mode 100644
index 0000000..1e9f37a
--- /dev/null
+++ b/src/interfaces/Network.ts
@@ -0,0 +1,28 @@
+import { Group } from "@/interfaces/Group";
+
+export interface Network {
+  id: string;
+  name: string;
+  description?: string;
+  resources?: string[];
+  policies?: string[];
+  routers?: string[];
+  routing_peers_count?: number;
+}
+
+export interface NetworkRouter {
+  id: string;
+  peer?: string;
+  peer_groups?: string[];
+  metric: number;
+  masquerade: boolean;
+}
+
+export interface NetworkResource {
+  id: string;
+  name: string;
+  description?: string;
+  address: string;
+  groups?: string[] | Group[];
+  type?: "domain" | "host" | "subnet";
+}
diff --git a/src/interfaces/Route.ts b/src/interfaces/Route.ts
index 46527ec..1e13c0c 100644
--- a/src/interfaces/Route.ts
+++ b/src/interfaces/Route.ts
@@ -35,4 +35,5 @@ export interface GroupedRoute {
   description?: string;
   description_search?: string;
   domain_search?: string;
+  routes_search?: string;
 }
diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
index 2514b64..1b3771c 100644
--- a/src/layouts/Navigation.tsx
+++ b/src/layouts/Navigation.tsx
@@ -8,7 +8,6 @@ import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import DocsIcon from "@/assets/icons/DocsIcon";
-import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
@@ -17,6 +16,7 @@ import SidebarItem from "@/components/SidebarItem";
 import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { headerHeight } from "@/layouts/Header";
+import { NetworkNavigation } from "@/modules/networks/misc/NetworkNavigation";
 
 const customTheme: CustomFlowbiteTheme["sidebar"] = {
   root: {
@@ -34,6 +34,7 @@ export default function Navigation({
   hideOnMobile = false,
 }: Props) {
   const { isUser } = useLoggedInUser();
+  const { isOwnerOrAdmin } = useLoggedInUser();
   const { bannerHeight } = useAnnouncement();
 
   return (
@@ -104,11 +105,8 @@ export default function Navigation({
                       />
                     </SidebarItem>
 
-                    <SidebarItem
-                      icon={<NetworkRoutesIcon />}
-                      label="Network Routes"
-                      href={"/network-routes"}
-                    />
+                    <NetworkNavigation />
+
                     <SidebarItem
                       icon={<DNSIcon />}
                       label="DNS"
@@ -141,33 +139,24 @@ export default function Navigation({
                     />
                   </>
                 )}
-
-                {isUser && (
-                  <SidebarItem
-                    icon={<DocsIcon />}
-                    href={"https://docs.netbird.io/"}
-                    target={"_blank"}
-                    label="Documentation"
-                  />
-                )}
               </SidebarItemGroup>
-              {!isUser && (
-                <SidebarItemGroup>
+
+              <SidebarItemGroup>
+                {isOwnerOrAdmin && (
                   <SidebarItem
                     icon={<SettingsIcon />}
                     label="Settings"
                     href={"/settings"}
                     exactPathMatch={true}
                   />
-
-                  <SidebarItem
-                    icon={<DocsIcon />}
-                    href={"https://docs.netbird.io/"}
-                    target={"_blank"}
-                    label="Documentation"
-                  />
-                </SidebarItemGroup>
-              )}
+                )}
+                <SidebarItem
+                  icon={<DocsIcon />}
+                  href={"https://docs.netbird.io/"}
+                  target={"_blank"}
+                  label="Documentation"
+                />
+              </SidebarItemGroup>
             </div>
           </div>
         </ScrollArea>
diff --git a/src/layouts/PageContainer.tsx b/src/layouts/PageContainer.tsx
index 5a45dd7..e033e50 100644
--- a/src/layouts/PageContainer.tsx
+++ b/src/layouts/PageContainer.tsx
@@ -11,6 +11,7 @@ export default function PageContainer({ children, className }: Props) {
       className={cn(
         className,
         "relative flex-auto overflow-auto bg-nb-gray z-1",
+        "focus:outline-none",
       )}
     >
       {children}
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
index 3ec3711..e8816cb 100644
--- a/src/modules/access-control/AccessControlModal.tsx
+++ b/src/modules/access-control/AccessControlModal.tsx
@@ -41,6 +41,7 @@ import {
 } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import { Group } from "@/interfaces/Group";
 import { Policy, Protocol } from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { useAccessControl } from "@/modules/access-control/useAccessControl";
@@ -105,6 +106,9 @@ export function AccessControlUpdateModal({
 type ModalProps = {
   onSuccess?: (p: Policy) => void;
   policy?: Policy;
+  initialDestinationGroups?: Group[] | string[];
+  initialName?: string;
+  initialDescription?: string;
   cell?: string;
   postureCheckTemplates?: PostureCheck[];
   useSave?: boolean;
@@ -118,6 +122,9 @@ export function AccessControlModalContent({
   postureCheckTemplates,
   useSave = true,
   allowEditPeers = false,
+  initialDestinationGroups,
+  initialName,
+  initialDescription,
 }: Readonly<ModalProps>) {
   const {
     portAndDirectionDisabled,
@@ -142,7 +149,14 @@ export function AccessControlModalContent({
     submit,
     isPostureChecksLoading,
     getPolicyData,
-  } = useAccessControl({ policy, postureCheckTemplates, onSuccess });
+  } = useAccessControl({
+    policy,
+    postureCheckTemplates,
+    onSuccess,
+    initialDestinationGroups,
+    initialName,
+    initialDescription,
+  });
 
   const [tab, setTab] = useState(() => {
     if (!cell) return "policy";
diff --git a/src/modules/access-control/useAccessControl.ts b/src/modules/access-control/useAccessControl.ts
index 7df411e..0dd641c 100644
--- a/src/modules/access-control/useAccessControl.ts
+++ b/src/modules/access-control/useAccessControl.ts
@@ -15,6 +15,9 @@ type Props = {
   policy?: Policy;
   postureCheckTemplates?: PostureCheck[];
   onSuccess?: (policy: Policy) => void;
+  initialDestinationGroups?: Group[] | string[];
+  initialName?: string;
+  initialDescription?: string;
 };
 
 // TODO add reducer
@@ -22,6 +25,9 @@ type Props = {
 export const useAccessControl = ({
   policy,
   postureCheckTemplates,
+  initialDestinationGroups,
+  initialName,
+  initialDescription,
   onSuccess,
 }: Props = {}) => {
   const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
@@ -85,8 +91,10 @@ export const useAccessControl = ({
     if (firstRule && firstRule?.bidirectional == false) return "in";
     return "bi";
   });
-  const [name, setName] = useState(policy?.name || "");
-  const [description, setDescription] = useState(policy?.description || "");
+  const [name, setName] = useState(policy?.name || initialName || "");
+  const [description, setDescription] = useState(
+    policy?.description || initialDescription || "",
+  );
   const { mutate } = useSWRConfig();
 
   const policyRequest = useApiCall<Policy>("/policies");
@@ -104,7 +112,9 @@ export const useAccessControl = ({
     setDestinationGroups,
     { getGroupsToUpdate: getDestinationGroupsToUpdate },
   ] = useGroupHelper({
-    initial: firstRule ? (firstRule.destinations as Group[]) : [],
+    initial: firstRule
+      ? (firstRule.destinations as Group[])
+      : initialDestinationGroups ?? [],
   });
 
   const { updateOrCreateAndNotify: checkToCreate } = usePostureCheck({});
diff --git a/src/modules/access-tokens/AccessTokenActionCell.tsx b/src/modules/access-tokens/AccessTokenActionCell.tsx
index 8944a7e..fc63a10 100644
--- a/src/modules/access-tokens/AccessTokenActionCell.tsx
+++ b/src/modules/access-tokens/AccessTokenActionCell.tsx
@@ -46,7 +46,12 @@ export default function AccessTokenActionCell({ access_token }: Props) {
 
   return (
     <div className={"flex justify-end pr-4"}>
-      <Button variant={"danger-outline"} size={"sm"} onClick={handleConfirm}>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={handleConfirm}
+        data-cy={"access-token-delete"}
+      >
         <Trash2 size={16} />
         Delete
       </Button>
diff --git a/src/modules/access-tokens/CreateAccessTokenModal.tsx b/src/modules/access-tokens/CreateAccessTokenModal.tsx
index 4e75ff0..876e0a5 100644
--- a/src/modules/access-tokens/CreateAccessTokenModal.tsx
+++ b/src/modules/access-tokens/CreateAccessTokenModal.tsx
@@ -98,6 +98,7 @@ export default function CreateAccessTokenModal({ children, user }: Props) {
                   variant={"secondary"}
                   className={"w-full"}
                   tabIndex={-1}
+                  data-cy={"access-token-copy-close"}
                 >
                   Close
                 </Button>
@@ -170,6 +171,7 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
           <Label>Name</Label>
           <HelpText>Set an easily identifiable name for your token</HelpText>
           <Input
+            data-cy={"access-token-name"}
             placeholder={"e.g., Infra token"}
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -184,6 +186,7 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
           <Input
             maxWidthClass={"max-w-[200px]"}
             placeholder={"30"}
+            data-cy={"access-token-expires-in"}
             min={1}
             max={365}
             value={expiresIn}
@@ -215,7 +218,12 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
             <Button variant={"secondary"}>Cancel</Button>
           </ModalClose>
 
-          <Button variant={"primary"} onClick={submit} disabled={isDisabled}>
+          <Button
+            variant={"primary"}
+            onClick={submit}
+            disabled={isDisabled}
+            data-cy={"create-access-token"}
+          >
             <PlusCircle size={16} />
             Create Token
           </Button>
diff --git a/src/modules/account/useAccount.tsx b/src/modules/account/useAccount.tsx
index 880d8b0..cc3f89f 100644
--- a/src/modules/account/useAccount.tsx
+++ b/src/modules/account/useAccount.tsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { Account } from "@/interfaces/Account";
 
 export const useAccount = () => {
-  const { data: accounts } = useFetchApi<Account[]>("/accounts");
+  const { data: accounts } = useFetchApi<Account[]>("/accounts", true, true);
 
   return useMemo(() => {
     if (!accounts) return;
diff --git a/src/modules/activity/ActivityDescription.tsx b/src/modules/activity/ActivityDescription.tsx
index 1838ba9..38165c1 100644
--- a/src/modules/activity/ActivityDescription.tsx
+++ b/src/modules/activity/ActivityDescription.tsx
@@ -543,6 +543,98 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Resource
+   */
+  if (event.activity_code == "resource.group.add")
+    return (
+      <div className={"inline"}>
+        Group <Value>{m.resource_name}</Value> added to resource{"  "}
+        <Value>{m.name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "resource.group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{m.resource_name}</Value> removed from resource{"  "}
+        <Value>{m.name}</Value>
+      </div>
+    );
+
+  /**
+   * Networks
+   */
+
+  if (event.activity_code == "network.resource.create")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> created for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.resource.update")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> updated for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.resource.delete")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> deleted from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.create")
+    return (
+      <div className={"inline"}>
+        Routing peer created for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.delete")
+    return (
+      <div className={"inline"}>
+        Routing peer deleted from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.update")
+    return (
+      <div className={"inline"}>
+        Routing peer updated from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.create")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> created
+      </div>
+    );
+
+  if (event.activity_code == "network.delete")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> deleted
+      </div>
+    );
+
+  if (event.activity_code == "network.update")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> updated
+      </div>
+    );
+
   return (
     <div className={"flex gap-2.5 items-center"}>
       <span className={"mb-[1px]"}>{event.activity}</span>
diff --git a/src/modules/activity/ActivityTypeIcon.tsx b/src/modules/activity/ActivityTypeIcon.tsx
index a26fa2f..b21ab4c 100644
--- a/src/modules/activity/ActivityTypeIcon.tsx
+++ b/src/modules/activity/ActivityTypeIcon.tsx
@@ -8,6 +8,7 @@ import {
   Globe,
   HelpCircleIcon,
   KeyRound,
+  Layers3Icon,
   LogIn,
   MonitorSmartphoneIcon,
   NetworkIcon,
@@ -89,6 +90,14 @@ export default function ActivityTypeIcon({
     return (
       <RefreshCcw size={size} className={cn(DEFAULT_CLASSES, className)} />
     );
+  } else if (code.startsWith("resource")) {
+    return (
+      <Layers3Icon size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
+  } else if (code.startsWith("network")) {
+    return (
+      <NetworkIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
   } else {
     return (
       <HelpCircleIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
diff --git a/src/modules/groups/useGroupIdsToGroups.tsx b/src/modules/groups/useGroupIdsToGroups.tsx
new file mode 100644
index 0000000..bd2b906
--- /dev/null
+++ b/src/modules/groups/useGroupIdsToGroups.tsx
@@ -0,0 +1,25 @@
+import { uniq } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import type { Group } from "@/interfaces/Group";
+
+export const useGroupIdsToGroups = (initial?: string[]) => {
+  const { groups, isLoading } = useGroups();
+  const [initialSet, setInitialSet] = useState(false);
+  const [mappedGroups, setMappedGroups] = useState<Group[] | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    // Only run the mapping once when groups are loaded and initial IDs are available
+    if (!initialSet && !isLoading && groups && initial) {
+      const mapped = uniq(initial)
+        .map((group) => groups.find((g) => g?.id === group))
+        .filter((g): g is Group => g !== undefined);
+      setMappedGroups(mapped);
+      setInitialSet(true); // Mark that we've done the initial mapping to prevent subsequent runs
+    }
+  }, [groups, initial, isLoading, initialSet]);
+
+  return useMemo(() => mappedGroups, [mappedGroups]);
+};
diff --git a/src/modules/networks/NetworkModal.tsx b/src/modules/networks/NetworkModal.tsx
new file mode 100644
index 0000000..9ff51b7
--- /dev/null
+++ b/src/modules/networks/NetworkModal.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import Separator from "@components/Separator";
+import { Textarea } from "@components/Textarea";
+import { useApiCall } from "@utils/api";
+import { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import React, { useState } from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { Network } from "@/interfaces/Network";
+
+type Props = {
+  open: boolean;
+  setOpen?: (open: boolean) => void;
+  network?: Network;
+  onCreated?: (network: Network) => void;
+  onUpdated?: (network: Network) => void;
+};
+
+export default function NetworkModal({
+  open,
+  setOpen,
+  network,
+  onCreated,
+  onUpdated,
+}: Readonly<Props>) {
+  return (
+    <Modal open={open} onOpenChange={setOpen}>
+      <Content
+        network={network}
+        onCreated={(network) => {
+          setOpen?.(false);
+          onCreated?.(network);
+        }}
+        onUpdated={(network) => {
+          setOpen?.(false);
+          onUpdated?.(network);
+        }}
+        key={open ? "1" : "0"}
+      />
+    </Modal>
+  );
+}
+
+type ContentProps = {
+  onCreated?: (network: Network) => void;
+  onUpdated?: (network: Network) => void;
+  network?: Network;
+};
+
+const Content = ({ network, onCreated, onUpdated }: ContentProps) => {
+  const [name, setName] = useState(network?.name || "");
+  const [description, setDescription] = useState(network?.description || "");
+  const create = useApiCall<Network>("/networks").post;
+  const update = useApiCall<Network>("/networks").put;
+
+  const updateNetwork = async () => {
+    notify({
+      title: name,
+      description: "Network updated successfully.",
+      loadingMessage: "Updating network...",
+      promise: update({ name, description }, `/${network?.id}`).then((n) => {
+        onUpdated?.(n);
+      }),
+    });
+  };
+
+  const createNetwork = async () => {
+    notify({
+      title: name,
+      description: "Network created successfully.",
+      loadingMessage: "Creating network...",
+      promise: create({ name, description }).then((n) => {
+        onCreated?.(n);
+      }),
+    });
+  };
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<NetworkRoutesIcon className={"fill-netbird"} />}
+        title={network ? "Update Network" : "Add Network"}
+        description={
+          network
+            ? network.name
+            : "Access resources like LANs and VPC by adding a network."
+        }
+        color={"netbird"}
+      />
+      <Separator />
+      <div className={"px-8 flex-col flex gap-6 py-6"}>
+        <div>
+          <Label>Network Name</Label>
+          <HelpText>Provide a unique name for the network.</HelpText>
+          <Input
+            tabIndex={0}
+            placeholder={"e.g., Office Network"}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div>
+          <Label>Description (optional)</Label>
+          <HelpText>
+            Write a short description to add more context to this network.
+          </HelpText>
+          <Textarea
+            placeholder={"e.g., Berlin, Münzstraße 12 "}
+            value={description}
+            rows={3}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <ModalFooter className={"items-center"}>
+        <div className={"w-full"}>
+          <Paragraph className={"text-sm mt-auto"}>
+            Learn more about
+            <InlineLink href={"#"} target={"_blank"}>
+              Networks
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </Paragraph>
+        </div>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+
+          <Button
+            variant={"primary"}
+            data-cy={"submit-route"}
+            disabled={!name}
+            onClick={network ? updateNetwork : createNetwork}
+          >
+            {network ? (
+              "Save Changes"
+            ) : (
+              <>
+                <PlusCircle size={16} />
+                Add Network
+              </>
+            )}
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+};
diff --git a/src/modules/networks/NetworkProvider.tsx b/src/modules/networks/NetworkProvider.tsx
new file mode 100644
index 0000000..d214d05
--- /dev/null
+++ b/src/modules/networks/NetworkProvider.tsx
@@ -0,0 +1,340 @@
+import { Modal } from "@components/modal/Modal";
+import { notify } from "@components/Notification";
+import { useApiCall } from "@utils/api";
+import * as React from "react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { Group } from "@/interfaces/Group";
+import { Network, NetworkResource, NetworkRouter } from "@/interfaces/Network";
+import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
+import NetworkModal from "@/modules/networks/NetworkModal";
+import NetworkResourceModal from "@/modules/networks/resources/NetworkResourceModal";
+import NetworkRoutingPeerModal from "@/modules/networks/routing-peers/NetworkRoutingPeerModal";
+
+type Props = {
+  children: React.ReactNode;
+  network?: Network;
+};
+
+const NetworksContext = React.createContext(
+  {} as {
+    openAddRoutingPeerModal: (network: Network, router?: NetworkRouter) => void;
+    openEditNetworkModal: (network: Network) => void;
+    openCreateNetworkModal: () => void;
+    openResourceModal: (network: Network, resource?: NetworkResource) => void;
+    openPolicyModal: (network?: Network, resource?: NetworkResource) => void;
+    deleteNetwork: (network: Network) => void;
+    deleteResource: (network: Network, resource: NetworkResource) => void;
+    deleteRouter: (network: Network, router: NetworkRouter) => void;
+    network?: Network;
+  },
+);
+
+export const NetworkProvider = ({ children, network }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { confirm } = useDialog();
+  const deleteCall = useApiCall("/networks").del;
+
+  const [currentNetwork, setCurrentNetwork] = useState<Network>();
+  const [currentResource, setCurrentResource] = useState<NetworkResource>();
+  const [currentRouter, setCurrentRouter] = useState<NetworkRouter>();
+
+  const [policyDefaultSettings, setPolicyDefaultSettings] = useState<{
+    name?: string;
+    description?: string;
+    destinationGroups?: Group[] | string[];
+  }>();
+
+  const [routingPeerModal, setRoutingPeerModal] = useState(false);
+  const [networkModal, setNetworkModal] = useState(false);
+  const [resourceModal, setResourceModal] = useState(false);
+  const [policyModal, setPolicyModal] = useState(false);
+
+  const openAddRoutingPeerModal = (
+    network: Network,
+    router?: NetworkRouter,
+  ) => {
+    setCurrentNetwork(network);
+    router && setCurrentRouter(router);
+    setRoutingPeerModal(true);
+  };
+
+  const openEditNetworkModal = (network: Network) => {
+    setCurrentNetwork(network);
+    setNetworkModal(true);
+  };
+
+  const openCreateNetworkModal = () => {
+    setCurrentNetwork(undefined);
+    setNetworkModal(true);
+  };
+
+  const openResourceModal = (network: Network, resource?: NetworkResource) => {
+    setCurrentNetwork(network);
+    resource && setCurrentResource(resource);
+    setResourceModal(true);
+  };
+
+  const openPolicyModal = (network?: Network, resource?: NetworkResource) => {
+    setPolicyDefaultSettings({
+      destinationGroups: resource?.groups,
+      name:
+        network && !resource
+          ? `${network?.name} Policy`
+          : resource
+          ? `${resource?.name} Policy`
+          : "",
+      description:
+        network && !resource
+          ? network?.description
+          : network
+          ? `${network.name} ${
+              network.description ? ", " + network.description : ""
+            }`
+          : undefined,
+    });
+    setPolicyModal(true);
+  };
+
+  const deleteNetwork = async (network: Network) => {
+    const choice = await confirm({
+      title: `Delete network '${network.name}'?`,
+      description:
+        "Are you sure you want to delete this network? Every resource and routing peers will be removed from this network. This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: network.name,
+      description: "Network deleted successfully.",
+      loadingMessage: "Deleting network...",
+      promise: deleteCall({}, `/${network.id}`).then(() => {
+        mutate("/networks");
+        mutate("/groups");
+      }),
+    });
+  };
+
+  const deleteResource = async (
+    network: Network,
+    resource: NetworkResource,
+  ) => {
+    const choice = await confirm({
+      title: `Delete resource '${resource.name}'?`,
+      description:
+        "Are you sure you want to delete this resource? This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: resource.name,
+      description: "Resource deleted successfully.",
+      loadingMessage: "Deleting resource...",
+      promise: deleteCall({}, `/${network.id}/resources/${resource.id}`).then(
+        () => {
+          mutate(`/networks/${network.id}/resources`);
+          mutate("/groups");
+        },
+      ),
+    });
+  };
+
+  const deleteRouter = async (network: Network, router: NetworkRouter) => {
+    const choice = await confirm({
+      title: `Remove this router?`,
+      description: "Are you sure you want to remove this router?",
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: "Router of " + network.name,
+      description: "Router deleted successfully.",
+      loadingMessage: "Deleting router...",
+      promise: deleteCall({}, `/${network.id}/routers/${router.id}`).then(
+        () => {
+          mutate(`/networks/${network.id}/routers`);
+        },
+      ),
+    });
+  };
+
+  const askForRoutingPeer = async (network: Network) => {
+    const choice = await confirm({
+      title: `Add Routing Peer to '${network.name}'?`,
+      description:
+        "Without a routing peer, the resources inside this network will not be accessible by any peers.",
+      confirmText: "Add Routing Peer",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openAddRoutingPeerModal(network);
+  };
+
+  const askForResource = async (network: Network) => {
+    const choice = await confirm({
+      title: `Add Resource to '${network.name}'?`,
+      description:
+        "Peers will be able to access your network resources once you add them.",
+      confirmText: "Add Resource",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openResourceModal(network);
+  };
+
+  const askForAccessControlPolicy = async (res: NetworkResource) => {
+    const choice = await confirm({
+      title: `Add policy for '${res.name}'?`,
+      description:
+        "Without a policy, the resource will not be accessible by any peers. Create a policy to control access to this resource.",
+      confirmText: "Create Policy",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openPolicyModal(currentNetwork, res);
+  };
+
+  return (
+    <NetworksContext.Provider
+      value={{
+        openAddRoutingPeerModal,
+        openEditNetworkModal,
+        openCreateNetworkModal,
+        openResourceModal,
+        openPolicyModal,
+        deleteNetwork,
+        deleteResource,
+        deleteRouter,
+        network,
+      }}
+    >
+      {children}
+
+      <NetworkModal
+        open={networkModal}
+        setOpen={setNetworkModal}
+        network={currentNetwork}
+        onCreated={async (network) => {
+          mutate("/networks");
+          await askForRoutingPeer(network);
+        }}
+        onUpdated={() => {
+          mutate("/networks");
+        }}
+      />
+      <Modal
+        open={policyModal}
+        onOpenChange={(state) => {
+          setPolicyModal(state);
+          setPolicyDefaultSettings(undefined);
+        }}
+      >
+        <AccessControlModalContent
+          key={policyModal ? "1" : "0"}
+          initialDestinationGroups={policyDefaultSettings?.destinationGroups}
+          initialName={policyDefaultSettings?.name}
+          initialDescription={policyDefaultSettings?.description}
+          onSuccess={(p) => {
+            setPolicyModal(false);
+            setPolicyDefaultSettings(undefined);
+            mutate("/networks");
+            if (network) {
+              mutate(`/networks/${network.id}/resources`);
+              mutate(`/networks/${network.id}`);
+            }
+          }}
+        />
+      </Modal>
+      {currentNetwork && (
+        <>
+          <NetworkRoutingPeerModal
+            network={currentNetwork}
+            router={currentRouter}
+            open={routingPeerModal}
+            onCreated={async () => {
+              setRoutingPeerModal(false);
+              setCurrentRouter(undefined);
+              mutate(`/networks`);
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${currentNetwork.id}/routers`);
+                mutate(`/networks/${network.id}`);
+              } else {
+                await askForResource(currentNetwork);
+              }
+            }}
+            onUpdated={async () => {
+              setRoutingPeerModal(false);
+              setCurrentRouter(undefined);
+              mutate(`/networks`);
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}`);
+                mutate(`/networks/${currentNetwork.id}/routers`);
+              }
+            }}
+            setOpen={(state) => {
+              setCurrentRouter(undefined);
+              setRoutingPeerModal(state);
+            }}
+          />
+          <NetworkResourceModal
+            network={currentNetwork}
+            resource={currentResource}
+            onCreated={async (r) => {
+              setResourceModal(false);
+              setCurrentResource(undefined);
+              mutate("/networks");
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              } else {
+                await askForAccessControlPolicy(r);
+              }
+            }}
+            onUpdated={() => {
+              setResourceModal(false);
+              setCurrentResource(undefined);
+              mutate("/networks");
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              }
+            }}
+            open={resourceModal}
+            setOpen={(state) => {
+              setCurrentResource(undefined);
+              setResourceModal(state);
+            }}
+          />
+        </>
+      )}
+    </NetworksContext.Provider>
+  );
+};
+
+export const useNetworksContext = () => {
+  const context = React.useContext(NetworksContext);
+  if (context === undefined) {
+    throw new Error("useNetworksContext must be used within a NetworkProvider");
+  }
+  return context;
+};
diff --git a/src/modules/peer/PeerRouteNetworkCell.tsx b/src/modules/networks/NetworkRangeCell.tsx
similarity index 58%
rename from src/modules/peer/PeerRouteNetworkCell.tsx
rename to src/modules/networks/NetworkRangeCell.tsx
index 23dd92b..e937a76 100644
--- a/src/modules/peer/PeerRouteNetworkCell.tsx
+++ b/src/modules/networks/NetworkRangeCell.tsx
@@ -1,16 +1,20 @@
+import { DomainListBadge } from "@components/ui/DomainListBadge";
 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;
+  network?: string;
+  domains?: string[];
 };
-export default function PeerRouteNetworkCell({ route }: Props) {
-  const isExitNode = route?.network === "0.0.0.0/0";
+export default function NetworkRangeCell({ network, domains }: Props) {
+  const isExitNode = network === "0.0.0.0/0";
+  const hasDomains = domains ? domains.length > 0 : false;
 
-  return isExitNode ? (
+  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"} />
@@ -24,8 +28,6 @@ export default function PeerRouteNetworkCell({ route }: Props) {
       </div>
     </ExitNodeHelpTooltip>
   ) : (
-    <div className={"font-mono dark:text-nb-gray-300 flex max-w-[10px]"}>
-      {route.network}
-    </div>
+    <div className={"font-mono dark:text-nb-gray-300 flex"}>{network}</div>
   );
 }
diff --git a/src/modules/networks/PolicyCell.tsx b/src/modules/networks/PolicyCell.tsx
new file mode 100644
index 0000000..cf68284
--- /dev/null
+++ b/src/modules/networks/PolicyCell.tsx
@@ -0,0 +1,30 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { PlusCircle, ShieldIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  count: number;
+};
+
+export const PolicyCell = ({ count }: Props) => {
+  return count > 0 ? (
+    <div className={"flex gap-3"}>
+      <Badge variant={"gray"} useHover={true}>
+        <ShieldIcon size={14} className={"text-green-500"} />
+        <div>
+          <span className={"font-medium"}>{count}</span> Access Policie(s)
+        </div>
+      </Badge>
+      <Button size={"xs"} variant={"secondary"} className={"min-w-[130px]"}>
+        <PlusCircle size={12} />
+        Add Policy
+      </Button>
+    </div>
+  ) : (
+    <Button size={"xs"} variant={"secondary"} className={"min-w-[130px]"}>
+      <PlusCircle size={12} />
+      Add Policy
+    </Button>
+  );
+};
diff --git a/src/modules/networks/misc/NetworkInformationSquare.tsx b/src/modules/networks/misc/NetworkInformationSquare.tsx
new file mode 100644
index 0000000..9f0def0
--- /dev/null
+++ b/src/modules/networks/misc/NetworkInformationSquare.tsx
@@ -0,0 +1,82 @@
+import DescriptionWithTooltip from "@components/ui/DescriptionWithTooltip";
+import { cn } from "@utils/helpers";
+import { ArrowRightIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  onClick?: () => void;
+  name: string;
+  description?: string;
+  active?: boolean;
+  size?: "md" | "lg";
+};
+export const NetworkInformationSquare = ({
+  onClick,
+  name,
+  description,
+  active = false,
+  size = "md",
+}: Props) => {
+  return (
+    <button
+      className={cn(
+        "flex w-full items-center max-w-[300px] gap-4 dark:text-neutral-300 text-neutral-500 transition-all group/network rounded-md",
+        onClick
+          ? "hover:text-neutral-100 hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
+          : "cursor-default",
+      )}
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          "bg-nb-gray-800 text-nb-gray-100 rounded-md flex items-center justify-center font-medium relative",
+          "uppercase",
+          size === "md" ? "h-10 w-10 text-md" : "h-12 w-12 text-lg",
+          "shrink-0",
+        )}
+      >
+        {name.substring(0, 2)}
+        <div
+          className={cn(
+            "h-2 w-2 rounded-full absolute bottom-0 right-0 z-10",
+            active ? "bg-green-500" : "bg-nb-gray-700",
+          )}
+        ></div>
+        <div
+          className={cn(
+            "h-3 w-3 bg-nb-gray-950 rounded-tl-[8px] rounded-br absolute bottom-0 right-0 transition-all",
+            onClick && "group-hover/network:bg-nb-gray-910",
+            onClick && "group-hover/table-row:bg-nb-gray-940",
+          )}
+        ></div>
+      </div>
+      <div className={"mt-[0px] flex items-center flex-wrap"}>
+        <p
+          className={cn(
+            "font-medium",
+            size == "md" ? "text-sm" : "text-xl leading-none mb-0.5",
+          )}
+        >
+          {name}
+        </p>
+        <DescriptionWithTooltip
+          className={cn(
+            "text-left",
+            size == "lg" && "text-md leading-none mt-0.5",
+          )}
+          maxChars={24}
+          text={description}
+        />
+      </div>
+      {onClick && (
+        <div
+          className={
+            "absolute right-0 top-0 h-full flex items-center pr-4 text-nb-gray-200 opacity-0 group-hover/network:opacity-100"
+          }
+        >
+          <ArrowRightIcon size={18} />
+        </div>
+      )}
+    </button>
+  );
+};
diff --git a/src/modules/networks/misc/NetworkNavigation.tsx b/src/modules/networks/misc/NetworkNavigation.tsx
new file mode 100644
index 0000000..590da45
--- /dev/null
+++ b/src/modules/networks/misc/NetworkNavigation.tsx
@@ -0,0 +1,27 @@
+import SidebarItem from "@components/SidebarItem";
+import * as React from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { NetworkRoutesDeprecationInfo } from "@/modules/networks/misc/NetworkRoutesDeprecationInfo";
+
+export const NetworkNavigation = () => {
+  return (
+    <SidebarItem
+      icon={<NetworkRoutesIcon />}
+      label="Networks"
+      collapsible
+      exactPathMatch={false}
+    >
+      <SidebarItem label="Networks" isChild href={"/networks"} />
+      <SidebarItem
+        label={
+          <div className={"flex items-center"}>
+            Network Routes
+            <NetworkRoutesDeprecationInfo />
+          </div>
+        }
+        isChild
+        href={"/network-routes"}
+      />
+    </SidebarItem>
+  );
+};
diff --git a/src/modules/networks/misc/NetworkRoutesDeprecationInfo.tsx b/src/modules/networks/misc/NetworkRoutesDeprecationInfo.tsx
new file mode 100644
index 0000000..3dc339a
--- /dev/null
+++ b/src/modules/networks/misc/NetworkRoutesDeprecationInfo.tsx
@@ -0,0 +1,23 @@
+import FullTooltip from "@components/FullTooltip";
+import { TriangleAlertIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  size?: number;
+};
+export const NetworkRoutesDeprecationInfo = ({ size = 14 }: Props) => {
+  return (
+    <FullTooltip
+      content={
+        <div className={"text-xs max-w-[230px]"}>
+          Network Routes will be deprecated and replaced with Networks.
+        </div>
+      }
+    >
+      <TriangleAlertIcon
+        size={size}
+        className={"text-amber-500 ml-2.5 hover:text-amber-400 cursor-help"}
+      />
+    </FullTooltip>
+  );
+};
diff --git a/src/modules/networks/resources/NetworkResourceModal.tsx b/src/modules/networks/resources/NetworkResourceModal.tsx
new file mode 100644
index 0000000..c62aa30
--- /dev/null
+++ b/src/modules/networks/resources/NetworkResourceModal.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import Separator from "@components/Separator";
+import { useApiCall } from "@utils/api";
+import { ExternalLinkIcon, PlusCircle, WorkflowIcon } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { ResourceSingleAddressInput } from "@/modules/networks/resources/ResourceSingleAddressInput";
+
+type Props = {
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  network: Network;
+  resource?: NetworkResource;
+  onCreated?: (r: NetworkResource) => void;
+  onUpdated?: (r: NetworkResource) => void;
+};
+
+export default function NetworkResourceModal({
+  network,
+  open,
+  setOpen,
+  resource,
+  onUpdated,
+  onCreated,
+}: Props) {
+  return (
+    <Modal open={open} onOpenChange={setOpen}>
+      <ResourceModalContent
+        key={open ? "1" : "0"}
+        network={network}
+        resource={resource}
+        onCreated={onCreated}
+        onUpdated={onUpdated}
+      />
+    </Modal>
+  );
+}
+
+type ModalProps = {
+  onCreated?: (r: NetworkResource) => void;
+  onUpdated?: (r: NetworkResource) => void;
+  network: Network;
+  resource?: NetworkResource;
+};
+
+export function ResourceModalContent({
+  onCreated,
+  onUpdated,
+  network,
+  resource,
+}: ModalProps) {
+  const create = useApiCall<NetworkResource>(
+    `/networks/${network.id}/resources`,
+  ).post;
+  const update = useApiCall<NetworkResource>(
+    `/networks/${network.id}/resources/${resource?.id}`,
+  ).put;
+
+  const [name, setName] = useState(resource?.name || "");
+  const [description, setDescription] = useState(resource?.description || "");
+  const [address, setAddress] = useState(resource?.address || "");
+  const [groups, setGroups, { save: saveGroups }] = useGroupHelper({
+    initial: resource?.groups || [],
+  });
+
+  const createResource = async () => {
+    const savedGroups = await saveGroups();
+    notify({
+      title: "Resource Created",
+      description: `The resource "${name}" has been created successfully.`,
+      loadingMessage: "Creating resource...",
+      promise: create({
+        name,
+        description,
+        address,
+        groups: savedGroups.map((g) => g.id),
+      }).then((r) => {
+        onCreated?.(r);
+      }),
+    });
+  };
+
+  const updateResource = async () => {
+    const savedGroups = await saveGroups();
+    notify({
+      title: "Resource Updated",
+      description: `The resource "${name}" has been updated successfully.`,
+      loadingMessage: "Updating resource...",
+      promise: update({
+        name,
+        description,
+        address,
+        groups: savedGroups.map((g) => g.id),
+      }).then((r) => {
+        onUpdated?.(r);
+      }),
+    });
+  };
+
+  // TODO:  Address validation is missing for proper handling of submit button
+  const canCreate = useMemo(() => {
+    return name.length > 0 && address.length > 0 && groups.length > 0;
+  }, [name, address, groups]);
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<WorkflowIcon size={20} />}
+        title={resource ? "Edit Resource" : "Add Resource"}
+        description={
+          resource
+            ? `${resource.name}`
+            : `Add new resource to "${network?.name}"`
+        }
+        color={"yellow"}
+      />
+
+      <Separator />
+
+      <div className={"px-8 flex-col flex gap-6 py-6"}>
+        <div>
+          <Label>Name</Label>
+          <HelpText>Provide a name for your resource</HelpText>
+          <Input
+            tabIndex={0}
+            placeholder={"e.g., Postgres Database"}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+
+        <ResourceSingleAddressInput value={address} onChange={setAddress} />
+
+        <div>
+          <Label>Assigned Groups</Label>
+          <HelpText>
+            Control access to this resource by assigning it to groups
+          </HelpText>
+          <PeerGroupSelector onChange={setGroups} values={groups} />
+        </div>
+      </div>
+
+      <ModalFooter className={"items-center"}>
+        <div className={"w-full"}>
+          <Paragraph className={"text-sm mt-auto"}>
+            Learn more about
+            <InlineLink href={"#"} target={"_blank"}>
+              Resources
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </Paragraph>
+        </div>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+
+          <Button
+            variant={"primary"}
+            data-cy={"submit-route"}
+            onClick={resource ? updateResource : createResource}
+            disabled={!canCreate}
+          >
+            {resource ? (
+              <>Save Changes</>
+            ) : (
+              <>
+                <PlusCircle size={16} />
+                Add Resource
+              </>
+            )}
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
diff --git a/src/modules/networks/resources/ResourceActionCell.tsx b/src/modules/networks/resources/ResourceActionCell.tsx
new file mode 100644
index 0000000..39b5f94
--- /dev/null
+++ b/src/modules/networks/resources/ResourceActionCell.tsx
@@ -0,0 +1,39 @@
+import Button from "@components/Button";
+import { SquarePenIcon, Trash2 } from "lucide-react";
+import * as React from "react";
+import { NetworkResource } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  resource: NetworkResource;
+};
+export const ResourceActionCell = ({ resource }: Props) => {
+  const { deleteResource, network, openResourceModal } = useNetworksContext();
+
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <Button
+        variant={"default-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          openResourceModal(network, resource);
+        }}
+      >
+        <SquarePenIcon size={16} />
+        Edit
+      </Button>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          deleteResource(network, resource);
+        }}
+      >
+        <Trash2 size={16} />
+        Remove
+      </Button>
+    </div>
+  );
+};
diff --git a/src/modules/networks/resources/ResourceAddressCell.tsx b/src/modules/networks/resources/ResourceAddressCell.tsx
new file mode 100644
index 0000000..5f6f5aa
--- /dev/null
+++ b/src/modules/networks/resources/ResourceAddressCell.tsx
@@ -0,0 +1,22 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import React from "react";
+import { NetworkResource } from "@/interfaces/Network";
+
+type Props = {
+  resource: NetworkResource;
+};
+export default function ResourceAddressCell({ resource }: Readonly<Props>) {
+  return (
+    <CopyToClipboardText
+      message={`${resource.address} has been copied to your clipboard`}
+    >
+      <div
+        className={
+          "font-mono dark:text-nb-gray-300 pt-1 flex gap-2 items-center text-[.82rem]"
+        }
+      >
+        {resource.address}
+      </div>
+    </CopyToClipboardText>
+  );
+}
diff --git a/src/modules/networks/resources/ResourceGroupCell.tsx b/src/modules/networks/resources/ResourceGroupCell.tsx
new file mode 100644
index 0000000..1b6c1d8
--- /dev/null
+++ b/src/modules/networks/resources/ResourceGroupCell.tsx
@@ -0,0 +1,15 @@
+import MultipleGroups from "@components/ui/MultipleGroups";
+import * as React from "react";
+import { Group } from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
+
+type Props = {
+  resource?: NetworkResource;
+};
+export const ResourceGroupCell = ({ resource }: Props) => {
+  return (
+    <div className={"flex"}>
+      <MultipleGroups groups={resource?.groups as Group[]} />
+    </div>
+  );
+};
diff --git a/src/modules/networks/resources/ResourceNameCell.tsx b/src/modules/networks/resources/ResourceNameCell.tsx
new file mode 100644
index 0000000..17f2e8e
--- /dev/null
+++ b/src/modules/networks/resources/ResourceNameCell.tsx
@@ -0,0 +1,32 @@
+import DescriptionWithTooltip from "@components/ui/DescriptionWithTooltip";
+import { cn } from "@utils/helpers";
+import { GlobeIcon, NetworkIcon, WorkflowIcon } from "lucide-react";
+import React from "react";
+import { NetworkResource } from "@/interfaces/Network";
+
+type Props = {
+  resource: NetworkResource;
+};
+
+export default function ResourceNameCell({ resource }: Readonly<Props>) {
+  return (
+    <div className={"flex gap-4 items-center"}>
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-nb-gray-900 transition-all",
+        )}
+      >
+        {resource.type === "host" && <WorkflowIcon size={15} />}
+        {resource.type === "domain" && <GlobeIcon size={15} />}
+        {resource.type === "subnet" && <NetworkIcon size={15} />}
+      </div>
+      <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light truncate">
+        <span className={"font-normal truncate"}>{resource.name}</span>
+        <DescriptionWithTooltip
+          className={cn("font-normal mt-0.5 ")}
+          text={resource.description}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/modules/networks/resources/ResourcePolicyCell.tsx b/src/modules/networks/resources/ResourcePolicyCell.tsx
new file mode 100644
index 0000000..f0f0d2f
--- /dev/null
+++ b/src/modules/networks/resources/ResourcePolicyCell.tsx
@@ -0,0 +1,101 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import useFetchApi from "@utils/api";
+import { PlusCircle, ShieldIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
+import { Group } from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
+import { Policy } from "@/interfaces/Policy";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  resource?: NetworkResource;
+};
+export const ResourcePolicyCell = ({ resource }: Props) => {
+  const { openPolicyModal, network } = useNetworksContext();
+  const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
+
+  const assignedPolicies = useMemo(() => {
+    const resourceGroups = resource?.groups as Group[];
+    return policies?.filter((policy) => {
+      if (!policy.enabled) return false;
+      const sourcePolicyGroups = policy.rules
+        ?.map((rule) => rule?.sources)
+        .flat() as Group[];
+      const destinationPolicyGroups = policy.rules
+        ?.map((rule) => rule?.destinations)
+        .flat() as Group[];
+      const policyGroups = [...sourcePolicyGroups, ...destinationPolicyGroups];
+      return resourceGroups.some((resourceGroup) =>
+        policyGroups.some((policyGroup) => policyGroup.id === resourceGroup.id),
+      );
+    });
+  }, [policies, resource]);
+
+  if (isLoading) {
+    return (
+      <div className={"flex gap-3"}>
+        <Skeleton height={34} width={220} />
+      </div>
+    );
+  }
+
+  const policyCount = assignedPolicies?.length || 0;
+
+  return (
+    network && (
+      <div className={"flex gap-3"}>
+        {policyCount > 0 && (
+          <FullTooltip
+            content={
+              <div className={"text-xs max-w-lg"}>
+                <span className={"font-medium text-nb-gray-100 text-sm"}>
+                  Assigned Policies
+                </span>
+                <div className={"flex gap-2 pt-2 pb-2 flex-wrap"}>
+                  {assignedPolicies?.map((policy: Policy, index: number) => {
+                    return (
+                      <Badge
+                        variant={"gray-ghost"}
+                        useHover={false}
+                        key={index}
+                        className={"justify-start font-medium"}
+                      >
+                        <ShieldIcon size={14} className={"text-green-500"} />
+                        {policy.name}
+                      </Badge>
+                    );
+                  })}
+                </div>
+              </div>
+            }
+            interactive={true}
+          >
+            <Badge variant={"gray"} useHover={true}>
+              <ShieldIcon size={14} className={"text-green-500"} />
+              <div>
+                <span className={"font-medium text-xs"}>
+                  {" "}
+                  {assignedPolicies?.length}
+                </span>
+              </div>
+            </Badge>
+          </FullTooltip>
+        )}
+
+        <Button
+          size={"xs"}
+          variant={"secondary"}
+          className={"min-w-[110px]"}
+          onClick={() => openPolicyModal(network, resource)}
+        >
+          <PlusCircle size={12} />
+          Add Policy
+        </Button>
+      </div>
+    )
+  );
+};
diff --git a/src/modules/networks/resources/ResourceSingleAddressInput.tsx b/src/modules/networks/resources/ResourceSingleAddressInput.tsx
new file mode 100644
index 0000000..89942c0
--- /dev/null
+++ b/src/modules/networks/resources/ResourceSingleAddressInput.tsx
@@ -0,0 +1,65 @@
+import HelpText from "@components/HelpText";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import { validator } from "@utils/helpers";
+import cidr from "ip-cidr";
+import { GlobeIcon, NetworkIcon, WorkflowIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+export const ResourceSingleAddressInput = ({ value, onChange }: Props) => {
+  const hasChars = useMemo(() => {
+    return !!value.match(/[a-z*]/i);
+  }, [value]);
+
+  const isCIDRBlock = useMemo(() => {
+    return !!value.match(/\//);
+  }, [value]);
+
+  const PrefixIcon = useMemo(() => {
+    if (hasChars) return <GlobeIcon size={14} />;
+    if (isCIDRBlock) return <NetworkIcon size={14} />;
+    return <WorkflowIcon size={14} />;
+  }, [isCIDRBlock, hasChars]);
+
+  const error = useMemo(() => {
+    if (value === "") return "";
+
+    // Case 1: If it has characters (potential domain) but is not a CIDR block
+    if (hasChars && !isCIDRBlock) {
+      if (!validator.isValidDomainWithWildcard(value)) {
+        return "Please enter a valid domain, e.g. intra.example.com or *.example.com";
+      }
+      return ""; // Valid domain
+    }
+
+    // Case 2: If it's not a valid domain, check if it's a valid CIDR
+    if (!cidr.isValidAddress(value)) {
+      return "Please enter a valid IP or CIDR, e.g., 192.168.1.0/24";
+    }
+
+    return ""; // Valid CIDR
+  }, [value, hasChars, isCIDRBlock]);
+
+  return (
+    <>
+      <div>
+        <Label>Address</Label>
+        <HelpText>
+          Enter a single IP address, CIDR block or domain name
+        </HelpText>
+        <Input
+          customPrefix={PrefixIcon}
+          error={error}
+          placeholder={"Address (IP, CIDR or Domain)"}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/modules/networks/resources/ResourceTypeCell.tsx b/src/modules/networks/resources/ResourceTypeCell.tsx
new file mode 100644
index 0000000..cec192e
--- /dev/null
+++ b/src/modules/networks/resources/ResourceTypeCell.tsx
@@ -0,0 +1,22 @@
+import Badge from "@components/Badge";
+import { NetworkIcon, WorkflowIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  single: boolean;
+};
+export default function ResourceTypeCell({ single }: Props) {
+  return (
+    <div className={"inline-flex"}>
+      {single ? (
+        <Badge variant={"gray"} className={"min-w-[130px]"}>
+          <WorkflowIcon size={14} /> Single IP
+        </Badge>
+      ) : (
+        <Badge variant={"gray"} className={"min-w-[130px]"}>
+          <NetworkIcon size={14} /> IP Range
+        </Badge>
+      )}
+    </div>
+  );
+}
diff --git a/src/modules/networks/resources/ResourcesSection.tsx b/src/modules/networks/resources/ResourcesSection.tsx
new file mode 100644
index 0000000..80f30b7
--- /dev/null
+++ b/src/modules/networks/resources/ResourcesSection.tsx
@@ -0,0 +1,68 @@
+import Button from "@components/Button";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { IconCirclePlus } from "@tabler/icons-react";
+import useFetchApi from "@utils/api";
+import * as React from "react";
+import { Suspense } from "react";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+import ResourcesTable from "@/modules/networks/resources/ResourcesTable";
+
+type ResourcesSectionProps = {
+  network: Network;
+};
+
+export const ResourcesSection = ({ network }: ResourcesSectionProps) => {
+  const { data: resources, isLoading } = useFetchApi<NetworkResource[]>(
+    `/networks/${network.id}/resources`,
+  );
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  const { openResourceModal } = useNetworksContext();
+
+  return (
+    <div className={"py-7 px-8"}>
+      <div className={"max-w-6xl"}>
+        <div className={"flex justify-between items-center"}>
+          <div>
+            <h2 ref={headingRef}>Resources</h2>
+            <Paragraph>Add and manage resources for this network.</Paragraph>
+          </div>
+          <div className={"inline-flex gap-4 justify-end"}>
+            <div>
+              <Button
+                variant={"primary"}
+                onClick={() => openResourceModal(network)}
+              >
+                <IconCirclePlus size={16} />
+                Add Resource
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Suspense
+          fallback={
+            <div>
+              <SkeletonTableHeader className={"!p-0"} />
+              <div className={"mt-8 w-full"}>
+                <SkeletonTable withHeader={false} />
+              </div>
+            </div>
+          }
+        >
+          <ResourcesTable
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+            resources={resources}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
diff --git a/src/modules/networks/resources/ResourcesTable.tsx b/src/modules/networks/resources/ResourcesTable.tsx
new file mode 100644
index 0000000..6a61711
--- /dev/null
+++ b/src/modules/networks/resources/ResourcesTable.tsx
@@ -0,0 +1,113 @@
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { Layers3Icon } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+import { NetworkResource } from "@/interfaces/Network";
+import { ResourceActionCell } from "@/modules/networks/resources/ResourceActionCell";
+import ResourceAddressCell from "@/modules/networks/resources/ResourceAddressCell";
+import { ResourceGroupCell } from "@/modules/networks/resources/ResourceGroupCell";
+import ResourceNameCell from "@/modules/networks/resources/ResourceNameCell";
+import { ResourcePolicyCell } from "@/modules/networks/resources/ResourcePolicyCell";
+
+type Props = {
+  resources?: NetworkResource[];
+  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+const NetworkResourceColumns: ColumnDef<NetworkResource>[] = [
+  {
+    id: "id",
+    accessorKey: "id",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Resource</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceNameCell resource={row.original} />;
+    },
+  },
+  {
+    id: "address",
+    accessorKey: "address",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Address</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceAddressCell resource={row.original} />;
+    },
+  },
+  {
+    id: "groups",
+    accessorKey: "id",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Groups</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceGroupCell resource={row.original} />;
+    },
+  },
+  {
+    id: "policies",
+    accessorKey: "id",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Policies</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourcePolicyCell resource={row.original} />;
+    },
+  },
+  {
+    id: "actions",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => {
+      return <ResourceActionCell resource={row.original} />;
+    },
+  },
+];
+
+export default function ResourcesTable({
+  resources,
+  isLoading,
+  headingTarget,
+}: Props) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  return (
+    <>
+      <DataTable
+        wrapperComponent={Card}
+        wrapperProps={{ className: "mt-6 w-full" }}
+        headingTarget={headingTarget}
+        sorting={sorting}
+        setSorting={setSorting}
+        minimal={true}
+        showSearchAndFilters={false}
+        inset={false}
+        tableClassName={"mt-0"}
+        text={"Peers"}
+        columns={NetworkResourceColumns}
+        keepStateInLocalStorage={false}
+        data={resources}
+        searchPlaceholder={"Search by name, IP, owner or group..."}
+        isLoading={isLoading}
+        getStartedCard={
+          <NoResults
+            className={"py-4"}
+            title={"This network has no resources"}
+            description={
+              "Add resources to this network to control what peers can access. Resources can be anything from a single IP, a subnet, or a domain."
+            }
+            icon={<Layers3Icon size={20} />}
+          />
+        }
+        columnVisibility={{}}
+        paginationPaddingClassName={"px-0 pt-8"}
+      />
+    </>
+  );
+}
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx
new file mode 100644
index 0000000..5e09b20
--- /dev/null
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import Button from "@components/Button";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import { PeerSelector } from "@components/PeerSelector";
+import { SegmentedTabs } from "@components/SegmentedTabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { cn } from "@utils/helpers";
+import { uniqBy } from "lodash";
+import {
+  ArrowDownWideNarrow,
+  ExternalLinkIcon,
+  FolderGit2,
+  MonitorSmartphoneIcon,
+  PlusCircle,
+  Settings2,
+  Share2Icon,
+  VenetianMask,
+} from "lucide-react";
+import React, { useState } from "react";
+import { Network, NetworkRouter } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+
+type Props = {
+  network: Network;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  onCreated?: (r: NetworkRouter) => void;
+  onUpdated?: (r: NetworkRouter) => void;
+  router?: NetworkRouter;
+};
+
+export default function NetworkRoutingPeerModal({
+  network,
+  open,
+  setOpen,
+  onCreated,
+  onUpdated,
+  router,
+}: Props) {
+  return (
+    <Modal open={open} onOpenChange={setOpen}>
+      <RoutingPeerModalContent
+        network={network}
+        router={router}
+        onCreated={onCreated}
+        onUpdated={onUpdated}
+        key={open ? "1" : "0"}
+      />
+    </Modal>
+  );
+}
+
+type ContentProps = {
+  network: Network;
+  router?: NetworkRouter;
+  onCreated?: (r: NetworkRouter) => void;
+  onUpdated?: (r: NetworkRouter) => void;
+};
+
+function RoutingPeerModalContent({
+  network,
+  router,
+  onCreated,
+  onUpdated,
+}: ContentProps) {
+  const isRoutingPeer = router ? router.peer != "" : true;
+
+  const [tab, setTab] = useState("router");
+  const [type, setType] = useState(isRoutingPeer ? "peer" : "group");
+
+  const create = useApiCall<NetworkRouter>(
+    `/networks/${network.id}/routers`,
+  ).post;
+  const update = useApiCall<NetworkRouter>(
+    `/networks/${network.id}/routers/${router?.id}`,
+  ).put;
+
+  const { data: peer } = useFetchApi<Peer>(
+    "/peers/" + router?.peer,
+    true,
+    false,
+    router ? router.peer != "" : false,
+  );
+
+  const [routingPeer, setRoutingPeer] = useState<Peer | undefined>(peer);
+
+  const [
+    routingPeerGroups,
+    setRoutingPeerGroups,
+    { getGroupsToUpdate: getAllRoutingGroupsToUpdate },
+  ] = useGroupHelper({
+    initial: router?.peer_groups || [],
+  });
+
+  const [masquerade, setMasquerade] = useState<boolean>(
+    router?.masquerade || true,
+  );
+  const [metric, setMetric] = useState(
+    router?.metric ? router.metric.toString() : "9999",
+  );
+
+  const addRouter = async () => {
+    // Create groups that do not exist
+    const g1 = getAllRoutingGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g1], "name").map((g) => g.promise);
+    const createdGroups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
+
+    // Check if routing peer is selected
+    const isRoutingPeer = type === "peer";
+
+    notify({
+      title: "Network Routing Peer",
+      description: "Routing Peer added successfully.",
+      loadingMessage: "Adding Routing Peer...",
+      promise: create({
+        peer: isRoutingPeer ? routingPeer?.id : undefined,
+        peer_groups: !isRoutingPeer
+          ? createdGroups.map((g) => g.id)
+          : undefined,
+        metric: parseInt(metric),
+        masquerade,
+      }).then((r) => {
+        onCreated?.(r);
+      }),
+    });
+  };
+
+  const updateRouter = async () => {
+    // Create groups that do not exist
+    const g1 = getAllRoutingGroupsToUpdate();
+    const createOrUpdateGroups = uniqBy([...g1], "name").map((g) => g.promise);
+    const createdGroups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
+
+    // Check if routing peer is selected
+    const isRoutingPeer = type === "peer";
+
+    notify({
+      title: "Network Routing Peer",
+      description: "Routing Peer added successfully.",
+      loadingMessage: "Adding Routing Peer...",
+      promise: update({
+        peer: isRoutingPeer ? routingPeer?.id : undefined,
+        peer_groups: !isRoutingPeer
+          ? createdGroups.map((g) => g.id)
+          : undefined,
+        metric: parseInt(metric),
+        masquerade,
+      }).then((r) => {
+        onUpdated?.(r);
+      }),
+    });
+  };
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<Share2Icon size={16} />}
+        title={router ? "Update Routing Peer" : "Add Routing Peer"}
+        description={`Route traffic to '${network.name}'`}
+        color={"netbird"}
+      />
+
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
+        <TabsList justify={"between"} className={"px-8 justify-between w-full"}>
+          <TabsTrigger value={"router"}>
+            <Share2Icon
+              size={16}
+              className={
+                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+              }
+            />
+            Routers
+          </TabsTrigger>
+
+          <TabsTrigger value={"settings"} className={"ml-auto"}>
+            <Settings2
+              size={16}
+              className={
+                "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+              }
+            />
+            Advanced Settings
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value={"router"} className={"pb-8"}>
+          <div className={"flex flex-col gap-4 px-8 "}>
+            <SegmentedTabs value={type} onChange={setType}>
+              <SegmentedTabs.List>
+                <SegmentedTabs.Trigger value={"peer"}>
+                  <MonitorSmartphoneIcon size={16} />
+                  Routing Peers
+                </SegmentedTabs.Trigger>
+
+                <SegmentedTabs.Trigger value={"group"}>
+                  <FolderGit2 size={16} />
+                  Peer Group
+                </SegmentedTabs.Trigger>
+              </SegmentedTabs.List>
+              <SegmentedTabs.Content value={"peer"}>
+                <div>
+                  <HelpText>
+                    Assign a single or multiple peers as a routing peers for the
+                    network.
+                  </HelpText>
+                  <PeerSelector onChange={setRoutingPeer} value={routingPeer} />
+                </div>
+              </SegmentedTabs.Content>
+              <SegmentedTabs.Content value={"group"}>
+                <div>
+                  <HelpText>
+                    Assign a peer group with Linux machines to be used as
+                    routing peers.
+                  </HelpText>
+                  <PeerGroupSelector
+                    max={1}
+                    onChange={setRoutingPeerGroups}
+                    values={routingPeerGroups}
+                  />
+                </div>
+              </SegmentedTabs.Content>
+            </SegmentedTabs>
+          </div>
+        </TabsContent>
+
+        <TabsContent value={"settings"} className={"pb-4"}>
+          <div className={"px-8 flex flex-col gap-6"}>
+            <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>Metric</Label>
+                <HelpText className={"max-w-[200px]"}>
+                  A lower metric indicates higher priority routing peers.
+                </HelpText>
+              </div>
+
+              <Input
+                min={1}
+                max={9999}
+                maxWidthClass={"max-w-[200px]"}
+                value={metric}
+                data-cy={"metric"}
+                errorTooltip={true}
+                type={"number"}
+                onChange={(e) => setMetric(e.target.value)}
+                customPrefix={
+                  <ArrowDownWideNarrow
+                    size={16}
+                    className={"text-nb-gray-300"}
+                  />
+                }
+              />
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      <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/routing-traffic-to-private-networks"
+              }
+              target={"_blank"}
+            >
+              Routing Peers
+              <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 == "router" && (
+            <Button variant={"primary"} onClick={() => setTab("settings")}>
+              Continue
+            </Button>
+          )}
+          {tab == "settings" && (
+            <Button
+              variant={"primary"}
+              disabled={
+                routingPeer == undefined && routingPeerGroups.length <= 0
+              }
+              onClick={router ? updateRouter : addRouter}
+            >
+              {router ? (
+                <>Save Changes</>
+              ) : (
+                <>
+                  <PlusCircle size={16} />
+                  Add Routing Peer
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
new file mode 100644
index 0000000..03511e2
--- /dev/null
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
@@ -0,0 +1,56 @@
+import GroupBadge from "@components/ui/GroupBadge";
+import PeerBadge from "@components/ui/PeerBadge";
+import useFetchApi from "@utils/api";
+import { ArrowRightIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { NetworkRouter } from "@/interfaces/Network";
+import type { Peer } from "@/interfaces/Peer";
+import PeerNameCell from "@/modules/peers/PeerNameCell";
+
+type Props = {
+  router: NetworkRouter;
+};
+export const NetworkRoutingPeerName = ({ router }: Props) => {
+  const { groups, isLoading: isGroupsLoading } = useGroups();
+  const isRoutingPeer = router.peer != "";
+
+  const { data: peer, isLoading } = useFetchApi<Peer>(
+    "/peers/" + router.peer,
+    true,
+    false,
+    isRoutingPeer,
+  );
+
+  const routingPeerGroup = useMemo(() => {
+    return groups?.find((g) => {
+      if (router.peer_groups && router.peer_groups.length > 0) {
+        return g.id === router.peer_groups[0];
+      } else {
+        return false;
+      }
+    });
+  }, [groups, router.peer_groups]);
+
+  if (isLoading || isGroupsLoading) {
+    return <Skeleton height={36} />;
+  }
+
+  if (isRoutingPeer && peer) {
+    return <PeerNameCell peer={peer} />;
+  }
+
+  if (routingPeerGroup) {
+    return (
+      <>
+        <div className={"flex items-center gap-2 max-w-[295px] min-w-[295px]"}>
+          <GroupBadge group={routingPeerGroup} />
+          <ArrowRightIcon size={14} className={"shrink-0"} />
+          <PeerBadge> {routingPeerGroup.peers_count} Peer(s)</PeerBadge>
+        </div>
+      </>
+    );
+  }
+};
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
new file mode 100644
index 0000000..86a3362
--- /dev/null
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
@@ -0,0 +1,70 @@
+import Button from "@components/Button";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { IconCirclePlus } from "@tabler/icons-react";
+import useFetchApi from "@utils/api";
+import * as React from "react";
+import { Suspense } from "react";
+import { Network, NetworkRouter } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+import NetworkRoutingPeersTable from "@/modules/networks/routing-peers/NetworkRoutingPeersTable";
+
+export const NetworkRoutingPeersSection = ({
+  network,
+}: {
+  network: Network;
+}) => {
+  const { data: routers, isLoading } = useFetchApi<NetworkRouter[]>(
+    `/networks/${network.id}/routers`,
+  );
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  const { openAddRoutingPeerModal } = useNetworksContext();
+
+  return (
+    <div className={"py-7 px-8"} id={"routing-peers"}>
+      <div className={"max-w-6xl"}>
+        <div className={"flex justify-between items-center"}>
+          <div>
+            <h2 ref={headingRef}>Routing Peers</h2>
+            <Paragraph>
+              Add and manage routing peers for this network.
+            </Paragraph>
+          </div>
+          <div className={"inline-flex gap-4 justify-end"}>
+            <div>
+              <Button
+                variant={"primary"}
+                onClick={() => openAddRoutingPeerModal(network)}
+              >
+                <IconCirclePlus size={16} />
+                Add Routing Peer
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Suspense
+          fallback={
+            <div>
+              <SkeletonTableHeader className={"!p-0"} />
+              <div className={"mt-8 w-full"}>
+                <SkeletonTable withHeader={false} />
+              </div>
+            </div>
+          }
+        >
+          <NetworkRoutingPeersTable
+            isLoading={isLoading}
+            routers={routers}
+            headingTarget={portalTarget}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
new file mode 100644
index 0000000..fc4ca60
--- /dev/null
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
@@ -0,0 +1,100 @@
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import * as React from "react";
+import { useState } from "react";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import { NetworkRouter } from "@/interfaces/Network";
+import { NetworkRoutingPeerName } from "@/modules/networks/routing-peers/NetworkRoutingPeerName";
+import { RoutingPeersActionCell } from "@/modules/networks/routing-peers/RoutingPeersActionCell";
+import { RoutingPeersMasqueradeCell } from "@/modules/networks/routing-peers/RoutingPeersMasqueradeCell";
+import RouteMetricCell from "@/modules/routes/RouteMetricCell";
+
+type Props = {
+  routers?: NetworkRouter[];
+  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+const NetworkRouterColumns: ColumnDef<NetworkRouter>[] = [
+  {
+    id: "name",
+    accessorKey: "id",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Peer</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <NetworkRoutingPeerName router={row.original} />,
+  },
+  {
+    id: "metric",
+    accessorKey: "metric",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Metric</DataTableHeader>;
+    },
+    cell: ({ row }) => <RouteMetricCell metric={row.original.metric} />,
+  },
+  {
+    id: "masquerade",
+    accessorKey: "masquerade",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Masquerade</DataTableHeader>;
+    },
+    cell: ({ row }) => <RoutingPeersMasqueradeCell router={row.original} />,
+  },
+  {
+    id: "actions",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => {
+      return <RoutingPeersActionCell router={row.original} />;
+    },
+  },
+];
+
+export default function NetworkRoutingPeersTable({
+  routers,
+  isLoading,
+  headingTarget,
+}: Props) {
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: "metric",
+      desc: false,
+    },
+  ]);
+
+  return (
+    <DataTable
+      wrapperComponent={Card}
+      wrapperProps={{ className: "mt-6 w-full" }}
+      headingTarget={headingTarget}
+      sorting={sorting}
+      setSorting={setSorting}
+      minimal={true}
+      showSearchAndFilters={false}
+      inset={false}
+      tableClassName={"mt-0"}
+      text={"Peers"}
+      columns={NetworkRouterColumns}
+      keepStateInLocalStorage={false}
+      data={routers}
+      searchPlaceholder={"Search by name, IP, owner or group..."}
+      isLoading={isLoading}
+      getStartedCard={
+        <NoResults
+          className={"py-4"}
+          title={"This network has no routing peers"}
+          description={
+            "Add routing peers to this network to access resources inside this network."
+          }
+          icon={<PeerIcon size={20} className={"fill-nb-gray-300"} />}
+        />
+      }
+      columnVisibility={{}}
+      paginationPaddingClassName={"px-0 pt-8"}
+    />
+  );
+}
diff --git a/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx b/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
new file mode 100644
index 0000000..91b9e00
--- /dev/null
+++ b/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
@@ -0,0 +1,40 @@
+import Button from "@components/Button";
+import { SquarePenIcon, Trash2 } from "lucide-react";
+import * as React from "react";
+import { NetworkRouter } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  router: NetworkRouter;
+};
+export const RoutingPeersActionCell = ({ router }: Props) => {
+  const { deleteRouter, network, openAddRoutingPeerModal } =
+    useNetworksContext();
+
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <Button
+        variant={"default-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          openAddRoutingPeerModal(network, router);
+        }}
+      >
+        <SquarePenIcon size={16} />
+        Edit
+      </Button>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          deleteRouter(network, router);
+        }}
+      >
+        <Trash2 size={16} />
+        Remove
+      </Button>
+    </div>
+  );
+};
diff --git a/src/modules/networks/routing-peers/RoutingPeersMasqueradeCell.tsx b/src/modules/networks/routing-peers/RoutingPeersMasqueradeCell.tsx
new file mode 100644
index 0000000..a1243d2
--- /dev/null
+++ b/src/modules/networks/routing-peers/RoutingPeersMasqueradeCell.tsx
@@ -0,0 +1,48 @@
+import { notify } from "@components/Notification";
+import { ToggleSwitch } from "@components/ToggleSwitch";
+import { useApiCall } from "@utils/api";
+import * as React from "react";
+import { useMemo } from "react";
+import { useSWRConfig } from "swr";
+import { NetworkRouter } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  router: NetworkRouter;
+};
+export const RoutingPeersMasqueradeCell = ({ router }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { network } = useNetworksContext();
+
+  const update = useApiCall<NetworkRouter>(
+    `/networks/${network?.id}/routers/${router?.id}`,
+  ).put;
+
+  const toggle = async (enabled: boolean) => {
+    notify({
+      title: "Network Routing Peer",
+      description: `Masquerade is now ${enabled ? "enabled" : "disabled"}`,
+      loadingMessage: "Updating masquerade...",
+      promise: update({
+        ...router,
+        masquerade: enabled,
+      }).then(() => {
+        mutate(`/networks/${network?.id}/routers`);
+      }),
+    });
+  };
+
+  const isChecked = useMemo(() => {
+    return router.masquerade;
+  }, [router]);
+
+  return (
+    <div className={"flex"}>
+      <ToggleSwitch
+        checked={isChecked}
+        size={"small"}
+        onClick={() => toggle(!isChecked)}
+      />
+    </div>
+  );
+};
diff --git a/src/modules/networks/table/NetworkActionCell.tsx b/src/modules/networks/table/NetworkActionCell.tsx
new file mode 100644
index 0000000..fb70647
--- /dev/null
+++ b/src/modules/networks/table/NetworkActionCell.tsx
@@ -0,0 +1,67 @@
+import Button from "@components/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import { EyeIcon, MoreVertical, PencilLineIcon, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { Network } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  network: Network;
+};
+export default function NetworkActionCell({ network }: Props) {
+  const { deleteNetwork, openEditNetworkModal } = useNetworksContext();
+  const router = useRouter();
+
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          asChild={true}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          <Button variant={"secondary"} className={"!px-3"}>
+            <MoreVertical size={16} className={"shrink-0"} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-auto" align="end">
+          <DropdownMenuItem
+            onClick={() => router.push(`/network?id=${network.id}`)}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <EyeIcon size={14} className={"shrink-0"} />
+              View Details
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => openEditNetworkModal(network)}>
+            <div className={"flex gap-3 items-center"}>
+              <PencilLineIcon size={14} className={"shrink-0"} />
+              Rename
+            </div>
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onClick={() => deleteNetwork(network)}
+            variant={"danger"}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <Trash2 size={14} className={"shrink-0"} />
+              Delete
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/modules/networks/table/NetworkNameCell.tsx b/src/modules/networks/table/NetworkNameCell.tsx
new file mode 100644
index 0000000..1cdf708
--- /dev/null
+++ b/src/modules/networks/table/NetworkNameCell.tsx
@@ -0,0 +1,25 @@
+import { useRouter } from "next/navigation";
+import { Network } from "@/interfaces/Network";
+import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
+
+type Props = {
+  network: Network;
+};
+export default function NetworkNameCell({ network }: Readonly<Props>) {
+  const router = useRouter();
+
+  const isActive = !!(
+    network?.routing_peers_count && network.routing_peers_count > 0
+  );
+
+  return (
+    <div className={"flex gap-4 items-center min-w-[300px] max-w-[300px]"}>
+      <NetworkInformationSquare
+        name={network.name}
+        active={isActive}
+        onClick={() => router.push(`/network?id=${network.id}`)}
+        description={network.description}
+      />
+    </div>
+  );
+}
diff --git a/src/modules/networks/table/NetworkPolicyCell.tsx b/src/modules/networks/table/NetworkPolicyCell.tsx
new file mode 100644
index 0000000..92d6c64
--- /dev/null
+++ b/src/modules/networks/table/NetworkPolicyCell.tsx
@@ -0,0 +1,56 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { PlusCircle, ShieldIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { Network } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  network: Network;
+};
+
+export const NetworkPolicyCell = ({ network }: Props) => {
+  const { openPolicyModal } = useNetworksContext();
+  const router = useRouter();
+
+  const hasPolicies = network?.policies && network?.policies?.length > 0;
+  const count = network?.policies?.length || 0;
+
+  return hasPolicies ? (
+    <div className={"flex gap-3"}>
+      <Badge
+        variant={"gray"}
+        useHover={true}
+        className={"cursor-pointer"}
+        onClick={() => router.push(`/network?id=${network.id}`)}
+      >
+        <ShieldIcon size={14} className={"text-green-500"} />
+        <div>
+          <span className={"font-medium text-xs"}>{count}</span>
+        </div>
+      </Badge>
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        className={"min-w-[130px]"}
+        onClick={() => openPolicyModal(network)}
+      >
+        <PlusCircle size={12} />
+        Add Policy
+      </Button>
+    </div>
+  ) : (
+    <>
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        className={"min-w-[130px]"}
+        onClick={() => openPolicyModal(network)}
+      >
+        <PlusCircle size={12} />
+        Add Policy
+      </Button>
+    </>
+  );
+};
diff --git a/src/modules/networks/table/NetworkResourceCell.tsx b/src/modules/networks/table/NetworkResourceCell.tsx
new file mode 100644
index 0000000..2d3cea8
--- /dev/null
+++ b/src/modules/networks/table/NetworkResourceCell.tsx
@@ -0,0 +1,56 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { LayersIcon, PlusCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { Network } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  network: Network;
+};
+
+export const NetworkResourceCell = ({ network }: Props) => {
+  const { openResourceModal } = useNetworksContext();
+  const router = useRouter();
+
+  const hasResources = network?.resources && network?.resources?.length > 0;
+  const count = network?.resources?.length || 0;
+
+  return hasResources ? (
+    <div className={"flex gap-3"}>
+      <Badge
+        variant={"gray"}
+        useHover={true}
+        className={"cursor-pointer"}
+        onClick={() => router.push(`/network?id=${network.id}`)}
+      >
+        <LayersIcon size={14} />
+        <div>
+          <span className={"font-medium text-xs"}>{count}</span>
+        </div>
+      </Badge>
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        className={"min-w-[130px]"}
+        onClick={() => openResourceModal(network)}
+      >
+        <PlusCircle size={12} />
+        Add Resource
+      </Button>
+    </div>
+  ) : (
+    <>
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        className={"min-w-[130px]"}
+        onClick={() => openResourceModal(network)}
+      >
+        <PlusCircle size={12} />
+        Add Resource
+      </Button>
+    </>
+  );
+};
diff --git a/src/modules/networks/table/NetworkRoutingPeerCell.tsx b/src/modules/networks/table/NetworkRoutingPeerCell.tsx
new file mode 100644
index 0000000..c2ab7b1
--- /dev/null
+++ b/src/modules/networks/table/NetworkRoutingPeerCell.tsx
@@ -0,0 +1,108 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import { HelpCircle, PlusCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useMemo } from "react";
+import { Network } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  network: Network;
+};
+export default function NetworkRoutingPeerCell({ network }: Props) {
+  const router = useRouter();
+  const disabledText = useMemo(
+    () => (
+      <>
+        High availability is currently{" "}
+        <span className={"text-yellow-400 font-medium"}>inactive</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const enabledText = useMemo(
+    () => (
+      <>
+        High availability is{" "}
+        <span className={"text-green-500 font-medium"}>active</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const { openAddRoutingPeerModal } = useNetworksContext();
+
+  const isHighlyAvailable = !!(
+    network?.routing_peers_count && network.routing_peers_count >= 2
+  );
+  const isActive = !!(
+    network?.routing_peers_count && network.routing_peers_count > 0
+  );
+
+  return (
+    <div className={"flex gap-3 items-center"}>
+      <FullTooltip
+        interactive={false}
+        content={
+          <div className={"max-w-xs text-xs"}>
+            <>
+              {isHighlyAvailable ? enabledText : disabledText}
+              {isHighlyAvailable ? (
+                <div className={"inline-flex mt-2"}>
+                  You can add more routing peers to increase the availability of
+                  this network.
+                </div>
+              ) : (
+                <div className={"inline-flex mt-2"}>
+                  Go ahead and add more routing peers or groups with routing
+                  peers to enable high availability for this network.
+                </div>
+              )}
+            </>
+          </div>
+        }
+      >
+        {isActive && (
+          <Badge
+            variant={isHighlyAvailable ? "green" : "gray"}
+            className={cn(
+              "inline-flex gap-2  min-w-[110px] font-medium items-center justify-center min-h-[34px] cursor-pointer",
+            )}
+            onClick={() =>
+              router.push(`/network?id=${network.id}#routing-peers`)
+            }
+            useHover={true}
+          >
+            <>
+              <div
+                className={cn(
+                  "h-2 w-2 rounded-full",
+                  isHighlyAvailable ? "bg-green-500" : "bg-yellow-400",
+                )}
+              ></div>
+              {network?.routing_peers_count && network.routing_peers_count}{" "}
+              Peer(s)
+            </>
+
+            <HelpCircle size={12} />
+          </Badge>
+        )}
+      </FullTooltip>
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        className={"min-w-[130px]"}
+        onClick={() => openAddRoutingPeerModal(network)}
+      >
+        <PlusCircle size={12} />
+        Add Routing Peer
+      </Button>
+    </div>
+  );
+}
diff --git a/src/modules/networks/table/NetworksTable.tsx b/src/modules/networks/table/NetworksTable.tsx
new file mode 100644
index 0000000..a26b22d
--- /dev/null
+++ b/src/modules/networks/table/NetworksTable.tsx
@@ -0,0 +1,194 @@
+import Button from "@components/Button";
+import InlineLink from "@components/InlineLink";
+import SquareIcon from "@components/SquareIcon";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import GetStartedTest from "@components/ui/GetStartedTest";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { cn } from "@utils/helpers";
+import { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { useSWRConfig } from "swr";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { useDialog } from "@/contexts/DialogProvider";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { Network } from "@/interfaces/Network";
+import {
+  NetworkProvider,
+  useNetworksContext,
+} from "@/modules/networks/NetworkProvider";
+import NetworkActionCell from "@/modules/networks/table/NetworkActionCell";
+import NetworkNameCell from "@/modules/networks/table/NetworkNameCell";
+import { NetworkPolicyCell } from "@/modules/networks/table/NetworkPolicyCell";
+import { NetworkResourceCell } from "@/modules/networks/table/NetworkResourceCell";
+import NetworkRoutingPeerCell from "@/modules/networks/table/NetworkRoutingPeerCell";
+
+export const NetworkTableColumns: ColumnDef<Network>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Network</DataTableHeader>
+    ),
+    sortingFn: "text",
+    cell: ({ row }) => <NetworkNameCell network={row.original} />,
+  },
+  {
+    accessorKey: "description",
+  },
+  {
+    accessorKey: "routers",
+    accessorFn: (network) => network?.routers?.length,
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Routing Peers</DataTableHeader>;
+    },
+    cell: ({ row }) => <NetworkRoutingPeerCell network={row.original} />,
+  },
+  {
+    accessorKey: "resources",
+    accessorFn: (network) => network?.resources?.length,
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Resources</DataTableHeader>;
+    },
+    cell: ({ row }) => <NetworkResourceCell network={row.original} />,
+  },
+  {
+    accessorKey: "policies",
+    accessorFn: (network) => network?.policies?.length,
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Policies</DataTableHeader>;
+    },
+    cell: ({ row }) => <NetworkPolicyCell network={row.original} />,
+  },
+  {
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => <NetworkActionCell network={row.original} />,
+  },
+];
+
+type Props = {
+  data?: Network[];
+  isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export default function NetworksTable({
+  isLoading,
+  data,
+  headingTarget,
+}: Props) {
+  const { mutate } = useSWRConfig();
+  const path = usePathname();
+
+  // Default sorting state of the table
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort" + path,
+    [
+      {
+        id: "name",
+        desc: false,
+      },
+    ],
+  );
+
+  const { confirm } = useDialog();
+
+  const showConfirm = async () => {
+    const choice = await confirm({
+      title: `Do you want to add a resource to 'Office Network' now?`,
+      description:
+        "Peers will be able to access your network resources once you add them.",
+      confirmText: "Add Resource",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+  };
+
+  return (
+    <NetworkProvider>
+      <DataTable
+        headingTarget={headingTarget}
+        isLoading={isLoading}
+        text={"Networks"}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={NetworkTableColumns}
+        data={data}
+        searchPlaceholder={"Search by network name or description..."}
+        columnVisibility={{
+          description: false,
+        }}
+        getStartedCard={
+          <GetStartedTest
+            icon={
+              <SquareIcon
+                icon={
+                  <NetworkRoutesIcon className={"fill-nb-gray-200"} size={20} />
+                }
+                color={"gray"}
+                size={"large"}
+              />
+            }
+            title={"Create New Network"}
+            description={
+              "It looks like you don't have any networks. Access resources like LANs and VPC by adding a network."
+            }
+            button={
+              <div className={"gap-x-4 flex items-center justify-center"}>
+                <AddNetworkButton />
+              </div>
+            }
+            learnMore={
+              <>
+                Learn more about
+                <InlineLink
+                  href={
+                    "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+                  }
+                  target={"_blank"}
+                >
+                  Networks
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </>
+            }
+          />
+        }
+        rightSide={() =>
+          data &&
+          data.length > 0 && (
+            <div className={cn("gap-x-4 ml-auto flex")}>
+              <AddNetworkButton />
+            </div>
+          )
+        }
+      >
+        {(table) => (
+          <>
+            <DataTableRowsPerPage table={table} disabled={data?.length == 0} />
+            <DataTableRefreshButton
+              isDisabled={data?.length == 0}
+              onClick={() => {
+                mutate("/networks").then();
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </NetworkProvider>
+  );
+}
+
+const AddNetworkButton = () => {
+  const { openCreateNetworkModal } = useNetworksContext();
+  return (
+    <Button variant={"primary"} onClick={openCreateNetworkModal}>
+      <PlusCircle size={16} />
+      Add Network
+    </Button>
+  );
+};
diff --git a/src/modules/route-group/NetworkRoutesTable.tsx b/src/modules/route-group/NetworkRoutesTable.tsx
index ddb6a2e..6b95a9f 100644
--- a/src/modules/route-group/NetworkRoutesTable.tsx
+++ b/src/modules/route-group/NetworkRoutesTable.tsx
@@ -59,6 +59,9 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
       return row.group_names?.map((name) => name).join(", ");
     },
   },
+  {
+    accessorKey: "routes_search",
+  },
   {
     id: "domains",
     accessorFn: (row) => {
@@ -162,6 +165,7 @@ export default function NetworkRoutesTable({
           group_names: false,
           domains: false,
           domain_search: false,
+          routes_search: false,
         }}
         renderExpandedRow={(row) => {
           const data = cloneDeep(row);
diff --git a/src/modules/route-group/useGroupedRoutes.tsx b/src/modules/route-group/useGroupedRoutes.tsx
index b30f3a9..639d7e5 100644
--- a/src/modules/route-group/useGroupedRoutes.tsx
+++ b/src/modules/route-group/useGroupedRoutes.tsx
@@ -60,6 +60,7 @@ export default function useGroupedRoutes({ routes }: Props) {
       const childDescriptions =
         routes?.map((r) => r?.description).join(", ") || "";
       const domainString = routes?.map((r) => r.domains?.join(", ")).join(", ");
+      const routesSearch = routes.map((r) => r?.network).join(", ");
 
       results.push({
         id,
@@ -73,6 +74,7 @@ export default function useGroupedRoutes({ routes }: Props) {
         is_using_route_groups: !!groupPeerRoute,
         description: groupPeerRoute ? groupPeerRoute?.description : undefined,
         description_search: childDescriptions,
+        routes_search: routesSearch,
         routes: routes,
         group_names: allGroupNames,
       });
diff --git a/src/modules/routes/RouteModal.tsx b/src/modules/routes/RouteModal.tsx
index 2a73ebc..123d6f6 100644
--- a/src/modules/routes/RouteModal.tsx
+++ b/src/modules/routes/RouteModal.tsx
@@ -68,7 +68,6 @@ export default function RouteModal({ children, open, setOpen }: Props) {
   const [newPolicy, setNewPolicy] = useState<Policy>();
 
   const handleCreatePolicyPrompt = async (r: Route) => {
-    console.log(r);
     if (!r?.access_control_groups) return;
 
     const choice = await confirm({
diff --git a/src/modules/routes/RouteTable.tsx b/src/modules/routes/RouteTable.tsx
index 5a3c165..b01683a 100644
--- a/src/modules/routes/RouteTable.tsx
+++ b/src/modules/routes/RouteTable.tsx
@@ -31,6 +31,9 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
     accessorKey: "domain_search",
     sortingFn: "text",
   },
+  {
+    accessorKey: "network",
+  },
   {
     id: "domains",
     accessorFn: (row) => {
@@ -140,6 +143,7 @@ export default function RouteTable({ row }: Props) {
           description: false,
           domains: false,
           domain_search: false,
+          network: false,
         }}
         setSorting={setSorting}
         columns={RouteTableColumns}
diff --git a/src/modules/routes/RouteUpdateModal.tsx b/src/modules/routes/RouteUpdateModal.tsx
index a60e990..cfb9a60 100644
--- a/src/modules/routes/RouteUpdateModal.tsx
+++ b/src/modules/routes/RouteUpdateModal.tsx
@@ -251,6 +251,10 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
         onSuccess && onSuccess(r);
         mutate("/routes");
       },
+      undefined,
+      {
+        remove_access_control_groups: !accessControlGroupIds,
+      },
     );
   };
 
diff --git a/src/modules/settings/NetworkSettingsTab.tsx b/src/modules/settings/NetworkSettingsTab.tsx
new file mode 100644
index 0000000..fe45cdf
--- /dev/null
+++ b/src/modules/settings/NetworkSettingsTab.tsx
@@ -0,0 +1,88 @@
+import Breadcrumbs from "@components/Breadcrumbs";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import { notify } from "@components/Notification";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useApiCall } from "@utils/api";
+import { GlobeIcon, NetworkIcon } from "lucide-react";
+import React, { useState } from "react";
+import { useSWRConfig } from "swr";
+import SettingsIcon from "@/assets/icons/SettingsIcon";
+import { Account } from "@/interfaces/Account";
+
+type Props = {
+  account: Account;
+};
+
+export default function NetworkSettingsTab({ account }: Props) {
+  const { mutate } = useSWRConfig();
+  const saveRequest = useApiCall<Account>("/accounts/" + account.id);
+
+  const [routingPeerDNSSetting, setRoutingPeerDNSSetting] = useState(
+    account.settings.routing_peer_dns_resolution_enabled,
+  );
+
+  const toggleSetting = async (toggle: boolean) => {
+    notify({
+      title: "Save Network Settings",
+      description: "Network settings successfully saved.",
+      promise: saveRequest
+        .put({
+          id: account.id,
+          settings: {
+            ...account.settings,
+            routing_peer_dns_resolution_enabled: toggle,
+          },
+        })
+        .then(() => {
+          setRoutingPeerDNSSetting(toggle);
+          mutate("/accounts");
+        }),
+      loadingMessage: "Saving the network settings...",
+    });
+  };
+
+  return (
+    <Tabs.Content value={"networks"}>
+      <div className={"p-default py-6 max-w-2xl"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/settings"}
+            label={"Settings"}
+            icon={<SettingsIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href={"/settings#network"}
+            label={"Network"}
+            icon={<NetworkIcon size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <div className={"flex items-start justify-between"}>
+          <h1>Networks</h1>
+        </div>
+
+        <div className={"flex flex-col gap-6 w-full mt-8"}>
+          <div>
+            <FancyToggleSwitch
+              value={routingPeerDNSSetting}
+              onChange={toggleSetting}
+              label={
+                <>
+                  <GlobeIcon size={15} />
+                  Enable DNS Wildcard Routing
+                </>
+              }
+              helpText={
+                <>
+                  Allow routing using DNS wildcards. This requires NetBird
+                  client v0.35 or higher. Changes will only take effect after
+                  restarting the clients.
+                </>
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </Tabs.Content>
+  );
+}
diff --git a/src/modules/users/ServiceUserModal.tsx b/src/modules/users/ServiceUserModal.tsx
index cd5f568..e232534 100644
--- a/src/modules/users/ServiceUserModal.tsx
+++ b/src/modules/users/ServiceUserModal.tsx
@@ -96,6 +96,7 @@ export function ServiceUserModalContent({ onSuccess }: ModalProps) {
               }
               placeholder={"John Doe"}
               value={name}
+              data-cy={"service-user-name"}
               onChange={(e) => setName(e.target.value)}
             />
           </div>
@@ -126,7 +127,12 @@ export function ServiceUserModalContent({ onSuccess }: ModalProps) {
             <Button variant={"secondary"}>Cancel</Button>
           </ModalClose>
 
-          <Button variant={"primary"} disabled={isDisabled} onClick={create}>
+          <Button
+            variant={"primary"}
+            disabled={isDisabled}
+            onClick={create}
+            data-cy={"create-service-user"}
+          >
             <PlusCircle size={16} />
             Create Service User
           </Button>
diff --git a/src/modules/users/ServiceUsersTable.tsx b/src/modules/users/ServiceUsersTable.tsx
index 802daf4..b2d3983 100644
--- a/src/modules/users/ServiceUsersTable.tsx
+++ b/src/modules/users/ServiceUsersTable.tsx
@@ -126,7 +126,11 @@ export default function ServiceUsersTable({
               <div className={"flex flex-col"}>
                 <div>
                   <ServiceUserModal>
-                    <Button variant={"primary"} className={""}>
+                    <Button
+                      variant={"primary"}
+                      className={""}
+                      data-cy={"open-service-user-modal"}
+                    >
                       <PlusCircle size={16} />
                       Create Service User
                     </Button>
@@ -154,7 +158,11 @@ export default function ServiceUsersTable({
           <>
             {users && users?.length > 0 && (
               <ServiceUserModal>
-                <Button variant={"primary"} className={"ml-auto"}>
+                <Button
+                  variant={"primary"}
+                  className={"ml-auto"}
+                  data-cy={"open-service-user-modal"}
+                >
                   <PlusCircle size={16} />
                   Create Service User
                 </Button>
diff --git a/src/modules/users/UserRoleSelector.tsx b/src/modules/users/UserRoleSelector.tsx
index e91fbcb..206453a 100644
--- a/src/modules/users/UserRoleSelector.tsx
+++ b/src/modules/users/UserRoleSelector.tsx
@@ -104,6 +104,7 @@ export function UserRoleSelector({
           disabled={disabled}
           ref={inputRef}
           className={"w-full"}
+          data-cy={"user-role-selector"}
         >
           <div className={"w-full flex justify-between items-center gap-2"}>
             {selectedRole && (
@@ -160,6 +161,7 @@ export function UserRoleSelector({
                       <CommandItem
                         key={item.value}
                         value={item.value}
+                        data-cy={"user-role-selector-item"}
                         className={"py-1 px-2"}
                         onSelect={() => toggle(item.value)}
                         onClick={(e) => e.preventDefault()}
diff --git a/src/modules/users/table-cells/UserActionCell.tsx b/src/modules/users/table-cells/UserActionCell.tsx
index 94751f1..b1d376c 100644
--- a/src/modules/users/table-cells/UserActionCell.tsx
+++ b/src/modules/users/table-cells/UserActionCell.tsx
@@ -53,6 +53,7 @@ export default function UserActionCell({ user, serviceUser = false }: Props) {
         variant={"danger-outline"}
         size={"sm"}
         onClick={openConfirm}
+        data-cy={"delete-user"}
         disabled={disabled}
       >
         <Trash2 size={16} />
diff --git a/src/modules/users/table-cells/UserGroupCell.tsx b/src/modules/users/table-cells/UserGroupCell.tsx
index 7ba24d0..81abbd9 100644
--- a/src/modules/users/table-cells/UserGroupCell.tsx
+++ b/src/modules/users/table-cells/UserGroupCell.tsx
@@ -1,6 +1,7 @@
 import MultipleGroups from "@components/ui/MultipleGroups";
 import { uniq } from "lodash";
-import React, { useState } from "react";
+import React, { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { Group } from "@/interfaces/Group";
 import { User } from "@/interfaces/User";
@@ -9,16 +10,23 @@ import EmptyRow from "@/modules/common-table-rows/EmptyRow";
 type Props = {
   user: User;
 };
-export default function UserGroupCell({ user }: Props) {
-  const { groups } = useGroups();
+export default function UserGroupCell({ user }: Readonly<Props>) {
+  const { groups, isLoading } = useGroups();
 
-  const [allGroups] = useState(() => {
+  const allGroups = useMemo(() => {
+    if (isLoading) return [];
     return uniq(user.auto_groups)
-      .map((group) => {
-        return groups?.find((g) => g.id == group);
-      })
-      .filter((g) => g != undefined) as Group[];
-  });
+      .map((group) => groups?.find((g) => g?.id == group))
+      .filter((g): g is Group => g !== undefined);
+  }, [user.auto_groups, groups, isLoading]);
+
+  if (isLoading)
+    return (
+      <div className={"flex gap-2"}>
+        <Skeleton height={34} width={90} />
+        <Skeleton height={34} width={45} />
+      </div>
+    );
 
   return allGroups.length == 0 ? (
     <EmptyRow />
diff --git a/src/modules/users/table-cells/UserNameCell.tsx b/src/modules/users/table-cells/UserNameCell.tsx
index e527020..0cd7dd1 100644
--- a/src/modules/users/table-cells/UserNameCell.tsx
+++ b/src/modules/users/table-cells/UserNameCell.tsx
@@ -11,7 +11,10 @@ export default function UserNameCell({ user }: Props) {
   const isCurrent = user.is_current;
 
   return (
-    <div className={cn("flex gap-4 px-2 py-1 items-center")}>
+    <div
+      className={cn("flex gap-4 px-2 py-1 items-center")}
+      data-cy={"user-name-cell"}
+    >
       <div
         className={
           "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
diff --git a/src/modules/users/table-cells/UserStatusCell.tsx b/src/modules/users/table-cells/UserStatusCell.tsx
index a163e1b..1f338ba 100644
--- a/src/modules/users/table-cells/UserStatusCell.tsx
+++ b/src/modules/users/table-cells/UserStatusCell.tsx
@@ -9,7 +9,10 @@ export default function UserStatusCell({ user }: Props) {
   const status = user.status;
 
   return (
-    <div className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}>
+    <div
+      className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}
+      data-cy={"user-status-cell"}
+    >
       <span
         className={cn(
           "h-2 w-2 rounded-full",
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
index 1545423..6e8dcdb 100644
--- a/src/utils/api.tsx
+++ b/src/utils/api.tsx
@@ -21,6 +21,7 @@ const config = loadConfig();
 
 type RequestOptions = {
   signal?: AbortSignal;
+  origin?: string;
 };
 
 async function apiRequest<T>(
@@ -30,9 +31,9 @@ async function apiRequest<T>(
   data?: any,
   options?: RequestOptions,
 ) {
-  const origin = config.apiOrigin;
+  const origin = options?.origin ? options?.origin : config.apiOrigin + "/api";
 
-  const res = await oidcFetch(`${origin}/api${url}`, {
+  const res = await oidcFetch(`${origin}${url}`, {
     method,
     body: JSON.stringify(data),
     signal: options?.signal,
@@ -108,6 +109,7 @@ export default function useFetchApi<T>(
   ignoreError = false,
   revalidate = true,
   allowFetch = true,
+  options?: RequestOptions,
 ) {
   const { fetch } = useNetBirdFetch(ignoreError);
   const handleErrors = useApiErrorHandling(ignoreError);
@@ -116,7 +118,7 @@ export default function useFetchApi<T>(
     url,
     async (url) => {
       if (!allowFetch) return;
-      return apiRequest<T>(fetch, "GET", url).catch((err) =>
+      return apiRequest<T>(fetch, "GET", url, undefined, options).catch((err) =>
         handleErrors(err as ErrorResponse),
       );
     },
@@ -137,28 +139,56 @@ export default function useFetchApi<T>(
   } as const;
 }
 
-export function useApiCall<T>(url: string, ignoreError = false) {
+export function useApiCall<T>(
+  url: string,
+  ignoreError = false,
+  requestOptions?: RequestOptions,
+) {
   const { fetch } = useNetBirdFetch(ignoreError);
   const handleErrors = useApiErrorHandling(ignoreError);
 
   return {
     post: async (data: any, suffix = "", options?: RequestOptions) => {
-      return apiRequest<T>(fetch, "POST", url + suffix, data, options)
+      return apiRequest<T>(
+        fetch,
+        "POST",
+        url + suffix,
+        data,
+        options || requestOptions,
+      )
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
     put: async (data: any, suffix = "", options?: RequestOptions) => {
-      return apiRequest<T>(fetch, "PUT", url + suffix, data, options)
+      return apiRequest<T>(
+        fetch,
+        "PUT",
+        url + suffix,
+        data,
+        options || requestOptions,
+      )
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
     del: async (data: any = "", suffix = "", options?: RequestOptions) => {
-      return apiRequest<T>(fetch, "DELETE", url + suffix, data, options)
+      return apiRequest<T>(
+        fetch,
+        "DELETE",
+        url + suffix,
+        data,
+        options || requestOptions,
+      )
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
     get: async (suffix = "", options?: RequestOptions) => {
-      return apiRequest<T>(fetch, "GET", url + suffix, undefined, options)
+      return apiRequest<T>(
+        fetch,
+        "GET",
+        url + suffix,
+        undefined,
+        options || requestOptions,
+      )
         .then((res) => Promise.resolve(res as T))
         .catch((err) => handleErrors(err as ErrorResponse)) as Promise<T>;
     },
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index d9174dd..9a548b5 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -60,6 +60,29 @@ export const validator = {
       return false;
     }
   },
+  isValidDomainWithWildcard: (domain: string) => {
+    // Basic checks
+    if (!domain || domain.length > 255 || domain.includes(" ")) {
+      return false;
+    }
+
+    // Handle wildcard
+    if (domain.includes("*")) {
+      if (!domain.startsWith("*.") || domain.indexOf("*", 1) !== -1) {
+        return false;
+      }
+      domain = "sub" + domain.slice(1); // Replace * with valid subdomain for testing
+    }
+
+    // Split and validate each part
+    const parts = domain.split(".");
+    if (parts.length < 2) {
+      return false;
+    }
+
+    const validPart = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/;
+    return parts.every((part) => validPart.test(part));
+  },
   isValidEmail: (email: string) => {
     const regExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,63}$/i;
     try {
diff --git a/src/utils/netbird.ts b/src/utils/netbird.ts
index d32de7f..72164e7 100644
--- a/src/utils/netbird.ts
+++ b/src/utils/netbird.ts
@@ -6,15 +6,15 @@ export const GRPC_API_ORIGIN = config.grpcApiOrigin;
 export const getNetBirdUpCommand = () => {
   let cmd = "netbird up";
   if (GRPC_API_ORIGIN) {
-    cmd += " --management-url " + GRPC_API_ORIGIN
+    cmd += " --management-url " + GRPC_API_ORIGIN;
   }
   if (!isNetBirdHosted()) {
-    let admin_url = window.location.protocol + "//" + window.location.hostname
+    let admin_url = window.location.protocol + "//" + window.location.hostname;
     if (window.location.port != "") {
-      admin_url += ":" + window.location.port
+      admin_url += ":" + window.location.port;
     }
-    cmd += " --admin-url " + admin_url
-  };
+    cmd += " --admin-url " + admin_url;
+  }
   return cmd;
 };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6fbd0d3..3ddd687 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,6 +21,7 @@ const config: Config = {
           "700": "#474e57",
           "800": "#3f444b",
           "900": "#32363D",
+          "910": "#2b2f33",
           "920": "#25282d",
           "925": "#1e2123",
           "930": "#25282c",