From 13b391ac4bd99a11ff15483dad2b5854512978c7 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 12 Feb 2026 14:52:01 +0100
Subject: [PATCH 01/15] Add reverse proxy

---
 .gitignore                                    |   2 +
 package-lock.json                             |  69 +-
 package.json                                  |   4 +-
 src/app/(dashboard)/events/proxy/page.tsx     |  73 ++
 src/app/(dashboard)/network-routes/page.tsx   |   2 +-
 src/app/(dashboard)/network/page.tsx          | 104 ++-
 src/app/(dashboard)/peer/page.tsx             | 286 ++++--
 src/app/(dashboard)/peers/page.tsx            |   2 +-
 .../reverse-proxy/custom-domains/layout.tsx   |   8 +
 .../reverse-proxy/custom-domains/page.tsx     |  70 ++
 src/app/(dashboard)/reverse-proxy/page.tsx    |  15 +
 .../reverse-proxy/services/layout.tsx         |   8 +
 .../reverse-proxy/services/page.tsx           |  72 ++
 src/app/(dashboard)/settings/page.tsx         |   2 +-
 src/app/globals.css                           |  16 +
 src/assets/icons/PeerOSIcon.tsx               |  26 +
 src/assets/icons/PeerOrResourceIcon.tsx       |  19 +
 src/assets/icons/ResourceIcon.tsx             |  20 +
 src/assets/icons/ReverseProxyIcon.tsx         |  15 +
 src/auth/OIDCProvider.tsx                     |  30 +-
 src/auth/SecureProvider.tsx                   |  33 +
 src/components/Breadcrumbs.tsx                |   8 +-
 src/components/Button.tsx                     |   5 +-
 src/components/Callout.tsx                    |   2 +
 src/components/CopyToClipboardText.tsx        |  31 +-
 src/components/DatePickerWithRange.tsx        |   3 +
 .../nodes => components}/DeviceCard.tsx       |  65 +-
 src/components/ExternalLinkText.tsx           |  45 +
 src/components/FancyToggleSwitch.tsx          |   6 +-
 src/components/HelpTooltip.tsx                |  30 +
 src/components/Input.tsx                      |   2 +
 src/components/Label.tsx                      |  39 +-
 src/components/Notification.tsx               | 198 +++--
 src/components/PeerGroupSelector.tsx          | 169 ++--
 src/components/PeerSelector.tsx               |   1 -
 src/components/PinCodeInput.tsx               | 123 +++
 src/components/PortSelector.tsx               |   1 -
 src/components/SettingCard.tsx                |  92 ++
 src/components/SidebarItem.tsx                |  23 +-
 src/components/VirtualScrollAreaList.tsx      |   5 +-
 src/components/modal/Modal.tsx                |  14 +
 src/components/select/SelectDropdown.tsx      |  46 +-
 .../skeletons/SkeletonDeviceCard.tsx          |  16 +
 src/components/table/DataTable.tsx            | 293 ++++---
 .../table/DataTableHeadingPortal.tsx          |  36 +-
 src/components/ui/AIButton.tsx                |  21 -
 src/components/ui/GetStartedTest.tsx          |   2 +-
 src/components/ui/NewBadge.tsx                |  16 -
 src/components/ui/NoResults.tsx               |  18 +-
 src/components/ui/PeerBadge.tsx               |  84 --
 src/components/ui/SmallBadge.tsx              |  15 +-
 src/components/ui/TruncatedText.tsx           |  77 +-
 src/contexts/ReverseProxiesProvider.tsx       | 636 ++++++++++++++
 src/contexts/ServerPaginationProvider.tsx     | 222 +++++
 src/hooks/useUrlTab.ts                        |  27 +
 src/interfaces/Network.ts                     |   1 +
 src/interfaces/Permission.ts                  |   2 +
 src/interfaces/ReverseProxy.ts                | 116 +++
 src/layouts/AppLayout.tsx                     |  13 +-
 src/layouts/Navigation.tsx                    |  78 +-
 src/modules/activity/ActivityDescription.tsx  |  14 +-
 .../NetworkRoutingPeerCount.tsx               |   2 +-
 .../control-center/nodes/NetworkNode.tsx      |   2 +-
 src/modules/control-center/nodes/PeerNode.tsx |   2 +-
 .../control-center/nodes/ResourceNode.tsx     |   2 +-
 .../control-center/nodes/SelectPeerNode.tsx   |   2 +-
 src/modules/networks/NetworkProvider.tsx      |  16 +-
 .../misc/NetworkInformationSquare.tsx         |   2 +-
 .../resources/NetworkResourceModal.tsx        |  14 +-
 .../resources/ResourceExposeServiceCell.tsx   |  74 ++
 .../networks/resources/ResourceGroupModal.tsx |  11 +-
 .../networks/resources/ResourcePolicyCell.tsx |   1 -
 .../networks/resources/ResourcesSection.tsx   |  52 --
 .../resources/ResourcesTabContent.tsx         |  55 ++
 .../networks/resources/ResourcesTable.tsx     |  21 +-
 .../NetworkRoutingPeersSection.tsx            |  73 --
 .../NetworkRoutingPeersTabContent.tsx         |  77 ++
 .../NetworkRoutingPeersTable.tsx              |  14 +-
 .../networks/table/NetworkRoutingPeerCell.tsx |   2 +-
 src/modules/onboarding/OnboardingDevices.tsx  | 109 +--
 src/modules/peer/AccessiblePeersSection.tsx   |   7 +-
 src/modules/peer/PeerNetworkRoutesSection.tsx |  27 +-
 src/modules/peer/PeerRemoteJobsSection.tsx    |   7 +-
 src/modules/peers/PeerNameCell.tsx            |   2 +-
 src/modules/peers/PeerVersionCell.tsx         |   7 +-
 src/modules/peers/PeersTable.tsx              |   4 +-
 .../reverse-proxy/ReverseProxyModal.tsx       | 814 ++++++++++++++++++
 .../reverse-proxy/auth/AuthPasswordModal.tsx  | 118 +++
 .../reverse-proxy/auth/AuthPinModal.tsx       | 109 +++
 .../reverse-proxy/auth/AuthSSOModal.tsx       |  97 +++
 .../domain/CustomDomainClusterCell.tsx        |  36 +
 .../domain/CustomDomainModal.tsx              | 180 ++++
 .../domain/CustomDomainSelector.tsx           | 123 +++
 .../domain/CustomDomainVerificationModal.tsx  | 158 ++++
 .../domain/CustomDomainsTable.tsx             | 352 ++++++++
 .../ReverseProxyEventsAuthMethodCell.tsx      |  61 ++
 .../events/ReverseProxyEventsDurationCell.tsx |  14 +
 .../ReverseProxyEventsLocationIpCell.tsx      |  87 ++
 .../events/ReverseProxyEventsReasonCell.tsx   |  14 +
 .../events/ReverseProxyEventsRequestCell.tsx  |  42 +
 .../events/ReverseProxyEventsStatusCell.tsx   |  17 +
 .../events/ReverseProxyEventsTable.tsx        | 267 ++++++
 .../events/ReverseProxyEventsTimeCell.tsx     |  35 +
 .../events/ReverseProxyEventsUserCell.tsx     |  59 ++
 .../table/ReverseProxyActionCell.tsx          |  69 ++
 .../table/ReverseProxyActiveCell.tsx          |  31 +
 .../table/ReverseProxyArrowCell.tsx           |  16 +
 .../table/ReverseProxyAuthCell.tsx            |  64 ++
 .../table/ReverseProxyClusterCell.tsx         |  51 ++
 .../table/ReverseProxyDestinationCell.tsx     |  30 +
 .../table/ReverseProxyNameCell.tsx            |  67 ++
 .../table/ReverseProxyStatusCell.tsx          |  65 ++
 .../reverse-proxy/table/ReverseProxyTable.tsx | 349 ++++++++
 .../table/ReverseProxyTargetsCell.tsx         |  52 ++
 .../targets/ReverseProxyTargetActionCell.tsx  |  46 +
 .../targets/ReverseProxyTargetActiveCell.tsx  |  32 +
 .../targets/ReverseProxyTargetContext.tsx     |  16 +
 .../targets/ReverseProxyTargetDevice.tsx      |  88 ++
 .../targets/ReverseProxyTargetModal.tsx       | 596 +++++++++++++
 .../targets/ReverseProxyTargetPath.tsx        |  46 +
 .../targets/ReverseProxyTargetsTable.tsx      |  86 ++
 .../flat/ReverseProxyFlatTargetActionCell.tsx |  83 ++
 .../ReverseProxyFlatTargetsTabContent.tsx     |  67 ++
 .../flat/ReverseProxyFlatTargetsTable.tsx     | 214 +++++
 src/modules/settings/ClientSettingsTab.tsx    |  24 +-
 .../setup-keys/SetupKeyEphemeralCell.tsx      |  37 -
 src/utils/api.tsx                             |   2 +
 tailwind.config.ts                            |   6 +-
 128 files changed, 7738 insertions(+), 1038 deletions(-)
 create mode 100644 src/app/(dashboard)/events/proxy/page.tsx
 create mode 100644 src/app/(dashboard)/reverse-proxy/custom-domains/layout.tsx
 create mode 100644 src/app/(dashboard)/reverse-proxy/custom-domains/page.tsx
 create mode 100644 src/app/(dashboard)/reverse-proxy/page.tsx
 create mode 100644 src/app/(dashboard)/reverse-proxy/services/layout.tsx
 create mode 100644 src/app/(dashboard)/reverse-proxy/services/page.tsx
 create mode 100644 src/assets/icons/PeerOSIcon.tsx
 create mode 100644 src/assets/icons/PeerOrResourceIcon.tsx
 create mode 100644 src/assets/icons/ResourceIcon.tsx
 create mode 100644 src/assets/icons/ReverseProxyIcon.tsx
 rename src/{modules/control-center/nodes => components}/DeviceCard.tsx (56%)
 create mode 100644 src/components/ExternalLinkText.tsx
 create mode 100644 src/components/HelpTooltip.tsx
 create mode 100644 src/components/PinCodeInput.tsx
 create mode 100644 src/components/SettingCard.tsx
 create mode 100644 src/components/skeletons/SkeletonDeviceCard.tsx
 delete mode 100644 src/components/ui/AIButton.tsx
 delete mode 100644 src/components/ui/NewBadge.tsx
 delete mode 100644 src/components/ui/PeerBadge.tsx
 create mode 100644 src/contexts/ReverseProxiesProvider.tsx
 create mode 100644 src/contexts/ServerPaginationProvider.tsx
 create mode 100644 src/hooks/useUrlTab.ts
 create mode 100644 src/interfaces/ReverseProxy.ts
 create mode 100644 src/modules/networks/resources/ResourceExposeServiceCell.tsx
 delete mode 100644 src/modules/networks/resources/ResourcesSection.tsx
 create mode 100644 src/modules/networks/resources/ResourcesTabContent.tsx
 delete mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
 create mode 100644 src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
 create mode 100644 src/modules/reverse-proxy/ReverseProxyModal.tsx
 create mode 100644 src/modules/reverse-proxy/auth/AuthPasswordModal.tsx
 create mode 100644 src/modules/reverse-proxy/auth/AuthPinModal.tsx
 create mode 100644 src/modules/reverse-proxy/auth/AuthSSOModal.tsx
 create mode 100644 src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
 create mode 100644 src/modules/reverse-proxy/domain/CustomDomainModal.tsx
 create mode 100644 src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
 create mode 100644 src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
 create mode 100644 src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsDurationCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsReasonCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsStatusCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
 create mode 100644 src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyActionCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyActiveCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyArrowCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyAuthCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyTable.tsx
 create mode 100644 src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetActionCell.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetContext.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetPath.tsx
 create mode 100644 src/modules/reverse-proxy/targets/ReverseProxyTargetsTable.tsx
 create mode 100644 src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetActionCell.tsx
 create mode 100644 src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent.tsx
 create mode 100644 src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTable.tsx
 delete mode 100644 src/modules/setup-keys/SetupKeyEphemeralCell.tsx

diff --git a/.gitignore b/.gitignore
index 5cba48e37..86420ac0e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,8 @@ next-env.d.ts
 
 # config
 .local-config.json
+.test-config.json
+cypress.env.json
 .configs/.local-config.zitadel.json
 .configs/.staging-config.json
 .configs/.temp-config.json
diff --git a/package-lock.json b/package-lock.json
index 797d9f219..f2f14ee17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
         "ip-cidr": "^3.1.0",
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.23",
-        "lucide-react": "^0.539.0",
+        "lucide-react": "^0.562.0",
         "next": "^16.1.6",
         "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
@@ -67,7 +67,6 @@
         "react-day-picker": "^9.13.0",
         "react-dom": "^19.2.4",
         "react-ga4": "^2.1.0",
-        "react-hot-toast": "^2.4.1",
         "react-hotjar": "^6.3.1",
         "react-hotkeys-hook": "^4.4.1",
         "react-icons": "^5.5.0",
@@ -75,6 +74,7 @@
         "react-loading-skeleton": "^3.3.1",
         "react-responsive": "^9.0.2",
         "react-virtuoso": "^4.9.0",
+        "sonner": "^2.0.7",
         "swr": "^2.2.4",
         "tailwind-merge": "^1.14.0",
         "tailwindcss-animate": "^1.0.7",
@@ -90,6 +90,9 @@
         "postcss": "^8",
         "prettier": "3.0.3",
         "tailwindcss": "^3.4.17"
+      },
+      "engines": {
+        "node": ">=20.9.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -165,6 +168,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -3027,6 +3031,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3036,6 +3041,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3094,6 +3100,7 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -3600,7 +3607,8 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
       "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@xyflow/react": {
       "version": "12.10.0",
@@ -3639,6 +3647,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4056,6 +4065,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4684,6 +4694,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -5212,6 +5223,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5409,6 +5421,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6010,15 +6023,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/goober": {
-      "version": "2.1.18",
-      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.18.tgz",
-      "integrity": "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -6711,6 +6715,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -6918,9 +6923,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.539.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
-      "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -7465,6 +7470,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7672,6 +7678,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7712,6 +7719,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7725,23 +7733,6 @@
       "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==",
       "license": "MIT"
     },
-    "node_modules/react-hot-toast": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
-      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.1.3",
-        "goober": "^2.1.16"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
     "node_modules/react-hotjar": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/react-hotjar/-/react-hotjar-6.3.1.tgz",
@@ -8336,6 +8327,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8613,6 +8614,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8779,6 +8781,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8944,6 +8947,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9271,6 +9275,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 8c4817f91..c0d4d8341 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.23",
-    "lucide-react": "^0.539.0",
+    "lucide-react": "^0.562.0",
     "next": "^16.1.6",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
@@ -75,7 +75,6 @@
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.4",
     "react-ga4": "^2.1.0",
-    "react-hot-toast": "^2.4.1",
     "react-hotjar": "^6.3.1",
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^5.5.0",
@@ -83,6 +82,7 @@
     "react-loading-skeleton": "^3.3.1",
     "react-responsive": "^9.0.2",
     "react-virtuoso": "^4.9.0",
+    "sonner": "^2.0.7",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/app/(dashboard)/events/proxy/page.tsx b/src/app/(dashboard)/events/proxy/page.tsx
new file mode 100644
index 000000000..f62818c97
--- /dev/null
+++ b/src/app/(dashboard)/events/proxy/page.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import dayjs from "dayjs";
+import { ExternalLinkIcon } from "lucide-react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import React, { useMemo } from "react";
+import ActivityIcon from "@/assets/icons/ActivityIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import ServerPaginationProvider from "@/contexts/ServerPaginationProvider";
+import PageContainer from "@/layouts/PageContainer";
+import ReverseProxyEventsTable from "@/modules/reverse-proxy/events/ReverseProxyEventsTable";
+import { usePortalElement } from "@hooks/usePortalElement";
+
+export default function ProxyEventsPage() {
+  const { permission } = usePermissions();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  const defaultFilters = useMemo(() => ({
+    start_date: dayjs().subtract(7, "day").startOf("day").toISOString(),
+    end_date: dayjs().endOf("day").toISOString(),
+  }), []);
+
+  return (
+    <PageContainer>
+      <div className="p-default py-6">
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            label="Activity"
+            disabled
+            icon={<ActivityIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href="/events/proxy"
+            label="Proxy Events"
+            icon={<ReverseProxyIcon size={15} />}
+          />
+        </Breadcrumbs>
+
+        <h1 ref={headingRef}>Proxy Events</h1>
+
+        <Paragraph>
+          View access logs for your reverse proxy services, including allowed
+          and denied requests.
+        </Paragraph>
+
+        <Paragraph>
+          Learn more about{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/reverse-proxy"}
+            target="_blank"
+          >
+            Proxy Events <ExternalLinkIcon size={12} />
+          </InlineLink>{" "}
+          in our documentation.
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess
+        page="Proxy Events"
+        hasAccess={permission?.services?.read}
+      >
+        <ServerPaginationProvider url="/events/proxy" defaultPageSize={10} defaultFilters={defaultFilters}>
+          <ReverseProxyEventsTable headingTarget={portalTarget} />
+        </ServerPaginationProvider>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
diff --git a/src/app/(dashboard)/network-routes/page.tsx b/src/app/(dashboard)/network-routes/page.tsx
index 10967154c..eeb3d0f15 100644
--- a/src/app/(dashboard)/network-routes/page.tsx
+++ b/src/app/(dashboard)/network-routes/page.tsx
@@ -61,7 +61,7 @@ export default function NetworkRoutes() {
               in our documentation.
             </Paragraph>
 
-            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+            <Callout className={"max-w-xl mt-5"} variant={"warning"}>
               <span>
                 We recommend using the new Networks concept to easier visualise
                 and manage access to your resources.{" "}
diff --git a/src/app/(dashboard)/network/page.tsx b/src/app/(dashboard)/network/page.tsx
index 316f566f9..c2ba2eabf 100644
--- a/src/app/(dashboard)/network/page.tsx
+++ b/src/app/(dashboard)/network/page.tsx
@@ -12,14 +12,14 @@ import {
 } from "@components/DropdownMenu";
 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 { cn, singularize } from "@utils/helpers";
 import {
   ArrowUpRightIcon,
   HelpCircle,
+  Layers3Icon,
   MoreVertical,
   PencilLineIcon,
   ServerIcon,
@@ -28,19 +28,27 @@ import {
   Trash2,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import React, { useMemo, useState } from "react";
-import { useSWRConfig } from "swr";
+import React, { useMemo } from "react";
+import useUrlTab from "@/hooks/useUrlTab";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
-import { Network } from "@/interfaces/Network";
+import { Network, NetworkResource, NetworkRouter } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
 import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
 import {
   NetworkProvider,
   useNetworksContext,
 } from "@/modules/networks/NetworkProvider";
-import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
-import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
+import { ResourcesTabContent } from "@/modules/networks/resources/ResourcesTabContent";
+import { NetworkRoutingPeersTabContent } from "@/modules/networks/routing-peers/NetworkRoutingPeersTabContent";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { ReverseProxyFlatTargetsTabContent } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent";
+import ReverseProxiesProvider, {
+  flattenReverseProxies,
+  useReverseProxies,
+} from "@/contexts/ReverseProxiesProvider";
 
 export default function NetworkDetailPage() {
   const queryParameter = useSearchParams();
@@ -53,7 +61,9 @@ export default function NetworkDetailPage() {
   useRedirect("/networks", false, !networkId);
 
   return network && !isLoading ? (
-    <NetworkOverview network={network} />
+    <ReverseProxiesProvider initialNetwork={network}>
+      <NetworkOverview network={network} />
+    </ReverseProxiesProvider>
   ) : (
     <FullScreenLoading />
   );
@@ -62,8 +72,23 @@ export default function NetworkDetailPage() {
 function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   const { permission } = usePermissions();
 
-  const [networkModal, setNetworkModal] = useState(false);
-  const { mutate } = useSWRConfig();
+  const { data: resources, isLoading: isResourcesLoading } = useFetchApi<
+    NetworkResource[]
+  >(`/networks/${network.id}/resources`);
+  const { data: routers, isLoading: isRoutersLoading } = useFetchApi<
+    NetworkRouter[]
+  >(`/networks/${network.id}/routers`);
+
+  const { reverseProxies, isLoading: isServicesLoading } = useReverseProxies();
+  const services = useMemo(
+    () => flattenReverseProxies({ reverseProxies, network }),
+    [reverseProxies, network],
+  );
+
+  const [tab, setTab] = useUrlTab(
+    ["resources", "routing-peers", "services"],
+    "resources",
+  );
 
   const isActive = !!(
     network?.routing_peers_count && network.routing_peers_count > 0
@@ -72,7 +97,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
   return (
     <PageContainer>
       <NetworkProvider network={network}>
-        <div className={"p-default py-6 mb-4"}>
+        <div className={"p-default py-6"}>
           <Breadcrumbs>
             <Breadcrumbs.Item
               href={"/networks"}
@@ -115,11 +140,58 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
           </div>
         </div>
 
-        <Separator />
-        <ResourcesSection network={network} />
-        <div className={"h-3"} />
-        <Separator />
-        <NetworkRoutingPeersSection network={network} />
+        <Tabs
+          defaultValue={tab}
+          onValueChange={setTab}
+          value={tab}
+          className={"pb-0 mb-0"}
+        >
+          <TabsList justify={"start"} className={"px-8"}>
+            <TabsTrigger value={"resources"}>
+              <Layers3Icon size={14} />
+              {singularize("Resources", network?.resources?.length)}
+            </TabsTrigger>
+            <TabsTrigger value={"routing-peers"}>
+              <PeerIcon
+                size={12}
+                className={
+                  "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+                }
+              />
+              {singularize("Routing Peers", network?.routing_peers_count)}
+            </TabsTrigger>
+            <TabsTrigger value={"services"}>
+              <ReverseProxyIcon
+                size={16}
+                className={
+                  "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+                }
+              />
+              {singularize("Services", services.length)}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value={"resources"} className={"pb-8"}>
+            <ResourcesTabContent
+              data={resources}
+              isLoading={isResourcesLoading}
+            />
+          </TabsContent>
+
+          <TabsContent value={"routing-peers"} className={"pb-8"}>
+            <NetworkRoutingPeersTabContent
+              routers={routers}
+              isLoading={isRoutersLoading}
+            />
+          </TabsContent>
+
+          <TabsContent value={"services"} className={"pb-8"}>
+            <ReverseProxyFlatTargetsTabContent
+              targets={services}
+              isLoading={isServicesLoading}
+            />
+          </TabsContent>
+        </Tabs>
       </NetworkProvider>
     </PageContainer>
   );
diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index bf432c319..e43560dd1 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -26,6 +26,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
+import { singularize } from "@utils/helpers";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
@@ -36,13 +37,14 @@ import {
   FlagIcon,
   Globe,
   History,
+  ListIcon,
   MapPin,
   MonitorSmartphoneIcon,
   NetworkIcon,
   PencilIcon,
   RadioTowerIcon,
-  TimerResetIcon,
 } from "lucide-react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
@@ -52,21 +54,27 @@ import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
 import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import type { Group } from "@/interfaces/Group";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
 import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
 import { PeerRemoteJobsSection } from "@/modules/peer/PeerRemoteJobsSection";
+import ReverseProxiesProvider, {
+  flattenReverseProxies,
+  useReverseProxies,
+} from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyFlatTargetsTabContent } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent";
 import { PeerSSHToggle } from "@/modules/peer/PeerSSHToggle";
 import { RDPButton } from "@/modules/remote-access/rdp/RDPButton";
 import { SSHButton } from "@/modules/remote-access/ssh/SSHButton";
-import Link from "next/link";
 import { PeerExpirationSettings } from "@/modules/peer/PeerExpirationSettings";
 
 export default function PeerPage() {
@@ -99,10 +107,12 @@ export default function PeerPage() {
       />
     );
 
-  return peer && !isLoading ? (
-    <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
-      <PeerOverview key={peer?.id} />
-    </PeerProvider>
+  return peer && peer.id && !isLoading ? (
+    <ReverseProxiesProvider initialPeer={peer}>
+      <PeerProvider peer={peer} key={peerId} isPeerDetailPage={true}>
+        <PeerOverview key={peer?.id} />
+      </PeerProvider>
+    </ReverseProxiesProvider>
   ) : (
     <FullScreenLoading />
   );
@@ -114,38 +124,60 @@ function PeerOverview() {
   return (
     <PageContainer>
       <RoutesProvider>
-        <div className={"p-default py-6 pb-0"}>
-          <Breadcrumbs>
-            <Breadcrumbs.Item
-              href={"/peers"}
-              label={"Peers"}
-              icon={<PeerIcon size={13} />}
-            />
-            <Breadcrumbs.Item label={peer.ip} active />
-          </Breadcrumbs>
-          <PeerGeneralInformation />
-        </div>
-        <PeerOverviewTabs />
+        <PeerSettingsProvider>
+          <div className={"p-default py-6 pb-0"}>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href={"/peers"}
+                label={"Peers"}
+                icon={<PeerIcon size={13} />}
+              />
+              <Breadcrumbs.Item label={peer.ip} active />
+            </Breadcrumbs>
+            <PeerHeader />
+          </div>
+          <PeerOverviewTabs />
+        </PeerSettingsProvider>
       </RoutesProvider>
     </PageContainer>
   );
 }
 
-const PeerGeneralInformation = () => {
-  const router = useRouter();
+type PeerSettingsContextType = {
+  selectedGroups: Group[];
+  setSelectedGroups: React.Dispatch<React.SetStateAction<Group[]>>;
+  hasChanges: boolean;
+  updatePeer: (newName?: string) => Promise<void>;
+  name: string;
+  setName: (name: string) => void;
+  tab: string;
+  setTab: (tab: string) => void;
+};
+
+const PeerSettingsContext = React.createContext<PeerSettingsContextType | null>(
+  null,
+);
+
+const usePeerSettings = () => {
+  const context = React.useContext(PeerSettingsContext);
+  if (!context) {
+    throw new Error("usePeerSettings must be used within PeerSettingsProvider");
+  }
+  return context;
+};
+
+const PeerSettingsProvider = ({ children }: { children: React.ReactNode }) => {
   const { mutate } = useSWRConfig();
-  const { peer, user, peerGroups, update } = usePeer();
+  const { peer, peerGroups, update } = usePeer();
+  const { permission } = usePermissions();
   const [name, setName] = useState(peer.name);
-  const [showEditNameModal, setShowEditNameModal] = useState(false);
+  const [tab, setTab] = useState("overview");
   const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
     useGroupHelper({
       initial: peerGroups?.filter((g) => g?.name !== "All"),
       peer,
     });
 
-  /**
-   * Detect if there are changes in the peer information, if there are changes, then enable the save button.
-   */
   const { hasChanges, updateRef: updateHasChangedRef } = useHasChanges([
     selectedGroups,
   ]);
@@ -175,7 +207,31 @@ const PeerGeneralInformation = () => {
     });
   };
 
+  return (
+    <PeerSettingsContext.Provider
+      value={{
+        selectedGroups,
+        setSelectedGroups,
+        hasChanges,
+        updatePeer,
+        name,
+        setName,
+        tab,
+        setTab,
+      }}
+    >
+      {children}
+    </PeerSettingsContext.Provider>
+  );
+};
+
+const PeerHeader = () => {
+  const router = useRouter();
+  const { peer, user } = usePeer();
   const { permission } = usePermissions();
+  const { name, setName, hasChanges, updatePeer, tab } = usePeerSettings();
+  const [showEditNameModal, setShowEditNameModal] = useState(false);
+  const isOverviewTab = tab === "overview";
 
   return (
     <>
@@ -236,65 +292,29 @@ const PeerGeneralInformation = () => {
             </div>
           )}
         </div>
-        <div className={"flex gap-4"}>
-          <Button
-            variant={"default"}
-            className={"w-full"}
-            onClick={() => router.push("/peers")}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant={"primary"}
-            className={"w-full"}
-            onClick={() => updatePeer()}
-            disabled={
-              !hasChanges || !permission.peers.read || !permission.groups.update
-            }
-          >
-            Save Changes
-          </Button>
-        </div>
-      </div>
-
-      <div
-        className={
-          "flex-wrap xl:flex-nowrap flex gap-10 w-full mt-5 max-w-6xl items-start"
-        }
-      >
-        <PeerInformationCard peer={peer} />
-
-        <div className={"flex flex-col gap-6 lg:w-1/2 transition-all"}>
-          <PeerExpirationSettings />
-
-          <PeerSSHToggle />
-
-          {/* Remote Access Buttons */}
-          <div>
-            <Label>Remote Access</Label>
-            <HelpText>Connect directly to this peer via SSH or RDP.</HelpText>
-            <div className="flex gap-3">
-              <SSHButton peer={peer} />
-              <RDPButton peer={peer} />
-            </div>
+        {isOverviewTab && (
+          <div className={"flex gap-4"}>
+            <Button
+              variant={"default"}
+              className={"w-full"}
+              onClick={() => router.push("/peers")}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              onClick={() => updatePeer()}
+              disabled={
+                !hasChanges ||
+                !permission.peers.read ||
+                !permission.groups.update
+              }
+            >
+              Save Changes
+            </Button>
           </div>
-
-          {permission.groups.read && (
-            <div>
-              <Label>Assigned Groups</Label>
-              <HelpText>
-                Use groups to control what this peer can access.
-              </HelpText>
-              <PeerGroupSelector
-                disabled={!permission.groups.update}
-                onChange={setSelectedGroups}
-                values={selectedGroups}
-                hideAllGroup={true}
-                peer={peer}
-              />
-            </div>
-          )}
-        </div>
+        )}
       </div>
     </>
   );
@@ -303,19 +323,27 @@ const PeerGeneralInformation = () => {
 const PeerOverviewTabs = () => {
   const { peer } = usePeer();
   const { permission } = usePermissions();
+  const { reverseProxies, isLoading: isServicesLoading } = useReverseProxies();
+  const { tab, setTab } = usePeerSettings();
 
-  const [tab, setTab] = useState(
-    permission.routes.read ? "network-routes" : "accessible-peers",
+  const flatTargets = useMemo(
+    () => flattenReverseProxies({ reverseProxies, peer }),
+    [reverseProxies, peer],
   );
 
   return (
     <Tabs
       defaultValue={tab}
-      onValueChange={(v) => setTab(v)}
+      onValueChange={setTab}
       value={tab}
-      className={"pt-10 pb-0 mb-0"}
+      className={"pt-4 pb-0 mb-0"}
     >
       <TabsList justify={"start"} className={"px-8"}>
+        <TabsTrigger value={"overview"}>
+          <ListIcon size={16} />
+          Overview
+        </TabsTrigger>
+
         {permission.routes.read && (
           <TabsTrigger value={"network-routes"}>
             <NetworkIcon size={16} />
@@ -330,6 +358,16 @@ const PeerOverviewTabs = () => {
           </TabsTrigger>
         )}
 
+        {peer?.id && permission.routes.read && (
+          <TabsTrigger value={"reverse-proxies"}>
+            <ReverseProxyIcon
+              size={16}
+              className="fill-nb-gray-400 group-data-[state=active]/trigger:fill-netbird"
+            />
+            {singularize("Services", flatTargets.length)}
+          </TabsTrigger>
+        )}
+
         {peer?.id && permission.peers.delete && (
           <TabsTrigger value={"peer-job"}>
             <RadioTowerIcon size={16} />
@@ -338,6 +376,10 @@ const PeerOverviewTabs = () => {
         )}
       </TabsList>
 
+      <TabsContent value={"overview"} className={"pb-8"}>
+        <PeerOverviewTabContent />
+      </TabsContent>
+
       {permission.routes.read && (
         <TabsContent value={"network-routes"} className={"pb-8"}>
           <PeerNetworkRoutesSection peer={peer} />
@@ -349,6 +391,21 @@ const PeerOverviewTabs = () => {
           <AccessiblePeersSection peerID={peer.id} />
         </TabsContent>
       )}
+
+      {peer?.id && permission.routes.read && (
+        <TabsContent value={"reverse-proxies"} className={"pb-8"}>
+          <ReverseProxyFlatTargetsTabContent
+            targets={flatTargets}
+            isLoading={isServicesLoading}
+            hideResourceColumn
+            emptyTableTitle={"This peer has no services"}
+            emptyTableDescription={
+              "Add your services to this peer and securely expose them through NetBird's reverse proxy"
+            }
+          />
+        </TabsContent>
+      )}
+
       {peer.id && permission.peers.delete && (
         <TabsContent value={"peer-job"} className={"pb-8"}>
           <PeerRemoteJobsSection peerID={peer.id} />
@@ -358,6 +415,55 @@ const PeerOverviewTabs = () => {
   );
 };
 
+const PeerOverviewTabContent = () => {
+  const { peer } = usePeer();
+  const { permission } = usePermissions();
+  const { selectedGroups, setSelectedGroups } = usePeerSettings();
+
+  return (
+    <div className={"px-8"}>
+      <div
+        className={
+          "flex-wrap xl:flex-nowrap flex gap-10 w-full items-start pt-2 max-w-6xl"
+        }
+      >
+        <PeerInformationCard peer={peer} />
+
+        <div className={"flex flex-col gap-8 lg:w-1/2 transition-all"}>
+          <PeerExpirationSettings />
+          {permission.groups.read && (
+            <div>
+              <Label>Assigned Groups</Label>
+              <HelpText>
+                Use groups to control what this peer can access.
+              </HelpText>
+              <PeerGroupSelector
+                disabled={!permission.groups.update}
+                onChange={setSelectedGroups}
+                values={selectedGroups}
+                hideAllGroup={true}
+                peer={peer}
+              />
+            </div>
+          )}
+
+          <PeerSSHToggle />
+
+          {/* Remote Access Buttons */}
+          <div>
+            <Label>Remote Access</Label>
+            <HelpText>Connect directly to this peer via SSH or RDP.</HelpText>
+            <div className="flex gap-3">
+              <SSHButton peer={peer} />
+              <RDPButton peer={peer} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
   const { isLoading, getRegionByPeer } = useCountries();
   const { update } = usePeer();
@@ -541,9 +647,9 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
               peer.connected
                 ? "just now"
                 : dayjs(peer.last_seen).format("D MMMM, YYYY [at] h:mm A") +
-                " (" +
-                dayjs().to(peer.last_seen) +
-                ")"
+                  " (" +
+                  dayjs().to(peer.last_seen) +
+                  ")"
             }
           />
 
diff --git a/src/app/(dashboard)/peers/page.tsx b/src/app/(dashboard)/peers/page.tsx
index cf718630a..becc30659 100644
--- a/src/app/(dashboard)/peers/page.tsx
+++ b/src/app/(dashboard)/peers/page.tsx
@@ -105,7 +105,7 @@ function PeersBlockedView() {
       <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
         <div
           className={
-            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40"
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
           }
         >
           <SetupModalContent header={false} footer={false} />
diff --git a/src/app/(dashboard)/reverse-proxy/custom-domains/layout.tsx b/src/app/(dashboard)/reverse-proxy/custom-domains/layout.tsx
new file mode 100644
index 000000000..705299033
--- /dev/null
+++ b/src/app/(dashboard)/reverse-proxy/custom-domains/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: `Custom Domains - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;
diff --git a/src/app/(dashboard)/reverse-proxy/custom-domains/page.tsx b/src/app/(dashboard)/reverse-proxy/custom-domains/page.tsx
new file mode 100644
index 000000000..d052c0ce9
--- /dev/null
+++ b/src/app/(dashboard)/reverse-proxy/custom-domains/page.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import ReverseProxiesProvider from "@/contexts/ReverseProxiesProvider";
+import { REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import PageContainer from "@/layouts/PageContainer";
+
+const CustomDomainsTable = lazy(
+  () => import("@/modules/reverse-proxy/domain/CustomDomainsTable"),
+);
+
+export default function ReverseProxyCustomDomainsPage() {
+  const { permission } = usePermissions();
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/services"}
+            label={"Reverse Proxy"}
+            icon={<ReverseProxyIcon size={16} />}
+          />
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/custom-domains"}
+            label={"Custom Domains"}
+            active={true}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Domains</h1>
+        <Paragraph>
+          Add and manage custom domains for your reverse proxy services.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink
+            href={REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK}
+            target={"_blank"}
+          >
+            Custom Domains
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+      <RestrictedAccess
+        page={"Custom Domains"}
+        hasAccess={permission?.services?.read}
+      >
+        <ReverseProxiesProvider>
+          <Suspense fallback={<SkeletonTable />}>
+            <CustomDomainsTable headingTarget={portalTarget} />
+          </Suspense>
+        </ReverseProxiesProvider>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
diff --git a/src/app/(dashboard)/reverse-proxy/page.tsx b/src/app/(dashboard)/reverse-proxy/page.tsx
new file mode 100644
index 000000000..1019c22c1
--- /dev/null
+++ b/src/app/(dashboard)/reverse-proxy/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function ReverseProxyRedirectPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/reverse-proxy/services");
+  }, [router]);
+
+  return <FullScreenLoading height={"auto"} />;
+}
diff --git a/src/app/(dashboard)/reverse-proxy/services/layout.tsx b/src/app/(dashboard)/reverse-proxy/services/layout.tsx
new file mode 100644
index 000000000..b895c6b6c
--- /dev/null
+++ b/src/app/(dashboard)/reverse-proxy/services/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: `Services - Reverse Proxy - ${globalMetaTitle}`,
+};
+export default BlankLayout;
diff --git a/src/app/(dashboard)/reverse-proxy/services/page.tsx b/src/app/(dashboard)/reverse-proxy/services/page.tsx
new file mode 100644
index 000000000..4a89758ef
--- /dev/null
+++ b/src/app/(dashboard)/reverse-proxy/services/page.tsx
@@ -0,0 +1,72 @@
+"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 { ExternalLinkIcon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import ReverseProxiesProvider from "@/contexts/ReverseProxiesProvider";
+import { REVERSE_PROXY_DOCS_LINK } from "@/interfaces/ReverseProxy";
+import PageContainer from "@/layouts/PageContainer";
+import { Callout } from "@components/Callout";
+
+const ReverseProxyTable = lazy(
+  () => import("@/modules/reverse-proxy/table/ReverseProxyTable"),
+);
+
+export default function ReverseProxyServicesPage() {
+  const { permission } = usePermissions();
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/services"}
+            label={"Reverse Proxy"}
+            icon={<ReverseProxyIcon size={16} />}
+          />
+          <Breadcrumbs.Item
+            href={"/reverse-proxy/services"}
+            label={"Services"}
+            active={true}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Services</h1>
+        <Paragraph>
+          Expose services securely through NetBird&apos;s reverse proxy.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+            Services
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+
+        <Callout className={"max-w-xl mt-5"} variant={"info"}>
+          NetBird&apos;s Reverse Proxy is currently in beta and available at no
+          cost during this period. Features, functionality, and pricing are
+          subject to change upon release.
+        </Callout>
+      </div>
+
+      <RestrictedAccess page={"Services"} hasAccess={permission?.services?.read}>
+        <ReverseProxiesProvider>
+          <Suspense fallback={<SkeletonTable />}>
+            <ReverseProxyTable headingTarget={portalTarget} />
+          </Suspense>
+        </ReverseProxiesProvider>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}
diff --git a/src/app/(dashboard)/settings/page.tsx b/src/app/(dashboard)/settings/page.tsx
index 632173627..149602f9b 100644
--- a/src/app/(dashboard)/settings/page.tsx
+++ b/src/app/(dashboard)/settings/page.tsx
@@ -56,7 +56,7 @@ export default function NetBirdSettings() {
                 Authentication
               </VerticalTabs.Trigger>
               {account?.settings?.embedded_idp_enabled &&
-                permission.identity_providers.read && (
+                permission?.identity_providers?.read && (
                   <VerticalTabs.Trigger value="identity-providers">
                     <FingerprintIcon size={14} />
                     Identity Providers
diff --git a/src/app/globals.css b/src/app/globals.css
index d1948563f..3dd2e7981 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --toasts-before: 0;
+    --lift: 1;
+}
+
 html{
     @apply bg-nb-gray;
 }
@@ -171,6 +176,17 @@ p {
     @apply m-0 p-0 box-border;
 }
 
+/* Disable sonner's opacity fade-in for custom toasts, but respect visibility */
+[data-sonner-toast][data-visible="true"] {
+    opacity: 1 !important;
+}
+
+
+/* Adjust sonner stacking: less shrink and less lift per toast */
+[data-sonner-toast][data-expanded="false"][data-front="false"] {
+    --scale: calc(var(--toasts-before) * 0.03 - 1) !important;
+    --lift-amount: calc(var(--lift) * 10px) !important;
+}
 
 /* Control Center */
 .react-flow__node-groupNode .selected{
diff --git a/src/assets/icons/PeerOSIcon.tsx b/src/assets/icons/PeerOSIcon.tsx
new file mode 100644
index 000000000..3948d5f9f
--- /dev/null
+++ b/src/assets/icons/PeerOSIcon.tsx
@@ -0,0 +1,26 @@
+import { getOperatingSystem } from "@hooks/useOperatingSystem";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { OSLogo } from "@/modules/peers/PeerOSCell";
+
+type Props = {
+  os: string;
+};
+
+export const PeerOSIcon = ({ os }: Props) => {
+  const osType = getOperatingSystem(os);
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center grayscale brightness-[100%] contrast-[40%]",
+        "w-4 h-4 shrink-0",
+        osType === OperatingSystem.WINDOWS && "p-[2.5px]",
+        osType === OperatingSystem.APPLE && "p-[2.7px]",
+        osType === OperatingSystem.FREEBSD && "p-[1.5px]",
+      )}
+    >
+      <OSLogo os={os} />
+    </div>
+  );
+};
diff --git a/src/assets/icons/PeerOrResourceIcon.tsx b/src/assets/icons/PeerOrResourceIcon.tsx
new file mode 100644
index 000000000..b02ad1bc4
--- /dev/null
+++ b/src/assets/icons/PeerOrResourceIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { NetworkResource } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import { PeerOSIcon } from "./PeerOSIcon";
+import { ResourceIcon } from "./ResourceIcon";
+
+type Props = {
+  peer?: Peer;
+  resource?: NetworkResource;
+};
+
+export const PeerOrResourceIcon = ({ peer, resource }: Props) => {
+  return (
+    <>
+      {peer && <PeerOSIcon os={peer.os} />}
+      {resource?.type && <ResourceIcon type={resource.type} />}
+    </>
+  );
+};
diff --git a/src/assets/icons/ResourceIcon.tsx b/src/assets/icons/ResourceIcon.tsx
new file mode 100644
index 000000000..a2d817c7f
--- /dev/null
+++ b/src/assets/icons/ResourceIcon.tsx
@@ -0,0 +1,20 @@
+import { GlobeIcon, NetworkIcon, WorkflowIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  type: "domain" | "host" | "subnet";
+  size?: number;
+};
+
+export const ResourceIcon = ({ type, size = 15 }: Props) => {
+  switch (type) {
+    case "domain":
+      return <GlobeIcon size={size} />;
+    case "subnet":
+      return <NetworkIcon size={size} />;
+    case "host":
+      return <WorkflowIcon size={size} />;
+    default:
+      return <WorkflowIcon size={size} />;
+  }
+};
diff --git a/src/assets/icons/ReverseProxyIcon.tsx b/src/assets/icons/ReverseProxyIcon.tsx
new file mode 100644
index 000000000..4f989db34
--- /dev/null
+++ b/src/assets/icons/ReverseProxyIcon.tsx
@@ -0,0 +1,15 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function ReverseProxyIcon(props: IconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path d="M11.4488 2.1499C11.7903 1.95003 12.2097 1.95003 12.5513 2.1499L16.5018 4.46123L12 7.03523L7.49823 4.46123L11.4488 2.1499ZM6.44447 6.46472L6.44444 10.2784L2.93531 12.3315L7.53662 14.8399L10.8889 12.8787V9.00593L6.44447 6.46472ZM2 14.3992V18.7395C2 19.1477 2.21366 19.5247 2.55984 19.7272L6.44446 22V16.8223L2 14.3992ZM8.66668 22L12 20.0497L15.3333 22V16.7994L12 14.8492L8.66668 16.7993V22ZM17.5556 22L21.4401 19.7272C21.7863 19.5247 22 19.1477 22 18.7395V14.3992L17.5556 16.8223V22ZM21.0647 12.3315L17.5556 10.2784V6.46474L13.1111 9.00593V12.8787L16.4634 14.8399L21.0647 12.3315Z" />
+    </svg>
+  );
+}
diff --git a/src/auth/OIDCProvider.tsx b/src/auth/OIDCProvider.tsx
index 6314f0aed..424cc3c39 100644
--- a/src/auth/OIDCProvider.tsx
+++ b/src/auth/OIDCProvider.tsx
@@ -6,9 +6,8 @@ import {
   OidcProvider,
 } from "@axa-fr/react-oidc";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useLocalStorage } from "@hooks/useLocalStorage";
 import loadConfig, { buildExtras } from "@utils/config";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { OIDCError } from "@/auth/OIDCError";
 import { SecureProvider } from "@/auth/SecureProvider";
@@ -43,33 +42,6 @@ export default function OIDCProvider({ children }: Props) {
   const [mounted, setMounted] = useState(false);
   const router = useRouter();
   const path = usePathname();
-  const params = useSearchParams()?.toString();
-  const [, setQueryParams] = useLocalStorage("netbird-query-params", params);
-
-  useEffect(() => {
-    const validParams = [
-      "tab",
-      "search",
-      "id",
-      "invite",
-      "utm_source",
-      "utm_medium",
-      "utm_content",
-      "utm_campaign",
-      "hs_id",
-      "page",
-      "page_size",
-      "user",
-      "port",
-    ];
-
-    try {
-      const urlParams = new URLSearchParams(params);
-      if (validParams.some((param) => urlParams.has(param))) {
-        setQueryParams(params);
-      }
-    } catch (e) {}
-  }, []);
 
   const withCustomHistory = () => {
     return {
diff --git a/src/auth/SecureProvider.tsx b/src/auth/SecureProvider.tsx
index dcc47d4b1..e4bc6ca89 100644
--- a/src/auth/SecureProvider.tsx
+++ b/src/auth/SecureProvider.tsx
@@ -3,6 +3,23 @@ import { usePathname } from "next/navigation";
 import * as React from "react";
 import { useEffect } from "react";
 
+const QUERY_PARAMS_KEY = "netbird-query-params";
+const VALID_PARAMS = [
+  "tab",
+  "search",
+  "id",
+  "invite",
+  "utm_source",
+  "utm_medium",
+  "utm_content",
+  "utm_campaign",
+  "hs_id",
+  "page",
+  "page_size",
+  "user",
+  "port",
+];
+
 type Props = {
   children: React.ReactNode;
 };
@@ -10,6 +27,22 @@ export const SecureProvider = ({ children }: Props) => {
   const { isAuthenticated, login } = useOidc();
   const currentPath = usePathname();
 
+  useEffect(() => {
+    if (isAuthenticated) {
+      localStorage.removeItem(QUERY_PARAMS_KEY);
+    } else {
+      try {
+        const params = window.location.search.substring(1);
+        if (params) {
+          const urlParams = new URLSearchParams(params);
+          if (VALID_PARAMS.some((param) => urlParams.has(param))) {
+            localStorage.setItem(QUERY_PARAMS_KEY, JSON.stringify(params));
+          }
+        }
+      } catch (e) {}
+    }
+  }, [isAuthenticated]);
+
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined = undefined;
     if (!isAuthenticated) {
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index cb8358f04..1e5e13bfc 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -45,7 +45,13 @@ export const Item = ({
         )}
       >
         {icon && icon}
-        {href ? <span onClick={() => router.push(href)}>{label}</span> : label}
+        {href ? (
+          <span onClick={() => router.push(href)} data-cy={"breadcrumb-item"}>
+            {label}
+          </span>
+        ) : (
+          label
+        )}
       </div>
     </div>
   );
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a3e0947c7..302b94235 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -54,7 +54,7 @@ export const buttonVariants = cva(
         dotted: [
           "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900 border-dashed",
           "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-500/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
+          "dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-500/40 dark:hover:text-white dark:hover:bg-nb-gray-900/50",
         ],
         tertiary: [
           "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
@@ -73,6 +73,9 @@ export const buttonVariants = cva(
           "enabled:dark:focus:ring-red-800/20 enabled:dark:focus:bg-red-950/40 enabled:hover:dark:bg-red-950/50 enabled:dark:hover:border-red-800/50 dark:bg-transparent dark:text-red-500",
           "",
         ],
+        "danger-text": [
+          "dark:bg-transparent dark:text-red-500 dark:hover:text-red-600 dark:border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 dark:ring-offset-neutral-950/50",
+        ],
         "default-outline": [
           "dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
           "dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-nb-gray-900/30 dark:hover:border-nb-gray-800/50",
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
index 56481df46..01832c904 100644
--- a/src/components/Callout.tsx
+++ b/src/components/Callout.tsx
@@ -19,6 +19,8 @@ export const calloutVariants = cva(
         default: "bg-nb-gray-900/60 border-nb-gray-800/80 text-nb-gray-300",
         warning: "bg-netbird-500/10 border-netbird-400/20 text-netbird-150",
         info: "bg-sky-400/10 border-sky-400/20 text-sky-100",
+        success: "bg-green-400/15 border-green-400/20 text-green-100",
+        error: "bg-red-500/10 border-red-400/20 text-red-100",
       },
     },
   },
diff --git a/src/components/CopyToClipboardText.tsx b/src/components/CopyToClipboardText.tsx
index 7173f0edd..04ef3a4d0 100644
--- a/src/components/CopyToClipboardText.tsx
+++ b/src/components/CopyToClipboardText.tsx
@@ -22,11 +22,7 @@ export default function CopyToClipboardText({
 
   return (
     <div
-      className={cn(
-        "flex gap-2 items-center group cursor-pointer transition-all hover:underline underline-offset-4 decoration-dashed decoration-nb-gray-600",
-        !copied && "hover:opacity-90",
-        className,
-      )}
+      className={cn("flex gap-2 items-center group cursor-pointer", className)}
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -34,27 +30,34 @@ export default function CopyToClipboardText({
       }}
       ref={wrapper}
     >
-      {children}
+      <span className="relative truncate">
+        {children}
+        <span className="absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover:border-nb-gray-500 pointer-events-none" />
+      </span>
 
-      {copied ? (
+      <span
+        className={cn(
+          "shrink-0",
+          iconAlignment === "left" ? "order-first" : "order-last",
+        )}
+      >
         <CheckIcon
           className={cn(
-            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
-            iconAlignment === "left" ? "order-first" : "order-last",
-            !alwaysShowIcon && "opacity-0",
+            "text-nb-gray-100 group-hover:opacity-100",
+            !copied && "hidden",
+            !alwaysShowIcon && !copied && "opacity-0",
           )}
           size={11}
         />
-      ) : (
         <CopyIcon
           className={cn(
-            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
-            iconAlignment === "left" ? "order-first" : "order-last",
+            "text-nb-gray-100 group-hover:opacity-100",
+            copied && "hidden",
             !alwaysShowIcon && "opacity-0",
           )}
           size={11}
         />
-      )}
+      </span>
     </div>
   );
 }
diff --git a/src/components/DatePickerWithRange.tsx b/src/components/DatePickerWithRange.tsx
index bdaaf8941..874063c8d 100644
--- a/src/components/DatePickerWithRange.tsx
+++ b/src/components/DatePickerWithRange.tsx
@@ -15,6 +15,7 @@ interface Props {
   value?: DateRange;
   onChange?: (range: DateRange | undefined) => void;
   className?: string;
+  disabled?: boolean;
 }
 
 const defaultRanges = {
@@ -61,6 +62,7 @@ export function DatePickerWithRange({
   className,
   value,
   onChange,
+  disabled = false,
 }: Readonly<Props>) {
   const isActive = useMemo(() => {
     return {
@@ -120,6 +122,7 @@ export function DatePickerWithRange({
           <Button
             id="date"
             variant={"secondary"}
+            disabled={disabled}
             className={cn("max-w-[260px] justify-start text-left font-normal")}
           >
             <CalendarIcon size={16} className={"shrink-0"} />
diff --git a/src/modules/control-center/nodes/DeviceCard.tsx b/src/components/DeviceCard.tsx
similarity index 56%
rename from src/modules/control-center/nodes/DeviceCard.tsx
rename to src/components/DeviceCard.tsx
index 6d4234254..9a2822fa6 100644
--- a/src/modules/control-center/nodes/DeviceCard.tsx
+++ b/src/components/DeviceCard.tsx
@@ -1,36 +1,39 @@
 import TruncatedText from "@components/ui/TruncatedText";
-import { getOperatingSystem } from "@hooks/useOperatingSystem";
 import { cn } from "@utils/helpers";
-import { GlobeIcon, NetworkIcon, WorkflowIcon } from "lucide-react";
 import * as React from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
+import { PeerOSIcon } from "@/assets/icons/PeerOSIcon";
+import { ResourceIcon } from "@/assets/icons/ResourceIcon";
 import { NetworkResource } from "@/interfaces/Network";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
-import { OSLogo } from "@/modules/peers/PeerOSCell";
 
 type DeviceCardProps = {
   device?: Peer;
   resource?: NetworkResource;
   className?: string;
+  address?: string;
+  description?: string;
 };
 
 export const DeviceCard = ({
   device,
   resource,
   className,
+  address,
+  description,
 }: DeviceCardProps) => {
-  if (!device && !resource) return;
+  if (!device && !resource) return null;
   return (
     <div
       className={cn(
-        "flex shrink-0 items-center gap-2.5 text-nb-gray-300 text-left py-1 pl-3 pr-4 rounded-md group/machine my-0 w-[200px]",
+        "flex shrink-0 items-center gap-2.5 text-nb-gray-200 text-left py-1 pl-3 pr-4 rounded-md group/machine my-0 w-[200px]",
+        (description === undefined || description === "") && "py-2",
         className,
       )}
     >
       <div
         className={cn(
-          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-nb-gray-850 transition-all",
+          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-nb-gray-900 transition-all",
           "group-hover:bg-nb-gray-800 relative",
         )}
       >
@@ -50,7 +53,11 @@ export const DeviceCard = ({
           </div>
         )}
       </div>
-      <div className={"flex flex-col gap-0 justify-center mt-2 leading-tight"}>
+      <div
+        className={
+          "flex flex-col gap-0 justify-center top-0.5 leading-tight relative"
+        }
+      >
         <span
           className={
             "mb-1.5 font-normal text-[0.85rem] text-nb-gray-100 flex items-center gap-2"
@@ -64,48 +71,14 @@ export const DeviceCard = ({
         </span>
         <span
           className={
-            "text-sm font-normal text-nb-gray-400 -top-[0.3rem] relative"
+            "text-sm font-normal text-nb-gray-400 -top-[0.3rem] relative whitespace-nowrap"
           }
         >
-          {device?.ip || resource?.address}
+          {description !== undefined
+            ? description
+            : address || device?.ip || resource?.address}
         </span>
       </div>
     </div>
   );
 };
-
-const PeerOSIcon = ({ os }: { os: string }) => {
-  const osType = getOperatingSystem(os);
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center grayscale brightness-[100%] contrast-[40%]",
-        "w-4 h-4 shrink-0",
-        osType === OperatingSystem.WINDOWS && "p-[2.5px]",
-        osType === OperatingSystem.APPLE && "p-[2.7px]",
-        osType === OperatingSystem.FREEBSD && "p-[1.5px]",
-      )}
-    >
-      <OSLogo os={os} />
-    </div>
-  );
-};
-
-const ResourceIcon = ({
-  type,
-  size = 15,
-}: {
-  type: "domain" | "host" | "subnet";
-  size?: number;
-}) => {
-  switch (type) {
-    case "domain":
-      return <GlobeIcon size={size} />;
-    case "subnet":
-      return <NetworkIcon size={size} />;
-    case "host":
-      return <WorkflowIcon size={size} />;
-    default:
-      return <WorkflowIcon size={size} />;
-  }
-};
diff --git a/src/components/ExternalLinkText.tsx b/src/components/ExternalLinkText.tsx
new file mode 100644
index 000000000..fe58373d5
--- /dev/null
+++ b/src/components/ExternalLinkText.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@utils/helpers";
+import { ExternalLinkIcon } from "lucide-react";
+import React from "react";
+
+type Props = {
+  href: string;
+  children: React.ReactNode;
+  iconAlignment?: "left" | "right";
+  className?: string;
+  alwaysShowIcon?: boolean;
+};
+
+export default function ExternalLinkText({
+  href,
+  children,
+  iconAlignment = "right",
+  className,
+  alwaysShowIcon = false,
+}: Props) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        "flex gap-2 items-center group/link cursor-pointer hover:opacity-90",
+        className,
+      )}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <span className="relative">
+        {children}
+        <span className="absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover/link:border-nb-gray-500 pointer-events-none" />
+      </span>
+      <ExternalLinkIcon
+        className={cn(
+          "text-nb-gray-100 group-hover/link:opacity-100 shrink-0",
+          iconAlignment === "left" ? "order-first" : "order-last",
+          !alwaysShowIcon && "opacity-0",
+        )}
+        size={12}
+      />
+    </a>
+  );
+}
diff --git a/src/components/FancyToggleSwitch.tsx b/src/components/FancyToggleSwitch.tsx
index c459e9207..334b1684c 100644
--- a/src/components/FancyToggleSwitch.tsx
+++ b/src/components/FancyToggleSwitch.tsx
@@ -99,7 +99,11 @@ export default function FancyToggleSwitch({
           />
         </div>
       </div>
-      <div>{children && value ? children : null}</div>
+      {children && value ? (
+        <div className="mt-4" onClick={(e) => e.stopPropagation()}>
+          {children}
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/HelpTooltip.tsx b/src/components/HelpTooltip.tsx
new file mode 100644
index 000000000..3a85d4272
--- /dev/null
+++ b/src/components/HelpTooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import FullTooltip from "@components/FullTooltip";
+
+type Props = {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  interactive?: boolean;
+};
+export const HelpTooltip = ({
+  content,
+  children,
+  interactive = true,
+}: Props) => {
+  return (
+    <>
+      <FullTooltip
+        interactive={interactive}
+        side={"top"}
+        align={"start"}
+        alignOffset={0}
+        className={
+          "inline underline decoration-dashed underline-offset-[3px] decoration-nb-gray-300 cursor-help transition-all hover:decoration-white"
+        }
+        content={content}
+      >
+        {children}
+      </FullTooltip>
+    </>
+  );
+};
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 7ed035a68..142bb7aa5 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -127,6 +127,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               suffix && "!pr-16",
               icon && "!pl-10",
               "border",
+              props.readOnly &&
+                "!bg-nb-gray-920 text-nb-gray-400 !border-nb-gray-800",
               className,
             )}
           />
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index 8b9641ba8..cac9dc205 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -9,17 +9,34 @@ const labelVariants = cva(
   "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block dark:text-nb-gray-200 flex items-center gap-2",
 );
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className, "select-none")}
-    {...props}
-  />
-));
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> & {
+    as?: "label" | "div";
+  };
+
+const Label = React.forwardRef<HTMLElement, LabelProps>(
+  ({ className, as = "label", children, ...props }, ref) => {
+    const classes = cn(labelVariants(), className, "select-none");
+
+    if (as === "div") {
+      return (
+        <div ref={ref as React.Ref<HTMLDivElement>} className={classes}>
+          {children}
+        </div>
+      );
+    }
+
+    return (
+      <LabelPrimitive.Root
+        ref={ref as React.Ref<HTMLLabelElement>}
+        className={classes}
+        {...props}
+      >
+        {children}
+      </LabelPrimitive.Root>
+    );
+  },
+);
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 99d4edaff..2efb81a5d 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -2,11 +2,11 @@ import { IconCircleX } from "@tabler/icons-react";
 import type { ErrorResponse } from "@utils/api";
 import { cn } from "@utils/helpers";
 import classNames from "classnames";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import { CheckIcon, Loader2, XIcon } from "lucide-react";
 import * as React from "react";
-import { useEffect, useState } from "react";
-import toast, { type Toast } from "react-hot-toast";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 
 export interface NotifyProps<T> {
   title: string;
@@ -22,14 +22,15 @@ export interface NotifyProps<T> {
 }
 
 interface NotificationProps<T> extends NotifyProps<T> {
-  t: Toast;
+  toastId: string | number;
 }
+
 export default function Notification<T>({
   title,
   description,
   icon,
   backgroundColor,
-  t,
+  toastId,
   promise,
   loadingTitle,
   loadingMessage,
@@ -39,17 +40,65 @@ export default function Notification<T>({
 }: NotificationProps<T>) {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(!!promise);
+  const [readyToDismiss, setReadyToDismiss] = useState(!promise);
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const remainingRef = useRef(duration);
+  const startTimeRef = useRef<number | null>(null);
 
-  const [toastDuration] = useState(duration);
+  const startTimer = useCallback(() => {
+    if (timerRef.current) return;
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      toast.dismiss(toastId);
+    }, Math.max(0, remainingRef.current));
+  }, [toastId]);
 
-  const [preventSuccess, setPreventSuccess] = useState(false);
+  const pauseTimer = useCallback(() => {
+    if (!timerRef.current || !startTimeRef.current) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+    remainingRef.current = Math.max(
+      0,
+      remainingRef.current - (Date.now() - startTimeRef.current),
+    );
+  }, []);
 
-  const closeToast = () => {
-    setTimeout(() => {
-      setLoading(false);
-      toast.dismiss(t.id);
-    }, toastDuration);
-  };
+  const notificationRef = useRef<HTMLDivElement>(null);
+
+  // Watch for sonner's expanded state to pause/resume timer
+  useEffect(() => {
+    if (!readyToDismiss) return;
+
+    const toastEl = notificationRef.current?.closest(
+      "[data-sonner-toast]",
+    ) as HTMLElement | null;
+    if (!toastEl) {
+      startTimer();
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      const expanded = toastEl.getAttribute("data-expanded") === "true";
+      if (expanded) {
+        pauseTimer();
+      } else {
+        startTimer();
+      }
+    });
+
+    observer.observe(toastEl, { attributes: true, attributeFilter: ["data-expanded"] });
+
+    // Start immediately if not expanded
+    const expanded = toastEl.getAttribute("data-expanded") === "true";
+    if (!expanded) startTimer();
+
+    return () => {
+      observer.disconnect();
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [readyToDismiss, toastId, startTimer, pauseTimer]);
 
   useEffect(() => {
     // Run the promise
@@ -57,8 +106,11 @@ export default function Notification<T>({
       promise
         .then(() => {
           setLoading(false);
-          closeToast();
-          if (preventSuccessToast) setPreventSuccess(true);
+          if (preventSuccessToast) {
+            toast.dismiss(toastId);
+          } else {
+            setReadyToDismiss(true);
+          }
         })
         .catch((e) => {
           const err = e as ErrorResponse;
@@ -78,78 +130,76 @@ export default function Notification<T>({
           }
 
           setLoading(false);
-          closeToast();
+          setReadyToDismiss(true);
         });
-    } else {
-      closeToast();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <AnimatePresence>
-      {t.visible && !preventSuccess && (
-        <motion.div
-          initial={{ opacity: 1, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -50 }}
-          className={cn(
-            "max-w-md w-full justify-between bg-white dark:bg-nb-gray-940 shadow-lg rounded-md px-4 py-2.5 pointer-events-auto flex border dark:border-nb-gray-900",
-          )}
-        >
-          <div className={"flex items-center gap-4"}>
-            <div
-              className={classNames(
-                "h-8 w-8  shadow-sm text-white flex items-center justify-center rounded-md shrink-0",
-                loading
-                  ? "bg-nb-gray-900"
-                  : error
-                  ? "bg-red-500"
-                  : backgroundColor || "bg-green-500",
-              )}
-            >
-              {loading ? (
-                <Loader2 size={14} className={"animate-spin"} />
-              ) : error ? (
-                <IconCircleX size={24} />
-              ) : (
-                icon || <CheckIcon size={14} />
-              )}
-            </div>
-            <div className={"flex flex-col text-sm"}>
-              <p>
-                <span className={"font-semibold"}>
-                  {loading ? loadingTitle || title : title}
-                </span>
-              </p>
-              <p
-                className={"text-xs dark:text-nb-gray-300 text-gray-600 mt-0.5"}
-              >
-                {loading ? loadingMessage : error ? error : description}
-              </p>
-            </div>
+    <motion.div
+      ref={notificationRef}
+      initial={{ y: -20 }}
+      animate={{ y: 0 }}
+      transition={{ type: "spring", stiffness: 400, damping: 20 }}
+      data-toast-notification
+      className="w-[28rem] pb-2"
+    >
+      <div
+        className={cn(
+          "w-full justify-between bg-white dark:bg-nb-gray-940 shadow-lg rounded-md px-4 py-2.5 pointer-events-auto flex border dark:border-nb-gray-900",
+        )}
+      >
+        <div className={"flex items-center gap-4"}>
+          <div
+            className={classNames(
+              "h-8 w-8  shadow-sm text-white flex items-center justify-center rounded-md shrink-0",
+              loading
+                ? "bg-nb-gray-900"
+                : error
+                ? "bg-red-500"
+                : backgroundColor || "bg-green-500",
+            )}
+          >
+            {loading ? (
+              <Loader2 size={14} className={"animate-spin"} />
+            ) : error ? (
+              <IconCircleX size={24} />
+            ) : (
+              icon || <CheckIcon size={14} />
+            )}
           </div>
+          <div className={"flex flex-col text-sm"}>
+            <p>
+              <span className={"font-semibold"}>
+                {loading ? loadingTitle || title : title}
+              </span>
+            </p>
+            <p className={"text-xs dark:text-nb-gray-300 text-gray-600 mt-0.5"}>
+              {loading ? loadingMessage : error ? error : description}
+            </p>
+          </div>
+        </div>
 
-          <button
-            className="flex dark:border-nb-gray-900 items-center cursor-pointer group"
-            onClick={() => toast.dismiss(t.id)}
+        <button
+          className="flex dark:border-nb-gray-900 items-center cursor-pointer group"
+          onClick={() => toast.dismiss(toastId)}
+        >
+          <div
+            className={
+              "p-2 hover:bg-nb-gray-900 rounded-md opacity-50 group-hover:opacity-100"
+            }
           >
-            <div
-              className={
-                "p-2 hover:bg-nb-gray-900 rounded-md opacity-50 group-hover:opacity-100"
-              }
-            >
-              <XIcon size={16} />
-            </div>
-          </button>
-        </motion.div>
-      )}
-    </AnimatePresence>
+            <XIcon size={16} />
+          </div>
+        </button>
+      </div>
+    </motion.div>
   );
 }
 
 export function notify<T>(props: NotifyProps<T>) {
-  return toast.custom((t) => <Notification {...props} t={t} />, {
+  return toast.custom((id) => <Notification {...props} toastId={id} />, {
     duration: Infinity,
   });
 }
diff --git a/src/components/PeerGroupSelector.tsx b/src/components/PeerGroupSelector.tsx
index 7fafdbc52..e3b6037b3 100644
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -44,6 +44,9 @@ import { PolicyRuleResource } from "@/interfaces/Policy";
 import { User } from "@/interfaces/User";
 import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
 import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
+import TruncatedText from "@components/ui/TruncatedText";
+
+type PeerGroupSelectorTab = "peers" | "groups" | "resources";
 
 const groupsSearchPredicate = (item: Group, query: string) => {
   const lowerCaseQuery = query.toLowerCase();
@@ -68,6 +71,9 @@ interface MultiSelectProps {
   showResourceCounter?: boolean;
   showResources?: boolean;
   showPeers?: boolean;
+  hideGroupsTab?: boolean;
+  tabOrder?: ("groups" | "peers" | "resources")[];
+  closeOnSelect?: boolean;
   resource?: PolicyRuleResource;
   onResourceChange?: (resource?: PolicyRuleResource) => void;
   placeholder?: string;
@@ -76,6 +82,7 @@ interface MultiSelectProps {
   side?: "top" | "bottom";
   users?: User[];
   placeholderForSearch?: string;
+  resourceIds?: string[];
 }
 export function PeerGroupSelector({
   onChange,
@@ -94,6 +101,9 @@ export function PeerGroupSelector({
   showResourceCounter = true,
   showResources = false,
   showPeers = false,
+  hideGroupsTab = false,
+  tabOrder,
+  closeOnSelect = false,
   resource,
   onResourceChange,
   placeholder = "Add or select group(s)...",
@@ -102,6 +112,7 @@ export function PeerGroupSelector({
   side = "bottom",
   users,
   placeholderForSearch = 'Search groups or add new group by pressing "Enter"...',
+  resourceIds,
 }: Readonly<MultiSelectProps>) {
   const { data: resources, isLoading: isResourcesLoading } = useFetchApi<
     NetworkResource[]
@@ -229,7 +240,13 @@ export function PeerGroupSelector({
 
   const [slice, setSlice] = useState(10);
 
-  const [tab, setTab] = useState("groups");
+  const getDefaultTab = (): PeerGroupSelectorTab => {
+    if (tabOrder?.[0]) return tabOrder[0];
+    if (hideGroupsTab) return showPeers ? "peers" : "resources";
+    return "groups";
+  };
+
+  const [tab, setTab] = useState<PeerGroupSelectorTab>(getDefaultTab);
 
   useEffect(() => {
     if (open) {
@@ -272,6 +289,9 @@ export function PeerGroupSelector({
         : undefined,
     );
     onChange([]);
+    if (closeOnSelect) {
+      setOpen(false);
+    }
   };
 
   const selectPeer = (peer?: Peer) => {
@@ -281,6 +301,9 @@ export function PeerGroupSelector({
       type: "peer",
     });
     onChange([]);
+    if (closeOnSelect) {
+      setOpen(false);
+    }
   };
 
   return (
@@ -438,11 +461,20 @@ export function PeerGroupSelector({
               </div>
             </div>
 
-            <Tabs defaultValue={"groups"} value={tab} onValueChange={setTab}>
+            <Tabs
+              defaultValue={
+                tabOrder?.[0] ??
+                (hideGroupsTab ? (showPeers ? "peers" : "resources") : "groups")
+              }
+              value={tab}
+              onValueChange={(v) => setTab(v as PeerGroupSelectorTab)}
+            >
               <TabTriggers
                 searchRef={searchRef}
                 showPeers={showPeers}
                 showResources={showResources}
+                hideGroupsTab={hideGroupsTab}
+                tabOrder={tabOrder}
               />
               <TabsContent value={"groups"} className={"p-0 my-0"}>
                 <CommandGroup>
@@ -562,7 +594,11 @@ export function PeerGroupSelector({
                 <TabsContent value={"resources"} className={"p-0 my-0"}>
                   <ResourcesList
                     search={search}
-                    resources={resources}
+                    resources={
+                      resourceIds
+                        ? resources?.filter((r) => resourceIds.includes(r.id))
+                        : resources
+                    }
                     isLoading={isResourcesLoading}
                     value={resource}
                     onChange={selectResource}
@@ -592,60 +628,89 @@ const TabTriggers = ({
   searchRef,
   showResources = false,
   showPeers = false,
+  hideGroupsTab = false,
+  tabOrder,
 }: {
   searchRef: React.MutableRefObject<HTMLInputElement | null>;
   showResources?: boolean;
   showPeers?: boolean;
+  hideGroupsTab?: boolean;
+  tabOrder?: ("groups" | "peers" | "resources")[];
 }) => {
-  if (!showResources && !showPeers) return null;
+  const tabCount =
+    (!hideGroupsTab ? 1 : 0) + (showResources ? 1 : 0) + (showPeers ? 1 : 0);
+  if (tabCount <= 1) return null;
+
+  const groupsTab = !hideGroupsTab && (
+    <TabsTrigger
+      key="groups"
+      value={"groups"}
+      className={"text-[.8rem] font-normal"}
+      onClick={() => searchRef.current?.focus()}
+    >
+      <FolderGit2
+        className={
+          "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+        }
+        size={14}
+      />
+      Groups
+    </TabsTrigger>
+  );
+
+  const resourcesTab = showResources && (
+    <TabsTrigger
+      key="resources"
+      value={"resources"}
+      className={"text-[.8rem] font-normal"}
+      onClick={() => searchRef.current?.focus()}
+    >
+      <Layers3Icon
+        className={
+          "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+        }
+        size={14}
+      />
+      Resources
+    </TabsTrigger>
+  );
+
+  const peersTab = showPeers && (
+    <TabsTrigger
+      key="peers"
+      value={"peers"}
+      className={"text-[.8rem] font-normal"}
+      onClick={() => searchRef.current?.focus()}
+    >
+      <MonitorSmartphoneIcon
+        className={
+          "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+        }
+        size={14}
+      />
+      Peers
+    </TabsTrigger>
+  );
+
+  const tabMap = {
+    groups: groupsTab,
+    peers: peersTab,
+    resources: resourcesTab,
+  };
+
+  if (tabOrder) {
+    return (
+      <TabsList justify={"start"} className={"px-3"}>
+        {tabOrder.map((tab) => tabMap[tab])}
+      </TabsList>
+    );
+  }
 
   return (
     <TabsList justify={"start"} className={"px-3"}>
-      <TabsTrigger
-        value={"groups"}
-        className={"text-[.8rem] font-normal"}
-        onClick={() => searchRef.current?.focus()}
-      >
-        <FolderGit2
-          className={
-            "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-          }
-          size={14}
-        />
-        Groups
-      </TabsTrigger>
-
-      {showResources && (
-        <TabsTrigger
-          value={"resources"}
-          className={"text-[.8rem] font-normal"}
-          onClick={() => searchRef.current?.focus()}
-        >
-          <Layers3Icon
-            className={
-              "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-            }
-            size={14}
-          />
-          Resources
-        </TabsTrigger>
-      )}
-
-      {showPeers && (
-        <TabsTrigger
-          value={"peers"}
-          className={"text-[.8rem] font-normal"}
-          onClick={() => searchRef.current?.focus()}
-        >
-          <MonitorSmartphoneIcon
-            className={
-              "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
-            }
-            size={14}
-          />
-          Peers
-        </TabsTrigger>
-      )}
+      {groupsTab}
+      {resourcesTab}
+      {peersTab}
     </TabsList>
   );
 };
@@ -787,6 +852,7 @@ const ResourcesList = ({
       <VirtualScrollAreaList
         items={filteredItems}
         onSelect={onChange}
+        estimatedItemHeight={42}
         itemClassName={"dark:aria-selected:bg-nb-gray-800/20"}
         renderItem={(res) => {
           return (
@@ -896,6 +962,7 @@ const PeersList = ({
       <VirtualScrollAreaList
         items={filteredItems}
         onSelect={onChange}
+        estimatedItemHeight={42}
         itemClassName={"dark:aria-selected:bg-nb-gray-800/20"}
         renderItem={(res) => {
           if (!res?.id) return;
@@ -904,7 +971,7 @@ const PeersList = ({
             <Fragment key={res.id}>
               <div className={"flex items-center gap-2"}>
                 <Badge
-                  useHover={true}
+                  useHover={false}
                   data-cy={"group-badge"}
                   variant={"gray-ghost"}
                   className={cn(
@@ -915,7 +982,7 @@ const PeersList = ({
                   }}
                 >
                   <PeerOperatingSystemIcon os={res.os} />
-                  <TextWithTooltip text={res?.name || ""} maxChars={20} />
+                  <TruncatedText text={res?.name || ""} maxWidth={"270px"} />
                 </Badge>
               </div>
 
diff --git a/src/components/PeerSelector.tsx b/src/components/PeerSelector.tsx
index 520a9df9b..df7101b3e 100644
--- a/src/components/PeerSelector.tsx
+++ b/src/components/PeerSelector.tsx
@@ -13,7 +13,6 @@ import { ArrowUpCircleIcon, ChevronsUpDown, MapPin } from "lucide-react";
 import * as React from "react";
 import { memo, useEffect, useState } from "react";
 import { useElementSize } from "@/hooks/useElementSize";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
 import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
 
diff --git a/src/components/PinCodeInput.tsx b/src/components/PinCodeInput.tsx
new file mode 100644
index 000000000..436ca4c40
--- /dev/null
+++ b/src/components/PinCodeInput.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { cn } from "@utils/helpers";
+import React, {
+  ClipboardEvent,
+  forwardRef,
+  KeyboardEvent,
+  useImperativeHandle,
+  useRef,
+} from "react";
+
+export interface PinCodeInputRef {
+  focus: () => void;
+}
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  length?: number;
+  disabled?: boolean;
+  className?: string;
+  type?: "text" | "password";
+}
+
+const PinCodeInput = forwardRef<PinCodeInputRef, Props>(function PinCodeInput(
+  { value, onChange, length = 6, disabled = false, className, type = "text" },
+  ref,
+) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRefs.current[0]?.focus();
+    },
+  }));
+
+  const digits = value
+    .split("")
+    .concat(Array(length).fill(""))
+    .slice(0, length);
+
+  const handleChange = (index: number, digit: string) => {
+    if (!/^\d*$/.test(digit)) return;
+
+    const newDigits = [...digits];
+    newDigits[index] = digit.slice(-1);
+    const newValue = newDigits.join("").replace(/\s/g, "");
+    onChange(newValue);
+
+    if (digit && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+    if (/^\d$/.test(e.key) && digits[index]) {
+      e.preventDefault();
+      const newDigits = [...digits];
+      newDigits[index] = e.key;
+      onChange(newDigits.join("").replace(/\s/g, ""));
+      if (index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData
+      .getData("text")
+      .replace(/\D/g, "")
+      .slice(0, length);
+    onChange(pastedData);
+
+    const nextIndex = Math.min(pastedData.length, length - 1);
+    inputRefs.current[nextIndex]?.focus();
+  };
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select();
+  };
+
+  return (
+    <div className={cn("flex gap-2", className)}>
+      {digits.map((digit, index) => (
+        <input
+          key={index}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
+          type={type}
+          inputMode="numeric"
+          maxLength={1}
+          value={digit}
+          onChange={(e) => handleChange(index, e.target.value)}
+          onKeyDown={(e) => handleKeyDown(index, e)}
+          onPaste={handlePaste}
+          onFocus={handleFocus}
+          disabled={disabled}
+          className={cn(
+            "w-[42px] h-[42px] text-center text-sm rounded-md",
+            "dark:bg-nb-gray-900 border dark:border-nb-gray-700",
+            "dark:placeholder:text-neutral-400/70",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20",
+            "disabled:cursor-not-allowed disabled:opacity-40",
+          )}
+        />
+      ))}
+    </div>
+  );
+});
+
+export default PinCodeInput;
diff --git a/src/components/PortSelector.tsx b/src/components/PortSelector.tsx
index e33628b77..7d176a95f 100644
--- a/src/components/PortSelector.tsx
+++ b/src/components/PortSelector.tsx
@@ -188,7 +188,6 @@ export function PortSelector({
                     "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
                   )}
                   data-cy={"port-input"}
-                  typeof={"number"}
                   ref={searchRef}
                   value={search}
                   onValueChange={setSearch}
diff --git a/src/components/SettingCard.tsx b/src/components/SettingCard.tsx
new file mode 100644
index 000000000..1f04b52b1
--- /dev/null
+++ b/src/components/SettingCard.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import { Label } from "@components/Label";
+import { SmallBadge } from "@components/ui/SmallBadge";
+import { cn } from "@utils/helpers";
+import { PlusCircle, SquarePen } from "lucide-react";
+import React from "react";
+
+type SettingCardItemProps = {
+  label: React.ReactNode;
+  description: React.ReactNode;
+  enabled: boolean;
+  onClick: () => void;
+};
+
+function SettingCardItem({
+  label,
+  description,
+  enabled,
+  onClick,
+}: Readonly<SettingCardItemProps>) {
+  return (
+    <div
+      onClick={onClick}
+      className={
+        "flex justify-between gap-10 px-6 border-t border-nb-gray-920 first:border-t-0 py-5 hover:bg-nb-gray-935 cursor-pointer transition-colors"
+      }
+    >
+      <div className={"max-w-sm"}>
+        <div className="flex items-center gap-2">
+          <Label>{label}</Label>
+          {enabled && (
+            <SmallBadge
+              text="Enabled"
+              variant="green"
+              size="md"
+              className={"-top-[0.25rem]"}
+            />
+          )}
+        </div>
+        <HelpText margin={false}>{description}</HelpText>
+      </div>
+      <div onClick={(e) => e.stopPropagation()}>
+        {enabled ? (
+          <Button
+            variant={"secondaryLighter"}
+            size={"xs"}
+            className={"pl-3 pr-3"}
+            onClick={onClick}
+          >
+            <SquarePen size={12} />
+            Edit
+          </Button>
+        ) : (
+          <Button
+            variant={"secondaryLighter"}
+            size={"xs"}
+            className={"pl-3 pr-3"}
+            onClick={onClick}
+          >
+            <PlusCircle size={12} />
+            Add
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SettingCardProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function SettingCard({ children, className }: Readonly<SettingCardProps>) {
+  return (
+    <div
+      className={cn(
+        "border-nb-gray-920 bg-nb-gray-800/10 border rounded-md",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+SettingCard.Item = SettingCardItem;
+
+export default SettingCard;
diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
index 48d61a0f6..7887505e8 100644
--- a/src/components/SidebarItem.tsx
+++ b/src/components/SidebarItem.tsx
@@ -5,7 +5,7 @@ import { cn } from "@utils/helpers";
 import classNames from "classnames";
 import { ChevronDownIcon, ChevronUpIcon, DotIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 
 export type SidebarItemProps = {
@@ -36,8 +36,22 @@ export default function SidebarItem({
   labelClassName,
   visible,
 }: Readonly<SidebarItemProps>) {
-  const [open, setOpen] = React.useState(false);
   const path = usePathname();
+
+  // Check if any child route is active (for collapsible items)
+  const hasActiveChild = useMemo(() => {
+    if (!collapsible || !href) return false;
+    return path.startsWith(href);
+  }, [collapsible, href, path]);
+
+  const [open, setOpen] = React.useState(hasActiveChild);
+
+  // Open the collapsible if a child route becomes active
+  useEffect(() => {
+    if (hasActiveChild && !open) {
+      setOpen(true);
+    }
+  }, [hasActiveChild]);
   const router = useRouter();
   const { mobileNavOpen, toggleMobileNav, isNavigationCollapsed } =
     useApplicationContext();
@@ -48,6 +62,7 @@ export default function SidebarItem({
         ? path == href
         : path.includes(href)
       : false;
+    if (collapsible && href) return;
     if (collapsible && mobileNavOpen) return;
     if (collapsible && open) return;
     if (preventRedirect) return;
@@ -66,7 +81,7 @@ export default function SidebarItem({
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen}>
       <Collapsible.Trigger asChild>
-        <li className={"px-4 cursor-pointer list-none"}>
+        <li className={"px-3 cursor-pointer list-none"}>
           <button
             className={classNames(
               "rounded-lg text-[.87rem] w-full relative font-normal",
@@ -101,7 +116,7 @@ export default function SidebarItem({
 
               <span
                 className={cn(
-                  "px-4 whitespace-nowrap flex-1 w-full text-left",
+                  "px-3 whitespace-nowrap flex-1 w-full text-left",
                   labelClassName,
                   isNavigationCollapsed &&
                     !mobileNavOpen &&
diff --git a/src/components/VirtualScrollAreaList.tsx b/src/components/VirtualScrollAreaList.tsx
index aa86999ac..6995cc6b3 100644
--- a/src/components/VirtualScrollAreaList.tsx
+++ b/src/components/VirtualScrollAreaList.tsx
@@ -1,7 +1,4 @@
-import {
-  MemoizedScrollArea,
-  ScrollAreaViewport,
-} from "@components/ScrollArea";
+import { MemoizedScrollArea, ScrollAreaViewport } from "@components/ScrollArea";
 import { cn } from "@utils/helpers";
 import * as React from "react";
 import {
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 28dbccfbb..12e2336a8 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -59,6 +59,7 @@ const ModalContent = React.forwardRef<
       children,
       showClose = true,
       maxWidthClass = "max-w-3xl",
+      onPointerDownOutside,
       ...props
     },
     ref,
@@ -72,6 +73,19 @@ const ModalContent = React.forwardRef<
             className,
             maxWidthClass,
           )}
+          onPointerDownOutside={(e) => {
+            // Prevent closing modal when clicking on toast notifications
+            try {
+              const target = e.target as HTMLElement;
+              if (target?.closest("[data-toast-notification]")) {
+                e.preventDefault();
+                return;
+              }
+            } catch {
+              // Ignore errors
+            }
+            onPointerDownOutside?.(e);
+          }}
           {...props}
           onClick={(e) => e.stopPropagation()}
         >
diff --git a/src/components/select/SelectDropdown.tsx b/src/components/select/SelectDropdown.tsx
index 4a979c94e..2b9c8ed80 100644
--- a/src/components/select/SelectDropdown.tsx
+++ b/src/components/select/SelectDropdown.tsx
@@ -14,6 +14,7 @@ import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import { useElementSize } from "@/hooks/useElementSize";
+import { DropdownInfoText } from "@components/DropdownInfoText";
 
 export interface SelectOption {
   label: string | React.ReactNode;
@@ -25,13 +26,16 @@ export interface SelectOption {
   }>;
   renderItem?: () => React.ReactNode;
   searchValue?: string;
+  className?: string;
+  disabled?: boolean;
 }
 
 interface SelectDropdownProps {
   value: string;
   onChange: (value: string) => void;
   disabled?: boolean;
-  popoverWidth?: "auto" | number;
+  popoverWidth?: "auto" | "content" | number;
+  popoverMinWidth?: number;
   options: SelectOption[];
   showSearch?: boolean;
   showValues?: boolean;
@@ -51,6 +55,7 @@ export function SelectDropdown({
   value,
   disabled = false,
   popoverWidth = "auto",
+  popoverMinWidth,
   options,
   showSearch = false,
   showValues = false,
@@ -169,9 +174,18 @@ export function SelectDropdown({
         )}
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950 focus:outline-none"
+        className={cn(
+          "p-0 shadow-sm shadow-nb-gray-950 focus:outline-none",
+          popoverWidth !== "content" && "w-full",
+        )}
         style={{
-          width: popoverWidth === "auto" ? width : popoverWidth,
+          width:
+            popoverWidth === "content"
+              ? "auto"
+              : popoverWidth === "auto"
+              ? width
+              : popoverWidth,
+          minWidth: popoverMinWidth,
         }}
         align="start"
         side={"bottom"}
@@ -194,9 +208,10 @@ export function SelectDropdown({
             )}
 
             {filteredItems.length == 0 && (
-              <div className={"text-center pb-2 px-3 text-nb-gray-400 text-xs"}>
-                There are no results matching your search.
-              </div>
+              <DropdownInfoText className={"max-w-sm mx-auto px-4"}>
+                There are no results matching your search. Please try a
+                different search term.
+              </DropdownInfoText>
             )}
 
             <ScrollArea
@@ -209,7 +224,7 @@ export function SelectDropdown({
               }}
             >
               <CommandGroup>
-                <div className={"grid grid-cols-1 gap-1 pb-2"}>
+                <div className={"grid grid-cols-1 gap-1 pb-2 w-full"}>
                   {filteredItems.map((option) => (
                     <SelectDropdownItem
                       option={option}
@@ -253,22 +268,29 @@ const SelectDropdownItem = ({
   }, [isVisible]);
 
   return (
-    <div ref={elementRef} className={"transition-all"}>
+    <div ref={elementRef} className={"transition-all w-full"}>
       {visible ? (
         <CommandItem
           value={option?.searchValue ?? value}
           ref={elementRef}
-          className={"py-1 px-2"}
-          onSelect={() => toggle(option.value)}
+          className={"py-1 px-2 w-full"}
+          onSelect={() => !option?.disabled && toggle(option.value)}
           onClick={(e) => e.preventDefault()}
+          disabled={option?.disabled}
         >
-          <div className={"flex items-center gap-2.5 p-1"}>
+          <div
+            className={cn(
+              "flex items-center gap-2.5 p-1 w-full",
+              option?.className,
+              option?.disabled && "cursor-not-allowed",
+            )}
+          >
             {option.icon && <option.icon size={14} width={14} />}
             {option?.renderItem && option.renderItem()}
             {!option?.renderItem && (
               <div
                 className={cn(
-                  "flex flex-col text-sm font-medium",
+                  "flex flex-col text-sm font-medium w-full",
                   size === "xs" && "text-xs",
                 )}
               >
diff --git a/src/components/skeletons/SkeletonDeviceCard.tsx b/src/components/skeletons/SkeletonDeviceCard.tsx
new file mode 100644
index 000000000..02b230080
--- /dev/null
+++ b/src/components/skeletons/SkeletonDeviceCard.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import Skeleton from "react-loading-skeleton";
+
+export const SkeletonDeviceCard = () => {
+  return (
+    <div className={"min-h-[59px] relative -left-2"}>
+      <div className={"py-2 pr-4 pl-2 flex gap-3"}>
+        <Skeleton height={36} width={36} />
+        <div className={"flex flex-col pr-[1.15rem]"}>
+          <Skeleton height={16} width={70} />
+          <Skeleton height={16} width={140} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/table/DataTable.tsx b/src/components/table/DataTable.tsx
index e53375b13..9b6919975 100644
--- a/src/components/table/DataTable.tsx
+++ b/src/components/table/DataTable.tsx
@@ -133,9 +133,10 @@ interface DataTableProps<TData, TValue> {
   className?: string;
   inset?: boolean;
   isLoading?: boolean;
+  isFetching?: boolean;
   as?: "div" | "table";
   paginationClassName?: string;
-  rowClassName?: string;
+  rowClassName?: string | ((row: Row<TData>) => string);
   wrapperClassName?: string;
   tableClassName?: string;
   searchClassName?: string;
@@ -150,6 +151,8 @@ interface DataTableProps<TData, TValue> {
   useRowId?: boolean;
   headingTarget?: HTMLHeadingElement | null;
   showResetFilterButton?: boolean;
+  serverSidePagination?: boolean;
+  hasServerSideFilters?: boolean;
   onFilterReset?: () => void;
   wrapperComponent?: React.ElementType;
   wrapperProps?: any;
@@ -195,6 +198,7 @@ export function DataTable<TData, TValue>({
   tableClassName,
   inset,
   isLoading = false,
+  isFetching = false,
   paginationClassName,
   rowClassName,
   wrapperClassName,
@@ -211,6 +215,8 @@ export function DataTable<TData, TValue>({
   useRowId,
   headingTarget,
   showResetFilterButton = true,
+  serverSidePagination = false,
+  hasServerSideFilters,
   onFilterReset,
   showSearchAndFilters = true,
   wrapperProps,
@@ -236,6 +242,19 @@ export function DataTable<TData, TValue>({
   const path = usePathname();
   const isInitialRender = useRef(true);
 
+  const [showOverlay, setShowOverlay] = useState(false);
+  const overlayTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  useEffect(() => {
+    if (!serverSidePagination) return;
+    if (isFetching && !isLoading) {
+      overlayTimer.current = setTimeout(() => setShowOverlay(true), 500);
+    } else {
+      clearTimeout(overlayTimer.current);
+      setShowOverlay(false);
+    }
+    return () => clearTimeout(overlayTimer.current);
+  }, [serverSidePagination, isFetching, isLoading]);
+
   const [localColumnFilters, setLocalColumnFilters] =
     useLocalStorage<ColumnFiltersState>(
       `netbird-table-columns${uniqueKey ? "/" + (uniqueKey as string) : path}`,
@@ -411,12 +430,7 @@ export function DataTable<TData, TValue>({
   return (
     <div className={cn("relative table-fixed-scroll", className)}>
       {showSearchAndFilters && (
-        <div
-          className={cn(
-            "flex gap-x-4 gap-y-6 flex-wrap",
-            !minimal && "p-default",
-          )}
-        >
+        <div className={cn("flex gap-x-4 gap-y-6", !minimal && "p-default")}>
           <DataTableGlobalSearch
             className={searchClassName}
             disabled={false} // Never disable the search input
@@ -439,10 +453,14 @@ export function DataTable<TData, TValue>({
           />
           {children?.(table)}
           {showResetFilterButton && (
-            <DataTableResetFilterButton onClick={resetFilters} table={table} />
+            <DataTableResetFilterButton
+              onClick={resetFilters}
+              table={table}
+              hasServerSideFilters={hasServerSideFilters}
+            />
           )}
-          <div className={"flex gap-4 flex-wrap grow"}>
-            <div className={"flex gap-4 flex-wrap"}></div>
+          <div className={"flex gap-4 grow"}>
+            <div className={"flex gap-4"}></div>
             {rightSide?.(table)}
           </div>
         </div>
@@ -450,135 +468,141 @@ export function DataTable<TData, TValue>({
 
       {aboveTable?.(table)}
 
-      <TableWrapper
-        wrapperComponent={wrapperComponent}
-        wrapperProps={wrapperProps}
-      >
-        {isLoading ? (
-          <TableContentSkeleton />
-        ) : !hasInitialData ? (
-          getStartedCard
-        ) : (
-          <TableComponent
-            className={cn("relative mt-6", tableClassName)}
-            minimal={minimal}
-          >
-            {showHeader && as == "table" && (
-              <TableHeaderComponent minimal={minimal}>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRowComponent key={headerGroup.id} minimal={minimal}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead
-                          key={header.id}
-                          minimal={minimal}
-                          inset={inset}
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
-                        </TableHead>
-                      );
-                    })}
-                  </TableRowComponent>
-                ))}
-              </TableHeaderComponent>
-            )}
-
-            <TableBodyComponent
-              className={cn(
-                "relative",
-                data == undefined && "blur-sm",
-                wrapperClassName,
-              )}
+      <div className="relative">
+        {showOverlay && (
+          <div className="absolute inset-0 bg-nb-gray-950/50 z-10 rounded-md" />
+        )}
+        <TableWrapper
+          wrapperComponent={wrapperComponent}
+          wrapperProps={wrapperProps}
+        >
+          {isLoading ? (
+            <TableContentSkeleton />
+          ) : !hasInitialData && !hasServerSideFilters ? (
+            getStartedCard
+          ) : (
+            <TableComponent
+              className={cn("relative mt-6", tableClassName)}
+              minimal={minimal}
             >
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => {
-                  const expandedRow = renderExpandedRow?.(row.original);
-                  const rowId = row.original.id ?? row.id;
-                  const isExpanded = accordion?.includes(rowId);
-                  const rowContent = (
-                    <React.Fragment key={row.id}>
-                      <TableRowComponent
-                        minimal={minimal}
-                        data-row-id={rowId}
-                        className={cn(
-                          (onRowClick || renderExpandedRow) &&
-                            "relative group/accordion",
-                          (onRowClick || expandedRow) && "cursor-pointer",
-                          rowClassName,
-                        )}
-                        data-state={row.getIsSelected() && "selected"}
-                        data-accordion={isExpanded ? "opened" : "closed"}
-                        onClick={(e) => {
-                          if (expandedRow) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setAccordion((prev) => {
-                              if (prev?.includes(rowId)) {
-                                return prev.filter(
-                                  (item) => item !== rowId,
-                                );
-                              } else {
-                                return [...(prev ?? []), rowId];
-                              }
-                            });
-                          }
-                        }}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCellComponent
-                            key={cell.id}
-                            className={cn("relative", tableCellClassName)}
+              {showHeader && as == "table" && (
+                <TableHeaderComponent minimal={minimal}>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRowComponent key={headerGroup.id} minimal={minimal}>
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <TableHead
+                            key={header.id}
                             minimal={minimal}
                             inset={inset}
-                            onClick={() => {
-                              onRowClick && onRowClick(row, cell.column.id);
-                            }}
                           >
-                            <div
-                              className={
-                                "absolute left-0 top-0 w-full h-full z-0"
-                              }
-                            ></div>
-                            <div className={"relative z-[1]"}>
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext(),
-                              )}
-                            </div>
-                          </TableCellComponent>
-                        ))}
-                      </TableRowComponent>
+                            {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRowComponent>
+                  ))}
+                </TableHeaderComponent>
+              )}
 
-                      {expandedRow && isExpanded && (
+              <TableBodyComponent
+                className={cn(
+                  "relative",
+                  data == undefined && "blur-sm",
+                  wrapperClassName,
+                )}
+              >
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => {
+                    const expandedRow = renderExpandedRow?.(row.original);
+                    const rowId = row.original.id ?? row.id;
+                    const isExpanded = accordion?.includes(rowId);
+                    const rowContent = (
+                      <React.Fragment key={row.id}>
                         <TableRowComponent
-                          data-row-id={row.id + "-expanded-row"}
                           minimal={minimal}
+                          data-row-id={rowId}
                           className={cn(
-                            onRowClick && "cursor-pointer relative",
-                            rowClassName,
+                            (onRowClick || renderExpandedRow) &&
+                              "relative group/accordion",
+                            (onRowClick || expandedRow) && "cursor-pointer",
+                            typeof rowClassName === "function"
+                              ? rowClassName(row)
+                              : rowClassName,
                           )}
                           data-state={row.getIsSelected() && "selected"}
+                          data-accordion={isExpanded ? "opened" : "closed"}
+                          onClick={(e) => {
+                            if (expandedRow) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setAccordion((prev) => {
+                                if (prev?.includes(rowId)) {
+                                  return prev.filter((item) => item !== rowId);
+                                } else {
+                                  return [...(prev ?? []), rowId];
+                                }
+                              });
+                            }
+                          }}
                         >
-                          <TableDataUnstyledComponent
-                            className={"w-full"}
-                            colSpan={row.getVisibleCells().length}
-                          >
-                            {expandedRow}
-                          </TableDataUnstyledComponent>
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCellComponent
+                              key={cell.id}
+                              className={cn("relative", tableCellClassName)}
+                              minimal={minimal}
+                              inset={inset}
+                              onClick={() => {
+                                onRowClick && onRowClick(row, cell.column.id);
+                              }}
+                            >
+                              <div
+                                className={
+                                  "absolute left-0 top-0 w-full h-full z-0"
+                                }
+                              ></div>
+                              <div className={"relative z-[1]"}>
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext(),
+                                )}
+                              </div>
+                            </TableCellComponent>
+                          ))}
                         </TableRowComponent>
-                      )}
-                    </React.Fragment>
-                  );
 
-                  return renderRow
-                    ? renderRow(row.original, rowContent)
-                    : rowContent;
-                })
+                        {expandedRow && isExpanded && (
+                          <TableRowComponent
+                            data-row-id={row.id + "-expanded-row"}
+                            minimal={minimal}
+                            className={cn(
+                              onRowClick && "cursor-pointer relative",
+                              typeof rowClassName === "function"
+                                ? rowClassName(row)
+                                : rowClassName,
+                            )}
+                            data-state={row.getIsSelected() && "selected"}
+                          >
+                            <TableDataUnstyledComponent
+                              className={"w-full"}
+                              colSpan={row.getVisibleCells().length}
+                            >
+                              {expandedRow}
+                            </TableDataUnstyledComponent>
+                          </TableRowComponent>
+                        )}
+                      </React.Fragment>
+                    );
+
+                    return renderRow
+                      ? renderRow(row.original, rowContent)
+                      : rowContent;
+                  })
                 ) : (
                   <TableRowUnstyledComponent>
                     <TableCellComponent
@@ -589,10 +613,11 @@ export function DataTable<TData, TValue>({
                     </TableCellComponent>
                   </TableRowUnstyledComponent>
                 )}
-            </TableBodyComponent>
-          </TableComponent>
-        )}
-      </TableWrapper>
+              </TableBodyComponent>
+            </TableComponent>
+          )}
+        </TableWrapper>
+      </div>
 
       <div className={paginationClassName}>
         <DataTablePagination
@@ -603,7 +628,13 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      <DataTableHeadingPortal table={table} headingTarget={headingTarget} />
+      <DataTableHeadingPortal
+        table={table}
+        headingTarget={headingTarget}
+        totalRecords={totalRecords}
+        manualPagination={manualPagination}
+        hasActiveFilters={hasServerSideFilters}
+      />
     </div>
   );
 }
diff --git a/src/components/table/DataTableHeadingPortal.tsx b/src/components/table/DataTableHeadingPortal.tsx
index d5bb365b5..151530d47 100644
--- a/src/components/table/DataTableHeadingPortal.tsx
+++ b/src/components/table/DataTableHeadingPortal.tsx
@@ -6,27 +6,47 @@ import { createPortal } from "react-dom";
 type Props<TData> = {
   table: Table<TData> | null;
   headingTarget?: HTMLHeadingElement | null;
+  totalRecords?: number;
+  manualPagination?: boolean;
+  hasActiveFilters?: boolean;
 };
 
 export const DataTableHeadingPortal = function <TData>({
   table,
   headingTarget,
+  totalRecords,
+  manualPagination,
+  hasActiveFilters,
 }: Props<TData>) {
   const hasMounted = useRef(false);
+  const initialTotalRecords = useRef<number | undefined>(undefined);
+
+  if (
+    manualPagination &&
+    totalRecords !== undefined &&
+    initialTotalRecords.current === undefined
+  ) {
+    initialTotalRecords.current = totalRecords;
+  }
 
   if (!headingTarget) return;
   if (!hasMounted.current) hasMounted.current = true;
 
-  const totalItems = table?.getPreFilteredRowModel().rows.length;
-  const filteredItems = table?.getFilteredRowModel().rows.length;
+  const totalItems = manualPagination
+    ? initialTotalRecords.current
+    : table?.getPreFilteredRowModel().rows.length;
+  const filteredItems = manualPagination
+    ? totalRecords
+    : table?.getFilteredRowModel().rows.length;
   if (!totalItems || totalItems == 1) return;
 
-  const hasAnyFiltersActive =
-    table &&
-    !(
-      table?.getState().columnFilters.length <= 0 &&
-      table?.getState().globalFilter === ""
-    );
+  const hasAnyFiltersActive = manualPagination
+    ? hasActiveFilters ?? totalRecords !== initialTotalRecords.current
+    : table &&
+      !(
+        table?.getState().columnFilters.length <= 0 &&
+        table?.getState().globalFilter === ""
+      );
 
   const portalContainer = document.createElement("span");
   headingTarget.prepend(portalContainer);
diff --git a/src/components/ui/AIButton.tsx b/src/components/ui/AIButton.tsx
deleted file mode 100644
index 8e937a7ca..000000000
--- a/src/components/ui/AIButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Sparkles } from "lucide-react";
-import * as React from "react";
-
-export const AIButton = () => {
-  return (
-    <div
-      className={
-        "animated-gradient-bg gap-2 flex items-center justify-center text-sm font-medium p-[2px] rounded-md group"
-      }
-    >
-      <div
-        className={
-          "flex items-center justify-center w-full h-full gap-2 bg-nb-gray-930/70 px-3 py-2.5 rounded-md"
-        }
-      >
-        <Sparkles size={16} />
-        AI Rule Wizard
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/ui/GetStartedTest.tsx b/src/components/ui/GetStartedTest.tsx
index de61e6f83..23e11789a 100644
--- a/src/components/ui/GetStartedTest.tsx
+++ b/src/components/ui/GetStartedTest.tsx
@@ -64,7 +64,7 @@ export default function GetStartedTest({
                       {description}
                     </Paragraph>
                   </div>
-                  <div>{button}</div>
+                  {button && <div>{button}</div>}
                 </div>
               </div>
               <Paragraph className={"text-sm justify-center pb-5 px-8"}>
diff --git a/src/components/ui/NewBadge.tsx b/src/components/ui/NewBadge.tsx
deleted file mode 100644
index e623690d9..000000000
--- a/src/components/ui/NewBadge.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  text?: string;
-};
-export const NewBadge = ({ text = "NEW" }: Props) => {
-  return (
-    <span
-      className={
-        "text-[7px] relative top-[.25px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
-      }
-    >
-      {text}
-    </span>
-  );
-};
diff --git a/src/components/ui/NoResults.tsx b/src/components/ui/NoResults.tsx
index aa0a540ea..8967675fb 100644
--- a/src/components/ui/NoResults.tsx
+++ b/src/components/ui/NoResults.tsx
@@ -5,6 +5,7 @@ import { FilterX } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback } from "react";
 import Skeleton from "react-loading-skeleton";
+import SquareIcon from "@components/SquareIcon";
 
 type Props = {
   icon?: React.ReactNode;
@@ -54,7 +55,7 @@ export default function NoResults({
     <div className={cn("relative overflow-hidden", className)}>
       <div
         className={
-          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden top-0"
+          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/50 w-full h-full overflow-hidden top-0"
         }
       ></div>
       <div
@@ -66,18 +67,21 @@ export default function NoResults({
           <Skeleton className={"w-full"} height={70} duration={4} />
           <Skeleton className={"w-full"} height={70} duration={4} />
           <Skeleton className={"w-full"} height={70} duration={4} />
+          <Skeleton className={"w-full"} height={70} duration={4} />
+          <Skeleton className={"w-full"} height={70} duration={4} />
         </div>
       </div>
       <div
         className={cn("max-w-md mx-auto relative z-20 py-6", contentClassName)}
       >
-        <div
-          className={
-            "mx-auto w-14 h-14 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"
-          }
-        >
-          {icon ? icon : <FilterX size={24} />}
+        <div className={"flex items-center justify-center mb-6"}>
+          <SquareIcon
+            icon={icon ? icon : <FilterX size={24} />}
+            color={"gray"}
+            size={"large"}
+          />
         </div>
+
         <div className={"text-center"}>
           <h1 className={"text-2xl font-medium max-w-lg mx-auto"}>{title}</h1>
           <Paragraph className={"justify-center my-2 !text-nb-gray-400"}>
diff --git a/src/components/ui/PeerBadge.tsx b/src/components/ui/PeerBadge.tsx
deleted file mode 100644
index 7807627c2..000000000
--- a/src/components/ui/PeerBadge.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Badge, { BadgeVariants } from "@components/Badge";
-import { cn } from "@utils/helpers";
-import { EyeIcon, MonitorSmartphoneIcon, SquarePen } from "lucide-react";
-import * as React from "react";
-import { useMemo, useState } from "react";
-import { useGroups } from "@/contexts/GroupsProvider";
-import { Group } from "@/interfaces/Group";
-import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
-
-type Props = {
-  children?: React.ReactNode;
-  group?: Group;
-  useSave?: boolean;
-  onAssignmentChange?: (group: Group) => void;
-} & React.HTMLAttributes<HTMLDivElement> &
-  BadgeVariants;
-export default function PeerBadge({
-  children,
-  group,
-  variant = "gray",
-  className,
-  useSave = true,
-  onAssignmentChange,
-}: Props) {
-  const [editGroupPeersModal, setEditGroupPeersModal] = useState(false);
-
-  const { dropdownOptions, addDropdownOptions } = useGroups();
-
-  const currentGroup = useMemo(() => {
-    return dropdownOptions?.find((g) => g.name === group?.name);
-  }, [group, dropdownOptions]);
-
-  const peerCount = useMemo(() => {
-    let peerCount = currentGroup?.peers_count ?? 0;
-    let countedPeers = currentGroup?.peers?.length ?? 0;
-    if (peerCount !== countedPeers) {
-      peerCount = countedPeers;
-    }
-    return peerCount;
-  }, [currentGroup]);
-
-  const updateGroupOptions = (g: Group) => {
-    addDropdownOptions([g]);
-    onAssignmentChange && onAssignmentChange(g);
-  };
-
-  return (
-    <>
-      {currentGroup && editGroupPeersModal && (
-        <AssignPeerToGroupModal
-          useSave={useSave}
-          group={currentGroup}
-          onUpdate={(g) => updateGroupOptions(g)}
-          open={editGroupPeersModal}
-          setOpen={setEditGroupPeersModal}
-        />
-      )}
-
-      <Badge
-        variant={variant}
-        className={cn(className, "px-3 gap-2 whitespace-nowrap")}
-        onClick={(e) => {
-          if (!currentGroup) return;
-          e.stopPropagation();
-          setEditGroupPeersModal(true);
-        }}
-        useHover={!!currentGroup}
-      >
-        {!currentGroup && <MonitorSmartphoneIcon size={12} />}
-        {currentGroup ? <>{peerCount} Peer(s)</> : children}
-
-        {currentGroup && (
-          <>
-            {currentGroup.name == "All" ? (
-              <EyeIcon size={12} />
-            ) : (
-              <SquarePen size={12} />
-            )}
-          </>
-        )}
-      </Badge>
-    </>
-  );
-}
diff --git a/src/components/ui/SmallBadge.tsx b/src/components/ui/SmallBadge.tsx
index a4948f8e6..de7ec0196 100644
--- a/src/components/ui/SmallBadge.tsx
+++ b/src/components/ui/SmallBadge.tsx
@@ -10,6 +10,12 @@ const smallBadgeVariants = cva("", {
       white: "bg-white/20 border border-white/10 text-white",
       sky: "bg-sky-900 border border-sky-500/20 text-white",
       netbird: "bg-netbird-900 border border-netbird-400 text-netbird-300",
+      yellow: "bg-yellow-900 border border-yellow-500/20 text-yellow-400",
+    },
+    size: {
+      default:
+        "text-[0.4rem] relative -top-[.25px] leading-[0] py-[0.39rem] px-1 rounded-[3px]",
+      md: "text-[0.55rem] relative -top-[.25px] leading-[0] py-[0.45rem] px-1 rounded-[3px]",
     },
   },
 });
@@ -27,15 +33,10 @@ export const SmallBadge = ({
   textClassName,
   variant = "green",
   children,
+  size = "default",
 }: Props) => {
   return (
-    <span
-      className={cn(
-        smallBadgeVariants({ variant }),
-        "text-[7px] relative -top-[.25px] leading-[0] py-[0.39rem] px-1 rounded-[3px]",
-        className,
-      )}
-    >
+    <span className={cn(smallBadgeVariants({ variant, size }), className)}>
       {children}
       <span className={cn("relative top-[0.4px]", textClassName)}>{text}</span>
     </span>
diff --git a/src/components/ui/TruncatedText.tsx b/src/components/ui/TruncatedText.tsx
index 2a8e00313..7a61d4153 100644
--- a/src/components/ui/TruncatedText.tsx
+++ b/src/components/ui/TruncatedText.tsx
@@ -4,22 +4,38 @@ import React, { useMemo, useState } from "react";
 
 type Props = {
   text?: string;
+  children?: React.ReactNode;
+  tooltipContent?: React.ReactNode;
   className?: string;
   maxChars?: number;
   maxWidth?: string; // Optional CSS width value
   hideTooltip?: boolean;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
 };
 
 export default function TruncatedText({
   text,
+  children,
+  tooltipContent,
   className,
   maxChars = 40,
   maxWidth,
   hideTooltip = false,
+  align,
+  alignOffset = 20,
+  side,
+  sideOffset = 4,
 }: Readonly<Props>) {
   const [isOverflowing, setIsOverflowing] = useState(false);
   const [open, setOpen] = useState(false);
   const contentRef = React.useRef<HTMLDivElement>(null);
+  const measureRef = React.useRef<HTMLSpanElement>(null);
+
+  const hasCustomChildren = !!children;
+  const content = children ?? text;
 
   const charCount = useMemo(() => {
     if (!text) return 0;
@@ -27,12 +43,17 @@ export default function TruncatedText({
   }, [text]);
 
   // Check for overflow on mount and when text/maxWidth changes
+  // When custom children are provided, use a hidden measurement element
+  // to detect overflow independently of children's own truncation
   React.useEffect(() => {
-    const element = contentRef.current;
-    if (element) {
-      setIsOverflowing(element.scrollWidth > element.clientWidth);
+    const container = contentRef.current;
+    const measure = measureRef.current;
+    if (hasCustomChildren && container && measure) {
+      setIsOverflowing(measure.scrollWidth > container.clientWidth);
+    } else if (container) {
+      setIsOverflowing(container.scrollWidth > container.clientWidth);
     }
-  }, [text, maxWidth]);
+  }, [text, children, maxWidth, hasCustomChildren]);
 
   // If maxWidth is provided, use overflow detection
   // Otherwise, fall back to character count logic
@@ -44,11 +65,28 @@ export default function TruncatedText({
     ? { maxWidth }
     : { maxWidth: `${maxChars - 2}ch` };
 
+  const measureElement = hasCustomChildren && text && (
+    <span
+      ref={measureRef}
+      className="absolute invisible whitespace-nowrap pointer-events-none h-0 overflow-hidden"
+      aria-hidden="true"
+    >
+      {text}
+    </span>
+  );
+
   if (isDisabled) {
     return (
-      <div className="w-full min-w-0 inline-block" style={containerStyle}>
+      <div
+        className={cn(
+          "w-full min-w-0 inline-block",
+          hasCustomChildren && "relative",
+        )}
+        style={containerStyle}
+      >
+        {measureElement}
         <div ref={contentRef} className={cn(className, "truncate")}>
-          {text}
+          {content}
         </div>
       </div>
     );
@@ -57,25 +95,36 @@ export default function TruncatedText({
   return (
     <Tooltip delayDuration={650} open={open} onOpenChange={setOpen}>
       <TooltipTrigger asChild={true}>
-        <div className="w-full min-w-0 inline-block" style={containerStyle}>
+        <div
+          className={cn(
+            "w-full min-w-0 inline-block",
+            hasCustomChildren && "relative",
+          )}
+          style={containerStyle}
+        >
+          {measureElement}
           <div ref={contentRef} className={cn(className, "truncate")}>
-            {text}
+            {content}
           </div>
         </div>
       </TooltipTrigger>
       <TooltipContent
-        alignOffset={20}
-        sideOffset={4}
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
         onClick={(e) => {
           e.stopPropagation();
         }}
         className={cn(className, "px-3 py-1.5")}
       >
-        <div className="text-neutral-300 flex flex-col gap-1">
-          <div className="max-w-xs break-all whitespace-normal text-xs">
-            {text}
+        {tooltipContent ?? (
+          <div className="text-neutral-300 flex flex-col gap-1">
+            <div className="max-w-xs break-all whitespace-normal text-xs">
+              {text}
+            </div>
           </div>
-        </div>
+        )}
       </TooltipContent>
     </Tooltip>
   );
diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
new file mode 100644
index 000000000..79cef8332
--- /dev/null
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -0,0 +1,636 @@
+"use client";
+
+import { notify } from "@components/Notification";
+import useFetchApi, { useApiCall } from "@utils/api";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import {
+  ReverseProxy,
+  ReverseProxyDomain,
+  ReverseProxyFlatTarget,
+  ReverseProxyTarget,
+  ReverseProxyTargetProtocol,
+  ReversProxyTargetType,
+} from "@/interfaces/ReverseProxy";
+import ReverseProxyModal from "@/modules/reverse-proxy/ReverseProxyModal";
+import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProxyTargetModal";
+
+type ReverseProxiesContextValue = {
+  reverseProxies: ReverseProxy[] | undefined;
+  isLoading: boolean;
+  openModal: (options?: OpenModalOptions) => void;
+  openTargetModal: (options: OpenTargetModalOptions) => void;
+  handleCreateOrUpdateProxy: (options: HandleCreateOrUpdateOptions) => void;
+  resolveDestination: (target: ReverseProxyTarget) => string;
+  handleToggle: (proxy: ReverseProxy) => Promise<void>;
+  handleDelete: (proxy: ReverseProxy) => Promise<void>;
+  handleDeleteTarget: (
+    proxy: ReverseProxy,
+    target: ReverseProxyTarget,
+  ) => Promise<void>;
+  handleToggleTarget: (
+    proxy: ReverseProxy,
+    target: ReverseProxyTarget,
+  ) => Promise<void>;
+  domains: ReverseProxyDomain[] | undefined;
+  isLoadingDomains: boolean;
+  validateDomain: (domainId: string) => Promise<void>;
+  deleteDomain: (domain: ReverseProxyDomain) => Promise<void>;
+  createDomain: (
+    domain: string,
+    targetCluster: string,
+  ) => Promise<ReverseProxyDomain | undefined>;
+};
+
+type OpenModalOptions = {
+  proxy?: ReverseProxy;
+  initialTab?: string;
+  initialPeer?: Peer;
+  initialNetwork?: Network;
+  initialResource?: NetworkResource;
+  onSuccess?: () => void;
+};
+
+type OpenTargetModalOptions = {
+  proxy: ReverseProxy;
+  target?: ReverseProxyTarget;
+};
+
+type HandleCreateOrUpdateOptions = {
+  data: Partial<ReverseProxy>;
+  proxyId?: string;
+  onSuccess?: () => void;
+};
+
+type Props = {
+  children: React.ReactNode;
+  initialPeer?: Peer;
+  initialNetwork?: Network;
+};
+
+const ReverseProxiesContext = createContext<ReverseProxiesContextValue | null>(
+  null,
+);
+
+export default function ReverseProxiesProvider({
+  children,
+  initialPeer,
+  initialNetwork,
+}: Readonly<Props>) {
+  const { mutate } = useSWRConfig();
+  const { confirm } = useDialog();
+
+  // Reverse Proxies
+  const { data: rawReverseProxies, isLoading } =
+    useFetchApi<ReverseProxy[]>("/reverse-proxies/services");
+  const request = useApiCall<ReverseProxy>("/reverse-proxies/services");
+
+  // Peers & Resources for resolving target destinations
+  const { data: peers } = useFetchApi<Peer[]>("/peers");
+  const { data: resources } = useFetchApi<NetworkResource[]>(
+    "/networks/resources",
+  );
+
+  const resolveDestination = useCallback(
+    (target: ReverseProxyTarget) => {
+      if (target.host === "unknown") return target.host;
+      const host = resolveTargetHost(target, peers, resources);
+      return formatTargetDestination(target, host);
+    },
+    [peers, resources],
+  );
+
+  const reverseProxies = useMemo(() => {
+    return rawReverseProxies?.map((proxy) => ({
+      ...proxy,
+      targets: proxy.targets.map((target) => ({
+        ...target,
+        destination: resolveDestination(target),
+      })),
+    }));
+  }, [rawReverseProxies, resolveDestination]);
+
+  // Domains
+  const { data: domains, isLoading: isLoadingDomains } = useFetchApi<
+    ReverseProxyDomain[]
+  >("/reverse-proxies/domains");
+  const domainRequest = useApiCall<ReverseProxyDomain>(
+    "/reverse-proxies/domains",
+  );
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [currentProxy, setCurrentProxy] = useState<ReverseProxy | undefined>();
+  const [initialTab, setInitialTab] = useState<string | undefined>();
+  const [modalInitialPeer, setModalInitialPeer] = useState<Peer | undefined>();
+  const [modalInitialNetwork, setModalInitialNetwork] = useState<
+    Network | undefined
+  >();
+  const [targetModalOpen, setTargetModalOpen] = useState(false);
+  const [targetModalProxy, setTargetModalProxy] = useState<
+    ReverseProxy | undefined
+  >();
+  const [editingTarget, setEditingTarget] = useState<
+    ReverseProxyTarget | undefined
+  >();
+  const [modalInitialResource, setModalInitialResource] = useState<
+    NetworkResource | undefined
+  >();
+  const onSuccessRef = React.useRef<(() => void) | undefined>(undefined);
+  const openModal = useCallback(
+    (options?: OpenModalOptions) => {
+      setCurrentProxy(options?.proxy);
+      setInitialTab(options?.initialTab);
+      setModalInitialPeer(options?.initialPeer ?? initialPeer);
+      setModalInitialNetwork(options?.initialNetwork ?? initialNetwork);
+      setModalInitialResource(options?.initialResource);
+      onSuccessRef.current = options?.onSuccess;
+      setModalOpen(true);
+    },
+    [initialPeer, initialNetwork],
+  );
+
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    setCurrentProxy(undefined);
+    setInitialTab(undefined);
+    setModalInitialPeer(undefined);
+    setModalInitialNetwork(undefined);
+    setModalInitialResource(undefined);
+    onSuccessRef.current = undefined;
+  }, []);
+
+  const openTargetModal = useCallback((options: OpenTargetModalOptions) => {
+    setTargetModalProxy(options.proxy);
+    setEditingTarget(options.target);
+    setTargetModalOpen(true);
+  }, []);
+
+  const closeTargetModal = useCallback(() => {
+    setTargetModalOpen(false);
+    setTargetModalProxy(undefined);
+    setEditingTarget(undefined);
+  }, []);
+
+  const handleSaveTarget = useCallback(
+    async (target: ReverseProxyTarget) => {
+      if (!targetModalProxy) return;
+
+      let updatedTargets: ReverseProxyTarget[];
+      const isEditing = !!editingTarget;
+      const proxyId = targetModalProxy.id;
+
+      if (isEditing) {
+        // Update existing target - match against the original target before editing
+        updatedTargets = targetModalProxy.targets.map((t) => {
+          const isSameTarget =
+            t.path === editingTarget.path &&
+            t.host === editingTarget.host &&
+            t.port === editingTarget.port &&
+            t.protocol === editingTarget.protocol;
+          return isSameTarget ? target : t;
+        });
+      } else {
+        // Add new target
+        updatedTargets = [...(targetModalProxy.targets || []), target];
+      }
+
+      notify({
+        title: targetModalProxy.domain,
+        description: isEditing
+          ? "Target updated successfully"
+          : "Target added successfully",
+        promise: request
+          .put(
+            { ...targetModalProxy, targets: sanitizeTargets(updatedTargets) },
+            `/${targetModalProxy.id}`,
+          )
+          .then(() => {
+            mutate("/reverse-proxies/services");
+            // After adding a new target, scroll to the row and open the accordion
+            if (!isEditing) {
+              setTimeout(() => {
+                const row = document.querySelector<HTMLElement>(
+                  `[data-row-id="${proxyId}"]`,
+                );
+                if (row?.getAttribute("data-accordion") === "closed") {
+                  row?.click();
+                }
+                row?.scrollIntoView({ behavior: "smooth" });
+              }, 200);
+            }
+          }),
+        loadingMessage: isEditing ? "Updating target..." : "Adding target...",
+      });
+      closeTargetModal();
+    },
+    [targetModalProxy, editingTarget, request, mutate, closeTargetModal],
+  );
+
+  const handleCreateOrUpdateProxy = useCallback(
+    ({ data, proxyId, onSuccess }: HandleCreateOrUpdateOptions) => {
+      const sanitizedData = {
+        ...data,
+        targets: data.targets ? sanitizeTargets(data.targets) : undefined,
+      };
+      const isCreating = !proxyId;
+      const promise = isCreating
+        ? request.post(sanitizedData)
+        : request.put(sanitizedData, `/${proxyId}`);
+
+      notify({
+        title: data.domain || "",
+        description: isCreating
+          ? "Service was successfully created"
+          : "Service was successfully updated",
+        promise: promise.then((result) => {
+          mutate("/reverse-proxies/services");
+          onSuccess?.();
+          if (isCreating && result?.id) {
+            setTimeout(() => {
+              const row = document.querySelector<HTMLElement>(
+                `[data-row-id="${result.id}"]`,
+              );
+              if (row?.getAttribute("data-accordion") === "closed") {
+                row?.click();
+              }
+              row?.scrollIntoView({ behavior: "smooth" });
+            }, 200);
+          }
+        }),
+        loadingMessage: isCreating
+          ? "Creating service..."
+          : "Updating service...",
+      });
+    },
+    [request, mutate],
+  );
+
+  const handleToggle = useCallback(
+    async (proxy: ReverseProxy) => {
+      const newEnabled = !proxy.enabled;
+      notify({
+        title: proxy.domain,
+        description: `Reverse proxy ${newEnabled ? "enabled" : "disabled"}`,
+        promise: request
+          .put(
+            {
+              ...proxy,
+              enabled: newEnabled,
+              targets: sanitizeTargets(proxy.targets),
+            },
+            `/${proxy.id}`,
+          )
+          .then(() => {
+            mutate("/reverse-proxies/services");
+          }),
+        loadingMessage: `${
+          newEnabled ? "Enabling" : "Disabling"
+        } reverse proxy...`,
+      });
+    },
+    [mutate, request],
+  );
+
+  const handleToggleTarget = useCallback(
+    async (proxy: ReverseProxy, target: ReverseProxyTarget) => {
+      const newEnabled = !target.enabled;
+      const updatedTargets = proxy.targets.map((t) => {
+        // Match by unique combination: path, host, and port
+        const isSameTarget =
+          t.path === target.path &&
+          t.host === target.host &&
+          t.port === target.port;
+        return isSameTarget ? { ...t, enabled: newEnabled } : t;
+      });
+
+      notify({
+        title: proxy.domain,
+        description: `Target ${newEnabled ? "enabled" : "disabled"}`,
+        promise: request
+          .put(
+            { ...proxy, targets: sanitizeTargets(updatedTargets) },
+            `/${proxy.id}`,
+          )
+          .then(() => {
+            mutate("/reverse-proxies/services");
+          }),
+        loadingMessage: `${newEnabled ? "Enabling" : "Disabling"} target...`,
+      });
+    },
+    [mutate, request],
+  );
+
+  const handleDelete = useCallback(
+    async (proxy: ReverseProxy) => {
+      const choice = await confirm({
+        title: `Delete '${proxy.domain}'?`,
+        description:
+          "Are you sure you want to delete this reverse proxy? This action cannot be undone.",
+        confirmText: "Delete",
+        cancelText: "Cancel",
+        type: "danger",
+      });
+      if (!choice) return;
+
+      notify({
+        title: proxy.domain,
+        description: "Reverse proxy was successfully deleted",
+        promise: request.del({}, `/${proxy.id}`).then(() => {
+          mutate("/reverse-proxies/services");
+        }),
+        loadingMessage: "Deleting reverse proxy...",
+      });
+    },
+    [confirm, request, mutate],
+  );
+
+  const handleDeleteTarget = useCallback(
+    async (proxy: ReverseProxy, target: ReverseProxyTarget) => {
+      const isOnlyTarget = proxy.targets.length <= 1;
+
+      const choice = await confirm({
+        title: isOnlyTarget ? `Delete '${proxy.domain}'?` : `Delete target?`,
+        description: isOnlyTarget
+          ? "This is the only target for this service. Deleting it will remove the entire service. This action cannot be undone."
+          : "Are you sure you want to delete this target? This action cannot be undone.",
+        confirmText: "Delete",
+        cancelText: "Cancel",
+        type: "danger",
+      });
+      if (!choice) return;
+
+      if (isOnlyTarget) {
+        notify({
+          title: proxy.domain,
+          description: "Service was successfully deleted",
+          promise: request.del({}, `/${proxy.id}`).then(() => {
+            mutate("/reverse-proxies/services");
+          }),
+          loadingMessage: "Deleting service...",
+        });
+      } else {
+        const updatedTargets = proxy.targets.filter((t) => {
+          const isSameTarget =
+            t.path === target.path &&
+            t.host === target.host &&
+            t.port === target.port;
+          return !isSameTarget;
+        });
+
+        notify({
+          title: proxy.domain,
+          description: "Target was successfully deleted",
+          promise: request
+            .put(
+              { ...proxy, targets: sanitizeTargets(updatedTargets) },
+              `/${proxy.id}`,
+            )
+            .then(() => {
+              mutate("/reverse-proxies/services");
+            }),
+          loadingMessage: "Deleting target...",
+        });
+      }
+    },
+    [confirm, request, mutate],
+  );
+
+  const createDomain = useCallback(
+    async (
+      domain: string,
+      targetCluster: string,
+    ): Promise<ReverseProxyDomain | undefined> => {
+      try {
+        const result = await domainRequest.post({
+          domain,
+          target_cluster: targetCluster,
+        });
+        mutate("/reverse-proxies/domains");
+        return result;
+      } catch {
+        return undefined;
+      }
+    },
+    [domainRequest, mutate],
+  );
+
+  const validateDomain = useCallback(
+    async (domainId: string) => {
+      // Delay refetch to allow the server to propagate the validation result
+      const DOMAIN_VALIDATION_REFETCH_DELAY_MS = 2000;
+      notify({
+        title: "Domain Validation",
+        description: "Domain validation started",
+        promise: domainRequest.get(`/${domainId}/validate`).then(() => {
+          setTimeout(() => {
+            mutate("/reverse-proxies/domains");
+          }, DOMAIN_VALIDATION_REFETCH_DELAY_MS);
+        }),
+        loadingMessage: "Validating domain...",
+      });
+    },
+    [domainRequest, mutate],
+  );
+
+  const deleteDomain = useCallback(
+    async (domain: ReverseProxyDomain) => {
+      const choice = await confirm({
+        title: `Delete '${domain.domain}'?`,
+        description:
+          "Are you sure you want to delete this domain? This action cannot be undone.",
+        confirmText: "Delete",
+        cancelText: "Cancel",
+        type: "danger",
+      });
+      if (!choice) return;
+
+      notify({
+        title: domain.domain,
+        description: "Domain was successfully deleted",
+        promise: domainRequest.del({}, `/${domain.id}`).then(() => {
+          mutate("/reverse-proxies/domains");
+        }),
+        loadingMessage: "Deleting domain...",
+      });
+    },
+    [confirm, domainRequest, mutate],
+  );
+
+  return (
+    <ReverseProxiesContext.Provider
+      value={{
+        reverseProxies,
+        isLoading,
+        openModal,
+        openTargetModal,
+        handleCreateOrUpdateProxy,
+        handleToggle,
+        handleToggleTarget,
+        handleDelete,
+        handleDeleteTarget,
+        resolveDestination,
+        domains,
+        isLoadingDomains,
+        createDomain,
+        validateDomain,
+        deleteDomain,
+      }}
+    >
+      {children}
+      {modalOpen && (
+        <ReverseProxyModal
+          open={modalOpen}
+          onOpenChange={(open) => {
+            if (!open) closeModal();
+          }}
+          reverseProxy={currentProxy}
+          domains={domains}
+          initialTab={initialTab}
+          initialPeer={modalInitialPeer}
+          initialNetwork={modalInitialNetwork}
+          initialResource={modalInitialResource}
+          initialSubdomain={modalInitialResource?.name}
+          onSuccess={onSuccessRef.current}
+        />
+      )}
+      {targetModalOpen && targetModalProxy && (
+        <ReverseProxyTargetModal
+          key={targetModalOpen ? 1 : 0}
+          open={targetModalOpen}
+          onOpenChange={(open) => {
+            if (!open) closeTargetModal();
+          }}
+          onSave={handleSaveTarget}
+          currentTarget={editingTarget}
+          reverseProxy={targetModalProxy}
+          initialPeer={initialPeer}
+          initialNetwork={initialNetwork}
+        />
+      )}
+    </ReverseProxiesContext.Provider>
+  );
+}
+
+export const useReverseProxies = () => {
+  const context = useContext(ReverseProxiesContext);
+  if (!context) {
+    throw new Error(
+      "useReverseProxies must be used within a ReverseProxiesProvider",
+    );
+  }
+  return context;
+};
+
+type FlattenReverseProxiesParams = {
+  reverseProxies: ReverseProxy[] | undefined;
+  peer?: Peer;
+  network?: Network;
+};
+
+export function flattenReverseProxies({
+  reverseProxies,
+  peer,
+  network,
+}: FlattenReverseProxiesParams): ReverseProxyFlatTarget[] {
+  if (!reverseProxies) return [];
+
+  const flattened: ReverseProxyFlatTarget[] = [];
+
+  reverseProxies.forEach((proxy) => {
+    proxy.targets.forEach((target) => {
+      // Filter by peer if provided
+      if (peer) {
+        if (
+          target.target_type !== ReversProxyTargetType.PEER ||
+          target.target_id !== peer.id
+        ) {
+          return;
+        }
+      }
+
+      // Filter by network if provided (check if target resource belongs to network)
+      if (network && !peer) {
+        if (isResourceTargetType(target.target_type)) {
+          const isResourceInNetwork = network.resources?.includes(
+            target.target_id || "",
+          );
+          if (!isResourceInNetwork) return;
+        } else {
+          // For peer targets in network context, skip them
+          return;
+        }
+      }
+
+      flattened.push({
+        ...target,
+        proxy,
+      });
+    });
+  });
+
+  return flattened;
+}
+
+export function sanitizeTargets(
+  targets: ReverseProxyTarget[],
+): ReverseProxyTarget[] {
+  return targets.map((t) => {
+    if (t.target_type === ReversProxyTargetType.SUBNET) return t;
+    const { host: _, ...rest } = t;
+    return rest as ReverseProxyTarget;
+  });
+}
+
+export function isResourceTargetType(type: ReversProxyTargetType): boolean {
+  return (
+    type === ReversProxyTargetType.HOST ||
+    type === ReversProxyTargetType.DOMAIN ||
+    type === ReversProxyTargetType.SUBNET
+  );
+}
+
+function formatTargetDestination(
+  target: ReverseProxyTarget,
+  resolvedHost?: string,
+): string {
+  const host = target.host || resolvedHost || "localhost";
+  const isDefault =
+    (target.protocol === "http" && target.port === 80) ||
+    (target.protocol === "https" && target.port === 443) ||
+    target.port === 0;
+  return isDefault
+    ? `${target.protocol}://${host}`
+    : `${target.protocol}://${host}:${target.port}`;
+}
+
+export function defaultPortForProtocol(
+  protocol: ReverseProxyTargetProtocol,
+): number {
+  return protocol === ReverseProxyTargetProtocol.HTTPS ? 443 : 80;
+}
+
+function resolveTargetHost(
+  target: ReverseProxyTarget,
+  peers?: Peer[],
+  resources?: NetworkResource[],
+): string {
+  if (target.host) return "";
+  if (target.target_type === ReversProxyTargetType.PEER) {
+    return peers?.find((p) => p.id === target.target_id)?.ip ?? "";
+  }
+  if (isResourceTargetType(target.target_type)) {
+    const address = resources?.find((r) => r.id === target.target_id)?.address;
+    if (!address) return "";
+    return address.includes("/") ? address.split("/")[0] : address;
+  }
+  return "";
+}
diff --git a/src/contexts/ServerPaginationProvider.tsx b/src/contexts/ServerPaginationProvider.tsx
new file mode 100644
index 000000000..7c3a99b0f
--- /dev/null
+++ b/src/contexts/ServerPaginationProvider.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import useFetchApi from "@utils/api";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useSWRConfig } from "swr";
+import { Pagination } from "@/interfaces/Pagination";
+
+type ServerPaginationContextValue<T = unknown> = {
+  data?: T;
+  isLoading: boolean;
+  isFetching: boolean;
+  mutate: () => Promise<unknown>;
+
+  pagination: { pageIndex: number; pageSize: number };
+  pageCount: number;
+  totalRecords?: number;
+  onPaginationChange: (pagination: {
+    pageIndex: number;
+    pageSize: number;
+  }) => void;
+
+  globalFilter: string;
+  onGlobalFilterChange: (value: string) => void;
+  setFilter: (key: string, value: string | undefined) => void;
+  getFilter: (key: string) => string | undefined;
+  hasActiveFilters: boolean;
+  resetFilters: () => void;
+  onFilterReset: () => void;
+
+  hasServerSideFilters: boolean;
+  serverSidePagination: true;
+  manualPagination: true;
+  manualFiltering: true;
+  keepStateInLocalStorage: false;
+};
+
+const ServerPaginationContext =
+  createContext<ServerPaginationContextValue | null>(null);
+
+type ProviderProps = {
+  url: string;
+  defaultPageSize?: number;
+  defaultFilters?: Record<string, string>;
+  children: React.ReactNode;
+};
+
+export default function ServerPaginationProvider({
+  url,
+  defaultPageSize = 50,
+  defaultFilters,
+  children,
+}: Readonly<ProviderProps>) {
+  const { mutate: swrMutate } = useSWRConfig();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [search, setSearch] = useState("");
+  const [filters, setFilters] = useState<Record<string, string | undefined>>(
+    defaultFilters ?? {},
+  );
+
+  const buildUrl = useCallback(
+    (
+      p: number,
+      ps: number,
+      s: string,
+      f: Record<string, string | undefined>,
+    ) => {
+      const params = new URLSearchParams();
+      params.set("page", String(p));
+      params.set("page_size", String(ps));
+      if (s) params.set("search", s);
+      Object.entries(f).forEach(([key, value]) => {
+        if (value !== undefined) params.set(key, value);
+      });
+      return `${url}?${params.toString()}`;
+    },
+    [url],
+  );
+
+  const apiUrl = buildUrl(page, pageSize, search, filters);
+
+  const {
+    data: response,
+    isLoading,
+    isValidating,
+  } = useFetchApi<Pagination<unknown>>(apiUrl);
+
+  const hasLoadedOnce = useRef(false);
+  const previousResponse = useRef<Pagination<unknown> | undefined>(undefined);
+  if (response?.data) {
+    hasLoadedOnce.current = true;
+    previousResponse.current = response;
+  }
+
+  const activeResponse = response ?? previousResponse.current;
+  const totalPages = activeResponse?.total_pages ?? 0;
+  const hasNextPage = page < totalPages;
+
+  // Prefetch next page
+  useFetchApi<Pagination<unknown>>(
+    hasNextPage ? buildUrl(page + 1, pageSize, search, filters) : apiUrl,
+    false,
+    false,
+    hasNextPage,
+  );
+
+  const onPaginationChange = useCallback(
+    (pagination: { pageIndex: number; pageSize: number }) => {
+      if (pagination.pageSize !== pageSize) {
+        setPage(1);
+        setPageSize(pagination.pageSize);
+      } else {
+        setPage(pagination.pageIndex + 1);
+      }
+    },
+    [pageSize],
+  );
+
+  const onGlobalFilterChange = useCallback((value: string) => {
+    setSearch(value);
+    setPage(1);
+  }, []);
+
+  const filterTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const pendingFilters = useRef<Record<string, string | undefined>>({});
+  useEffect(() => () => clearTimeout(filterTimeout.current), []);
+
+  const setFilter = useCallback((key: string, value: string | undefined) => {
+    pendingFilters.current[key] = value;
+    clearTimeout(filterTimeout.current);
+    filterTimeout.current = setTimeout(() => {
+      const pending = pendingFilters.current;
+      pendingFilters.current = {};
+      setFilters((prev) => ({ ...prev, ...pending }));
+      setPage(1);
+    }, 100);
+  }, []);
+
+  const getFilter = useCallback((key: string) => filters[key], [filters]);
+
+  const hasActiveFilters =
+    search !== "" ||
+    Object.entries(filters).some(
+      ([key, value]) => value !== (defaultFilters ?? {})[key],
+    );
+
+  const resetFilters = useCallback(() => {
+    setSearch("");
+    setFilters(defaultFilters ?? {});
+    setPage(1);
+  }, [defaultFilters]);
+
+  const mutate = useCallback(() => {
+    return swrMutate(apiUrl);
+  }, [swrMutate, apiUrl]);
+
+  const value = useMemo<ServerPaginationContextValue>(
+    () => ({
+      data: activeResponse?.data,
+      isLoading: isLoading && !hasLoadedOnce.current,
+      isFetching: isValidating,
+      mutate,
+      setFilter,
+      getFilter,
+      hasActiveFilters,
+      resetFilters,
+      pagination: { pageIndex: page - 1, pageSize },
+      pageCount: totalPages,
+      totalRecords: activeResponse?.total_records,
+      onPaginationChange,
+      manualPagination: true,
+      serverSidePagination: true,
+      manualFiltering: true,
+      keepStateInLocalStorage: false,
+      globalFilter: search,
+      onGlobalFilterChange,
+      onFilterReset: resetFilters,
+      hasServerSideFilters: hasActiveFilters,
+    }),
+    [
+      activeResponse?.data,
+      activeResponse?.total_records,
+      isLoading,
+      isValidating,
+      mutate,
+      setFilter,
+      getFilter,
+      hasActiveFilters,
+      resetFilters,
+      page,
+      pageSize,
+      totalPages,
+      onPaginationChange,
+      search,
+      onGlobalFilterChange,
+    ],
+  );
+
+  return (
+    <ServerPaginationContext.Provider value={value}>
+      {children}
+    </ServerPaginationContext.Provider>
+  );
+}
+
+export function useServerPagination<T>() {
+  const context = useContext(ServerPaginationContext);
+  if (!context) {
+    throw new Error(
+      "useServerPagination must be used within a ServerPaginationProvider",
+    );
+  }
+  return context as ServerPaginationContextValue<T>;
+}
diff --git a/src/hooks/useUrlTab.ts b/src/hooks/useUrlTab.ts
new file mode 100644
index 000000000..a02ea3ce8
--- /dev/null
+++ b/src/hooks/useUrlTab.ts
@@ -0,0 +1,27 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo } from "react";
+
+export default function useUrlTab(
+  validTabs: string[],
+  defaultTab: string,
+): [string, (value: string) => void] {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const tab = useMemo(() => {
+    const tabParam = searchParams.get("tab");
+    if (tabParam && validTabs.includes(tabParam)) return tabParam;
+    return defaultTab;
+  }, [searchParams, validTabs, defaultTab]);
+
+  const setTab = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("tab", value);
+      router.replace(`?${params.toString()}`, { scroll: false });
+    },
+    [searchParams, router],
+  );
+
+  return [tab, setTab];
+}
diff --git a/src/interfaces/Network.ts b/src/interfaces/Network.ts
index a7dc79076..0307a983f 100644
--- a/src/interfaces/Network.ts
+++ b/src/interfaces/Network.ts
@@ -17,6 +17,7 @@ export interface NetworkRouter {
   metric: number;
   masquerade: boolean;
   enabled: boolean;
+  search?: string;
 }
 
 export interface NetworkResource {
diff --git a/src/interfaces/Permission.ts b/src/interfaces/Permission.ts
index ddae72db4..4eb77d2d4 100644
--- a/src/interfaces/Permission.ts
+++ b/src/interfaces/Permission.ts
@@ -33,6 +33,8 @@ export interface Permissions {
 
     proxy: Permission;
     proxy_configuration: Permission;
+
+    services: Permission;
   };
 }
 
diff --git a/src/interfaces/ReverseProxy.ts b/src/interfaces/ReverseProxy.ts
new file mode 100644
index 000000000..8fee3ccf9
--- /dev/null
+++ b/src/interfaces/ReverseProxy.ts
@@ -0,0 +1,116 @@
+export interface ReverseProxy {
+  id?: string;
+  name: string;
+  domain: string;
+  proxy_cluster?: string;
+  targets: ReverseProxyTarget[];
+  enabled: boolean;
+  pass_host_header?: boolean;
+  rewrite_redirects?: boolean;
+  auth?: ReverseProxyAuth;
+  meta?: ReverseProxyMeta;
+}
+
+export interface ReverseProxyMeta {
+  created_at: Date;
+  status: ReverseProxyStatus;
+  certificate_issued_at?: Date;
+}
+
+export enum ReverseProxyStatus {
+  PENDING = "pending",
+  ACTIVE = "active",
+  TUNNEL_NOT_CREATED = "tunnel_not_created",
+  CERTIFICATE_PENDING = "certificate_pending",
+  CERTIFICATED_FAILED = "certificate_failed",
+  ERROR = "error",
+}
+
+export interface ReverseProxyTarget {
+  target_id?: string;
+  target_type: ReversProxyTargetType;
+  path?: string;
+  protocol: ReverseProxyTargetProtocol;
+  host?: string;
+  port: number;
+  enabled: boolean;
+  access_local?: boolean;
+  // Frontend
+  destination?: string;
+}
+
+export interface ReverseProxyAuth {
+  password_auth?: {
+    enabled: boolean;
+    password: string;
+  };
+  pin_auth?: {
+    enabled: boolean;
+    pin: string;
+  };
+  bearer_auth?: {
+    enabled: boolean;
+    distribution_groups: string[];
+  };
+  link_auth?: {
+    enabled: boolean;
+  };
+}
+
+export interface ReverseProxyDomain {
+  id: string;
+  domain: string;
+  validated: boolean;
+  type: ReverseProxyDomainType;
+  target_cluster?: string;
+}
+
+export enum ReverseProxyDomainType {
+  FREE = "free",
+  CUSTOM = "custom",
+}
+
+export enum ReversProxyTargetType {
+  PEER = "peer",
+  HOST = "host",
+  DOMAIN = "domain",
+  SUBNET = "subnet",
+}
+
+export enum ReverseProxyTargetProtocol {
+  HTTP = "http",
+  HTTPS = "https",
+}
+
+export interface ReverseProxyEvent {
+  id: string;
+  service_id: string;
+  timestamp: string;
+  method: string;
+  host: string;
+  path: string;
+  duration_ms: number;
+  status_code: number;
+  source_ip: string;
+  reason?: string;
+  user_id?: string;
+  auth_method_used?: string;
+  country_code?: string;
+  city_name?: string;
+}
+
+export interface ReverseProxyFlatTarget extends ReverseProxyTarget {
+  proxy: ReverseProxy;
+}
+
+export const REVERSE_PROXY_DOCS_LINK =
+  "https://docs.netbird.io/how-to/reverse-proxy";
+
+export const REVERSE_PROXY_CLUSTERS_DOCS_LINK =
+  "https://docs.netbird.io/how-to/reverse-proxy";
+
+export const REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK =
+  "https://docs.netbird.io/how-to/reverse-proxy";
+
+export const REVERSE_PROXY_DOMAIN_VERIFICATION_LINK =
+  "https://docs.netbird.io/how-to/reverse-proxy";
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index ed3f7ee19..bd421e011 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -9,7 +9,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { Viewport } from "next";
 import localFont from "next/font/local";
 import React, { Suspense } from "react";
-import { Toaster } from "react-hot-toast";
+import { Toaster } from "sonner";
 import OIDCProvider from "@/auth/OIDCProvider";
 import FullScreenLoading from "@/components/ui/FullScreenLoading";
 import AnalyticsProvider, {
@@ -59,10 +59,13 @@ export default function AppLayout({
               </GlobalThemeProvider>
             </DialogProvider>
             <Toaster
-              position={"top-center"}
-              toastOptions={{
-                duration: 3000,
-              }}
+              position="top-center"
+              duration={3000}
+              toastOptions={{ unstyled: true }}
+              style={{ "--width": "28rem" } as React.CSSProperties}
+              gap={0}
+              visibleToasts={5}
+              offset="12px"
             />
             <NavigationEvents />
             <DisableDarkReader />
diff --git a/src/layouts/Navigation.tsx b/src/layouts/Navigation.tsx
index 8c51178dd..4f14c6952 100644
--- a/src/layouts/Navigation.tsx
+++ b/src/layouts/Navigation.tsx
@@ -1,11 +1,8 @@
 "use client";
 
 import { ScrollArea } from "@components/ScrollArea";
-import { SmallBadge } from "@components/ui/SmallBadge";
 import { cn } from "@utils/helpers";
-import * as React from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
-import ActivityIcon from "@/assets/icons/ActivityIcon";
 import ControlCenterIcon from "@/assets/icons/ControlCenterIcon";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import DocsIcon from "@/assets/icons/DocsIcon";
@@ -20,6 +17,10 @@ import { useApplicationContext } from "@/contexts/ApplicationProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { headerHeight } from "@/layouts/Header";
 import { NetworkNavigation } from "@/modules/networks/misc/NetworkNavigation";
+import { SmallBadge } from "@components/ui/SmallBadge";
+import * as React from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import ActivityIcon from "@/assets/icons/ActivityIcon";
 
 type Props = {
   fullWidth?: boolean;
@@ -131,6 +132,41 @@ export default function Navigation({
 
                 <NetworkNavigation />
 
+                <SidebarItem
+                  icon={<ReverseProxyIcon size={16} />}
+                  labelClassName={"pr-0"}
+                  label={
+                    <div className={"flex items-center gap-2"}>
+                      Reverse Proxy
+                      <SmallBadge
+                        text={"Beta"}
+                        variant={"sky"}
+                        className={"text-[8px] leading-none py-[3px] px-[5px]"}
+                        textClassName={"top-0"}
+                      />
+                    </div>
+                  }
+                  href={"/reverse-proxy"}
+                  collapsible
+                  exactPathMatch={false}
+                  visible={permission?.services?.read}
+                >
+                  <SidebarItem
+                    label="Services"
+                    isChild
+                    href={"/reverse-proxy/services"}
+                    exactPathMatch={true}
+                    visible={permission?.services?.read}
+                  />
+                  <SidebarItem
+                    label="Custom Domains"
+                    isChild
+                    href={"/reverse-proxy/custom-domains"}
+                    exactPathMatch={true}
+                    visible={permission?.services?.read}
+                  />
+                </SidebarItem>
+
                 <SidebarItem
                   icon={<DNSIcon />}
                   label="DNS"
@@ -176,13 +212,7 @@ export default function Navigation({
                     visible={permission.users.read}
                   />
                 </SidebarItem>
-                <SidebarItem
-                  icon={<ActivityIcon />}
-                  label="Activity"
-                  href={"/events/audit"}
-                  exactPathMatch={true}
-                  visible={permission.events.read}
-                />
+                <ActivityNavigationItem />
               </SidebarItemGroup>
 
               <SidebarItemGroup>
@@ -225,3 +255,31 @@ export function SidebarItemGroup({ children }: SidebarItemGroupProps) {
     </div>
   );
 }
+
+const ActivityNavigationItem = () => {
+  const { permission } = usePermissions();
+
+  return (
+    <SidebarItem
+      icon={<ActivityIcon />}
+      label="Activity"
+      collapsible
+      visible={permission.events.read}
+    >
+      <SidebarItem
+        label="Audit Events"
+        href={"/events/audit"}
+        isChild
+        exactPathMatch={true}
+        visible={permission.events.read}
+      />
+      <SidebarItem
+        label="Proxy Events"
+        isChild
+        href={"/events/proxy"}
+        exactPathMatch={true}
+        visible={permission.events.read}
+      />
+    </SidebarItem>
+  );
+};
diff --git a/src/modules/activity/ActivityDescription.tsx b/src/modules/activity/ActivityDescription.tsx
index 6d81f08bb..5d7fcfc8c 100644
--- a/src/modules/activity/ActivityDescription.tsx
+++ b/src/modules/activity/ActivityDescription.tsx
@@ -742,10 +742,16 @@ export default function ActivityDescription({ event }: Props) {
    */
 
   if (event.activity_code == "peer.job.create")
-    return (<div className={"inline"}>
-      Remote job <Value>{m.job_type}</Value> created for peer <Value>{m.for_peer_name}</Value>
-    </div>
-    )
+    return (
+      <div className={"inline"}>
+        Remote job <Value>{m.job_type}</Value> created for peer{" "}
+        <Value>{m.for_peer_name}</Value>
+      </div>
+    );
+
+  /**
+   * Flow Settings
+   */
 
   if (event.activity_code == "account.settings.extra.flow.group.remove")
     return (
diff --git a/src/modules/control-center/NetworkRoutingPeerCount.tsx b/src/modules/control-center/NetworkRoutingPeerCount.tsx
index eb0815626..df8078ac2 100644
--- a/src/modules/control-center/NetworkRoutingPeerCount.tsx
+++ b/src/modules/control-center/NetworkRoutingPeerCount.tsx
@@ -23,7 +23,7 @@ export const NetworkRoutingPeerCount = ({ network }: Props) => {
   }, [network, routerCount]);
 
   const openNetworkPage = () => {
-    router.push(`/network?id=${network.id}#routing-peers`);
+    router.push(`/network?id=${network.id}&tab=routing-peers`);
   };
 
   return (
diff --git a/src/modules/control-center/nodes/NetworkNode.tsx b/src/modules/control-center/nodes/NetworkNode.tsx
index 72aa0b263..16268dc66 100644
--- a/src/modules/control-center/nodes/NetworkNode.tsx
+++ b/src/modules/control-center/nodes/NetworkNode.tsx
@@ -5,7 +5,7 @@ import { NetworkIcon } from "lucide-react";
 import * as React from "react";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import { Network, NetworkResource } from "@/interfaces/Network";
-import { DeviceCard } from "@/modules/control-center/nodes/DeviceCard";
+import { DeviceCard } from "@components/DeviceCard";
 
 type NetworkNodeType = {
   network: Network;
diff --git a/src/modules/control-center/nodes/PeerNode.tsx b/src/modules/control-center/nodes/PeerNode.tsx
index 1d21e1df1..8e340d34a 100644
--- a/src/modules/control-center/nodes/PeerNode.tsx
+++ b/src/modules/control-center/nodes/PeerNode.tsx
@@ -2,7 +2,7 @@ import { cn } from "@utils/helpers";
 import { Handle, type Node, Position } from "@xyflow/react";
 import * as React from "react";
 import type { Peer } from "@/interfaces/Peer";
-import { DeviceCard } from "@/modules/control-center/nodes/DeviceCard";
+import { DeviceCard } from "@components/DeviceCard";
 import { useAnySourceGroupEnabled } from "@/modules/control-center/utils/helpers";
 
 type PeerNodeProps = Node<
diff --git a/src/modules/control-center/nodes/ResourceNode.tsx b/src/modules/control-center/nodes/ResourceNode.tsx
index e88a1ba8b..bdacdc930 100644
--- a/src/modules/control-center/nodes/ResourceNode.tsx
+++ b/src/modules/control-center/nodes/ResourceNode.tsx
@@ -3,7 +3,7 @@ import { Handle, type Node, Position } from "@xyflow/react";
 import * as React from "react";
 import { NetworkResource } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
-import { DeviceCard } from "@/modules/control-center/nodes/DeviceCard";
+import { DeviceCard } from "@components/DeviceCard";
 import { useAnySourceGroupEnabled } from "@/modules/control-center/utils/helpers";
 
 type ResourceNode = Node<
diff --git a/src/modules/control-center/nodes/SelectPeerNode.tsx b/src/modules/control-center/nodes/SelectPeerNode.tsx
index 086397c0f..c5bd5b7af 100644
--- a/src/modules/control-center/nodes/SelectPeerNode.tsx
+++ b/src/modules/control-center/nodes/SelectPeerNode.tsx
@@ -10,7 +10,7 @@ import { ChevronsUpDown } from "lucide-react";
 import * as React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
-import { DeviceCard } from "@/modules/control-center/nodes/DeviceCard";
+import { DeviceCard } from "@components/DeviceCard";
 import { OSLogo } from "@/modules/peers/PeerOSCell";
 
 type PeerNodeProps = Node<
diff --git a/src/modules/networks/NetworkProvider.tsx b/src/modules/networks/NetworkProvider.tsx
index 05b6213aa..be11221a3 100644
--- a/src/modules/networks/NetworkProvider.tsx
+++ b/src/modules/networks/NetworkProvider.tsx
@@ -12,7 +12,7 @@ import NetworkModal from "@/modules/networks/NetworkModal";
 import NetworkResourceModal from "@/modules/networks/resources/NetworkResourceModal";
 import { ResourceGroupModal } from "@/modules/networks/resources/ResourceGroupModal";
 import NetworkRoutingPeerModal from "@/modules/networks/routing-peers/NetworkRoutingPeerModal";
-import { Policy } from "@/interfaces/Policy";
+import { Policy, PolicyRuleResource } from "@/interfaces/Policy";
 import PoliciesProvider from "@/contexts/PoliciesProvider";
 
 type Props = {
@@ -59,6 +59,7 @@ export const NetworkProvider = ({
     name?: string;
     description?: string;
     destinationGroups?: Group[] | string[];
+    destinationResource?: PolicyRuleResource;
   }>();
   const [currentPolicy, setCurrentPolicy] = useState<Policy>();
 
@@ -103,8 +104,15 @@ export const NetworkProvider = ({
   };
 
   const openPolicyModal = (network?: Network, resource?: NetworkResource) => {
+    const hasResourceGroups = (resource?.groups?.length || 0) > 0;
     setPolicyDefaultSettings({
-      destinationGroups: resource?.groups,
+      destinationGroups: hasResourceGroups ? resource?.groups : undefined,
+      destinationResource: hasResourceGroups
+        ? undefined
+        : ({
+            id: resource?.id,
+            type: resource?.type,
+          } as PolicyRuleResource),
       name:
         network && !resource
           ? `${network?.name} Policy`
@@ -178,6 +186,7 @@ export const NetworkProvider = ({
         () => {
           onResourceDelete?.();
           mutate(`/networks/${network.id}/resources`);
+          mutate(`/networks/${network.id}`);
           mutate("/groups");
         },
       ),
@@ -289,6 +298,9 @@ export const NetworkProvider = ({
           <AccessControlModalContent
             key={policyModal ? "1" : "0"}
             initialDestinationGroups={policyDefaultSettings?.destinationGroups}
+            initialDestinationResource={
+              policyDefaultSettings?.destinationResource
+            }
             initialName={policyDefaultSettings?.name}
             initialDescription={policyDefaultSettings?.description}
             policy={currentPolicy}
diff --git a/src/modules/networks/misc/NetworkInformationSquare.tsx b/src/modules/networks/misc/NetworkInformationSquare.tsx
index 6282f119a..f1ec17c8f 100644
--- a/src/modules/networks/misc/NetworkInformationSquare.tsx
+++ b/src/modules/networks/misc/NetworkInformationSquare.tsx
@@ -22,7 +22,7 @@ export const NetworkInformationSquare = ({
       className={cn(
         "flex w-full items-center max-w-[450px] 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-14 relative"
+          ? "hover:text-neutral-100 hover:bg-nb-gray-900/60 cursor-pointer py-2 pl-3 pr-14 relative"
           : "cursor-default",
       )}
       onClick={onClick}
diff --git a/src/modules/networks/resources/NetworkResourceModal.tsx b/src/modules/networks/resources/NetworkResourceModal.tsx
index 41e505668..6f7a6efcd 100644
--- a/src/modules/networks/resources/NetworkResourceModal.tsx
+++ b/src/modules/networks/resources/NetworkResourceModal.tsx
@@ -17,7 +17,6 @@ import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
-import { Textarea } from "@components/Textarea";
 import { useApiCall } from "@utils/api";
 import {
   ExternalLinkIcon,
@@ -100,7 +99,7 @@ export function ResourceModalContent({
         name,
         description,
         address,
-        groups: savedGroups.map((g) => g.id),
+        groups: savedGroups ? savedGroups.map((g) => g.id) : undefined,
         enabled,
       }).then((r) => {
         onCreated?.(r);
@@ -118,7 +117,7 @@ export function ResourceModalContent({
         name,
         description,
         address,
-        groups: savedGroups.map((g) => g.id),
+        groups: savedGroups ? savedGroups.map((g) => g.id) : undefined,
         enabled,
       }).then((r) => {
         onUpdated?.(r);
@@ -128,7 +127,7 @@ export function ResourceModalContent({
 
   // TODO:  Address validation is missing for proper handling of submit button
   const canCreate = useMemo(() => {
-    return name.length > 0 && address.length > 0 && groups.length > 0;
+    return name.length > 0 && address.length > 0;
   }, [name, address, groups]);
 
   return (
@@ -162,10 +161,9 @@ export function ResourceModalContent({
           <HelpText>
             Write a short description to add more context to this resource.
           </HelpText>
-          <Textarea
+          <Input
             placeholder={"e.g., Production, Development"}
             value={description}
-            rows={1}
             onChange={(e) => setDescription(e.target.value)}
           />
         </div>
@@ -173,14 +171,14 @@ export function ResourceModalContent({
         <ResourceSingleAddressInput value={address} onChange={setAddress} />
 
         <div>
-          <Label>Destination Groups</Label>
+          <Label>Destination Groups (optional)</Label>
           <HelpText>
             Add this resource to groups and use them as destinations when
             creating policies
           </HelpText>
           <PeerGroupSelector onChange={setGroups} values={groups} />
         </div>
-        <div className={"mt-3"}>
+        <div className={"mt-2 mb-2"}>
           <FancyToggleSwitch
             value={enabled}
             onChange={setEnabled}
diff --git a/src/modules/networks/resources/ResourceExposeServiceCell.tsx b/src/modules/networks/resources/ResourceExposeServiceCell.tsx
new file mode 100644
index 000000000..e3a33940f
--- /dev/null
+++ b/src/modules/networks/resources/ResourceExposeServiceCell.tsx
@@ -0,0 +1,74 @@
+import Button from "@components/Button";
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { NetworkResource } from "@/interfaces/Network";
+import { isResourceTargetType } from "@/contexts/ReverseProxiesProvider";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import Badge from "@components/Badge";
+import { CirclePlusIcon } from "lucide-react";
+
+type Props = {
+  resource: NetworkResource;
+};
+
+export const ResourceExposeServiceCell = ({ resource }: Props) => {
+  const { permission } = usePermissions();
+  const { openModal, reverseProxies } = useReverseProxies();
+  const { network } = useNetworksContext();
+  const router = useRouter();
+
+  const servicesCount = useMemo(() => {
+    if (!reverseProxies) return 0;
+    return reverseProxies.filter((proxy) =>
+      proxy.targets.some(
+        (target) =>
+          isResourceTargetType(target.target_type) &&
+          target.target_id === resource.id,
+      ),
+    ).length;
+  }, [reverseProxies, resource.id]);
+
+  return (
+    <div className={"flex items-center gap-3"}>
+      {servicesCount > 0 && (
+        <Badge
+          variant={"gray"}
+          useHover={false}
+          className={"select-none hover:bg-nb-gray-910 cursor-pointer"}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            router.push(`/network?id=${network?.id}&tab=services&target=${resource.id}`);
+          }}
+        >
+          <ReverseProxyIcon size={14} className={"fill-green-500"} />
+          <div>
+            <span className={"font-medium text-xs"}>{servicesCount}</span>
+          </div>
+        </Badge>
+      )}
+      <Button
+        variant={"secondary"}
+        size={"xs"}
+        className={"!px-3"}
+        onClick={(e) => {
+          e.stopPropagation();
+          openModal({
+            initialResource: resource,
+            initialNetwork: network,
+            onSuccess: () => {
+              router.push(`/network?id=${network?.id}&tab=services`);
+            },
+          });
+        }}
+        disabled={!permission.routes?.create}
+      >
+        <CirclePlusIcon size={12} />
+        Expose Service
+      </Button>
+    </div>
+  );
+};
diff --git a/src/modules/networks/resources/ResourceGroupModal.tsx b/src/modules/networks/resources/ResourceGroupModal.tsx
index 2c44b3b8b..3ef805712 100644
--- a/src/modules/networks/resources/ResourceGroupModal.tsx
+++ b/src/modules/networks/resources/ResourceGroupModal.tsx
@@ -12,7 +12,6 @@ import Separator from "@components/Separator";
 import { useApiCall } from "@utils/api";
 import { FolderGit2 } from "lucide-react";
 import * as React from "react";
-import { useMemo } from "react";
 import { Network, NetworkResource } from "@/interfaces/Network";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 
@@ -78,10 +77,6 @@ const ResourceGroupModalContent = ({
     });
   };
 
-  const canSave = useMemo(() => {
-    return groups.length > 0;
-  }, [groups]);
-
   return (
     <ModalContent maxWidthClass={"max-w-xl"}>
       <ModalHeader
@@ -107,11 +102,7 @@ const ResourceGroupModalContent = ({
             <Button variant={"secondary"}>Cancel</Button>
           </ModalClose>
 
-          <Button
-            variant={"primary"}
-            onClick={updateResource}
-            disabled={!canSave}
-          >
+          <Button variant={"primary"} onClick={updateResource}>
             Save Groups
           </Button>
         </div>
diff --git a/src/modules/networks/resources/ResourcePolicyCell.tsx b/src/modules/networks/resources/ResourcePolicyCell.tsx
index 4144abd7f..4c32adb1e 100644
--- a/src/modules/networks/resources/ResourcePolicyCell.tsx
+++ b/src/modules/networks/resources/ResourcePolicyCell.tsx
@@ -139,7 +139,6 @@ export const ResourcePolicyCell = ({ resource }: Props) => {
         <Button
           size={"xs"}
           variant={"secondary"}
-          className={"min-w-[100px]"}
           disabled={!permission.networks.update}
           onClick={() => openPolicyModal(network, resource)}
         >
diff --git a/src/modules/networks/resources/ResourcesSection.tsx b/src/modules/networks/resources/ResourcesSection.tsx
deleted file mode 100644
index bb87aef93..000000000
--- a/src/modules/networks/resources/ResourcesSection.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Paragraph from "@components/Paragraph";
-import SkeletonTable, {
-  SkeletonTableHeader,
-} from "@components/skeletons/SkeletonTable";
-import { usePortalElement } from "@hooks/usePortalElement";
-import useFetchApi from "@utils/api";
-import * as React from "react";
-import { Suspense } from "react";
-import { Network, NetworkResource } from "@/interfaces/Network";
-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>();
-
-  return (
-    <div className={"py-7 px-8"}>
-      <div className={"max-w-6xl"}>
-        <div className={"flex justify-between items-center mb-6"}>
-          <div>
-            <h2 ref={headingRef}>Resources</h2>
-            <Paragraph>Add and manage resources for this network.</Paragraph>
-          </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/ResourcesTabContent.tsx b/src/modules/networks/resources/ResourcesTabContent.tsx
new file mode 100644
index 000000000..c0e48baf3
--- /dev/null
+++ b/src/modules/networks/resources/ResourcesTabContent.tsx
@@ -0,0 +1,55 @@
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import * as React from "react";
+import { Suspense } from "react";
+import { NetworkResource } from "@/interfaces/Network";
+import ResourcesTable from "@/modules/networks/resources/ResourcesTable";
+import Paragraph from "@components/Paragraph";
+import InlineLink from "@components/InlineLink";
+import { ExternalLinkIcon } from "lucide-react";
+
+type ResourcesSectionProps = {
+  data?: NetworkResource[];
+  isLoading: boolean;
+};
+
+export const ResourcesTabContent = ({
+  data,
+  isLoading,
+}: ResourcesSectionProps) => {
+  return (
+    <div className={"px-8"}>
+      <div className={"flex justify-between items-center mb-5"}>
+        <div>
+          <Paragraph>
+            Add resources to this network to control what peers can access.
+          </Paragraph>
+          <Paragraph>
+            Learn more about
+            <InlineLink
+              href={"https://docs.netbird.io/how-to/networks#resources"}
+              target={"_blank"}
+            >
+              Resources
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+            in our documentation.
+          </Paragraph>
+        </div>
+      </div>
+      <Suspense
+        fallback={
+          <div>
+            <SkeletonTableHeader className={"!p-0"} />
+            <div className={"mt-8 w-full"}>
+              <SkeletonTable withHeader={false} />
+            </div>
+          </div>
+        }
+      >
+        <ResourcesTable isLoading={isLoading} resources={data} />
+      </Suspense>
+    </div>
+  );
+};
diff --git a/src/modules/networks/resources/ResourcesTable.tsx b/src/modules/networks/resources/ResourcesTable.tsx
index fc9ceb796..f3798ac41 100644
--- a/src/modules/networks/resources/ResourcesTable.tsx
+++ b/src/modules/networks/resources/ResourcesTable.tsx
@@ -16,6 +16,7 @@ import { Group } from "@/interfaces/Group";
 import { NetworkResource } from "@/interfaces/Network";
 import { useNetworksContext } from "@/modules/networks/NetworkProvider";
 import { ResourceActionCell } from "@/modules/networks/resources/ResourceActionCell";
+import { ResourceExposeServiceCell } from "@/modules/networks/resources/ResourceExposeServiceCell";
 import ResourceAddressCell from "@/modules/networks/resources/ResourceAddressCell";
 import { ResourceEnabledCell } from "@/modules/networks/resources/ResourceEnabledCell";
 import { ResourceGroupCell } from "@/modules/networks/resources/ResourceGroupCell";
@@ -72,7 +73,7 @@ const NetworkResourceColumns: ColumnDef<NetworkResource>[] = [
   {
     id: "groups",
     accessorFn: (resource) => {
-      let groups = resource?.groups as Group[];
+      let groups = (resource?.groups ?? []) as Group[];
       return groups.map((group) => group.name).join(", ");
     },
     header: ({ column }) => {
@@ -92,6 +93,14 @@ const NetworkResourceColumns: ColumnDef<NetworkResource>[] = [
       return <ResourcePolicyCell resource={row.original} />;
     },
   },
+  {
+    id: "expose_service",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => {
+      return <ResourceExposeServiceCell resource={row.original} />;
+    },
+  },
   {
     id: "actions",
     accessorKey: "id",
@@ -116,6 +125,13 @@ export default function ResourcesTable({
   const { openResourceModal, network } = useNetworksContext();
   const router = useRouter();
 
+  const removeResourceParam = React.useCallback(() => {
+    if (!resourceId) return;
+    const newParams = new URLSearchParams(params.toString());
+    newParams.delete("resource");
+    router.replace(`?${newParams.toString()}`, { scroll: false });
+  }, [resourceId, params, router]);
+
   return (
     <DataTable
       wrapperComponent={Card}
@@ -134,6 +150,7 @@ export default function ResourcesTable({
         resourceId ? [{ id: "id", value: resourceId }] : undefined
       }
       initialSearch={resourceId}
+      onFilterReset={removeResourceParam}
       data={resources}
       searchPlaceholder={"Search by name, address or group..."}
       isLoading={isLoading}
@@ -150,7 +167,7 @@ export default function ResourcesTable({
               ? "Assign this group to your resources inside your networks to see them listed here."
               : "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} />}
+          icon={<Layers3Icon size={20} className={"text-nb-gray-400"} />}
         >
           {isGroupPage && permission?.networks?.create && (
             <>
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
deleted file mode 100644
index 06aaf3dd3..000000000
--- a/src/modules/networks/routing-peers/NetworkRoutingPeersSection.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-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 { usePermissions } from "@/contexts/PermissionsProvider";
-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 { permission } = usePermissions();
-  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)}
-                disabled={!permission.networks.update}
-              >
-                <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/NetworkRoutingPeersTabContent.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
new file mode 100644
index 000000000..9cda0a2c2
--- /dev/null
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
@@ -0,0 +1,77 @@
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import * as React from "react";
+import { Suspense, useMemo } from "react";
+import { NetworkRouter } from "@/interfaces/Network";
+import NetworkRoutingPeersTable from "@/modules/networks/routing-peers/NetworkRoutingPeersTable";
+import useFetchApi from "@utils/api";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Peer } from "@/interfaces/Peer";
+import { useUsers } from "@/contexts/UsersProvider";
+import Paragraph from "@components/Paragraph";
+import InlineLink from "@components/InlineLink";
+import { ExternalLinkIcon } from "lucide-react";
+
+export const NetworkRoutingPeersTabContent = ({
+  routers,
+  isLoading,
+}: {
+  routers?: NetworkRouter[];
+  isLoading: boolean;
+}) => {
+  const { groups } = useGroups();
+  const { users } = useUsers();
+  const { data: peers } = useFetchApi<Peer[]>(`/peers`);
+
+  const data = useMemo(() => {
+    return routers?.map((router) => {
+      const peer = peers?.find((peer) => peer.id === router.peer);
+      const user = users?.find((user) => user.id === router.peer);
+      const group = groups?.find(
+        (group) => group.id === router?.peer_groups?.[0],
+      );
+
+      return {
+        ...router,
+        search: `${peer?.name} ${peer?.ip} ${user?.name} ${user?.id} ${group?.name}`,
+      };
+    });
+  }, [users, peers, routers, groups]);
+
+  return (
+    <div className={"px-8"} id={"routing-peers"}>
+      <div className={"flex justify-between items-center mb-5"}>
+        <div>
+          <Paragraph>
+            Add routing peers to this network to access resources inside this
+            network.
+          </Paragraph>
+          <Paragraph>
+            Learn more about
+            <InlineLink
+              href={"https://docs.netbird.io/manage/networks#routing-peers"}
+              target={"_blank"}
+            >
+              Routing Peers
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+            in our documentation.
+          </Paragraph>
+        </div>
+      </div>
+      <Suspense
+        fallback={
+          <div>
+            <SkeletonTableHeader className={"!p-0"} />
+            <div className={"mt-8 w-full"}>
+              <SkeletonTable withHeader={false} />
+            </div>
+          </div>
+        }
+      >
+        <NetworkRoutingPeersTable isLoading={isLoading} routers={data} />
+      </Suspense>
+    </div>
+  );
+};
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
index 6045bc5ce..878ff1e4e 100644
--- a/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
@@ -68,6 +68,12 @@ const NetworkRouterColumns: ColumnDef<NetworkRouter>[] = [
       return <RoutingPeersActionCell router={row.original} />;
     },
   },
+  {
+    id: "search",
+    accessorKey: "search",
+    header: "",
+    filterFn: "fuzzy",
+  },
 ];
 
 export default function NetworkRoutingPeersTable({
@@ -93,14 +99,14 @@ export default function NetworkRoutingPeersTable({
       sorting={sorting}
       setSorting={setSorting}
       minimal={true}
-      showSearchAndFilters={false}
+      showSearchAndFilters={true}
       inset={false}
       tableClassName={"mt-0"}
       text={"Routing Peers"}
       columns={NetworkRouterColumns}
       keepStateInLocalStorage={false}
       data={routers}
-      searchPlaceholder={"Search by name..."}
+      searchPlaceholder={"Search by peer name, group name..."}
       isLoading={isLoading}
       getStartedCard={
         <NoResults
@@ -109,10 +115,10 @@ export default function NetworkRoutingPeersTable({
           description={
             "Add routing peers to this network to access resources inside this network."
           }
-          icon={<PeerIcon size={20} className={"fill-nb-gray-300"} />}
+          icon={<PeerIcon size={18} className={"fill-nb-gray-400"} />}
         />
       }
-      columnVisibility={{}}
+      columnVisibility={{ search: false }}
       paginationPaddingClassName={"px-0 pt-8"}
       rightSide={() => (
         <Button
diff --git a/src/modules/networks/table/NetworkRoutingPeerCell.tsx b/src/modules/networks/table/NetworkRoutingPeerCell.tsx
index ef87fb299..b02153f47 100644
--- a/src/modules/networks/table/NetworkRoutingPeerCell.tsx
+++ b/src/modules/networks/table/NetworkRoutingPeerCell.tsx
@@ -77,7 +77,7 @@ export default function NetworkRoutingPeerCell({ network }: Props) {
               "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`)
+              router.push(`/network?id=${network.id}&tab=routing-peers`)
             }
             useHover={true}
           >
diff --git a/src/modules/onboarding/OnboardingDevices.tsx b/src/modules/onboarding/OnboardingDevices.tsx
index 3cf1aa585..de8483dc1 100644
--- a/src/modules/onboarding/OnboardingDevices.tsx
+++ b/src/modules/onboarding/OnboardingDevices.tsx
@@ -1,20 +1,10 @@
-import TruncatedText from "@components/ui/TruncatedText";
-import { getOperatingSystem } from "@hooks/useOperatingSystem";
+import { DeviceCard } from "@components/DeviceCard";
 import { cn } from "@utils/helpers";
-import {
-  GlobeIcon,
-  NetworkIcon,
-  ShieldCheckIcon,
-  ShieldXIcon,
-  WorkflowIcon,
-} from "lucide-react";
+import { ShieldCheckIcon, ShieldXIcon } from "lucide-react";
 import * as React from "react";
-import RoundedFlag from "@/assets/countries/RoundedFlag";
 import { NetworkResource } from "@/interfaces/Network";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import { Intent } from "@/modules/onboarding/Onboarding";
-import { OSLogo } from "@/modules/peers/PeerOSCell";
 
 type Props = {
   intent?: Intent;
@@ -169,101 +159,6 @@ export const WaitingForDevice = ({
   );
 };
 
-type DeviceCardProps = {
-  device?: Peer;
-  resource?: NetworkResource;
-};
-
-export const DeviceCard = ({ device, resource }: DeviceCardProps) => {
-  if (!device && !resource) return;
-  return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center gap-2.5 text-nb-gray-300 text-left py-1 pl-3 pr-4 rounded-md group/machine my-0 w-[200px]",
-      )}
-    >
-      <div
-        className={cn(
-          "flex items-center justify-center rounded-md h-9 w-9 shrink-0 bg-nb-gray-900 transition-all",
-          "group-hover:bg-nb-gray-800 relative",
-        )}
-      >
-        {device && <PeerOSIcon os={device.os} />}
-        {resource?.type && <ResourceIcon type={resource.type} />}
-
-        {device?.country_code && (
-          <div className={"absolute -bottom-[4px] -right-[4px]"}>
-            <div
-              className={cn(
-                "flex items-center justify-center rounded-full border-[3px] shrink-0",
-                "border-nb-gray-940",
-              )}
-            >
-              <RoundedFlag country={device?.country_code} size={10} />
-            </div>
-          </div>
-        )}
-      </div>
-      <div className={"flex flex-col gap-0 justify-center mt-2 leading-tight"}>
-        <span
-          className={
-            "mb-1.5 font-normal text-[0.85rem] text-nb-gray-100 flex items-center gap-2"
-          }
-        >
-          <TruncatedText
-            text={device?.name || resource?.name || "Unknown"}
-            maxWidth={"150px"}
-            hideTooltip={true}
-          />
-        </span>
-        <span
-          className={
-            "text-sm font-normal text-nb-gray-400 -top-[0.3rem] relative"
-          }
-        >
-          {device?.ip || resource?.address}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const PeerOSIcon = ({ os }: { os: string }) => {
-  const osType = getOperatingSystem(os);
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center grayscale brightness-[100%] contrast-[40%]",
-        "w-4 h-4 shrink-0",
-        osType === OperatingSystem.WINDOWS && "p-[2.5px]",
-        osType === OperatingSystem.APPLE && "p-[2.7px]",
-        osType === OperatingSystem.FREEBSD && "p-[1.5px]",
-      )}
-    >
-      <OSLogo os={os} />
-    </div>
-  );
-};
-
-const ResourceIcon = ({
-  type,
-  size = 15,
-}: {
-  type: "domain" | "host" | "subnet";
-  size?: number;
-}) => {
-  switch (type) {
-    case "domain":
-      return <GlobeIcon size={size} />;
-    case "subnet":
-      return <NetworkIcon size={size} />;
-    case "host":
-      return <WorkflowIcon size={size} />;
-    default:
-      return <WorkflowIcon size={size} />;
-  }
-};
-
 const Line = ({
   className,
   height = "100%",
diff --git a/src/modules/peer/AccessiblePeersSection.tsx b/src/modules/peer/AccessiblePeersSection.tsx
index db73633ef..fbecfa748 100644
--- a/src/modules/peer/AccessiblePeersSection.tsx
+++ b/src/modules/peer/AccessiblePeersSection.tsx
@@ -2,7 +2,6 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable, {
   SkeletonTableHeader,
 } from "@components/skeletons/SkeletonTable";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import * as React from "react";
 import { lazy, Suspense } from "react";
@@ -21,8 +20,6 @@ export const AccessiblePeersSection = ({ peerID }: Props) => {
     `/peers/${peerID}/accessible-peers`,
   );
   const { users } = useUsers();
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -34,10 +31,9 @@ export const AccessiblePeersSection = ({ peerID }: Props) => {
 
   return (
     <div className={"pb-10 px-8"}>
-      <div className={"max-w-6xl"}>
+      <div className={""}>
         <div className={"flex justify-between items-center mb-5"}>
           <div>
-            <h2 ref={headingRef}>Accessible Peers</h2>
             <Paragraph>
               This peer can connect to the following peers within the NetBird
               network.
@@ -59,7 +55,6 @@ export const AccessiblePeersSection = ({ peerID }: Props) => {
             peerID={peerID}
             isLoading={isLoading}
             peers={peersWithUser}
-            headingTarget={portalTarget}
           />
         </Suspense>
       </div>
diff --git a/src/modules/peer/PeerNetworkRoutesSection.tsx b/src/modules/peer/PeerNetworkRoutesSection.tsx
index 99329f650..582662107 100644
--- a/src/modules/peer/PeerNetworkRoutesSection.tsx
+++ b/src/modules/peer/PeerNetworkRoutesSection.tsx
@@ -1,6 +1,5 @@
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
-import { usePortalElement } from "@hooks/usePortalElement";
 import * as React from "react";
 import { lazy, Suspense } from "react";
 import type { Peer } from "@/interfaces/Peer";
@@ -8,6 +7,8 @@ import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
 import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
 import usePeerRoutes from "@/modules/peer/usePeerRoutes";
+import InlineLink from "@components/InlineLink";
+import { ExternalLinkIcon } from "lucide-react";
 
 const PeerRoutesTable = lazy(() => import("@/modules/peer/PeerRoutesTable"));
 
@@ -18,23 +19,36 @@ type Props = {
 export const PeerNetworkRoutesSection = ({ peer }: Props) => {
   const { peerRoutes, isLoading } = usePeerRoutes({ peer });
   const exitNodeInfo = useHasExitNodes(peer);
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
 
   return (
     <div className={"pb-10 px-8"}>
-      <div className={"max-w-6xl"}>
+      <div className={""}>
         <div className={"flex justify-between items-center mb-5"}>
           <div>
-            <h2 ref={headingRef}>Network Routes</h2>
             <Paragraph>
               Access other networks without installing NetBird on every
               resource.
             </Paragraph>
+            <Paragraph>
+              Learn more about
+              <InlineLink
+                href={
+                  "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+                }
+                target={"_blank"}
+              >
+                Network Routes
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+              in our documentation.
+            </Paragraph>
           </div>
           <div className={"inline-flex gap-4 justify-end"}>
             <div className={"gap-4 flex"}>
-              <AddExitNodeButton peer={peer} firstTime={!exitNodeInfo.hasExitNode} />
+              <AddExitNodeButton
+                peer={peer}
+                firstTime={!exitNodeInfo.hasExitNode}
+              />
               <AddRouteDropdownButton />
             </div>
           </div>
@@ -53,7 +67,6 @@ export const PeerNetworkRoutesSection = ({ peer }: Props) => {
             peer={peer}
             isLoading={isLoading}
             peerRoutes={peerRoutes}
-            headingTarget={portalTarget}
           />
         </Suspense>
       </div>
diff --git a/src/modules/peer/PeerRemoteJobsSection.tsx b/src/modules/peer/PeerRemoteJobsSection.tsx
index ac448c145..f7145f116 100644
--- a/src/modules/peer/PeerRemoteJobsSection.tsx
+++ b/src/modules/peer/PeerRemoteJobsSection.tsx
@@ -5,7 +5,6 @@ import Paragraph from "@/components/Paragraph";
 import SkeletonTable, {
   SkeletonTableHeader,
 } from "@/components/skeletons/SkeletonTable";
-import { usePortalElement } from "@/hooks/usePortalElement";
 import { Job } from "@/interfaces/Job";
 import useFetchApi from "@/utils/api";
 
@@ -18,15 +17,12 @@ type Props = {
 
 export const PeerRemoteJobsSection = ({ peerID }: Props) => {
   const { data: jobs, isLoading } = useFetchApi<Job[]>(`/peers/${peerID}/jobs`);
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
 
   return (
     <div className="pb-10 px-8">
-      <div className="max-w-6xl">
+      <div className="">
         <div className="flex justify-between items-center mb-5">
           <div>
-            <h2 ref={headingRef}>Remote Jobs</h2>
             <Paragraph>
               Remotely trigger actions such as debug bundles or other tasks on
               this peer, without requiring CLI access.
@@ -55,7 +51,6 @@ export const PeerRemoteJobsSection = ({ peerID }: Props) => {
             peerID={peerID}
             jobs={jobs}
             isLoading={isLoading}
-            headingTarget={portalTarget}
           />
         </Suspense>
       </div>
diff --git a/src/modules/peers/PeerNameCell.tsx b/src/modules/peers/PeerNameCell.tsx
index 355c69f42..29ba42e54 100644
--- a/src/modules/peers/PeerNameCell.tsx
+++ b/src/modules/peers/PeerNameCell.tsx
@@ -32,7 +32,7 @@ export default function PeerNameCell({ peer, linkToPeer = true }: Props) {
         className={cn(
           "flex items-center max-w-[280px] gap-2 dark:text-neutral-300 text-neutral-500 transition-all py-2 px-3 rounded-md ",
           linkToPeer &&
-            "hover:text-neutral-100 hover:bg-nb-gray-800/60 cursor-pointer",
+            "hover:text-neutral-100 hover:bg-nb-gray-900/60 cursor-pointer",
         )}
         data-testid="peer-name-cell"
         aria-label={`View details of peer ${peer.name}`}
diff --git a/src/modules/peers/PeerVersionCell.tsx b/src/modules/peers/PeerVersionCell.tsx
index 5476eb094..6daffb64f 100644
--- a/src/modules/peers/PeerVersionCell.tsx
+++ b/src/modules/peers/PeerVersionCell.tsx
@@ -22,7 +22,12 @@ type Props = {
   serial?: string;
   ephemeral?: boolean;
 };
-export default function PeerVersionCell({ version, os, serial, ephemeral }: Props) {
+export default function PeerVersionCell({
+  version,
+  os,
+  serial,
+  ephemeral,
+}: Props) {
   const { latestVersion, latestUrl } = useApplicationContext();
 
   const updateAvailable = useMemo(() => {
diff --git a/src/modules/peers/PeersTable.tsx b/src/modules/peers/PeersTable.tsx
index 05ae9e47b..3fda07402 100644
--- a/src/modules/peers/PeersTable.tsx
+++ b/src/modules/peers/PeersTable.tsx
@@ -36,6 +36,7 @@ import PeerNameCell from "@/modules/peers/PeerNameCell";
 import { PeerOSCell } from "@/modules/peers/PeerOSCell";
 import PeerStatusCell from "@/modules/peers/PeerStatusCell";
 import PeerVersionCell from "@/modules/peers/PeerVersionCell";
+import { removeAllSpaces } from "@utils/helpers";
 
 const PeersTableColumns: ColumnDef<Peer>[] = [
   {
@@ -144,7 +145,8 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
   },
   {
-    accessorKey: "os",
+    id: "os",
+    accessorFn: (peer) => removeAllSpaces(peer?.os),
     header: ({ column }) => {
       return <DataTableHeader column={column}>OS</DataTableHeader>;
     },
diff --git a/src/modules/reverse-proxy/ReverseProxyModal.tsx b/src/modules/reverse-proxy/ReverseProxyModal.tsx
new file mode 100644
index 000000000..0f83ea6d7
--- /dev/null
+++ b/src/modules/reverse-proxy/ReverseProxyModal.tsx
@@ -0,0 +1,814 @@
+"use client";
+
+import Button from "@components/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import HelpText from "@components/HelpText";
+import InlineLink, { InlineButtonLink } from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import SettingCard from "@components/SettingCard";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import Paragraph from "@components/Paragraph";
+import ModalHeader from "@components/modal/ModalHeader";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import { ToggleSwitch } from "@components/ToggleSwitch";
+import {
+  AlertTriangle,
+  ArrowRight,
+  ArrowUpRight,
+  Binary,
+  Edit,
+  ExternalLinkIcon,
+  GlobeIcon,
+  LockKeyhole,
+  MinusCircleIcon,
+  MoreVertical,
+  PlusCircle,
+  PlusIcon,
+  RectangleEllipsis,
+  Server,
+  Settings,
+  Text,
+  Users,
+} from "lucide-react";
+import { Callout } from "@components/Callout";
+import { useRouter } from "next/navigation";
+import React, { useMemo, useState } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { useDialog } from "@/contexts/DialogProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import {
+  ReverseProxy,
+  ReverseProxyAuth,
+  ReverseProxyDomain,
+  ReverseProxyDomainType,
+  ReverseProxyTarget,
+} from "@/interfaces/ReverseProxy";
+import { CustomDomainSelector } from "./domain/CustomDomainSelector";
+import { cn } from "@utils/helpers";
+import AuthPasswordModal from "@/modules/reverse-proxy/auth/AuthPasswordModal";
+import AuthPinModal from "@/modules/reverse-proxy/auth/AuthPinModal";
+import AuthSSOModal from "@/modules/reverse-proxy/auth/AuthSSOModal";
+import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProxyTargetModal";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  reverseProxy?: ReverseProxy;
+  domains?: ReverseProxyDomain[];
+  /** Pre-set the subdomain (e.g. from resource name) */
+  initialSubdomain?: string;
+  /** Pre-set a resource target - hides target selection in modal */
+  initialResource?: NetworkResource;
+  initialPeer?: Peer;
+  initialNetwork?: Network;
+  initialTab?: string;
+  onSuccess?: () => void;
+};
+
+// Helper to parse domain into subdomain and base domain
+function parseDomain(fullDomain: string): {
+  subdomain: string;
+  baseDomain: string;
+  isCustom: boolean;
+} {
+  const knownDomains = ["netbird.cloud", "netbird.io", "netbird.app"];
+
+  for (const known of knownDomains) {
+    if (fullDomain.endsWith(`.${known}`)) {
+      return {
+        subdomain: fullDomain.slice(0, -(known.length + 1)),
+        baseDomain: known,
+        isCustom: false,
+      };
+    }
+  }
+
+  // Custom domain - find the first dot to split
+  const firstDot = fullDomain.indexOf(".");
+  if (firstDot > 0) {
+    return {
+      subdomain: fullDomain.slice(0, firstDot),
+      baseDomain: fullDomain.slice(firstDot + 1),
+      isCustom: true,
+    };
+  }
+
+  return {
+    subdomain: fullDomain,
+    baseDomain: "netbird.cloud",
+    isCustom: false,
+  };
+}
+
+export default function ReverseProxyModal({
+  open,
+  onOpenChange,
+  reverseProxy,
+  domains,
+  initialSubdomain,
+  initialResource,
+  initialPeer,
+  initialNetwork,
+  initialTab,
+  onSuccess,
+}: Readonly<Props>) {
+  const router = useRouter();
+  const { permission } = usePermissions();
+  const { confirm } = useDialog();
+  const { reverseProxies, handleCreateOrUpdateProxy } = useReverseProxies();
+
+  // Check if the proxy's cluster exists in available free domains
+  const isClusterConnected = useMemo(() => {
+    if (!reverseProxy?.proxy_cluster) return false;
+    return domains?.some(
+      (d) =>
+        d.type === ReverseProxyDomainType.FREE &&
+        d.domain === reverseProxy.proxy_cluster,
+    );
+  }, [reverseProxy?.proxy_cluster, domains]);
+
+  const [tab, setTab] = useState(() => {
+    if (initialTab && initialTab !== "") return initialTab;
+    return "targets";
+  });
+
+  // Parse existing domain if editing
+  const parsed = reverseProxy?.domain ? parseDomain(reverseProxy.domain) : null;
+
+  // Form state
+  const [subdomain, setSubdomain] = useState(
+    parsed?.subdomain ||
+      initialSubdomain
+        ?.toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^a-z0-9-]/g, "") ||
+      "",
+  );
+
+  const [baseDomain, setBaseDomain] = useState(() => {
+    if (parsed?.baseDomain) return parsed.baseDomain;
+    const validatedDomains = domains?.filter((d) => d.validated) || [];
+    const customDomain = validatedDomains.find(
+      (d) => d.type === ReverseProxyDomainType.CUSTOM,
+    );
+    const freeDomain = validatedDomains.find(
+      (d) => d.type === ReverseProxyDomainType.FREE,
+    );
+    return customDomain?.domain || freeDomain?.domain || "";
+  });
+
+  const [targets, setTargets] = useState<ReverseProxyTarget[]>(
+    reverseProxy?.targets || [],
+  );
+  const [passHostHeader, setPassHostHeader] = useState(
+    reverseProxy?.pass_host_header ?? false,
+  );
+  const [rewriteRedirects, setRewriteRedirects] = useState(
+    reverseProxy?.rewrite_redirects ?? false,
+  );
+
+  // Compute full domain
+  const fullDomain = useMemo(() => {
+    if (!baseDomain) return subdomain;
+    return `${subdomain}.${baseDomain}`;
+  }, [subdomain, baseDomain]);
+
+  const domainAlreadyExists = useMemo(() => {
+    if (!reverseProxies || !fullDomain) return false;
+    return reverseProxies.some(
+      (p) => p.domain === fullDomain && p.id !== reverseProxy?.id,
+    );
+  }, [reverseProxies, fullDomain, reverseProxy?.id]);
+
+  // Authentication options - initialized from existing reverseProxy.auth
+  const [passwordEnabled, setPasswordEnabled] = useState(
+    reverseProxy?.auth?.password_auth?.enabled ?? false,
+  );
+  const [password, setPassword] = useState(
+    reverseProxy?.auth?.password_auth?.password ?? "",
+  );
+  const [pinEnabled, setPinEnabled] = useState(
+    reverseProxy?.auth?.pin_auth?.enabled ?? false,
+  );
+  const [pin, setPin] = useState(reverseProxy?.auth?.pin_auth?.pin ?? "");
+  const [bearerEnabled, setBearerEnabled] = useState(
+    reverseProxy?.auth?.bearer_auth?.enabled ?? false,
+  );
+
+  const [bearerGroups, setBearerGroups, { save: saveGroups }] = useGroupHelper({
+    initial: reverseProxy?.auth?.bearer_auth?.distribution_groups ?? [],
+  });
+
+  const [linkAuthEnabled, setLinkAuthEnabled] = useState(
+    reverseProxy?.auth?.link_auth?.enabled ?? false,
+  );
+
+  // Auth modal states
+  const [passwordModalOpen, setPasswordModalOpen] = useState(false);
+  const [ssoModalOpen, setSsoModalOpen] = useState(false);
+  const [pinModalOpen, setPinModalOpen] = useState(false);
+
+  // Target being added/edited
+  const [targetModalOpen, setTargetModalOpen] = useState(false);
+  const [editingTargetIndex, setEditingTargetIndex] = useState<number | null>(
+    null,
+  );
+
+  const isSubdomainValid = useMemo(() => {
+    return (
+      subdomain.length > 0 && baseDomain.length > 0 && !domainAlreadyExists
+    );
+  }, [subdomain, baseDomain, domainAlreadyExists]);
+
+  const canContinueToSettings = useMemo(() => {
+    return isSubdomainValid && targets.length > 0;
+  }, [isSubdomainValid, targets]);
+
+  const submitDisabled = useMemo(() => {
+    return !canContinueToSettings;
+  }, [canContinueToSettings]);
+
+  const saveTarget = (targetData: ReverseProxyTarget) => {
+    if (editingTargetIndex !== null) {
+      // Update existing target
+      setTargets(
+        targets.map((t, i) =>
+          i === editingTargetIndex ? { ...t, ...targetData } : t,
+        ),
+      );
+    } else {
+      // Add new target
+      setTargets([...targets, targetData]);
+    }
+    setTargetModalOpen(false);
+    setEditingTargetIndex(null);
+  };
+
+  const editTarget = (index: number) => {
+    setEditingTargetIndex(index);
+    setTargetModalOpen(true);
+  };
+
+  const removeTarget = (index: number) => {
+    setTargets(targets.filter((_, i) => i !== index));
+  };
+
+  const toggleTargetEnabled = (index: number) => {
+    setTargets(
+      targets.map((t, i) => (i === index ? { ...t, enabled: !t.enabled } : t)),
+    );
+  };
+
+  const hasNoAuth =
+    !passwordEnabled && !pinEnabled && !bearerEnabled && !linkAuthEnabled;
+
+  const handleSubmit = async () => {
+    // Show warning if no authentication is configured
+    if (hasNoAuth) {
+      const confirmed = await confirm({
+        title: "No Authentication Configured",
+        description:
+          "This service will be publicly accessible to everyone on the internet without any restrictions. Are you sure you want to continue?",
+        type: "warning",
+        confirmText: reverseProxy ? "Save Changes" : "Add Service",
+        cancelText: "Cancel",
+        maxWidthClass: "max-w-lg",
+      });
+      if (!confirmed) return;
+    }
+
+    const savedGroups = await saveGroups();
+
+    const auth: ReverseProxyAuth = {
+      password_auth: {
+        enabled: passwordEnabled,
+        password: password,
+      },
+      pin_auth: {
+        enabled: pinEnabled,
+        pin: pin,
+      },
+      bearer_auth: {
+        enabled: bearerEnabled,
+        distribution_groups: savedGroups.map((g) => g.id as string),
+      },
+      link_auth: {
+        enabled: linkAuthEnabled,
+      },
+    };
+
+    handleCreateOrUpdateProxy({
+      data: {
+        name: fullDomain,
+        domain: fullDomain,
+        targets,
+        enabled: reverseProxy?.enabled ?? true,
+        pass_host_header: passHostHeader,
+        rewrite_redirects: rewriteRedirects,
+        auth,
+      },
+      proxyId: reverseProxy?.id,
+      onSuccess: () => {
+        onOpenChange(false);
+        onSuccess?.();
+      },
+    });
+  };
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
+      <ModalContent
+        maxWidthClass={tab === "service" ? "max-w-xl" : "max-w-2xl"}
+      >
+        <ModalHeader
+          icon={<ReverseProxyIcon className={"fill-netbird"} size={18} />}
+          title={reverseProxy ? "Edit Service" : "Add Service"}
+          description={
+            "Expose services securely through NetBird's reverse proxy."
+          }
+          color={"netbird"}
+        />
+
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList justify={"start"} className={"px-8"}>
+            <TabsTrigger value={"targets"}>
+              <Text size={14} />
+              Details
+            </TabsTrigger>
+            <TabsTrigger value={"auth"} disabled={!canContinueToSettings}>
+              <LockKeyhole size={16} />
+              Authentication
+            </TabsTrigger>
+            <TabsTrigger value={"settings"} disabled={!canContinueToSettings}>
+              <Settings size={14} />
+              Settings
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value={"targets"} className={"pb-8"}>
+            <div className={"px-8 flex-col flex gap-6"}>
+              <div>
+                <Label>
+                  <GlobeIcon size={14} />
+                  Domain
+                </Label>
+                <HelpText>
+                  Enter a subdomain and select a domain for your service.
+                </HelpText>
+                <div className="flex items-start mt-2">
+                  <div className="flex-1 min-w-0">
+                    <Input
+                      autoFocus
+                      value={subdomain}
+                      onChange={(e) => {
+                        setSubdomain(
+                          e.target.value
+                            .toLowerCase()
+                            .replace(/[^a-z0-9-]/g, ""),
+                        );
+                      }}
+                      error={
+                        domainAlreadyExists
+                          ? "This domain is already used by another service."
+                          : undefined
+                      }
+                      placeholder={"myapp"}
+                      className="!rounded-r-none !border-r-0"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <CustomDomainSelector
+                      value={baseDomain}
+                      onChange={setBaseDomain}
+                      className="!rounded-l-none"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {reverseProxy?.proxy_cluster && (
+                <div className="rounded-md bg-nb-gray-920 border border-nb-gray-900 px-4 py-3">
+                  <div className="flex items-center gap-2 text-sm text-nb-gray-300">
+                    <Server size={14} className="text-nb-gray-400" />
+                    <span className="text-nb-gray-400">Proxy Cluster:</span>
+                    <span className="font-medium text-nb-gray-200">
+                      {reverseProxy.proxy_cluster}
+                    </span>
+                    {!isClusterConnected && (
+                      <span className="text-amber-400">(disconnected)</span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div>
+                <Label>
+                  <Server size={14} />
+                  Targets
+                </Label>
+                <HelpText>
+                  Add one or more devices running your service or resources to
+                  make it publicly accessible.
+                </HelpText>
+
+                {targets.length > 0 && (
+                  <div
+                    className={
+                      "mt-3 mb-3 overflow-hidden border border-nb-gray-900 bg-nb-gray-920/30 py-1 px-1 rounded-md "
+                    }
+                  >
+                    <table className="w-full">
+                      <tbody>
+                        {targets.map((target, index) => (
+                          <tr
+                            key={index}
+                            onClick={() => editTarget(index)}
+                            className="rounded-md hover:bg-nb-gray-900/30 cursor-pointer transition-all"
+                          >
+                            <td className="py-2.5 pl-5 pr-2 align-middle">
+                              <span className="text-[11px] leading-none font-mono px-2.5 py-2 rounded bg-nb-gray-900 text-nb-gray-300 inline-flex items-center">
+                                {target.path
+                                  ? target.path.startsWith("/")
+                                    ? target.path
+                                    : `/${target.path}`
+                                  : "/"}
+                              </span>
+                            </td>
+                            <td className="py-2.5 px-4 align-middle">
+                              <ArrowRight
+                                size={12}
+                                className="text-nb-gray-400"
+                              />
+                            </td>
+                            <td className="py-2.5 pr-2 align-middle">
+                              <TargetDestination target={target} />
+                            </td>
+                            <td className="py-2.5 pl-2 pr-4">
+                              <div
+                                className="flex items-center gap-2 justify-end"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <ToggleSwitch
+                                  size="small"
+                                  checked={target.enabled !== false}
+                                  onCheckedChange={() =>
+                                    toggleTargetEnabled(index)
+                                  }
+                                />
+                                <DropdownMenu modal={false}>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button
+                                      variant="default-outline"
+                                      className="!px-3"
+                                    >
+                                      <MoreVertical
+                                        size={16}
+                                        className="shrink-0"
+                                      />
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent
+                                    className="w-auto min-w-[200px]"
+                                    align="end"
+                                  >
+                                    <DropdownMenuItem
+                                      onClick={() => editTarget(index)}
+                                    >
+                                      <div className="flex gap-3 items-center">
+                                        <Edit size={14} className="shrink-0" />
+                                        Edit Target
+                                      </div>
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem
+                                      variant={"danger"}
+                                      onClick={() => removeTarget(index)}
+                                    >
+                                      <div className="flex gap-3 items-center">
+                                        <MinusCircleIcon
+                                          size={14}
+                                          className="shrink-0"
+                                        />
+                                        Remove Target
+                                      </div>
+                                    </DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+
+                <Button
+                  variant="dotted"
+                  className={cn("w-full mt-1", targets?.length > 0 && "mt-1")}
+                  size="sm"
+                  onClick={() => setTargetModalOpen(true)}
+                  disabled={
+                    !!(initialNetwork && !initialNetwork.resources?.length)
+                  }
+                >
+                  <PlusIcon size={14} />
+                  Add Target
+                </Button>
+
+                {initialNetwork && !initialNetwork.resources?.length && (
+                  <Callout
+                    variant="warning"
+                    className="mt-3"
+                    icon={
+                      <AlertTriangle
+                        size={14}
+                        className="shrink-0 relative top-[3px]"
+                      />
+                    }
+                  >
+                    There are currently no resources in your network{" "}
+                    <span className={"text-netbird-100 font-medium"}>
+                      {initialNetwork?.name}
+                    </span>
+                    . Add resources to your network before exposing it as a
+                    service.{" "}
+                    <InlineButtonLink
+                      variant={"default"}
+                      onClick={() => {
+                        onOpenChange(false);
+                        router.push(
+                          `/network?id=${initialNetwork.id}&tab=resources`,
+                        );
+                      }}
+                    >
+                      Go to Resources
+                      <ArrowUpRight size={14} />
+                    </InlineButtonLink>
+                  </Callout>
+                )}
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value={"auth"} className={"pb-8"}>
+            <div className={"px-8 flex-col flex gap-4"}>
+              <SettingCard>
+                <SettingCard.Item
+                  label={
+                    <>
+                      <Users size={15} />
+                      SSO (Single Sign-On)
+                    </>
+                  }
+                  description="Require users to authenticate via SSO to access this service."
+                  enabled={bearerEnabled}
+                  onClick={() => setSsoModalOpen(true)}
+                />
+                <SettingCard.Item
+                  label={
+                    <>
+                      <RectangleEllipsis size={15} />
+                      Password
+                    </>
+                  }
+                  description="Require a password to access this service."
+                  enabled={passwordEnabled}
+                  onClick={() => setPasswordModalOpen(true)}
+                />
+                <SettingCard.Item
+                  label={
+                    <>
+                      <Binary size={15} />
+                      PIN Code
+                    </>
+                  }
+                  description="Require a numeric PIN code to access this service."
+                  enabled={pinEnabled}
+                  onClick={() => setPinModalOpen(true)}
+                />
+              </SettingCard>
+            </div>
+          </TabsContent>
+
+          <TabsContent value={"settings"} className={"pb-8"}>
+            <div className={"px-8 flex-col flex gap-4"}>
+              <FancyToggleSwitch
+                value={passHostHeader}
+                onChange={setPassHostHeader}
+                label={
+                  <>
+                    <GlobeIcon size={15} />
+                    Pass Host Header
+                  </>
+                }
+                helpText="Forward the original Host header to the backend instead of rewriting it to the target address."
+              />
+              <FancyToggleSwitch
+                value={rewriteRedirects}
+                onChange={setRewriteRedirects}
+                label={
+                  <>
+                    <ArrowRight size={15} />
+                    Rewrite Redirects
+                  </>
+                }
+                helpText="Rewrite Location headers in backend responses to use the public domain instead of the internal backend address."
+              />
+            </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/reverse-proxy"}
+                target={"_blank"}
+              >
+                Services
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </Paragraph>
+          </div>
+          <div className={"flex gap-3 w-full justify-end"}>
+            {!reverseProxy ? (
+              <>
+                {tab === "targets" && (
+                  <>
+                    <ModalClose asChild>
+                      <Button variant={"secondary"}>Cancel</Button>
+                    </ModalClose>
+                    <Button
+                      variant={"primary"}
+                      onClick={() => setTab("auth")}
+                      disabled={!canContinueToSettings}
+                    >
+                      Continue
+                    </Button>
+                  </>
+                )}
+
+                {tab === "auth" && (
+                  <>
+                    <Button
+                      variant={"secondary"}
+                      onClick={() => setTab("targets")}
+                    >
+                      Back
+                    </Button>
+                    <Button
+                      variant={"primary"}
+                      onClick={() => setTab("settings")}
+                    >
+                      Continue
+                    </Button>
+                  </>
+                )}
+
+                {tab === "settings" && (
+                  <>
+                    <Button
+                      variant={"secondary"}
+                      onClick={() => setTab("auth")}
+                    >
+                      Back
+                    </Button>
+                    <Button
+                      variant={"primary"}
+                      disabled={submitDisabled || !permission?.services?.create}
+                      onClick={handleSubmit}
+                    >
+                      <PlusCircle size={16} />
+                      Add Service
+                    </Button>
+                  </>
+                )}
+              </>
+            ) : (
+              <>
+                <ModalClose asChild>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+                <Button
+                  variant={"primary"}
+                  disabled={submitDisabled || !permission?.services?.update}
+                  onClick={handleSubmit}
+                >
+                  Save Changes
+                </Button>
+              </>
+            )}
+          </div>
+        </ModalFooter>
+      </ModalContent>
+
+      <ReverseProxyTargetModal
+        key={targetModalOpen ? 1 : 0}
+        open={targetModalOpen}
+        onOpenChange={(open) => {
+          setTargetModalOpen(open);
+          if (!open) setEditingTargetIndex(null);
+        }}
+        onSave={saveTarget}
+        currentTarget={
+          editingTargetIndex !== null ? targets[editingTargetIndex] : null
+        }
+        reverseProxy={{
+          id: reverseProxy?.id || "",
+          name: fullDomain,
+          domain: fullDomain,
+          targets: targets,
+          enabled: reverseProxy?.enabled ?? true,
+        }}
+        initialResource={initialResource}
+        initialPeer={initialPeer}
+        initialNetwork={initialNetwork}
+      />
+
+      <AuthPasswordModal
+        open={passwordModalOpen}
+        key={passwordModalOpen ? "pass1" : "pass0"}
+        onOpenChange={setPasswordModalOpen}
+        currentPassword={password}
+        isEnabled={passwordEnabled}
+        onSave={(newPassword) => {
+          setTimeout(() => {
+            setPassword(newPassword);
+            setPasswordEnabled(true);
+          }, 200);
+        }}
+        onRemove={() => {
+          setTimeout(() => {
+            setPassword("");
+            setPasswordEnabled(false);
+          }, 200);
+        }}
+      />
+
+      <AuthSSOModal
+        open={ssoModalOpen}
+        onOpenChange={setSsoModalOpen}
+        key={ssoModalOpen ? "sso1" : "sso0"}
+        currentGroups={bearerGroups}
+        onSave={(groups) => {
+          setTimeout(() => {
+            setBearerGroups(groups);
+            setBearerEnabled(true);
+          }, 200);
+        }}
+        onRemove={() => {
+          setTimeout(() => {
+            setBearerGroups([]);
+            setBearerEnabled(false);
+          }, 200);
+        }}
+      />
+
+      <AuthPinModal
+        open={pinModalOpen}
+        onOpenChange={setPinModalOpen}
+        key={pinModalOpen ? "p1" : "p0"}
+        currentPin={pin}
+        isEnabled={pinEnabled}
+        onSave={(newPin) => {
+          setTimeout(() => {
+            setPin(newPin);
+            setPinEnabled(true);
+          }, 200);
+        }}
+        onRemove={() => {
+          setTimeout(() => {
+            setPin("");
+            setPinEnabled(false);
+          }, 200);
+        }}
+      />
+    </Modal>
+  );
+}
+
+function TargetDestination({ target }: { target: ReverseProxyTarget }) {
+  const { resolveDestination } = useReverseProxies();
+  return (
+    <span className="text-[0.76rem] text-nb-gray-200 whitespace-nowrap font-mono">
+      {resolveDestination(target)}
+    </span>
+  );
+}
diff --git a/src/modules/reverse-proxy/auth/AuthPasswordModal.tsx b/src/modules/reverse-proxy/auth/AuthPasswordModal.tsx
new file mode 100644
index 000000000..b0db5b94e
--- /dev/null
+++ b/src/modules/reverse-proxy/auth/AuthPasswordModal.tsx
@@ -0,0 +1,118 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import { Modal, ModalClose, ModalContent } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import React, { useState } from "react";
+import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentPassword: string;
+  isEnabled: boolean;
+  onSave: (password: string) => void;
+  onRemove: () => void;
+};
+
+export default function AuthPasswordModal({
+  open,
+  onOpenChange,
+  currentPassword,
+  isEnabled,
+  onSave,
+  onRemove,
+}: Readonly<Props>) {
+  const [password, setPassword] = useState(currentPassword);
+  const [isMasked, setIsMasked] = useState(isEnabled && currentPassword === "");
+  const isEditing = isEnabled;
+
+  const handleSave = () => {
+    if (password.trim()) {
+      onOpenChange(false);
+      onSave(password);
+    }
+  };
+
+  const handleRemove = () => {
+    onOpenChange(false);
+    setPassword("");
+    onRemove();
+  };
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass="max-w-md">
+        <ModalHeader
+          title="Password"
+          description="Require a password to access this service."
+        />
+
+        <GradientFadedBackground />
+
+        <div className="px-8">
+          <Input
+            type="password"
+            value={isMasked ? "**********" : password}
+            name={"service-password"}
+            showPasswordToggle={!isMasked}
+            onChange={(e) => {
+              if (isMasked) {
+                setIsMasked(false);
+                setPassword(e.target.value.replace(/\*/g, ""));
+              } else {
+                setPassword(e.target.value);
+              }
+            }}
+            placeholder="Enter password..."
+            autoComplete="off"
+            data-1p-ignore
+            data-lpignore="true"
+            data-form-type="other"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && password.trim()) {
+                handleSave();
+              }
+            }}
+          />
+          <div className="flex gap-3 w-full justify-between mt-6">
+            {isEditing ? (
+              <>
+                <Button variant="danger-text" onClick={handleRemove}>
+                  Remove
+                </Button>
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={!password.trim()}
+                  >
+                    Save
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div />
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={!password.trim()}
+                  >
+                    Add Password
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/src/modules/reverse-proxy/auth/AuthPinModal.tsx b/src/modules/reverse-proxy/auth/AuthPinModal.tsx
new file mode 100644
index 000000000..bfe82b5a7
--- /dev/null
+++ b/src/modules/reverse-proxy/auth/AuthPinModal.tsx
@@ -0,0 +1,109 @@
+import Button from "@components/Button";
+import { Modal, ModalClose, ModalContent } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import PinCodeInput from "@components/PinCodeInput";
+import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
+import React, { useState } from "react";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentPin: string;
+  isEnabled: boolean;
+  onSave: (pin: string) => void;
+  onRemove: () => void;
+};
+
+export default function AuthPinModal({
+  open,
+  onOpenChange,
+  currentPin,
+  isEnabled,
+  onSave,
+  onRemove,
+}: Readonly<Props>) {
+  const [pin, setPin] = useState(currentPin);
+  const [isMasked, setIsMasked] = useState(isEnabled && currentPin === "");
+  const isEditing = isEnabled;
+
+  const handleSave = () => {
+    if (pin.length === 6) {
+      onOpenChange(false);
+      onSave(pin);
+    }
+  };
+
+  const handleRemove = () => {
+    onOpenChange(false);
+    setPin("");
+    onRemove();
+  };
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass="max-w-md">
+        <ModalHeader
+          title="PIN Code"
+          description="Require a numeric PIN code to access this service."
+        />
+
+        <GradientFadedBackground />
+
+        <div className="px-8">
+          <div className="flex justify-center">
+            {isMasked ? (
+              <PinCodeInput
+                value={"******"}
+                onChange={(value) => {
+                  const digit = value.replace(/\D/g, "");
+                  setPin(digit);
+                  setIsMasked(false);
+                }}
+                type={"password"}
+              />
+            ) : (
+              <PinCodeInput value={pin} onChange={setPin} />
+            )}
+          </div>
+          <div className="flex gap-3 w-full justify-between mt-6">
+            {isEditing ? (
+              <>
+                <Button variant="danger-text" onClick={handleRemove}>
+                  Remove
+                </Button>
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={pin.length !== 6}
+                  >
+                    Save
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div />
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={pin.length !== 6}
+                  >
+                    Add PIN
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/src/modules/reverse-proxy/auth/AuthSSOModal.tsx b/src/modules/reverse-proxy/auth/AuthSSOModal.tsx
new file mode 100644
index 000000000..4050ebbd5
--- /dev/null
+++ b/src/modules/reverse-proxy/auth/AuthSSOModal.tsx
@@ -0,0 +1,97 @@
+import Button from "@components/Button";
+import { Modal, ModalClose, ModalContent } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
+import React, { useState } from "react";
+import { Group } from "@/interfaces/Group";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentGroups: Group[];
+  onSave: (groups: Group[]) => void;
+  onRemove: () => void;
+};
+
+export default function AuthSSOModal({
+  open,
+  onOpenChange,
+  currentGroups,
+  onSave,
+  onRemove,
+}: Readonly<Props>) {
+  const [groups, setGroups] = useState<Group[]>(currentGroups);
+  const isEditing = currentGroups.length > 0;
+
+  const handleSave = () => {
+    if (groups.length > 0) {
+      onOpenChange(false);
+      onSave(groups);
+    }
+  };
+
+  const handleRemove = () => {
+    onOpenChange(false);
+    setGroups([]);
+    onRemove();
+  };
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass="max-w-xl">
+        <ModalHeader
+          title="SSO (Single Sign-On)"
+          description="Require users to authenticate via SSO to access this service."
+        />
+
+        <GradientFadedBackground />
+
+        <div className="px-8">
+          <PeerGroupSelector
+            values={groups}
+            onChange={setGroups}
+            placeholder="Select distribution groups..."
+          />
+          <div className="flex gap-3 w-full justify-between mt-6">
+            {isEditing ? (
+              <>
+                <Button variant="danger-text" onClick={handleRemove}>
+                  Remove
+                </Button>
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={groups.length === 0}
+                  >
+                    Save
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div />
+                <div className="flex gap-3">
+                  <ModalClose asChild>
+                    <Button variant="secondary">Cancel</Button>
+                  </ModalClose>
+                  <Button
+                    variant="primary"
+                    onClick={handleSave}
+                    disabled={groups.length === 0}
+                  >
+                    Add Groups
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx b/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
new file mode 100644
index 000000000..3bca0947f
--- /dev/null
+++ b/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import Badge from "@components/Badge";
+import { Globe, Server } from "lucide-react";
+import React from "react";
+import { ReverseProxyDomain } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  domain: ReverseProxyDomain;
+};
+
+export default function CustomDomainClusterCell({
+  domain,
+}: Readonly<Props>) {
+  const hasCluster = !!domain.target_cluster;
+
+  if (!hasCluster) {
+    return (
+      <div className="flex items-center gap-2">
+        <Badge variant="gray" className="font-normal">
+          <Globe size={12} />
+          All
+        </Badge>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <Badge variant={"gray"} className={"font-normal"}>
+        <Server size={11} className={"text-green-500"} />
+        {domain.target_cluster}
+      </Badge>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/domain/CustomDomainModal.tsx b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
new file mode 100644
index 000000000..31372459d
--- /dev/null
+++ b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
@@ -0,0 +1,180 @@
+import Button from "@components/Button";
+import { Callout } from "@components/Callout";
+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 Paragraph from "@components/Paragraph";
+import { validator } from "@utils/helpers";
+import { ExternalLinkIcon, GlobeIcon, ServerIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import {
+  REVERSE_PROXY_CLUSTERS_DOCS_LINK,
+  REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK,
+  ReverseProxyDomainType,
+} from "@/interfaces/ReverseProxy";
+import HelpText from "@components/HelpText";
+import Separator from "@components/Separator";
+import {
+  SelectDropdown,
+  SelectOption,
+} from "@components/select/SelectDropdown";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDomainSubmit: (domain: string, targetCluster: string) => void;
+};
+
+export const CustomDomainModal = ({
+  open,
+  onOpenChange,
+  onDomainSubmit,
+}: Props) => {
+  const { domains } = useReverseProxies();
+  const [domain, setDomain] = useState("");
+  const [selectedCluster, setSelectedCluster] = useState("");
+
+  // Get available proxy clusters (free domains)
+  const availableClusters = useMemo(() => {
+    return domains?.filter((d) => d.type === ReverseProxyDomainType.FREE) || [];
+  }, [domains]);
+
+  // Auto-select first cluster if only one available
+  React.useEffect(() => {
+    if (availableClusters.length === 1 && !selectedCluster) {
+      setSelectedCluster(availableClusters[0].domain);
+    }
+  }, [availableClusters, selectedCluster]);
+
+  const error = useMemo(() => {
+    if (!domain) return "";
+    const isValid = validator.isValidDomain(domain, {
+      allowWildcard: false,
+      allowOnlyTld: false,
+      preventLeadingAndTrailingDots: true,
+    });
+    if (!isValid) {
+      return "Please enter a valid TLD domain, e.g., company.com";
+    }
+    return "";
+  }, [domain]);
+
+  const isValidDomain = !error && domain.length > 0;
+  const canSubmit = isValidDomain && selectedCluster;
+
+  const addDomain = () => {
+    if (canSubmit && domain && selectedCluster) {
+      onDomainSubmit(domain, selectedCluster);
+      onOpenChange(false);
+    }
+  };
+
+  const availableClusterOptions = availableClusters.map((cluster) => {
+    return {
+      label: cluster.domain,
+      value: cluster.domain,
+      icon: ServerIcon,
+    } as SelectOption;
+  });
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass={"relative max-w-lg"} showClose={true}>
+        <ModalHeader
+          icon={<GlobeIcon size={20} />}
+          title={"Add Custom Domain"}
+          description={"You will need to verify the domain with DNS records"}
+          color={"netbird"}
+        />
+
+        <Separator />
+
+        <div className={"px-8 flex flex-col gap-6 pt-6 pb-8"}>
+          {availableClusters.length === 0 ? (
+            <Callout variant="warning">
+              No proxy clusters are currently connected. Please ensure at least
+              one proxy is running before adding a domain. <br /> Learn more
+              about{" "}
+              <InlineLink
+                href={REVERSE_PROXY_CLUSTERS_DOCS_LINK}
+                target={"_blank"}
+              >
+                Proxy Clusters
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </Callout>
+          ) : (
+            <>
+              <div>
+                <Label>Domain</Label>
+                <HelpText></HelpText>
+                <Input
+                  autoFocus
+                  value={domain}
+                  onChange={(e) => setDomain(e.target.value.toLowerCase())}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && canSubmit) {
+                      addDomain();
+                    }
+                  }}
+                  placeholder="e.g., company.com"
+                  error={error || undefined}
+                />
+              </div>
+
+              <div>
+                <Label>Target Proxy Cluster</Label>
+                <HelpText>
+                  Select the cluster your CNAME record should point to
+                </HelpText>
+                <SelectDropdown
+                  showSearch={false}
+                  value={selectedCluster}
+                  onChange={setSelectedCluster}
+                  options={availableClusterOptions}
+                  placeholder={"Select a proxy cluster..."}
+                />
+              </div>
+            </>
+          )}
+        </div>
+        <ModalFooter className={"items-center"}>
+          <div className={"w-full"}>
+            <Paragraph className={"text-sm mt-auto"}>
+              Learn more about
+              <InlineLink
+                href={REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK}
+                target={"_blank"}
+              >
+                Custom Domains
+                <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"}
+              onClick={addDomain}
+              disabled={!canSubmit}
+            >
+              Add Domain
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx b/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
new file mode 100644
index 000000000..fa732371a
--- /dev/null
+++ b/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
@@ -0,0 +1,123 @@
+import {
+  SelectDropdown,
+  SelectOption,
+} from "@components/select/SelectDropdown";
+import { SmallBadge } from "@components/ui/SmallBadge";
+import { ArrowUpRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useMemo } from "react";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyDomainType } from "@/interfaces/ReverseProxy";
+import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
+
+interface DomainSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function CustomDomainSelector({
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: DomainSelectorProps) {
+  const router = useRouter();
+  const { domains } = useReverseProxies();
+
+  const options: SelectOption[] = useMemo(() => {
+    const opts: SelectOption[] = [];
+
+    // Add free domains (connected proxy clusters, e.g., .eu.proxy.netbird.io)
+    domains
+      ?.filter((d) => d.type === ReverseProxyDomainType.FREE)
+      .forEach((domain) => {
+        opts.push({
+          value: domain.domain,
+          label: `.${domain.domain}`,
+          renderItem: () => (
+            <div className="flex items-center gap-2 w-full text-sm justify-between">
+              <div className="flex items-center gap-2">
+                <span>.{domain.domain}</span>
+              </div>
+              {isNetBirdHosted() ? (
+                <SmallBadge text="Free" variant="green" size="md" />
+              ) : (
+                <SmallBadge text="Cluster" variant="green" size="md" />
+              )}
+            </div>
+          ),
+        });
+      });
+
+    // Add validated custom domains
+    domains
+      ?.filter((d) => d.validated && d.type === ReverseProxyDomainType.CUSTOM)
+      .forEach((domain) => {
+        opts.push({
+          value: domain.domain,
+          label: `.${domain.domain}`,
+          renderItem: () => (
+            <div className="flex items-center gap-2 w-full text-sm justify-between">
+              <span>.{domain.domain}</span>
+              <SmallBadge text="Custom" variant="sky" size="md" />
+            </div>
+          ),
+        });
+      });
+
+    // Add placeholder domain for local development
+    if (isLocalDev()) {
+      opts.push({
+        value: "example.com",
+        label: ".example.com",
+        renderItem: () => (
+          <div className="flex items-center gap-2 w-full text-sm justify-between">
+            <span>.example.com</span>
+            <SmallBadge text="Test" variant="sky" size="md" />
+          </div>
+        ),
+      });
+    }
+
+    // Add "Add Custom Domain" option
+    opts.push({
+      value: "add_custom",
+      label: "Add Custom Domain",
+      renderItem: () => (
+        <div className="flex items-center justify-between gap-2 text-netbird text-sm w-full">
+          <div className={"flex items-center gap-2"}>
+            <span>Add Custom Domain</span>
+          </div>
+          <ArrowUpRight size={16} />
+        </div>
+      ),
+    });
+
+    return opts;
+  }, [domains]);
+
+  const handleChange = (selectedValue: string) => {
+    if (selectedValue === "add_custom") {
+      router.push("/reverse-proxy/custom-domains");
+      return;
+    }
+    onChange(selectedValue);
+  };
+
+  return (
+    <SelectDropdown
+      value={value}
+      onChange={handleChange}
+      options={options}
+      popoverWidth={335}
+      showSearch={true}
+      searchPlaceholder="Search domains..."
+      disabled={disabled}
+      placeholder="Select domain..."
+      className={className}
+    />
+  );
+}
diff --git a/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx b/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
new file mode 100644
index 000000000..516fe6410
--- /dev/null
+++ b/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
@@ -0,0 +1,158 @@
+import Button from "@components/Button";
+import Card from "@components/Card";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import Steps from "@components/Steps";
+import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
+import { Mark } from "@components/ui/Mark";
+import { ExternalLinkIcon, GlobeIcon } from "lucide-react";
+import * as React from "react";
+import { Callout } from "@components/Callout";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import {
+  REVERSE_PROXY_CLUSTERS_DOCS_LINK,
+  REVERSE_PROXY_DOMAIN_VERIFICATION_LINK,
+  ReverseProxyDomain,
+  ReverseProxyDomainType,
+} from "@/interfaces/ReverseProxy";
+import Paragraph from "@components/Paragraph";
+import InlineLink from "@components/InlineLink";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  domain: ReverseProxyDomain;
+  onStartVerification: (domain: ReverseProxyDomain) => void;
+  targetCluster?: string;
+};
+
+export const CustomDomainVerificationModal = ({
+  open,
+  onOpenChange,
+  domain,
+  onStartVerification,
+  targetCluster,
+}: Props) => {
+  const { domains } = useReverseProxies();
+
+  const handleStartVerification = () => {
+    onStartVerification(domain);
+    onOpenChange(false);
+  };
+
+  // Get free domains (proxy clusters) as CNAME targets
+  const freeDomains =
+    domains?.filter((d) => d.type === ReverseProxyDomainType.FREE) || [];
+
+  // Use provided target cluster, or fall back to first available
+  const cnameTarget = targetCluster || freeDomains[0]?.domain || "";
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass={"relative max-w-[600px]"} showClose={true}>
+        <GradientFadedBackground />
+        <ModalHeader
+          icon={<GlobeIcon size={20} />}
+          title={"Verify Domain"}
+          description={domain.domain}
+          color={"netbird"}
+        />
+        <div className={"px-8 flex flex-col gap-0 pb-6"}>
+          <Steps className={"pt-0 stepper-bg-variant"}>
+            <Steps.Step step={1}>
+              <p className={"font-normal"}>
+                Sign in to your domain name provider (e.g. cloudflare.com or
+                godaddy.com)
+              </p>
+            </Steps.Step>
+            <Steps.Step step={2} line={false}>
+              <p className={"font-normal"}>
+                Add the <Mark>CNAME record</Mark> below to your DNS
+                configuration for <Mark>{domain.domain}</Mark>
+              </p>
+            </Steps.Step>
+          </Steps>
+          <div className={"flex flex-col gap-6"}>
+            {!cnameTarget ? (
+              <Callout variant={"warning"}>
+                No proxy clusters are currently connected. Please ensure at
+                least one proxy is running to configure DNS verification. <br />
+                Learn more about{" "}
+                <InlineLink
+                  href={REVERSE_PROXY_CLUSTERS_DOCS_LINK}
+                  target={"_blank"}
+                >
+                  Proxy Clusters
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Callout>
+            ) : (
+              <>
+                <Card className={"w-full"}>
+                  <Card.List>
+                    <Card.ListItem
+                      copy
+                      copyText={`*.${domain.domain}`}
+                      label={"CNAME Record"}
+                      value={`*.${domain.domain}`}
+                    />
+                    <Card.ListItem
+                      copy
+                      copyText={cnameTarget}
+                      label={"CNAME Content"}
+                      value={cnameTarget}
+                    />
+                  </Card.List>
+                </Card>
+
+                {!targetCluster && freeDomains.length > 1 && (
+                  <Callout variant={"info"}>
+                    <span className="font-medium">
+                      Available proxy clusters:
+                    </span>{" "}
+                    {freeDomains.map((d) => d.domain).join(", ")}. Choose the
+                    cluster closest to your users for best performance.
+                  </Callout>
+                )}
+
+                <Callout variant={"warning"}>
+                  DNS changes may take some time to propagate. If NetBird does
+                  not find the record immediately, please wait up to 24 hours
+                  and try again.
+                </Callout>
+              </>
+            )}
+          </div>
+        </div>
+        <ModalFooter className={"items-center"}>
+          <div className={"w-full"}>
+            <Paragraph className={"text-sm mt-auto"}>
+              Learn more about
+              <InlineLink
+                href={REVERSE_PROXY_DOMAIN_VERIFICATION_LINK}
+                target={"_blank"}
+              >
+                Domain Verification
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </Paragraph>
+          </div>
+          <div className={"flex gap-3 w-full justify-end"}>
+            <ModalClose asChild={true}>
+              <Button variant={"secondary"}>Verify Later</Button>
+            </ModalClose>
+
+            <Button variant={"primary"} onClick={handleStartVerification}>
+              Start Verification
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx b/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
new file mode 100644
index 000000000..bbfbb4f00
--- /dev/null
+++ b/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
@@ -0,0 +1,352 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import ButtonGroup from "@components/ButtonGroup";
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import FullTooltip from "@components/FullTooltip";
+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 GetStartedTest from "@components/ui/GetStartedTest";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { cn } from "@utils/helpers";
+import {
+  ExternalLinkIcon,
+  GlobeIcon,
+  HelpCircle,
+  PlusCircle,
+  ShieldCheckIcon,
+  Trash2,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
+import React, { useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import {
+  REVERSE_PROXY_DOCS_LINK,
+  ReverseProxyDomain,
+  ReverseProxyDomainType,
+} from "@/interfaces/ReverseProxy";
+import CustomDomainClusterCell from "@/modules/reverse-proxy/domain/CustomDomainClusterCell";
+import { CustomDomainModal } from "./CustomDomainModal";
+import { CustomDomainVerificationModal } from "./CustomDomainVerificationModal";
+
+
+const CustomDomainsColumns: ColumnDef<ReverseProxyDomain>[] = [
+  {
+    accessorKey: "domain",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Domain</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <CustomDomainNameCell domain={row.original} />,
+  },
+  {
+    accessorKey: "validated",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Status</DataTableHeader>;
+    },
+    filterFn: "exactMatch",
+    cell: ({ row }) => <CustomDomainStatusCell domain={row.original} />,
+  },
+  {
+    accessorKey: "target_cluster",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Cluster</DataTableHeader>;
+    },
+    cell: ({ row }) => <CustomDomainClusterCell domain={row.original} />,
+  },
+  {
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => <CustomDomainActionCell domain={row.original} />,
+  },
+  {
+    id: "searchString",
+    accessorFn: (row) => row.domain,
+  },
+];
+
+type Props = {
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export default function CustomDomainsTable({ headingTarget }: Readonly<Props>) {
+  const { mutate } = useSWRConfig();
+  const path = usePathname();
+  const { permission } = usePermissions();
+  const { domains, isLoadingDomains, createDomain, validateDomain } =
+    useReverseProxies();
+
+  const [addModalOpen, setAddModalOpen] = useState(false);
+  const [verificationModalOpen, setVerificationModalOpen] = useState(false);
+  const [selectedDomain, setSelectedDomain] =
+    useState<ReverseProxyDomain | null>(null);
+  const [selectedTargetCluster, setSelectedTargetCluster] = useState("");
+
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort" + path,
+    [
+      {
+        id: "domain",
+        desc: false,
+      },
+    ],
+  );
+
+  // Filter out free domains - only show custom domains
+  const data = useMemo(() => {
+    if (!domains) return [];
+    return domains.filter((d) => d.type !== ReverseProxyDomainType.FREE);
+  }, [domains]);
+
+  return (
+    <>
+      <CustomDomainModal
+        open={addModalOpen}
+        onOpenChange={setAddModalOpen}
+        onDomainSubmit={async (domainName, targetCluster) => {
+          const result = await createDomain(domainName, targetCluster);
+          if (result) {
+            setSelectedDomain(result);
+            setSelectedTargetCluster(targetCluster);
+            setVerificationModalOpen(true);
+          }
+        }}
+        key={addModalOpen ? 1 : 0}
+      />
+
+      {selectedDomain && (
+        <CustomDomainVerificationModal
+          open={verificationModalOpen}
+          onOpenChange={setVerificationModalOpen}
+          domain={selectedDomain}
+          onStartVerification={(d) => validateDomain(d.id)}
+          targetCluster={selectedTargetCluster}
+        />
+      )}
+
+      <DataTable
+        headingTarget={headingTarget}
+        isLoading={isLoadingDomains}
+        inset={false}
+        initialPageSize={10000}
+        keepStateInLocalStorage={false}
+        text={"Domains"}
+        sorting={sorting}
+        setSorting={setSorting}
+        columns={CustomDomainsColumns}
+        data={data}
+        useRowId={true}
+        searchPlaceholder={"Search by domain..."}
+        columnVisibility={{ searchString: false }}
+        getStartedCard={
+          <GetStartedTest
+            icon={
+              <SquareIcon
+                icon={<GlobeIcon className={"fill-nb-gray-200"} size={20} />}
+                color={"gray"}
+                size={"large"}
+              />
+            }
+            title={"Add Custom Domains"}
+            description={
+              "Use your own domains with NetBird's reverse proxy. To get started, add a CNAME record that points to a cluster and verify domain ownership."
+            }
+            button={
+              <Button
+                variant={"primary"}
+                className={""}
+                onClick={() => setAddModalOpen(true)}
+                disabled={!permission?.services?.create}
+              >
+                <PlusCircle size={16} />
+                Add Domain
+              </Button>
+            }
+            learnMore={
+              <>
+                Learn more about
+                <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+                  Custom Domains
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </>
+            }
+          />
+        }
+        rightSide={() => (
+          <>
+            {data && data?.length > 0 && (
+              <Button
+                variant={"primary"}
+                className={"ml-auto"}
+                onClick={() => setAddModalOpen(true)}
+                disabled={!permission?.services?.create}
+              >
+                <PlusCircle size={16} />
+                Add Domain
+              </Button>
+            )}
+          </>
+        )}
+      >
+        {(table) => (
+          <>
+            <ButtonGroup disabled={data?.length == 0}>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  table.getColumn("validated")?.setFilterValue(undefined);
+                }}
+                disabled={data?.length == 0}
+                variant={
+                  table.getColumn("validated")?.getFilterValue() === undefined
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                All
+              </ButtonGroup.Button>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  table.getColumn("validated")?.setFilterValue(false);
+                }}
+                disabled={data?.length == 0}
+                variant={
+                  table.getColumn("validated")?.getFilterValue() === false
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Pending
+              </ButtonGroup.Button>
+              <ButtonGroup.Button
+                onClick={() => {
+                  table.setPageIndex(0);
+                  table.getColumn("validated")?.setFilterValue(true);
+                }}
+                disabled={data?.length == 0}
+                variant={
+                  table.getColumn("validated")?.getFilterValue() === true
+                    ? "tertiary"
+                    : "secondary"
+                }
+              >
+                Active
+              </ButtonGroup.Button>
+            </ButtonGroup>
+            <DataTableRefreshButton
+              isDisabled={data?.length == 0}
+              onClick={() => {
+                mutate("/reverse-proxies/domains").then();
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </>
+  );
+}
+
+// Cell Components
+
+type CellProps = {
+  domain: ReverseProxyDomain;
+};
+
+function CustomDomainNameCell({ domain }: Readonly<CellProps>) {
+  return (
+    <div className="flex items-center gap-2 ml-2">
+      <GlobeIcon size={14} className="text-nb-gray-200" />
+      <CopyToClipboardText>
+        <span className="font-medium">{domain.domain}</span>
+      </CopyToClipboardText>
+    </div>
+  );
+}
+
+function CustomDomainStatusCell({ domain }: Readonly<CellProps>) {
+  const { permission } = usePermissions();
+  const { validateDomain } = useReverseProxies();
+  const [verificationModalOpen, setVerificationModalOpen] = useState(false);
+  const isValidated = domain.validated;
+
+  if (isValidated) {
+    return (
+      <div className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}>
+        <span className="h-2 w-2 rounded-full bg-green-500"></span>
+        Active
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div
+        className={cn("flex gap-4 items-center text-sm")}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <FullTooltip
+          content={
+            <div className={"text-xs max-w-xs"}>
+              DNS changes may take some time to propagate. If NetBird does not
+              find the record immediately, please wait up to 24 hours and try
+              again.
+            </div>
+          }
+          interactive={false}
+        >
+          <Badge variant={"yellow"} className={"cursor-help"}>
+            Pending Verification
+            <HelpCircle size={12} />
+          </Badge>
+        </FullTooltip>
+        <Button
+          variant={"secondary"}
+          size={"xs"}
+          className={"!px-3"}
+          onClick={() => setVerificationModalOpen(true)}
+          disabled={!permission?.services?.update}
+        >
+          <ShieldCheckIcon size={14} />
+          Verify Domain
+        </Button>
+      </div>
+
+      <CustomDomainVerificationModal
+        open={verificationModalOpen}
+        onOpenChange={setVerificationModalOpen}
+        domain={domain}
+        onStartVerification={(d) => validateDomain(d.id)}
+        targetCluster={domain.target_cluster}
+      />
+    </>
+  );
+}
+
+function CustomDomainActionCell({ domain }: Readonly<CellProps>) {
+  const { permission } = usePermissions();
+  const { deleteDomain } = useReverseProxies();
+
+  return (
+    <div
+      className={"flex justify-end pr-4"}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={() => deleteDomain(domain)}
+        disabled={!permission?.services?.delete}
+      >
+        <Trash2 size={16} />
+        Delete
+      </Button>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx
new file mode 100644
index 000000000..66313c3bc
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell.tsx
@@ -0,0 +1,61 @@
+import Badge from "@components/Badge";
+import { Binary, Mail, RectangleEllipsis, Users } from "lucide-react";
+import * as React from "react";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsAuthMethodCell = ({ event }: Props) => {
+  const authMethod = event.auth_method_used;
+
+  if (!authMethod) {
+    return <span className="text-nb-gray-400 text-sm px-3 py-2">-</span>;
+  }
+
+  const getAuthMethodDisplay = () => {
+    switch (authMethod.toLowerCase()) {
+      case "oidc":
+      case "sso":
+      case "bearer":
+        return {
+          icon: <Users size={12} />,
+          label: "SSO",
+        };
+      case "password":
+        return {
+          icon: <RectangleEllipsis size={12} />,
+          label: "Password",
+        };
+      case "pin":
+        return {
+          icon: <Binary size={12} />,
+          label: "PIN Code",
+        };
+      case "link":
+      case "magic_link":
+      case "magic-link":
+        return {
+          icon: <Mail size={12} />,
+          label: "Magic Link",
+        };
+      default:
+        return {
+          icon: null,
+          label: authMethod,
+        };
+    }
+  };
+
+  const { icon, label } = getAuthMethodDisplay();
+
+  return (
+    <div className="px-3 py-2">
+      <Badge variant="gray" className="gap-1.5">
+        {icon}
+        {label}
+      </Badge>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsDurationCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsDurationCell.tsx
new file mode 100644
index 000000000..4af041102
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsDurationCell.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsDurationCell = ({ event }: Props) => {
+  return (
+    <span className="text-nb-gray-300 text-[0.82rem] px-3 py-2 font-mono">
+      {event.duration_ms}ms
+    </span>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell.tsx
new file mode 100644
index 000000000..324dd152e
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell.tsx
@@ -0,0 +1,87 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import { isEmpty } from "lodash";
+import { FlagIcon, GlobeIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
+import { useCountries } from "@/contexts/CountryProvider";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+import Skeleton from "react-loading-skeleton";
+import { ListItem } from "@components/ListItem";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsLocationIpCell = ({ event }: Props) => {
+  const { getRegionText, isLoading } = useCountries();
+
+  const region = useMemo(() => {
+    return getRegionText(event.country_code || "", event.city_name || "");
+  }, [getRegionText, event.country_code, event.city_name]);
+
+  return (
+    <FullTooltip
+      side={"top"}
+      interactive={true}
+      delayDuration={250}
+      skipDelayDuration={100}
+      disabled={!region || region === "Unknown"}
+      contentClassName={"p-0"}
+      content={
+        <div
+          className={"text-xs flex flex-col"}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          <ListItem
+            icon={<FlagIcon size={14} />}
+            label={"Region"}
+            value={
+              isLoading && !region ? (
+                <Skeleton width={100} />
+              ) : (
+                <CopyToClipboardText
+                  iconAlignment={"right"}
+                  message={"Region has been copied to your clipboard"}
+                  alwaysShowIcon={true}
+                >
+                  {region}
+                </CopyToClipboardText>
+              )
+            }
+          />
+        </div>
+      }
+    >
+      <div
+        className={cn(
+          "flex gap-2.5 items-center group/cell transition-all hover:bg-nb-gray-800/10 py-2 px-3 rounded-md cursor-default",
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <div className="flex items-center justify-center shrink-0">
+          {isEmpty(event.country_code) ? (
+            <GlobeIcon size={13} className={"text-nb-gray-300"} />
+          ) : (
+            <RoundedFlag country={event.country_code!} size={12} />
+          )}
+        </div>
+        <CopyToClipboardText
+          message={"IP address has been copied to your clipboard"}
+        >
+          <span className={"text-nb-gray-200 font-mono text-[0.82rem]"}>
+            {event.source_ip}
+          </span>
+        </CopyToClipboardText>
+      </div>
+    </FullTooltip>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsReasonCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsReasonCell.tsx
new file mode 100644
index 000000000..c3540fe88
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsReasonCell.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsReasonCell = ({ event }: Props) => {
+  return (
+    <span className="text-nb-gray-300 text-[0.82rem] py-2 text-left">
+      {event.reason || "-"}
+    </span>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
new file mode 100644
index 000000000..d787672ed
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
@@ -0,0 +1,42 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import TruncatedText from "@components/ui/TruncatedText";
+import * as React from "react";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsMethodCell = ({ event }: Props) => {
+  return (
+    <span className="font-mono text-[0.82rem] font-medium py-2 text-nb-gray-300">
+      {event.method}
+    </span>
+  );
+};
+
+export const ReverseProxyEventsUrlCell = ({ event }: Props) => {
+  const fullUrl = `${event.host}${event.path}`;
+
+  return (
+    <TruncatedText
+      text={fullUrl}
+      maxWidth="360px"
+      className={"text-nb-gray-300"}
+      side={"top"}
+      sideOffset={10}
+      tooltipContent={
+        <div className="max-w-sm break-all whitespace-normal text-xs text-neutral-300">
+          {fullUrl}
+        </div>
+      }
+    >
+      <CopyToClipboardText message={"URL has been copied to your clipboard"}>
+        <span className="font-mono text-[0.82rem] whitespace-nowrap">
+          <span className="text-nb-gray-200">{event.host}</span>
+          <span className="text-nb-gray-300">{event.path}</span>
+        </span>
+      </CopyToClipboardText>
+    </TruncatedText>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsStatusCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsStatusCell.tsx
new file mode 100644
index 000000000..9096fd6d0
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsStatusCell.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+import Badge from "@components/Badge";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsStatusCell = ({ event }: Props) => {
+  const isSuccess = event.status_code >= 200 && event.status_code < 400;
+
+  return (
+    <Badge variant={isSuccess ? "green" : "red"} className={"w-[50px]"}>
+      {event.status_code}
+    </Badge>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
new file mode 100644
index 000000000..ed009ed78
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import ButtonGroup from "@components/ButtonGroup";
+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 type { ColumnDef, SortingState } from "@tanstack/react-table";
+import { ExternalLinkIcon } from "lucide-react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePathname } from "next/navigation";
+import dayjs from "dayjs";
+import React, { useCallback, useMemo } from "react";
+import { DateRange } from "react-day-picker";
+import { DatePickerWithRange } from "@components/DatePickerWithRange";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { useServerPagination } from "@/contexts/ServerPaginationProvider";
+import {
+  REVERSE_PROXY_DOCS_LINK,
+  ReverseProxyEvent,
+} from "@/interfaces/ReverseProxy";
+import { ReverseProxyEventsStatusCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsStatusCell";
+import { ReverseProxyEventsUserCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsUserCell";
+import { ReverseProxyEventsLocationIpCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsLocationIpCell";
+import {
+  ReverseProxyEventsMethodCell,
+  ReverseProxyEventsUrlCell,
+} from "@/modules/reverse-proxy/events/ReverseProxyEventsRequestCell";
+import { ReverseProxyEventsTimeCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsTimeCell";
+import { ReverseProxyEventsAuthMethodCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsAuthMethodCell";
+import { ReverseProxyEventsReasonCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsReasonCell";
+import { ReverseProxyEventsDurationCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsDurationCell";
+
+
+export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
+  {
+    id: "timestamp",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Time</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyEventsTimeCell timestamp={row.original.timestamp} />
+    ),
+    accessorFn: (row) => row.timestamp,
+    filterFn: "dateRange",
+    enableGlobalFilter: false,
+  },
+  {
+    id: "location_ip",
+    accessorFn: (row) =>
+      `${row.source_ip} ${row.city_name || ""} ${row.country_code || ""}`,
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Location / IP</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyEventsLocationIpCell event={row.original} />
+    ),
+  },
+  {
+    id: "method",
+    accessorKey: "method",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Method</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsMethodCell event={row.original} />,
+    filterFn: "arrIncludesSomeExact",
+  },
+  {
+    id: "url",
+    accessorFn: (row) => `${row.host} ${row.path}`,
+    header: ({ column }) => (
+      <DataTableHeader column={column}>URL</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsUrlCell event={row.original} />,
+  },
+  {
+    id: "status",
+    accessorKey: "status_code",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Status</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsStatusCell event={row.original} />,
+    size: 80,
+    maxSize: 80,
+  },
+  {
+    id: "is_success",
+    accessorFn: (row) => row.status_code >= 200 && row.status_code < 400,
+    filterFn: "exactMatch",
+  },
+  {
+    id: "duration",
+    accessorKey: "duration_ms",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Duration</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsDurationCell event={row.original} />,
+  },
+  {
+    id: "auth_method",
+    accessorKey: "auth_method_used",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Auth Method</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyEventsAuthMethodCell event={row.original} />
+    ),
+  },
+  {
+    id: "reason",
+    accessorKey: "reason",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Reason</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsReasonCell event={row.original} />,
+  },
+  {
+    id: "user",
+    accessorFn: (row) => row.user_id || "",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>User</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyEventsUserCell event={row.original} />,
+  },
+];
+
+type Props = {
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export default function ReverseProxyEventsTable({
+  headingTarget,
+}: Readonly<Props>) {
+  const path = usePathname();
+
+  const {
+    data: events,
+    isLoading,
+    mutate,
+    setFilter,
+    getFilter,
+    ...paginationProps
+  } = useServerPagination<ReverseProxyEvent[]>();
+
+  const activeStatus = getFilter("status");
+
+  const dateRange = useMemo<DateRange | undefined>(() => {
+    const startDate = getFilter("start_date");
+    const endDate = getFilter("end_date");
+    if (!startDate && !endDate) return undefined;
+    return {
+      from: startDate ? dayjs(startDate).toDate() : undefined,
+      to: endDate ? dayjs(endDate).toDate() : undefined,
+    };
+  }, [getFilter]);
+
+  const handleDateFilterChange = useCallback(
+    (range?: DateRange) => {
+      setFilter(
+        "start_date",
+        range?.from ? dayjs(range.from).toISOString() : undefined,
+      );
+      setFilter(
+        "end_date",
+        range?.to ? dayjs(range.to).toISOString() : undefined,
+      );
+    },
+    [setFilter],
+  );
+
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort" + path,
+    [
+      {
+        id: "timestamp",
+        desc: true,
+      },
+    ],
+  );
+
+  return (
+    <DataTable
+      {...paginationProps}
+      data={events}
+      headingTarget={headingTarget}
+      isLoading={isLoading}
+      inset={false}
+      tableCellClassName={"py-1 px-2"}
+      text={"Proxy Events"}
+      sorting={sorting}
+      setSorting={setSorting}
+      columns={ReverseProxyEventsTableColumns}
+      columnVisibility={{ is_success: false }}
+      searchPlaceholder={"Search by IP, host, path, user..."}
+      getStartedCard={
+        <GetStartedTest
+          icon={
+            <SquareIcon
+              icon={
+                <ReverseProxyIcon className={"fill-nb-gray-200"} size={20} />
+              }
+              color={"gray"}
+              size={"large"}
+            />
+          }
+          title={"No Proxy Events Yet"}
+          description={
+            "We haven't detected any proxy events yet. This could be because you haven't configured any reverse proxy services, or there hasn't been any traffic."
+          }
+          learnMore={
+            <>
+              Learn more about
+              <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+                Proxy Events
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </>
+          }
+        />
+      }
+    >
+      {(table) => (
+        <>
+          <ButtonGroup disabled={!events?.length}>
+            <ButtonGroup.Button
+              onClick={() => setFilter("status", undefined)}
+              disabled={!events?.length}
+              variant={activeStatus === undefined ? "tertiary" : "secondary"}
+            >
+              All
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => setFilter("status", "success")}
+              disabled={!events?.length}
+              variant={activeStatus === "success" ? "tertiary" : "secondary"}
+            >
+              Success
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => setFilter("status", "failed")}
+              disabled={!events?.length}
+              variant={activeStatus === "failed" ? "tertiary" : "secondary"}
+            >
+              Failed
+            </ButtonGroup.Button>
+          </ButtonGroup>
+
+          <DatePickerWithRange
+            value={dateRange}
+            onChange={handleDateFilterChange}
+            disabled={!events?.length}
+          />
+
+          <DataTableRowsPerPage table={table} disabled={!events?.length} />
+
+          <DataTableRefreshButton
+            isDisabled={!events?.length}
+            onClick={() => mutate()}
+          />
+        </>
+      )}
+    </DataTable>
+  );
+}
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
new file mode 100644
index 000000000..43ebf4cca
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@utils/helpers";
+import dayjs from "dayjs";
+import * as React from "react";
+
+type Props = {
+  timestamp: string;
+  className?: string;
+};
+
+export const ReverseProxyEventsTimeCell = ({ timestamp, className }: Props) => {
+  return (
+    <div
+      className={cn(
+        "w-full flex flex-col gap-1 min-w-[120px] max-w-[120px]",
+        className,
+      )}
+    >
+      <div>
+        <div
+          className={cn(
+            "flex-col flex whitespace-nowrap",
+            "dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 py-2 px-3 rounded-md cursor-default",
+          )}
+        >
+          <span className={"text-nb-gray-200 flex gap-2 items-center"}>
+            {dayjs(timestamp).format("MMM D, YYYY")}
+          </span>
+          <span className={"text-nb-gray-400"}>
+            {dayjs(timestamp).format("h:mm:ss A")}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
new file mode 100644
index 000000000..986df7389
--- /dev/null
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
@@ -0,0 +1,59 @@
+import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { generateColorFromUser } from "@utils/helpers";
+import * as React from "react";
+import { useMemo } from "react";
+import { useUsers } from "@/contexts/UsersProvider";
+import { ReverseProxyEvent } from "@/interfaces/ReverseProxy";
+import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+
+type Props = {
+  event: ReverseProxyEvent;
+};
+
+export const ReverseProxyEventsUserCell = ({ event }: Props) => {
+  const { users } = useUsers();
+
+  const user = useMemo(() => {
+    if (!event.user_id) return undefined;
+    return users?.find((u) => u.id === event.user_id);
+  }, [users, event.user_id]);
+
+  if (!event.user_id) {
+    return <EmptyRow />;
+  }
+
+  const displayName = user?.name || event.user_id;
+  const displayEmail = user?.email || "";
+
+  const userForColor = user || {
+    id: event.user_id,
+    name: displayName,
+    email: displayEmail,
+  };
+
+  return (
+    <div className={"flex items-center gap-2 py-2 px-3"}>
+      <div
+        className={
+          "w-8 h-8 rounded-full flex items-center justify-center text-white uppercase text-xs font-medium bg-nb-gray-900 shrink-0"
+        }
+        style={{
+          color: generateColorFromUser(userForColor),
+        }}
+      >
+        {displayName?.charAt(0) || "?"}
+      </div>
+
+      <div className="flex flex-col gap-0 min-w-0">
+        <span className={"text-sm text-nb-gray-200 truncate"}>
+          <TextWithTooltip text={displayName} maxChars={20} />
+        </span>
+        {displayEmail && (
+          <span className={"text-xs text-nb-gray-400 font-light truncate"}>
+            <TextWithTooltip text={displayEmail} maxChars={25} />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/table/ReverseProxyActionCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyActionCell.tsx
new file mode 100644
index 000000000..472aa71af
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyActionCell.tsx
@@ -0,0 +1,69 @@
+import Button from "@components/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import { MoreVertical, SquarePenIcon, Trash2 } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyActionCell({
+  reverseProxy,
+}: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { openModal, handleDelete } = useReverseProxies();
+
+  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={(e) => {
+              e.stopPropagation();
+              openModal({ proxy: reverseProxy });
+            }}
+            disabled={!permission?.services?.update}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <SquarePenIcon size={14} className={"shrink-0"} />
+              Edit
+            </div>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(reverseProxy);
+            }}
+            variant={"danger"}
+            disabled={!permission?.services?.delete}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <Trash2 size={14} className={"shrink-0"} />
+              Delete
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyActiveCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyActiveCell.tsx
new file mode 100644
index 000000000..036518f41
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyActiveCell.tsx
@@ -0,0 +1,31 @@
+import { ToggleSwitch } from "@components/ToggleSwitch";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyActiveCell({
+  reverseProxy,
+}: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { handleToggle } = useReverseProxies();
+
+  return (
+    <div className={"flex min-w-[0px]"}>
+      <ToggleSwitch
+        disabled={!permission?.services?.update}
+        checked={reverseProxy.enabled}
+        size={"small"}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleToggle(reverseProxy);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyArrowCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyArrowCell.tsx
new file mode 100644
index 000000000..6519c020e
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyArrowCell.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@utils/helpers";
+import { ArrowRight } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  disabled?: boolean;
+};
+
+export default function ReverseProxyArrowCell({ disabled }: Readonly<Props>) {
+  return (
+    <ArrowRight
+      size={16}
+      className={cn("text-nb-gray-300", disabled && "opacity-50")}
+    />
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyAuthCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyAuthCell.tsx
new file mode 100644
index 000000000..457532d7b
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyAuthCell.tsx
@@ -0,0 +1,64 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { Settings, ShieldCheck, ShieldOff } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyAuthCell({
+  reverseProxy,
+}: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { openModal } = useReverseProxies();
+  const auth = reverseProxy.auth;
+
+  const enabledCount = [
+    auth?.bearer_auth?.enabled,
+    auth?.link_auth?.enabled,
+    auth?.password_auth?.enabled,
+    auth?.pin_auth?.enabled,
+  ].filter(Boolean).length;
+
+  return (
+    <div
+      className={"flex gap-3"}
+      onClick={(e) => {
+        e.stopPropagation();
+        openModal({ proxy: reverseProxy, initialTab: "auth" });
+      }}
+    >
+      {enabledCount > 0 ? (
+        <Badge variant={"gray"} useHover={false} className={"cursor-pointer"}>
+          <ShieldCheck size={12} className="text-green-400" />
+          <div>
+            <span className={"font-medium text-xs"}>Enabled</span>
+          </div>
+        </Badge>
+      ) : (
+        <Badge variant={"gray"}>
+          <ShieldOff size={12} className="text-red-500" />
+          <span className={"font-medium text-xs"}>None</span>
+        </Badge>
+      )}
+
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        onClick={(e) => {
+          e.stopPropagation();
+          openModal({ proxy: reverseProxy, initialTab: "auth" });
+        }}
+        className={"!px-3"}
+        disabled={!permission?.services?.update}
+      >
+        <Settings size={12} />
+        Configure
+      </Button>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
new file mode 100644
index 000000000..2c25c5c0e
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import Badge from "@components/Badge";
+import { cn } from "@utils/helpers";
+import { Globe, Server } from "lucide-react";
+import React from "react";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import {
+  ReverseProxy,
+  ReverseProxyDomainType,
+} from "@/interfaces/ReverseProxy";
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyClusterCell({
+  reverseProxy,
+}: Readonly<Props>) {
+  const { domains } = useReverseProxies();
+
+  const hasCluster = !!reverseProxy.proxy_cluster;
+  const isConnected = domains?.some(
+    (d) =>
+      d.type === ReverseProxyDomainType.FREE &&
+      d.domain === reverseProxy.proxy_cluster,
+  );
+
+  if (!hasCluster) {
+    return (
+      <div className="flex items-center gap-2">
+        <Badge variant="gray" className="font-normal">
+          <Globe size={12} />
+          All
+        </Badge>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <Badge
+        variant={"gray"}
+        className={cn("font-normal", !isConnected && "opacity-60")}
+      >
+        <Server size={11} className={cn(isConnected && "text-green-500")} />
+        {reverseProxy.proxy_cluster}
+      </Badge>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
new file mode 100644
index 000000000..53a418f2c
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
@@ -0,0 +1,30 @@
+import CopyToClipboardText from "@components/CopyToClipboardText";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { ReverseProxyTarget } from "@/interfaces/ReverseProxy";
+import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+
+type Props = {
+  target: ReverseProxyTarget;
+};
+
+export default function ReverseProxyDestinationCell({
+  target,
+}: Readonly<Props>) {
+  if (target.destination === "unknown") return <EmptyRow />;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 text-neutral-300 font-light truncate",
+        !target.enabled && "opacity-30",
+      )}
+    >
+      <CopyToClipboardText>
+        <span className={"font-normal truncate font-mono text-[0.82rem]"}>
+          {target.destination}
+        </span>
+      </CopyToClipboardText>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
new file mode 100644
index 000000000..687f24a87
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
@@ -0,0 +1,67 @@
+import { cn } from "@utils/helpers";
+import { ChevronDown, ChevronRightIcon, LockIcon } from "lucide-react";
+import * as React from "react";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+import ExternalLinkText from "@components/ExternalLinkText";
+
+type Props = {
+  reverseProxy?: ReverseProxy;
+  domain?: string;
+  enabled?: boolean;
+  showChevron?: boolean;
+};
+
+export default function ReverseProxyNameCell({
+  reverseProxy,
+  domain,
+  enabled,
+  showChevron = true,
+}: Readonly<Props>) {
+  const displayDomain = domain ?? reverseProxy?.domain ?? "";
+  const isEnabled = enabled ?? reverseProxy?.enabled ?? false;
+  const hasTargets = (reverseProxy?.targets?.length ?? 0) > 0;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center",
+        showChevron
+          ? "gap-6 min-w-[270px] max-w-[270px]"
+          : "gap-2.5 min-w-[200px]",
+      )}
+    >
+      {showChevron && (
+        <>
+          <ChevronRightIcon
+            size={20}
+            className={cn(
+              "group-data-[accordion=opened]/accordion:hidden text-nb-gray-400 shrink-0",
+              !hasTargets && "cursor-default opacity-0",
+            )}
+          />
+          <ChevronDown
+            size={20}
+            className={cn(
+              "group-data-[accordion=closed]/accordion:hidden text-nb-gray-400 shrink-0",
+              !hasTargets && "cursor-default opacity-0",
+            )}
+          />
+        </>
+      )}
+      <div className={"flex items-center gap-2.5"}>
+        <LockIcon
+          size={14}
+          className={cn(
+            "shrink-0",
+            isEnabled ? "text-green-500" : "text-nb-gray-400",
+          )}
+        />
+        <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 truncate">
+          <ExternalLinkText href={`https://${displayDomain}`}>
+            <span className="font-medium truncate">{displayDomain}</span>
+          </ExternalLinkText>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
new file mode 100644
index 000000000..0cabc2070
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
@@ -0,0 +1,65 @@
+import {
+  ReverseProxy,
+  ReverseProxyMeta,
+  ReverseProxyStatus,
+} from "@/interfaces/ReverseProxy";
+import useFetchApi from "@utils/api";
+import Badge from "@components/Badge";
+import { Loader2 } from "lucide-react";
+
+type Props = {
+  serviceId: string;
+  meta?: ReverseProxyMeta;
+  enabled?: boolean;
+};
+
+const POLL_INTERVAL_MS = 3500;
+
+export default function ReverseProxyStatusCell({
+  serviceId,
+  meta,
+  enabled,
+}: Readonly<Props>) {
+  const status = meta?.status;
+
+  const isSettingUp =
+    enabled && status !== undefined && status !== ReverseProxyStatus.ACTIVE;
+
+  const { data } = useFetchApi<ReverseProxy>(
+    `/reverse-proxies/services/${serviceId}`,
+    true,
+    false,
+    isSettingUp,
+    { refreshInterval: POLL_INTERVAL_MS },
+  );
+
+  const currentStatus = data?.meta?.status ?? status;
+
+  if (
+    !enabled ||
+    !currentStatus ||
+    currentStatus === ReverseProxyStatus.ACTIVE
+  ) {
+    return null;
+  }
+
+  if (currentStatus === ReverseProxyStatus.CERTIFICATE_PENDING) {
+    return (
+      <div className={"flex"}>
+        <Badge variant={"yellow"}>
+          <Loader2 size={12} className={"animate-spin"} />
+          Issuing certificate...
+        </Badge>
+      </div>
+    );
+  }
+
+  return (
+    <div className={"flex"}>
+      <Badge variant={"yellow"}>
+        <Loader2 size={14} className={"animate-spin"} />
+        Setting up service...
+      </Badge>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyTable.tsx b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
new file mode 100644
index 000000000..ad0f9b641
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
@@ -0,0 +1,349 @@
+import Button from "@components/Button";
+import ButtonGroup from "@components/ButtonGroup";
+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 { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { useSWRConfig } from "swr";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import {
+  REVERSE_PROXY_DOCS_LINK,
+  ReverseProxy,
+  ReverseProxyTargetProtocol,
+  ReversProxyTargetType,
+} from "@/interfaces/ReverseProxy";
+import ReverseProxyActionCell from "@/modules/reverse-proxy/table/ReverseProxyActionCell";
+import ReverseProxyActiveCell from "@/modules/reverse-proxy/table/ReverseProxyActiveCell";
+import ReverseProxyAuthCell from "@/modules/reverse-proxy/table/ReverseProxyAuthCell";
+import ReverseProxyClusterCell from "@/modules/reverse-proxy/table/ReverseProxyClusterCell";
+import ReverseProxyNameCell from "@/modules/reverse-proxy/table/ReverseProxyNameCell";
+import ReverseProxyTargetsCell from "@/modules/reverse-proxy/table/ReverseProxyTargetsCell";
+import ReverseProxyTargetsTable from "@/modules/reverse-proxy/targets/ReverseProxyTargetsTable";
+import ReverseProxyStatusCell from "@/modules/reverse-proxy/table/ReverseProxyStatusCell";
+
+const ReverseProxyColumns: ColumnDef<ReverseProxy>[] = [
+  {
+    accessorKey: "domain",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Domain</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <ReverseProxyNameCell reverseProxy={row.original} />,
+  },
+  {
+    id: "status",
+    accessorFn: (proxy) => proxy?.meta?.certificate_issued_at,
+    header: "",
+    cell: ({ row }) =>
+      row.original.id ? (
+        <ReverseProxyStatusCell
+          serviceId={row.original.id}
+          meta={row.original.meta}
+          enabled={row.original.enabled}
+        />
+      ) : null,
+  },
+  {
+    accessorKey: "enabled",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Active</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyActiveCell reverseProxy={row.original} />,
+  },
+  {
+    accessorKey: "proxy_cluster",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Cluster</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyClusterCell reverseProxy={row.original} />,
+  },
+  {
+    accessorKey: "targets",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Targets</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyTargetsCell reverseProxy={row.original} />,
+  },
+  {
+    accessorKey: "auth",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Authentication</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyAuthCell reverseProxy={row.original} />,
+  },
+  {
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => <ReverseProxyActionCell reverseProxy={row.original} />,
+  },
+  {
+    id: "searchString",
+    accessorFn: (row) => {
+      return [
+        row?.domain,
+        row?.proxy_cluster,
+        row?.targets?.map((t) => t.destination).join(""),
+        row?.targets?.map((t) => t.host).join(""),
+        row?.targets?.map((t) => t.port).join(""),
+      ]?.join("");
+    },
+  },
+];
+
+// Example data for development/demo purposes
+const exampleReverseProxies: ReverseProxy[] = [
+  {
+    id: "rp-1",
+    name: "grafana.netbird.cloud",
+    domain: "grafana.netbird.cloud",
+    proxy_cluster: "eu.proxy.netbird.io",
+    targets: [
+      {
+        target_id: "t1",
+        target_type: ReversProxyTargetType.PEER,
+        protocol: ReverseProxyTargetProtocol.HTTP,
+        host: "localhost",
+        port: 3000,
+        enabled: true,
+      },
+    ],
+    enabled: true,
+    auth: {
+      password_auth: { enabled: true, password: "secret" },
+    },
+  },
+  {
+    id: "rp-2",
+    name: "jenkins.netbird.cloud",
+    domain: "jenkins.netbird.cloud",
+    proxy_cluster: "us.proxy.netbird.io",
+    targets: [
+      {
+        target_id: "t2",
+        target_type: ReversProxyTargetType.PEER,
+        protocol: ReverseProxyTargetProtocol.HTTP,
+        host: "localhost",
+        port: 8080,
+        enabled: true,
+      },
+      {
+        target_id: "t3",
+        target_type: ReversProxyTargetType.PEER,
+        protocol: ReverseProxyTargetProtocol.HTTP,
+        host: "localhost",
+        port: 8080,
+        enabled: true,
+      },
+    ],
+    enabled: true,
+    auth: {
+      bearer_auth: { enabled: true, distribution_groups: ["developers"] },
+      pin_auth: { enabled: true, pin: "1234" },
+    },
+  },
+  {
+    id: "rp-3",
+    name: "internal-api.netbird.io",
+    domain: "internal-api.netbird.io",
+    proxy_cluster: "eu.proxy.netbird.io",
+    targets: [
+      {
+        target_id: "t4",
+        target_type: ReversProxyTargetType.HOST,
+        protocol: ReverseProxyTargetProtocol.HTTPS,
+        host: "api.internal",
+        port: 443,
+        path: "/v1",
+        enabled: true,
+      },
+    ],
+    enabled: false,
+    auth: {
+      link_auth: { enabled: true },
+    },
+  },
+  {
+    id: "rp-4",
+    name: "docs.netbird.app",
+    domain: "docs.netbird.app",
+    targets: [
+      {
+        target_id: "t5",
+        target_type: ReversProxyTargetType.PEER,
+        protocol: ReverseProxyTargetProtocol.HTTP,
+        host: "localhost",
+        port: 4000,
+        enabled: true,
+      },
+    ],
+    enabled: true,
+    // No auth - public access, no cluster (broadcasts to all)
+  },
+];
+
+type Props = {
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
+  const { mutate } = useSWRConfig();
+  const path = usePathname();
+  const { permission } = usePermissions();
+  const { reverseProxies, isLoading, openModal } = useReverseProxies();
+
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort" + path,
+    [
+      {
+        id: "domain",
+        desc: false,
+      },
+    ],
+  );
+
+  const data = reverseProxies ?? exampleReverseProxies;
+
+  return (
+    <DataTable
+      headingTarget={headingTarget}
+      isLoading={isLoading}
+      inset={false}
+      text={"Reverse Proxy"}
+      sorting={sorting}
+      setSorting={setSorting}
+      columns={ReverseProxyColumns}
+      data={data}
+      useRowId={true}
+      searchPlaceholder={"Search by URL, domain, or target..."}
+      columnVisibility={{ searchString: false }}
+      renderExpandedRow={(reverseProxy) => {
+        const hasTargets = (reverseProxy?.targets?.length ?? 0) > 0;
+        if (!hasTargets) return;
+        return (
+          <>
+            <ReverseProxyTargetsTable reverseProxy={reverseProxy} />
+            <div className={"h-2 w-full bg-nb-gray-960"}></div>
+          </>
+        );
+      }}
+      getStartedCard={
+        <GetStartedTest
+          icon={
+            <SquareIcon
+              icon={
+                <ReverseProxyIcon className={"fill-nb-gray-200"} size={20} />
+              }
+              color={"gray"}
+              size={"large"}
+            />
+          }
+          title={"Create Services"}
+          description={
+            "Expose your internal services securely through NetBird's reverse proxy with automatic TLS and optional authentication to protect your services."
+          }
+          button={
+            <Button
+              variant={"primary"}
+              className={""}
+              onClick={() => openModal()}
+              disabled={!permission?.services?.create}
+            >
+              <PlusCircle size={16} />
+              Add Service
+            </Button>
+          }
+          learnMore={
+            <>
+              Learn more about
+              <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+                Services
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </>
+          }
+        />
+      }
+      rightSide={() => (
+        <>
+          {data && data?.length > 0 && (
+            <Button
+              variant={"primary"}
+              className={"ml-auto"}
+              onClick={() => openModal()}
+              disabled={!permission?.services?.create}
+            >
+              <PlusCircle size={16} />
+              Add Service
+            </Button>
+          )}
+        </>
+      )}
+    >
+      {(table) => (
+        <>
+          <ButtonGroup disabled={data?.length == 0}>
+            <ButtonGroup.Button
+              onClick={() => {
+                table.setPageIndex(0);
+                table.getColumn("enabled")?.setFilterValue(undefined);
+              }}
+              disabled={data?.length == 0}
+              variant={
+                table.getColumn("enabled")?.getFilterValue() === undefined
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              All
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => {
+                table.setPageIndex(0);
+                table.getColumn("enabled")?.setFilterValue(true);
+              }}
+              disabled={data?.length == 0}
+              variant={
+                table.getColumn("enabled")?.getFilterValue() === true
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Active
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => {
+                table.setPageIndex(0);
+                table.getColumn("enabled")?.setFilterValue(false);
+              }}
+              disabled={data?.length == 0}
+              variant={
+                table.getColumn("enabled")?.getFilterValue() === false
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Inactive
+            </ButtonGroup.Button>
+          </ButtonGroup>
+          <DataTableRowsPerPage table={table} disabled={data?.length == 0} />
+          <DataTableRefreshButton
+            isDisabled={data?.length == 0}
+            onClick={() => {
+              mutate("/reverse-proxies").then();
+            }}
+          />
+        </>
+      )}
+    </DataTable>
+  );
+}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
new file mode 100644
index 000000000..73550cb15
--- /dev/null
+++ b/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
@@ -0,0 +1,52 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { PlusCircle, Server } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyTargetsCell({
+  reverseProxy,
+}: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { openTargetModal } = useReverseProxies();
+
+  const targetsCount = reverseProxy?.targets?.length ?? 0;
+
+  return (
+    <div className={"flex gap-3"}>
+      {targetsCount > 0 && (
+        <Badge
+          variant={"gray"}
+          useHover={true}
+          className={"cursor-pointer"}
+          onClick={() => void 0}
+        >
+          <Server size={11} />
+          <div>
+            <span className={"font-medium text-xs"}>{targetsCount}</span>
+          </div>
+        </Badge>
+      )}
+
+      <Button
+        size={"xs"}
+        variant={"secondary"}
+        onClick={(e) => {
+          e.stopPropagation();
+          openTargetModal({ proxy: reverseProxy });
+        }}
+        className={"!px-3"}
+        disabled={!permission?.routes?.create}
+      >
+        <PlusCircle size={12} />
+        Add Target
+      </Button>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetActionCell.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetActionCell.tsx
new file mode 100644
index 000000000..46141e43a
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetActionCell.tsx
@@ -0,0 +1,46 @@
+import Button from "@components/Button";
+import { PenSquare, Trash2 } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyTarget } from "@/interfaces/ReverseProxy";
+import { useReverseProxyTarget } from "./ReverseProxyTargetContext";
+
+type Props = {
+  target: ReverseProxyTarget;
+};
+
+export const ReverseProxyTargetActionCell = ({ target }: Props) => {
+  const reverseProxy = useReverseProxyTarget();
+  const { permission } = usePermissions();
+  const { openTargetModal, handleDeleteTarget } = useReverseProxies();
+
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <Button
+        variant={"default-outline"}
+        size={"sm"}
+        disabled={!permission?.services?.update}
+        onClick={(e) => {
+          e.stopPropagation();
+          openTargetModal({ proxy: reverseProxy, target: target });
+        }}
+      >
+        <PenSquare size={16} />
+        Edit
+      </Button>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        disabled={!permission?.services?.delete}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleDeleteTarget(reverseProxy, target);
+        }}
+      >
+        <Trash2 size={16} />
+        Delete
+      </Button>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
new file mode 100644
index 000000000..17ea0f3f0
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
@@ -0,0 +1,32 @@
+import { ToggleSwitch } from "@components/ToggleSwitch";
+import * as React from "react";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyTarget } from "@/interfaces/ReverseProxy";
+import { useReverseProxyTarget } from "./ReverseProxyTargetContext";
+
+type Props = {
+  target: ReverseProxyTarget;
+};
+
+export default function ReverseProxyTargetActiveCell({
+  target,
+}: Readonly<Props>) {
+  const reverseProxy = useReverseProxyTarget();
+  const { handleToggleTarget } = useReverseProxies();
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <ToggleSwitch
+        checked={target.enabled !== false}
+        size={"small"}
+        onCheckedChange={() => {
+          handleToggleTarget(reverseProxy, target);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetContext.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetContext.tsx
new file mode 100644
index 000000000..0be52592f
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { ReverseProxy } from "@/interfaces/ReverseProxy";
+
+const ReverseProxyTargetContext = createContext<ReverseProxy | null>(null);
+
+export const ReverseProxyTargetProvider = ReverseProxyTargetContext.Provider;
+
+export const useReverseProxyTarget = () => {
+  const context = useContext(ReverseProxyTargetContext);
+  if (!context) {
+    throw new Error(
+      "useReverseProxyTarget must be used within a ReverseProxyTargetProvider",
+    );
+  }
+  return context;
+};
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
new file mode 100644
index 000000000..3efc266d6
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
@@ -0,0 +1,88 @@
+import * as React from "react";
+import useFetchApi from "@utils/api";
+import { useRouter } from "next/navigation";
+import type { Peer } from "@/interfaces/Peer";
+import { DeviceCard } from "@components/DeviceCard";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import {
+  ReverseProxyTarget,
+  ReversProxyTargetType,
+} from "@/interfaces/ReverseProxy";
+import { isResourceTargetType } from "@/contexts/ReverseProxiesProvider";
+import { cn } from "@utils/helpers";
+import { ArrowUpRight } from "lucide-react";
+import { SkeletonDeviceCard } from "@components/skeletons/SkeletonDeviceCard";
+import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+
+type Props = {
+  target: ReverseProxyTarget;
+  showDescription?: boolean;
+};
+
+export const ReverseProxyTargetDevice = ({
+  target,
+  showDescription,
+}: Props) => {
+  const router = useRouter();
+  const { data: peers, isLoading: isPeersLoading } =
+    useFetchApi<Peer[]>(`/peers`);
+  const { data: resources, isLoading: isResourceLoading } =
+    useFetchApi<NetworkResource[]>(`/networks/resources`);
+  const { data: networks, isLoading: isNetworksLoading } =
+    useFetchApi<Network[]>(`/networks`);
+
+  const isPeer = target.target_type === ReversProxyTargetType.PEER;
+  const isResource = isResourceTargetType(target.target_type);
+
+  const peer = isPeer
+    ? peers?.find((p) => p.id === target.target_id)
+    : undefined;
+  const resource = isResource
+    ? resources?.find((r) => r.id === target.target_id)
+    : undefined;
+
+  const network =
+    isResource && resource
+      ? networks?.find((n) => n.resources?.includes(resource.id))
+      : undefined;
+
+  const handleClick = () => {
+    if (isPeer && peer) {
+      router.push(`/peer?id=${peer.id}`);
+    } else if (isResource && resource && network) {
+      router.push(`/network?id=${network.id}&resource=${resource.id}`);
+    }
+  };
+
+  if (isPeersLoading || isResourceLoading || isNetworksLoading)
+    return <SkeletonDeviceCard />;
+
+  if (!peer && !resource)
+    return (
+      <div className={"min-h-[59px] flex items-center relative left-1"}>
+        <EmptyRow />
+      </div>
+    );
+
+  return (
+    <div className={"min-h-[59px] flex items-center relative -left-2"}>
+      <div
+        className={cn(
+          "cursor-pointer rounded-md hover:bg-nb-gray-900/40 flex items-center justify-between group pr-4",
+        )}
+        onClick={handleClick}
+      >
+        <DeviceCard
+          device={peer}
+          className={cn(!target.enabled && "opacity-40", "pl-2")}
+          resource={resource}
+          description={showDescription ? resource?.description : undefined}
+        />
+        <ArrowUpRight
+          size={14}
+          className={"text-nb-gray-200 opacity-0 group-hover:opacity-100"}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
new file mode 100644
index 000000000..f63dde76f
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@components/Accordion";
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import HelpText from "@components/HelpText";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import { SelectDropdown } from "@components/select/SelectDropdown";
+import useFetchApi from "@utils/api";
+import {
+  AlertTriangle,
+  HelpCircle,
+  PlusCircle,
+  Server,
+  Settings,
+} from "lucide-react";
+import { Callout } from "@components/Callout";
+import cidr from "ip-cidr";
+import React, { useMemo, useRef, useState } from "react";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import {
+  ReverseProxy,
+  ReverseProxyTarget,
+  ReverseProxyTargetProtocol,
+  ReversProxyTargetType,
+} from "@/interfaces/ReverseProxy";
+import {
+  defaultPortForProtocol,
+  isResourceTargetType,
+} from "@/contexts/ReverseProxiesProvider";
+import Separator from "@components/Separator";
+import { cn } from "@utils/helpers";
+import { HelpTooltip } from "@components/HelpTooltip";
+import InlineLink, { InlineButtonLink } from "@components/InlineLink";
+import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
+import FullTooltip from "@components/FullTooltip";
+
+/** Get initial host value based on target, resource, or peer */
+function getInitialHost(
+  currentTarget: ReverseProxyTarget | null | undefined,
+  initialResource: { address: string } | undefined,
+  initialPeer: { ip: string } | undefined,
+): string {
+  if (currentTarget?.host) return currentTarget.host;
+  if (initialResource) {
+    const address = initialResource.address;
+    return address.includes("/") ? address.split("/")[0] : address;
+  }
+  if (initialPeer) return initialPeer.ip;
+  return "";
+}
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (target: ReverseProxyTarget) => void;
+  currentTarget?: ReverseProxyTarget | null;
+  reverseProxy: ReverseProxy;
+  /** Pre-set a resource target - hides target selection */
+  initialResource?: NetworkResource;
+  initialPeer?: Peer;
+  initialNetwork?: Network;
+};
+
+export default function ReverseProxyTargetModal({
+  open,
+  onOpenChange,
+  onSave,
+  currentTarget,
+  reverseProxy,
+  initialResource,
+  initialPeer,
+  initialNetwork,
+}: Readonly<Props>) {
+  const existingTargets = reverseProxy.targets || [];
+  const domain = reverseProxy.domain;
+  // Fetch resources and peers for target selection
+  const { data: resources } = useFetchApi<NetworkResource[]>(
+    "/networks/resources",
+  );
+  const { data: peers } = useFetchApi<Peer[]>("/peers");
+
+  const [targetType, setTargetType] = useState<ReversProxyTargetType>(
+    currentTarget?.target_type ??
+      (initialResource
+        ? (initialResource.type as ReversProxyTargetType) ??
+          ReversProxyTargetType.HOST
+        : ReversProxyTargetType.PEER),
+  );
+  const [targetPeerId, setTargetPeerId] = useState<string | undefined>(
+    currentTarget?.target_type === ReversProxyTargetType.PEER
+      ? currentTarget?.target_id
+      : initialPeer?.id,
+  );
+  const [targetResourceId, setTargetResourceId] = useState<string | undefined>(
+    currentTarget && isResourceTargetType(currentTarget.target_type)
+      ? currentTarget?.target_id
+      : initialResource?.id,
+  );
+  const [targetProtocol, setTargetProtocol] =
+    useState<ReverseProxyTargetProtocol>(
+      currentTarget?.protocol ?? ReverseProxyTargetProtocol.HTTP,
+    );
+  const [targetHost, setTargetHost] = useState(
+    getInitialHost(currentTarget, initialResource, initialPeer),
+  );
+  const [targetPort, setTargetPort] = useState<number>(
+    currentTarget?.port ?? 0,
+  );
+  const [targetPath, setTargetPath] = useState(currentTarget?.path ?? "");
+  const [accessLocal, setAccessLocal] = useState(
+    currentTarget?.access_local ?? false,
+  );
+  const portInputRef = useRef<HTMLInputElement>(null);
+  const [installModal, setInstallModal] = useState(false);
+
+  // Get the current resource's address (from initialResource or selected resource)
+  const currentResourceAddress = useMemo(() => {
+    if (initialResource) return initialResource.address;
+    if (targetResourceId) {
+      const resource = resources?.find((r) => r.id === targetResourceId);
+      return resource?.address || "";
+    }
+    return "";
+  }, [initialResource, targetResourceId, resources]);
+
+  // Parse the CIDR using ip-cidr library
+  const cidrInfo = useMemo(() => {
+    if (!currentResourceAddress) return null;
+    if (!cidr.isValidCIDR(currentResourceAddress)) return null;
+    try {
+      return new cidr(currentResourceAddress);
+    } catch {
+      return null;
+    }
+  }, [currentResourceAddress]);
+
+  // Get the CIDR mask (e.g., 24 for /24)
+  const cidrMask = useMemo(() => {
+    if (!cidrInfo) return null;
+    const parts = currentResourceAddress.split("/");
+    return parts.length === 2 ? parseInt(parts[1], 10) : 32;
+  }, [cidrInfo, currentResourceAddress]);
+
+  // Check if address is a CIDR range (has more than one address)
+  const isCidrRange = useMemo(() => {
+    return cidrMask !== null && cidrMask < 32;
+  }, [cidrMask]);
+
+  // Host should be editable if it's a CIDR range with multiple addresses
+  const isHostEditable = isCidrRange;
+
+  // Validate if current host is within CIDR range
+  const isHostInCidrRange = useMemo(() => {
+    if (!cidrInfo || !targetHost) return false;
+    if (!cidr.isValidAddress(targetHost)) return false;
+    return cidrInfo.contains(targetHost);
+  }, [cidrInfo, targetHost]);
+
+  // Normalize path for comparison (ensure it starts with / and handle empty as /)
+  const normalizePath = (path: string | undefined) => {
+    if (!path || path === "") return "/";
+    return path.startsWith("/") ? path : `/${path}`;
+  };
+
+  // Check if path already exists in other targets
+  const isPathDuplicate = useMemo(() => {
+    const normalizedCurrentPath = normalizePath(targetPath);
+    return existingTargets.some((t) => {
+      // Skip the target being edited - match by path, host, and port
+      if (
+        currentTarget &&
+        normalizePath(t.path) === normalizePath(currentTarget.path) &&
+        t.host === currentTarget.host &&
+        t.port === currentTarget.port
+      ) {
+        return false;
+      }
+      return normalizePath(t.path) === normalizedCurrentPath;
+    });
+  }, [targetPath, existingTargets, currentTarget]);
+
+  const isValidPort =
+    targetPort === 0 || (targetPort >= 1 && targetPort <= 65535);
+  const isValidCidrHost = !isCidrRange || (targetHost && isHostInCidrRange);
+
+  const canAddTarget = useMemo(() => {
+    // Don't allow if path is duplicate or port is invalid
+    if (isPathDuplicate || !isValidPort) return false;
+
+    if (initialResource) {
+      // If CIDR range, must have a valid IP within range
+      return isValidCidrHost;
+    }
+    if (initialPeer) {
+      return true;
+    }
+    if (targetType === ReversProxyTargetType.PEER) {
+      return !!targetPeerId;
+    }
+    if (isResourceTargetType(targetType)) {
+      return !!targetResourceId && isValidCidrHost;
+    }
+    return false;
+  }, [
+    isPathDuplicate,
+    isValidPort,
+    initialResource,
+    initialPeer,
+    targetType,
+    targetPeerId,
+    targetResourceId,
+    isValidCidrHost,
+  ]);
+
+  const hasTarget =
+    initialResource || initialPeer || targetPeerId || targetResourceId;
+
+  const handleSave = () => {
+    const resolvedType = initialPeer ? ReversProxyTargetType.PEER : targetType;
+    const isResource = isResourceTargetType(resolvedType) || !!initialResource;
+    const targetData: ReverseProxyTarget = {
+      target_type: resolvedType,
+      target_id:
+        resolvedType === ReversProxyTargetType.PEER
+          ? targetPeerId
+          : targetResourceId,
+      protocol: targetProtocol,
+      host:
+        resolvedType === ReversProxyTargetType.SUBNET ? targetHost : undefined,
+      port: targetPort,
+      path: targetPath || undefined,
+      enabled: true,
+      access_local: isResource ? accessLocal : undefined,
+    };
+    onSave(targetData);
+    onOpenChange(false);
+  };
+
+  const showAdvancedSettings = false;
+  // const showAdvancedSettings = !!hasTarget && (isResourceTargetType(targetType) || !!initialResource);
+
+  return (
+    <>
+      <Modal open={open} onOpenChange={onOpenChange}>
+        <ModalContent maxWidthClass="max-w-xl">
+          <ModalHeader
+            icon={<Server className="text-netbird" size={16} />}
+            title={currentTarget ? "Edit Target" : "Add Target"}
+            description="Configure the target for your reverse proxy."
+            color="netbird"
+          />
+
+          <Separator />
+
+          <div
+            className={cn(
+              "px-8 py-6 pt-4 flex flex-col gap-6",
+              !showAdvancedSettings && "mb-3",
+            )}
+          >
+            {!initialResource && !initialPeer && (
+              <div>
+                <Label className={"gap-0 inline"}>
+                  {initialNetwork ? (
+                    "Select Resource"
+                  ) : (
+                    <>
+                      Select{" "}
+                      <HelpTooltip
+                        content={
+                          <div className="max-w-sm text-xs">
+                            A{" "}
+                            <span className={"text-white font-medium"}>
+                              peer
+                            </span>{" "}
+                            is a machine (e.g., laptop, server, container)
+                            running NetBird. Select a peer if your service runs
+                            directly on it.
+                            <span className={"mt-1 block"}>
+                              If you don&apos;t have a peer yet, you can{" "}
+                              <InlineButtonLink
+                                onClick={() => setInstallModal(true)}
+                              >
+                                Install NetBird
+                              </InlineButtonLink>
+                              .
+                            </span>
+                          </div>
+                        }
+                      >
+                        Peer
+                      </HelpTooltip>{" "}
+                      or{" "}
+                      <HelpTooltip
+                        content={
+                          <div className="max-w-sm text-xs">
+                            A{" "}
+                            <span className={"text-white font-medium"}>
+                              resource
+                            </span>{" "}
+                            is a destination (IP, subnet, or domain) that
+                            can&apos;t run NetBird directly. Resources are part
+                            of a network and are reached through a routing peer
+                            that forwards traffic to them.
+                            <span className={"mt-1 block"}>
+                              If you don&apos;t have resources yet, go to{" "}
+                              <InlineLink href={"/networks"}>
+                                Networks
+                              </InlineLink>{" "}
+                              to create some.
+                            </span>
+                          </div>
+                        }
+                      >
+                        Resource
+                      </HelpTooltip>
+                    </>
+                  )}
+                </Label>
+
+                <HelpText>
+                  {initialNetwork
+                    ? "Select the resource from your network you want to expose."
+                    : "Select the peer where your service is running or select a resource to expose it."}
+                </HelpText>
+                <PeerGroupSelector
+                  values={[]}
+                  onChange={() => {}}
+                  placeholder={
+                    initialNetwork
+                      ? "Select a resource..."
+                      : "Select a peer or resource..."
+                  }
+                  showPeers={!initialNetwork}
+                  showResources={true}
+                  showRoutes={false}
+                  hideAllGroup={true}
+                  hideGroupsTab={true}
+                  resourceIds={
+                    initialNetwork ? initialNetwork.resources ?? [] : undefined
+                  }
+                  tabOrder={
+                    initialNetwork ? ["resources"] : ["peers", "resources"]
+                  }
+                  closeOnSelect={true}
+                  max={1}
+                  resource={
+                    isResourceTargetType(targetType) && targetResourceId
+                      ? { id: targetResourceId, type: "host" }
+                      : targetType === ReversProxyTargetType.PEER &&
+                        targetPeerId
+                      ? { id: targetPeerId, type: "peer" }
+                      : undefined
+                  }
+                  onResourceChange={(res) => {
+                    if (res) {
+                      if (res.type === "peer") {
+                        setTargetType(ReversProxyTargetType.PEER);
+                        setTargetPeerId(res.id);
+                        setTargetResourceId(undefined);
+                        const peer = peers?.find((p) => p.id === res.id);
+                        setTargetHost(peer?.ip || "localhost");
+                      } else {
+                        const selectedResource = resources?.find(
+                          (r) => r.id === res.id,
+                        );
+                        setTargetType(
+                          (selectedResource?.type as ReversProxyTargetType) ??
+                            ReversProxyTargetType.HOST,
+                        );
+                        setTargetResourceId(res.id);
+                        setTargetPeerId(undefined);
+                        const address = selectedResource?.address || "";
+                        // If CIDR range, pre-fill with base IP
+                        if (address.includes("/")) {
+                          setTargetHost(address.split("/")[0]);
+                        } else {
+                          setTargetHost(address);
+                        }
+                      }
+                      setTimeout(() => portInputRef.current?.focus(), 0);
+                    } else {
+                      setTargetPeerId(undefined);
+                      setTargetResourceId(undefined);
+                      setTargetHost("");
+                    }
+                  }}
+                />
+              </div>
+            )}
+
+            <div>
+              <Label>Location (Optional)</Label>
+              <HelpText>
+                Specify an optional path from where requests are routed to your
+                service.
+              </HelpText>
+              <div className="flex w-full">
+                <div
+                  className={`bg-nb-gray-900 rounded-l-md border text-nb-gray-300 border-r-0 text-sm border-nb-gray-700 flex items-center justify-center whitespace-nowrap px-4 ${
+                    !hasTarget ? "opacity-50" : "opacity-80"
+                  }`}
+                >
+                  {domain || "domain.example.com"}
+                </div>
+                <Input
+                  placeholder="/"
+                  value={targetPath}
+                  className={cn("rounded-l-none")}
+                  maxWidthClass="w-full"
+                  disabled={!hasTarget}
+                  onChange={(e) => {
+                    let value = e.target.value;
+                    if (value && !value.startsWith("/")) {
+                      value = "/" + value;
+                    }
+                    setTargetPath(value);
+                  }}
+                />
+              </div>
+              {isPathDuplicate && hasTarget && (
+                <Callout
+                  variant="warning"
+                  className="mt-3"
+                  icon={
+                    <AlertTriangle
+                      size={14}
+                      className="shrink-0 relative top-[3px]"
+                    />
+                  }
+                >
+                  Please use a different location. This location is already used
+                  by another target and cannot be added.
+                </Callout>
+              )}
+            </div>
+
+            <div className="flex gap-3 mt-1">
+              <div className="flex-1">
+                <Label>Protocol & Host / IP</Label>
+                {cidrInfo && (
+                  <HelpText className="!mt-1">
+                    Enter an IP address within {currentResourceAddress}
+                  </HelpText>
+                )}
+                <div className="flex items-center mt-2">
+                  <div className="w-[120px]">
+                    <SelectDropdown
+                      value={targetProtocol}
+                      onChange={(v) =>
+                        setTargetProtocol(v as ReverseProxyTargetProtocol)
+                      }
+                      options={[
+                        {
+                          value: ReverseProxyTargetProtocol.HTTP,
+                          label: "http://",
+                        },
+                        {
+                          value: ReverseProxyTargetProtocol.HTTPS,
+                          label: "https://",
+                        },
+                      ]}
+                      className="!rounded-r-none !border-r-0"
+                      disabled={!hasTarget}
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <Input
+                      value={targetHost}
+                      onChange={(e) => {
+                        // Only allow valid IP characters for CIDR ranges
+                        const value = isHostEditable
+                          ? e.target.value.replace(/[^0-9.]/g, "")
+                          : e.target.value;
+                        setTargetHost(value);
+                      }}
+                      placeholder="e.g., 192.168.0.10"
+                      className="!rounded-l-none"
+                      disabled={!hasTarget}
+                      readOnly={hasTarget && !isHostEditable ? true : undefined}
+                      autoFocus={!!initialResource && isHostEditable}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="w-[150px]">
+                <Label>
+                  Port
+                  <FullTooltip
+                    content={
+                      <div className={"text-xs max-w-xs"}>
+                        Enter the port where your service (e.g., webserver, app,
+                        API) is currently listening. If left empty, defaults to
+                        port 80 for HTTP or 443 for HTTPS.
+                      </div>
+                    }
+                  >
+                    <HelpCircle
+                      size={12}
+                      className="cursor-help hover:text-nb-gray-100 transition-colors"
+                    />
+                  </FullTooltip>
+                </Label>
+                {cidrInfo && <HelpText className="!mt-1">&nbsp;</HelpText>}
+                <div className="mt-2">
+                  <Input
+                    ref={portInputRef}
+                    type="number"
+                    value={targetPort === 0 ? "" : targetPort}
+                    onChange={(e) =>
+                      setTargetPort(parseInt(e.target.value) || 0)
+                    }
+                    placeholder={String(defaultPortForProtocol(targetProtocol))}
+                    min={0}
+                    max={65535}
+                    disabled={!hasTarget}
+                    autoFocus={!!initialResource && !isHostEditable}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {showAdvancedSettings && (
+              <Accordion type="single" collapsible>
+                <AccordionItem value="advanced">
+                  <AccordionTrigger className="text-sm text-nb-gray-300">
+                    <div className="flex items-center gap-2">
+                      <Settings size={14} />
+                      Advanced Settings
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <div className="flex flex-col gap-4 mt-4">
+                      <label className="flex items-start gap-3 cursor-pointer">
+                        <Checkbox
+                          checked={accessLocal}
+                          onCheckedChange={(v) => setAccessLocal(v === true)}
+                        />
+                        <div>
+                          <Label className="!mb-0" as={"div"}>
+                            This is the routing peer
+                          </Label>
+                          <HelpText className="!mt-1">
+                            Enable if the service runs directly on the routing
+                            peer rather than behind it.
+                          </HelpText>
+                        </div>
+                      </label>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            )}
+          </div>
+
+          <ModalFooter>
+            <div className="flex gap-3 w-full justify-end">
+              <Button variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                onClick={handleSave}
+                disabled={!canAddTarget}
+              >
+                {currentTarget ? (
+                  "Save Changes"
+                ) : (
+                  <>
+                    <PlusCircle size={16} />
+                    Add Target
+                  </>
+                )}
+              </Button>
+            </div>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={installModal} onOpenChange={setInstallModal}>
+        <SetupModal />
+      </Modal>
+    </>
+  );
+}
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetPath.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetPath.tsx
new file mode 100644
index 000000000..099127e3d
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetPath.tsx
@@ -0,0 +1,46 @@
+import { cn } from "@utils/helpers";
+import { ExternalLinkIcon } from "lucide-react";
+import * as React from "react";
+import { ReverseProxyTarget } from "@/interfaces/ReverseProxy";
+import { useReverseProxyTarget } from "@/modules/reverse-proxy/targets/ReverseProxyTargetContext";
+
+type Props = {
+  target: ReverseProxyTarget;
+};
+
+export const ReverseProxyTargetPath = ({ target }: Props) => {
+  const reverseProxy = useReverseProxyTarget();
+
+  const path = target.path
+    ? target.path.startsWith("/")
+      ? target.path
+      : `/${target.path}`
+    : "/";
+
+  const fullUrl = `https://${reverseProxy.domain}${path}`;
+
+  return (
+    <a
+      href={fullUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+      className={cn(
+        "inline-flex items-center gap-2 group",
+        !target.enabled && "opacity-50 pointer-events-none",
+      )}
+    >
+      <span
+        className={
+          "text-[11px] leading-none font-mono px-2.5 py-2 rounded bg-nb-gray-920 text-nb-gray-300 transition-all group-hover:bg-nb-gray-900 group-hover:text-nb-gray-100"
+        }
+      >
+        {path}
+      </span>
+      <ExternalLinkIcon
+        size={12}
+        className="text-nb-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    </a>
+  );
+};
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetsTable.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetsTable.tsx
new file mode 100644
index 000000000..e7dc5a0da
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetsTable.tsx
@@ -0,0 +1,86 @@
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import React, { useState } from "react";
+import { ReverseProxy, ReverseProxyTarget } from "@/interfaces/ReverseProxy";
+import ReverseProxyArrowCell from "@/modules/reverse-proxy/table/ReverseProxyArrowCell";
+import ReverseProxyDestinationCell from "@/modules/reverse-proxy/table/ReverseProxyDestinationCell";
+import { ReverseProxyTargetActionCell } from "@/modules/reverse-proxy/targets/ReverseProxyTargetActionCell";
+import ReverseProxyTargetActiveCell from "@/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell";
+import { ReverseProxyTargetProvider } from "@/modules/reverse-proxy/targets/ReverseProxyTargetContext";
+import { ReverseProxyTargetDevice } from "@/modules/reverse-proxy/targets/ReverseProxyTargetDevice";
+import { ReverseProxyTargetPath } from "@/modules/reverse-proxy/targets/ReverseProxyTargetPath";
+
+const ReverseProxyTargetColumns: ColumnDef<ReverseProxyTarget>[] = [
+  {
+    accessorKey: "target_type",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Resource</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyTargetDevice target={row.original} />,
+  },
+  {
+    accessorKey: "path",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Location</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyTargetPath target={row.original} />,
+  },
+  {
+    accessorKey: "arrow",
+    header: "",
+    cell: ({ row }) => (
+      <ReverseProxyArrowCell disabled={!row.original.enabled} />
+    ),
+  },
+  {
+    accessorKey: "host",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Destination</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyDestinationCell target={row.original} />,
+  },
+  {
+    accessorKey: "enabled",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Active</DataTableHeader>;
+    },
+    cell: ({ row }) => <ReverseProxyTargetActiveCell target={row.original} />,
+  },
+  {
+    accessorKey: "target_id",
+    header: "",
+    cell: ({ row }) => <ReverseProxyTargetActionCell target={row.original} />,
+  },
+];
+
+type Props = {
+  reverseProxy: ReverseProxy;
+};
+
+export default function ReverseProxyTargetsTable({ reverseProxy }: Props) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  return (
+    <ReverseProxyTargetProvider value={reverseProxy}>
+      <DataTable
+        uniqueKey={reverseProxy.id}
+        keepStateInLocalStorage={false}
+        tableClassName={"mt-0"}
+        minimal={true}
+        showSearchAndFilters={false}
+        rowClassName={"last:pb-10"}
+        tableCellClassName={"py-0"}
+        className={"bg-nb-gray-960 py-2"}
+        inset={true}
+        text={"Targets"}
+        manualPagination={true}
+        sorting={sorting}
+        columnVisibility={{}}
+        setSorting={setSorting}
+        columns={ReverseProxyTargetColumns}
+        data={reverseProxy.targets}
+      />
+    </ReverseProxyTargetProvider>
+  );
+}
diff --git a/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetActionCell.tsx b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetActionCell.tsx
new file mode 100644
index 000000000..cfdc14909
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetActionCell.tsx
@@ -0,0 +1,83 @@
+import Button from "@components/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import { MoreVertical, Settings, SquarePenIcon, Trash2 } from "lucide-react";
+import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyFlatTarget } from "@/interfaces/ReverseProxy";
+
+type Props = {
+  target: ReverseProxyFlatTarget;
+};
+
+export default function ReverseProxyFlatTargetActionCell({
+  target,
+}: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { openModal, openTargetModal, handleDeleteTarget } =
+    useReverseProxies();
+
+  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={(e) => {
+              e.stopPropagation();
+              openTargetModal({ proxy: target.proxy, target: target });
+            }}
+            disabled={!permission?.services?.update}
+          >
+            <div className={"flex gap-3 items-center pr-8"}>
+              <SquarePenIcon size={14} className={"shrink-0"} />
+              Edit Target
+            </div>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              openModal({ proxy: target.proxy, initialTab: "settings" });
+            }}
+            disabled={!permission?.services?.update}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <Settings size={14} className={"shrink-0"} />
+              Settings
+            </div>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDeleteTarget(target.proxy, target);
+            }}
+            variant={"danger"}
+            disabled={!permission?.services?.delete}
+          >
+            <div className={"flex gap-3 items-center"}>
+              <Trash2 size={14} className={"shrink-0"} />
+              Delete
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent.tsx b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent.tsx
new file mode 100644
index 000000000..9107a3ef3
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTabContent.tsx
@@ -0,0 +1,67 @@
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import { ExternalLinkIcon } from "lucide-react";
+import * as React from "react";
+import { Suspense } from "react";
+import {
+  REVERSE_PROXY_DOCS_LINK,
+  ReverseProxyFlatTarget,
+} from "@/interfaces/ReverseProxy";
+import { ReverseProxyFlatTargetsTable } from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTable";
+
+type Props = {
+  targets: ReverseProxyFlatTarget[];
+  isLoading?: boolean;
+  hideResourceColumn?: boolean;
+  emptyTableTitle?: string;
+  emptyTableDescription?: string;
+};
+
+export const ReverseProxyFlatTargetsTabContent = ({
+  targets,
+  isLoading,
+  hideResourceColumn,
+  emptyTableTitle = "This network has no services",
+  emptyTableDescription = "Create resources and expose services securely through NetBird's reverse proxy.",
+}: Props) => {
+  return (
+    <div className={"pb-10 px-8"}>
+      <div className={"flex justify-between items-center mb-5"}>
+        <div>
+          <Paragraph>
+            Expose services securely through NetBird&apos;s reverse proxy.
+          </Paragraph>
+          <Paragraph>
+            Learn more about
+            <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+              Services
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+            in our documentation.
+          </Paragraph>
+        </div>
+      </div>
+      <Suspense
+        fallback={
+          <div>
+            <SkeletonTableHeader className={"!p-0"} />
+            <div className={"mt-8 w-full"}>
+              <SkeletonTable withHeader={false} />
+            </div>
+          </div>
+        }
+      >
+        <ReverseProxyFlatTargetsTable
+          targets={targets}
+          isLoading={isLoading}
+          hideResourceColumn={hideResourceColumn}
+          emptyTableTitle={emptyTableTitle}
+          emptyTableDescription={emptyTableDescription}
+        />
+      </Suspense>
+    </div>
+  );
+};
diff --git a/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTable.tsx b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTable.tsx
new file mode 100644
index 000000000..4ea56d3b5
--- /dev/null
+++ b/src/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetsTable.tsx
@@ -0,0 +1,214 @@
+import Button from "@components/Button";
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResults from "@components/ui/NoResults";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { PlusCircle } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import * as React from "react";
+import { useCallback, useState } from "react";
+import ReverseProxyIcon from "@/assets/icons/ReverseProxyIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
+import { ReverseProxyFlatTarget } from "@/interfaces/ReverseProxy";
+import ReverseProxyArrowCell from "@/modules/reverse-proxy/table/ReverseProxyArrowCell";
+import ReverseProxyAuthCell from "@/modules/reverse-proxy/table/ReverseProxyAuthCell";
+import ReverseProxyClusterCell from "@/modules/reverse-proxy/table/ReverseProxyClusterCell";
+import ReverseProxyDestinationCell from "@/modules/reverse-proxy/table/ReverseProxyDestinationCell";
+import ReverseProxyNameCell from "@/modules/reverse-proxy/table/ReverseProxyNameCell";
+import ReverseProxyFlatTargetActionCell from "@/modules/reverse-proxy/targets/flat/ReverseProxyFlatTargetActionCell";
+import ReverseProxyTargetActiveCell from "@/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell";
+import { ReverseProxyTargetProvider } from "@/modules/reverse-proxy/targets/ReverseProxyTargetContext";
+import { ReverseProxyTargetDevice } from "@/modules/reverse-proxy/targets/ReverseProxyTargetDevice";
+
+const FlatTargetsTableColumns: ColumnDef<ReverseProxyFlatTarget>[] = [
+  {
+    id: "target_id",
+    accessorKey: "target_id",
+    filterFn: "exactMatch",
+  },
+  {
+    id: "domain",
+    accessorFn: (row) => row.proxy.domain,
+    header: ({ column }) => (
+      <DataTableHeader column={column}>URL</DataTableHeader>
+    ),
+    sortingFn: "text",
+    cell: ({ row }) => {
+      const target = row.original;
+      const path = target.path
+        ? target.path.startsWith("/")
+          ? target.path
+          : `/${target.path}`
+        : "";
+      const fullUrl = `${target.proxy.domain}${path}`;
+      const disabled = target.enabled === false;
+      const isEnabled = target.proxy.enabled && target.enabled !== false;
+
+      return (
+        <div className={disabled ? "opacity-40" : ""}>
+          <ReverseProxyNameCell
+            domain={fullUrl}
+            enabled={isEnabled}
+            showChevron={false}
+          />
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "arrow",
+    header: "",
+    cell: ({ row }) => (
+      <ReverseProxyArrowCell disabled={row.original.enabled === false} />
+    ),
+  },
+  {
+    accessorKey: "host",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Destination</DataTableHeader>
+    ),
+    cell: ({ row }) => <ReverseProxyDestinationCell target={row.original} />,
+  },
+  {
+    accessorKey: "enabled",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Active</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyTargetProvider value={row.original.proxy}>
+        <ReverseProxyTargetActiveCell target={row.original} />
+      </ReverseProxyTargetProvider>
+    ),
+  },
+  {
+    accessorKey: "proxy_cluster",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Cluster</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyClusterCell reverseProxy={row.original.proxy} />
+    ),
+  },
+  {
+    accessorKey: "target_type",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Resource</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyTargetDevice target={row.original} showDescription />
+    ),
+  },
+  {
+    accessorKey: "auth",
+    header: ({ column }) => (
+      <DataTableHeader column={column}>Authentication</DataTableHeader>
+    ),
+    cell: ({ row }) => (
+      <ReverseProxyAuthCell reverseProxy={row.original.proxy} />
+    ),
+  },
+  {
+    accessorKey: "actions",
+    header: "",
+    cell: ({ row }) => (
+      <ReverseProxyFlatTargetActionCell target={row.original} />
+    ),
+  },
+  {
+    id: "searchString",
+    accessorFn: (row) => {
+      return [row.proxy.domain, row.destination, row.host, row.port, row.path].join("");
+    },
+  },
+];
+
+type Props = {
+  targets: ReverseProxyFlatTarget[];
+  isLoading?: boolean;
+  hideResourceColumn?: boolean;
+  emptyTableTitle?: string;
+  emptyTableDescription?: string;
+};
+
+export const ReverseProxyFlatTargetsTable = ({
+  targets,
+  isLoading,
+  hideResourceColumn,
+  emptyTableTitle,
+  emptyTableDescription,
+}: Props) => {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "domain", desc: false },
+  ]);
+  const { permission } = usePermissions();
+  const { openModal } = useReverseProxies();
+  const params = useSearchParams();
+  const router = useRouter();
+  const resourceId = params.get("target") ?? undefined;
+
+  const removeResourceParam = useCallback(() => {
+    if (!resourceId) return;
+    const newParams = new URLSearchParams(params.toString());
+    newParams.delete("target");
+    router.replace(`?${newParams.toString()}`, { scroll: false });
+  }, [resourceId, params, router]);
+
+  return (
+    <DataTable
+      wrapperComponent={Card}
+      wrapperProps={{ className: "mt-6 w-full" }}
+      isLoading={isLoading}
+      inset={false}
+      minimal={true}
+      showSearchAndFilters={true}
+      tableClassName="mt-0"
+      text="Service"
+      sorting={sorting}
+      setSorting={setSorting}
+      columns={FlatTargetsTableColumns}
+      data={targets}
+      keepStateInLocalStorage={false}
+      searchPlaceholder="Search by URL, destination, or target..."
+      initialFilters={
+        resourceId ? [{ id: "target_id", value: resourceId }] : undefined
+      }
+      initialSearch={resourceId}
+      onFilterReset={removeResourceParam}
+      columnVisibility={{
+        searchString: false,
+        target_id: false,
+        target_type: !hideResourceColumn,
+      }}
+      paginationPaddingClassName="px-0 pt-8"
+      getStartedCard={
+        <NoResults
+          className="py-4"
+          title={emptyTableTitle}
+          description={emptyTableDescription}
+          icon={<ReverseProxyIcon size={20} className="fill-nb-gray-300" />}
+        />
+      }
+      rightSide={() => (
+        <Button
+          variant={"primary"}
+          className={"ml-auto"}
+          onClick={() => openModal()}
+          disabled={!permission?.services?.create}
+        >
+          <PlusCircle size={16} />
+          Add Service
+        </Button>
+      )}
+    >
+      {(table) => (
+        <DataTableRowsPerPage
+          table={table}
+          disabled={!targets || targets.length === 0}
+        />
+      )}
+    </DataTable>
+  );
+};
diff --git a/src/modules/settings/ClientSettingsTab.tsx b/src/modules/settings/ClientSettingsTab.tsx
index 02548013b..e9f39a33d 100644
--- a/src/modules/settings/ClientSettingsTab.tsx
+++ b/src/modules/settings/ClientSettingsTab.tsx
@@ -193,7 +193,15 @@ export default function ClientSettingsTab({ account }: Readonly<Props>) {
             <HelpText>
               Select how NetBird clients handle automatic updates by choosing
               the latest version, a custom version, or disabling updates
-              altogether.
+              altogether. Automatic Updates require at least NetBird{" "}
+              <span className={"text-white font-medium"}>v0.61.0</span>.{" "}
+              <InlineLink
+                href={"https://docs.netbird.io/manage/peers/auto-update"}
+                target={"_blank"}
+              >
+                Learn more
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
             </HelpText>
             <div className={"gap-4 items-center grid grid-cols-2"}>
               <SelectDropdown
@@ -216,14 +224,12 @@ export default function ClientSettingsTab({ account }: Readonly<Props>) {
           </div>
 
           <div className={"mt-3"}>
-            <h2 className={"text-lg font-medium"}>
+            <Label>
+              <FlaskConicalIcon size={15} />
               Experimental
-              <FlaskConicalIcon
-                size={16}
-                className={"inline ml-1.5 relative -top-[2px]"}
-              />
-            </h2>
-            <div className={"text-sm text-gray-400"}>
+            </Label>
+
+            <HelpText>
               Lazy connections are an experimental feature. Functionality and
               behavior may evolve. Instead of maintaining always-on connections,
               NetBird activates them on-demand based on activity or signaling.{" "}
@@ -234,7 +240,7 @@ export default function ClientSettingsTab({ account }: Readonly<Props>) {
                 Learn more
                 <ExternalLinkIcon size={12} />
               </InlineLink>
-            </div>
+            </HelpText>
           </div>
           <FancyToggleSwitch
             value={lazyConnection}
diff --git a/src/modules/setup-keys/SetupKeyEphemeralCell.tsx b/src/modules/setup-keys/SetupKeyEphemeralCell.tsx
deleted file mode 100644
index 1ebcf5081..000000000
--- a/src/modules/setup-keys/SetupKeyEphemeralCell.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Badge from "@components/Badge";
-import FullTooltip from "@components/FullTooltip";
-import { cn } from "@utils/helpers";
-import { HelpCircle } from "lucide-react";
-import * as React from "react";
-import EmptyRow from "@/modules/common-table-rows/EmptyRow";
-
-type Props = {
-  ephemeral: boolean;
-};
-export default function SetupKeyEphemeralCell({ ephemeral }: Props) {
-  return ephemeral ? (
-    <FullTooltip
-      interactive={false}
-      content={
-        <div className={"max-w-xs text-xs"}>
-          Peers that are offline for over 10 minutes will be removed
-          automatically.
-        </div>
-      }
-      disabled={!ephemeral}
-    >
-      <Badge variant={"gray"}>
-        <span
-          className={cn(
-            "h-2 w-2 rounded-full mr-0.5",
-            ephemeral ? "bg-yellow-500" : "bg-nb-gray-400",
-          )}
-        ></span>
-        Ephemeral
-        <HelpCircle size={12} />
-      </Badge>
-    </FullTooltip>
-  ) : (
-    <EmptyRow />
-  );
-}
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
index 8b93cc67f..ddba852a4 100644
--- a/src/utils/api.tsx
+++ b/src/utils/api.tsx
@@ -26,6 +26,7 @@ type RequestOptions = {
   origin?: string;
   globalParams?: Params;
   ignoreGlobalParams?: boolean;
+  refreshInterval?: number;
   blob?: boolean;
   shouldRetryOnError?: boolean;
 };
@@ -154,6 +155,7 @@ export default function useFetchApi<T>(
       revalidateIfStale: revalidate,
       revalidateOnReconnect: revalidate,
       shouldRetryOnError: options?.shouldRetryOnError ?? true,
+      refreshInterval: options?.refreshInterval,
     },
   );
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b4d495325..a5caceeb3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -108,7 +108,7 @@ const config: Config = {
           "100": "#e4e7e9",
           "200": "#cbd2d6",
           "250": "#b7c0c6",
-          "300": "#aab4bd",
+          "300": "#a3adb5",
           "350": "#8f9ca8",
           "400": "#7c8994",
           "500": "#616e79",
@@ -116,7 +116,7 @@ const config: Config = {
           "700": "#474e57",
           "800": "#3f444b",
           "850": "#363b40",
-          "900": "#32363D",
+          "900": "#2e3238",
           "910": "#2b2f33",
           "920": "#25282d",
           "925": "#1e2123",
@@ -124,7 +124,7 @@ const config: Config = {
           "935": "#1f2124",
           "940": "#1c1e21",
           "950": "#181a1d",
-          "960": "#15171a",
+          "960": "#16181b",
         },
 
         netbird: {

From 87e0a6eed162918962c2515e8066a118b9a085ac Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 12 Feb 2026 14:59:42 +0100
Subject: [PATCH 02/15] Add DialogTitle to Onboarding.tsx

---
 src/modules/onboarding/Onboarding.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/modules/onboarding/Onboarding.tsx b/src/modules/onboarding/Onboarding.tsx
index ae3234afe..92f6d5be6 100644
--- a/src/modules/onboarding/Onboarding.tsx
+++ b/src/modules/onboarding/Onboarding.tsx
@@ -3,7 +3,8 @@ import { Modal, ModalPortal } from "@components/modal/Modal";
 import { NetBirdLogo } from "@components/NetBirdLogo";
 import { notify } from "@components/Notification";
 import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
-import { DialogContent } from "@radix-ui/react-dialog";
+import { DialogContent, DialogTitle } from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { cn } from "@utils/helpers";
 import { isNetBirdHosted } from "@utils/netbird";
@@ -304,6 +305,9 @@ export const Onboarding = ({
           }
         >
           <div>
+            <VisuallyHidden asChild>
+              <DialogTitle>Onboarding</DialogTitle>
+            </VisuallyHidden>
             <div
               className={cn(
                 "sm:px-4 py-10 max-w-6xl mx-auto flex flex-col items-center",

From 15b5dfa12d17380c645322a8bb84c6c63daa6f31 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 12 Feb 2026 16:33:45 +0100
Subject: [PATCH 03/15] Remove example data, fix typos and fix coderabbit
 comments

---
 src/app/(dashboard)/peer/page.tsx             |   4 +-
 src/app/(dashboard)/reverse-proxy/page.tsx    |   2 +-
 src/components/Breadcrumbs.tsx                |   8 +-
 src/components/DeviceCard.tsx                 |   7 +-
 src/components/RadioGroup.tsx                 |   3 -
 src/components/SettingCard.tsx                |  15 ++-
 src/components/SidebarItem.tsx                |   2 +-
 src/contexts/ReverseProxiesProvider.tsx       |  48 ++++----
 src/interfaces/ReverseProxy.ts                |  10 +-
 src/modules/networks/NetworkProvider.tsx      |  10 +-
 .../resources/ResourceExposeServiceCell.tsx   |   8 +-
 .../resources/ResourcesTabContent.tsx         |   2 +-
 .../NetworkRoutingPeersTabContent.tsx         |   4 +-
 src/modules/peer/PeerRoutesTable.tsx          |   3 -
 src/modules/posture-checks/usePostureCheck.ts |  18 ++-
 .../domain/CustomDomainModal.tsx              |   1 -
 .../domain/CustomDomainVerificationModal.tsx  |   6 +-
 .../table/ReverseProxyDestinationCell.tsx     |   3 +-
 .../table/ReverseProxyNameCell.tsx            |   8 +-
 .../reverse-proxy/table/ReverseProxyTable.tsx | 114 ++----------------
 .../table/ReverseProxyTargetsCell.tsx         |   2 +-
 .../targets/ReverseProxyTargetActiveCell.tsx  |   5 +-
 .../targets/ReverseProxyTargetDevice.tsx      |   4 +-
 .../targets/ReverseProxyTargetModal.tsx       |  38 +++---
 24 files changed, 120 insertions(+), 205 deletions(-)

diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index e43560dd1..b045714f7 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -307,7 +307,7 @@ const PeerHeader = () => {
               onClick={() => updatePeer()}
               disabled={
                 !hasChanges ||
-                !permission.peers.read ||
+                !permission.peers.update ||
                 !permission.groups.update
               }
             >
@@ -358,7 +358,7 @@ const PeerOverviewTabs = () => {
           </TabsTrigger>
         )}
 
-        {peer?.id && permission.routes.read && (
+        {peer?.id && permission.services?.read && (
           <TabsTrigger value={"reverse-proxies"}>
             <ReverseProxyIcon
               size={16}
diff --git a/src/app/(dashboard)/reverse-proxy/page.tsx b/src/app/(dashboard)/reverse-proxy/page.tsx
index 1019c22c1..8f5c49739 100644
--- a/src/app/(dashboard)/reverse-proxy/page.tsx
+++ b/src/app/(dashboard)/reverse-proxy/page.tsx
@@ -8,7 +8,7 @@ export default function ReverseProxyRedirectPage() {
   const router = useRouter();
 
   useEffect(() => {
-    router.push("/reverse-proxy/services");
+    router.replace("/reverse-proxy/services");
   }, [router]);
 
   return <FullScreenLoading height={"auto"} />;
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 1e5e13bfc..2ebb663cb 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@utils/helpers";
 import { ChevronRightIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import React from "react";
 
 type Props = {
@@ -25,8 +25,6 @@ export const Item = ({
   active,
   disabled = false,
 }: ItemProps) => {
-  const router = useRouter();
-
   return (
     <div
       className={cn(
@@ -46,9 +44,9 @@ export const Item = ({
       >
         {icon && icon}
         {href ? (
-          <span onClick={() => router.push(href)} data-cy={"breadcrumb-item"}>
+          <Link href={href} data-cy={"breadcrumb-item"}>
             {label}
-          </span>
+          </Link>
         ) : (
           label
         )}
diff --git a/src/components/DeviceCard.tsx b/src/components/DeviceCard.tsx
index 9a2822fa6..950fb944d 100644
--- a/src/components/DeviceCard.tsx
+++ b/src/components/DeviceCard.tsx
@@ -37,8 +37,11 @@ export const DeviceCard = ({
           "group-hover:bg-nb-gray-800 relative",
         )}
       >
-        {device && <PeerOSIcon os={device.os} />}
-        {resource?.type && <ResourceIcon type={resource.type} />}
+        {device ? (
+          <PeerOSIcon os={device.os} />
+        ) : resource?.type ? (
+          <ResourceIcon type={resource.type} />
+        ) : null}
 
         {device?.country_code && (
           <div className={"absolute -bottom-[4px] -right-[4px]"}>
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
index e0064460f..083045f04 100644
--- a/src/components/RadioGroup.tsx
+++ b/src/components/RadioGroup.tsx
@@ -1,7 +1,6 @@
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 import { cn } from "@utils/helpers";
 import * as React from "react";
-import { useState } from "react";
 
 type Props = {
   value: string;
@@ -10,10 +9,8 @@ type Props = {
 };
 
 export const RadioGroup = ({ value, onChange, children }: Props) => {
-  const [defaultValue] = useState(value);
   return (
     <RadixRadioGroup.Root
-      defaultValue={defaultValue}
       value={value}
       onValueChange={onChange}
       className={
diff --git a/src/components/SettingCard.tsx b/src/components/SettingCard.tsx
index 1f04b52b1..242607bb9 100644
--- a/src/components/SettingCard.tsx
+++ b/src/components/SettingCard.tsx
@@ -23,7 +23,15 @@ function SettingCardItem({
 }: Readonly<SettingCardItemProps>) {
   return (
     <div
+      role="button"
+      tabIndex={0}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       className={
         "flex justify-between gap-10 px-6 border-t border-nb-gray-920 first:border-t-0 py-5 hover:bg-nb-gray-935 cursor-pointer transition-colors"
       }
@@ -87,6 +95,9 @@ function SettingCard({ children, className }: Readonly<SettingCardProps>) {
   );
 }
 
-SettingCard.Item = SettingCardItem;
+const SettingCardWithItem = SettingCard as React.FC<Readonly<SettingCardProps>> & {
+  Item: typeof SettingCardItem;
+};
+SettingCardWithItem.Item = SettingCardItem;
 
-export default SettingCard;
+export default SettingCardWithItem;
diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
index 7887505e8..7656436f3 100644
--- a/src/components/SidebarItem.tsx
+++ b/src/components/SidebarItem.tsx
@@ -41,7 +41,7 @@ export default function SidebarItem({
   // Check if any child route is active (for collapsible items)
   const hasActiveChild = useMemo(() => {
     if (!collapsible || !href) return false;
-    return path.startsWith(href);
+    return path === href || path.startsWith(href + "/");
   }, [collapsible, href, path]);
 
   const [open, setOpen] = React.useState(hasActiveChild);
diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
index 79cef8332..37f9ac3f2 100644
--- a/src/contexts/ReverseProxiesProvider.tsx
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -19,7 +19,7 @@ import {
   ReverseProxyFlatTarget,
   ReverseProxyTarget,
   ReverseProxyTargetProtocol,
-  ReversProxyTargetType,
+  ReverseProxyTargetType,
 } from "@/interfaces/ReverseProxy";
 import ReverseProxyModal from "@/modules/reverse-proxy/ReverseProxyModal";
 import ReverseProxyTargetModal from "@/modules/reverse-proxy/targets/ReverseProxyTargetModal";
@@ -191,12 +191,7 @@ export default function ReverseProxiesProvider({
       if (isEditing) {
         // Update existing target - match against the original target before editing
         updatedTargets = targetModalProxy.targets.map((t) => {
-          const isSameTarget =
-            t.path === editingTarget.path &&
-            t.host === editingTarget.host &&
-            t.port === editingTarget.port &&
-            t.protocol === editingTarget.protocol;
-          return isSameTarget ? target : t;
+          return isSameTarget(t, editingTarget) ? target : t;
         });
       } else {
         // Add new target
@@ -304,12 +299,7 @@ export default function ReverseProxiesProvider({
     async (proxy: ReverseProxy, target: ReverseProxyTarget) => {
       const newEnabled = !target.enabled;
       const updatedTargets = proxy.targets.map((t) => {
-        // Match by unique combination: path, host, and port
-        const isSameTarget =
-          t.path === target.path &&
-          t.host === target.host &&
-          t.port === target.port;
-        return isSameTarget ? { ...t, enabled: newEnabled } : t;
+        return isSameTarget(t, target) ? { ...t, enabled: newEnabled } : t;
       });
 
       notify({
@@ -379,11 +369,7 @@ export default function ReverseProxiesProvider({
         });
       } else {
         const updatedTargets = proxy.targets.filter((t) => {
-          const isSameTarget =
-            t.path === target.path &&
-            t.host === target.host &&
-            t.port === target.port;
-          return !isSameTarget;
+          return !isSameTarget(t, target);
         });
 
         notify({
@@ -550,7 +536,7 @@ export function flattenReverseProxies({
       // Filter by peer if provided
       if (peer) {
         if (
-          target.target_type !== ReversProxyTargetType.PEER ||
+          target.target_type !== ReverseProxyTargetType.PEER ||
           target.target_id !== peer.id
         ) {
           return;
@@ -580,21 +566,31 @@ export function flattenReverseProxies({
   return flattened;
 }
 
+function isSameTarget(a: ReverseProxyTarget, b: ReverseProxyTarget): boolean {
+  return (
+    a.path === b.path &&
+    a.host === b.host &&
+    a.port === b.port &&
+    a.protocol === b.protocol
+  );
+}
+
 export function sanitizeTargets(
   targets: ReverseProxyTarget[],
 ): ReverseProxyTarget[] {
   return targets.map((t) => {
-    if (t.target_type === ReversProxyTargetType.SUBNET) return t;
-    const { host: _, ...rest } = t;
+    const { destination: _, ...target } = t;
+    if (t.target_type === ReverseProxyTargetType.SUBNET) return target as ReverseProxyTarget;
+    const { host: __, ...rest } = target;
     return rest as ReverseProxyTarget;
   });
 }
 
-export function isResourceTargetType(type: ReversProxyTargetType): boolean {
+export function isResourceTargetType(type: ReverseProxyTargetType): boolean {
   return (
-    type === ReversProxyTargetType.HOST ||
-    type === ReversProxyTargetType.DOMAIN ||
-    type === ReversProxyTargetType.SUBNET
+    type === ReverseProxyTargetType.HOST ||
+    type === ReverseProxyTargetType.DOMAIN ||
+    type === ReverseProxyTargetType.SUBNET
   );
 }
 
@@ -624,7 +620,7 @@ function resolveTargetHost(
   resources?: NetworkResource[],
 ): string {
   if (target.host) return "";
-  if (target.target_type === ReversProxyTargetType.PEER) {
+  if (target.target_type === ReverseProxyTargetType.PEER) {
     return peers?.find((p) => p.id === target.target_id)?.ip ?? "";
   }
   if (isResourceTargetType(target.target_type)) {
diff --git a/src/interfaces/ReverseProxy.ts b/src/interfaces/ReverseProxy.ts
index 8fee3ccf9..4b0d236dd 100644
--- a/src/interfaces/ReverseProxy.ts
+++ b/src/interfaces/ReverseProxy.ts
@@ -12,9 +12,9 @@ export interface ReverseProxy {
 }
 
 export interface ReverseProxyMeta {
-  created_at: Date;
+  created_at: string;
   status: ReverseProxyStatus;
-  certificate_issued_at?: Date;
+  certificate_issued_at?: string;
 }
 
 export enum ReverseProxyStatus {
@@ -22,13 +22,13 @@ export enum ReverseProxyStatus {
   ACTIVE = "active",
   TUNNEL_NOT_CREATED = "tunnel_not_created",
   CERTIFICATE_PENDING = "certificate_pending",
-  CERTIFICATED_FAILED = "certificate_failed",
+  CERTIFICATE_FAILED = "certificate_failed",
   ERROR = "error",
 }
 
 export interface ReverseProxyTarget {
   target_id?: string;
-  target_type: ReversProxyTargetType;
+  target_type: ReverseProxyTargetType;
   path?: string;
   protocol: ReverseProxyTargetProtocol;
   host?: string;
@@ -70,7 +70,7 @@ export enum ReverseProxyDomainType {
   CUSTOM = "custom",
 }
 
-export enum ReversProxyTargetType {
+export enum ReverseProxyTargetType {
   PEER = "peer",
   HOST = "host",
   DOMAIN = "domain",
diff --git a/src/modules/networks/NetworkProvider.tsx b/src/modules/networks/NetworkProvider.tsx
index be11221a3..a7d825557 100644
--- a/src/modules/networks/NetworkProvider.tsx
+++ b/src/modules/networks/NetworkProvider.tsx
@@ -109,10 +109,12 @@ export const NetworkProvider = ({
       destinationGroups: hasResourceGroups ? resource?.groups : undefined,
       destinationResource: hasResourceGroups
         ? undefined
-        : ({
-            id: resource?.id,
-            type: resource?.type,
-          } as PolicyRuleResource),
+        : resource
+          ? ({
+              id: resource.id,
+              type: resource.type,
+            } as PolicyRuleResource)
+          : undefined,
       name:
         network && !resource
           ? `${network?.name} Policy`
diff --git a/src/modules/networks/resources/ResourceExposeServiceCell.tsx b/src/modules/networks/resources/ResourceExposeServiceCell.tsx
index e3a33940f..6ab74fc13 100644
--- a/src/modules/networks/resources/ResourceExposeServiceCell.tsx
+++ b/src/modules/networks/resources/ResourceExposeServiceCell.tsx
@@ -41,7 +41,8 @@ export const ResourceExposeServiceCell = ({ resource }: Props) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            router.push(`/network?id=${network?.id}&tab=services&target=${resource.id}`);
+            if (!network?.id) return;
+            router.push(`/network?id=${network.id}&tab=services&target=${resource.id}`);
           }}
         >
           <ReverseProxyIcon size={14} className={"fill-green-500"} />
@@ -60,11 +61,12 @@ export const ResourceExposeServiceCell = ({ resource }: Props) => {
             initialResource: resource,
             initialNetwork: network,
             onSuccess: () => {
-              router.push(`/network?id=${network?.id}&tab=services`);
+              if (!network?.id) return;
+              router.push(`/network?id=${network.id}&tab=services`);
             },
           });
         }}
-        disabled={!permission.routes?.create}
+        disabled={!permission.services?.create}
       >
         <CirclePlusIcon size={12} />
         Expose Service
diff --git a/src/modules/networks/resources/ResourcesTabContent.tsx b/src/modules/networks/resources/ResourcesTabContent.tsx
index c0e48baf3..d8085cd34 100644
--- a/src/modules/networks/resources/ResourcesTabContent.tsx
+++ b/src/modules/networks/resources/ResourcesTabContent.tsx
@@ -26,7 +26,7 @@ export const ResourcesTabContent = ({
             Add resources to this network to control what peers can access.
           </Paragraph>
           <Paragraph>
-            Learn more about
+            Learn more about{" "}
             <InlineLink
               href={"https://docs.netbird.io/how-to/networks#resources"}
               target={"_blank"}
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
index 9cda0a2c2..ab5865b54 100644
--- a/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersTabContent.tsx
@@ -27,14 +27,14 @@ export const NetworkRoutingPeersTabContent = ({
   const data = useMemo(() => {
     return routers?.map((router) => {
       const peer = peers?.find((peer) => peer.id === router.peer);
-      const user = users?.find((user) => user.id === router.peer);
+      const user = peer ? users?.find((user) => user.id === peer.user_id) : undefined;
       const group = groups?.find(
         (group) => group.id === router?.peer_groups?.[0],
       );
 
       return {
         ...router,
-        search: `${peer?.name} ${peer?.ip} ${user?.name} ${user?.id} ${group?.name}`,
+        search: `${peer?.name ?? ""} ${peer?.ip ?? ""} ${user?.name ?? ""} ${user?.id ?? ""} ${group?.name ?? ""}`,
       };
     });
   }, [users, peers, routers, groups]);
diff --git a/src/modules/peer/PeerRoutesTable.tsx b/src/modules/peer/PeerRoutesTable.tsx
index 336526f1a..9d7df6625 100644
--- a/src/modules/peer/PeerRoutesTable.tsx
+++ b/src/modules/peer/PeerRoutesTable.tsx
@@ -17,7 +17,6 @@ import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroup
 type Props = {
   peerRoutes?: Route[];
   isLoading: boolean;
-  headingTarget?: HTMLHeadingElement | null;
   peer: Peer;
 };
 
@@ -72,7 +71,6 @@ export default function PeerRoutesTable({
   peerRoutes,
   isLoading,
   peer,
-  headingTarget,
 }: Props) {
   // Default sorting state of the table
   const [sorting, setSorting] = useState<SortingState>([
@@ -89,7 +87,6 @@ export default function PeerRoutesTable({
         wrapperProps={{
           className: cn("w-full"),
         }}
-        headingTarget={headingTarget}
         text={"Network Routes"}
         tableClassName={"mt-0"}
         getStartedCard={
diff --git a/src/modules/posture-checks/usePostureCheck.ts b/src/modules/posture-checks/usePostureCheck.ts
index 216038f2d..417c6b33f 100644
--- a/src/modules/posture-checks/usePostureCheck.ts
+++ b/src/modules/posture-checks/usePostureCheck.ts
@@ -118,7 +118,11 @@ export const usePostureCheck = ({ postureCheck, onSuccess }: Props = {}) => {
     checkToUpdateOrCreate?: PostureCheck,
   ) => {
     const call = () => updateOrCreate(checkToUpdateOrCreate || state);
-    let response = undefined;
+    const promise = call().then((check) => {
+      mutate("/posture-checks");
+      onSuccess && onSuccess(check);
+      return check;
+    });
     notify({
       title: `Posture Check ${state.name}`,
       description: `Posture Check was ${
@@ -127,17 +131,9 @@ export const usePostureCheck = ({ postureCheck, onSuccess }: Props = {}) => {
       loadingMessage: `${
         postureCheck ? "Updating" : "Creating"
       } your posture check...`,
-      promise: call().then((check) => {
-        mutate("/posture-checks");
-        onSuccess && onSuccess(check);
-        response = check;
-      }),
+      promise,
     });
-    if (response === undefined) {
-      return Promise.reject("Failed to create or update posture check");
-    } else {
-      return Promise.resolve(response);
-    }
+    return promise;
   };
 
   return { state, dispatch, updateOrCreateAndNotify, updateOrCreate };
diff --git a/src/modules/reverse-proxy/domain/CustomDomainModal.tsx b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
index 31372459d..746bba4f4 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
@@ -116,7 +116,6 @@ export const CustomDomainModal = ({
             <>
               <div>
                 <Label>Domain</Label>
-                <HelpText></HelpText>
                 <Input
                   autoFocus
                   value={domain}
diff --git a/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx b/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
index 516fe6410..cf9b2f1e5 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainVerificationModal.tsx
@@ -147,7 +147,11 @@ export const CustomDomainVerificationModal = ({
               <Button variant={"secondary"}>Verify Later</Button>
             </ModalClose>
 
-            <Button variant={"primary"} onClick={handleStartVerification}>
+            <Button
+              variant={"primary"}
+              onClick={handleStartVerification}
+              disabled={!cnameTarget}
+            >
               Start Verification
             </Button>
           </div>
diff --git a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
index 53a418f2c..b4992853f 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
@@ -11,7 +11,8 @@ type Props = {
 export default function ReverseProxyDestinationCell({
   target,
 }: Readonly<Props>) {
-  if (target.destination === "unknown") return <EmptyRow />;
+  if (!target.destination || target.destination === "unknown")
+    return <EmptyRow />;
 
   return (
     <div
diff --git a/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
index 687f24a87..bcd5d8a5d 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyNameCell.tsx
@@ -57,9 +57,13 @@ export default function ReverseProxyNameCell({
           )}
         />
         <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 truncate">
-          <ExternalLinkText href={`https://${displayDomain}`}>
+          {displayDomain ? (
+            <ExternalLinkText href={`https://${displayDomain}`}>
+              <span className="font-medium truncate">{displayDomain}</span>
+            </ExternalLinkText>
+          ) : (
             <span className="font-medium truncate">{displayDomain}</span>
-          </ExternalLinkText>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/modules/reverse-proxy/table/ReverseProxyTable.tsx b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
index ad0f9b641..ecdc72cb5 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
@@ -19,8 +19,6 @@ import { useLocalStorage } from "@/hooks/useLocalStorage";
 import {
   REVERSE_PROXY_DOCS_LINK,
   ReverseProxy,
-  ReverseProxyTargetProtocol,
-  ReversProxyTargetType,
 } from "@/interfaces/ReverseProxy";
 import ReverseProxyActionCell from "@/modules/reverse-proxy/table/ReverseProxyActionCell";
 import ReverseProxyActiveCell from "@/modules/reverse-proxy/table/ReverseProxyActiveCell";
@@ -100,97 +98,6 @@ const ReverseProxyColumns: ColumnDef<ReverseProxy>[] = [
   },
 ];
 
-// Example data for development/demo purposes
-const exampleReverseProxies: ReverseProxy[] = [
-  {
-    id: "rp-1",
-    name: "grafana.netbird.cloud",
-    domain: "grafana.netbird.cloud",
-    proxy_cluster: "eu.proxy.netbird.io",
-    targets: [
-      {
-        target_id: "t1",
-        target_type: ReversProxyTargetType.PEER,
-        protocol: ReverseProxyTargetProtocol.HTTP,
-        host: "localhost",
-        port: 3000,
-        enabled: true,
-      },
-    ],
-    enabled: true,
-    auth: {
-      password_auth: { enabled: true, password: "secret" },
-    },
-  },
-  {
-    id: "rp-2",
-    name: "jenkins.netbird.cloud",
-    domain: "jenkins.netbird.cloud",
-    proxy_cluster: "us.proxy.netbird.io",
-    targets: [
-      {
-        target_id: "t2",
-        target_type: ReversProxyTargetType.PEER,
-        protocol: ReverseProxyTargetProtocol.HTTP,
-        host: "localhost",
-        port: 8080,
-        enabled: true,
-      },
-      {
-        target_id: "t3",
-        target_type: ReversProxyTargetType.PEER,
-        protocol: ReverseProxyTargetProtocol.HTTP,
-        host: "localhost",
-        port: 8080,
-        enabled: true,
-      },
-    ],
-    enabled: true,
-    auth: {
-      bearer_auth: { enabled: true, distribution_groups: ["developers"] },
-      pin_auth: { enabled: true, pin: "1234" },
-    },
-  },
-  {
-    id: "rp-3",
-    name: "internal-api.netbird.io",
-    domain: "internal-api.netbird.io",
-    proxy_cluster: "eu.proxy.netbird.io",
-    targets: [
-      {
-        target_id: "t4",
-        target_type: ReversProxyTargetType.HOST,
-        protocol: ReverseProxyTargetProtocol.HTTPS,
-        host: "api.internal",
-        port: 443,
-        path: "/v1",
-        enabled: true,
-      },
-    ],
-    enabled: false,
-    auth: {
-      link_auth: { enabled: true },
-    },
-  },
-  {
-    id: "rp-4",
-    name: "docs.netbird.app",
-    domain: "docs.netbird.app",
-    targets: [
-      {
-        target_id: "t5",
-        target_type: ReversProxyTargetType.PEER,
-        protocol: ReverseProxyTargetProtocol.HTTP,
-        host: "localhost",
-        port: 4000,
-        enabled: true,
-      },
-    ],
-    enabled: true,
-    // No auth - public access, no cluster (broadcasts to all)
-  },
-];
-
 type Props = {
   headingTarget?: HTMLHeadingElement | null;
 };
@@ -211,8 +118,6 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
     ],
   );
 
-  const data = reverseProxies ?? exampleReverseProxies;
-
   return (
     <DataTable
       headingTarget={headingTarget}
@@ -222,7 +127,7 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
       sorting={sorting}
       setSorting={setSorting}
       columns={ReverseProxyColumns}
-      data={data}
+      data={reverseProxies}
       useRowId={true}
       searchPlaceholder={"Search by URL, domain, or target..."}
       columnVisibility={{ searchString: false }}
@@ -275,7 +180,7 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
       }
       rightSide={() => (
         <>
-          {data && data?.length > 0 && (
+          {reverseProxies && reverseProxies?.length > 0 && (
             <Button
               variant={"primary"}
               className={"ml-auto"}
@@ -291,13 +196,13 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
     >
       {(table) => (
         <>
-          <ButtonGroup disabled={data?.length == 0}>
+          <ButtonGroup disabled={reverseProxies?.length == 0}>
             <ButtonGroup.Button
               onClick={() => {
                 table.setPageIndex(0);
                 table.getColumn("enabled")?.setFilterValue(undefined);
               }}
-              disabled={data?.length == 0}
+              disabled={reverseProxies?.length == 0}
               variant={
                 table.getColumn("enabled")?.getFilterValue() === undefined
                   ? "tertiary"
@@ -311,7 +216,7 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
                 table.setPageIndex(0);
                 table.getColumn("enabled")?.setFilterValue(true);
               }}
-              disabled={data?.length == 0}
+              disabled={reverseProxies?.length == 0}
               variant={
                 table.getColumn("enabled")?.getFilterValue() === true
                   ? "tertiary"
@@ -325,7 +230,7 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
                 table.setPageIndex(0);
                 table.getColumn("enabled")?.setFilterValue(false);
               }}
-              disabled={data?.length == 0}
+              disabled={reverseProxies?.length == 0}
               variant={
                 table.getColumn("enabled")?.getFilterValue() === false
                   ? "tertiary"
@@ -335,9 +240,12 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
               Inactive
             </ButtonGroup.Button>
           </ButtonGroup>
-          <DataTableRowsPerPage table={table} disabled={data?.length == 0} />
+          <DataTableRowsPerPage
+            table={table}
+            disabled={reverseProxies?.length == 0}
+          />
           <DataTableRefreshButton
-            isDisabled={data?.length == 0}
+            isDisabled={reverseProxies?.length == 0}
             onClick={() => {
               mutate("/reverse-proxies").then();
             }}
diff --git a/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
index 73550cb15..b1203f0f2 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyTargetsCell.tsx
@@ -42,7 +42,7 @@ export default function ReverseProxyTargetsCell({
           openTargetModal({ proxy: reverseProxy });
         }}
         className={"!px-3"}
-        disabled={!permission?.routes?.create}
+        disabled={!permission?.services?.create}
       >
         <PlusCircle size={12} />
         Add Target
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
index 17ea0f3f0..6b18bee53 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetActiveCell.tsx
@@ -1,5 +1,6 @@
 import { ToggleSwitch } from "@components/ToggleSwitch";
 import * as React from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
 import { ReverseProxyTarget } from "@/interfaces/ReverseProxy";
 import { useReverseProxyTarget } from "./ReverseProxyTargetContext";
@@ -13,6 +14,7 @@ export default function ReverseProxyTargetActiveCell({
 }: Readonly<Props>) {
   const reverseProxy = useReverseProxyTarget();
   const { handleToggleTarget } = useReverseProxies();
+  const { permission } = usePermissions();
 
   return (
     <div
@@ -21,8 +23,9 @@ export default function ReverseProxyTargetActiveCell({
       }}
     >
       <ToggleSwitch
-        checked={target.enabled !== false}
+        checked={target.enabled}
         size={"small"}
+        disabled={!permission?.services?.update}
         onCheckedChange={() => {
           handleToggleTarget(reverseProxy, target);
         }}
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
index 3efc266d6..75592e2f4 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetDevice.tsx
@@ -6,7 +6,7 @@ import { DeviceCard } from "@components/DeviceCard";
 import { Network, NetworkResource } from "@/interfaces/Network";
 import {
   ReverseProxyTarget,
-  ReversProxyTargetType,
+  ReverseProxyTargetType,
 } from "@/interfaces/ReverseProxy";
 import { isResourceTargetType } from "@/contexts/ReverseProxiesProvider";
 import { cn } from "@utils/helpers";
@@ -31,7 +31,7 @@ export const ReverseProxyTargetDevice = ({
   const { data: networks, isLoading: isNetworksLoading } =
     useFetchApi<Network[]>(`/networks`);
 
-  const isPeer = target.target_type === ReversProxyTargetType.PEER;
+  const isPeer = target.target_type === ReverseProxyTargetType.PEER;
   const isResource = isResourceTargetType(target.target_type);
 
   const peer = isPeer
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
index f63dde76f..2e0f531a7 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -32,7 +32,7 @@ import {
   ReverseProxy,
   ReverseProxyTarget,
   ReverseProxyTargetProtocol,
-  ReversProxyTargetType,
+  ReverseProxyTargetType,
 } from "@/interfaces/ReverseProxy";
 import {
   defaultPortForProtocol,
@@ -90,15 +90,15 @@ export default function ReverseProxyTargetModal({
   );
   const { data: peers } = useFetchApi<Peer[]>("/peers");
 
-  const [targetType, setTargetType] = useState<ReversProxyTargetType>(
+  const [targetType, setTargetType] = useState<ReverseProxyTargetType>(
     currentTarget?.target_type ??
       (initialResource
-        ? (initialResource.type as ReversProxyTargetType) ??
-          ReversProxyTargetType.HOST
-        : ReversProxyTargetType.PEER),
+        ? (initialResource.type as ReverseProxyTargetType) ??
+          ReverseProxyTargetType.HOST
+        : ReverseProxyTargetType.PEER),
   );
   const [targetPeerId, setTargetPeerId] = useState<string | undefined>(
-    currentTarget?.target_type === ReversProxyTargetType.PEER
+    currentTarget?.target_type === ReverseProxyTargetType.PEER
       ? currentTarget?.target_id
       : initialPeer?.id,
   );
@@ -177,13 +177,7 @@ export default function ReverseProxyTargetModal({
   const isPathDuplicate = useMemo(() => {
     const normalizedCurrentPath = normalizePath(targetPath);
     return existingTargets.some((t) => {
-      // Skip the target being edited - match by path, host, and port
-      if (
-        currentTarget &&
-        normalizePath(t.path) === normalizePath(currentTarget.path) &&
-        t.host === currentTarget.host &&
-        t.port === currentTarget.port
-      ) {
+      if (currentTarget && t === currentTarget) {
         return false;
       }
       return normalizePath(t.path) === normalizedCurrentPath;
@@ -205,7 +199,7 @@ export default function ReverseProxyTargetModal({
     if (initialPeer) {
       return true;
     }
-    if (targetType === ReversProxyTargetType.PEER) {
+    if (targetType === ReverseProxyTargetType.PEER) {
       return !!targetPeerId;
     }
     if (isResourceTargetType(targetType)) {
@@ -227,20 +221,20 @@ export default function ReverseProxyTargetModal({
     initialResource || initialPeer || targetPeerId || targetResourceId;
 
   const handleSave = () => {
-    const resolvedType = initialPeer ? ReversProxyTargetType.PEER : targetType;
+    const resolvedType = initialPeer ? ReverseProxyTargetType.PEER : targetType;
     const isResource = isResourceTargetType(resolvedType) || !!initialResource;
     const targetData: ReverseProxyTarget = {
       target_type: resolvedType,
       target_id:
-        resolvedType === ReversProxyTargetType.PEER
+        resolvedType === ReverseProxyTargetType.PEER
           ? targetPeerId
           : targetResourceId,
       protocol: targetProtocol,
       host:
-        resolvedType === ReversProxyTargetType.SUBNET ? targetHost : undefined,
+        resolvedType === ReverseProxyTargetType.SUBNET ? targetHost : undefined,
       port: targetPort,
       path: targetPath || undefined,
-      enabled: true,
+      enabled: currentTarget?.enabled ?? true,
       access_local: isResource ? accessLocal : undefined,
     };
     onSave(targetData);
@@ -358,7 +352,7 @@ export default function ReverseProxyTargetModal({
                   resource={
                     isResourceTargetType(targetType) && targetResourceId
                       ? { id: targetResourceId, type: "host" }
-                      : targetType === ReversProxyTargetType.PEER &&
+                      : targetType === ReverseProxyTargetType.PEER &&
                         targetPeerId
                       ? { id: targetPeerId, type: "peer" }
                       : undefined
@@ -366,7 +360,7 @@ export default function ReverseProxyTargetModal({
                   onResourceChange={(res) => {
                     if (res) {
                       if (res.type === "peer") {
-                        setTargetType(ReversProxyTargetType.PEER);
+                        setTargetType(ReverseProxyTargetType.PEER);
                         setTargetPeerId(res.id);
                         setTargetResourceId(undefined);
                         const peer = peers?.find((p) => p.id === res.id);
@@ -376,8 +370,8 @@ export default function ReverseProxyTargetModal({
                           (r) => r.id === res.id,
                         );
                         setTargetType(
-                          (selectedResource?.type as ReversProxyTargetType) ??
-                            ReversProxyTargetType.HOST,
+                          (selectedResource?.type as ReverseProxyTargetType) ??
+                            ReverseProxyTargetType.HOST,
                         );
                         setTargetResourceId(res.id);
                         setTargetPeerId(undefined);

From ec7bf149c0ff8a235d60813d05f1a060be8bf2c1 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 12 Feb 2026 16:42:48 +0100
Subject: [PATCH 04/15] Update notification transform

---
 src/app/globals.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/globals.css b/src/app/globals.css
index 3dd2e7981..642f70401 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -188,6 +188,13 @@ p {
     --lift-amount: calc(var(--lift) * 10px) !important;
 }
 
+/* Override stacked toast removal to move up instead of down */
+[data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
+    --y: translateY(calc(var(--lift) * -20%)) !important;
+    opacity: 0 !important;
+    transition: transform 400ms ease, opacity 300ms ease !important;
+}
+
 /* Control Center */
 .react-flow__node-groupNode .selected{
     @apply border-netbird;

From f954e34a38eace3de754537af8c9f4530da2d6dd Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 12 Feb 2026 16:52:50 +0100
Subject: [PATCH 05/15] Fix coderabbit comments

---
 src/app/(dashboard)/peer/page.tsx                          | 2 +-
 src/app/globals.css                                        | 1 +
 src/contexts/ReverseProxiesProvider.tsx                    | 3 +++
 src/modules/reverse-proxy/table/ReverseProxyTable.tsx      | 2 +-
 .../reverse-proxy/targets/ReverseProxyTargetModal.tsx      | 7 ++++++-
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index b045714f7..a5cd55043 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -392,7 +392,7 @@ const PeerOverviewTabs = () => {
         </TabsContent>
       )}
 
-      {peer?.id && permission.routes.read && (
+      {peer?.id && permission.services?.read && (
         <TabsContent value={"reverse-proxies"} className={"pb-8"}>
           <ReverseProxyFlatTargetsTabContent
             targets={flatTargets}
diff --git a/src/app/globals.css b/src/app/globals.css
index 642f70401..9a53f1955 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -191,6 +191,7 @@ p {
 /* Override stacked toast removal to move up instead of down */
 [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
     --y: translateY(calc(var(--lift) * -20%)) !important;
+
     opacity: 0 !important;
     transition: transform 400ms ease, opacity 300ms ease !important;
 }
diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
index 37f9ac3f2..9dfbdaa75 100644
--- a/src/contexts/ReverseProxiesProvider.tsx
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -567,6 +567,9 @@ export function flattenReverseProxies({
 }
 
 function isSameTarget(a: ReverseProxyTarget, b: ReverseProxyTarget): boolean {
+  if (a.target_id && b.target_id) {
+    return a.target_id === b.target_id;
+  }
   return (
     a.path === b.path &&
     a.host === b.host &&
diff --git a/src/modules/reverse-proxy/table/ReverseProxyTable.tsx b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
index ecdc72cb5..1fd7e04fb 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyTable.tsx
@@ -247,7 +247,7 @@ export default function ReverseProxyTable({ headingTarget }: Readonly<Props>) {
           <DataTableRefreshButton
             isDisabled={reverseProxies?.length == 0}
             onClick={() => {
-              mutate("/reverse-proxies").then();
+              mutate("/reverse-proxies/services").then();
             }}
           />
         </>
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
index 2e0f531a7..4bda6d074 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -176,8 +176,13 @@ export default function ReverseProxyTargetModal({
   // Check if path already exists in other targets
   const isPathDuplicate = useMemo(() => {
     const normalizedCurrentPath = normalizePath(targetPath);
+    const targetKey = (target: typeof currentTarget) => {
+      if (!target) return "";
+      return target.target_id || normalizePath(target.path);
+    };
+    const currentKey = targetKey(currentTarget);
     return existingTargets.some((t) => {
-      if (currentTarget && t === currentTarget) {
+      if (currentTarget && targetKey(t) === currentKey) {
         return false;
       }
       return normalizePath(t.path) === normalizedCurrentPath;

From b4657e7224928046ced091ede7c915884feffcc3 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 10:53:52 +0100
Subject: [PATCH 06/15] Update docs links

---
 src/app/(dashboard)/events/proxy/page.tsx     | 23 +++++----
 src/interfaces/ReverseProxy.ts                | 23 +++++++--
 .../reverse-proxy/ReverseProxyModal.tsx       | 51 +++++++++++++++----
 .../events/ReverseProxyEventsTable.tsx        |  8 +--
 .../targets/ReverseProxyTargetModal.tsx       | 17 ++++++-
 5 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/src/app/(dashboard)/events/proxy/page.tsx b/src/app/(dashboard)/events/proxy/page.tsx
index f62818c97..7316489f3 100644
--- a/src/app/(dashboard)/events/proxy/page.tsx
+++ b/src/app/(dashboard)/events/proxy/page.tsx
@@ -14,16 +14,20 @@ import ServerPaginationProvider from "@/contexts/ServerPaginationProvider";
 import PageContainer from "@/layouts/PageContainer";
 import ReverseProxyEventsTable from "@/modules/reverse-proxy/events/ReverseProxyEventsTable";
 import { usePortalElement } from "@hooks/usePortalElement";
+import { REVERSE_PROXY_EVENTS_DOCS_LINK } from "@/interfaces/ReverseProxy";
 
 export default function ProxyEventsPage() {
   const { permission } = usePermissions();
   const { ref: headingRef, portalTarget } =
     usePortalElement<HTMLHeadingElement>();
 
-  const defaultFilters = useMemo(() => ({
-    start_date: dayjs().subtract(7, "day").startOf("day").toISOString(),
-    end_date: dayjs().endOf("day").toISOString(),
-  }), []);
+  const defaultFilters = useMemo(
+    () => ({
+      start_date: dayjs().subtract(7, "day").startOf("day").toISOString(),
+      end_date: dayjs().endOf("day").toISOString(),
+    }),
+    [],
+  );
 
   return (
     <PageContainer>
@@ -50,10 +54,7 @@ export default function ProxyEventsPage() {
 
         <Paragraph>
           Learn more about{" "}
-          <InlineLink
-            href={"https://docs.netbird.io/how-to/reverse-proxy"}
-            target="_blank"
-          >
+          <InlineLink href={REVERSE_PROXY_EVENTS_DOCS_LINK} target="_blank">
             Proxy Events <ExternalLinkIcon size={12} />
           </InlineLink>{" "}
           in our documentation.
@@ -64,7 +65,11 @@ export default function ProxyEventsPage() {
         page="Proxy Events"
         hasAccess={permission?.services?.read}
       >
-        <ServerPaginationProvider url="/events/proxy" defaultPageSize={10} defaultFilters={defaultFilters}>
+        <ServerPaginationProvider
+          url="/events/proxy"
+          defaultPageSize={10}
+          defaultFilters={defaultFilters}
+        >
           <ReverseProxyEventsTable headingTarget={portalTarget} />
         </ServerPaginationProvider>
       </RestrictedAccess>
diff --git a/src/interfaces/ReverseProxy.ts b/src/interfaces/ReverseProxy.ts
index 4b0d236dd..80eb0fbc6 100644
--- a/src/interfaces/ReverseProxy.ts
+++ b/src/interfaces/ReverseProxy.ts
@@ -104,13 +104,28 @@ export interface ReverseProxyFlatTarget extends ReverseProxyTarget {
 }
 
 export const REVERSE_PROXY_DOCS_LINK =
-  "https://docs.netbird.io/how-to/reverse-proxy";
+  "https://docs.netbird.io/manage/reverse-proxy";
+
+export const REVERSE_PROXY_SERVICES_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy#services";
+
+export const REVERSE_PROXY_TARGETS_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy#targets";
+
+export const REVERSE_PROXY_AUTHENTICATION_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy/authentication";
+
+export const REVERSE_PROXY_SETTINGS_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy#step-4-configure-advanced-settings";
 
 export const REVERSE_PROXY_CLUSTERS_DOCS_LINK =
-  "https://docs.netbird.io/how-to/reverse-proxy";
+  "https://docs.netbird.io/manage/reverse-proxy#self-hosted-proxy-setup";
 
 export const REVERSE_PROXY_CUSTOM_DOMAINS_DOCS_LINK =
-  "https://docs.netbird.io/how-to/reverse-proxy";
+  "https://docs.netbird.io/manage/reverse-proxy/custom-domains";
 
 export const REVERSE_PROXY_DOMAIN_VERIFICATION_LINK =
-  "https://docs.netbird.io/how-to/reverse-proxy";
+  "https://docs.netbird.io/manage/reverse-proxy/custom-domains#validating-a-custom-domain";
+
+export const REVERSE_PROXY_EVENTS_DOCS_LINK =
+  "https://docs.netbird.io/manage/reverse-proxy/access-logs";
diff --git a/src/modules/reverse-proxy/ReverseProxyModal.tsx b/src/modules/reverse-proxy/ReverseProxyModal.tsx
index 0f83ea6d7..3349ca92f 100644
--- a/src/modules/reverse-proxy/ReverseProxyModal.tsx
+++ b/src/modules/reverse-proxy/ReverseProxyModal.tsx
@@ -51,6 +51,9 @@ import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Network, NetworkResource } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
 import {
+  REVERSE_PROXY_AUTHENTICATION_DOCS_LINK,
+  REVERSE_PROXY_SERVICES_DOCS_LINK,
+  REVERSE_PROXY_SETTINGS_DOCS_LINK,
   ReverseProxy,
   ReverseProxyAuth,
   ReverseProxyDomain,
@@ -636,16 +639,44 @@ export default function ReverseProxyModal({
 
         <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/reverse-proxy"}
-                target={"_blank"}
-              >
-                Services
-                <ExternalLinkIcon size={12} />
-              </InlineLink>
-            </Paragraph>
+            {tab === "targets" && (
+              <Paragraph className={"text-sm mt-auto"}>
+                Learn more about
+                <InlineLink
+                  href={REVERSE_PROXY_SERVICES_DOCS_LINK}
+                  target={"_blank"}
+                >
+                  Services
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Paragraph>
+            )}
+
+            {tab === "auth" && (
+              <Paragraph className={"text-sm mt-auto"}>
+                Learn more about
+                <InlineLink
+                  href={REVERSE_PROXY_AUTHENTICATION_DOCS_LINK}
+                  target={"_blank"}
+                >
+                  Authentication
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Paragraph>
+            )}
+
+            {tab === "settings" && (
+              <Paragraph className={"text-sm mt-auto"}>
+                Learn more about
+                <InlineLink
+                  href={REVERSE_PROXY_SETTINGS_DOCS_LINK}
+                  target={"_blank"}
+                >
+                  Settings
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Paragraph>
+            )}
           </div>
           <div className={"flex gap-3 w-full justify-end"}>
             {!reverseProxy ? (
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
index ed009ed78..aea8fc7e9 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
@@ -19,7 +19,7 @@ import { DatePickerWithRange } from "@components/DatePickerWithRange";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { useServerPagination } from "@/contexts/ServerPaginationProvider";
 import {
-  REVERSE_PROXY_DOCS_LINK,
+  REVERSE_PROXY_EVENTS_DOCS_LINK,
   ReverseProxyEvent,
 } from "@/interfaces/ReverseProxy";
 import { ReverseProxyEventsStatusCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsStatusCell";
@@ -34,7 +34,6 @@ import { ReverseProxyEventsAuthMethodCell } from "@/modules/reverse-proxy/events
 import { ReverseProxyEventsReasonCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsReasonCell";
 import { ReverseProxyEventsDurationCell } from "@/modules/reverse-proxy/events/ReverseProxyEventsDurationCell";
 
-
 export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
   {
     id: "timestamp",
@@ -213,7 +212,10 @@ export default function ReverseProxyEventsTable({
           learnMore={
             <>
               Learn more about
-              <InlineLink href={REVERSE_PROXY_DOCS_LINK} target={"_blank"}>
+              <InlineLink
+                href={REVERSE_PROXY_EVENTS_DOCS_LINK}
+                target={"_blank"}
+              >
                 Proxy Events
                 <ExternalLinkIcon size={12} />
               </InlineLink>
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
index 4bda6d074..9af78280c 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -18,6 +18,7 @@ import { SelectDropdown } from "@components/select/SelectDropdown";
 import useFetchApi from "@utils/api";
 import {
   AlertTriangle,
+  ExternalLinkIcon,
   HelpCircle,
   PlusCircle,
   Server,
@@ -29,6 +30,7 @@ import React, { useMemo, useRef, useState } from "react";
 import { Network, NetworkResource } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
 import {
+  REVERSE_PROXY_TARGETS_DOCS_LINK,
   ReverseProxy,
   ReverseProxyTarget,
   ReverseProxyTargetProtocol,
@@ -44,6 +46,7 @@ import { HelpTooltip } from "@components/HelpTooltip";
 import InlineLink, { InlineButtonLink } from "@components/InlineLink";
 import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
 import FullTooltip from "@components/FullTooltip";
+import Paragraph from "@components/Paragraph";
 
 /** Get initial host value based on target, resource, or peer */
 function getInitialHost(
@@ -563,7 +566,19 @@ export default function ReverseProxyTargetModal({
             )}
           </div>
 
-          <ModalFooter>
+          <ModalFooter className={"items-center"}>
+            <div className={"w-full"}>
+              <Paragraph className={"text-sm mt-auto"}>
+                Learn more about
+                <InlineLink
+                  href={REVERSE_PROXY_TARGETS_DOCS_LINK}
+                  target={"_blank"}
+                >
+                  Targets
+                  <ExternalLinkIcon size={12} />
+                </InlineLink>
+              </Paragraph>
+            </div>
             <div className="flex gap-3 w-full justify-end">
               <Button variant="secondary" onClick={() => onOpenChange(false)}>
                 Cancel

From 3dcd7c830ce037d1d0d7c5db4193c799d4c08bcc Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 11:33:19 +0100
Subject: [PATCH 07/15] Add notification for adding domains

---
 src/contexts/ReverseProxiesProvider.tsx       | 33 ++++++++++++-------
 .../domain/CustomDomainModal.tsx              |  1 -
 .../domain/CustomDomainsTable.tsx             |  9 +++--
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
index 9dfbdaa75..8db1fcc67 100644
--- a/src/contexts/ReverseProxiesProvider.tsx
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -48,7 +48,7 @@ type ReverseProxiesContextValue = {
   createDomain: (
     domain: string,
     targetCluster: string,
-  ) => Promise<ReverseProxyDomain | undefined>;
+  ) => Promise<ReverseProxyDomain>;
 };
 
 type OpenModalOptions = {
@@ -90,8 +90,9 @@ export default function ReverseProxiesProvider({
   const { confirm } = useDialog();
 
   // Reverse Proxies
-  const { data: rawReverseProxies, isLoading } =
-    useFetchApi<ReverseProxy[]>("/reverse-proxies/services");
+  const { data: rawReverseProxies, isLoading } = useFetchApi<ReverseProxy[]>(
+    "/reverse-proxies/services",
+  );
   const request = useApiCall<ReverseProxy>("/reverse-proxies/services");
 
   // Peers & Resources for resolving target destinations
@@ -125,6 +126,7 @@ export default function ReverseProxiesProvider({
   >("/reverse-proxies/domains");
   const domainRequest = useApiCall<ReverseProxyDomain>(
     "/reverse-proxies/domains",
+    true,
   );
 
   const [modalOpen, setModalOpen] = useState(false);
@@ -394,17 +396,23 @@ export default function ReverseProxiesProvider({
     async (
       domain: string,
       targetCluster: string,
-    ): Promise<ReverseProxyDomain | undefined> => {
-      try {
-        const result = await domainRequest.post({
+    ): Promise<ReverseProxyDomain> => {
+      const promise = domainRequest
+        .post({
           domain,
           target_cluster: targetCluster,
+        })
+        .then((d) => {
+          mutate("/reverse-proxies/domains");
+          return d;
         });
-        mutate("/reverse-proxies/domains");
-        return result;
-      } catch {
-        return undefined;
-      }
+      notify({
+        title: "Add Custom Domain",
+        description: "Domain successfully added",
+        promise,
+        loadingMessage: "Adding domain...",
+      });
+      return promise;
     },
     [domainRequest, mutate],
   );
@@ -583,7 +591,8 @@ export function sanitizeTargets(
 ): ReverseProxyTarget[] {
   return targets.map((t) => {
     const { destination: _, ...target } = t;
-    if (t.target_type === ReverseProxyTargetType.SUBNET) return target as ReverseProxyTarget;
+    if (t.target_type === ReverseProxyTargetType.SUBNET)
+      return target as ReverseProxyTarget;
     const { host: __, ...rest } = target;
     return rest as ReverseProxyTarget;
   });
diff --git a/src/modules/reverse-proxy/domain/CustomDomainModal.tsx b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
index 746bba4f4..86d2ea04c 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainModal.tsx
@@ -74,7 +74,6 @@ export const CustomDomainModal = ({
   const addDomain = () => {
     if (canSubmit && domain && selectedCluster) {
       onDomainSubmit(domain, selectedCluster);
-      onOpenChange(false);
     }
   };
 
diff --git a/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx b/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
index bbfbb4f00..1423a8ef8 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainsTable.tsx
@@ -34,7 +34,6 @@ import CustomDomainClusterCell from "@/modules/reverse-proxy/domain/CustomDomain
 import { CustomDomainModal } from "./CustomDomainModal";
 import { CustomDomainVerificationModal } from "./CustomDomainVerificationModal";
 
-
 const CustomDomainsColumns: ColumnDef<ReverseProxyDomain>[] = [
   {
     accessorKey: "domain",
@@ -109,12 +108,12 @@ export default function CustomDomainsTable({ headingTarget }: Readonly<Props>) {
         open={addModalOpen}
         onOpenChange={setAddModalOpen}
         onDomainSubmit={async (domainName, targetCluster) => {
-          const result = await createDomain(domainName, targetCluster);
-          if (result) {
-            setSelectedDomain(result);
+          createDomain(domainName, targetCluster).then((d) => {
+            setSelectedDomain(d);
             setSelectedTargetCluster(targetCluster);
+            setAddModalOpen(false);
             setVerificationModalOpen(true);
-          }
+          });
         }}
         key={addModalOpen ? 1 : 0}
       />

From 72ec2a8b466c47bcf8cdbf1b4d94579892ce0b3c Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 11:52:25 +0100
Subject: [PATCH 08/15] Update cluster cell, remove placeholder domain

---
 .../domain/CustomDomainClusterCell.tsx        |  6 +--
 .../domain/CustomDomainSelector.tsx           | 16 +-------
 .../table/ReverseProxyClusterCell.tsx         | 40 ++++++++++++++-----
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx b/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
index 3bca0947f..e582c1be1 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainClusterCell.tsx
@@ -9,9 +9,7 @@ type Props = {
   domain: ReverseProxyDomain;
 };
 
-export default function CustomDomainClusterCell({
-  domain,
-}: Readonly<Props>) {
+export default function CustomDomainClusterCell({ domain }: Readonly<Props>) {
   const hasCluster = !!domain.target_cluster;
 
   if (!hasCluster) {
@@ -28,7 +26,7 @@ export default function CustomDomainClusterCell({
   return (
     <div className="flex items-center gap-2">
       <Badge variant={"gray"} className={"font-normal"}>
-        <Server size={11} className={"text-green-500"} />
+        <Server size={11} className={"text-nb-gray-400"} />
         {domain.target_cluster}
       </Badge>
     </div>
diff --git a/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx b/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
index fa732371a..b647a156b 100644
--- a/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
+++ b/src/modules/reverse-proxy/domain/CustomDomainSelector.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import { useMemo } from "react";
 import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
 import { ReverseProxyDomainType } from "@/interfaces/ReverseProxy";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
+import { isNetBirdHosted } from "@utils/netbird";
 
 interface DomainSelectorProps {
   value: string;
@@ -68,20 +68,6 @@ export function CustomDomainSelector({
         });
       });
 
-    // Add placeholder domain for local development
-    if (isLocalDev()) {
-      opts.push({
-        value: "example.com",
-        label: ".example.com",
-        renderItem: () => (
-          <div className="flex items-center gap-2 w-full text-sm justify-between">
-            <span>.example.com</span>
-            <SmallBadge text="Test" variant="sky" size="md" />
-          </div>
-        ),
-      });
-    }
-
     // Add "Add Custom Domain" option
     opts.push({
       value: "add_custom",
diff --git a/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
index 2c25c5c0e..05c01ca09 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyClusterCell.tsx
@@ -2,13 +2,14 @@
 
 import Badge from "@components/Badge";
 import { cn } from "@utils/helpers";
-import { Globe, Server } from "lucide-react";
+import { AlertTriangle, Globe, Server } from "lucide-react";
 import React from "react";
 import { useReverseProxies } from "@/contexts/ReverseProxiesProvider";
 import {
   ReverseProxy,
   ReverseProxyDomainType,
 } from "@/interfaces/ReverseProxy";
+import FullTooltip from "@components/FullTooltip";
 
 type Props = {
   reverseProxy: ReverseProxy;
@@ -37,15 +38,34 @@ export default function ReverseProxyClusterCell({
     );
   }
 
+  if (isConnected) {
+    return (
+      <div className="flex items-center gap-2">
+        <Badge variant={"gray"} className={cn("font-normal")}>
+          <Server size={11} className={cn("text-green-500")} />
+          {reverseProxy.proxy_cluster}
+        </Badge>
+      </div>
+    );
+  }
+
   return (
-    <div className="flex items-center gap-2">
-      <Badge
-        variant={"gray"}
-        className={cn("font-normal", !isConnected && "opacity-60")}
-      >
-        <Server size={11} className={cn(isConnected && "text-green-500")} />
-        {reverseProxy.proxy_cluster}
-      </Badge>
-    </div>
+    <FullTooltip
+      content={
+        <div className={"flex flex-col gap-1 text-xs max-w-xs"}>
+          Cluster {reverseProxy.proxy_cluster} is offline. Make sure the proxy
+          server is running and connected to the right management address.
+        </div>
+      }
+      align={"center"}
+      alignOffset={0}
+    >
+      <div className="flex items-center gap-2">
+        <Badge variant={"red"} className={cn("font-normal")}>
+          <AlertTriangle size={11} />
+          {reverseProxy.proxy_cluster}
+        </Badge>
+      </div>
+    </FullTooltip>
   );
 }

From ebb8cc99b4e64b8b57bca7806f2fa7215a3a8a55 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 12:04:20 +0100
Subject: [PATCH 09/15] Update proxy events filter

---
 .../events/ReverseProxyEventsTable.tsx            | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
index aea8fc7e9..05c6be9e4 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
@@ -141,6 +141,7 @@ export default function ReverseProxyEventsTable({
     mutate,
     setFilter,
     getFilter,
+    hasActiveFilters,
     ...paginationProps
   } = useServerPagination<ReverseProxyEvent[]>();
 
@@ -226,24 +227,21 @@ export default function ReverseProxyEventsTable({
     >
       {(table) => (
         <>
-          <ButtonGroup disabled={!events?.length}>
+          <ButtonGroup disabled={!events?.length && !hasActiveFilters}>
             <ButtonGroup.Button
               onClick={() => setFilter("status", undefined)}
-              disabled={!events?.length}
               variant={activeStatus === undefined ? "tertiary" : "secondary"}
             >
               All
             </ButtonGroup.Button>
             <ButtonGroup.Button
               onClick={() => setFilter("status", "success")}
-              disabled={!events?.length}
               variant={activeStatus === "success" ? "tertiary" : "secondary"}
             >
               Success
             </ButtonGroup.Button>
             <ButtonGroup.Button
               onClick={() => setFilter("status", "failed")}
-              disabled={!events?.length}
               variant={activeStatus === "failed" ? "tertiary" : "secondary"}
             >
               Failed
@@ -253,13 +251,16 @@ export default function ReverseProxyEventsTable({
           <DatePickerWithRange
             value={dateRange}
             onChange={handleDateFilterChange}
-            disabled={!events?.length}
+            disabled={!events?.length && !hasActiveFilters}
           />
 
-          <DataTableRowsPerPage table={table} disabled={!events?.length} />
+          <DataTableRowsPerPage
+            table={table}
+            disabled={!events?.length && !hasActiveFilters}
+          />
 
           <DataTableRefreshButton
-            isDisabled={!events?.length}
+            isDisabled={!events?.length && !hasActiveFilters}
             onClick={() => mutate()}
           />
         </>

From 5b695b542751e2f80ffab1e84ab66f9ee2e8761e Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 12:24:46 +0100
Subject: [PATCH 10/15] Fix wrong event count if table refreshes

---
 src/components/table/DataTableHeadingPortal.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/table/DataTableHeadingPortal.tsx b/src/components/table/DataTableHeadingPortal.tsx
index 151530d47..e40b0c0b1 100644
--- a/src/components/table/DataTableHeadingPortal.tsx
+++ b/src/components/table/DataTableHeadingPortal.tsx
@@ -32,12 +32,22 @@ export const DataTableHeadingPortal = function <TData>({
   if (!headingTarget) return;
   if (!hasMounted.current) hasMounted.current = true;
 
-  const totalItems = manualPagination
-    ? initialTotalRecords.current
-    : table?.getPreFilteredRowModel().rows.length;
   const filteredItems = manualPagination
     ? totalRecords
     : table?.getFilteredRowModel().rows.length;
+
+  const getTotalRecords = () => {
+    if (Number(initialTotalRecords.current) < Number(filteredItems)) {
+      initialTotalRecords.current = filteredItems;
+      return filteredItems;
+    }
+    return initialTotalRecords.current;
+  };
+
+  const totalItems = manualPagination
+    ? getTotalRecords()
+    : table?.getPreFilteredRowModel().rows.length;
+
   if (!totalItems || totalItems == 1) return;
 
   const hasAnyFiltersActive = manualPagination

From 0c4c981d978cb6f41c90007a8971080984179a06 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 12:39:32 +0100
Subject: [PATCH 11/15] Fix updating targets

---
 src/contexts/ReverseProxiesProvider.tsx       | 45 ++++++++++---------
 .../targets/ReverseProxyTargetModal.tsx       | 14 +++---
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
index 8db1fcc67..29ef94b32 100644
--- a/src/contexts/ReverseProxiesProvider.tsx
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -191,9 +191,10 @@ export default function ReverseProxiesProvider({
       const proxyId = targetModalProxy.id;
 
       if (isEditing) {
-        // Update existing target - match against the original target before editing
-        updatedTargets = targetModalProxy.targets.map((t) => {
-          return isSameTarget(t, editingTarget) ? target : t;
+        // Update existing target - match by index against the original target
+        const targetIndex = targetModalProxy.targets.indexOf(editingTarget);
+        updatedTargets = targetModalProxy.targets.map((t, i) => {
+          return i === targetIndex ? target : t;
         });
       } else {
         // Add new target
@@ -274,6 +275,14 @@ export default function ReverseProxiesProvider({
   const handleToggle = useCallback(
     async (proxy: ReverseProxy) => {
       const newEnabled = !proxy.enabled;
+      mutate(
+        "/reverse-proxies/services",
+        (current: ReverseProxy[] | undefined) =>
+          current?.map((p) =>
+            p.id === proxy.id ? { ...p, enabled: newEnabled } : p,
+          ),
+        false,
+      );
       notify({
         title: proxy.domain,
         description: `Reverse proxy ${newEnabled ? "enabled" : "disabled"}`,
@@ -300,10 +309,18 @@ export default function ReverseProxiesProvider({
   const handleToggleTarget = useCallback(
     async (proxy: ReverseProxy, target: ReverseProxyTarget) => {
       const newEnabled = !target.enabled;
-      const updatedTargets = proxy.targets.map((t) => {
-        return isSameTarget(t, target) ? { ...t, enabled: newEnabled } : t;
+      const targetIndex = proxy.targets.indexOf(target);
+      const updatedTargets = proxy.targets.map((t, i) => {
+        return i === targetIndex ? { ...t, enabled: newEnabled } : t;
       });
-
+      mutate(
+        "/reverse-proxies/services",
+        (current: ReverseProxy[] | undefined) =>
+          current?.map((p) =>
+            p.id === proxy.id ? { ...p, targets: updatedTargets } : p,
+          ),
+        false,
+      );
       notify({
         title: proxy.domain,
         description: `Target ${newEnabled ? "enabled" : "disabled"}`,
@@ -370,9 +387,8 @@ export default function ReverseProxiesProvider({
           loadingMessage: "Deleting service...",
         });
       } else {
-        const updatedTargets = proxy.targets.filter((t) => {
-          return !isSameTarget(t, target);
-        });
+        const targetIndex = proxy.targets.indexOf(target);
+        const updatedTargets = proxy.targets.filter((_, i) => i !== targetIndex);
 
         notify({
           title: proxy.domain,
@@ -574,17 +590,6 @@ export function flattenReverseProxies({
   return flattened;
 }
 
-function isSameTarget(a: ReverseProxyTarget, b: ReverseProxyTarget): boolean {
-  if (a.target_id && b.target_id) {
-    return a.target_id === b.target_id;
-  }
-  return (
-    a.path === b.path &&
-    a.host === b.host &&
-    a.port === b.port &&
-    a.protocol === b.protocol
-  );
-}
 
 export function sanitizeTargets(
   targets: ReverseProxyTarget[],
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
index 9af78280c..e2ec3600a 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -179,13 +179,15 @@ export default function ReverseProxyTargetModal({
   // Check if path already exists in other targets
   const isPathDuplicate = useMemo(() => {
     const normalizedCurrentPath = normalizePath(targetPath);
-    const targetKey = (target: typeof currentTarget) => {
-      if (!target) return "";
-      return target.target_id || normalizePath(target.path);
-    };
-    const currentKey = targetKey(currentTarget);
+    const normalizedOriginalPath = currentTarget
+      ? normalizePath(currentTarget.path)
+      : null;
     return existingTargets.some((t) => {
-      if (currentTarget && targetKey(t) === currentKey) {
+      // Skip the target being edited
+      if (
+        normalizedOriginalPath !== null &&
+        normalizePath(t.path) === normalizedOriginalPath
+      ) {
         return false;
       }
       return normalizePath(t.path) === normalizedCurrentPath;

From 0400e682732a45e073eff3c538095d2a29889540 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 12:47:18 +0100
Subject: [PATCH 12/15] Remove mutate

---
 src/contexts/ReverseProxiesProvider.tsx | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/contexts/ReverseProxiesProvider.tsx b/src/contexts/ReverseProxiesProvider.tsx
index 29ef94b32..e1c38de81 100644
--- a/src/contexts/ReverseProxiesProvider.tsx
+++ b/src/contexts/ReverseProxiesProvider.tsx
@@ -275,14 +275,6 @@ export default function ReverseProxiesProvider({
   const handleToggle = useCallback(
     async (proxy: ReverseProxy) => {
       const newEnabled = !proxy.enabled;
-      mutate(
-        "/reverse-proxies/services",
-        (current: ReverseProxy[] | undefined) =>
-          current?.map((p) =>
-            p.id === proxy.id ? { ...p, enabled: newEnabled } : p,
-          ),
-        false,
-      );
       notify({
         title: proxy.domain,
         description: `Reverse proxy ${newEnabled ? "enabled" : "disabled"}`,
@@ -313,14 +305,6 @@ export default function ReverseProxiesProvider({
       const updatedTargets = proxy.targets.map((t, i) => {
         return i === targetIndex ? { ...t, enabled: newEnabled } : t;
       });
-      mutate(
-        "/reverse-proxies/services",
-        (current: ReverseProxy[] | undefined) =>
-          current?.map((p) =>
-            p.id === proxy.id ? { ...p, targets: updatedTargets } : p,
-          ),
-        false,
-      );
       notify({
         title: proxy.domain,
         description: `Target ${newEnabled ? "enabled" : "disabled"}`,
@@ -388,7 +372,9 @@ export default function ReverseProxiesProvider({
         });
       } else {
         const targetIndex = proxy.targets.indexOf(target);
-        const updatedTargets = proxy.targets.filter((_, i) => i !== targetIndex);
+        const updatedTargets = proxy.targets.filter(
+          (_, i) => i !== targetIndex,
+        );
 
         notify({
           title: proxy.domain,
@@ -590,7 +576,6 @@ export function flattenReverseProxies({
   return flattened;
 }
 
-
 export function sanitizeTargets(
   targets: ReverseProxyTarget[],
 ): ReverseProxyTarget[] {

From b99cea758bc8daa9c5ef72e1c0b17e5727b262ed Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 14:56:00 +0100
Subject: [PATCH 13/15] Allow search by id for events

---
 src/components/table/DataTable.tsx                           | 2 +-
 src/contexts/ServerPaginationProvider.tsx                    | 2 +-
 src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/table/DataTable.tsx b/src/components/table/DataTable.tsx
index 9b6919975..def12aa3b 100644
--- a/src/components/table/DataTable.tsx
+++ b/src/components/table/DataTable.tsx
@@ -470,7 +470,7 @@ export function DataTable<TData, TValue>({
 
       <div className="relative">
         {showOverlay && (
-          <div className="absolute inset-0 bg-nb-gray-950/50 z-10 rounded-md" />
+          <div className="absolute inset-0 bg-nb-gray-950/60 z-10 rounded-md animate-pulse" />
         )}
         <TableWrapper
           wrapperComponent={wrapperComponent}
diff --git a/src/contexts/ServerPaginationProvider.tsx b/src/contexts/ServerPaginationProvider.tsx
index 7c3a99b0f..bee9550fa 100644
--- a/src/contexts/ServerPaginationProvider.tsx
+++ b/src/contexts/ServerPaginationProvider.tsx
@@ -76,7 +76,7 @@ export default function ServerPaginationProvider({
       const params = new URLSearchParams();
       params.set("page", String(p));
       params.set("page_size", String(ps));
-      if (s) params.set("search", s);
+      if (s) params.set("search", s.toLowerCase());
       Object.entries(f).forEach(([key, value]) => {
         if (value !== undefined) params.set(key, value);
       });
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
index 05c6be9e4..69ae73d2f 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
@@ -124,6 +124,9 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     ),
     cell: ({ row }) => <ReverseProxyEventsUserCell event={row.original} />,
   },
+  {
+    accessorKey: "id",
+  },
 ];
 
 type Props = {
@@ -193,7 +196,7 @@ export default function ReverseProxyEventsTable({
       sorting={sorting}
       setSorting={setSorting}
       columns={ReverseProxyEventsTableColumns}
-      columnVisibility={{ is_success: false }}
+      columnVisibility={{ is_success: false, id: false }}
       searchPlaceholder={"Search by IP, host, path, user..."}
       getStartedCard={
         <GetStartedTest

From 46fa4ffa9d18b5c0e9ef0c96fcd1233538c6f4e3 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 15:01:28 +0100
Subject: [PATCH 14/15] Update text for selfhosted users

---
 .../reverse-proxy/services/page.tsx           | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/app/(dashboard)/reverse-proxy/services/page.tsx b/src/app/(dashboard)/reverse-proxy/services/page.tsx
index 4a89758ef..24238b49f 100644
--- a/src/app/(dashboard)/reverse-proxy/services/page.tsx
+++ b/src/app/(dashboard)/reverse-proxy/services/page.tsx
@@ -14,6 +14,7 @@ import ReverseProxiesProvider from "@/contexts/ReverseProxiesProvider";
 import { REVERSE_PROXY_DOCS_LINK } from "@/interfaces/ReverseProxy";
 import PageContainer from "@/layouts/PageContainer";
 import { Callout } from "@components/Callout";
+import { isNetBirdHosted } from "@utils/netbird";
 
 const ReverseProxyTable = lazy(
   () => import("@/modules/reverse-proxy/table/ReverseProxyTable"),
@@ -53,14 +54,24 @@ export default function ReverseProxyServicesPage() {
           in our documentation.
         </Paragraph>
 
-        <Callout className={"max-w-xl mt-5"} variant={"info"}>
-          NetBird&apos;s Reverse Proxy is currently in beta and available at no
-          cost during this period. Features, functionality, and pricing are
-          subject to change upon release.
-        </Callout>
+        {isNetBirdHosted() ? (
+          <Callout className={"max-w-xl mt-5"} variant={"info"}>
+            NetBird&apos;s Reverse Proxy is currently in beta and available at
+            no cost during this period. Features, functionality, and pricing are
+            subject to change upon release.
+          </Callout>
+        ) : (
+          <Callout className={"max-w-xl mt-5"} variant={"info"}>
+            NetBird&apos;s Reverse Proxy is currently in beta. <br /> Features
+            and functionality are subject to change upon release.
+          </Callout>
+        )}
       </div>
 
-      <RestrictedAccess page={"Services"} hasAccess={permission?.services?.read}>
+      <RestrictedAccess
+        page={"Services"}
+        hasAccess={permission?.services?.read}
+      >
         <ReverseProxiesProvider>
           <Suspense fallback={<SkeletonTable />}>
             <ReverseProxyTable headingTarget={portalTarget} />

From b5bd35f14c062b4e673d0e01a23a0592cdcd1e11 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Fri, 13 Feb 2026 18:06:03 +0100
Subject: [PATCH 15/15] Disable sort for now, update cluster text, fix truncate
 issue, add certificate issued

---
 src/components/DeviceCard.tsx                 | 22 +++++++++++-------
 src/components/table/DataTableHeader.tsx      | 23 +++++++++++++------
 .../reverse-proxy/ReverseProxyModal.tsx       | 17 ++++----------
 .../events/ReverseProxyEventsTable.tsx        | 18 +++++++--------
 .../table/ReverseProxyStatusCell.tsx          | 17 ++++++++++----
 5 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/src/components/DeviceCard.tsx b/src/components/DeviceCard.tsx
index 950fb944d..f71461a07 100644
--- a/src/components/DeviceCard.tsx
+++ b/src/components/DeviceCard.tsx
@@ -1,6 +1,7 @@
 import TruncatedText from "@components/ui/TruncatedText";
 import { cn } from "@utils/helpers";
 import * as React from "react";
+import { useMemo } from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
 import { PeerOSIcon } from "@/assets/icons/PeerOSIcon";
 import { ResourceIcon } from "@/assets/icons/ResourceIcon";
@@ -23,11 +24,18 @@ export const DeviceCard = ({
   description,
 }: DeviceCardProps) => {
   if (!device && !resource) return null;
+
+  const descriptionText = useMemo(() => {
+    return description !== undefined
+      ? description
+      : address || device?.ip || resource?.address;
+  }, [description, address, device]);
+
   return (
     <div
       className={cn(
-        "flex shrink-0 items-center gap-2.5 text-nb-gray-200 text-left py-1 pl-3 pr-4 rounded-md group/machine my-0 w-[200px]",
-        (description === undefined || description === "") && "py-2",
+        "flex shrink-0 items-center gap-2.5 text-nb-gray-200 text-left py-1 pl-3 pr-4 rounded-md group/machine my-0 w-[230px]",
+        !descriptionText && "py-2",
         className,
       )}
     >
@@ -58,12 +66,12 @@ export const DeviceCard = ({
       </div>
       <div
         className={
-          "flex flex-col gap-0 justify-center top-0.5 leading-tight relative"
+          "flex flex-col gap-0 justify-center top-[0.15rem] leading-tight relative"
         }
       >
         <span
           className={
-            "mb-1.5 font-normal text-[0.85rem] text-nb-gray-100 flex items-center gap-2"
+            "font-normal text-[0.85rem] text-nb-gray-100 flex items-center gap-2"
           }
         >
           <TruncatedText
@@ -74,12 +82,10 @@ export const DeviceCard = ({
         </span>
         <span
           className={
-            "text-sm font-normal text-nb-gray-400 -top-[0.3rem] relative whitespace-nowrap"
+            "text-sm font-normal text-nb-gray-400 relative whitespace-nowrap"
           }
         >
-          {description !== undefined
-            ? description
-            : address || device?.ip || resource?.address}
+          <TruncatedText text={descriptionText} maxWidth={"160px"} />
         </span>
       </div>
     </div>
diff --git a/src/components/table/DataTableHeader.tsx b/src/components/table/DataTableHeader.tsx
index 3b11f635f..f09c8b6f9 100644
--- a/src/components/table/DataTableHeader.tsx
+++ b/src/components/table/DataTableHeader.tsx
@@ -12,6 +12,7 @@ type Props = {
   tooltip?: string | React.ReactNode;
   center?: boolean;
   className?: string;
+  sorting?: boolean;
 };
 export default function DataTableHeader({
   children,
@@ -19,23 +20,31 @@ export default function DataTableHeader({
   tooltip,
   center,
   className,
+  sorting = true,
 }: Props) {
   return (
     <FullTooltip content={tooltip} disabled={!tooltip}>
       <div
-        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        onClick={
+          sorting
+            ? () => column.toggleSorting(column.getIsSorted() === "asc")
+            : undefined
+        }
         className={cn(
-          "flex items-center whitespace-nowrap cursor-pointer gap-2 dark:text-gray-400 dark:hover:text-gray-300 transition-all select-none hover:text-nb-gray text-xs tracking-wide",
+          "flex items-center whitespace-nowrap gap-2 dark:text-gray-400 transition-all select-none text-xs tracking-wide",
+          sorting &&
+            "cursor-pointer dark:hover:text-gray-300 hover:text-nb-gray",
           center && "justify-center w-full",
           className,
         )}
       >
         {children}
-        {column.getIsSorted() === "desc" ? (
-          <IconSortAscending size={16} />
-        ) : (
-          <IconSortDescending size={16} />
-        )}
+        {sorting &&
+          (column.getIsSorted() === "desc" ? (
+            <IconSortAscending size={16} />
+          ) : (
+            <IconSortDescending size={16} />
+          ))}
       </div>
     </FullTooltip>
   );
diff --git a/src/modules/reverse-proxy/ReverseProxyModal.tsx b/src/modules/reverse-proxy/ReverseProxyModal.tsx
index 3349ca92f..9fbbb11ba 100644
--- a/src/modules/reverse-proxy/ReverseProxyModal.tsx
+++ b/src/modules/reverse-proxy/ReverseProxyModal.tsx
@@ -406,18 +406,11 @@ export default function ReverseProxyModal({
               </div>
 
               {reverseProxy?.proxy_cluster && (
-                <div className="rounded-md bg-nb-gray-920 border border-nb-gray-900 px-4 py-3">
-                  <div className="flex items-center gap-2 text-sm text-nb-gray-300">
-                    <Server size={14} className="text-nb-gray-400" />
-                    <span className="text-nb-gray-400">Proxy Cluster:</span>
-                    <span className="font-medium text-nb-gray-200">
-                      {reverseProxy.proxy_cluster}
-                    </span>
-                    {!isClusterConnected && (
-                      <span className="text-amber-400">(disconnected)</span>
-                    )}
-                  </div>
-                </div>
+                <Callout variant={"error"}>
+                  Cluster {reverseProxy.proxy_cluster} is offline. Make sure the
+                  proxy server is running and connected to the right management
+                  address.
+                </Callout>
               )}
 
               <div>
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
index 69ae73d2f..61fa0904e 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTable.tsx
@@ -38,7 +38,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
   {
     id: "timestamp",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Time</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Time</DataTableHeader>
     ),
     cell: ({ row }) => (
       <ReverseProxyEventsTimeCell timestamp={row.original.timestamp} />
@@ -52,7 +52,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     accessorFn: (row) =>
       `${row.source_ip} ${row.city_name || ""} ${row.country_code || ""}`,
     header: ({ column }) => (
-      <DataTableHeader column={column}>Location / IP</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Location / IP</DataTableHeader>
     ),
     cell: ({ row }) => (
       <ReverseProxyEventsLocationIpCell event={row.original} />
@@ -62,7 +62,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "method",
     accessorKey: "method",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Method</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Method</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsMethodCell event={row.original} />,
     filterFn: "arrIncludesSomeExact",
@@ -71,7 +71,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "url",
     accessorFn: (row) => `${row.host} ${row.path}`,
     header: ({ column }) => (
-      <DataTableHeader column={column}>URL</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>URL</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsUrlCell event={row.original} />,
   },
@@ -79,7 +79,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "status",
     accessorKey: "status_code",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Status</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Status</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsStatusCell event={row.original} />,
     size: 80,
@@ -94,7 +94,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "duration",
     accessorKey: "duration_ms",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Duration</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Duration</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsDurationCell event={row.original} />,
   },
@@ -102,7 +102,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "auth_method",
     accessorKey: "auth_method_used",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Auth Method</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Auth Method</DataTableHeader>
     ),
     cell: ({ row }) => (
       <ReverseProxyEventsAuthMethodCell event={row.original} />
@@ -112,7 +112,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "reason",
     accessorKey: "reason",
     header: ({ column }) => (
-      <DataTableHeader column={column}>Reason</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>Reason</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsReasonCell event={row.original} />,
   },
@@ -120,7 +120,7 @@ export const ReverseProxyEventsTableColumns: ColumnDef<ReverseProxyEvent>[] = [
     id: "user",
     accessorFn: (row) => row.user_id || "",
     header: ({ column }) => (
-      <DataTableHeader column={column}>User</DataTableHeader>
+      <DataTableHeader column={column} sorting={false}>User</DataTableHeader>
     ),
     cell: ({ row }) => <ReverseProxyEventsUserCell event={row.original} />,
   },
diff --git a/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
index 0cabc2070..5cba5c939 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyStatusCell.tsx
@@ -6,6 +6,7 @@ import {
 import useFetchApi from "@utils/api";
 import Badge from "@components/Badge";
 import { Loader2 } from "lucide-react";
+import { useMemo } from "react";
 
 type Props = {
   serviceId: string;
@@ -21,9 +22,13 @@ export default function ReverseProxyStatusCell({
   enabled,
 }: Readonly<Props>) {
   const status = meta?.status;
+  const certificateIssued = !!meta?.certificate_issued_at;
 
   const isSettingUp =
-    enabled && status !== undefined && status !== ReverseProxyStatus.ACTIVE;
+    enabled &&
+    status !== undefined &&
+    status !== ReverseProxyStatus.ACTIVE &&
+    !certificateIssued;
 
   const { data } = useFetchApi<ReverseProxy>(
     `/reverse-proxies/services/${serviceId}`,
@@ -35,15 +40,19 @@ export default function ReverseProxyStatusCell({
 
   const currentStatus = data?.meta?.status ?? status;
 
+  const currentCertificateIssued = useMemo(() => {
+    if (data && data?.meta) return !!data?.meta?.certificate_issued_at;
+    return certificateIssued;
+  }, [data]);
+
   if (
     !enabled ||
-    !currentStatus ||
-    currentStatus === ReverseProxyStatus.ACTIVE
+    (currentStatus === ReverseProxyStatus.ACTIVE && currentCertificateIssued)
   ) {
     return null;
   }
 
-  if (currentStatus === ReverseProxyStatus.CERTIFICATE_PENDING) {
+  if (!currentCertificateIssued) {
     return (
       <div className={"flex"}>
         <Badge variant={"yellow"}>