From 97007db62e7b442c2884ded3d36eee8581a80490 Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 14:23:22 -0700
Subject: [PATCH 01/18] light mode draft with switcher

---
 package-lock.json                             | 768 +++++++++---------
 src/app/(dashboard)/group/page.tsx            |   2 +-
 src/app/(dashboard)/peer/page.tsx             |   4 +-
 src/app/(dashboard)/team/user/page.tsx        |   2 +-
 src/app/globals.css                           |  59 +-
 src/app/invite/page.tsx                       |  12 +-
 src/assets/netbird-full-light.svg             |  19 +
 src/components/Button.tsx                     |  15 +-
 src/components/Code.tsx                       |   2 +-
 src/components/DatePickerWithRange.tsx        |   2 +-
 src/components/FullTooltip.tsx                |   2 +-
 src/components/HelpText.tsx                   |   2 +-
 src/components/InlineLink.tsx                 |   4 +-
 src/components/Input.tsx                      |   6 +-
 src/components/Label.tsx                      |   2 +-
 src/components/NetBirdLogo.tsx                |  26 +-
 src/components/NetworkRouteSelector.tsx       |   2 +-
 src/components/Notification.tsx               |   2 +-
 src/components/PeerSelector.tsx               |   6 +-
 src/components/PinCodeInput.tsx               |   2 +-
 src/components/PortSelector.tsx               |   2 +-
 src/components/Separator.tsx                  |   2 +-
 src/components/Tooltip.tsx                    |   8 +-
 src/components/modal/Modal.tsx                |   2 +-
 src/components/table/DataTableFilter.tsx      |   2 +-
 .../table/DataTableMultiSelectPopup.tsx       |   2 +-
 src/components/table/DataTablePagination.tsx  |   4 +-
 src/components/table/DataTableRowsPerPage.tsx |   8 +-
 src/components/table/Table.tsx                |   4 +-
 src/components/ui/DarkModeToggle.tsx          |  26 +-
 src/components/ui/HelpAndSupportButton.tsx    |   2 +-
 src/contexts/GlobalThemeProvider.tsx          |  26 +-
 src/layouts/AppLayout.tsx                     |   9 +
 src/layouts/Header.tsx                        |   2 +
 .../access-control/AccessControlModal.tsx     |   4 +-
 src/modules/common-table-rows/LastTimeRow.tsx |   2 +-
 .../control-center/nodes/SelectGroupNode.tsx  |   4 +-
 .../control-center/nodes/SelectPeerNode.tsx   |   4 +-
 .../control-center/nodes/SelectUserNode.tsx   |   4 +-
 .../nameservers/table/NameserverNameCell.tsx  |   2 +-
 .../zones/records/DNSRecordTimeToLiveCell.tsx |   2 +-
 src/modules/groups/AssignPeerToGroupModal.tsx |   2 +-
 .../instance-setup/InstanceSetupWizard.tsx    |   2 +-
 .../misc/NetworkInformationSquare.tsx         |   2 +-
 .../networks/resources/ResourceNameCell.tsx   |   2 +-
 .../networks/OnboardingTestResource.tsx       |   2 +-
 .../onboarding/p2p/OnboardingTestP2P.tsx      |   4 +-
 src/modules/peer/AddRouteDropdownButton.tsx   |   6 +-
 src/modules/peer/RemoteJobDropdownButton.tsx  |   4 +-
 src/modules/peers/PeerAddressCell.tsx         |   2 +-
 src/modules/peers/PeerConnectButton.tsx       |   2 +-
 src/modules/peers/PeerLastSeenCell.tsx        |   2 +-
 src/modules/peers/PeerMultiSelect.tsx         |   2 +-
 src/modules/peers/PeerNameCell.tsx            |   2 +-
 src/modules/peers/PeerOSCell.tsx              |   2 +-
 src/modules/peers/PeerVersionCell.tsx         |   2 +-
 .../posture-checks/ui/PostureCheckIcons.tsx   |   2 +-
 .../remote-access/rdp/RDPCertificateModal.tsx |   4 +-
 src/modules/remote-access/ssh/Terminal.tsx    |  45 +-
 .../ReverseProxyCrowdSecIPReputation.tsx      |   4 +-
 .../clusters/ClusterTypeIndicator.tsx         |   4 +-
 .../clusters/ClustersFeaturesCell.tsx         |   6 +-
 .../events/ReverseProxyEventsTimeCell.tsx     |   2 +-
 .../targets/ReverseProxyTargetModal.tsx       |   8 +-
 .../targets/ReverseProxyTargetSelector.tsx    |   6 +-
 src/modules/settings/ClientSettingsTab.tsx    |   4 +-
 .../users/table-cells/ServiceUserNameCell.tsx |   2 +-
 .../users/table-cells/UserStatusCell.tsx      |   2 +-
 tailwind.config.ts                            |  48 +-
 69 files changed, 675 insertions(+), 560 deletions(-)
 create mode 100644 src/assets/netbird-full-light.svg

diff --git a/package-lock.json b/package-lock.json
index 0facd0b25..56682204a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -112,30 +112,30 @@
       }
     },
     "node_modules/@axa-fr/oidc-client": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client/-/oidc-client-7.26.7.tgz",
-      "integrity": "sha512-kAY7yKvULYtIK9X/R0+ksobcZ6DchQvhF8mwAlEl6uKGZpFETT3tqT9VxfBF2beG6rfWLmumBoliHa4h+fk2Gw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client/-/oidc-client-7.26.3.tgz",
+      "integrity": "sha512-QJ0TsicidN7ZGXqMYqWVhX29+2057V2UBkQizm5KxBJnH11LbH+wIY2XcR7ZwHLMvOWRB1IPS7MTM+Z4CHMjGg==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@axa-fr/oidc-client-service-worker": "7.26.7"
+        "@axa-fr/oidc-client-service-worker": "7.26.3"
       }
     },
     "node_modules/@axa-fr/oidc-client-service-worker": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client-service-worker/-/oidc-client-service-worker-7.26.7.tgz",
-      "integrity": "sha512-4frVu/UjrDDM1UbYF7hJGeou+qGQ3h0oqZq4jpj4pIM8qhnC1NYpFHdBN0Cecen9yfMQpwavLIM/ISVJFXv1dg==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@axa-fr/oidc-client-service-worker/-/oidc-client-service-worker-7.26.3.tgz",
+      "integrity": "sha512-Yg50TAGdGAeN1bd4b1lmWDmn5Llb18mkbYu+76xawJvCKWyOIiYkcru8R5XmZYX2hfX8pQ76sDOP4TAHgmP+IQ==",
       "license": "MIT"
     },
     "node_modules/@axa-fr/react-oidc": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@axa-fr/react-oidc/-/react-oidc-7.26.7.tgz",
-      "integrity": "sha512-aIJsoTv9qHdZImiSz2cwkcUEEgJ0w2TveKCMMK1Eokr6uywLgNYBf4wfpy/lzFMCtY+dUl53kjngIbIZ6CNa1g==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@axa-fr/react-oidc/-/react-oidc-7.26.3.tgz",
+      "integrity": "sha512-4PqEYVi7kjfN8bU7U4q/4qmu+5OqVwJ6+/0d6VAh62UweRDa4cbxS2lYoq7h1/5O8M7Wer6BxL7IaDCrJUWNcQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@axa-fr/oidc-client": "7.26.7",
-        "@axa-fr/oidc-client-service-worker": "7.26.7"
+        "@axa-fr/oidc-client": "7.26.3",
+        "@axa-fr/oidc-client-service-worker": "7.26.3"
       },
       "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -172,6 +172,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",
@@ -197,33 +198,10 @@
         "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@babel/core/node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -254,16 +232,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/helper-globals": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
@@ -558,19 +526,19 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.4.tgz",
-      "integrity": "sha512-4h4MVF8pmBsncB60r0wSJiIeUKTSD4m7FmTFThG8RHlsg9ajqckLm9OraguFGZE4vVdpiI1Q4+hFnisopmG6gQ==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
       "license": "MIT",
       "dependencies": {
-        "ajv": "^6.14.0",
+        "ajv": "^6.12.4",
         "debug": "^4.3.2",
         "espree": "^10.0.1",
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.1",
-        "minimatch": "^3.1.3",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -580,22 +548,10 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@eslint/js": {
-      "version": "9.39.3",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
-      "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1450,13 +1406,14 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
-      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
-        "playwright": "1.59.1"
+        "playwright": "1.61.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -2692,9 +2649,9 @@
       }
     },
     "node_modules/@tabler/icons": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.37.1.tgz",
-      "integrity": "sha512-neLCWkuyNHEPXCyYu6nbN4S3g/59BTa4qyITAugYVpq1YzYNDOZooW7/vRWH98ZItXAudxdKU8muFT7y1PqzuA==",
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.36.1.tgz",
+      "integrity": "sha512-f4Jg3Fof/Vru5ioix/UO4GX+sdDsF9wQo47FbtvG+utIYYVQ/QVAC0QYgcBbAjQGfbdOh2CCf0BgiFOF9Ixtjw==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2702,9 +2659,9 @@
       }
     },
     "node_modules/@tabler/icons-react": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.37.1.tgz",
-      "integrity": "sha512-R7UE71Jji7i4Su56Y9zU1uYEBakUejuDJvyuYVmBuUoqp/x3Pn4cv2huarexR3P0GJ2eHg4rUj9l5zccqS6K/Q==",
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.36.1.tgz",
+      "integrity": "sha512-/8nOXeNeMoze9xY/QyEKG65wuvRhkT3q9aytaur6Gj8bYU2A98YVJyLc9MRmc5nVvpy+bRlrrwK/Ykr8WGyUWg==",
       "license": "MIT",
       "dependencies": {
         "@tabler/icons": ""
@@ -3091,10 +3048,11 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
-      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "version": "19.2.10",
+      "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"
       }
@@ -3104,6 +3062,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"
       }
@@ -3118,17 +3077,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
-      "integrity": "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
+      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.56.1",
-        "@typescript-eslint/type-utils": "8.56.1",
-        "@typescript-eslint/utils": "8.56.1",
-        "@typescript-eslint/visitor-keys": "8.56.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/type-utils": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -3141,8 +3100,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.56.1",
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "@typescript-eslint/parser": "^8.54.0",
+        "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
@@ -3157,16 +3116,17 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.1.tgz",
-      "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
+      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.56.1",
-        "@typescript-eslint/types": "8.56.1",
-        "@typescript-eslint/typescript-estree": "8.56.1",
-        "@typescript-eslint/visitor-keys": "8.56.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3177,19 +3137,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz",
-      "integrity": "sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.56.1",
-        "@typescript-eslint/types": "^8.56.1",
+        "@typescript-eslint/tsconfig-utils": "^8.54.0",
+        "@typescript-eslint/types": "^8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3204,14 +3164,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.1.tgz",
-      "integrity": "sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.1",
-        "@typescript-eslint/visitor-keys": "8.56.1"
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3222,9 +3182,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.1.tgz",
-      "integrity": "sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3239,15 +3199,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.1.tgz",
-      "integrity": "sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
+      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.1",
-        "@typescript-eslint/typescript-estree": "8.56.1",
-        "@typescript-eslint/utils": "8.56.1",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -3259,14 +3219,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.1.tgz",
-      "integrity": "sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3278,18 +3238,18 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.1.tgz",
-      "integrity": "sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.56.1",
-        "@typescript-eslint/tsconfig-utils": "8.56.1",
-        "@typescript-eslint/types": "8.56.1",
-        "@typescript-eslint/visitor-keys": "8.56.1",
+        "@typescript-eslint/project-service": "8.54.0",
+        "@typescript-eslint/tsconfig-utils": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3",
-        "minimatch": "^10.2.2",
+        "minimatch": "^9.0.5",
         "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
         "ts-api-utils": "^2.4.0"
@@ -3305,17 +3265,30 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.1.tgz",
-      "integrity": "sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.56.1",
-        "@typescript-eslint/types": "8.56.1",
-        "@typescript-eslint/typescript-estree": "8.56.1"
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3325,19 +3298,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.1.tgz",
-      "integrity": "sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.56.1",
-        "eslint-visitor-keys": "^5.0.0"
+        "@typescript-eslint/types": "8.54.0",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3629,15 +3602,16 @@
       "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.1",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
-      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "version": "12.10.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.0.tgz",
+      "integrity": "sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==",
       "license": "MIT",
       "dependencies": {
-        "@xyflow/system": "0.0.75",
+        "@xyflow/system": "0.0.74",
         "classcat": "^5.0.3",
         "zustand": "^4.4.0"
       },
@@ -3647,9 +3621,9 @@
       }
     },
     "node_modules/@xyflow/system": {
-      "version": "0.0.75",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
-      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.74.tgz",
+      "integrity": "sha512-7v7B/PkiVrkdZzSbL+inGAo6tkR/WQHHG0/jhSvLQToCsfa8YubOGmBYd1s08tpKpihdHDZFwzQZeR69QSBb4Q==",
       "license": "MIT",
       "dependencies": {
         "@types/d3-drag": "^3.0.7",
@@ -3664,10 +3638,11 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "version": "8.15.0",
+      "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"
       },
@@ -4027,15 +4002,12 @@
       }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
-      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "baseline-browser-mapping": "dist/cli.js"
       }
     },
     "node_modules/binary-extensions": {
@@ -4051,9 +4023,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^4.0.2"
@@ -4093,6 +4065,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4176,9 +4149,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001774",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
-      "integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
+      "version": "1.0.30001767",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001767.tgz",
+      "integrity": "sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4211,23 +4184,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/chart.js": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -4350,6 +4312,15 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4589,15 +4560,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-dsv/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
@@ -4745,6 +4707,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"
       }
@@ -5052,9 +5015,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.302",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
-      "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==",
+      "version": "1.5.283",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
+      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
       "license": "ISC"
     },
     "node_modules/elkjs": {
@@ -5063,6 +5026,13 @@
       "integrity": "sha512-Yx3ORtbAFrXelYkAy2g0eYyVY8QG0XEmGdQXmy0eithKKjbWRfl3Xe884lfkszfBF6UKyIy4LwfcZ3AZc8oxFw==",
       "license": "EPL-2.0"
     },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -5262,10 +5232,11 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.39.3",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.3.tgz",
-      "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
+      "version": "9.39.2",
+      "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",
@@ -5273,7 +5244,7 @@
         "@eslint/config-helpers": "^0.4.2",
         "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.39.3",
+        "@eslint/js": "9.39.2",
         "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -5347,14 +5318,54 @@
         }
       }
     },
-    "node_modules/eslint-config-next/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+    "node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
+      "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-import-resolver-typescript": {
+    "node_modules/eslint-import-resolver-typescript": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
       "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
@@ -5389,12 +5400,41 @@
         }
       }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-plugin-import": {
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
       "version": "2.32.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5423,7 +5463,7 @@
         "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
       }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-plugin-import/node_modules/debug": {
+    "node_modules/eslint-plugin-import/node_modules/debug": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
@@ -5433,7 +5473,7 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-plugin-jsx-a11y": {
+    "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
       "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
@@ -5463,7 +5503,7 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-plugin-react": {
+    "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
       "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
@@ -5496,7 +5536,7 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
-    "node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks": {
+    "node_modules/eslint-plugin-react-hooks": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
       "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
@@ -5516,102 +5556,24 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
-    "node_modules/eslint-config-next/node_modules/resolve": {
-      "version": "2.0.0-next.6",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.6.tgz",
-      "integrity": "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==",
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "node-exports-info": "^1.6.0",
-        "object-keys": "^1.1.1",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
       "bin": {
         "resolve": "bin/resolve"
       },
-      "engines": {
-        "node": ">= 0.4"
-      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-config-next/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-config-prettier": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
-      "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
-      "license": "MIT",
-      "bin": {
-        "eslint-config-prettier": "bin/cli.js"
-      },
-      "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.13.0",
-        "resolve": "^1.22.4"
-      }
-    },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-module-utils": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
-      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^3.2.7"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
     "node_modules/eslint-plugin-simple-import-sort": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz",
@@ -5638,19 +5600,6 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
-      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^20.19.0 || ^22.13.0 || >=24"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
@@ -5679,18 +5628,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/esquery": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
@@ -5879,12 +5816,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.34.3",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.3.tgz",
-      "integrity": "sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==",
+      "version": "12.29.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.3.tgz",
+      "integrity": "sha512-naVvtFA7IiRTU5n7w7Nj51QFVWu955bU0p9H0gGC4AbhHDQR0TcohoEYwdOZXWEkXrEYNTl95EDOxsjDqn1AvQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.34.3",
+        "motion-dom": "^12.29.2",
         "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
       },
@@ -6046,9 +5983,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.13.6",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
-      "integrity": "sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.1.tgz",
+      "integrity": "sha512-EoY1N2xCn44xU6750Sx7OjOIT59FkmstNc3X6y5xpz7D5cBtZRe/3pSlTkDJgqsOk3WwZPkWfonhhUJfttQo3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6071,10 +6008,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
-      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
-      "dev": true,
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -6426,6 +6362,19 @@
         "semver": "^7.7.1"
       }
     },
+    "node_modules/is-bun-module/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -6779,18 +6728,16 @@
       "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"
       }
     },
     "node_modules/js-cookie": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
-      "integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      }
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.8.tgz",
+      "integrity": "sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==",
+      "license": "MIT"
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -6848,16 +6795,16 @@
       "license": "MIT"
     },
     "node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
       "bin": {
         "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/jsx-ast-utils": {
@@ -7036,12 +6983,12 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
-      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^5.0.2"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
         "node": "18 || 20 || >=22"
@@ -7061,9 +7008,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.34.3",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.3.tgz",
-      "integrity": "sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==",
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
+      "integrity": "sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.29.2"
@@ -7093,9 +7040,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.12",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
-      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -7224,35 +7171,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/node-exports-info": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
-      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "array.prototype.flatmap": "^1.3.3",
-        "es-errors": "^1.3.0",
-        "object.entries": "^1.1.9",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/node-exports-info/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -7537,13 +7455,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
-      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.59.1"
+        "playwright-core": "1.61.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7556,9 +7474,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
-      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
@@ -7594,9 +7512,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -7612,8 +7530,9 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -7819,6 +7738,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"
       }
@@ -7844,9 +7764,9 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "9.13.2",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.13.2.tgz",
-      "integrity": "sha512-IMPiXfXVIAuR5Yk58DDPBC8QKClrhdXV+Tr/alBrwrHUw0qDDYB1m5zPNuTnnPIr/gmJ4ChMxmtqPdxm8+R4Eg==",
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.13.0.tgz",
+      "integrity": "sha512-euzj5Hlq+lOHqI53NiuNhCP8HWgsPf/bBAVijR50hNaY1XwjKjShAnIe8jm8RD2W9IJUvihDIZ+KrmqfFzNhFQ==",
       "license": "MIT",
       "dependencies": {
         "@date-fns/tz": "^1.4.1",
@@ -7879,6 +7799,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"
       },
@@ -8267,16 +8188,13 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "devOptional": true,
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
       }
     },
     "node_modules/set-function-length": {
@@ -8379,6 +8297,19 @@
         "@img/sharp-win32-x64": "0.34.5"
       }
     },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8711,6 +8642,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -8751,6 +8694,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",
@@ -8917,6 +8861,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8968,6 +8913,19 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -9069,6 +9027,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"
@@ -9078,16 +9037,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.56.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.56.1.tgz",
-      "integrity": "sha512-U4lM6pjmBX7J5wk4szltF7I1cGBHXZopnAXCMXb3+fZ3B/0Z3hq3wS/CCUB2NZBNAExK92mCU2tEohWuwVMsDQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
+      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.56.1",
-        "@typescript-eslint/parser": "8.56.1",
-        "@typescript-eslint/typescript-estree": "8.56.1",
-        "@typescript-eslint/utils": "8.56.1"
+        "@typescript-eslint/eslint-plugin": "8.54.0",
+        "@typescript-eslint/parser": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -9097,7 +9056,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
@@ -9396,6 +9355,7 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/app/(dashboard)/group/page.tsx b/src/app/(dashboard)/group/page.tsx
index 0a6dde707..5a0565f02 100644
--- a/src/app/(dashboard)/group/page.tsx
+++ b/src/app/(dashboard)/group/page.tsx
@@ -115,7 +115,7 @@ const GroupDetailsName = () => {
             >
               <div
                 className={cn(
-                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
                   !isAllowedToRename &&
                     "opacity-40 cursor-not-allowed pointer-events-none",
                 )}
diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index c9e10e1f7..371e60684 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -268,7 +268,7 @@ const PeerHeader = () => {
                   <ModalTrigger>
                     <div
                       className={
-                        "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+                        "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
                       }
                     >
                       <PencilIcon size={16} />
@@ -838,7 +838,7 @@ function EditableValue({
       <span>{value}</span>
       {canEdit && (
         <button
-          className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+          className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             onEdit();
diff --git a/src/app/(dashboard)/team/user/page.tsx b/src/app/(dashboard)/team/user/page.tsx
index 512c9ddfb..782166c70 100644
--- a/src/app/(dashboard)/team/user/page.tsx
+++ b/src/app/(dashboard)/team/user/page.tsx
@@ -178,7 +178,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             <div className={"flex items-center gap-3"}>
               <div
                 className={
-                  "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+                  "w-10 h-10 rounded-full relative flex items-center justify-center text-nb-gray-100 uppercase text-md font-medium bg-nb-gray-900"
                 }
                 style={
                   isServiceUser
diff --git a/src/app/globals.css b/src/app/globals.css
index 9a53f1955..600141299 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,6 +5,57 @@
 :root {
     --toasts-before: 0;
     --lift: 1;
+
+    /* nb-gray INVERTED ramp (light mode) — space-separated RGB channels.
+       High stops are surfaces (near-white), low stops are text (near-black). */
+    --nb-gray-DEFAULT: 255 255 255;
+    --nb-gray-50: 24 26 29;
+    --nb-gray-100: 31 33 36;
+    --nb-gray-200: 46 50 56;
+    --nb-gray-250: 54 59 64;
+    --nb-gray-300: 71 78 87;
+    --nb-gray-350: 83 93 103;
+    --nb-gray-400: 97 110 121;
+    --nb-gray-500: 124 137 148;
+    --nb-gray-600: 143 156 168;
+    --nb-gray-700: 203 210 214;
+    --nb-gray-800: 223 227 230;
+    --nb-gray-850: 231 234 236;
+    --nb-gray-900: 236 238 240;
+    --nb-gray-910: 238 240 242;
+    --nb-gray-920: 241 243 244;
+    --nb-gray-925: 243 245 246;
+    --nb-gray-930: 244 246 247;
+    --nb-gray-935: 246 248 249;
+    --nb-gray-940: 248 250 251;
+    --nb-gray-950: 251 252 252;
+    --nb-gray-960: 255 255 255;
+}
+
+.dark {
+    /* nb-gray ORIGINAL ramp (dark mode) */
+    --nb-gray-DEFAULT: 24 26 29;
+    --nb-gray-50: 244 246 247;
+    --nb-gray-100: 228 231 233;
+    --nb-gray-200: 203 210 214;
+    --nb-gray-250: 183 192 198;
+    --nb-gray-300: 163 173 181;
+    --nb-gray-350: 143 156 168;
+    --nb-gray-400: 124 137 148;
+    --nb-gray-500: 97 110 121;
+    --nb-gray-600: 83 93 103;
+    --nb-gray-700: 71 78 87;
+    --nb-gray-800: 63 68 75;
+    --nb-gray-850: 54 59 64;
+    --nb-gray-900: 46 50 56;
+    --nb-gray-910: 43 47 51;
+    --nb-gray-920: 37 40 45;
+    --nb-gray-925: 30 33 35;
+    --nb-gray-930: 37 40 44;
+    --nb-gray-935: 31 33 36;
+    --nb-gray-940: 28 30 33;
+    --nb-gray-950: 24 26 29;
+    --nb-gray-960: 22 24 27;
 }
 
 html{
@@ -12,13 +63,13 @@ html{
 }
 
 h1 {
-    @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
+    @apply text-2xl font-medium text-nb-gray-100 my-1;
 }
 h2 {
-    @apply text-xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
+    @apply text-xl font-medium text-nb-gray-100 my-1;
 }
 p {
-    @apply font-light tracking-wide text-gray-700 dark:text-zinc-50 text-sm;
+    @apply font-light tracking-wide text-nb-gray-200 text-sm;
 }
 
 .p-default {
@@ -103,7 +154,7 @@ p {
 }
 
 .timescape input:focus {
-    @apply bg-nb-gray-700 text-white rounded py-1 px-0.5 border-0 outline-0;
+    @apply bg-nb-gray-700 text-nb-gray-50 rounded py-1 px-0.5 border-0 outline-0;
 }
 
 /**
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index 175afd344..47383ed29 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -111,7 +111,7 @@ function InviteAcceptContent() {
                 <Clock className="w-8 h-8 text-yellow-500" />
               </div>
             </div>
-            <h1 className="text-2xl font-semibold text-white mb-2">
+            <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
               Too Many Requests
             </h1>
             <Paragraph className="text-nb-gray-400 text-base">
@@ -138,7 +138,7 @@ function InviteAcceptContent() {
               <AlertCircle className="w-8 h-8 text-red-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Invalid Invite
           </h1>
           <Paragraph className="text-nb-gray-400 text-base">
@@ -166,7 +166,7 @@ function InviteAcceptContent() {
               <CheckCircle2 className="w-8 h-8 text-green-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Account Created!
           </h1>
           <Paragraph className="text-nb-gray-400">
@@ -194,7 +194,7 @@ function InviteAcceptContent() {
               <AlertCircle className="w-8 h-8 text-yellow-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Invite Expired
           </h1>
           <Paragraph className="text-nb-gray-400">
@@ -221,7 +221,7 @@ function InviteAcceptContent() {
         </div>
 
         <div className="text-center mb-8">
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Welcome to NetBird
           </h1>
           <p className="dark:text-nb-gray-400 text-nb-gray-500 text-base">
@@ -235,7 +235,7 @@ function InviteAcceptContent() {
               <User2 className="w-5 h-5 text-nb-gray-400" />
             </div>
             <div>
-              <div className="text-white font-medium">{inviteInfo.name}</div>
+              <div className="dark:text-white text-nb-gray-900 font-medium">{inviteInfo.name}</div>
               <div className="text-nb-gray-400 text-sm flex items-center gap-1">
                 <Mail className="w-3 h-3" />
                 {inviteInfo.email}
diff --git a/src/assets/netbird-full-light.svg b/src/assets/netbird-full-light.svg
new file mode 100644
index 000000000..3457b50c6
--- /dev/null
+++ b/src/assets/netbird-full-light.svg
@@ -0,0 +1,19 @@
+<svg width="133" height="23" viewBox="0 0 133 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_3)">
+<path d="M46.9438 7.5013C48.1229 8.64688 48.7082 10.3025 48.7082 12.4683V21.6663H46.1411V12.8362C46.1411 11.2809 45.7481 10.0851 44.9704 9.26566C44.1928 8.43783 43.1308 8.0281 41.7846 8.0281C40.4383 8.0281 39.3345 8.45455 38.5234 9.30747C37.7123 10.1604 37.3109 11.4063 37.3109 13.0369V21.6663H34.7188V6.06305H37.3109V8.28732C37.821 7.49294 38.5234 6.87416 39.4014 6.43934C40.2878 6.00452 41.2578 5.78711 42.3197 5.78711C44.2179 5.78711 45.7565 6.36408 46.9355 7.50966L46.9438 7.5013Z" fill="#1f2124"/>
+<path d="M67.1048 14.8344H54.6288C54.7208 16.373 55.2476 17.5771 56.2092 18.4384C57.1708 19.2997 58.3331 19.7345 59.6961 19.7345C60.8166 19.7345 61.7531 19.4753 62.4973 18.9485C63.2499 18.4301 63.7767 17.7277 64.0777 16.858H66.8706C66.4525 18.3548 65.6163 19.5756 64.3621 20.5205C63.1078 21.4571 61.5525 21.9337 59.6878 21.9337C58.2077 21.9337 56.8865 21.5992 55.7159 20.9386C54.5452 20.278 53.6337 19.3331 52.9648 18.1039C52.2958 16.8831 51.9697 15.4616 51.9697 13.8477C51.9697 12.2339 52.2958 10.8207 52.9397 9.60825C53.5836 8.39578 54.495 7.45924 55.6573 6.80702C56.828 6.15479 58.1659 5.82031 59.6878 5.82031C61.2096 5.82031 62.4806 6.14643 63.6178 6.79029C64.7551 7.43416 65.6331 8.32052 66.2518 9.44938C66.8706 10.5782 67.18 11.8576 67.18 13.2791C67.18 13.7725 67.1549 14.2909 67.0964 14.8428L67.1048 14.8344ZM63.8603 10.1769C63.4255 9.4661 62.8318 8.92258 62.0793 8.55465C61.3267 8.18673 60.4989 8.00277 59.5874 8.00277C58.2746 8.00277 57.1625 8.42086 56.2427 9.25705C55.3228 10.0932 54.796 11.2472 54.6623 12.7356H64.5126C64.5126 11.7489 64.2952 10.896 63.8603 10.1852V10.1769Z" fill="#1f2124"/>
+<path d="M73.7695 8.20355V17.4016C73.7695 18.1626 73.9284 18.6977 74.2545 19.0071C74.5806 19.3165 75.1409 19.4754 75.9352 19.4754H77.8418V21.6662H75.5088C74.0622 21.6662 72.9835 21.3317 72.2644 20.6711C71.5452 20.0105 71.1857 18.9151 71.1857 17.3933V8.19519H69.1621V6.0629H71.1857V2.13281H73.7779V6.0629H77.8501V8.19519H73.7779L73.7695 8.20355Z" fill="#1f2124"/>
+<path d="M85.9022 6.68902C86.9307 6.10369 88.093 5.80266 89.4058 5.80266C90.8106 5.80266 92.0732 6.13714 93.1937 6.79773C94.3142 7.46668 95.2006 8.39485 95.8444 9.59896C96.4883 10.8031 96.8144 12.2079 96.8144 13.7966C96.8144 15.3854 96.4883 16.7818 95.8444 18.011C95.2006 19.2486 94.3142 20.2018 93.1854 20.8875C92.0565 21.5732 90.7939 21.916 89.4141 21.916C88.0344 21.916 86.8805 21.6234 85.8687 21.0297C84.8569 20.4443 84.0876 19.6918 83.5775 18.7803V21.6568H80.9854V0.601562H83.5775V8.97182C84.1127 8.04365 84.8904 7.28272 85.9105 6.69738L85.9022 6.68902ZM93.4529 10.7362C92.9763 9.86654 92.3408 9.19759 91.5297 8.74605C90.7186 8.29451 89.8322 8.06037 88.8706 8.06037C87.909 8.06037 87.0394 8.29451 86.2366 8.75441C85.4255 9.22268 84.7817 9.89163 84.2967 10.778C83.8117 11.6643 83.5692 12.6845 83.5692 13.8384C83.5692 14.9924 83.8117 16.046 84.2967 16.9323C84.7817 17.8187 85.4255 18.4877 86.2366 18.9559C87.0394 19.4242 87.9174 19.65 88.8706 19.65C89.8239 19.65 90.727 19.4158 91.5297 18.9559C92.3324 18.4877 92.9763 17.8187 93.4529 16.9323C93.9296 16.046 94.1637 15.0091 94.1637 13.8134C94.1637 12.6176 93.9296 11.6142 93.4529 10.7362Z" fill="#1f2124"/>
+<path d="M100.318 3.01864C99.9749 2.67581 99.8076 2.25771 99.8076 1.76436C99.8076 1.27101 99.9749 0.852913 100.318 0.510076C100.661 0.167238 101.079 0 101.572 0C102.065 0 102.45 0.167238 102.784 0.510076C103.119 0.852913 103.286 1.27101 103.286 1.76436C103.286 2.25771 103.119 2.67581 102.784 3.01864C102.45 3.36148 102.049 3.52872 101.572 3.52872C101.095 3.52872 100.661 3.36148 100.318 3.01864ZM102.826 6.06237V21.6657H100.234V6.06237H102.826Z" fill="#1f2124"/>
+<path d="M111.773 6.52155C112.617 6.0282 113.646 5.77734 114.867 5.77734V8.45315H114.181C111.28 8.45315 109.825 10.0252 109.825 13.1776V21.6649H107.232V6.06165H109.825V8.5953C110.276 7.70058 110.928 7.00654 111.773 6.51319V6.52155Z" fill="#1f2124"/>
+<path d="M117.861 9.60732C118.505 8.40321 119.391 7.46668 120.52 6.80609C121.649 6.1455 122.92 5.81102 124.325 5.81102C125.537 5.81102 126.666 6.09533 127.711 6.64721C128.757 7.20746 129.551 7.94331 130.103 8.85475V0.601562H132.72V21.6735H130.103V18.7385C129.593 19.6667 128.832 20.436 127.828 21.0297C126.825 21.6317 125.646 21.9244 124.3 21.9244C122.953 21.9244 121.657 21.5816 120.528 20.8959C119.4 20.2102 118.513 19.257 117.869 18.0194C117.226 16.7818 116.899 15.377 116.899 13.805C116.899 12.233 117.226 10.8114 117.869 9.60732H117.861ZM129.392 10.7613C128.915 9.89163 128.28 9.22268 127.469 8.75441C126.658 8.28614 125.771 8.06037 124.81 8.06037C123.848 8.06037 122.962 8.28614 122.159 8.74605C121.356 9.20595 120.729 9.86654 120.253 10.7362C119.776 11.6058 119.542 12.6343 119.542 13.8134C119.542 14.9924 119.776 16.046 120.253 16.9323C120.729 17.8187 121.365 18.4877 122.159 18.9559C122.953 19.4242 123.84 19.65 124.81 19.65C125.78 19.65 126.666 19.4158 127.469 18.9559C128.272 18.4877 128.915 17.8187 129.392 16.9323C129.869 16.046 130.103 15.0175 130.103 13.8384C130.103 12.6594 129.869 11.6393 129.392 10.7613Z" fill="#1f2124"/>
+<path d="M21.4651 0.568359C17.8193 0.902835 16.0047 3.00167 15.3191 4.06363L4.66602 22.5183H17.5182L30.1949 0.568359H21.4651Z" fill="#F68330"/>
+<path d="M17.5265 22.5187L0 3.9302C0 3.9302 19.8177 -1.39633 21.7493 15.2188L17.5265 22.5187Z" fill="#F68330"/>
+<path d="M14.9255 4.75055L9.54883 14.0657L17.5177 22.5196L21.7405 15.2029C21.0715 9.49174 18.287 6.37276 14.9255 4.74219" fill="#F35E32"/>
+</g>
+<defs>
+<clipPath id="clip0_0_3">
+<rect width="132.72" height="22.5186" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 143a2b7cb..2afa6790e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -69,20 +69,19 @@ export const buttonVariants = cva(
           "dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
         ],
         "danger-outline": [
-          "", // TODO - add danger button styles for light mode
-          "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",
-          "",
+          "bg-transparent text-red-600 border-red-300 hover:bg-red-50 hover:border-red-400 focus:ring-red-500/30",
+          "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 dark:border-transparent",
         ],
         "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 rounded-sm",
+          "bg-transparent text-red-500 hover:text-red-600 border-transparent !px-0 !shadow-none !py-0 focus:ring-red-500/30 ring-offset-nb-gray-950/50 rounded-sm",
         ],
         "default-outline": [
-          "dark:ring-offset-nb-gray-950/50 dark:focus:ring-nb-gray-500/20",
-          "dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-nb-gray-900/30 dark:hover:border-nb-gray-800/50",
-          "data-[state=open]:dark:text-white data-[state=open]:dark:bg-nb-gray-900/30 data-[state=open]:dark:border-nb-gray-800/50",
+          "ring-offset-nb-gray-950/50 focus:ring-nb-gray-500/20",
+          "bg-transparent text-nb-gray-400 border-transparent hover:text-nb-gray-50 hover:bg-nb-gray-900/30 hover:border-nb-gray-800/50",
+          "data-[state=open]:text-nb-gray-50 data-[state=open]:bg-nb-gray-900/30 data-[state=open]:border-nb-gray-800/50",
         ],
         danger: [
-          "", // TODO - add danger button styles for light mode
+          "enabled:bg-red-600 enabled:text-white enabled:hover:bg-red-700 enabled:focus:bg-red-700 enabled:focus:ring-red-400/50 border-red-600 disabled:bg-red-300 disabled:text-white",
           "dark:focus:ring-red-700/20 dark:focus:bg-red-700 hover:dark:bg-red-700 dark:hover:border-red-800/50 dark:bg-red-600 dark:text-red-100",
         ],
       },
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
index ff7c928d1..8fb8292aa 100644
--- a/src/components/Code.tsx
+++ b/src/components/Code.tsx
@@ -44,7 +44,7 @@ export default function Code({
             : "bg-gray-50  border-neutral-200 dark:border-nb-gray-700 hover:dark:bg-nb-gray-900/80 dark:bg-nb-gray-900",
           dark
             ? "text-nb-gray-300 hover:text-nb-gray-300"
-            : "dark:text-nb-gray-200 hover:dark:text-nb-gray-200",
+            : "text-nb-gray-200 hover:text-nb-gray-200",
           "overflow-x-auto relative z-0 w-full",
           className,
         )}
diff --git a/src/components/DatePickerWithRange.tsx b/src/components/DatePickerWithRange.tsx
index 794d761b6..e7ab72abf 100644
--- a/src/components/DatePickerWithRange.tsx
+++ b/src/components/DatePickerWithRange.tsx
@@ -220,7 +220,7 @@ function CalendarButton({
       className={cn(
         "py-1.5 leading-none px-2.5 rounded-md text-center text-xs transition-all flex gap-2",
         active
-          ? "bg-nb-gray-800 text-white"
+          ? "bg-nb-gray-800 text-nb-gray-100"
           : "bg-transparent text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
       )}
       onClick={onClick}
diff --git a/src/components/FullTooltip.tsx b/src/components/FullTooltip.tsx
index c67d81b4d..5397e54b1 100644
--- a/src/components/FullTooltip.tsx
+++ b/src/components/FullTooltip.tsx
@@ -74,7 +74,7 @@ export default function FullTooltip({
               <div
                 className={cn(
                   isAction ? "cursor-pointer" : "cursor-default",
-                  "inline-flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md",
+                  "inline-flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md",
                   className,
                 )}
               >
diff --git a/src/components/HelpText.tsx b/src/components/HelpText.tsx
index 87555949a..b6737f5d1 100644
--- a/src/components/HelpText.tsx
+++ b/src/components/HelpText.tsx
@@ -14,7 +14,7 @@ export default function HelpText({
   return (
     <span
       className={cn(
-        "text-[.8rem] dark:text-nb-gray-300 block font-light tracking-wide",
+        "text-[.8rem] text-nb-gray-300 block font-light tracking-wide",
         margin && "mb-2",
         className,
       )}
diff --git a/src/components/InlineLink.tsx b/src/components/InlineLink.tsx
index 1b8373816..4af8afe50 100644
--- a/src/components/InlineLink.tsx
+++ b/src/components/InlineLink.tsx
@@ -26,9 +26,9 @@ export const linkVariants = cva(
       variant: {
         default: "text-netbird hover:underline font-normal",
         faded: "text-nb-gray-400 hover:text-nb-gray-300 hover:underline",
-        white: "text-nb-gray-100 hover:text-white hover:underline",
+        white: "text-nb-gray-100 hover:text-nb-gray-100 hover:underline",
         dashed:
-          "text-nb-gray-100/90 underline font-normal decoration-dashed hover:text-white",
+          "text-nb-gray-100/90 underline font-normal decoration-dashed hover:text-nb-gray-100",
       },
     },
   },
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 142bb7aa5..204dd4beb 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -77,7 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <button
           type="button"
           onClick={() => setShowPassword(!showPassword)}
-          className={"hover:text-white transition-all"}
+          className={"hover:text-nb-gray-100 transition-all"}
           aria-label={"Toggle password visibility"}
         >
           {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -107,7 +107,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
           <div
             className={cn(
-              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]",
+              "absolute left-0 top-0 h-full flex items-center text-xs text-nb-gray-300 pl-3 leading-[0]",
               props.disabled && "opacity-40",
             )}
           >
@@ -135,7 +135,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
           <div
             className={cn(
-              "absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-4 leading-[0] select-none",
+              "absolute right-0 top-0 h-full flex items-center text-xs text-nb-gray-300 pr-4 leading-[0] select-none",
               props.disabled && "opacity-30",
             )}
           >
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index cac9dc205..5fcc6f78e 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const labelVariants = cva(
-  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block dark:text-nb-gray-200 flex items-center gap-2",
+  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block text-nb-gray-200 flex items-center gap-2",
 );
 
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
diff --git a/src/components/NetBirdLogo.tsx b/src/components/NetBirdLogo.tsx
index 8e1ac9306..0ac814f5a 100644
--- a/src/components/NetBirdLogo.tsx
+++ b/src/components/NetBirdLogo.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import * as React from "react";
 import NetBirdLogoMark from "@/assets/netbird.svg";
 import NetBirdLogoFull from "@/assets/netbird-full.svg";
+import NetBirdLogoFullLight from "@/assets/netbird-full-light.svg";
 
 type Props = {
   size?: "default" | "large";
@@ -23,18 +24,29 @@ const sizes = {
 export const NetBirdLogo = ({ size = "default", mobile = true }: Props) => {
   return (
     <>
-      <Image
-        src={NetBirdLogoFull}
-        height={sizes[size].desktop}
-        alt={"NetBird Logo"}
-        className={cn(mobile && "hidden md:block")}
-      />
+      {/* Full wordmark — hidden on mobile screens when `mobile` is set.
+          Inner images toggle by theme: dark-text variant in light mode,
+          light-text variant in dark mode. */}
+      <span className={cn("relative", mobile && "hidden md:block")}>
+        <Image
+          src={NetBirdLogoFullLight}
+          height={sizes[size].desktop}
+          alt={"NetBird Logo"}
+          className={"block dark:hidden"}
+        />
+        <Image
+          src={NetBirdLogoFull}
+          height={sizes[size].desktop}
+          alt={"NetBird Logo"}
+          className={"hidden dark:block"}
+        />
+      </span>
       {mobile && (
         <Image
           src={NetBirdLogoMark}
           width={sizes[size].mobile}
           alt={"NetBird Logo"}
-          className={cn(mobile && "md:hidden ml-4")}
+          className={cn("md:hidden ml-4")}
         />
       )}
     </>
diff --git a/src/components/NetworkRouteSelector.tsx b/src/components/NetworkRouteSelector.tsx
index 01cfb0644..937334b23 100644
--- a/src/components/NetworkRouteSelector.tsx
+++ b/src/components/NetworkRouteSelector.tsx
@@ -109,7 +109,7 @@ export function NetworkRouteSelector({
             {value ? (
               <div
                 className={
-                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1 gap-2"
+                  "flex items-center justify-between text-sm text-nb-gray-100 w-full pr-4 pl-1 gap-2"
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 045d5117a..fce6cb549 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -164,7 +164,7 @@ export default function Notification<T>({
         <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",
+              "h-8 w-8  shadow-sm text-nb-gray-100 flex items-center justify-center rounded-md shrink-0",
               loading
                 ? "bg-nb-gray-900"
                 : error
diff --git a/src/components/PeerSelector.tsx b/src/components/PeerSelector.tsx
index e259de7cb..8315fa1ca 100644
--- a/src/components/PeerSelector.tsx
+++ b/src/components/PeerSelector.tsx
@@ -113,7 +113,7 @@ export function PeerSelector({
             {value ? (
               <div
                 className={
-                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1"
+                  "flex items-center justify-between text-sm text-nb-gray-100 w-full pr-4 pl-1"
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
@@ -203,7 +203,7 @@ export function PeerSelector({
                       className={cn(
                         "flex items-center gap-2.5 text-sm",
                         value && value.id == option.id
-                          ? "text-white"
+                          ? "text-nb-gray-100"
                           : "text-nb-gray-300",
                       )}
                     >
@@ -233,7 +233,7 @@ export function PeerSelector({
                       className={cn(
                         "font-medium flex items-center gap-1 font-mono text-[10px]",
                         value && value.id == option.id
-                          ? "text-white"
+                          ? "text-nb-gray-100"
                           : "text-nb-gray-300",
                         !isSupported && "opacity-50",
                       )}
diff --git a/src/components/PinCodeInput.tsx b/src/components/PinCodeInput.tsx
index 436ca4c40..8ce22fb67 100644
--- a/src/components/PinCodeInput.tsx
+++ b/src/components/PinCodeInput.tsx
@@ -108,7 +108,7 @@ const PinCodeInput = forwardRef<PinCodeInputRef, Props>(function PinCodeInput(
           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",
+            "bg-nb-gray-900 border 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",
diff --git a/src/components/PortSelector.tsx b/src/components/PortSelector.tsx
index 159c399cd..06eab0834 100644
--- a/src/components/PortSelector.tsx
+++ b/src/components/PortSelector.tsx
@@ -323,7 +323,7 @@ export function PortSelector({
       {portRanges?.length > 0 && (
         <Callout variant={"info"} className={"mt-4"}>
           Port ranges requires NetBird client{" "}
-          <span className={"text-white font-normal"}>v0.48</span> or higher.
+          <span className={"text-nb-gray-100 font-normal"}>v0.48</span> or higher.
         </Callout>
       )}
     </>
diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
index 6daa2c00a..988e801d5 100644
--- a/src/components/Separator.tsx
+++ b/src/components/Separator.tsx
@@ -1,3 +1,3 @@
 export default function Separator() {
-  return <span className={"h-[1px] w-full bg-zinc-700/40 block"}></span>;
+  return <span className={"h-[1px] w-full bg-nb-gray-800/40 block"}></span>;
 }
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index b34b590de..f8525b078 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -23,13 +23,13 @@ export const tooltipVariants = cva(
       variant: {
         default: [
           "bg-nb-gray-940",
-          "text-neutral-50",
-          "border-neutral-200 border-nb-gray-930",
+          "text-nb-gray-50",
+          "border-nb-gray-930",
         ],
         lighter: [
           "bg-nb-gray-920",
-          "text-neutral-50",
-          "border-neutral-200 border-nb-gray-900",
+          "text-nb-gray-50",
+          "border-nb-gray-900",
         ],
       },
     },
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 2634845bf..3bf144fc9 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -135,7 +135,7 @@ const SidebarModalContent = React.forwardRef<
           <DialogPrimitive.Content
             ref={ref}
             className={cn(
-              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-zinc-700/40 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
+              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
               "border-t-0 border-r-0 border-b-0 shadow-2xl",
               className,
               maxWidthClass,
diff --git a/src/components/table/DataTableFilter.tsx b/src/components/table/DataTableFilter.tsx
index 856f43538..940a7da86 100644
--- a/src/components/table/DataTableFilter.tsx
+++ b/src/components/table/DataTableFilter.tsx
@@ -188,7 +188,7 @@ export function DataTableFilter<TData>({
         <Button variant={"secondary"} disabled={disabled}>
           <FilterIcon size={15} className={"shrink-0"} />
           <span>
-            <span className={"text-white"}>
+            <span className={"text-nb-gray-100"}>
               {activeFiltersCount > 0 && activeFiltersCount}
             </span>
             {activeFiltersCount > 0 ? ` Filter(s)` : "Filter"}
diff --git a/src/components/table/DataTableMultiSelectPopup.tsx b/src/components/table/DataTableMultiSelectPopup.tsx
index 9f7210aca..9e5eb5fc2 100644
--- a/src/components/table/DataTableMultiSelectPopup.tsx
+++ b/src/components/table/DataTableMultiSelectPopup.tsx
@@ -56,7 +56,7 @@ export function DataTableMultiSelectPopup<T>({
                     <div className={"flex gap-2 items-center"}>
                       <MonitorSmartphoneIcon size={16} className={""} />
                       <span>
-                        <span className={"font-medium text-white"}>
+                        <span className={"font-medium text-nb-gray-100"}>
                           {count}
                         </span>{" "}
                         {label}
diff --git a/src/components/table/DataTablePagination.tsx b/src/components/table/DataTablePagination.tsx
index 31ae4e57a..733a983d6 100644
--- a/src/components/table/DataTablePagination.tsx
+++ b/src/components/table/DataTablePagination.tsx
@@ -40,10 +40,10 @@ export function DataTablePagination<TData>({
       >
         <div className="text-nb-gray-400">
           Showing{" "}
-          <span className={"font-medium text-white"}>
+          <span className={"font-medium text-nb-gray-100"}>
             {showingFrom} to {showingTo}
           </span>{" "}
-          of <span className={"font-medium text-white"}>{totalRows}</span>{" "}
+          of <span className={"font-medium text-nb-gray-100"}>{totalRows}</span>{" "}
           {text}
         </div>
         {pageCount > 1 && (
diff --git a/src/components/table/DataTableRowsPerPage.tsx b/src/components/table/DataTableRowsPerPage.tsx
index 1dfaed257..a3a03b49f 100644
--- a/src/components/table/DataTableRowsPerPage.tsx
+++ b/src/components/table/DataTableRowsPerPage.tsx
@@ -33,7 +33,7 @@ export function DataTableRowsPerPage<TData>({
           >
             <RowsIcon size={15} className={"text-nb-gray-300 shrink-0"} />
             <div>
-              <span className={"text-white"}>
+              <span className={"text-nb-gray-100"}>
                 {table.getState().pagination.pageSize}
               </span>
               <span className={"text-nb-gray-300"}> rows per page</span>
@@ -57,16 +57,16 @@ export function DataTableRowsPerPage<TData>({
                   <div
                     className={cn(
                       "cursor-pointer",
-                      "flex gap-2 px-2 py-1.5 my-1 mx-1 rounded-md items-center hover:dark:bg-nb-gray-800 text-nb-gray-400 hover:text-white",
+                      "flex gap-2 px-2 py-1.5 my-1 mx-1 rounded-md items-center hover:bg-nb-gray-800 text-nb-gray-400 hover:text-nb-gray-100",
                       table.getState().pagination.pageSize === val
-                        ? "text-white"
+                        ? "text-nb-gray-100"
                         : "",
                     )}
                   >
                     <Check
                       size={15}
                       className={cn(
-                        "text-white shrink-0",
+                        "text-nb-gray-100 shrink-0",
                         table.getState().pagination.pageSize === val
                           ? "opacity-100"
                           : "opacity-0",
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index ac0b0cb3e..cbf8d23a7 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -104,7 +104,7 @@ const TableRow = React.forwardRef<
       " transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
       "dark:data-[state=selected]:border-nb-gray-900",
       minimal
-        ? "dark:hover:bg-nb-gray-910/[15%]"
+        ? "hover:bg-nb-gray-910/[15%]"
         : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-940 hover:bg-neutral-100/50",
       className,
     )}
@@ -128,7 +128,7 @@ const TableHead = React.forwardRef<
       "h-12 px-4 text-left align-middle uppercase font-medium  [&:has([role=checkbox])]:pr-0 w-auto",
       minimal
         ? "px-6"
-        : "text-neutral-500 dark:text-nb-gray-400 dark:bg-nb-gray-900",
+        : "text-neutral-500 dark:text-nb-gray-400 bg-nb-gray-900",
       inset && "first:pl-[52px]",
       className,
     )}
diff --git a/src/components/ui/DarkModeToggle.tsx b/src/components/ui/DarkModeToggle.tsx
index 2643780ad..6913dc2d3 100644
--- a/src/components/ui/DarkModeToggle.tsx
+++ b/src/components/ui/DarkModeToggle.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 
 export default function DarkModeToggle() {
   const [mounted, setMounted] = useState(false);
-  const { setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     setMounted(true);
@@ -24,14 +24,20 @@ export default function DarkModeToggle() {
       <DropdownMenuTrigger asChild>
         <Button className={"!px-3"} variant={"default"}>
           <div>
-            <SunIcon
-              size={16}
-              className={"scale-100 dark:scale-0 dark:absolute relative"}
-            />
-            <MoonIcon
-              size={16}
-              className={"scale-0 dark:scale-100 absolute dark:relative"}
-            />
+            {theme === "system" ? (
+              <MonitorIcon size={16} className={"relative"} />
+            ) : (
+              <>
+                <SunIcon
+                  size={16}
+                  className={"scale-100 dark:scale-0 dark:absolute relative"}
+                />
+                <MoonIcon
+                  size={16}
+                  className={"scale-0 dark:scale-100 absolute dark:relative"}
+                />
+              </>
+            )}
           </div>
         </Button>
       </DropdownMenuTrigger>
@@ -39,7 +45,6 @@ export default function DarkModeToggle() {
         <DropdownMenuItem
           onClick={() => setTheme("light")}
           className={"flex gap-2"}
-          disabled={true}
         >
           <SunIcon size={16} />
           Light
@@ -52,7 +57,6 @@ export default function DarkModeToggle() {
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem
-          disabled={true}
           onClick={() => setTheme("system")}
           className={"flex gap-2"}
         >
diff --git a/src/components/ui/HelpAndSupportButton.tsx b/src/components/ui/HelpAndSupportButton.tsx
index b9b95673d..ffee549d4 100644
--- a/src/components/ui/HelpAndSupportButton.tsx
+++ b/src/components/ui/HelpAndSupportButton.tsx
@@ -39,7 +39,7 @@ export default function HelpAndSupportButton() {
           variant={"default-outline"}
           className={cn(
             "!rounded-full h-[38px] w-[38px] !p-0",
-            dropdownOpen && "text-white",
+            dropdownOpen && "text-nb-gray-100",
           )}
         >
           <CircleQuestionMark size={18} />
diff --git a/src/contexts/GlobalThemeProvider.tsx b/src/contexts/GlobalThemeProvider.tsx
index e12297323..0187adf92 100644
--- a/src/contexts/GlobalThemeProvider.tsx
+++ b/src/contexts/GlobalThemeProvider.tsx
@@ -3,6 +3,7 @@
 import "react-loading-skeleton/dist/skeleton.css";
 import dynamic from "next/dynamic";
 import { type ThemeProviderProps } from "next-themes/dist/types";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
 
@@ -11,6 +12,25 @@ const NextThemesProvider = dynamic(
   { ssr: false },
 );
 
+/**
+ * Wraps the skeleton loader theme so its colors follow the active theme.
+ * Uses `resolvedTheme` so the "system" option resolves to the real OS value.
+ * Defaults to the dark palette before mount to match the dark default theme.
+ */
+function ThemedSkeleton({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme();
+  const isLight = resolvedTheme === "light";
+
+  return (
+    <SkeletonTheme
+      baseColor={isLight ? "#e4e7e9" : "#25282d"}
+      highlightColor={isLight ? "#f4f6f7" : "#33373e"}
+    >
+      {children}
+    </SkeletonTheme>
+  );
+}
+
 export function GlobalThemeProvider({
   children,
   ...props
@@ -20,13 +40,11 @@ export function GlobalThemeProvider({
       attribute="class"
       defaultTheme="dark"
       storageKey="netbird-theme"
-      enableSystem={false}
+      enableSystem={true}
       disableTransitionOnChange
       {...props}
     >
-      <SkeletonTheme baseColor={"#25282d"} highlightColor={"#33373e"}>
-        {children}
-      </SkeletonTheme>
+      <ThemedSkeleton>{children}</ThemedSkeleton>
     </NextThemesProvider>
   );
 }
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 392ad779c..accc3d219 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -43,6 +43,15 @@ export default function AppLayout({
   return (
     <html lang="en">
       <head>
+        {/* Set the theme class before first paint to avoid a flash.
+            Mirrors next-themes (storageKey "netbird-theme", default "dark",
+            system-aware) — required because GlobalThemeProvider is ssr:false,
+            so next-themes' own pre-hydration script never runs on the server. */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('netbird-theme')||'dark';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList[d?'add':'remove']('dark');}catch(e){document.documentElement.classList.add('dark');}})();`,
+          }}
+        />
         <GoogleTagManagerHeadScript />
       </head>
       <body className={cn(inter.className)}>
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index afdf4301c..94e124ace 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -15,6 +15,7 @@ import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import HelpAndSupportButton from "@components/ui/HelpAndSupportButton";
+import DarkModeToggle from "@components/ui/DarkModeToggle";
 
 export const headerHeight = 65;
 
@@ -70,6 +71,7 @@ export default function NavbarWithDropdown() {
             <MSPTransferAccountModal />
             <DistributorTransferAccountModal />
             <MSPTenantsSwitcher />
+            <DarkModeToggle />
             <HelpAndSupportButton />
             <UserDropdown />
           </div>
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
index 5a60ff831..95f3968e7 100644
--- a/src/modules/access-control/AccessControlModal.tsx
+++ b/src/modules/access-control/AccessControlModal.tsx
@@ -274,8 +274,8 @@ export function AccessControlModalContent({
                 <HelpText className={"max-w-sm"}>
                   Allow only specified network protocols. To change traffic
                   direction and ports, select{" "}
-                  <b className={"text-white"}>TCP</b> or{" "}
-                  <b className={"text-white"}>UDP</b> protocol.
+                  <b className={"text-nb-gray-100"}>TCP</b> or{" "}
+                  <b className={"text-nb-gray-100"}>UDP</b> protocol.
                 </HelpText>
               </div>
               <Select
diff --git a/src/modules/common-table-rows/LastTimeRow.tsx b/src/modules/common-table-rows/LastTimeRow.tsx
index 0373e5802..155f2a029 100644
--- a/src/modules/common-table-rows/LastTimeRow.tsx
+++ b/src/modules/common-table-rows/LastTimeRow.tsx
@@ -26,7 +26,7 @@ export default function LastTimeRow({
         <TooltipTrigger>
           <div
             className={
-              "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-default"
+              "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-default"
             }
           >
             <>
diff --git a/src/modules/control-center/nodes/SelectGroupNode.tsx b/src/modules/control-center/nodes/SelectGroupNode.tsx
index 02f152da3..b5a27ed06 100644
--- a/src/modules/control-center/nodes/SelectGroupNode.tsx
+++ b/src/modules/control-center/nodes/SelectGroupNode.tsx
@@ -7,6 +7,7 @@ import useFetchApi from "@utils/api";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown } from "lucide-react";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { useMemo } from "react";
 import { Group } from "@/interfaces/Group";
@@ -20,6 +21,7 @@ type NodeProps = Node<
 >;
 
 export const SelectGroupNode = ({ data, id }: NodeProps) => {
+  const { resolvedTheme } = useTheme();
   const { data: groups, isLoading: isGroupsLoading } =
     useFetchApi<Group[]>("/groups");
 
@@ -119,7 +121,7 @@ export const SelectGroupNode = ({ data, id }: NodeProps) => {
           height: 20,
           width: "1px",
           border: "none",
-          backgroundColor: "#3f444b",
+          backgroundColor: resolvedTheme === "light" ? "#dfe3e6" : "#3f444b",
           borderRadius: "0px 4px 4px 0px",
           right: -2,
         }}
diff --git a/src/modules/control-center/nodes/SelectPeerNode.tsx b/src/modules/control-center/nodes/SelectPeerNode.tsx
index c5bd5b7af..f874663a3 100644
--- a/src/modules/control-center/nodes/SelectPeerNode.tsx
+++ b/src/modules/control-center/nodes/SelectPeerNode.tsx
@@ -7,6 +7,7 @@ import { cn } from "@utils/helpers";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown } from "lucide-react";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
@@ -24,6 +25,7 @@ type PeerNodeProps = Node<
 >;
 
 export const SelectPeerNode = ({ data, id }: PeerNodeProps) => {
+  const { resolvedTheme } = useTheme();
   const { data: peers, isLoading: isPeersLoading } =
     useFetchApi<Peer[]>("/peers");
 
@@ -91,7 +93,7 @@ export const SelectPeerNode = ({ data, id }: PeerNodeProps) => {
           height: 20,
           width: "1px",
           border: "none",
-          backgroundColor: "#3f444b",
+          backgroundColor: resolvedTheme === "light" ? "#dfe3e6" : "#3f444b",
           borderRadius: "0px 4px 4px 0px",
           right: -2,
         }}
diff --git a/src/modules/control-center/nodes/SelectUserNode.tsx b/src/modules/control-center/nodes/SelectUserNode.tsx
index 6b73de6e0..05e8b3c0a 100644
--- a/src/modules/control-center/nodes/SelectUserNode.tsx
+++ b/src/modules/control-center/nodes/SelectUserNode.tsx
@@ -7,6 +7,7 @@ import { cn, generateColorFromUser } from "@utils/helpers";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown, Cog } from "lucide-react";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { User } from "@/interfaces/User";
 import TruncatedText from "@components/ui/TruncatedText";
@@ -22,6 +23,7 @@ type UserNodeProps = Node<
 >;
 
 export const SelectUserNode = ({ data, id }: UserNodeProps) => {
+  const { resolvedTheme } = useTheme();
   const { data: users } = useFetchApi<User[]>("/users?service_user=false");
 
   const userSelectOptions: SelectOption[] = sortBy(
@@ -110,7 +112,7 @@ export const SelectUserNode = ({ data, id }: UserNodeProps) => {
           height: 20,
           width: "1px",
           border: "none",
-          backgroundColor: "#3f444b",
+          backgroundColor: resolvedTheme === "light" ? "#dfe3e6" : "#3f444b",
           borderRadius: "0px 4px 4px 0px",
           right: -2,
         }}
diff --git a/src/modules/dns/nameservers/table/NameserverNameCell.tsx b/src/modules/dns/nameservers/table/NameserverNameCell.tsx
index 235922c77..3a8d899c6 100644
--- a/src/modules/dns/nameservers/table/NameserverNameCell.tsx
+++ b/src/modules/dns/nameservers/table/NameserverNameCell.tsx
@@ -11,7 +11,7 @@ export default function NameserverNameCell({ ns }: Props) {
     <div className={"flex min-w-[270px] max-w-[270px]"}>
       <div
         className={
-          "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+          "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
         }
         data-testid="nameserver-name-cell"
       >
diff --git a/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
index 0dccd9bfc..a7699ec60 100644
--- a/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
+++ b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
@@ -11,7 +11,7 @@ export const DNSRecordTimeToLiveCell = ({ record }: Props) => {
   return (
     <div
       className={
-        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all py-2 px-3 rounded-md"
+        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
       }
     >
       <ClockIcon size={14} />
diff --git a/src/modules/groups/AssignPeerToGroupModal.tsx b/src/modules/groups/AssignPeerToGroupModal.tsx
index c7ed807bb..dbe19473f 100644
--- a/src/modules/groups/AssignPeerToGroupModal.tsx
+++ b/src/modules/groups/AssignPeerToGroupModal.tsx
@@ -231,7 +231,7 @@ export const AssignGroupToPeerModalContent = ({
                   {groupName !== "All" && (
                     <button
                       className={
-                        "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                        "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
                       }
                       onClick={() => setGroupNameModal(true)}
                     >
diff --git a/src/modules/instance-setup/InstanceSetupWizard.tsx b/src/modules/instance-setup/InstanceSetupWizard.tsx
index 5176cfb5a..031446594 100644
--- a/src/modules/instance-setup/InstanceSetupWizard.tsx
+++ b/src/modules/instance-setup/InstanceSetupWizard.tsx
@@ -170,7 +170,7 @@ export default function InstanceSetupWizard() {
             }
           >
             You are being redirected to login in{" "}
-            <span className={"text-white font-medium"}>{countdown}s</span>...
+            <span className={"text-nb-gray-100 font-medium"}>{countdown}s</span>...
           </div>
           <div className={"flex items-center justify-center mt-4"}>
             <Button
diff --git a/src/modules/networks/misc/NetworkInformationSquare.tsx b/src/modules/networks/misc/NetworkInformationSquare.tsx
index 69ff61925..26fe06b05 100644
--- a/src/modules/networks/misc/NetworkInformationSquare.tsx
+++ b/src/modules/networks/misc/NetworkInformationSquare.tsx
@@ -23,7 +23,7 @@ export const NetworkInformationSquare = ({
       className={cn(
         "flex w-full min-w-0 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-900/60 cursor-pointer py-2 pl-3 pr-14 relative"
+          ? "hover:text-nb-gray-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/ResourceNameCell.tsx b/src/modules/networks/resources/ResourceNameCell.tsx
index 01490fcb4..1fbf2e134 100644
--- a/src/modules/networks/resources/ResourceNameCell.tsx
+++ b/src/modules/networks/resources/ResourceNameCell.tsx
@@ -36,7 +36,7 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
       <div
         className={cn(
           "flex flex-col gap-0 text-neutral-300  font-light truncate",
-          "group-hover:text-neutral-100 text-left",
+          "group-hover:text-nb-gray-100 text-left",
         )}
       >
         <TextWithTooltip
diff --git a/src/modules/onboarding/networks/OnboardingTestResource.tsx b/src/modules/onboarding/networks/OnboardingTestResource.tsx
index 4298bd924..8551beb10 100644
--- a/src/modules/onboarding/networks/OnboardingTestResource.tsx
+++ b/src/modules/onboarding/networks/OnboardingTestResource.tsx
@@ -59,7 +59,7 @@ export const OnboardingTestResource = ({
         <Steps.Step step={1}>
           <p className={"!text-nb-gray-300"}>
             Open your command line and run this command from{" "}
-            <span className={cn(device && "text-white")}>
+            <span className={cn(device && "text-nb-gray-100")}>
               {device?.name || "your device"}
             </span>{" "}
             to ping your resource.
diff --git a/src/modules/onboarding/p2p/OnboardingTestP2P.tsx b/src/modules/onboarding/p2p/OnboardingTestP2P.tsx
index dbcfaa526..9e42e5eab 100644
--- a/src/modules/onboarding/p2p/OnboardingTestP2P.tsx
+++ b/src/modules/onboarding/p2p/OnboardingTestP2P.tsx
@@ -42,8 +42,8 @@ export const OnboardingTestP2P = ({
         <Steps.Step step={1}>
           <p className={"!text-nb-gray-300"}>
             Run this command from{" "}
-            <span className={"text-white"}>{firstDevice?.name}</span> to ping{" "}
-            <span className={"text-white"}>{secondDevice?.name}</span>.
+            <span className={"text-nb-gray-100"}>{firstDevice?.name}</span> to ping{" "}
+            <span className={"text-nb-gray-100"}>{secondDevice?.name}</span>.
             You should receive a response if the connection is working.
           </p>
           <Code message={"Command has been copied successfully"}>
diff --git a/src/modules/peer/AddRouteDropdownButton.tsx b/src/modules/peer/AddRouteDropdownButton.tsx
index 72407f58f..87612b2fd 100644
--- a/src/modules/peer/AddRouteDropdownButton.tsx
+++ b/src/modules/peer/AddRouteDropdownButton.tsx
@@ -61,7 +61,9 @@ export default function AddRouteDropdownButton() {
                 size={"small"}
               />
               <div className={"flex flex-col text-left"}>
-                <div className={"text-left text-white"}>New Network Route</div>
+                <div className={"text-left text-nb-gray-100"}>
+                  New Network Route
+                </div>
                 <div className={"text-xs"}>
                   Create a new network route with this peer
                 </div>
@@ -83,7 +85,7 @@ export default function AddRouteDropdownButton() {
                 size={"small"}
               />
               <div className={"flex flex-col text-left"}>
-                <div className={"text-left text-white"}>Existing Network</div>
+                <div className={"text-left text-nb-gray-100"}>Existing Network</div>
                 <div className={"text-xs"}>
                   Add this peer to an existing network
                 </div>
diff --git a/src/modules/peer/RemoteJobDropdownButton.tsx b/src/modules/peer/RemoteJobDropdownButton.tsx
index 5c10d9a1f..5cda1b124 100644
--- a/src/modules/peer/RemoteJobDropdownButton.tsx
+++ b/src/modules/peer/RemoteJobDropdownButton.tsx
@@ -53,7 +53,7 @@ export const RemoteJobDropdownButton = () => {
               >
                 <div>
                   Peer{" "}
-                  <span className={"text-white font-medium"}>{peer.name}</span>{" "}
+                  <span className={"text-nb-gray-100 font-medium"}>{peer.name}</span>{" "}
                   is currently offline. Please connect the peer to run remote
                   jobs.
                 </div>
@@ -73,7 +73,7 @@ export const RemoteJobDropdownButton = () => {
                 size={"small"}
               />
               <div className={"flex flex-col text-left"}>
-                <div className={"text-left text-white"}>Debug Bundle</div>
+                <div className={"text-left text-nb-gray-100"}>Debug Bundle</div>
                 <div className={"text-xs"}>
                   Collect debug information for troubleshooting
                 </div>
diff --git a/src/modules/peers/PeerAddressCell.tsx b/src/modules/peers/PeerAddressCell.tsx
index c6babf416..f1d8178d2 100644
--- a/src/modules/peers/PeerAddressCell.tsx
+++ b/src/modules/peers/PeerAddressCell.tsx
@@ -65,7 +65,7 @@ export default function PeerAddressCell({ peer }: Props) {
             message={"IP address has been copied to your clipboard"}
           >
             <span
-              className={"dark:text-nb-gray-400 font-mono font-thin text-xs"}
+              className={"text-nb-gray-400 font-mono font-thin text-xs"}
             >
               {peer.ip}
             </span>
diff --git a/src/modules/peers/PeerConnectButton.tsx b/src/modules/peers/PeerConnectButton.tsx
index 5717ea33b..743295791 100644
--- a/src/modules/peers/PeerConnectButton.tsx
+++ b/src/modules/peers/PeerConnectButton.tsx
@@ -63,7 +63,7 @@ const ConnectButton = ({ disabled }: { disabled?: boolean }) => {
   return (
     <button
       className={cn(
-        "flex gap-2 items-center text-sm text-nb-gray-300 hover:text-white disabled:cursor-not-allowed enabled:cursor-pointer enabled:hover:bg-nb-gray-800/60 rounded-md py-2 px-3 disabled:text-nb-gray-700",
+        "flex gap-2 items-center text-sm text-nb-gray-300 hover:text-nb-gray-100 disabled:cursor-not-allowed enabled:cursor-pointer enabled:hover:bg-nb-gray-800/60 rounded-md py-2 px-3 disabled:text-nb-gray-700",
         // group data state open
         "group-data-[state=open]:bg-nb-gray-800/30",
       )}
diff --git a/src/modules/peers/PeerLastSeenCell.tsx b/src/modules/peers/PeerLastSeenCell.tsx
index da1e3c58c..ff0fd5a6d 100644
--- a/src/modules/peers/PeerLastSeenCell.tsx
+++ b/src/modules/peers/PeerLastSeenCell.tsx
@@ -12,7 +12,7 @@ export default function PeerLastSeenCell({ peer }: Props) {
   ) : (
     <div
       className={
-        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all py-2 px-3 rounded-md"
+        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
       }
     >
       <>
diff --git a/src/modules/peers/PeerMultiSelect.tsx b/src/modules/peers/PeerMultiSelect.tsx
index 291b78aaf..6a407a2a3 100644
--- a/src/modules/peers/PeerMultiSelect.tsx
+++ b/src/modules/peers/PeerMultiSelect.tsx
@@ -447,7 +447,7 @@ const PeerGroupMassAssignmentContent = ({
                 <div className={"flex gap-2 items-center"}>
                   <MonitorSmartphoneIcon size={16} className={""} />
                   <span>
-                    <span className={"font-medium text-white"}>
+                    <span className={"font-medium text-nb-gray-100"}>
                       {peerCount}
                     </span>{" "}
                     Peer(s) selected
diff --git a/src/modules/peers/PeerNameCell.tsx b/src/modules/peers/PeerNameCell.tsx
index 06d941d3d..08c3a97ad 100644
--- a/src/modules/peers/PeerNameCell.tsx
+++ b/src/modules/peers/PeerNameCell.tsx
@@ -33,7 +33,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-900/60 cursor-pointer",
+            "hover:text-nb-gray-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/PeerOSCell.tsx b/src/modules/peers/PeerOSCell.tsx
index 598d4d85a..da0dcfbd4 100644
--- a/src/modules/peers/PeerOSCell.tsx
+++ b/src/modules/peers/PeerOSCell.tsx
@@ -26,7 +26,7 @@ export function PeerOSCell({ os, serial }: Readonly<Props>) {
         <TooltipTrigger>
           <div
             className={
-              "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md"
+              "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md"
             }
           >
             <div
diff --git a/src/modules/peers/PeerVersionCell.tsx b/src/modules/peers/PeerVersionCell.tsx
index 6daffb64f..67da923d5 100644
--- a/src/modules/peers/PeerVersionCell.tsx
+++ b/src/modules/peers/PeerVersionCell.tsx
@@ -52,7 +52,7 @@ export default function PeerVersionCell({
         <TooltipProvider>
           <Tooltip delayDuration={10}>
             <TooltipTrigger>
-              <div className="flex gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all rounded-md items-center">
+              <div className="flex gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all rounded-md items-center">
                 <MemoizedNetBirdIcon />
                 {version == "development" ? "dev" : version}
                 <div className={"relative"}>
diff --git a/src/modules/posture-checks/ui/PostureCheckIcons.tsx b/src/modules/posture-checks/ui/PostureCheckIcons.tsx
index 052102418..1424d59a7 100644
--- a/src/modules/posture-checks/ui/PostureCheckIcons.tsx
+++ b/src/modules/posture-checks/ui/PostureCheckIcons.tsx
@@ -39,7 +39,7 @@ export const PostureCheckIcons = () => {
         </div>
       </Circle>
       <Circle className={"z-[1] top-2 "}>
-        <FaWindows className={"text-white text-md"} />
+        <FaWindows className={"text-nb-gray-100 text-md"} />
       </Circle>
     </div>
   );
diff --git a/src/modules/remote-access/rdp/RDPCertificateModal.tsx b/src/modules/remote-access/rdp/RDPCertificateModal.tsx
index c9d057d6d..f899594a9 100644
--- a/src/modules/remote-access/rdp/RDPCertificateModal.tsx
+++ b/src/modules/remote-access/rdp/RDPCertificateModal.tsx
@@ -70,11 +70,11 @@ export const RDPCertificateModal = ({
             />
             <div className={"font-normal text-sm text-nb-gray-200"}>
               Always trust{" "}
-              <span className={"text-white font-medium"}>
+              <span className={"text-nb-gray-100 font-medium"}>
                 {'"' + certificate?.issuer?.replace("CN=", "") + '"'}
               </span>{" "}
               when connecting to{" "}
-              <span className={"text-white font-medium"}>
+              <span className={"text-nb-gray-100 font-medium"}>
                 {'"' + hostname + '"'}
               </span>
             </div>
diff --git a/src/modules/remote-access/ssh/Terminal.tsx b/src/modules/remote-access/ssh/Terminal.tsx
index fbfb15d2c..9de9b265d 100644
--- a/src/modules/remote-access/ssh/Terminal.tsx
+++ b/src/modules/remote-access/ssh/Terminal.tsx
@@ -2,14 +2,24 @@
 
 import "@xterm/xterm/css/xterm.css";
 import { cn } from "@utils/helpers";
-import { useCallback, useEffect, useRef } from "react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+const DARK_TERMINAL_THEME = {
+  background: "#181a1d",
+  foreground: "#e4e7e9",
+  cursor: "#e4e7e9",
+  selectionBackground: "#3a3f44",
+};
+
+const LIGHT_TERMINAL_THEME = {
+  background: "#ffffff",
+  foreground: "#181a1d",
+  cursor: "#181a1d",
+  selectionBackground: "#d4d7d9",
+};
 
 const TERMINAL_OPTIONS = {
-  theme: {
-    background: "#181a1d",
-    foreground: "#e4e7e9",
-    cursor: "#e4e7e9",
-  },
   fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
   fontSize: 13,
   cursorBlink: true,
@@ -20,6 +30,7 @@ const TERMINAL_OPTIONS = {
 
 interface TerminalWithCore {
   _core?: { _isDisposed: boolean };
+  options: { theme?: Record<string, string> };
   dispose(): void;
   write(data: string | Uint8Array): void;
   writeln(data: string): void;
@@ -43,6 +54,7 @@ export const Terminal = ({
   onClose,
   className = "",
 }: SSHTerminalWrapperProps) => {
+  const { resolvedTheme } = useTheme();
   const terminalRef = useRef<HTMLDivElement>(null);
   const terminalInstanceRef = useRef<{
     terminal: TerminalWithCore;
@@ -50,6 +62,12 @@ export const Terminal = ({
   } | null>(null);
   const handlersSetRef = useRef(false);
 
+  const terminalTheme = useMemo(
+    () =>
+      resolvedTheme === "light" ? LIGHT_TERMINAL_THEME : DARK_TERMINAL_THEME,
+    [resolvedTheme],
+  );
+
   const fitTerminal = useCallback(() => {
     if (terminalInstanceRef.current?.fitAddon) {
       terminalInstanceRef.current.fitAddon.fit();
@@ -62,7 +80,10 @@ export const Terminal = ({
     const { Terminal: XTerminal } = await import("@xterm/xterm");
     const { FitAddon } = await import("@xterm/addon-fit");
 
-    const terminal = new XTerminal(TERMINAL_OPTIONS);
+    const terminal = new XTerminal({
+      ...TERMINAL_OPTIONS,
+      theme: terminalTheme,
+    });
 
     const fitAddon = new FitAddon();
     terminal.loadAddon(fitAddon);
@@ -90,7 +111,7 @@ export const Terminal = ({
     setTimeout(fitTerminal, 100);
 
     return terminal as TerminalWithCore;
-  }, [fitTerminal]);
+  }, [fitTerminal, terminalTheme]);
 
   const setupSSHHandlers = useCallback(async () => {
     if (!session || handlersSetRef.current) return;
@@ -149,6 +170,14 @@ export const Terminal = ({
     setupSSHHandlers().then();
   }, [setupSSHHandlers]);
 
+  // Apply theme changes to an already-running terminal
+  useEffect(() => {
+    const terminal = terminalInstanceRef.current?.terminal;
+    if (terminal && !terminal._core?._isDisposed) {
+      terminal.options.theme = terminalTheme;
+    }
+  }, [terminalTheme]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
diff --git a/src/modules/reverse-proxy/ReverseProxyCrowdSecIPReputation.tsx b/src/modules/reverse-proxy/ReverseProxyCrowdSecIPReputation.tsx
index a66eee3b1..b123a2da6 100644
--- a/src/modules/reverse-proxy/ReverseProxyCrowdSecIPReputation.tsx
+++ b/src/modules/reverse-proxy/ReverseProxyCrowdSecIPReputation.tsx
@@ -69,8 +69,8 @@ export const ReverseProxyCrowdSecIPReputation = ({
           <Label>CrowdSec IP Reputation</Label>
           <HelpText>
             Detect malicious IPs with CrowdSec.{" "}
-            <b className={"text-white"}>Enforce</b> to block them or{" "}
-            <b className={"text-white"}>Observe</b> to only log without
+            <b className={"text-nb-gray-100"}>Enforce</b> to block them or{" "}
+            <b className={"text-nb-gray-100"}>Observe</b> to only log without
             blocking.
           </HelpText>
         </div>
diff --git a/src/modules/reverse-proxy/clusters/ClusterTypeIndicator.tsx b/src/modules/reverse-proxy/clusters/ClusterTypeIndicator.tsx
index 10cd2cdfb..7c54e52b9 100644
--- a/src/modules/reverse-proxy/clusters/ClusterTypeIndicator.tsx
+++ b/src/modules/reverse-proxy/clusters/ClusterTypeIndicator.tsx
@@ -19,7 +19,7 @@ export const ClusterTypeIndicator = ({ cluster }: Props) => {
       <FullTooltip
         content={
           <div className={"text-xs max-w-xs"}>
-            <span className={"font-medium text-white"}>Account cluster.</span>{" "}
+            <span className={"font-medium text-nb-gray-100"}>Account cluster.</span>{" "}
             Self-hosted on your own infrastructure — you operate the proxy
             nodes and control where traffic terminates.
           </div>
@@ -33,7 +33,7 @@ export const ClusterTypeIndicator = ({ cluster }: Props) => {
     <FullTooltip
       content={
         <div className={"text-xs max-w-xs"}>
-          <span className={"font-medium text-white"}>Shared cluster.</span>{" "}
+          <span className={"font-medium text-nb-gray-100"}>Shared cluster.</span>{" "}
           Deployed at the server level and available to every account on this
           instance.
         </div>
diff --git a/src/modules/reverse-proxy/clusters/ClustersFeaturesCell.tsx b/src/modules/reverse-proxy/clusters/ClustersFeaturesCell.tsx
index 567127c17..791b4e68e 100644
--- a/src/modules/reverse-proxy/clusters/ClustersFeaturesCell.tsx
+++ b/src/modules/reverse-proxy/clusters/ClustersFeaturesCell.tsx
@@ -55,9 +55,9 @@ export default function ClustersFeaturesCell({ cluster }: Readonly<Props>) {
         <>
           Lets you publish services that are only reachable from peers in your
           NetBird network. Required for{" "}
-          <span className={"font-medium text-white"}>NetBird-Only Access</span>{" "}
+          <span className={"font-medium text-nb-gray-100"}>NetBird-Only Access</span>{" "}
           and{" "}
-          <span className={"font-medium text-white"}>Proxy Cluster</span>{" "}
+          <span className={"font-medium text-nb-gray-100"}>Proxy Cluster</span>{" "}
           target types.
         </>
       ),
@@ -76,7 +76,7 @@ export default function ClustersFeaturesCell({ cluster }: Readonly<Props>) {
           key={f.key}
           content={
             <div className={"text-xs max-w-xs"}>
-              <div className={"font-medium text-white"}>{f.label}</div>
+              <div className={"font-medium text-nb-gray-100"}>{f.label}</div>
               <div className={"text-nb-gray-300 mt-1"}>{f.description}</div>
             </div>
           }
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
index 43ebf4cca..a29d4cb18 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
@@ -19,7 +19,7 @@ export const ReverseProxyEventsTimeCell = ({ timestamp, className }: Props) => {
         <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",
+            "dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 py-2 px-3 rounded-md cursor-default",
           )}
         >
           <span className={"text-nb-gray-200 flex gap-2 items-center"}>
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
index cba9987d4..e448fe257 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetModal.tsx
@@ -355,22 +355,22 @@ export default function ReverseProxyTargetModal({
                             <div className="text-xs max-w-xs flex flex-col gap-2">
                               <div>
                                 When disabled, a request to e.g.,{" "}
-                                <span className="font-mono text-white">
+                                <span className="font-mono text-nb-gray-100">
                                   {targetPath}/users
                                 </span>{" "}
                                 is forwarded as{" "}
-                                <span className="font-mono text-white">
+                                <span className="font-mono text-nb-gray-100">
                                   /users
                                 </span>
                                 .
                               </div>
                               <div>
                                 When enabled, a request to e.g.,{" "}
-                                <span className="font-mono text-white">
+                                <span className="font-mono text-nb-gray-100">
                                   {targetPath}/users
                                 </span>{" "}
                                 is forwarded as{" "}
-                                <span className="font-mono text-white">
+                                <span className="font-mono text-nb-gray-100">
                                   {targetPath}/users
                                 </span>
                                 .
diff --git a/src/modules/reverse-proxy/targets/ReverseProxyTargetSelector.tsx b/src/modules/reverse-proxy/targets/ReverseProxyTargetSelector.tsx
index 240f5c8b3..1ff440a43 100644
--- a/src/modules/reverse-proxy/targets/ReverseProxyTargetSelector.tsx
+++ b/src/modules/reverse-proxy/targets/ReverseProxyTargetSelector.tsx
@@ -91,7 +91,7 @@ export default function ReverseProxyTargetSelector({
               className={"max-w-sm"}
               content={
                 <>
-                  A <span className={"text-white font-medium"}>peer</span> is a
+                  A <span className={"text-nb-gray-100 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"}>
@@ -112,7 +112,7 @@ export default function ReverseProxyTargetSelector({
               className={"max-w-sm"}
               content={
                 <>
-                  A <span className={"text-white font-medium"}>resource</span>{" "}
+                  A <span className={"text-nb-gray-100 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.
@@ -134,7 +134,7 @@ export default function ReverseProxyTargetSelector({
                   className={"max-w-sm"}
                   content={
                     <>
-                      A <span className={"text-white font-medium"}>
+                      A <span className={"text-nb-gray-100 font-medium"}>
                         proxy cluster
                       </span>{" "}
                       forwards inbound traffic to an upstream the proxy reaches
diff --git a/src/modules/settings/ClientSettingsTab.tsx b/src/modules/settings/ClientSettingsTab.tsx
index 556060e7c..f32f3ec9c 100644
--- a/src/modules/settings/ClientSettingsTab.tsx
+++ b/src/modules/settings/ClientSettingsTab.tsx
@@ -247,7 +247,7 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
               Configure how NetBird clients receive update notifications. When
               enabled, users will be prompted to install the selected version.
               This requires at least NetBird{" "}
-              <span className={"text-white font-medium"}>v0.61.0</span>.{" "}
+              <span className={"text-nb-gray-100 font-medium"}>v0.61.0</span>.{" "}
               <InlineLink
                 href={"https://docs.netbird.io/manage/peers/auto-update"}
                 target={"_blank"}
@@ -321,7 +321,7 @@ function ClientSettingsTabContent({ account }: Readonly<Props>) {
               <HelpText>
                 Allow peers to expose local services through the NetBird reverse
                 proxy using the CLI. <br /> This requires at least NetBird{" "}
-                <span className={"text-white font-medium"}>v0.66.0</span>.{" "}
+                <span className={"text-nb-gray-100 font-medium"}>v0.66.0</span>.{" "}
                 <InlineLink
                   href={
                     "https://docs.netbird.io/manage/reverse-proxy/expose-from-cli"
diff --git a/src/modules/users/table-cells/ServiceUserNameCell.tsx b/src/modules/users/table-cells/ServiceUserNameCell.tsx
index 1a3ffe215..0f2af0ced 100644
--- a/src/modules/users/table-cells/ServiceUserNameCell.tsx
+++ b/src/modules/users/table-cells/ServiceUserNameCell.tsx
@@ -12,7 +12,7 @@ export default function ServiceUserNameCell({ user }: Readonly<Props>) {
     <div className={cn("flex gap-4 px-2 py-1 items-center")}>
       <div
         className={
-          "w-8 h-8 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+          "w-8 h-8 rounded-full relative flex items-center justify-center text-nb-gray-100 uppercase text-md font-medium bg-nb-gray-900"
         }
       >
         <IconSettings2 size={14} />
diff --git a/src/modules/users/table-cells/UserStatusCell.tsx b/src/modules/users/table-cells/UserStatusCell.tsx
index 85271b62a..7528a29c9 100644
--- a/src/modules/users/table-cells/UserStatusCell.tsx
+++ b/src/modules/users/table-cells/UserStatusCell.tsx
@@ -68,7 +68,7 @@ export default function UserStatusCell({ user }: Readonly<Props>) {
       <div>
         This user needs admin approval before joining your organization. To
         disable approvals, turn off{" "}
-        <span className={"font-medium text-white"}>
+        <span className={"font-medium text-nb-gray-100"}>
           {"'User Approval Required'"}
         </span>{" "}
         in{" "}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a5caceeb3..3b557c751 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -102,29 +102,33 @@ const config: Config = {
           800: "#99154B",
           900: "#751A3D",
         },
+        // nb-gray is theme-aware: channels are defined as CSS variables in
+        // globals.css (:root = inverted light ramp, .dark = original dark ramp).
+        // The `rgb(var(...) / <alpha-value>)` form keeps opacity modifiers
+        // (e.g. `bg-nb-gray-900/80`) working.
         "nb-gray": {
-          DEFAULT: "#181A1D",
-          "50": "#f4f6f7",
-          "100": "#e4e7e9",
-          "200": "#cbd2d6",
-          "250": "#b7c0c6",
-          "300": "#a3adb5",
-          "350": "#8f9ca8",
-          "400": "#7c8994",
-          "500": "#616e79",
-          "600": "#535d67",
-          "700": "#474e57",
-          "800": "#3f444b",
-          "850": "#363b40",
-          "900": "#2e3238",
-          "910": "#2b2f33",
-          "920": "#25282d",
-          "925": "#1e2123",
-          "930": "#25282c",
-          "935": "#1f2124",
-          "940": "#1c1e21",
-          "950": "#181a1d",
-          "960": "#16181b",
+          DEFAULT: "rgb(var(--nb-gray-DEFAULT) / <alpha-value>)",
+          "50": "rgb(var(--nb-gray-50) / <alpha-value>)",
+          "100": "rgb(var(--nb-gray-100) / <alpha-value>)",
+          "200": "rgb(var(--nb-gray-200) / <alpha-value>)",
+          "250": "rgb(var(--nb-gray-250) / <alpha-value>)",
+          "300": "rgb(var(--nb-gray-300) / <alpha-value>)",
+          "350": "rgb(var(--nb-gray-350) / <alpha-value>)",
+          "400": "rgb(var(--nb-gray-400) / <alpha-value>)",
+          "500": "rgb(var(--nb-gray-500) / <alpha-value>)",
+          "600": "rgb(var(--nb-gray-600) / <alpha-value>)",
+          "700": "rgb(var(--nb-gray-700) / <alpha-value>)",
+          "800": "rgb(var(--nb-gray-800) / <alpha-value>)",
+          "850": "rgb(var(--nb-gray-850) / <alpha-value>)",
+          "900": "rgb(var(--nb-gray-900) / <alpha-value>)",
+          "910": "rgb(var(--nb-gray-910) / <alpha-value>)",
+          "920": "rgb(var(--nb-gray-920) / <alpha-value>)",
+          "925": "rgb(var(--nb-gray-925) / <alpha-value>)",
+          "930": "rgb(var(--nb-gray-930) / <alpha-value>)",
+          "935": "rgb(var(--nb-gray-935) / <alpha-value>)",
+          "940": "rgb(var(--nb-gray-940) / <alpha-value>)",
+          "950": "rgb(var(--nb-gray-950) / <alpha-value>)",
+          "960": "rgb(var(--nb-gray-960) / <alpha-value>)",
         },
 
         netbird: {

From d58d50c4eccb33c39b155110d784012e606004dd Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 19:54:29 -0700
Subject: [PATCH 02/18] fix light sub-text and directional arrows

---
 .gitignore                                           |  7 ++++++-
 src/components/Badge.tsx                             | 12 +++++++++---
 src/components/FullTooltip.tsx                       |  2 +-
 src/components/table/DataTableHeader.tsx             |  4 ++--
 src/components/table/DataTableRefreshButton.tsx      |  2 +-
 src/components/table/DataTableResetFilterButton.tsx  |  2 +-
 src/components/ui/LoginExpiredBadge.tsx              |  2 +-
 src/components/ui/TruncatedText.tsx                  |  2 +-
 .../table/AccessControlDirectionCell.tsx             |  4 ++--
 src/modules/common-table-rows/LastTimeRow.tsx        |  2 +-
 src/modules/groups/table/GroupsNameCell.tsx          |  2 +-
 src/modules/networks/resources/ResourceNameCell.tsx  |  2 +-
 src/modules/peers/PeerVersionCell.tsx                |  4 ++--
 .../checks/tooltips/GeoLocationTooltip.tsx           |  2 +-
 .../checks/tooltips/NetBirdVersionTooltip.tsx        |  2 +-
 .../checks/tooltips/PeerNetworkRangeTooltip.tsx      |  2 +-
 .../checks/tooltips/ProcessTooltip.tsx               |  2 +-
 .../events/ReverseProxyEventsRequestCell.tsx         |  2 +-
 .../table/ReverseProxyDestinationCell.tsx            |  2 +-
 19 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/.gitignore b/.gitignore
index 57bccfee8..a706767e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,6 +35,9 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# local UI sandbox (throwaway preview harness — never commit)
+/src/app/sandbox/
+
 # config
 .local*config*.json
 .test-config.json
@@ -52,4 +55,6 @@ e2e/playwright-report/
 /public/ironrdp-pkg/
 /public/netbird.wasm
 .idea
-src/.local-config*
\ No newline at end of file
+src/.local-config*
+# local mock data (throwaway preview — never commit)
+/src/utils/mockData.ts
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index bd4951673..6b86767ee 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -17,8 +17,12 @@ const variants = cva("", {
       blue: [
         "bg-sky-100 border-sky-500 text-sky-800 border border-transparent",
       ],
-      blueDark: ["bg-sky-900 border-sky-500 text-white border"],
-      "blue-darker": ["bg-sky-900 border-sky-500 text-white border"],
+      blueDark: [
+        "bg-sky-100 border-sky-500 text-sky-800 border dark:bg-sky-900 dark:text-white",
+      ],
+      "blue-darker": [
+        "bg-sky-100 border-sky-500 text-sky-800 border dark:bg-sky-900 dark:text-white",
+      ],
       red: ["bg-red-950/40 border-red-500 border text-red-500"],
       purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
       yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
@@ -30,7 +34,9 @@ const variants = cva("", {
       "gray-ghost": [
         "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
       ],
-      green: ["bg-green-950 border-green-500 border text-green-400"],
+      green: [
+        "bg-green-100 border-green-500 border text-green-700 dark:bg-green-950 dark:text-green-400",
+      ],
       netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
     },
     size: {
diff --git a/src/components/FullTooltip.tsx b/src/components/FullTooltip.tsx
index 5397e54b1..c8cf399fe 100644
--- a/src/components/FullTooltip.tsx
+++ b/src/components/FullTooltip.tsx
@@ -95,7 +95,7 @@ export default function FullTooltip({
             align={align}
             side={side}
           >
-            <div className={"text-neutral-300 flex flex-col gap-1"}>
+            <div className={"dark:text-neutral-300 text-neutral-500 flex flex-col gap-1"}>
               {content}
             </div>
           </TooltipContent>
diff --git a/src/components/table/DataTableHeader.tsx b/src/components/table/DataTableHeader.tsx
index aea54ee56..cc7bc7d06 100644
--- a/src/components/table/DataTableHeader.tsx
+++ b/src/components/table/DataTableHeader.tsx
@@ -47,9 +47,9 @@ export default function DataTableHeader({
       <div
         onClick={sorting ? handleSort : undefined}
         className={cn(
-          "flex items-center whitespace-nowrap gap-2 dark:text-gray-400 transition-all select-none text-xs tracking-wide",
+          "flex items-center whitespace-nowrap gap-2 dark:text-gray-400 text-gray-500 transition-all select-none text-xs tracking-wide",
           sorting &&
-            "cursor-pointer dark:hover:text-gray-300 hover:text-nb-gray",
+            "cursor-pointer dark:hover:text-gray-300 hover:text-nb-gray-100",
           center && "justify-center w-full",
           className,
         )}
diff --git a/src/components/table/DataTableRefreshButton.tsx b/src/components/table/DataTableRefreshButton.tsx
index 18d5256ab..4590da317 100644
--- a/src/components/table/DataTableRefreshButton.tsx
+++ b/src/components/table/DataTableRefreshButton.tsx
@@ -56,7 +56,7 @@ export default function DataTableRefreshButton({ onClick, isDisabled }: Props) {
           if (hovered) event.preventDefault();
         }}
       >
-        <span className={"text-xs text-neutral-300"}>
+        <span className={"text-xs dark:text-neutral-300 text-neutral-500"}>
           {disabled ? "You can refresh it again in 5 seconds" : "Refresh"}
         </span>
       </TooltipContent>
diff --git a/src/components/table/DataTableResetFilterButton.tsx b/src/components/table/DataTableResetFilterButton.tsx
index 339beec07..e7c8b1f0b 100644
--- a/src/components/table/DataTableResetFilterButton.tsx
+++ b/src/components/table/DataTableResetFilterButton.tsx
@@ -52,7 +52,7 @@ export default function DataTableResetFilterButton<TData>({
             if (hovered) event.preventDefault();
           }}
         >
-          <span className={"text-xs text-neutral-300"}>
+          <span className={"text-xs dark:text-neutral-300 text-neutral-500"}>
             Reset Filters & Search
           </span>
         </TooltipContent>
diff --git a/src/components/ui/LoginExpiredBadge.tsx b/src/components/ui/LoginExpiredBadge.tsx
index 874438018..d50613b8b 100644
--- a/src/components/ui/LoginExpiredBadge.tsx
+++ b/src/components/ui/LoginExpiredBadge.tsx
@@ -15,7 +15,7 @@ export default function LoginExpiredBadge({ loginExpired }: Props) {
         </Badge>
       </TooltipTrigger>
       <TooltipContent>
-        <div className={"text-neutral-300 text-xs leading-1.5"}>
+        <div className={"dark:text-neutral-300 text-neutral-500 text-xs leading-1.5"}>
           This peer is offline and needs to be <br />
           re-authenticated because its login has expired.
         </div>
diff --git a/src/components/ui/TruncatedText.tsx b/src/components/ui/TruncatedText.tsx
index 7a61d4153..0c73a4e27 100644
--- a/src/components/ui/TruncatedText.tsx
+++ b/src/components/ui/TruncatedText.tsx
@@ -119,7 +119,7 @@ export default function TruncatedText({
         className={cn(className, "px-3 py-1.5")}
       >
         {tooltipContent ?? (
-          <div className="text-neutral-300 flex flex-col gap-1">
+          <div className="dark:text-neutral-300 text-neutral-500 flex flex-col gap-1">
             <div className="max-w-xs break-all whitespace-normal text-xs">
               {text}
             </div>
diff --git a/src/modules/access-control/table/AccessControlDirectionCell.tsx b/src/modules/access-control/table/AccessControlDirectionCell.tsx
index 42ce9faf7..073d178a5 100644
--- a/src/modules/access-control/table/AccessControlDirectionCell.tsx
+++ b/src/modules/access-control/table/AccessControlDirectionCell.tsx
@@ -27,7 +27,7 @@ export default function AccessControlDirectionCell({
           <LongArrowBidirectionalIcon
             size={60}
             autoHeight={true}
-            className={"fill-green-500"}
+            className={"fill-green-600 dark:fill-green-500"}
           />
         </Badge>
       ) : (
@@ -35,7 +35,7 @@ export default function AccessControlDirectionCell({
           <LongArrowLeftIcon
             size={60}
             autoHeight={true}
-            className={"fill-sky-400 rotate-180"}
+            className={"fill-sky-600 dark:fill-sky-400 rotate-180"}
           />
         </Badge>
       )}
diff --git a/src/modules/common-table-rows/LastTimeRow.tsx b/src/modules/common-table-rows/LastTimeRow.tsx
index 155f2a029..5d89ac804 100644
--- a/src/modules/common-table-rows/LastTimeRow.tsx
+++ b/src/modules/common-table-rows/LastTimeRow.tsx
@@ -37,7 +37,7 @@ export default function LastTimeRow({
           </div>
         </TooltipTrigger>
         <TooltipContent>
-          <div className={"text-neutral-300 flex flex-col gap-1"}>
+          <div className={"dark:text-neutral-300 text-neutral-500 flex flex-col gap-1"}>
             <span className={"text-xs"}>{text}</span>
             <span className={"text-neutral-200"}>
               {dayjs(date).format("D MMMM, YYYY [at] h:mm A")}
diff --git a/src/modules/groups/table/GroupsNameCell.tsx b/src/modules/groups/table/GroupsNameCell.tsx
index dd212d8ce..e566fb779 100644
--- a/src/modules/groups/table/GroupsNameCell.tsx
+++ b/src/modules/groups/table/GroupsNameCell.tsx
@@ -15,7 +15,7 @@ export default function GroupsNameCell({ active, group }: Readonly<Props>) {
     <div className={""}>
       <div
         className={
-          "inline-flex items-center justify-start text-neutral-300 gap-2.5 py-2 px-3 pr-4 hover:bg-nb-gray-800/60 cursor-pointer rounded-md"
+          "inline-flex items-center justify-start dark:text-neutral-300 text-neutral-500 gap-2.5 py-2 px-3 pr-4 hover:bg-nb-gray-800/60 cursor-pointer rounded-md"
         }
         onClick={() => router.push("/group?id=" + group.id)}
       >
diff --git a/src/modules/networks/resources/ResourceNameCell.tsx b/src/modules/networks/resources/ResourceNameCell.tsx
index 1fbf2e134..cfed672cb 100644
--- a/src/modules/networks/resources/ResourceNameCell.tsx
+++ b/src/modules/networks/resources/ResourceNameCell.tsx
@@ -35,7 +35,7 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
       </div>
       <div
         className={cn(
-          "flex flex-col gap-0 text-neutral-300  font-light truncate",
+          "flex flex-col gap-0 dark:text-neutral-300 text-neutral-500  font-light truncate",
           "group-hover:text-nb-gray-100 text-left",
         )}
       >
diff --git a/src/modules/peers/PeerVersionCell.tsx b/src/modules/peers/PeerVersionCell.tsx
index 67da923d5..2c6aac6a2 100644
--- a/src/modules/peers/PeerVersionCell.tsx
+++ b/src/modules/peers/PeerVersionCell.tsx
@@ -77,7 +77,7 @@ export default function PeerVersionCell({
 
               <div
                 className={
-                  "text-neutral-300 flex flex-col gap-1 max-w-[300px] text-xs mt-1"
+                  "dark:text-neutral-300 text-neutral-500 flex flex-col gap-1 max-w-[300px] text-xs mt-1"
                 }
               >
                 A new version of Netbird is available. Please update your client
@@ -114,7 +114,7 @@ export default function PeerVersionCell({
         >
           <div
             className={
-              "flex items-center gap-2 text-neutral-300 whitespace-nowrap"
+              "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 whitespace-nowrap"
             }
           >
             <PeerOperatingSystemIcon os={os} />
diff --git a/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx b/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
index 08e79194c..c65961832 100644
--- a/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
@@ -21,7 +21,7 @@ export const GeoLocationTooltip = ({ children, check }: Props) => {
       content={
         <div
           className={
-            "text-neutral-300 flex flex-col items-start text-sm gap-1 justify-start min-w-[200px]"
+            "dark:text-neutral-300 text-neutral-500 flex flex-col items-start text-sm gap-1 justify-start min-w-[200px]"
           }
         >
           <div className={"px-4 pt-3"}>
diff --git a/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx b/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
index 6589f5758..62fe7d2e9 100644
--- a/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
@@ -12,7 +12,7 @@ export const NetBirdVersionTooltip = ({ version, children }: Props) => {
       className={"w-full"}
       interactive={false}
       content={
-        <div className={"text-neutral-300 flex items-center text-sm gap-1"}>
+        <div className={"dark:text-neutral-300 text-neutral-500 flex items-center text-sm gap-1"}>
           <span className={""}>Min. Client Version</span>
 
           <span
diff --git a/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx b/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
index 0cc7937e8..32d8bf3c1 100644
--- a/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
@@ -17,7 +17,7 @@ export const PeerNetworkRangeTooltip = ({ check, children }: Props) => {
       contentClassName={"p-0"}
       content={
         <div
-          className={"text-neutral-300 text-sm max-w-xs flex flex-col gap-1"}
+          className={"dark:text-neutral-300 text-neutral-500 text-sm max-w-xs flex flex-col gap-1"}
         >
           <div className={"px-4 pt-3"}>
             {check.action == "allow" ? (
diff --git a/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx b/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
index dc46bc52e..549a50c16 100644
--- a/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
@@ -21,7 +21,7 @@ export const ProcessTooltip = ({ check, children }: Props) => {
       content={
         <div
           className={
-            "text-neutral-300 text-sm max-w-xs flex flex-col gap-1 min-w-0"
+            "dark:text-neutral-300 text-neutral-500 text-sm max-w-xs flex flex-col gap-1 min-w-0"
           }
         >
           <div className={"px-4 pt-3"}>
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
index 3d32c1ba2..10e890a18 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
@@ -45,7 +45,7 @@ export const ReverseProxyEventsUrlCell = ({ event, service }: Props) => {
       side={"top"}
       sideOffset={10}
       tooltipContent={
-        <div className="max-w-sm break-all whitespace-normal text-xs text-neutral-300">
+        <div className="max-w-sm break-all whitespace-normal text-xs dark:text-neutral-300 text-neutral-500">
           {fullUrl}
         </div>
       }
diff --git a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
index b4992853f..e43f06f85 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
@@ -17,7 +17,7 @@ export default function ReverseProxyDestinationCell({
   return (
     <div
       className={cn(
-        "flex items-center gap-2 text-neutral-300 font-light truncate",
+        "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 font-light truncate",
         !target.enabled && "opacity-30",
       )}
     >

From 06daecf89a80a6cbcb14a369ac66dbd9f6dd486c Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 19:59:47 -0700
Subject: [PATCH 03/18] fix callout colors

---
 src/components/Callout.tsx             | 10 ++++++----
 src/modules/settings/DangerZoneTab.tsx |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
index 01832c904..9af8daf94 100644
--- a/src/components/Callout.tsx
+++ b/src/components/Callout.tsx
@@ -17,10 +17,12 @@ export const calloutVariants = cva(
     variants: {
       variant: {
         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",
+        warning:
+          "bg-netbird-500/10 border-netbird-400/20 text-netbird-700 dark:text-netbird-150",
+        info: "bg-sky-400/10 border-sky-400/20 text-sky-700 dark:text-sky-100",
+        success:
+          "bg-green-400/15 border-green-400/20 text-green-700 dark:text-green-100",
+        error: "bg-red-500/10 border-red-400/20 text-red-700 dark:text-red-100",
       },
     },
   },
diff --git a/src/modules/settings/DangerZoneTab.tsx b/src/modules/settings/DangerZoneTab.tsx
index 1db8e7dd9..e41827730 100644
--- a/src/modules/settings/DangerZoneTab.tsx
+++ b/src/modules/settings/DangerZoneTab.tsx
@@ -85,14 +85,14 @@ export default function DangerZoneTab({ account }: Props) {
         <div className={"gap-6 mt-6 max-w-lg"}>
           <Card
             className={
-              "w-full flex flex-col gap-2 border-red-600 bg-red-950/50"
+              "w-full flex flex-col gap-2 border-red-300 bg-red-50 dark:border-red-600 dark:bg-red-950/50"
             }
           >
             <div className={"px-8 py-6"}>
-              <p className={"text-xl font-medium mb-2 !text-red-50"}>
+              <p className={"text-xl font-medium mb-2 !text-red-900 dark:!text-red-50"}>
                 Delete NetBird account
               </p>
-              <p className={"!text-red-50/80"}>
+              <p className={"!text-red-900/80 dark:!text-red-50/80"}>
                 Before proceeding to delete your Netbird account, please be
                 aware that this action is irreversible. Once your account is
                 deleted, you will permanently lose access to all associated

From 9249464d5c07e436530b8aa902d015ff8f5d1d42 Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 20:09:30 -0700
Subject: [PATCH 04/18] light mode for control center

---
 src/app/(dashboard)/control-center/page.tsx           | 11 +++++++++--
 src/modules/control-center/edges/DirectionIn.tsx      |  8 +++++++-
 src/modules/control-center/edges/SimpleConnection.tsx |  4 +++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/(dashboard)/control-center/page.tsx b/src/app/(dashboard)/control-center/page.tsx
index e69da4424..50bace2f5 100644
--- a/src/app/(dashboard)/control-center/page.tsx
+++ b/src/app/(dashboard)/control-center/page.tsx
@@ -33,6 +33,7 @@ import {
   MessageSquareShareIcon,
   NetworkIcon,
 } from "lucide-react";
+import { useTheme } from "next-themes";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -87,6 +88,8 @@ function ControlCenterView() {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const reactFlow = useReactFlow();
+  const { resolvedTheme } = useTheme();
+  const isLight = resolvedTheme === "light";
   const [layoutInitialized, setLayoutInitialized] = useState(false);
   const [forceLayoutChange, setForceLayoutChange] = useState(false);
   const { loggedInUser } = useLoggedInUser();
@@ -2055,9 +2058,13 @@ function ControlCenterView() {
             fitView={false}
             maxZoom={DEFAULT_MAX_ZOOM}
             minZoom={DEFAULT_MIN_ZOOM}
-            colorMode={"dark"}
+            colorMode={isLight ? "light" : "dark"}
           >
-            <Background bgColor={"#181a1d"} gap={20} color={"#717171"} />
+            <Background
+              bgColor={isLight ? "#f8fafb" : "#181a1d"}
+              gap={20}
+              color={isLight ? "#9aa5ad" : "#717171"}
+            />
           </ReactFlow>
         </PeersProvider>
       </div>
diff --git a/src/modules/control-center/edges/DirectionIn.tsx b/src/modules/control-center/edges/DirectionIn.tsx
index 2f3d8b8eb..352805374 100644
--- a/src/modules/control-center/edges/DirectionIn.tsx
+++ b/src/modules/control-center/edges/DirectionIn.tsx
@@ -5,6 +5,7 @@ import {
   getSmoothStepPath,
   getStraightPath,
 } from "@xyflow/react";
+import { useTheme } from "next-themes";
 import React from "react";
 
 type Props = {
@@ -25,6 +26,7 @@ export function DirectionIn({
   data,
 }: Props) {
   const { enabled, type = "straight" } = data;
+  const { resolvedTheme } = useTheme();
 
   const getPath = () => {
     switch (type) {
@@ -74,7 +76,11 @@ export function DirectionIn({
       style={{
         opacity: enabled ? 1 : 0.6,
         strokeWidth: 2,
-        stroke: enabled ? "#0e9f6e" : "#787878",
+        stroke: enabled
+          ? "#0e9f6e"
+          : resolvedTheme === "light"
+            ? "#b7c0c6"
+            : "#787878",
         strokeDasharray: "5, 5",
       }}
     >
diff --git a/src/modules/control-center/edges/SimpleConnection.tsx b/src/modules/control-center/edges/SimpleConnection.tsx
index b924cfebd..11a5f6f73 100644
--- a/src/modules/control-center/edges/SimpleConnection.tsx
+++ b/src/modules/control-center/edges/SimpleConnection.tsx
@@ -1,4 +1,5 @@
 import { BaseEdge, type EdgeProps, getSimpleBezierPath } from "@xyflow/react";
+import { useTheme } from "next-themes";
 import React from "react";
 import { useSourceGroupEnabled } from "@/modules/control-center/utils/helpers";
 
@@ -29,6 +30,7 @@ export function SimpleConnection({
   });
 
   const enabled = useSourceGroupEnabled(source);
+  const { resolvedTheme } = useTheme();
 
   return (
     <BaseEdge
@@ -36,7 +38,7 @@ export function SimpleConnection({
       path={edgePath}
       style={{
         strokeWidth: 1.5,
-        stroke: "#595959",
+        stroke: resolvedTheme === "light" ? "#b7c0c6" : "#595959",
         strokeDasharray: "0, 0",
         opacity: enabled ? 1 : 0.6,
       }}

From 9849e0a70c60a9e549437892568dad8ddf73a510 Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 20:43:29 -0700
Subject: [PATCH 05/18] fixing color for shared UI components

---
 src/components/Badge.tsx                      | 16 ++++++++++----
 src/components/Notification.tsx               | 10 +++++----
 src/components/Paragraph.tsx                  |  2 +-
 src/components/SquareIcon.tsx                 | 22 ++++++++++++-------
 src/components/Steps.tsx                      |  4 ++--
 src/components/Tabs.tsx                       |  4 ++--
 src/components/ToggleSwitch.tsx               |  2 +-
 src/components/modal/Modal.tsx                |  2 +-
 src/components/ui/GetStartedTest.tsx          |  2 +-
 src/components/ui/GroupBadgeWithEditPeers.tsx |  2 +-
 src/contexts/GlobalThemeProvider.tsx          |  4 ++--
 src/modules/activity/ActivityEntryRow.tsx     | 14 +++++++-----
 .../activity/UsersDropdownSelector.tsx        |  2 +-
 src/modules/common-table-rows/LastTimeRow.tsx |  2 +-
 .../control-center/nodes/SelectUserNode.tsx   |  2 +-
 .../user/ControlCenterCurrentUserBadge.tsx    |  2 +-
 .../resources/NetworkResourceModal.tsx        |  2 +-
 .../posture-checks/ui/PostureCheckCard.tsx    |  2 +-
 .../events/ReverseProxyEventsUserCell.tsx     |  2 +-
 src/modules/settings/GroupsSettings.tsx       |  4 ++--
 src/modules/users/UserInvitesTable.tsx        |  2 +-
 .../users/table-cells/UserNameCell.tsx        |  4 ++--
 22 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 6b86767ee..8ad461aff 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -23,9 +23,15 @@ const variants = cva("", {
       "blue-darker": [
         "bg-sky-100 border-sky-500 text-sky-800 border dark:bg-sky-900 dark:text-white",
       ],
-      red: ["bg-red-950/40 border-red-500 border text-red-500"],
-      purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
-      yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
+      red: [
+        "bg-red-100 border-red-500 border text-red-700 dark:bg-red-950/40 dark:text-red-500",
+      ],
+      purple: [
+        "bg-purple-100 border-purple-500 border text-purple-700 dark:bg-purple-950/50 dark:text-purple-500",
+      ],
+      yellow: [
+        "bg-yellow-100 border-yellow-500 border text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400",
+      ],
       gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
       lightGray: ["bg-nb-gray-910  text-nb-gray-200 border border-nb-gray-900"],
       grayer: [
@@ -37,7 +43,9 @@ const variants = cva("", {
       green: [
         "bg-green-100 border-green-500 border text-green-700 dark:bg-green-950 dark:text-green-400",
       ],
-      netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
+      netbird: [
+        "bg-netbird-100 border-netbird-500 border text-netbird-700 dark:bg-netbird-950 dark:text-netbird-500",
+      ],
     },
     size: {
       default: "text-[0.75rem] py-1.5 px-3",
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index fce6cb549..b786aab81 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -164,12 +164,14 @@ export default function Notification<T>({
         <div className={"flex items-center gap-4"}>
           <div
             className={classNames(
-              "h-8 w-8  shadow-sm text-nb-gray-100 flex items-center justify-center rounded-md shrink-0",
+              "h-8 w-8  shadow-sm flex items-center justify-center rounded-md shrink-0",
               loading
-                ? "bg-nb-gray-900"
+                ? "bg-nb-gray-900 text-nb-gray-100"
                 : error
-                ? "bg-red-500"
-                : backgroundColor || "bg-green-500",
+                ? "bg-red-500 text-white"
+                : backgroundColor
+                ? `${backgroundColor} text-white`
+                : "bg-green-500 text-white",
             )}
           >
             {loading ? (
diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
index aefcdfb7c..e2b699d23 100644
--- a/src/components/Paragraph.tsx
+++ b/src/components/Paragraph.tsx
@@ -9,7 +9,7 @@ export default function Paragraph({ children, className }: Props) {
   return (
     <p
       className={cn(
-        "dark:text-gray-400 text-nb-gray-500 text-base flex flex-wrap gap-x-1.5",
+        "dark:text-gray-400 text-nb-gray-400 text-base flex flex-wrap gap-x-1.5",
         className,
       )}
     >
diff --git a/src/components/SquareIcon.tsx b/src/components/SquareIcon.tsx
index dd3a125ee..4e7fcd725 100644
--- a/src/components/SquareIcon.tsx
+++ b/src/components/SquareIcon.tsx
@@ -7,15 +7,21 @@ const iconVariant = cva(
   {
     variants: {
       color: {
-        netbird: "bg-netbird-950 border-netbird text-netbird",
-        blue: "bg-sky-950 border-sky-500 text-sky-100",
-        "blue-darker": "bg-sky-950 border-sky-500 text-sky-500",
-        red: "bg-red-950 border-red-500 text-red-500",
+        netbird:
+          "bg-netbird-100 border-netbird text-netbird-700 dark:bg-netbird-950 dark:text-netbird",
+        blue: "bg-sky-100 border-sky-500 text-sky-700 dark:bg-sky-950 dark:text-sky-100",
+        "blue-darker":
+          "bg-sky-100 border-sky-500 text-sky-700 dark:bg-sky-950 dark:text-sky-500",
+        red: "bg-red-100 border-red-500 text-red-700 dark:bg-red-950 dark:text-red-500",
         gray: "bg-nb-gray-930 border-nb-gray-800 text-gray-500",
-        green: "bg-green-950 border-green-500 text-green-500",
-        purple: "bg-purple-950 border-purple-500 text-purple-500",
-        indigo: "bg-indigo-950 border-indigo-500 text-indigo-500",
-        yellow: "bg-yellow-950 border-yellow-400 text-yellow-400",
+        green:
+          "bg-green-100 border-green-500 text-green-700 dark:bg-green-950 dark:text-green-500",
+        purple:
+          "bg-purple-100 border-purple-500 text-purple-700 dark:bg-purple-950 dark:text-purple-500",
+        indigo:
+          "bg-indigo-100 border-indigo-500 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-500",
+        yellow:
+          "bg-yellow-100 border-yellow-400 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400",
       },
       size: {
         small: "w-8 h-8",
diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
index 5d18afef1..905853bb3 100644
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -50,7 +50,7 @@ const Step = ({
       {line && (
         <span
           className={cn(
-            "bg-nb-gray-100 dark:bg-nb-gray-800  z-0 transition-all",
+            "bg-neutral-200 dark:bg-nb-gray-800  z-0 transition-all",
             horizontal
               ? "w-full h-[2px] absolute mt-[16px] transform translate-x-1/2"
               : "h-full w-[2px] absolute left-0 ml-[18px]",
@@ -62,7 +62,7 @@ const Step = ({
         className={cn(
           "h-[34px] w-[34px] shrink-0 rounded-full  flex items-center justify-center font-medium text-xs relative z-0 border-4  transition-all",
           "dark:bg-nb-gray-900 dark:text-nb-gray-400 dark:border-nb-gray dark:group-hover:bg-nb-gray-800",
-          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200 step-circle",
+          "bg-neutral-200 text-nb-gray-400 border-white group-hover:bg-neutral-300 step-circle",
           "[.stepper-bg-variant]:border-nb-gray-940",
         )}
       >
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 8a2aefd3e..56f13c1bc 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -63,7 +63,7 @@ const TabsList = React.forwardRef<
       >
         <span
           className={
-            "absolute left-0 dark:bg-nb-gray-900 bg-nb-gray-100 w-full h-[1px] bottom-0 z-0"
+            "absolute left-0 dark:bg-nb-gray-900 bg-neutral-200 w-full h-[1px] bottom-0 z-0"
           }
         />
         <ScrollArea>
@@ -103,7 +103,7 @@ const TabsTrigger = React.forwardRef<
             "absolute w-full h-[1px] left-0 right-0 bottom-[0px] transition-all",
             currentValue === props.value
               ? "bg-netbird text-netbird"
-              : "dark:bg-nb-gray-900 bg-nb-gray-100 group-hover/trigger:dark:bg-nb-gray-700 group-hover/trigger:bg-nb-gray-200",
+              : "dark:bg-nb-gray-900 bg-neutral-200 group-hover/trigger:dark:bg-nb-gray-700 group-hover/trigger:bg-neutral-300",
           )}
         ></motion.div>
 
diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index 526b802b5..b111b7ff1 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -16,7 +16,7 @@ const switchVariants = cva("", {
     variant: {
       default: [
         "dark:data-[state=checked]:bg-netbird dark:data-[state=unchecked]:bg-nb-gray-700",
-        "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200",
+        "data-[state=checked]:bg-netbird data-[state=unchecked]:bg-neutral-200",
       ],
       "red-green": [
         "dark:data-[state=checked]:bg-red-600 dark:data-[state=unchecked]:bg-nb-gray-700",
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 3bf144fc9..81b788fe1 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -179,7 +179,7 @@ const ModalFooter = ({
 }: React.HTMLAttributes<HTMLDivElement> & ModalFooterProps) => (
   <div
     className={cn(
-      "dark:border-nb-gray-800/70 border-nb-gray-100",
+      "dark:border-nb-gray-800/70 border-neutral-200",
       separator && "border-t",
     )}
   >
diff --git a/src/components/ui/GetStartedTest.tsx b/src/components/ui/GetStartedTest.tsx
index 23e11789a..a2febf6d9 100644
--- a/src/components/ui/GetStartedTest.tsx
+++ b/src/components/ui/GetStartedTest.tsx
@@ -28,7 +28,7 @@ export default function GetStartedTest({
           <>
             <div
               className={
-                "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+                "absolute z-20 bg-gradient-to-b to-nb-gray-940 from-nb-gray-940/40 dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
               }
             ></div>
             <div
diff --git a/src/components/ui/GroupBadgeWithEditPeers.tsx b/src/components/ui/GroupBadgeWithEditPeers.tsx
index 0c050f499..d9f57916c 100644
--- a/src/components/ui/GroupBadgeWithEditPeers.tsx
+++ b/src/components/ui/GroupBadgeWithEditPeers.tsx
@@ -84,7 +84,7 @@ export default function GroupBadgeWithEditPeers({
             {isNew && showNewBadge && (
               <span
                 className={
-                  "text-[7px] relative -top-[0px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
+                  "text-[7px] relative -top-[0px] leading-[0] bg-green-100 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-700 dark:bg-green-900 dark:text-green-400"
                 }
               >
                 NEW
diff --git a/src/contexts/GlobalThemeProvider.tsx b/src/contexts/GlobalThemeProvider.tsx
index 0187adf92..892ca1add 100644
--- a/src/contexts/GlobalThemeProvider.tsx
+++ b/src/contexts/GlobalThemeProvider.tsx
@@ -23,8 +23,8 @@ function ThemedSkeleton({ children }: { children: React.ReactNode }) {
 
   return (
     <SkeletonTheme
-      baseColor={isLight ? "#e4e7e9" : "#25282d"}
-      highlightColor={isLight ? "#f4f6f7" : "#33373e"}
+      baseColor={isLight ? "#edeff1" : "#25282d"}
+      highlightColor={isLight ? "#f8fafb" : "#33373e"}
     >
       {children}
     </SkeletonTheme>
diff --git a/src/modules/activity/ActivityEntryRow.tsx b/src/modules/activity/ActivityEntryRow.tsx
index 5a10a045f..f9026d173 100644
--- a/src/modules/activity/ActivityEntryRow.tsx
+++ b/src/modules/activity/ActivityEntryRow.tsx
@@ -67,10 +67,14 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
         <div
           className={cn(
             "w-6 h-6 absolute -right-1 -bottom-1 bg-nb-gray-930 rounded-full flex items-center justify-center border-4 border-nb-gray-950",
-            color == "red" && "bg-red-950 text-red-500 ",
-            color == "green" && "bg-green-950 text-green-400 ",
-            color == "blue-darker" && "bg-sky-950 text-sky-500 ",
-            color == "netbird" && "bg-netbird-950 text-netbird-500",
+            color == "red" &&
+              "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-500 ",
+            color == "green" &&
+              "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400 ",
+            color == "blue-darker" &&
+              "bg-sky-100 text-sky-700 dark:bg-sky-950 dark:text-sky-500 ",
+            color == "netbird" &&
+              "bg-netbird-100 text-netbird-700 dark:bg-netbird-950 dark:text-netbird-500",
           )}
         >
           {color && ActionIcons[color as ActionColor]}
@@ -83,7 +87,7 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
             <div className={"flex items-center gap-2"}>
               <div
                 className={
-                  "w-4 h-4 rounded-full flex items-center justify-center text-white uppercase text-[9px] font-medium bg-nb-gray-900"
+                  "w-4 h-4 rounded-full flex items-center justify-center text-neutral-700 dark:text-white uppercase text-[9px] font-medium bg-nb-gray-900"
                 }
                 style={{
                   color: generateColorFromUser(user),
diff --git a/src/modules/activity/UsersDropdownSelector.tsx b/src/modules/activity/UsersDropdownSelector.tsx
index 48e57a523..347f74f3a 100644
--- a/src/modules/activity/UsersDropdownSelector.tsx
+++ b/src/modules/activity/UsersDropdownSelector.tsx
@@ -113,7 +113,7 @@ export function UsersDropdownSelector({
               <React.Fragment>
                 <div
                   className={
-                    "w-5 h-5 rounded-full flex items-center justify-center text-white uppercase text-[9px] font-medium bg-nb-gray-900"
+                    "w-5 h-5 rounded-full flex items-center justify-center text-neutral-700 dark:text-white uppercase text-[9px] font-medium bg-nb-gray-900"
                   }
                   style={{
                     color:
diff --git a/src/modules/common-table-rows/LastTimeRow.tsx b/src/modules/common-table-rows/LastTimeRow.tsx
index 5d89ac804..1b418b810 100644
--- a/src/modules/common-table-rows/LastTimeRow.tsx
+++ b/src/modules/common-table-rows/LastTimeRow.tsx
@@ -39,7 +39,7 @@ export default function LastTimeRow({
         <TooltipContent>
           <div className={"dark:text-neutral-300 text-neutral-500 flex flex-col gap-1"}>
             <span className={"text-xs"}>{text}</span>
-            <span className={"text-neutral-200"}>
+            <span className={"dark:text-neutral-200 text-neutral-800"}>
               {dayjs(date).format("D MMMM, YYYY [at] h:mm A")}
             </span>
           </div>
diff --git a/src/modules/control-center/nodes/SelectUserNode.tsx b/src/modules/control-center/nodes/SelectUserNode.tsx
index 05e8b3c0a..862464484 100644
--- a/src/modules/control-center/nodes/SelectUserNode.tsx
+++ b/src/modules/control-center/nodes/SelectUserNode.tsx
@@ -138,7 +138,7 @@ export const SelectedUser = ({
     <div className={cn("flex items-center justify-center gap-2.5", className)}>
       <div
         className={
-          "w-8 h-8 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+          "w-8 h-8 rounded-full relative flex items-center justify-center text-neutral-700 dark:text-white uppercase text-md font-medium bg-nb-gray-900"
         }
         style={{
           color: generateColorFromUser(user),
diff --git a/src/modules/control-center/user/ControlCenterCurrentUserBadge.tsx b/src/modules/control-center/user/ControlCenterCurrentUserBadge.tsx
index cf316e74b..dc77c795d 100644
--- a/src/modules/control-center/user/ControlCenterCurrentUserBadge.tsx
+++ b/src/modules/control-center/user/ControlCenterCurrentUserBadge.tsx
@@ -32,7 +32,7 @@ export const ControlCenterCurrentUserBadge = ({ userId }: Props) => {
         <div className={cn("flex items-center justify-center gap-2.5")}>
           <div
             className={
-              "w-6 h-6 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+              "w-6 h-6 rounded-full relative flex items-center justify-center text-neutral-700 dark:text-white uppercase text-md font-medium bg-nb-gray-900"
             }
             style={{
               color: generateColorFromUser(user),
diff --git a/src/modules/networks/resources/NetworkResourceModal.tsx b/src/modules/networks/resources/NetworkResourceModal.tsx
index 5c867d66b..8b7b03e1e 100644
--- a/src/modules/networks/resources/NetworkResourceModal.tsx
+++ b/src/modules/networks/resources/NetworkResourceModal.tsx
@@ -348,7 +348,7 @@ export function ResourceModalContent({
                       {groupPolicyCount > 0 && (
                         <Callout variant={"info"} className={"mt-3"}>
                           Your selected resource groups are used in{" "}
-                          <span className="text-white font-medium">
+                          <span className="text-sky-900 dark:text-white font-medium">
                             {groupPolicyCount} Access Control{" "}
                             {groupPolicyCount === 1 ? "Policy" : "Policies"}
                           </span>
diff --git a/src/modules/posture-checks/ui/PostureCheckCard.tsx b/src/modules/posture-checks/ui/PostureCheckCard.tsx
index e058e7fec..e0b7d7e1d 100644
--- a/src/modules/posture-checks/ui/PostureCheckCard.tsx
+++ b/src/modules/posture-checks/ui/PostureCheckCard.tsx
@@ -95,7 +95,7 @@ export const PostureCheckCard = ({
               className={cn(
                 "text-[10px] rounded-full px-1 py-1 flex items-center gap-1 w-[50px] justify-center uppercase font-medium",
                 active
-                  ? "text-green-400 bg-green-900 hover:bg-green-800 transition-all hover:text-green-200"
+                  ? "text-green-700 bg-green-100 hover:bg-green-200 hover:text-green-800 transition-all dark:text-green-400 dark:bg-green-900 dark:hover:bg-green-800 dark:hover:text-green-200"
                   : "text-nb-gray-400 bg-nb-gray-900",
               )}
               onClick={(e) => {
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
index 7573e2ce0..5f16ab4a4 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsUserCell.tsx
@@ -70,7 +70,7 @@ export const ReverseProxyEventsUserCell = ({ event }: Props) => {
     <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"
+          "w-8 h-8 rounded-full flex items-center justify-center text-neutral-700 dark:text-white uppercase text-xs font-medium bg-nb-gray-900 shrink-0"
         }
         style={{
           color: generateColorFromUser(identityForColor),
diff --git a/src/modules/settings/GroupsSettings.tsx b/src/modules/settings/GroupsSettings.tsx
index af8c068bf..2fc5b9939 100644
--- a/src/modules/settings/GroupsSettings.tsx
+++ b/src/modules/settings/GroupsSettings.tsx
@@ -90,7 +90,7 @@ export default function GroupsSettings({ account }: Props) {
           children: (
             <div
               className={
-                "flex gap-2 items-center text-xs bg-netbird-950 px-4 justify-center py-3 rounded-md border border-netbird-500 text-netbird-200"
+                "flex gap-2 items-center text-xs bg-netbird-100 px-4 justify-center py-3 rounded-md border border-netbird-500 text-netbird-700 dark:bg-netbird-950 dark:text-netbird-200"
               }
             >
               <AlertCircle size={14} />
@@ -301,7 +301,7 @@ export default function GroupsSettings({ account }: Props) {
                     {jwtAllowGroupsWarning && (
                       <div
                         className={
-                          "flex gap-2 items-center text-xs bg-netbird-950 px-4 justify-center py-3 rounded-md border border-netbird-500 text-netbird-200"
+                          "flex gap-2 items-center text-xs bg-netbird-100 px-4 justify-center py-3 rounded-md border border-netbird-500 text-netbird-700 dark:bg-netbird-950 dark:text-netbird-200"
                         }
                       >
                         <AlertCircle size={14} />
diff --git a/src/modules/users/UserInvitesTable.tsx b/src/modules/users/UserInvitesTable.tsx
index 1cbcb68d7..65a8de295 100644
--- a/src/modules/users/UserInvitesTable.tsx
+++ b/src/modules/users/UserInvitesTable.tsx
@@ -84,7 +84,7 @@ function InviteNameCell({ invite }: { invite: UserInvite }) {
     >
       <div
         className={
-          "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+          "w-10 h-10 rounded-full relative flex items-center justify-center text-neutral-700 dark:text-white uppercase text-md font-medium bg-nb-gray-900"
         }
         style={{
           color: generateColorFromString(invite.name || invite.email),
diff --git a/src/modules/users/table-cells/UserNameCell.tsx b/src/modules/users/table-cells/UserNameCell.tsx
index c88d9a8f2..757d2b52e 100644
--- a/src/modules/users/table-cells/UserNameCell.tsx
+++ b/src/modules/users/table-cells/UserNameCell.tsx
@@ -63,7 +63,7 @@ export default function UserNameCell({ user }: Readonly<Props>) {
     >
       <div
         className={
-          "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+          "w-10 h-10 rounded-full relative flex items-center justify-center text-neutral-700 dark:text-white uppercase text-md font-medium bg-nb-gray-900"
         }
         style={{
           color: generateColorFromUser(user),
@@ -102,7 +102,7 @@ export default function UserNameCell({ user }: Readonly<Props>) {
           {isCurrent && (
             <span
               className={
-                "bg-sky-900 border border-sky-700 text-sky-200 rounded-full text-[9px] uppercase tracking-wider px-2 py-2 leading-[0]"
+                "bg-sky-100 border border-sky-700 text-sky-800 dark:bg-sky-900 dark:text-sky-200 rounded-full text-[9px] uppercase tracking-wider px-2 py-2 leading-[0]"
               }
             >
               You

From 6a6a3b86c4cdf1c2e0ff7972ce83095027ccbd30 Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 20:57:00 -0700
Subject: [PATCH 06/18] Light-mode color fixes plus CodeRabbit-audited nb-gray
 token migration

---
 src/app/(dashboard)/group/page.tsx                        | 2 +-
 src/app/(dashboard)/peer/page.tsx                         | 2 +-
 src/components/FullTooltip.tsx                            | 4 ++--
 src/components/PinCodeInput.tsx                           | 2 +-
 src/components/modal/Modal.tsx                            | 6 +++---
 src/components/table/DataTableRefreshButton.tsx           | 2 +-
 src/components/table/DataTableResetFilterButton.tsx       | 2 +-
 src/components/table/Table.tsx                            | 2 +-
 src/components/ui/LoginExpiredBadge.tsx                   | 2 +-
 src/components/ui/TruncatedText.tsx                       | 2 +-
 src/modules/common-table-rows/ActiveInactiveRow.tsx       | 2 +-
 src/modules/common-table-rows/ExpirationDateRow.tsx       | 2 +-
 src/modules/common-table-rows/LastTimeRow.tsx             | 6 +++---
 src/modules/dns/nameservers/table/NameserverNameCell.tsx  | 2 +-
 src/modules/dns/zones/records/DNSRecordContentCell.tsx    | 2 +-
 src/modules/dns/zones/records/DNSRecordNameCell.tsx       | 2 +-
 src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx | 2 +-
 src/modules/groups/AssignPeerToGroupModal.tsx             | 2 +-
 src/modules/groups/table/GroupsNameCell.tsx               | 2 +-
 src/modules/networks/misc/NetworkInformationSquare.tsx    | 2 +-
 src/modules/networks/resources/ResourceNameCell.tsx       | 2 +-
 src/modules/peers/PeerAddressCell.tsx                     | 2 +-
 src/modules/peers/PeerLastSeenCell.tsx                    | 2 +-
 src/modules/peers/PeerNameCell.tsx                        | 2 +-
 src/modules/peers/PeerOSCell.tsx                          | 2 +-
 src/modules/peers/PeerVersionCell.tsx                     | 8 ++++----
 .../posture-checks/checks/tooltips/GeoLocationTooltip.tsx | 2 +-
 .../checks/tooltips/NetBirdVersionTooltip.tsx             | 2 +-
 .../checks/tooltips/PeerNetworkRangeTooltip.tsx           | 2 +-
 .../posture-checks/checks/tooltips/ProcessTooltip.tsx     | 2 +-
 .../events/ReverseProxyEventsRequestCell.tsx              | 2 +-
 .../reverse-proxy/events/ReverseProxyEventsTimeCell.tsx   | 2 +-
 .../reverse-proxy/table/ReverseProxyDestinationCell.tsx   | 2 +-
 33 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/app/(dashboard)/group/page.tsx b/src/app/(dashboard)/group/page.tsx
index 5a0565f02..d1a0d593e 100644
--- a/src/app/(dashboard)/group/page.tsx
+++ b/src/app/(dashboard)/group/page.tsx
@@ -115,7 +115,7 @@ const GroupDetailsName = () => {
             >
               <div
                 className={cn(
-                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  "flex h-8 w-8 items-center justify-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
                   !isAllowedToRename &&
                     "opacity-40 cursor-not-allowed pointer-events-none",
                 )}
diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index 371e60684..4692ac741 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -268,7 +268,7 @@ const PeerHeader = () => {
                   <ModalTrigger>
                     <div
                       className={
-                        "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+                        "flex h-8 w-8 items-center justify-center gap-2 text-nb-gray-400 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
                       }
                     >
                       <PencilIcon size={16} />
diff --git a/src/components/FullTooltip.tsx b/src/components/FullTooltip.tsx
index c8cf399fe..5799dd79e 100644
--- a/src/components/FullTooltip.tsx
+++ b/src/components/FullTooltip.tsx
@@ -74,7 +74,7 @@ export default function FullTooltip({
               <div
                 className={cn(
                   isAction ? "cursor-pointer" : "cursor-default",
-                  "inline-flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md",
+                  "inline-flex items-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md",
                   className,
                 )}
               >
@@ -95,7 +95,7 @@ export default function FullTooltip({
             align={align}
             side={side}
           >
-            <div className={"dark:text-neutral-300 text-neutral-500 flex flex-col gap-1"}>
+            <div className={"text-nb-gray-300 flex flex-col gap-1"}>
               {content}
             </div>
           </TooltipContent>
diff --git a/src/components/PinCodeInput.tsx b/src/components/PinCodeInput.tsx
index 8ce22fb67..083787325 100644
--- a/src/components/PinCodeInput.tsx
+++ b/src/components/PinCodeInput.tsx
@@ -109,7 +109,7 @@ const PinCodeInput = forwardRef<PinCodeInputRef, Props>(function PinCodeInput(
           className={cn(
             "w-[42px] h-[42px] text-center text-sm rounded-md",
             "bg-nb-gray-900 border border-nb-gray-700",
-            "dark:placeholder:text-neutral-400/70",
+            "placeholder:text-nb-gray-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",
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 81b788fe1..6329ee2a1 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -70,7 +70,7 @@ const ModalContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "mx-auto relative top-0 z-[52] grid w-full focus:outline-0 border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
+            "mx-auto relative top-0 z-[52] grid w-full focus:outline-0 border border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:bg-nb-gray",
             className,
             maxWidthClass,
           )}
@@ -135,7 +135,7 @@ const SidebarModalContent = React.forwardRef<
           <DialogPrimitive.Content
             ref={ref}
             className={cn(
-              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
+              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:bg-nb-gray",
               "border-t-0 border-r-0 border-b-0 shadow-2xl",
               className,
               maxWidthClass,
@@ -179,7 +179,7 @@ const ModalFooter = ({
 }: React.HTMLAttributes<HTMLDivElement> & ModalFooterProps) => (
   <div
     className={cn(
-      "dark:border-nb-gray-800/70 border-neutral-200",
+      "dark:border-nb-gray-800/70 border-nb-gray-900",
       separator && "border-t",
     )}
   >
diff --git a/src/components/table/DataTableRefreshButton.tsx b/src/components/table/DataTableRefreshButton.tsx
index 4590da317..27b527453 100644
--- a/src/components/table/DataTableRefreshButton.tsx
+++ b/src/components/table/DataTableRefreshButton.tsx
@@ -56,7 +56,7 @@ export default function DataTableRefreshButton({ onClick, isDisabled }: Props) {
           if (hovered) event.preventDefault();
         }}
       >
-        <span className={"text-xs dark:text-neutral-300 text-neutral-500"}>
+        <span className={"text-xs text-nb-gray-300"}>
           {disabled ? "You can refresh it again in 5 seconds" : "Refresh"}
         </span>
       </TooltipContent>
diff --git a/src/components/table/DataTableResetFilterButton.tsx b/src/components/table/DataTableResetFilterButton.tsx
index e7c8b1f0b..cc9f1dd09 100644
--- a/src/components/table/DataTableResetFilterButton.tsx
+++ b/src/components/table/DataTableResetFilterButton.tsx
@@ -52,7 +52,7 @@ export default function DataTableResetFilterButton<TData>({
             if (hovered) event.preventDefault();
           }}
         >
-          <span className={"text-xs dark:text-neutral-300 text-neutral-500"}>
+          <span className={"text-xs text-nb-gray-300"}>
             Reset Filters & Search
           </span>
         </TooltipContent>
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index cbf8d23a7..c84c88f1a 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -128,7 +128,7 @@ const TableHead = React.forwardRef<
       "h-12 px-4 text-left align-middle uppercase font-medium  [&:has([role=checkbox])]:pr-0 w-auto",
       minimal
         ? "px-6"
-        : "text-neutral-500 dark:text-nb-gray-400 bg-nb-gray-900",
+        : "text-nb-gray-500 dark:text-nb-gray-400 bg-nb-gray-900",
       inset && "first:pl-[52px]",
       className,
     )}
diff --git a/src/components/ui/LoginExpiredBadge.tsx b/src/components/ui/LoginExpiredBadge.tsx
index d50613b8b..5b07a5a2e 100644
--- a/src/components/ui/LoginExpiredBadge.tsx
+++ b/src/components/ui/LoginExpiredBadge.tsx
@@ -15,7 +15,7 @@ export default function LoginExpiredBadge({ loginExpired }: Props) {
         </Badge>
       </TooltipTrigger>
       <TooltipContent>
-        <div className={"dark:text-neutral-300 text-neutral-500 text-xs leading-1.5"}>
+        <div className={"text-nb-gray-300 text-xs leading-1.5"}>
           This peer is offline and needs to be <br />
           re-authenticated because its login has expired.
         </div>
diff --git a/src/components/ui/TruncatedText.tsx b/src/components/ui/TruncatedText.tsx
index 0c73a4e27..64f17aaed 100644
--- a/src/components/ui/TruncatedText.tsx
+++ b/src/components/ui/TruncatedText.tsx
@@ -119,7 +119,7 @@ export default function TruncatedText({
         className={cn(className, "px-3 py-1.5")}
       >
         {tooltipContent ?? (
-          <div className="dark:text-neutral-300 text-neutral-500 flex flex-col gap-1">
+          <div className="text-nb-gray-300 flex flex-col gap-1">
             <div className="max-w-xs break-all whitespace-normal text-xs">
               {text}
             </div>
diff --git a/src/modules/common-table-rows/ActiveInactiveRow.tsx b/src/modules/common-table-rows/ActiveInactiveRow.tsx
index e256b0d2d..dc18f471c 100644
--- a/src/modules/common-table-rows/ActiveInactiveRow.tsx
+++ b/src/modules/common-table-rows/ActiveInactiveRow.tsx
@@ -27,7 +27,7 @@ export default function ActiveInactiveRow({
   return (
     <div
       className={cn(
-        "gap-3 dark:text-neutral-300 text-neutral-500 min-w-0",
+        "gap-3 text-nb-gray-300 min-w-0",
         className,
       )}
       data-testid={dataTestId}
diff --git a/src/modules/common-table-rows/ExpirationDateRow.tsx b/src/modules/common-table-rows/ExpirationDateRow.tsx
index df0910474..abc14e6fd 100644
--- a/src/modules/common-table-rows/ExpirationDateRow.tsx
+++ b/src/modules/common-table-rows/ExpirationDateRow.tsx
@@ -8,7 +8,7 @@ export default function ExpirationDateRow({ date }: Props) {
   return (
     <div
       className={
-        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 transition-all  py-2 px-3 rounded-md"
+        "flex items-center whitespace-nowrap gap-2 text-nb-gray-300 transition-all  py-2 px-3 rounded-md"
       }
     >
       <Calendar size={14} />
diff --git a/src/modules/common-table-rows/LastTimeRow.tsx b/src/modules/common-table-rows/LastTimeRow.tsx
index 1b418b810..0982b1894 100644
--- a/src/modules/common-table-rows/LastTimeRow.tsx
+++ b/src/modules/common-table-rows/LastTimeRow.tsx
@@ -26,7 +26,7 @@ export default function LastTimeRow({
         <TooltipTrigger>
           <div
             className={
-              "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-default"
+              "flex items-center whitespace-nowrap gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-default"
             }
           >
             <>
@@ -37,9 +37,9 @@ export default function LastTimeRow({
           </div>
         </TooltipTrigger>
         <TooltipContent>
-          <div className={"dark:text-neutral-300 text-neutral-500 flex flex-col gap-1"}>
+          <div className={"text-nb-gray-300 flex flex-col gap-1"}>
             <span className={"text-xs"}>{text}</span>
-            <span className={"dark:text-neutral-200 text-neutral-800"}>
+            <span className={"text-nb-gray-200"}>
               {dayjs(date).format("D MMMM, YYYY [at] h:mm A")}
             </span>
           </div>
diff --git a/src/modules/dns/nameservers/table/NameserverNameCell.tsx b/src/modules/dns/nameservers/table/NameserverNameCell.tsx
index 3a8d899c6..1f62154ec 100644
--- a/src/modules/dns/nameservers/table/NameserverNameCell.tsx
+++ b/src/modules/dns/nameservers/table/NameserverNameCell.tsx
@@ -11,7 +11,7 @@ export default function NameserverNameCell({ ns }: Props) {
     <div className={"flex min-w-[270px] max-w-[270px]"}>
       <div
         className={
-          "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+          "flex items-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
         }
         data-testid="nameserver-name-cell"
       >
diff --git a/src/modules/dns/zones/records/DNSRecordContentCell.tsx b/src/modules/dns/zones/records/DNSRecordContentCell.tsx
index 7e04974d8..6c57b0d33 100644
--- a/src/modules/dns/zones/records/DNSRecordContentCell.tsx
+++ b/src/modules/dns/zones/records/DNSRecordContentCell.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 export const DNSRecordContentCell = ({ record }: Props) => {
   return (
-    <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light truncate font-mono">
+    <div className="flex flex-col gap-0 text-nb-gray-300 font-light truncate font-mono">
       <CopyToClipboardText>
         <span className={"font-normal truncate text-[0.82rem]"}>
           {record.content}
diff --git a/src/modules/dns/zones/records/DNSRecordNameCell.tsx b/src/modules/dns/zones/records/DNSRecordNameCell.tsx
index 3eed5c780..0b0e38f9f 100644
--- a/src/modules/dns/zones/records/DNSRecordNameCell.tsx
+++ b/src/modules/dns/zones/records/DNSRecordNameCell.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 export const DNSRecordNameCell = ({ record }: Props) => {
   return (
-    <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light truncate">
+    <div className="flex flex-col gap-0 text-nb-gray-300 font-light truncate">
       <CopyToClipboardText>
         <span className={"font-normal truncate"}>{record.name}</span>
       </CopyToClipboardText>
diff --git a/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
index a7699ec60..c44a6055d 100644
--- a/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
+++ b/src/modules/dns/zones/records/DNSRecordTimeToLiveCell.tsx
@@ -11,7 +11,7 @@ export const DNSRecordTimeToLiveCell = ({ record }: Props) => {
   return (
     <div
       className={
-        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
+        "flex items-center whitespace-nowrap gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
       }
     >
       <ClockIcon size={14} />
diff --git a/src/modules/groups/AssignPeerToGroupModal.tsx b/src/modules/groups/AssignPeerToGroupModal.tsx
index dbe19473f..16b91c4e2 100644
--- a/src/modules/groups/AssignPeerToGroupModal.tsx
+++ b/src/modules/groups/AssignPeerToGroupModal.tsx
@@ -231,7 +231,7 @@ export const AssignGroupToPeerModalContent = ({
                   {groupName !== "All" && (
                     <button
                       className={
-                        "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                        "flex items-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
                       }
                       onClick={() => setGroupNameModal(true)}
                     >
diff --git a/src/modules/groups/table/GroupsNameCell.tsx b/src/modules/groups/table/GroupsNameCell.tsx
index e566fb779..426782e24 100644
--- a/src/modules/groups/table/GroupsNameCell.tsx
+++ b/src/modules/groups/table/GroupsNameCell.tsx
@@ -15,7 +15,7 @@ export default function GroupsNameCell({ active, group }: Readonly<Props>) {
     <div className={""}>
       <div
         className={
-          "inline-flex items-center justify-start dark:text-neutral-300 text-neutral-500 gap-2.5 py-2 px-3 pr-4 hover:bg-nb-gray-800/60 cursor-pointer rounded-md"
+          "inline-flex items-center justify-start text-nb-gray-300 gap-2.5 py-2 px-3 pr-4 hover:bg-nb-gray-800/60 cursor-pointer rounded-md"
         }
         onClick={() => router.push("/group?id=" + group.id)}
       >
diff --git a/src/modules/networks/misc/NetworkInformationSquare.tsx b/src/modules/networks/misc/NetworkInformationSquare.tsx
index 26fe06b05..9bec8fbd0 100644
--- a/src/modules/networks/misc/NetworkInformationSquare.tsx
+++ b/src/modules/networks/misc/NetworkInformationSquare.tsx
@@ -21,7 +21,7 @@ export const NetworkInformationSquare = ({
   return (
     <button
       className={cn(
-        "flex w-full min-w-0 items-center max-w-[450px] gap-4 dark:text-neutral-300 text-neutral-500 transition-all group/network rounded-md",
+        "flex w-full min-w-0 items-center max-w-[450px] gap-4 text-nb-gray-300 transition-all group/network rounded-md",
         onClick
           ? "hover:text-nb-gray-100 hover:bg-nb-gray-900/60 cursor-pointer py-2 pl-3 pr-14 relative"
           : "cursor-default",
diff --git a/src/modules/networks/resources/ResourceNameCell.tsx b/src/modules/networks/resources/ResourceNameCell.tsx
index cfed672cb..b9d2b8c63 100644
--- a/src/modules/networks/resources/ResourceNameCell.tsx
+++ b/src/modules/networks/resources/ResourceNameCell.tsx
@@ -35,7 +35,7 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
       </div>
       <div
         className={cn(
-          "flex flex-col gap-0 dark:text-neutral-300 text-neutral-500  font-light truncate",
+          "flex flex-col gap-0 text-nb-gray-300  font-light truncate",
           "group-hover:text-nb-gray-100 text-left",
         )}
       >
diff --git a/src/modules/peers/PeerAddressCell.tsx b/src/modules/peers/PeerAddressCell.tsx
index f1d8178d2..3bebb1ef5 100644
--- a/src/modules/peers/PeerAddressCell.tsx
+++ b/src/modules/peers/PeerAddressCell.tsx
@@ -54,7 +54,7 @@ export default function PeerAddressCell({ peer }: Props) {
             <RoundedFlag country={peer.country_code} size={12} />
           )}
         </div>
-        <div className="flex flex-col gap-0 dark:text-neutral-300 text-neutral-500 font-light truncate">
+        <div className="flex flex-col gap-0 text-nb-gray-300 font-light truncate">
           <CopyToClipboardText
             message={"DNS label has been copied to your clipboard"}
             textToCopy={peer.dns_label}
diff --git a/src/modules/peers/PeerLastSeenCell.tsx b/src/modules/peers/PeerLastSeenCell.tsx
index ff0fd5a6d..d930f43b7 100644
--- a/src/modules/peers/PeerLastSeenCell.tsx
+++ b/src/modules/peers/PeerLastSeenCell.tsx
@@ -12,7 +12,7 @@ export default function PeerLastSeenCell({ peer }: Props) {
   ) : (
     <div
       className={
-        "flex items-center whitespace-nowrap gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
+        "flex items-center whitespace-nowrap gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all py-2 px-3 rounded-md"
       }
     >
       <>
diff --git a/src/modules/peers/PeerNameCell.tsx b/src/modules/peers/PeerNameCell.tsx
index 08c3a97ad..c422058ef 100644
--- a/src/modules/peers/PeerNameCell.tsx
+++ b/src/modules/peers/PeerNameCell.tsx
@@ -31,7 +31,7 @@ export default function PeerNameCell({ peer, linkToPeer = true }: Props) {
     <div>
       <div
         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 ",
+          "flex items-center max-w-[280px] gap-2 text-nb-gray-300 transition-all py-2 px-3 rounded-md ",
           linkToPeer &&
             "hover:text-nb-gray-100 hover:bg-nb-gray-900/60 cursor-pointer",
         )}
diff --git a/src/modules/peers/PeerOSCell.tsx b/src/modules/peers/PeerOSCell.tsx
index da0dcfbd4..23b574dde 100644
--- a/src/modules/peers/PeerOSCell.tsx
+++ b/src/modules/peers/PeerOSCell.tsx
@@ -26,7 +26,7 @@ export function PeerOSCell({ os, serial }: Readonly<Props>) {
         <TooltipTrigger>
           <div
             className={
-              "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md"
+              "flex items-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md"
             }
           >
             <div
diff --git a/src/modules/peers/PeerVersionCell.tsx b/src/modules/peers/PeerVersionCell.tsx
index 2c6aac6a2..97659d137 100644
--- a/src/modules/peers/PeerVersionCell.tsx
+++ b/src/modules/peers/PeerVersionCell.tsx
@@ -52,7 +52,7 @@ export default function PeerVersionCell({
         <TooltipProvider>
           <Tooltip delayDuration={10}>
             <TooltipTrigger>
-              <div className="flex gap-2 dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 transition-all rounded-md items-center">
+              <div className="flex gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all rounded-md items-center">
                 <MemoizedNetBirdIcon />
                 {version == "development" ? "dev" : version}
                 <div className={"relative"}>
@@ -77,7 +77,7 @@ export default function PeerVersionCell({
 
               <div
                 className={
-                  "dark:text-neutral-300 text-neutral-500 flex flex-col gap-1 max-w-[300px] text-xs mt-1"
+                  "text-nb-gray-300 flex flex-col gap-1 max-w-[300px] text-xs mt-1"
                 }
               >
                 A new version of Netbird is available. Please update your client
@@ -95,7 +95,7 @@ export default function PeerVersionCell({
           </Tooltip>
         </TooltipProvider>
       ) : (
-        <div className="inline-flex gap-2 dark:text-neutral-300 text-neutral-500 items-center">
+        <div className="inline-flex gap-2 text-nb-gray-300 items-center">
           <MemoizedNetBirdIcon />
           {version == "development" ? "dev" : version}
         </div>
@@ -114,7 +114,7 @@ export default function PeerVersionCell({
         >
           <div
             className={
-              "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 whitespace-nowrap"
+              "flex items-center gap-2 text-nb-gray-300 whitespace-nowrap"
             }
           >
             <PeerOperatingSystemIcon os={os} />
diff --git a/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx b/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
index c65961832..cf4e08a28 100644
--- a/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/GeoLocationTooltip.tsx
@@ -21,7 +21,7 @@ export const GeoLocationTooltip = ({ children, check }: Props) => {
       content={
         <div
           className={
-            "dark:text-neutral-300 text-neutral-500 flex flex-col items-start text-sm gap-1 justify-start min-w-[200px]"
+            "text-nb-gray-300 flex flex-col items-start text-sm gap-1 justify-start min-w-[200px]"
           }
         >
           <div className={"px-4 pt-3"}>
diff --git a/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx b/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
index 62fe7d2e9..85df31535 100644
--- a/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/NetBirdVersionTooltip.tsx
@@ -12,7 +12,7 @@ export const NetBirdVersionTooltip = ({ version, children }: Props) => {
       className={"w-full"}
       interactive={false}
       content={
-        <div className={"dark:text-neutral-300 text-neutral-500 flex items-center text-sm gap-1"}>
+        <div className={"text-nb-gray-300 flex items-center text-sm gap-1"}>
           <span className={""}>Min. Client Version</span>
 
           <span
diff --git a/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx b/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
index 32d8bf3c1..7fcb292a7 100644
--- a/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/PeerNetworkRangeTooltip.tsx
@@ -17,7 +17,7 @@ export const PeerNetworkRangeTooltip = ({ check, children }: Props) => {
       contentClassName={"p-0"}
       content={
         <div
-          className={"dark:text-neutral-300 text-neutral-500 text-sm max-w-xs flex flex-col gap-1"}
+          className={"text-nb-gray-300 text-sm max-w-xs flex flex-col gap-1"}
         >
           <div className={"px-4 pt-3"}>
             {check.action == "allow" ? (
diff --git a/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx b/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
index 549a50c16..93c78dc57 100644
--- a/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
+++ b/src/modules/posture-checks/checks/tooltips/ProcessTooltip.tsx
@@ -21,7 +21,7 @@ export const ProcessTooltip = ({ check, children }: Props) => {
       content={
         <div
           className={
-            "dark:text-neutral-300 text-neutral-500 text-sm max-w-xs flex flex-col gap-1 min-w-0"
+            "text-nb-gray-300 text-sm max-w-xs flex flex-col gap-1 min-w-0"
           }
         >
           <div className={"px-4 pt-3"}>
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
index 10e890a18..dd2c40e2a 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsRequestCell.tsx
@@ -45,7 +45,7 @@ export const ReverseProxyEventsUrlCell = ({ event, service }: Props) => {
       side={"top"}
       sideOffset={10}
       tooltipContent={
-        <div className="max-w-sm break-all whitespace-normal text-xs dark:text-neutral-300 text-neutral-500">
+        <div className="max-w-sm break-all whitespace-normal text-xs text-nb-gray-300">
           {fullUrl}
         </div>
       }
diff --git a/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
index a29d4cb18..628f3666f 100644
--- a/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
+++ b/src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
@@ -19,7 +19,7 @@ export const ReverseProxyEventsTimeCell = ({ timestamp, className }: Props) => {
         <div
           className={cn(
             "flex-col flex whitespace-nowrap",
-            "dark:text-neutral-300 text-neutral-500 hover:text-nb-gray-100 py-2 px-3 rounded-md cursor-default",
+            "text-nb-gray-300 hover:text-nb-gray-100 py-2 px-3 rounded-md cursor-default",
           )}
         >
           <span className={"text-nb-gray-200 flex gap-2 items-center"}>
diff --git a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
index e43f06f85..63975d65a 100644
--- a/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
+++ b/src/modules/reverse-proxy/table/ReverseProxyDestinationCell.tsx
@@ -17,7 +17,7 @@ export default function ReverseProxyDestinationCell({
   return (
     <div
       className={cn(
-        "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 font-light truncate",
+        "flex items-center gap-2 text-nb-gray-300 font-light truncate",
         !target.enabled && "opacity-30",
       )}
     >

From ccf417e10360b36133bc49568ea840fc7f68b6fa Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Tue, 2 Jun 2026 21:34:18 -0700
Subject: [PATCH 07/18] light mode in AnnouncementBanner.tsx

---
 src/components/ui/AnnouncementBanner.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/AnnouncementBanner.tsx b/src/components/ui/AnnouncementBanner.tsx
index 3fca3fbc8..666380403 100644
--- a/src/components/ui/AnnouncementBanner.tsx
+++ b/src/components/ui/AnnouncementBanner.tsx
@@ -11,22 +11,23 @@ const variants = cva(
     variants: {
       variant: {
         default:
-          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+          "bg-neutral-100 border-neutral-200 text-neutral-700 dark:bg-nb-gray-900/50 dark:border-nb-gray-800/30 dark:text-nb-gray-200 border-b",
         important:
           "from-netbird to-netbird-400 bg-gradient-to-b text-black font-normal",
       },
       tagBadge: {
-        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        default:
+          "bg-neutral-200 text-neutral-700 dark:bg-nb-gray-200/10 dark:text-nb-gray-100 font-medium",
         important: "bg-nb-gray-900 text-nb-gray-200 font-medium",
       },
       closeButton: {
         default:
-          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+          "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-nb-gray-900 dark:text-nb-gray-300 dark:hover:bg-nb-gray-800 rounded-md p-1",
         important:
           "bg-netbird rounded-md p-1 text-nb-gray-900 hover:bg-nb-gray-900 hover:text-nb-gray-200",
       },
       inlineLink: {
-        default: "text-nb-blue-400 hover:underline",
+        default: "text-nb-blue-500 dark:text-nb-blue-400 hover:underline",
         important: "!text-black underline hover:opacity-80",
       },
     },

From d4f6adb8073a1e08fd678cf35799ff5d5c737bd9 Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Fri, 5 Jun 2026 12:46:46 -0700
Subject: [PATCH 08/18] Fixed invisible light-mode filter text on peers page

---
 src/components/table/TableFilters.tsx               | 4 ++--
 src/components/table/filters/CheckboxListPicker.tsx | 4 ++--
 src/components/table/filters/RadioPicker.tsx        | 6 +++---
 src/components/table/filters/StatusPicker.tsx       | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/table/TableFilters.tsx b/src/components/table/TableFilters.tsx
index 8548f432e..cb28b8c37 100644
--- a/src/components/table/TableFilters.tsx
+++ b/src/components/table/TableFilters.tsx
@@ -99,7 +99,7 @@ export function TableFiltersButton<TData>({
               <button
                 aria-label={"Back"}
                 className={
-                  "flex items-center justify-center w-7 h-7 -ml-1 shrink-0 text-nb-gray-400 hover:text-white hover:bg-nb-gray-900 rounded transition-colors"
+                  "flex items-center justify-center w-7 h-7 -ml-1 shrink-0 text-nb-gray-400 hover:text-nb-gray-100 hover:bg-nb-gray-900 rounded transition-colors"
                 }
                 onClick={() => setActiveFilterId(null)}
               >
@@ -231,7 +231,7 @@ function FilterChip<TData>({ def, text, table }: FilterChipProps<TData>) {
           className={cn(
             "flex items-center justify-center px-2",
             "border-l border-nb-gray-900",
-            "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-white transition-colors",
+            "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-100 transition-colors",
           )}
           onClick={(e) => {
             e.stopPropagation();
diff --git a/src/components/table/filters/CheckboxListPicker.tsx b/src/components/table/filters/CheckboxListPicker.tsx
index 44717a3eb..e488ea666 100644
--- a/src/components/table/filters/CheckboxListPicker.tsx
+++ b/src/components/table/filters/CheckboxListPicker.tsx
@@ -45,8 +45,8 @@ export function CheckboxListPicker<V extends string | number>({
             tabIndex={0}
             className={cn(
               "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm transition-colors cursor-pointer",
-              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-white",
-              isSelected && "text-white",
+              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
+              isSelected && "text-nb-gray-100",
             )}
             onClick={() => toggle(option.value)}
             onKeyDown={(e) => {
diff --git a/src/components/table/filters/RadioPicker.tsx b/src/components/table/filters/RadioPicker.tsx
index dc40573ce..6e3514575 100644
--- a/src/components/table/filters/RadioPicker.tsx
+++ b/src/components/table/filters/RadioPicker.tsx
@@ -38,8 +38,8 @@ export function RadioPicker<V>({
               .toLowerCase()}`}
             className={cn(
               "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm transition-colors",
-              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-white",
-              selected && "text-white",
+              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
+              selected && "text-nb-gray-100",
             )}
             onClick={() => {
               onChange(option.value);
@@ -49,7 +49,7 @@ export function RadioPicker<V>({
             <CheckIcon
               size={14}
               className={cn(
-                "shrink-0 text-white",
+                "shrink-0 text-nb-gray-100",
                 selected ? "opacity-100" : "opacity-0",
               )}
             />
diff --git a/src/components/table/filters/StatusPicker.tsx b/src/components/table/filters/StatusPicker.tsx
index bb859fad4..7981ad857 100644
--- a/src/components/table/filters/StatusPicker.tsx
+++ b/src/components/table/filters/StatusPicker.tsx
@@ -36,8 +36,8 @@ export function StatusPicker({ value, onChange, close }: Props) {
             key={option.label}
             className={cn(
               "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm transition-colors",
-              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-white",
-              selected && "text-white",
+              "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
+              selected && "text-nb-gray-100",
             )}
             onClick={() => {
               onChange(option.value);
@@ -47,7 +47,7 @@ export function StatusPicker({ value, onChange, close }: Props) {
             <CheckIcon
               size={14}
               className={cn(
-                "shrink-0 text-white",
+                "shrink-0 text-nb-gray-100",
                 selected ? "opacity-100" : "opacity-0",
               )}
             />

From 41043bb10c3f57dc1dbecd749a9364e03fc07dac Mon Sep 17 00:00:00 2001
From: TechHutTV <brandon@techhut.tv>
Date: Fri, 5 Jun 2026 12:56:10 -0700
Subject: [PATCH 09/18] Fix light mode announcement banner

---
 src/components/ui/AnnouncementBanner.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/AnnouncementBanner.tsx b/src/components/ui/AnnouncementBanner.tsx
index 666380403..992668fdb 100644
--- a/src/components/ui/AnnouncementBanner.tsx
+++ b/src/components/ui/AnnouncementBanner.tsx
@@ -13,22 +13,24 @@ const variants = cva(
         default:
           "bg-neutral-100 border-neutral-200 text-neutral-700 dark:bg-nb-gray-900/50 dark:border-nb-gray-800/30 dark:text-nb-gray-200 border-b",
         important:
-          "from-netbird to-netbird-400 bg-gradient-to-b text-black font-normal",
+          "bg-netbird-200 text-netbird-900 font-normal dark:bg-gradient-to-b dark:from-netbird dark:to-netbird-400 dark:text-black",
       },
       tagBadge: {
         default:
           "bg-neutral-200 text-neutral-700 dark:bg-nb-gray-200/10 dark:text-nb-gray-100 font-medium",
-        important: "bg-nb-gray-900 text-nb-gray-200 font-medium",
+        important:
+          "bg-netbird-900 text-netbird-50 font-medium dark:bg-nb-gray-900 dark:text-nb-gray-200",
       },
       closeButton: {
         default:
           "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-nb-gray-900 dark:text-nb-gray-300 dark:hover:bg-nb-gray-800 rounded-md p-1",
         important:
-          "bg-netbird rounded-md p-1 text-nb-gray-900 hover:bg-nb-gray-900 hover:text-nb-gray-200",
+          "rounded-md p-1 bg-netbird-300/60 text-netbird-900 hover:bg-netbird-300 dark:bg-netbird dark:text-black dark:hover:bg-nb-gray-900 dark:hover:text-nb-gray-200",
       },
       inlineLink: {
         default: "text-nb-blue-500 dark:text-nb-blue-400 hover:underline",
-        important: "!text-black underline hover:opacity-80",
+        important:
+          "!text-netbird-900 dark:!text-black underline hover:opacity-80",
       },
     },
   },

From d1a2d407b3ac3bac40acbf2e2335d40490fc4ce2 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 20:29:38 -0700
Subject: [PATCH 10/18] next-themes is removed and replaced with a self-owned
 provider

---
 package-lock.json                             | 12 ---
 package.json                                  |  1 -
 src/app/(dashboard)/control-center/page.tsx   |  2 +-
 src/components/ui/DarkModeToggle.tsx          |  2 +-
 src/contexts/GlobalThemeProvider.tsx          | 23 ++---
 src/contexts/ThemeProvider.tsx                | 98 +++++++++++++++++++
 src/layouts/AppLayout.tsx                     |  4 +-
 .../control-center/edges/DirectionIn.tsx      |  2 +-
 .../control-center/edges/SimpleConnection.tsx |  2 +-
 .../control-center/nodes/SelectGroupNode.tsx  |  2 +-
 .../control-center/nodes/SelectPeerNode.tsx   |  2 +-
 .../control-center/nodes/SelectUserNode.tsx   |  2 +-
 src/modules/remote-access/ssh/Terminal.tsx    |  2 +-
 13 files changed, 116 insertions(+), 38 deletions(-)
 create mode 100644 src/contexts/ThemeProvider.tsx

diff --git a/package-lock.json b/package-lock.json
index 56682204a..b69c36839 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,7 +62,6 @@
         "lodash": "4.18.1",
         "lucide-react": "^0.566.0",
         "next": "16.1.7",
-        "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
         "react": "^19.2.4",
         "react-chartjs-2": "^5.3.0",
@@ -7132,17 +7131,6 @@
         }
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
-      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "next": "*",
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index f854a09e5..03e202864 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,6 @@
     "lodash": "4.18.1",
     "lucide-react": "^0.566.0",
     "next": "16.1.7",
-    "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^19.2.4",
     "react-chartjs-2": "^5.3.0",
diff --git a/src/app/(dashboard)/control-center/page.tsx b/src/app/(dashboard)/control-center/page.tsx
index 50bace2f5..aa57d954b 100644
--- a/src/app/(dashboard)/control-center/page.tsx
+++ b/src/app/(dashboard)/control-center/page.tsx
@@ -33,7 +33,7 @@ import {
   MessageSquareShareIcon,
   NetworkIcon,
 } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
diff --git a/src/components/ui/DarkModeToggle.tsx b/src/components/ui/DarkModeToggle.tsx
index 6913dc2d3..9e7ccf08a 100644
--- a/src/components/ui/DarkModeToggle.tsx
+++ b/src/components/ui/DarkModeToggle.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "@components/DropdownMenu";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import { useEffect, useState } from "react";
 
 export default function DarkModeToggle() {
diff --git a/src/contexts/GlobalThemeProvider.tsx b/src/contexts/GlobalThemeProvider.tsx
index 892ca1add..450aa478c 100644
--- a/src/contexts/GlobalThemeProvider.tsx
+++ b/src/contexts/GlobalThemeProvider.tsx
@@ -2,13 +2,12 @@
 
 import "react-loading-skeleton/dist/skeleton.css";
 import dynamic from "next/dynamic";
-import { type ThemeProviderProps } from "next-themes/dist/types";
-import { useTheme } from "next-themes";
 import * as React from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
+import { useTheme } from "@/contexts/ThemeProvider";
 
-const NextThemesProvider = dynamic(
-  () => import("next-themes").then((mod) => mod.ThemeProvider),
+const ThemeProvider = dynamic(
+  () => import("@/contexts/ThemeProvider").then((mod) => mod.ThemeProvider),
   { ssr: false },
 );
 
@@ -33,18 +32,12 @@ function ThemedSkeleton({ children }: { children: React.ReactNode }) {
 
 export function GlobalThemeProvider({
   children,
-  ...props
-}: ThemeProviderProps) {
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="dark"
-      storageKey="netbird-theme"
-      enableSystem={true}
-      disableTransitionOnChange
-      {...props}
-    >
+    <ThemeProvider>
       <ThemedSkeleton>{children}</ThemedSkeleton>
-    </NextThemesProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
new file mode 100644
index 000000000..38e34ef66
--- /dev/null
+++ b/src/contexts/ThemeProvider.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+
+export type Theme = "light" | "dark" | "system";
+
+type ThemeContextValue = {
+  theme: Theme;
+  resolvedTheme: "light" | "dark";
+  setTheme: (theme: Theme) => void;
+};
+
+const STORAGE_KEY = "netbird-theme";
+const DEFAULT_THEME: Theme = "dark";
+
+const ThemeContext = React.createContext<ThemeContextValue>({
+  theme: DEFAULT_THEME,
+  resolvedTheme: "dark",
+  setTheme: () => undefined,
+});
+
+const getStoredTheme = (): Theme => {
+  if (typeof window === "undefined") return DEFAULT_THEME;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  } catch {
+    // localStorage unavailable (e.g. blocked by browser settings)
+  }
+  return DEFAULT_THEME;
+};
+
+const getSystemTheme = (): "light" | "dark" => {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+/* Suspends CSS transitions for one frame so the whole page switches
+   theme at once instead of elements fading at different speeds. */
+const withTransitionsDisabled = (apply: () => void) => {
+  const style = document.createElement("style");
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{transition:none!important}",
+    ),
+  );
+  document.head.appendChild(style);
+  apply();
+  window.getComputedStyle(document.documentElement);
+  setTimeout(() => document.head.removeChild(style), 1);
+};
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = React.useState<Theme>(getStoredTheme);
+  const [systemTheme, setSystemTheme] =
+    React.useState<"light" | "dark">(getSystemTheme);
+
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
+
+  React.useEffect(() => {
+    withTransitionsDisabled(() => {
+      const root = document.documentElement;
+      root.classList.toggle("dark", resolvedTheme === "dark");
+      root.style.colorScheme = resolvedTheme;
+    });
+  }, [resolvedTheme]);
+
+  React.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setSystemTheme(media.matches ? "dark" : "light");
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+
+  const setTheme = React.useCallback((next: Theme) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+      // theme still applies for the session, just won't persist
+    }
+    setThemeState(next);
+  }, []);
+
+  const value = React.useMemo(
+    () => ({ theme, resolvedTheme, setTheme }),
+    [theme, resolvedTheme, setTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => React.useContext(ThemeContext);
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index accc3d219..56a1fac9c 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -44,9 +44,9 @@ export default function AppLayout({
     <html lang="en">
       <head>
         {/* Set the theme class before first paint to avoid a flash.
-            Mirrors next-themes (storageKey "netbird-theme", default "dark",
+            Mirrors ThemeProvider (storageKey "netbird-theme", default "dark",
             system-aware) — required because GlobalThemeProvider is ssr:false,
-            so next-themes' own pre-hydration script never runs on the server. */}
+            so the provider only applies the class after hydration. */}
         <script
           dangerouslySetInnerHTML={{
             __html: `(function(){try{var t=localStorage.getItem('netbird-theme')||'dark';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList[d?'add':'remove']('dark');}catch(e){document.documentElement.classList.add('dark');}})();`,
diff --git a/src/modules/control-center/edges/DirectionIn.tsx b/src/modules/control-center/edges/DirectionIn.tsx
index 352805374..48eea6757 100644
--- a/src/modules/control-center/edges/DirectionIn.tsx
+++ b/src/modules/control-center/edges/DirectionIn.tsx
@@ -5,7 +5,7 @@ import {
   getSmoothStepPath,
   getStraightPath,
 } from "@xyflow/react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import React from "react";
 
 type Props = {
diff --git a/src/modules/control-center/edges/SimpleConnection.tsx b/src/modules/control-center/edges/SimpleConnection.tsx
index 11a5f6f73..11092acb6 100644
--- a/src/modules/control-center/edges/SimpleConnection.tsx
+++ b/src/modules/control-center/edges/SimpleConnection.tsx
@@ -1,5 +1,5 @@
 import { BaseEdge, type EdgeProps, getSimpleBezierPath } from "@xyflow/react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import React from "react";
 import { useSourceGroupEnabled } from "@/modules/control-center/utils/helpers";
 
diff --git a/src/modules/control-center/nodes/SelectGroupNode.tsx b/src/modules/control-center/nodes/SelectGroupNode.tsx
index b5a27ed06..1ac701f12 100644
--- a/src/modules/control-center/nodes/SelectGroupNode.tsx
+++ b/src/modules/control-center/nodes/SelectGroupNode.tsx
@@ -7,7 +7,7 @@ import useFetchApi from "@utils/api";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import * as React from "react";
 import { useMemo } from "react";
 import { Group } from "@/interfaces/Group";
diff --git a/src/modules/control-center/nodes/SelectPeerNode.tsx b/src/modules/control-center/nodes/SelectPeerNode.tsx
index f874663a3..d8d94020e 100644
--- a/src/modules/control-center/nodes/SelectPeerNode.tsx
+++ b/src/modules/control-center/nodes/SelectPeerNode.tsx
@@ -7,7 +7,7 @@ import { cn } from "@utils/helpers";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import * as React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
diff --git a/src/modules/control-center/nodes/SelectUserNode.tsx b/src/modules/control-center/nodes/SelectUserNode.tsx
index 862464484..f22a2c8a0 100644
--- a/src/modules/control-center/nodes/SelectUserNode.tsx
+++ b/src/modules/control-center/nodes/SelectUserNode.tsx
@@ -7,7 +7,7 @@ import { cn, generateColorFromUser } from "@utils/helpers";
 import { Handle, type Node, Position } from "@xyflow/react";
 import { sortBy } from "lodash";
 import { ChevronsUpDown, Cog } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import * as React from "react";
 import { User } from "@/interfaces/User";
 import TruncatedText from "@components/ui/TruncatedText";
diff --git a/src/modules/remote-access/ssh/Terminal.tsx b/src/modules/remote-access/ssh/Terminal.tsx
index 9de9b265d..8f77de4f2 100644
--- a/src/modules/remote-access/ssh/Terminal.tsx
+++ b/src/modules/remote-access/ssh/Terminal.tsx
@@ -2,7 +2,7 @@
 
 import "@xterm/xterm/css/xterm.css";
 import { cn } from "@utils/helpers";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/contexts/ThemeProvider";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
 const DARK_TERMINAL_THEME = {

From 019320a481c2ac2205c081373b79ea2476442a92 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 20:38:04 -0700
Subject: [PATCH 11/18] StatusPicker sync

---
 src/components/table/filters/RadioPicker.tsx  | 1 +
 src/components/table/filters/StatusPicker.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/table/filters/RadioPicker.tsx b/src/components/table/filters/RadioPicker.tsx
index 6e3514575..22a4bd33b 100644
--- a/src/components/table/filters/RadioPicker.tsx
+++ b/src/components/table/filters/RadioPicker.tsx
@@ -33,6 +33,7 @@ export function RadioPicker<V>({
         return (
           <button
             key={option.label}
+            type={"button"}
             data-testid={`radio-option-${option.label
               .replace(/\s+/g, "-")
               .toLowerCase()}`}
diff --git a/src/components/table/filters/StatusPicker.tsx b/src/components/table/filters/StatusPicker.tsx
index 7981ad857..a79a8cdff 100644
--- a/src/components/table/filters/StatusPicker.tsx
+++ b/src/components/table/filters/StatusPicker.tsx
@@ -34,6 +34,7 @@ export function StatusPicker({ value, onChange, close }: Props) {
         return (
           <button
             key={option.label}
+            type={"button"}
             className={cn(
               "flex items-center gap-2.5 px-2 py-1.5 rounded text-sm transition-colors",
               "text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",

From daff0659d4545ee69bcef845ff7b016f0d3cadd9 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 20:45:12 -0700
Subject: [PATCH 12/18] theme switcher in profile dropdown

---
 src/components/ui/DarkModeToggle.tsx | 103 +++++++++++----------------
 src/components/ui/UserDropdown.tsx   |   5 ++
 src/layouts/Header.tsx               |   2 -
 3 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/src/components/ui/DarkModeToggle.tsx b/src/components/ui/DarkModeToggle.tsx
index 9e7ccf08a..b4c83713b 100644
--- a/src/components/ui/DarkModeToggle.tsx
+++ b/src/components/ui/DarkModeToggle.tsx
@@ -1,69 +1,52 @@
 "use client";
 
-import Button from "@components/Button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@components/DropdownMenu";
+import { cn } from "@utils/helpers";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
-import { useTheme } from "@/contexts/ThemeProvider";
-import { useEffect, useState } from "react";
+import { type Theme, useTheme } from "@/contexts/ThemeProvider";
 
+const OPTIONS: {
+  value: Theme;
+  label: string;
+  icon: typeof SunIcon;
+}[] = [
+  { value: "light", label: "Light", icon: SunIcon },
+  { value: "dark", label: "Dark", icon: MoonIcon },
+  { value: "system", label: "System", icon: MonitorIcon },
+];
+
+/* Segmented theme switcher rendered as a footer row inside the
+   profile dropdown. Plain buttons (not DropdownMenuItem) so picking
+   a theme doesn't close the menu. */
 export default function DarkModeToggle() {
-  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return mounted ? (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button className={"!px-3"} variant={"default"}>
-          <div>
-            {theme === "system" ? (
-              <MonitorIcon size={16} className={"relative"} />
-            ) : (
-              <>
-                <SunIcon
-                  size={16}
-                  className={"scale-100 dark:scale-0 dark:absolute relative"}
-                />
-                <MoonIcon
-                  size={16}
-                  className={"scale-0 dark:scale-100 absolute dark:relative"}
-                />
-              </>
+  return (
+    <div
+      className={
+        "flex items-center justify-between gap-3 pl-3 pr-2 py-1.5 text-sm"
+      }
+    >
+      <span className={"text-nb-gray-300"}>Theme</span>
+      <div className={"flex items-center gap-1"}>
+        {OPTIONS.map(({ value, label, icon: Icon }) => (
+          <button
+            key={value}
+            type={"button"}
+            title={label}
+            aria-label={`${label} theme`}
+            aria-pressed={theme === value}
+            onClick={() => setTheme(value)}
+            className={cn(
+              "p-1.5 rounded-md transition-colors",
+              theme === value
+                ? "bg-nb-gray-900 text-nb-gray-100"
+                : "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-100",
             )}
-          </div>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side={"bottom"} align={"end"}>
-        <DropdownMenuItem
-          onClick={() => setTheme("light")}
-          className={"flex gap-2"}
-        >
-          <SunIcon size={16} />
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => setTheme("dark")}
-          className={"flex gap-2"}
-        >
-          <MoonIcon size={16} />
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => setTheme("system")}
-          className={"flex gap-2"}
-        >
-          <MonitorIcon size={16} />
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ) : null;
+          >
+            <Icon size={14} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/ui/UserDropdown.tsx b/src/components/ui/UserDropdown.tsx
index 044d60332..4250eee63 100644
--- a/src/components/ui/UserDropdown.tsx
+++ b/src/components/ui/UserDropdown.tsx
@@ -9,6 +9,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@components/DropdownMenu";
+import DarkModeToggle from "@components/ui/DarkModeToggle";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { UserAvatar } from "@components/ui/UserAvatar";
 import { CreditCardIcon, KeyRound, LogOutIcon, User2 } from "lucide-react";
@@ -120,6 +121,10 @@ export default function UserDropdown() {
               {isMac ? "⇧⌘L" : "⇧ ⊞ L"}
             </DropdownMenuShortcut>
           </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DarkModeToggle />
         </DropdownMenuContent>
       </DropdownMenu>
     </>
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index 94e124ace..afdf4301c 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -15,7 +15,6 @@ import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import HelpAndSupportButton from "@components/ui/HelpAndSupportButton";
-import DarkModeToggle from "@components/ui/DarkModeToggle";
 
 export const headerHeight = 65;
 
@@ -71,7 +70,6 @@ export default function NavbarWithDropdown() {
             <MSPTransferAccountModal />
             <DistributorTransferAccountModal />
             <MSPTenantsSwitcher />
-            <DarkModeToggle />
             <HelpAndSupportButton />
             <UserDropdown />
           </div>

From 68128dffb7ac0ade08a332051af3bf78c96fba88 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 21:04:18 -0700
Subject: [PATCH 13/18] minor fixes and color cleanup

---
 src/app/globals.css                                   |  6 ++++--
 src/components/Checkbox.tsx                           |  4 ++--
 src/components/Command.tsx                            |  2 +-
 src/components/DropdownMenu.tsx                       |  2 +-
 src/components/NetworkRouteSelector.tsx               |  2 +-
 src/components/PeerGroupSelector.tsx                  |  2 +-
 src/components/PeerSelector.tsx                       |  2 +-
 src/components/Popover.tsx                            |  4 ++--
 src/components/PortSelector.tsx                       |  2 +-
 src/components/UserSelector.tsx                       |  2 +-
 src/components/select/SelectDropdown.tsx              |  2 +-
 src/components/table/DataTableFilter.tsx              |  2 +-
 src/components/table/TableFilters.tsx                 | 11 ++++++-----
 .../access-control/ssh/SSHUsernameSelector.tsx        |  2 +-
 src/modules/activity/ActivityEventCodeSelector.tsx    |  2 +-
 src/modules/activity/UsersDropdownSelector.tsx        |  2 +-
 src/modules/groups/GroupFilterSelector.tsx            |  2 +-
 src/modules/groups/SingleGroupSelector.tsx            |  2 +-
 src/modules/peers/PeerActionCell.tsx                  |  2 +-
 src/modules/users/UserRoleSelector.tsx                |  2 +-
 20 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 600141299..6492740e6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,8 +7,10 @@
     --lift: 1;
 
     /* nb-gray INVERTED ramp (light mode) — space-separated RGB channels.
-       High stops are surfaces (near-white), low stops are text (near-black). */
-    --nb-gray-DEFAULT: 255 255 255;
+       High stops are surfaces (near-white), low stops are text (near-black).
+       DEFAULT (the app background) sits slightly below white so white
+       inputs, buttons and cards stand in front of it. */
+    --nb-gray-DEFAULT: 245 247 249;
     --nb-gray-50: 24 26 29;
     --nb-gray-100: 31 33 36;
     --nb-gray-200: 46 50 56;
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index f8fcccbc3..6561336e9 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -33,10 +33,10 @@ const Checkbox = React.forwardRef<
       ref={ref}
       className={cn(
         variants({ variant }),
-        "border-neutral-900",
+        "border-nb-gray-700",
         "peer h-5 w-5 shrink-0 rounded-[4px] border",
         "ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 ",
+        "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-netbird data-[state=checked]:border-netbird data-[state=checked]:text-neutral-50 ",
         className,
       )}
       {...props}
diff --git a/src/components/Command.tsx b/src/components/Command.tsx
index 7c353ea81..dd6669554 100644
--- a/src/components/Command.tsx
+++ b/src/components/Command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "text-xs flex justify-between py-2 px-3 cursor-pointer items-center rounded-md",
-      "bg-transparent dark:aria-selected:bg-nb-gray-910 group/command-item",
+      "bg-transparent aria-selected:bg-nb-gray-910 group/command-item",
       className,
     )}
     {...props}
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index 5fa0a8200..51f659194 100644
--- a/src/components/DropdownMenu.tsx
+++ b/src/components/DropdownMenu.tsx
@@ -83,7 +83,7 @@ const menuItemVariants = cva("", {
       default:
         "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-nb-gray-300 dark:data-[state=open]:bg-nb-gray-900 dark:data-[state=open]:text-gray-50",
       danger:
-        "dark:focus:bg-red-900/20 dark:focus:text-red-500 dark:text-red-500",
+        "text-red-600 focus:bg-red-50 focus:text-red-600 dark:text-red-500 dark:focus:bg-red-900/20 dark:focus:text-red-500",
     },
   },
 });
diff --git a/src/components/NetworkRouteSelector.tsx b/src/components/NetworkRouteSelector.tsx
index 937334b23..3d28fdd12 100644
--- a/src/components/NetworkRouteSelector.tsx
+++ b/src/components/NetworkRouteSelector.tsx
@@ -135,7 +135,7 @@ export function NetworkRouteSelector({
         </button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950"
         style={{
           width: width,
         }}
diff --git a/src/components/PeerGroupSelector.tsx b/src/components/PeerGroupSelector.tsx
index d18d33bcb..01ec28baf 100644
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -513,7 +513,7 @@ export function PeerGroupSelector({
         )}
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm dark:shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}
diff --git a/src/components/PeerSelector.tsx b/src/components/PeerSelector.tsx
index 8315fa1ca..5e1894086 100644
--- a/src/components/PeerSelector.tsx
+++ b/src/components/PeerSelector.tsx
@@ -138,7 +138,7 @@ export function PeerSelector({
       </PopoverTrigger>
       <PopoverContent
         hideWhenDetached={false}
-        className="w-full p-0 shadow-sm shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm dark:shadow-nb-gray-950"
         style={{
           width: width,
         }}
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index f5c251388..08116f36d 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -11,11 +11,11 @@ export const popoverVariants = cva([], {
   variants: {
     variant: {
       lighter: [
-        "rounded-md border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md",
+        "rounded-md border border-neutral-300 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md",
         "dark:border-nb-gray-800 dark:bg-nb-gray-920 dark:text-neutral-50",
       ],
       dark: [
-        "rounded-md border border-neutral-200 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md",
+        "rounded-md border border-neutral-300 bg-white px-5 py-3 text-sm text-neutral-950 shadow-md",
         "dark:border-nb-gray-900 dark:bg-nb-gray-940 dark:text-gray-50",
       ],
     },
diff --git a/src/components/PortSelector.tsx b/src/components/PortSelector.tsx
index 06eab0834..84d375dba 100644
--- a/src/components/PortSelector.tsx
+++ b/src/components/PortSelector.tsx
@@ -160,7 +160,7 @@ export function PortSelector({
           </button>
         </PopoverTrigger>
         <PopoverContent
-          className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+          className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950"
           style={{
             width: popoverWidth === "auto" ? width : popoverWidth,
           }}
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index 7c762117b..dada740b6 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -106,7 +106,7 @@ export function UserSelector({
       </PopoverTrigger>
       <PopoverContent
         hideWhenDetached={false}
-        className="w-full p-0 shadow-sm shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm dark:shadow-nb-gray-950"
         style={{
           width: width,
         }}
diff --git a/src/components/select/SelectDropdown.tsx b/src/components/select/SelectDropdown.tsx
index 3b23ffabf..a641db9e7 100644
--- a/src/components/select/SelectDropdown.tsx
+++ b/src/components/select/SelectDropdown.tsx
@@ -210,7 +210,7 @@ export function SelectDropdown({
       </PopoverTrigger>
       <PopoverContent
         className={cn(
-          "p-0 shadow-sm shadow-nb-gray-950 focus:outline-none",
+          "p-0 shadow-sm dark:shadow-nb-gray-950 focus:outline-none",
           popoverWidth !== "content" && "w-full",
         )}
         style={{
diff --git a/src/components/table/DataTableFilter.tsx b/src/components/table/DataTableFilter.tsx
index 940a7da86..92acea4cd 100644
--- a/src/components/table/DataTableFilter.tsx
+++ b/src/components/table/DataTableFilter.tsx
@@ -197,7 +197,7 @@ export function DataTableFilter<TData>({
       </PopoverTrigger>
       <PopoverContent
         hideWhenDetached={false}
-        className="w-full p-0 shadow-sm shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm dark:shadow-nb-gray-950"
         style={{
           width: "400px",
         }}
diff --git a/src/components/table/TableFilters.tsx b/src/components/table/TableFilters.tsx
index cb28b8c37..b0a77aee0 100644
--- a/src/components/table/TableFilters.tsx
+++ b/src/components/table/TableFilters.tsx
@@ -66,6 +66,7 @@ export function TableFiltersButton<TData>({
         <Button
           variant={"secondary"}
           disabled={disabled}
+          border={0}
           data-testid={"table-filters-button"}
         >
           <FilterIcon size={16} className={"shrink-0"} />
@@ -85,7 +86,7 @@ export function TableFiltersButton<TData>({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className={"w-[280px] p-0 shadow-sm shadow-nb-gray-950"}
+        className={"w-[280px] p-0 shadow-sm dark:shadow-nb-gray-950"}
         align={"start"}
         sideOffset={7}
       >
@@ -210,8 +211,8 @@ function FilterChip<TData>({ def, text, table }: FilterChipProps<TData>) {
     <Popover open={open} onOpenChange={setOpen}>
       <div
         className={cn(
-          "flex items-stretch h-8 rounded-md border border-nb-gray-900",
-          "bg-nb-gray-930/40 text-sm text-nb-gray-200 overflow-hidden",
+          "flex items-stretch h-8 rounded-md border border-nb-gray-800 dark:border-nb-gray-900",
+          "bg-white dark:bg-nb-gray-930/40 text-sm text-nb-gray-200 overflow-hidden",
           "hover:border-nb-gray-700 transition-colors",
         )}
       >
@@ -230,7 +231,7 @@ function FilterChip<TData>({ def, text, table }: FilterChipProps<TData>) {
           aria-label={`Remove ${def.label} filter`}
           className={cn(
             "flex items-center justify-center px-2",
-            "border-l border-nb-gray-900",
+            "border-l border-nb-gray-800 dark:border-nb-gray-900",
             "text-nb-gray-400 hover:bg-nb-gray-900 hover:text-nb-gray-100 transition-colors",
           )}
           onClick={(e) => {
@@ -243,7 +244,7 @@ function FilterChip<TData>({ def, text, table }: FilterChipProps<TData>) {
         </button>
       </div>
       <PopoverContent
-        className={"w-[280px] p-0 shadow-sm shadow-nb-gray-950"}
+        className={"w-[280px] p-0 shadow-sm dark:shadow-nb-gray-950"}
         align={"start"}
         sideOffset={6}
       >
diff --git a/src/modules/access-control/ssh/SSHUsernameSelector.tsx b/src/modules/access-control/ssh/SSHUsernameSelector.tsx
index 3b601e73c..83853d02f 100644
--- a/src/modules/access-control/ssh/SSHUsernameSelector.tsx
+++ b/src/modules/access-control/ssh/SSHUsernameSelector.tsx
@@ -116,7 +116,7 @@ export function SSHUsernameSelector({
           </button>
         </PopoverTrigger>
         <PopoverContent
-          className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+          className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950"
           style={{
             width: popoverWidth === "auto" ? width : popoverWidth,
           }}
diff --git a/src/modules/activity/ActivityEventCodeSelector.tsx b/src/modules/activity/ActivityEventCodeSelector.tsx
index f6c2c76d2..5bbd35339 100644
--- a/src/modules/activity/ActivityEventCodeSelector.tsx
+++ b/src/modules/activity/ActivityEventCodeSelector.tsx
@@ -92,7 +92,7 @@ export function ActivityEventCodeSelector({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}
diff --git a/src/modules/activity/UsersDropdownSelector.tsx b/src/modules/activity/UsersDropdownSelector.tsx
index 347f74f3a..341c0b577 100644
--- a/src/modules/activity/UsersDropdownSelector.tsx
+++ b/src/modules/activity/UsersDropdownSelector.tsx
@@ -153,7 +153,7 @@ export function UsersDropdownSelector({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950 min-w-[300px]"
+        className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950 min-w-[300px]"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}
diff --git a/src/modules/groups/GroupFilterSelector.tsx b/src/modules/groups/GroupFilterSelector.tsx
index 8b219f377..b34935f8a 100644
--- a/src/modules/groups/GroupFilterSelector.tsx
+++ b/src/modules/groups/GroupFilterSelector.tsx
@@ -77,7 +77,7 @@ export function GroupFilterSelector({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm  dark:shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}
diff --git a/src/modules/groups/SingleGroupSelector.tsx b/src/modules/groups/SingleGroupSelector.tsx
index c570a5964..75a35af05 100644
--- a/src/modules/groups/SingleGroupSelector.tsx
+++ b/src/modules/groups/SingleGroupSelector.tsx
@@ -60,7 +60,7 @@ export const SingleGroupSelector = ({
       </div>
       <PopoverContent
         hideWhenDetached={false}
-        className={cn("w-full p-0 m-0 shadow-sm shadow-nb-gray-950")}
+        className={cn("w-full p-0 m-0 shadow-sm dark:shadow-nb-gray-950")}
         style={{
           width: popoverWidth + "px",
         }}
diff --git a/src/modules/peers/PeerActionCell.tsx b/src/modules/peers/PeerActionCell.tsx
index 0d044fc70..b8ce95134 100644
--- a/src/modules/peers/PeerActionCell.tsx
+++ b/src/modules/peers/PeerActionCell.tsx
@@ -199,7 +199,7 @@ export default function PeerActionCell() {
             e.preventDefault();
           }}
         >
-          <Button variant={"secondary"} className={"!px-3"}>
+          <Button variant={"secondary"} className={"!px-3"} border={0}>
             <MoreVertical size={16} className={"shrink-0"} />
           </Button>
         </DropdownMenuTrigger>
diff --git a/src/modules/users/UserRoleSelector.tsx b/src/modules/users/UserRoleSelector.tsx
index 363fe8d83..552711f28 100644
--- a/src/modules/users/UserRoleSelector.tsx
+++ b/src/modules/users/UserRoleSelector.tsx
@@ -165,7 +165,7 @@ export function UserRoleSelector({
         )}
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm dark:shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}

From 6dd3dfa153fffe68cfb3a8329689bc71503b6d69 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 21:13:00 -0700
Subject: [PATCH 14/18] Modal footer tint, darker modal/input borders in light
 mode

---
 src/components/Input.tsx       | 6 +++---
 src/components/Textarea.tsx    | 4 ++--
 src/components/modal/Modal.tsx | 9 ++++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 204dd4beb..d5fa4de6c 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -26,7 +26,7 @@ const inputVariants = cva("", {
   variants: {
     variant: {
       default: [
-        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
+        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
       darker: [
@@ -34,13 +34,13 @@ const inputVariants = cva("", {
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
       error: [
-        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
+        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-red-500 text-red-500",
         "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
       ],
     },
     prefixSuffixVariant: {
       default: [
-        "dark:bg-nb-gray-900 border-neutral-200 dark:border-nb-gray-700 text-nb-gray-300",
+        "dark:bg-nb-gray-900 border-neutral-300 dark:border-nb-gray-700 text-nb-gray-300",
       ],
       error: [
         "dark:bg-nb-gray-900 border-red-500 text-nb-gray-300 text-red-500",
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 34ecf7745..942798015 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -17,11 +17,11 @@ const inputVariants = cva("", {
   variants: {
     variant: {
       default: [
-        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
+        "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
       darker: [
-        "dark:bg-nb-gray-900/40 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-900",
+        "dark:bg-nb-gray-900/40 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-900",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
       error: [
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 6329ee2a1..0497200e2 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -70,7 +70,7 @@ const ModalContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "mx-auto relative top-0 z-[52] grid w-full focus:outline-0 border border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:bg-nb-gray",
+            "mx-auto relative top-0 z-[52] grid w-full focus:outline-0 border border-nb-gray-700 dark:border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:bg-nb-gray",
             className,
             maxWidthClass,
           )}
@@ -135,7 +135,7 @@ const SidebarModalContent = React.forwardRef<
           <DialogPrimitive.Content
             ref={ref}
             className={cn(
-              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:bg-nb-gray",
+              "ml-auto mt-auto relative bottom-0 z-[52] grid w-full border border-nb-gray-700 dark:border-nb-gray-900 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 md:w-full dark:bg-nb-gray",
               "border-t-0 border-r-0 border-b-0 shadow-2xl",
               className,
               maxWidthClass,
@@ -179,8 +179,11 @@ const ModalFooter = ({
 }: React.HTMLAttributes<HTMLDivElement> & ModalFooterProps) => (
   <div
     className={cn(
-      "dark:border-nb-gray-800/70 border-nb-gray-900",
+      "dark:border-nb-gray-800/70 border-nb-gray-800",
       separator && "border-t",
+      // Tinted footer (light mode only): bleed over the modal's bottom
+      // padding so the band reaches the rounded bottom edge.
+      "bg-nb-gray dark:bg-transparent -mb-6 pb-6 sm:rounded-b-lg",
     )}
   >
     <div

From d90fe688f579d84a9979aebb6c51dfd289aa3028 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 21:20:27 -0700
Subject: [PATCH 15/18] clean up badge colors

---
 src/components/Badge.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 8ad461aff..6c4bb23dc 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -32,13 +32,21 @@ const variants = cva("", {
       yellow: [
         "bg-yellow-100 border-yellow-500 border text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400",
       ],
-      gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
-      lightGray: ["bg-nb-gray-910  text-nb-gray-200 border border-nb-gray-900"],
+      gray: [
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-930/60 dark:border-nb-gray-800/40",
+      ],
+      lightGray: [
+        "bg-white border-nb-gray-700 text-nb-gray-200 border",
+        "dark:bg-nb-gray-910 dark:border-nb-gray-900",
+      ],
       grayer: [
-        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-900/40 dark:border-nb-gray-800/40",
       ],
       "gray-ghost": [
-        "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-900 dark:border-nb-gray-800/50",
       ],
       green: [
         "bg-green-100 border-green-500 border text-green-700 dark:bg-green-950 dark:text-green-400",

From 67cd3ddf08bb09baba26da717498d404bcdb271f Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 21:27:08 -0700
Subject: [PATCH 16/18] Fix High-availability badge hover and Beta badge

---
 src/components/Badge.tsx         | 14 +++++++-------
 src/components/ui/SmallBadge.tsx | 13 ++++++++-----
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 6c4bb23dc..c33076fc8 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -62,17 +62,17 @@ const variants = cva("", {
     hover: {
       none: [],
       blue: ["hover:bg-sky-200"],
-      purple: ["hover:bg-purple-950/40"],
-      yellow: ["hover:bg-yellow-950/40"],
-      blueDark: ["hover:bg-sky-800"],
-      "blue-darker": ["hover:bg-sky-800"],
-      red: ["hover:bg-red-950/40"],
+      purple: ["hover:bg-purple-200 dark:hover:bg-purple-950/40"],
+      yellow: ["hover:bg-yellow-200 dark:hover:bg-yellow-950/40"],
+      blueDark: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      "blue-darker": ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      red: ["hover:bg-red-200 dark:hover:bg-red-950/40"],
       gray: ["hover:bg-nb-gray-900"],
       lightGray: ["hover:bg-nb-gray-900"],
       grayer: ["hover:bg-nb-gray-900"],
       "gray-ghost": ["hover:bg-nb-gray-800 cursor-pointer"],
-      green: ["hover:bg-green-950/50"],
-      netbird: ["hover:bg-netbird-950/50"],
+      green: ["hover:bg-green-200 dark:hover:bg-green-950/50"],
+      netbird: ["hover:bg-netbird-200 dark:hover:bg-netbird-950/50"],
     },
   },
 });
diff --git a/src/components/ui/SmallBadge.tsx b/src/components/ui/SmallBadge.tsx
index de7ec0196..f9fa1c6db 100644
--- a/src/components/ui/SmallBadge.tsx
+++ b/src/components/ui/SmallBadge.tsx
@@ -5,12 +5,15 @@ import * as React from "react";
 const smallBadgeVariants = cva("", {
   variants: {
     variant: {
-      green: "bg-green-900 border border-green-500/20 text-green-400",
-      blue: "bg-blue-900 border border-blue-500/20 text-blue-400",
+      green:
+        "bg-green-100 border border-green-300 text-green-700 dark:bg-green-900 dark:border-green-500/20 dark:text-green-400",
+      blue: "bg-blue-100 border border-blue-300 text-blue-700 dark:bg-blue-900 dark:border-blue-500/20 dark:text-blue-400",
       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",
+      sky: "bg-sky-100 border border-sky-300 text-sky-700 dark:bg-sky-900 dark:border-sky-500/20 dark:text-white",
+      netbird:
+        "bg-netbird-100 border border-netbird-400 text-netbird-700 dark:bg-netbird-900 dark:text-netbird-300",
+      yellow:
+        "bg-yellow-100 border border-yellow-400 text-yellow-700 dark:bg-yellow-900 dark:border-yellow-500/20 dark:text-yellow-400",
     },
     size: {
       default:

From f77d0dc48ef1281e00c464bf4671bad53b32e1b7 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Thu, 11 Jun 2026 21:32:20 -0700
Subject: [PATCH 17/18] Theme provider review fixes: leak guard, token colors,
 dev misuse error

---
 src/contexts/GlobalThemeProvider.tsx | 11 ++++++++---
 src/contexts/ThemeProvider.tsx       | 28 ++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/contexts/GlobalThemeProvider.tsx b/src/contexts/GlobalThemeProvider.tsx
index 450aa478c..a27dda2a3 100644
--- a/src/contexts/GlobalThemeProvider.tsx
+++ b/src/contexts/GlobalThemeProvider.tsx
@@ -14,7 +14,8 @@ const ThemeProvider = dynamic(
 /**
  * Wraps the skeleton loader theme so its colors follow the active theme.
  * Uses `resolvedTheme` so the "system" option resolves to the real OS value.
- * Defaults to the dark palette before mount to match the dark default theme.
+ * The palette is correct from the first render: ThemeProvider initializes
+ * `resolvedTheme` synchronously from storage / the system preference.
  */
 function ThemedSkeleton({ children }: { children: React.ReactNode }) {
   const { resolvedTheme } = useTheme();
@@ -22,8 +23,12 @@ function ThemedSkeleton({ children }: { children: React.ReactNode }) {
 
   return (
     <SkeletonTheme
-      baseColor={isLight ? "#edeff1" : "#25282d"}
-      highlightColor={isLight ? "#f8fafb" : "#33373e"}
+      baseColor={
+        isLight ? "rgb(var(--nb-gray-900))" : "rgb(var(--nb-gray-920))"
+      }
+      highlightColor={
+        isLight ? "rgb(var(--nb-gray-940))" : "rgb(var(--nb-gray-850))"
+      }
     >
       {children}
     </SkeletonTheme>
diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
index 38e34ef66..c785a1b10 100644
--- a/src/contexts/ThemeProvider.tsx
+++ b/src/contexts/ThemeProvider.tsx
@@ -13,11 +13,15 @@ type ThemeContextValue = {
 const STORAGE_KEY = "netbird-theme";
 const DEFAULT_THEME: Theme = "dark";
 
-const ThemeContext = React.createContext<ThemeContextValue>({
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+/* Production fallback when useTheme is called outside ThemeProvider —
+   in development the same misuse throws instead. */
+const FALLBACK_CONTEXT: ThemeContextValue = {
   theme: DEFAULT_THEME,
   resolvedTheme: "dark",
   setTheme: () => undefined,
-});
+};
 
 const getStoredTheme = (): Theme => {
   if (typeof window === "undefined") return DEFAULT_THEME;
@@ -49,9 +53,12 @@ const withTransitionsDisabled = (apply: () => void) => {
     ),
   );
   document.head.appendChild(style);
-  apply();
-  window.getComputedStyle(document.documentElement);
-  setTimeout(() => document.head.removeChild(style), 1);
+  try {
+    apply();
+  } finally {
+    window.getComputedStyle(document.documentElement);
+    setTimeout(() => style.remove(), 1);
+  }
 };
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
@@ -95,4 +102,13 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-export const useTheme = () => React.useContext(ThemeContext);
+export const useTheme = (): ThemeContextValue => {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return FALLBACK_CONTEXT;
+  }
+  return ctx;
+};

From a8275e54d589218262e8f81b72a6323f251d7908 Mon Sep 17 00:00:00 2001
From: Brandon Hopkins <brandon@techhut.tv>
Date: Fri, 12 Jun 2026 07:13:26 -0700
Subject: [PATCH 18/18] Audit timeline contrast fixes plus nameserver gradient
 inversion

---
 src/modules/activity/ActivityEntryRow.tsx               | 6 +++---
 src/modules/dns/nameservers/NameserverTemplateModal.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/activity/ActivityEntryRow.tsx b/src/modules/activity/ActivityEntryRow.tsx
index f9026d173..87a07cf5e 100644
--- a/src/modules/activity/ActivityEntryRow.tsx
+++ b/src/modules/activity/ActivityEntryRow.tsx
@@ -60,7 +60,7 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
 
       <div
         className={cn(
-          "w-10 h-10 shrink-0 relative rounded-full border-0 bg-nb-gray-900 border-nb-gray-800 flex items-center justify-center uppercase text-sm font-medium text-nb-gray-300",
+          "w-10 h-10 shrink-0 relative rounded-full border-0 bg-nb-gray-800 dark:bg-nb-gray-900 border-nb-gray-800 flex items-center justify-center uppercase text-sm font-medium text-nb-gray-300",
         )}
       >
         <ActivityTypeIcon code={event.activity_code} />
@@ -130,7 +130,7 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
 
         <Card
           className={
-            "w-full relative bg-nb-gray-925 text-sm text-nb-gray-300 flex flex-col px-4 pt-3 pb-3"
+            "w-full relative bg-white dark:bg-nb-gray-925 border-nb-gray-800 dark:border-nb-gray-900 text-sm text-nb-gray-300 flex flex-col px-4 pt-3 pb-3"
           }
         >
           <div className={"flex gap-4"}>
@@ -152,7 +152,7 @@ function VerticalLine() {
   return (
     <div
       className={
-        "absolute left-0 top-0 translate-y-12 h-[56%] bg-nb-gray-900/50 w-[2px] ml-[20px] z-0"
+        "absolute left-0 top-0 translate-y-12 h-[56%] bg-nb-gray-700 dark:bg-nb-gray-900/50 w-[2px] ml-[20px] z-0"
       }
     ></div>
   );
diff --git a/src/modules/dns/nameservers/NameserverTemplateModal.tsx b/src/modules/dns/nameservers/NameserverTemplateModal.tsx
index 2e7fedec4..3b189c147 100644
--- a/src/modules/dns/nameservers/NameserverTemplateModal.tsx
+++ b/src/modules/dns/nameservers/NameserverTemplateModal.tsx
@@ -142,7 +142,7 @@ function NameserverTemplate({
       <div
         className={cn(
           "w-1/4",
-          "bg-gradient-to-b h-full flex items-center justify-center from-white to-nb-gray-200 overflow-hidden p-4 border-r border-nb-gray-800",
+          "bg-gradient-to-b h-full flex items-center justify-center from-nb-gray-800 to-white dark:from-white dark:to-nb-gray-200 overflow-hidden p-4 border-r border-nb-gray-800",
         )}
       >
         {src && <Image src={src} alt={title} width={100} />}