Apply recent cloud changes (#447)

* Add resource description, add single resource for acl, add icons for group badges, add inactivity expiration

* Add extra dns labels, remove routing restriction

.github/workflows/build_and_push.yml

@@ -2,6 +2,7 @@ name: build and push
 on:
   push:
     branches:
+      - "feature/**"
       - main
     tags:
       - "**"

.github/workflows/codespell.yml

@@ -12,4 +12,5 @@ jobs:
         uses: codespell-project/actions-codespell@v2
         with:
           only_warn: 1
-          skip: package-lock.json,*.svg
+          skip: package-lock.json,*.svg
+          ignore_words_list: mappin, allTime

docker/default.conf

@@ -1,4 +1,3 @@
-# simple server configuration to replace nginx's default
 server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
@@ -7,10 +6,14 @@ server {
 
     location / {
       try_files $uri $uri.html $uri/ =404;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 
    error_page 404 /404.html;
    location = /404.html {
       internal;
+      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+      expires off;
    }
 }

next.config.js

@@ -5,6 +5,9 @@ const nextConfig = {
     unoptimized: true,
   },
   reactStrictMode: false,
+  env: {
+    APP_ENV: process.env.APP_ENV || "production",
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -13,17 +13,19 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^5.14.0",
+    "@axa-fr/react-oidc": "^7.22.18",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.1.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -32,14 +34,17 @@
     "@tabler/icons-react": "^2.39.0",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
+    "@types/crypto-js": "^4.2.2",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-window": "^1.8.8",
     "autoprefixer": "^10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "crypto-js": "^4.2.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "eslint": "^8",
@@ -51,8 +56,8 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
-    "next": "13.5.5",
+    "lucide-react": "^0.460.0",
+    "next": "13.5.7",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18",
@@ -65,13 +70,14 @@
     "react-jwt": "^1.2.0",
     "react-loading-skeleton": "^3.3.1",
     "react-responsive": "^9.0.2",
+    "react-virtuoso": "^4.9.0",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   },
   "devDependencies": {
-    "cypress": "^13.3.3",
+    "cypress": "^13.13.0",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -20,6 +21,9 @@ const AccessControlTable = lazy(
 export default function AccessControlPage() {
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <GroupsProvider>
@@ -31,12 +35,7 @@ export default function AccessControlPage() {
               icon={<AccessControlIcon size={14} />}
             />
           </Breadcrumbs>
-
-          <h1>
-            {policies && policies.length > 1
-              ? `${policies.length} Access Control Policies`
-              : "Access Control Policies"}
-          </h1>
+          <h1 ref={headingRef}>Access Control Policies</h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers
             can connect.
@@ -57,7 +56,11 @@ export default function AccessControlPage() {
         <RestrictedAccess page={"Access Control"}>
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
-              <AccessControlTable isLoading={isLoading} policies={policies} />
+              <AccessControlTable
+                isLoading={isLoading}
+                policies={policies}
+                headingTarget={portalTarget}
+              />
             </Suspense>
           </PoliciesProvider>
         </RestrictedAccess>

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

@@ -4,19 +4,21 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
-import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 import PageContainer from "@/layouts/PageContainer";
 import ActivityTable from "@/modules/activity/ActivityTable";
-import { EventStreamingCard } from "@/modules/integrations/event-streaming/EventStreamingCard";
 
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -27,11 +29,7 @@ export default function Activity() {
             icon={<ActivityIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {events && events.length > 1
-            ? `${events.length} Activity Events`
-            : "Activity Events"}
-        </h1>
+        <h1 ref={headingRef}>Activity Events</h1>
         <Paragraph>
           Here you can see all the account and network activity events.
         </Paragraph>
@@ -50,8 +48,11 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        {(isLocalDev() || isNetBirdHosted()) && <EventStreamingCard />}
-        <ActivityTable events={events} isLoading={isLoading} />
+        <ActivityTable
+          events={events}
+          isLoading={isLoading}
+          headingTarget={portalTarget}
+        />
       </RestrictedAccess>
     </PageContainer>
   );

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ServerIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -20,6 +21,9 @@ export default function NameServers() {
   const { data: nameserverGroups, isLoading } =
     useFetchApi<NameserverGroup[]>("/dns/nameservers");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -36,11 +40,7 @@ export default function NameServers() {
             icon={<ServerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {nameserverGroups && nameserverGroups.length > 1
-            ? `${nameserverGroups.length} Nameservers`
-            : "Nameservers"}
-        </h1>
+        <h1 ref={headingRef}>Nameservers</h1>
         <Paragraph>
           Add nameservers for domain name resolution in your NetBird network.
         </Paragraph>
@@ -62,6 +62,7 @@ export default function NameServers() {
           <NameserverGroupTable
             nameserverGroups={nameserverGroups}
             isLoading={isLoading}
+            headingTarget={portalTarget}
           />
         </Suspense>
       </RestrictedAccess>

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

@@ -14,17 +14,24 @@ import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { Group } from "@/interfaces/Group";
 import { NameserverSettings } from "@/interfaces/NameserverSettings";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 
 export default function NameServerSettings() {
   const { data: settings, isLoading } =
     useFetchApi<NameserverSettings>("/dns/settings");
 
+  const initialDNSGroups = useGroupIdsToGroups(
+    settings?.disabled_management_groups,
+  );
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -55,10 +62,16 @@ export default function NameServerSettings() {
           in our documentation.
         </Paragraph>
         <RestrictedAccess page={"DNS Settings"}>
-          {!isLoading && (
-            <SettingDisabledManagementGroups
-              initial={settings?.disabled_management_groups}
-            />
+          {!isLoading && initialDNSGroups !== undefined ? (
+            <SettingDisabledManagementGroups initialGroups={initialDNSGroups} />
+          ) : (
+            <div>
+              <Skeleton
+                width={"100%"}
+                className={"mt-8 max-w-xl"}
+                height={240}
+              />
+            </div>
           )}
         </RestrictedAccess>
       </div>
@@ -67,16 +80,16 @@ export default function NameServerSettings() {
 }
 
 const SettingDisabledManagementGroups = ({
-  initial,
+  initialGroups,
 }: {
-  initial: string[] | undefined;
+  initialGroups: Group[];
 }) => {
   const settingRequest = useApiCall<NameserverSettings>("/dns/settings");
   const { mutate } = useSWRConfig();
 
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
-      initial: initial || [],
+      initial: initialGroups,
     });
 
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
@@ -108,6 +121,7 @@ const SettingDisabledManagementGroups = ({
           Peers in these groups will require manual domain name resolution
         </HelpText>
         <PeerGroupSelector
+          dataCy={"dns-groups-selector"}
           onChange={setSelectedGroups}
           values={selectedGroups}
         />
@@ -122,6 +136,7 @@ const SettingDisabledManagementGroups = ({
           size={"sm"}
           onClick={saveSettings}
           disabled={!hasChanges}
+          data-cy={"save-changes"}
         >
           Save Changes
         </Button>

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

@@ -1,39 +0,0 @@
-"use client";
-
-import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { VerticalTabs } from "@components/VerticalTabs";
-import { FileText, FingerprintIcon } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import React, { useState } from "react";
-import PageContainer from "@/layouts/PageContainer";
-import EventStreamingTab from "@/modules/integrations/event-streaming/EventStreamingTab";
-import IdentityProviderTab from "@/modules/integrations/idp-sync/IdentityProviderTab";
-
-export default function Integrations() {
-  const searchParams = useSearchParams();
-  const currentTab = searchParams.get("tab");
-  const [tab, setTab] = useState(currentTab || "event-streaming");
-
-  return (
-    <PageContainer>
-      <VerticalTabs value={tab} onChange={setTab}>
-        <VerticalTabs.List>
-          <VerticalTabs.Trigger value="event-streaming">
-            <FileText size={14} />
-            Event Streaming
-          </VerticalTabs.Trigger>
-          <VerticalTabs.Trigger value="identity-provider">
-            <FingerprintIcon size={14} />
-            Identity Provider
-          </VerticalTabs.Trigger>
-        </VerticalTabs.List>
-        <RestrictedAccess page={"Integrations"}>
-          <div className={"border-l border-nb-gray-930 w-full"}>
-            <EventStreamingTab />
-            <IdentityProviderTab />
-          </div>
-        </RestrictedAccess>
-      </VerticalTabs>
-    </PageContainer>
-  );
-}

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

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -23,6 +24,9 @@ export default function NetworkRoutes() {
   const { data: routes, isLoading } = useFetchApi<Route[]>("/routes");
   const groupedRoutes = useGroupedRoutes({ routes });
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <RoutesProvider>
@@ -35,11 +39,7 @@ export default function NetworkRoutes() {
                 icon={<NetworkRoutesIcon size={13} />}
               />
             </Breadcrumbs>
-            <h1>
-              {groupedRoutes && groupedRoutes.length > 1
-                ? `${groupedRoutes.length} Network Routes`
-                : "Network Routes"}
-            </h1>
+            <h1 ref={headingRef}>Network Routes</h1>
             <Paragraph>
               Network routes allow you to access other networks like LANs and
               VPCs without installing NetBird on every resource.
@@ -65,6 +65,7 @@ export default function NetworkRoutes() {
                 isLoading={isLoading}
                 groupedRoutes={groupedRoutes}
                 routes={routes}
+                headingTarget={portalTarget}
               />
             </Suspense>
           </RestrictedAccess>

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

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

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

@@ -0,0 +1,229 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import Card from "@components/Card";
+import FullTooltip from "@components/FullTooltip";
+import InlineLink from "@components/InlineLink";
+import Separator from "@components/Separator";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import useRedirect from "@hooks/useRedirect";
+import useFetchApi from "@utils/api";
+import { cn } from "@utils/helpers";
+import {
+  ArrowUpRightIcon,
+  HelpCircle,
+  PencilLineIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+  ShieldXIcon,
+} from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+import { Network } from "@/interfaces/Network";
+import PageContainer from "@/layouts/PageContainer";
+import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
+import NetworkModal from "@/modules/networks/NetworkModal";
+import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
+import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
+
+export default function NetworkDetailPage() {
+  const queryParameter = useSearchParams();
+  const networkId = queryParameter.get("id");
+  const { data: network, isLoading } = useFetchApi<Network>(
+    `/networks/${networkId}`,
+    true,
+  );
+
+  useRedirect("/networks", false, !networkId);
+
+  return network && !isLoading ? (
+    <NetworkOverview network={network} />
+  ) : (
+    <FullScreenLoading />
+  );
+}
+
+function NetworkOverview({ network }: Readonly<{ network: Network }>) {
+  const { isUser } = useLoggedInUser();
+  const [networkModal, setNetworkModal] = useState(false);
+  const { mutate } = useSWRConfig();
+
+  const isActive = !!(
+    network?.routing_peers_count && network.routing_peers_count > 0
+  );
+
+  return (
+    <PageContainer>
+      <NetworkProvider network={network}>
+        <div className={"p-default py-6 mb-4"}>
+          <Breadcrumbs>
+            <Breadcrumbs.Item
+              href={"/networks"}
+              label={"Networks"}
+              disabled={isUser}
+              icon={<NetworkRoutesIcon size={13} />}
+            />
+            <Breadcrumbs.Item
+              href={"/network"}
+              label={network.name}
+              active={true}
+            />
+          </Breadcrumbs>
+
+          <div className={"flex justify-between max-w-6xl"}>
+            <div
+              className={cn(
+                "flex items-center",
+                !network.description && "gap-2",
+              )}
+            >
+              <NetworkInformationSquare
+                name={network.name}
+                active={isActive}
+                size={"lg"}
+                description={network.description}
+              />
+              <button
+                className={
+                  "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                }
+                onClick={() => setNetworkModal(true)}
+              >
+                <PencilLineIcon size={18} />
+              </button>
+              <NetworkModal
+                open={networkModal}
+                setOpen={setNetworkModal}
+                onUpdated={() => {
+                  mutate(`/networks/${network.id}`);
+                }}
+                network={network}
+              />
+            </div>
+          </div>
+
+          <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
+            <NetworkInformationCard network={network} />
+          </div>
+        </div>
+
+        <Separator />
+        <ResourcesSection network={network} />
+        <div className={"h-3"} />
+        <Separator />
+        <NetworkRoutingPeersSection network={network} />
+      </NetworkProvider>
+    </PageContainer>
+  );
+}
+
+function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
+  const isHighlyAvailable = !!(
+    network?.routing_peers_count && network?.routing_peers_count >= 2
+  );
+
+  const disabledText = useMemo(
+    () => (
+      <>
+        High availability is currently{" "}
+        <span className={"text-yellow-400 font-medium"}>inactive</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const enabledText = useMemo(
+    () => (
+      <>
+        High availability is{" "}
+        <span className={"text-green-500 font-medium"}>active</span> for this
+        network.
+      </>
+    ),
+    [],
+  );
+
+  const policyCount = network.policies?.length ?? 0;
+
+  return (
+    <Card>
+      <Card.List>
+        <Card.ListItem
+          tooltip={false}
+          label={
+            <>
+              <ServerIcon size={16} />
+              High Availability
+            </>
+          }
+          value={
+            <FullTooltip
+              interactive={false}
+              content={
+                <div className={"max-w-xs text-xs"}>
+                  {isHighlyAvailable ? enabledText : disabledText}
+                  {isHighlyAvailable ? (
+                    <div className={"inline-flex mt-2"}>
+                      You can add more routing peers to increase the
+                      availability of this network.
+                    </div>
+                  ) : (
+                    <div className={"inline-flex mt-2"}>
+                      Go ahead and add more routing peers or groups with routing
+                      peers to enable high availability for this network.
+                    </div>
+                  )}
+                </div>
+              }
+            >
+              <div
+                className={cn(
+                  "flex gap-2.5 items-center text-nb-gray-300 text-sm cursor-help",
+                )}
+              >
+                <span
+                  className={cn(
+                    "h-2 w-2 rounded-full",
+                    !isHighlyAvailable ? "bg-yellow-400" : "bg-green-500",
+                  )}
+                ></span>
+                {isHighlyAvailable ? "Active" : "Inactive"}
+                <HelpCircle size={12} />
+              </div>
+            </FullTooltip>
+          }
+        />
+        <Card.ListItem
+          tooltip={false}
+          label={
+            policyCount > 0 ? (
+              <>
+                <ShieldCheckIcon size={16} className={"text-green-500"} />
+                {policyCount}{" "}
+                {policyCount === 1 ? "Active Policy" : "Active Policies"}
+              </>
+            ) : (
+              <>
+                <ShieldXIcon size={16} className={"text-red-500"} />
+                No Active Policies
+              </>
+            )
+          }
+          value={
+            policyCount > 0 ? (
+              <InlineLink href={"/access-control"}>
+                Go to Policies
+                <ArrowUpRightIcon size={14} />
+              </InlineLink>
+            ) : null
+          }
+        />
+      </Card.List>
+    </Card>
+  );
+}

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

@@ -3,6 +3,6 @@ import type { Metadata } from "next";
 import BlankLayout from "@/layouts/BlankLayout";
 
 export const metadata: Metadata = {
-  title: `Integrations - ${globalMetaTitle}`,
+  title: `Networks - ${globalMetaTitle}`,
 };
 export default BlankLayout;

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

@@ -0,0 +1,61 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { Suspense } from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { Network } from "@/interfaces/Network";
+import PageContainer from "@/layouts/PageContainer";
+import NetworksTable from "@/modules/networks/table/NetworksTable";
+
+export default function Networks() {
+  const { data: networks, isLoading } = useFetchApi<Network[]>("/networks");
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/networks"}
+            label={"Networks"}
+            icon={<NetworkRoutesIcon size={13} />}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Networks</h1>
+        <Paragraph>
+          Networks allow you to access internal resources in LANs and VPCs without
+          installing NetBird on every machine.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/networks"}
+            target={"_blank"}
+          >
+            Networks
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+
+      <RestrictedAccess>
+        <Suspense fallback={<SkeletonTable />}>
+          <NetworksTable
+            data={networks}
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+          />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

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

@@ -23,44 +23,63 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
+import useRedirect from "@hooks/useRedirect";
 import useFetchApi from "@utils/api";
+import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
-import { trim } from "lodash";
+import { isEmpty, trim } from "lodash";
 import {
+  Barcode,
   Cpu,
+  FlagIcon,
   Globe,
   History,
+  LockIcon,
   MapPin,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   PencilIcon,
   TerminalSquare,
+  TimerResetIcon,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
+import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
-import { getOperatingSystem } from "@/hooks/useOperatingSystem";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
-import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
+import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
+import { PeerExpirationToggle } from "@/modules/peer/PeerExpirationToggle";
+import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
   const peerId = queryParameter.get("id");
-  const { data: peer } = useFetchApi<Peer>("/peers/" + peerId);
-  return peer ? (
-    <PeerProvider peer={peer}>
-      <PeerOverview />
+  const { data: peer, isLoading } = useFetchApi<Peer>("/peers/" + peerId, true);
+
+  useRedirect("/peers", false, !peerId);
+
+  const peerKey = useMemo(() => {
+    let id = peer?.id ?? "";
+    let ssh = peer?.ssh_enabled ? "1" : "0";
+    let expiration = peer?.login_expiration_enabled ? "1" : "0";
+    return `${id}-${ssh}-${expiration}`;
+  }, [peer]);
+
+  return peer && !isLoading ? (
+    <PeerProvider peer={peer} key={peerId}>
+      <PeerOverview key={peerKey} />
     </PeerProvider>
   ) : (
     <FullScreenLoading />
@@ -77,20 +96,15 @@ function PeerOverview() {
   const [loginExpiration, setLoginExpiration] = useState(
     peer.login_expiration_enabled,
   );
+  const [inactivityExpiration, setInactivityExpiration] = useState(
+    peer.inactivity_expiration_enabled,
+  );
   const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
     useGroupHelper({
       initial: peerGroups,
       peer,
     });
 
-  /**
-   * Check the operating system of the peer, if it is linux, then show the routes table, otherwise hide it.
-   */
-  const isLinux = useMemo(() => {
-    const operatingSystem = getOperatingSystem(peer.os);
-    return operatingSystem == OperatingSystem.LINUX;
-  }, [peer.os]);
-
   /**
    * Detect if there are changes in the peer information, if there are changes, then enable the save button.
    */
@@ -99,10 +113,16 @@ function PeerOverview() {
     ssh,
     selectedGroups,
     loginExpiration,
+    inactivityExpiration,
   ]);
 
   const updatePeer = async () => {
-    const updateRequest = update(name, ssh, loginExpiration);
+    const updateRequest = update({
+      name,
+      ssh,
+      loginExpiration,
+      inactivityExpiration,
+    });
     const groupCalls = getAllGroupCalls();
     const batchCall = groupCalls
       ? [...groupCalls, updateRequest]
@@ -113,12 +133,20 @@ function PeerOverview() {
       promise: Promise.all(batchCall).then(() => {
         mutate("/peers/" + peer.id);
         mutate("/groups");
-        updateHasChangedRef([name, ssh, selectedGroups, loginExpiration]);
+        updateHasChangedRef([
+          name,
+          ssh,
+          selectedGroups,
+          loginExpiration,
+          inactivityExpiration,
+        ]);
       }),
       loadingMessage: "Saving the peer...",
     });
   };
 
+  const { isUser, isOwnerOrAdmin } = useLoggedInUser();
+
   return (
     <PageContainer>
       <RoutesProvider>
@@ -139,33 +167,35 @@ function PeerOverview() {
                   <CircleIcon
                     active={peer.connected}
                     size={12}
-                    className={"mb-[3px]"}
+                    className={"mb-[3px] shrink-0"}
                   />
                   <TextWithTooltip text={name} maxChars={30} />
 
-                  <Modal
-                    open={showEditNameModal}
-                    onOpenChange={setShowEditNameModal}
-                  >
-                    <ModalTrigger>
-                      <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"
-                        }
-                      >
-                        <PencilIcon size={16} />
-                      </div>
-                    </ModalTrigger>
-                    <EditNameModal
-                      onSuccess={(newName) => {
-                        setName(newName);
-                        setShowEditNameModal(false);
-                      }}
-                      peer={peer}
-                      initialName={name}
-                      key={showEditNameModal ? 1 : 0}
-                    />
-                  </Modal>
+                  {!isUser && (
+                    <Modal
+                      open={showEditNameModal}
+                      onOpenChange={setShowEditNameModal}
+                    >
+                      <ModalTrigger>
+                        <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"
+                          }
+                        >
+                          <PencilIcon size={16} />
+                        </div>
+                      </ModalTrigger>
+                      <EditNameModal
+                        onSuccess={(newName) => {
+                          setName(newName);
+                          setShowEditNameModal(false);
+                        }}
+                        peer={peer}
+                        initialName={name}
+                        key={showEditNameModal ? 1 : 0}
+                      />
+                    </Modal>
+                  )}
                 </h1>
                 <LoginExpiredBadge loginExpired={peer.login_expired} />
               </div>
@@ -187,7 +217,7 @@ function PeerOverview() {
                 variant={"primary"}
                 className={"w-full"}
                 onClick={() => updatePeer()}
-                disabled={!hasChanges}
+                disabled={!hasChanges || isUser}
               >
                 Save Changes
               </Button>
@@ -197,7 +227,43 @@ function PeerOverview() {
           <div className={"flex gap-10 w-full mt-5 max-w-6xl"}>
             <PeerInformationCard peer={peer} />
 
-            <div className={"flex flex-col gap-6 w-1/2"}>
+            <div className={"flex flex-col gap-6 w-1/2 transition-all"}>
+              <div>
+                <PeerExpirationToggle
+                  peer={peer}
+                  value={loginExpiration}
+                  icon={<TimerResetIcon size={16} />}
+                  onChange={(state) => {
+                    setLoginExpiration(state);
+                    !state && setInactivityExpiration(false);
+                  }}
+                />
+                {isOwnerOrAdmin && !!peer?.user_id && (
+                  <div
+                    className={cn(
+                      "border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
+                      !loginExpiration
+                        ? "opacity-50 pointer-events-none"
+                        : "bg-nb-gray-930/80",
+                    )}
+                  >
+                    <PeerExpirationToggle
+                      peer={peer}
+                      variant={"blank"}
+                      value={inactivityExpiration}
+                      onChange={setInactivityExpiration}
+                      title={"Require login after disconnect"}
+                      description={
+                        "Enable to require authentication after users disconnect from management for 10 minutes."
+                      }
+                      className={
+                        !loginExpiration ? "opacity-40 pointer-events-none" : ""
+                      }
+                    />
+                  </div>
+                )}
+              </div>
+
               <FullTooltip
                 content={
                   <div
@@ -205,96 +271,87 @@ function PeerOverview() {
                       "flex gap-2 items-center !text-nb-gray-300 text-xs"
                     }
                   >
-                    <IconInfoCircle size={14} />
+                    <LockIcon size={14} />
                     <span>
-                      Login expiration is disabled for all peers added with an
-                      setup-key.
+                      {`You don't have the required permissions to update this
+                          setting.`}
                     </span>
                   </div>
                 }
+                interactive={false}
                 className={"w-full block"}
-                disabled={!!peer.user_id}
+                disabled={!isUser}
               >
                 <FancyToggleSwitch
-                  disabled={!peer.user_id}
-                  value={loginExpiration}
-                  onChange={setLoginExpiration}
+                  value={ssh}
+                  disabled={isUser}
+                  onChange={(set) =>
+                    !set
+                      ? setSsh(false)
+                      : openSSHDialog().then((confirm) => setSsh(confirm))
+                  }
                   label={
                     <>
-                      <IconCloudLock size={16} />
-                      Login Expiration
+                      <TerminalSquare size={16} />
+                      SSH Access
                     </>
                   }
                   helpText={
-                    "Enable to require SSO login peers to re-authenticate when their login expires."
+                    "Enable the SSH server on this peer to access the machine via an secure shell."
                   }
                 />
               </FullTooltip>
-              <FancyToggleSwitch
-                value={ssh}
-                onChange={(set) =>
-                  !set
-                    ? setSsh(false)
-                    : openSSHDialog().then((confirm) => setSsh(confirm))
-                }
-                label={
-                  <>
-                    <TerminalSquare size={16} />
-                    SSH Access
-                  </>
-                }
-                helpText={
-                  "Enable the SSH server on this peer to access the machine via an secure shell."
-                }
-              />
-              <div>
-                <Label>Assigned Groups</Label>
-                <HelpText>
-                  Use groups to control what this peer can access.
-                </HelpText>
-                <PeerGroupSelector
-                  onChange={setSelectedGroups}
-                  values={selectedGroups}
-                  peer={peer}
-                />
-              </div>
+
+              {!isUser && (
+                <div>
+                  <Label>Assigned Groups</Label>
+                  <HelpText>
+                    Use groups to control what this peer can access.
+                  </HelpText>
+                  <PeerGroupSelector
+                    disabled={isUser}
+                    onChange={setSelectedGroups}
+                    values={selectedGroups}
+                    hideAllGroup={true}
+                    peer={peer}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>
 
-        <Separator />
-
-        {isLinux ? (
-          <div className={"px-8 py-6"}>
-            <div className={"max-w-6xl"}>
-              <div className={"flex justify-between items-center"}>
-                <div>
-                  <h2>Network Routes</h2>
-                  <Paragraph>
-                    Access other networks without installing NetBird on every
-                    resource.
-                  </Paragraph>
-                </div>
-                <div className={"inline-flex gap-4 justify-end"}>
-                  <div>
-                    <AddRouteDropdownButton />
-                  </div>
-                </div>
-              </div>
-              <PeerRoutesTable peer={peer} />
-            </div>
-          </div>
+        {!isUser ? (
+          <>
+            <Separator />
+            <PeerNetworkRoutesSection peer={peer} />
+          </>
         ) : null}
+
+        {peer?.id && (
+          <>
+            <Separator />
+            <AccessiblePeersSection peerID={peer.id} />
+          </>
+        )}
       </RoutesProvider>
     </PageContainer>
   );
 }
 
-function PeerInformationCard({ peer }: { peer: Peer }) {
+function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
+  const { isLoading, getRegionByPeer } = useCountries();
+
+  const countryText = useMemo(() => {
+    return getRegionByPeer(peer);
+  }, [getRegionByPeer, peer]);
+
   return (
     <Card>
       <Card.List>
         <Card.ListItem
+          copy
+          copyText={"NetBird IP-Address"}
           label={
             <>
               <MapPin size={16} />
@@ -305,15 +362,38 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
         />
 
         <Card.ListItem
+          copy
+          copyText={"Public IP-Address"}
+          label={
+            <>
+              <NetworkIcon size={16} />
+              Public IP-Address
+            </>
+          }
+          value={peer.connection_ip}
+        />
+
+        <Card.ListItem
+          copy
+          copyText={"DNS label"}
           label={
             <>
               <Globe size={16} />
               Domain Name
             </>
           }
+          className={
+            peer?.extra_dns_labels && peer.extra_dns_labels.length > 0
+              ? "items-start"
+              : ""
+          }
           value={peer.dns_label}
+          extraText={peer?.extra_dns_labels}
         />
+
         <Card.ListItem
+          copy
+          copyText={"Hostname"}
           label={
             <>
               <MonitorSmartphoneIcon size={16} />
@@ -322,6 +402,35 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.hostname}
         />
+
+        <Card.ListItem
+          label={
+            <>
+              <FlagIcon size={16} />
+              Region
+            </>
+          }
+          tooltip={false}
+          value={
+            isEmpty(peer.country_code) ? (
+              "Unknown"
+            ) : (
+              <>
+                {isLoading ? (
+                  <Skeleton width={140} />
+                ) : (
+                  <div className={"flex gap-2 items-center"}>
+                    <div className={"border-0 border-nb-gray-800 rounded-full"}>
+                      <RoundedFlag country={peer.country_code} size={12} />
+                    </div>
+                    {countryText}
+                  </div>
+                )}
+              </>
+            )
+          }
+        />
+
         <Card.ListItem
           label={
             <>
@@ -331,6 +440,19 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.os}
         />
+
+        {peer.serial_number && peer.serial_number !== "" && (
+          <Card.ListItem
+            label={
+              <>
+                <Barcode size={16} />
+                Serial Number
+              </>
+            }
+            value={peer.serial_number}
+          />
+        )}
+
         <Card.ListItem
           label={
             <>
@@ -347,6 +469,7 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
                 ")"
           }
         />
+
         <Card.ListItem
           label={
             <>
@@ -376,7 +499,7 @@ interface ModalProps {
   peer: Peer;
   initialName: string;
 }
-function EditNameModal({ onSuccess, peer, initialName }: ModalProps) {
+function EditNameModal({ onSuccess, peer, initialName }: Readonly<ModalProps>) {
   const [name, setName] = useState(initialName);
 
   const isDisabled = useMemo(() => {

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

@@ -4,19 +4,38 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
-import useFetchApi from "@utils/api";
+import { usePortalElement } from "@hooks/usePortalElement";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useUsers } from "@/contexts/UsersProvider";
-import { Peer } from "@/interfaces/Peer";
+import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
+import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
+import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
 
 const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
 
 export default function Peers() {
-  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
+  const { permission } = useLoggedInUser();
+
+  return (
+    <PageContainer>
+      {permission.dashboard_view === "blocked" ? (
+        <PeersBlockedView />
+      ) : (
+        <PeersProvider>
+          <PeersView />
+        </PeersProvider>
+      )}
+    </PageContainer>
+  );
+}
+
+function PeersView() {
+  const { peers, isLoading } = usePeers();
   const { users } = useUsers();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -27,7 +46,7 @@ export default function Peers() {
   });
 
   return (
-    <PageContainer>
+    <>
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
@@ -36,7 +55,7 @@ export default function Peers() {
             icon={<PeerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>{peers && peers.length > 1 ? `${peers.length} Peers` : "Peers"}</h1>
+        <h1 ref={headingRef}>Peers</h1>
         <Paragraph>
           A list of all machines and devices connected to your private network.
           Use this view to manage peers.
@@ -54,8 +73,43 @@ export default function Peers() {
         </Paragraph>
       </div>
       <Suspense fallback={<SkeletonTable />}>
-        <PeersTable isLoading={isLoading} peers={peersWithUser} />
+        <PeersTable
+          isLoading={isLoading}
+          peers={peersWithUser}
+          headingTarget={portalTarget}
+        />
       </Suspense>
-    </PageContainer>
+    </>
+  );
+}
+
+function PeersBlockedView() {
+  return (
+    <div className={"flex items-center justify-center flex-col"}>
+      <div className={"p-default py-6 max-w-3xl text-center"}>
+        <h1>Add new device to your network</h1>
+        <Paragraph className={"inline"}>
+          To get started, install NetBird and log in using your email account.
+          After that you should be connected. If you have further questions
+          check out our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started#installation"}
+            target={"_blank"}
+          >
+            Installation Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
+        <div
+          className={
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+          }
+        >
+          <SetupModalContent header={false} footer={false} />
+        </div>
+      </div>
+    </div>
   );
 }

src/app/(dashboard)/posture-checks/page.tsx

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ShieldCheck } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -21,6 +22,9 @@ export default function PostureChecksPage() {
   const { data: postureChecks, isLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <GroupsProvider>
@@ -38,17 +42,16 @@ export default function PostureChecksPage() {
               icon={<ShieldCheck size={15} />}
             />
           </Breadcrumbs>
-          <h1>
-            {postureChecks && postureChecks.length > 1
-              ? `${postureChecks.length} Posture Checks`
-              : "Posture Checks"}
-          </h1>
+          <h1 ref={headingRef}>Posture Checks</h1>
           <Paragraph>
             Use posture checks to further restrict access in your network.
           </Paragraph>
           <Paragraph>
             Learn more about
-            <InlineLink href={"#"} target={"_blank"}>
+            <InlineLink
+              href={"https://docs.netbird.io/how-to/manage-posture-checks"}
+              target={"_blank"}
+            >
               Posture Checks
               <ExternalLinkIcon size={12} />
             </InlineLink>
@@ -60,6 +63,7 @@ export default function PostureChecksPage() {
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
               <PostureCheckTable
+                headingTarget={portalTarget}
                 isLoading={isLoading}
                 postureChecks={postureChecks}
               />

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

@@ -2,20 +2,37 @@
 
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
-import { AlertOctagonIcon, FolderGit2Icon, ShieldIcon } from "lucide-react";
-import React, { useState } from "react";
+import {
+  AlertOctagonIcon,
+  FolderGit2Icon,
+  LockIcon,
+  NetworkIcon,
+  ShieldIcon,
+} from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
+import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
+import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
-  const [tab, setTab] = useState("authentication");
+  const queryParams = useSearchParams();
+  const queryTab = queryParams.get("tab");
+  const [tab, setTab] = useState(queryTab || "authentication");
   const { isOwner } = useLoggedInUser();
   const account = useAccount();
 
+  useEffect(() => {
+    if (queryTab) {
+      setTab(queryTab);
+    }
+  }, [queryTab]);
+
   return (
     <PageContainer>
       <VerticalTabs value={tab} onChange={setTab}>
@@ -28,6 +45,14 @@ export default function NetBirdSettings() {
             <FolderGit2Icon size={14} />
             Groups
           </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="permissions">
+            <LockIcon size={14} />
+            Permissions
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="networks">
+            <NetworkIcon size={14} />
+            Networks
+          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -36,7 +61,9 @@ export default function NetBirdSettings() {
         <RestrictedAccess page={"Settings"}>
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
+            {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
+            {account && <NetworkSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>

src/app/(dashboard)/setup-keys/page.tsx

@@ -5,9 +5,10 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useMemo } from "react";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { Group } from "@/interfaces/Group";
@@ -22,16 +23,24 @@ export default function SetupKeys() {
   const { data: setupKeys, isLoading } = useFetchApi<SetupKey[]>("/setup-keys");
   const { groups } = useGroups();
 
-  const setupKeysWithGroups = setupKeys?.map((setupKey) => {
-    if (!setupKey.auto_groups) return setupKey;
-    if (!groups) return setupKey;
-    return {
-      ...setupKey,
-      groups: setupKey.auto_groups.map((group) => {
-        return groups.find((g) => g.id === group) || undefined;
-      }) as Group[] | undefined,
-    };
-  });
+  const setupKeysWithGroups = useMemo(() => {
+    if (!setupKeys) return [];
+    return setupKeys?.map((setupKey) => {
+      if (!setupKey.auto_groups) return setupKey;
+      if (!groups) return setupKey;
+      return {
+        ...setupKey,
+        groups: setupKey.auto_groups
+          ?.map((group) => {
+            return groups.find((g) => g.id === group) || undefined;
+          })
+          .filter((group) => group !== undefined) as Group[],
+      };
+    });
+  }, [setupKeys, groups]);
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
 
   return (
     <PageContainer>
@@ -43,11 +52,7 @@ export default function SetupKeys() {
             icon={<SetupKeysIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {setupKeys && setupKeys.length > 1
-            ? `${setupKeys.length} Setup Keys`
-            : "Setup Keys"}
-        </h1>
+        <h1 ref={headingRef}>Setup Keys</h1>
         <Paragraph>
           Setup keys are pre-authentication keys that allow to register new
           machines in your network.
@@ -69,6 +74,7 @@ export default function SetupKeys() {
       <RestrictedAccess page={"Setup Keys"}>
         <Suspense fallback={<SkeletonTable />}>
           <SetupKeysTable
+            headingTarget={portalTarget}
             setupKeys={setupKeysWithGroups}
             isLoading={isLoading}
           />

src/app/(dashboard)/team/service-users/page.tsx

@@ -5,6 +5,7 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
@@ -22,6 +23,9 @@ export default function ServiceUsers() {
     "/users?service_user=true",
   );
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -38,11 +42,7 @@ export default function ServiceUsers() {
             icon={<IconSettings2 size={17} />}
           />
         </Breadcrumbs>
-        <h1>
-          {users && users.length > 1
-            ? `${users.length} Service Users`
-            : "Service Users"}
-        </h1>
+        <h1 ref={headingRef}>Service Users</h1>
         <Paragraph>
           Use service users to create API tokens and avoid losing automated
           access.
@@ -61,7 +61,11 @@ export default function ServiceUsers() {
       </div>
       <RestrictedAccess page={"Service Users"}>
         <Suspense fallback={<SkeletonTable />}>
-          <ServiceUsersTable users={users} isLoading={isLoading} />
+          <ServiceUsersTable
+            users={users}
+            isLoading={isLoading}
+            headingTarget={portalTarget}
+          />
         </Suspense>
       </RestrictedAccess>
     </PageContainer>

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

@@ -10,6 +10,7 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import useRedirect from "@hooks/useRedirect";
 import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
@@ -21,11 +22,13 @@ import { useSWRConfig } from "swr";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { Group } from "@/interfaces/Group";
 import { Role, User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 import AccessTokensTable from "@/modules/access-tokens/AccessTokensTable";
 import CreateAccessTokenModal from "@/modules/access-tokens/CreateAccessTokenModal";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 import UserBlockCell from "@/modules/users/table-cells/UserBlockCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
@@ -37,30 +40,39 @@ export default function UserPage() {
   const { data: users, isLoading } = useFetchApi<User[]>(
     `/users?service_user=${isServiceUser}`,
   );
+  const { isOwnerOrAdmin } = useLoggedInUser();
 
   const user = useMemo(() => {
     return users?.find((u) => u.id === userId);
   }, [users, userId]);
 
-  return !isLoading && user ? (
-    <UserOverview user={user} />
-  ) : (
-    <FullScreenLoading />
-  );
+  useRedirect("/team/users", false, !userId);
+
+  const userGroups = useGroupIdsToGroups(user?.auto_groups);
+
+  if (!isOwnerOrAdmin && user && !isLoading) {
+    return <UserOverview user={user} initialGroups={[]} />;
+  }
+
+  if (isOwnerOrAdmin && user && !isLoading && userGroups) {
+    return <UserOverview user={user} initialGroups={userGroups} />;
+  }
+
+  return <FullScreenLoading />;
 }
 
 type Props = {
   user: User;
+  initialGroups: Group[];
 };
 
-function UserOverview({ user }: Props) {
+function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
-  const { loggedInUser, isOwnerOrAdmin } = useLoggedInUser();
+  const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
-  const initialGroups = user.auto_groups;
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: initialGroups,
@@ -104,6 +116,7 @@ function UserOverview({ user }: Props) {
           <Breadcrumbs.Item
             href={"/team"}
             label={"Team"}
+            disabled={isUser}
             icon={<TeamIcon size={13} />}
           />
 
@@ -117,6 +130,7 @@ function UserOverview({ user }: Props) {
             <Breadcrumbs.Item
               href={"/team/users"}
               label={"Users"}
+              disabled={isUser}
               icon={<User2 size={16} />}
             />
           )}
@@ -156,42 +170,48 @@ function UserOverview({ user }: Props) {
               </h1>
             </div>
           </div>
-          <div className={"flex gap-4"}>
-            <Button
-              variant={"default"}
-              className={"w-full"}
-              onClick={() => {
-                user.is_service_user
-                  ? router.push("/team/service-users")
-                  : router.push("/team/users");
-              }}
-            >
-              Cancel
-            </Button>
+          {!isUser && (
+            <div className={"flex gap-4"}>
+              <Button
+                variant={"default"}
+                className={"w-full"}
+                onClick={() => {
+                  user.is_service_user
+                    ? router.push("/team/service-users")
+                    : router.push("/team/users");
+                }}
+              >
+                Cancel
+              </Button>
 
-            <Button
-              variant={"primary"}
-              className={"w-full"}
-              disabled={!hasChanges}
-              onClick={save}
-            >
-              Save Changes
-            </Button>
-          </div>
+              <Button
+                variant={"primary"}
+                className={"w-full"}
+                disabled={!hasChanges}
+                onClick={save}
+                data-cy={"save-changes"}
+              >
+                Save Changes
+              </Button>
+            </div>
+          )}
         </div>
 
-        <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
+        <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
           <UserInformationCard user={user} />
           <div className={"flex flex-col gap-8 w-1/2 "}>
-            {!user.is_service_user && (
+            {!user.is_service_user && isOwnerOrAdmin && (
               <div>
                 <Label>Auto-assigned groups</Label>
                 <HelpText>
                   Groups will be assigned to peers added by this user.
                 </HelpText>
                 <PeerGroupSelector
+                  disabled={isUser}
                   onChange={setSelectedGroups}
                   values={selectedGroups}
+                  hideAllGroup={true}
+                  dataCy={"user-group-selector"}
                 />
               </div>
             )}
@@ -206,6 +226,8 @@ function UserOverview({ user }: Props) {
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
+                  hideOwner={user.is_service_user}
+                  currentUser={user}
                   disabled={
                     isLoggedInUser ||
                     !isOwnerOrAdmin ||
@@ -233,7 +255,10 @@ function UserOverview({ user }: Props) {
                 <div className={"inline-flex gap-4 justify-end"}>
                   <div>
                     <CreateAccessTokenModal user={user}>
-                      <Button variant={"primary"}>
+                      <Button
+                        variant={"primary"}
+                        data-cy={"access-token-open-modal"}
+                      >
                         <IconCirclePlus size={16} />
                         Create Access Token
                       </Button>
@@ -282,6 +307,7 @@ function UserInformationCard({ user }: { user: User }) {
         )}
 
         <Card.ListItem
+          tooltip={false}
           label={
             <>
               <GalleryHorizontalEnd size={16} />
@@ -293,15 +319,19 @@ function UserInformationCard({ user }: { user: User }) {
 
         {!isServiceUser && (
           <>
-            <Card.ListItem
-              label={
-                <>
-                  <Ban size={16} />
-                  Block User
-                </>
-              }
-              value={<UserBlockCell user={user} isUserPage={true} />}
-            />
+            {!user.is_current && user.role != Role.Owner && (
+              <Card.ListItem
+                tooltip={false}
+                label={
+                  <>
+                    <Ban size={16} />
+                    Block User
+                  </>
+                }
+                value={<UserBlockCell user={user} isUserPage={true} />}
+              />
+            )}
+
             <Card.ListItem
               label={
                 <>

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

@@ -5,20 +5,26 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, User2 } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import TeamIcon from "@/assets/icons/TeamIcon";
+import { useGroups } from "@/contexts/GroupsProvider";
 import { User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 
 const UsersTable = lazy(() => import("@/modules/users/UsersTable"));
 
 export default function TeamUsers() {
+  const { isLoading: isGroupsLoading } = useGroups();
   const { data: users, isLoading } = useFetchApi<User[]>(
     "/users?service_user=false",
   );
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -35,7 +41,7 @@ export default function TeamUsers() {
             icon={<User2 size={16} />}
           />
         </Breadcrumbs>
-        <h1>{users && users.length > 1 ? `${users.length} Users` : "Users"}</h1>
+        <h1 ref={headingRef}>Users</h1>
         <Paragraph>
           Manage users and their permissions. Same-domain email users are added
           automatically on first sign-in.
@@ -54,7 +60,11 @@ export default function TeamUsers() {
       </div>
       <RestrictedAccess page={"Users"}>
         <Suspense fallback={<SkeletonTable />}>
-          <UsersTable users={users} isLoading={isLoading} />
+          <UsersTable
+            users={users}
+            isLoading={isLoading || isGroupsLoading}
+            headingTarget={portalTarget}
+          />
         </Suspense>
       </RestrictedAccess>
     </PageContainer>

src/app/globals.css

@@ -64,4 +64,13 @@ p {
     display: table;
     position: relative;
     width: 100%;
+}
+
+.stepper-bg-variant .step-circle {
+    @apply !border-[#1d2024];
+}
+
+.webkit-scroll{
+    -webkit-overflow-scrolling: touch;
+    -webkit-transform: translate3d(0, 0, 0);
 }

src/app/not-found.tsx

@@ -1,14 +1,40 @@
 "use client";
 
 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useLocalStorage } from "@hooks/useLocalStorage";
+import { useRedirect } from "@hooks/useRedirect";
+import { useEffect, useState } from "react";
 
+type Props = {
+  url: string;
+  queryParams?: string;
+};
 export default function NotFound() {
-  const router = useRouter();
-  useEffect(() => {
-    router.push("/peers");
-  });
+  const [mounted, setMounted] = useState(false);
+  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
+    "netbird-query-params",
+    "",
+  );
+  const [queryParams, setQueryParams] = useState("");
 
-  return <FullScreenLoading />;
+  useEffect(() => {
+    setQueryParams(tempQueryParams);
+    setTempQueryParams("");
+    setMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return mounted ? (
+    <Redirect
+      url={window?.location?.pathname || "/"}
+      queryParams={queryParams}
+    />
+  ) : (
+    <FullScreenLoading />
+  );
 }
+
+const Redirect = ({ url, queryParams }: Props) => {
+  useRedirect("/peers" + (queryParams && `?${queryParams}`));
+  return <FullScreenLoading />;
+};

src/app/page.tsx

@@ -1,9 +1,41 @@
 "use client";
 
 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useLocalStorage } from "@hooks/useLocalStorage";
 import { useRedirect } from "@hooks/useRedirect";
+import { useEffect, useState } from "react";
+
+type Props = {
+  url: string;
+  queryParams?: string;
+};
 
 export default function Home() {
-  useRedirect("/peers");
-  return <FullScreenLoading />;
+  const [mounted, setMounted] = useState(false);
+  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
+    "netbird-query-params",
+    "",
+  );
+  const [queryParams, setQueryParams] = useState("");
+
+  useEffect(() => {
+    setQueryParams(tempQueryParams);
+    setTempQueryParams("");
+    setMounted(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return mounted ? (
+    <Redirect
+      url={window?.location?.pathname || "/"}
+      queryParams={queryParams}
+    />
+  ) : (
+    <FullScreenLoading />
+  );
 }
+
+const Redirect = ({ url, queryParams }: Props) => {
+  useRedirect(url == "/" ? "/peers" : url + (queryParams && `?${queryParams}`));
+  return <FullScreenLoading />;
+};

src/assets/countries/CountryDERounded.tsx

@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import deIcon from "@/assets/countries/de.svg";
-
-export const CountryDERounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={deIcon}
-        alt={"de"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};

src/assets/countries/CountryEURounded.tsx

@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import euIcon from "@/assets/countries/eu.svg";
-
-export const CountryEURounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={euIcon}
-        alt={"eu"}
-        fill={true}
-        className={"object-cover object-center shrink-0"}
-      />
-    </div>
-  );
-};

src/assets/countries/CountryJPRounded.tsx

@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import jpIcon from "@/assets/countries/jp.svg";
-
-export const CountryJPRounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={jpIcon}
-        alt={"eu"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};

src/assets/countries/CountryUSRounded.tsx

@@ -1,20 +0,0 @@
-import Image from "next/image";
-import * as React from "react";
-import usIcon from "@/assets/countries/us.svg";
-
-export const CountryUSRounded = () => {
-  return (
-    <div
-      className={
-        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
-      }
-    >
-      <Image
-        src={usIcon}
-        alt={"us"}
-        fill={true}
-        className={"object-cover object-center"}
-      />
-    </div>
-  );
-};

src/assets/countries/de.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
-	<desc>Flag of Germany</desc>
-	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
-	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
-	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
-</svg>

src/assets/countries/eu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540"><defs><g id="d"><g id="b"><path id="a" d="M0 0v1h.5z" transform="rotate(18 3.157 -.5)"/><use xlink:href="#a" transform="scale(-1 1)"/></g><g id="c"><use xlink:href="#b" transform="rotate(72)"/><use xlink:href="#b" transform="rotate(144)"/></g><use xlink:href="#c" transform="scale(-1 1)"/></g></defs><path fill="#039" d="M0 0h810v540H0z"/><g fill="#fc0" transform="matrix(30 0 0 30 405 270)"><use xlink:href="#d" y="-6"/><use xlink:href="#d" y="6"/><g id="e"><use xlink:href="#d" x="-6"/><use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use xlink:href="#e" transform="scale(-1 1)"/></g></svg>

src/assets/countries/jp.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
-<rect fill="#fff" height="600" width="900"/>
-<circle fill="#bc002d" cx="450" cy="300" r="180"/>
-</svg>

src/assets/countries/us.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7410 3900"><path fill="#b22234" d="M0 0h7410v3900H0z"/><path d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0" stroke="#fff" stroke-width="300"/><path fill="#3c3b6e" d="M0 0h2964v2100H0z"/><g fill="#fff"><g id="d"><g id="c"><g id="e"><g id="b"><path id="a" d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"/><use xlink:href="#a" y="420"/><use xlink:href="#a" y="840"/><use xlink:href="#a" y="1260"/></g><use xlink:href="#a" y="1680"/></g><use xlink:href="#b" x="247" y="210"/></g><use xlink:href="#c" x="494"/></g><use xlink:href="#d" x="988"/><use xlink:href="#c" x="1976"/><use xlink:href="#e" x="2470"/></g></svg>

src/assets/icons/CircleIcon.tsx

@@ -12,10 +12,12 @@ export default function CircleIcon({
   size = 11,
   inactiveDot = "gray",
   className,
-}: Props) {
+}: Readonly<Props>) {
   return (
     <span
       style={{ width: size + "px", height: size + "px" }}
+      data-cy="circle-icon"
+      data-cy-status={active ? "active" : "inactive"}
       className={cn(
         "rounded-full",
         active

src/assets/icons/EntraIcon.tsx

@@ -0,0 +1,39 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function EntraIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="231"
+      height="231"
+      viewBox="0 0 231 231"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M48.7923 180.077C53.7717 183.183 62.0492 186.635 70.8015 186.635C78.771 186.635 86.1758 184.325 92.3102 180.385C92.3102 180.385 92.323 180.385 92.3358 180.373L115.5 165.896V218.167C111.83 218.167 108.134 217.166 104.925 215.164L48.7923 180.077Z"
+        fill="#225086"
+      />
+      <path
+        d="M100.78 19.3398L4.53017 127.91C-2.90033 136.303 -0.962501 148.982 8.67533 155.001C8.67533 155.001 44.3007 177.267 48.7923 180.077C53.7717 183.183 62.0492 186.635 70.8015 186.635C78.771 186.635 86.1758 184.325 92.3102 180.385C92.3102 180.385 92.323 180.385 92.3358 180.373L115.5 165.896L59.4953 130.887L115.513 67.6958V12.8333C110.072 12.8333 104.63 15.0022 100.78 19.3398Z"
+        fill="#66DDFF"
+      />
+      <path
+        d="M59.4953 130.887L60.1627 131.298L115.5 165.896H115.513V67.7087L115.5 67.6958L59.4953 130.887Z"
+        fill="#CBF8FF"
+      />
+      <path
+        d="M222.325 155.001C231.963 148.982 233.9 136.303 226.47 127.91L163.317 56.672C158.222 54.2978 152.511 52.9375 146.467 52.9375C134.596 52.9375 123.983 58.058 116.925 66.1045L115.526 67.683L171.53 130.874L115.513 165.884V218.154C119.196 218.154 122.866 217.153 126.075 215.151L222.325 154.988V155.001Z"
+        fill="#074793"
+      />
+      <path
+        d="M115.513 12.8333V67.6958L116.912 66.1173C123.97 58.0708 134.583 52.9503 146.454 52.9503C152.511 52.9503 158.209 54.3235 163.304 56.6848L130.207 19.3527C126.37 15.015 120.929 12.8462 115.5 12.8462L115.513 12.8333Z"
+        fill="#0294E4"
+      />
+      <path
+        d="M171.518 130.887L115.513 67.7087V165.884L171.518 130.887Z"
+        fill="#96BCC2"
+      />
+    </svg>
+  );
+}

src/assets/icons/GoogleIcon.tsx

@@ -0,0 +1,31 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function GoogleIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+      <path d="M1 1h22v22H1z" fill="none" />
+    </svg>
+  );
+}

src/assets/icons/IconProperties.tsx

@@ -5,7 +5,7 @@ export type IconProps = {
 };
 
 export const defaultIconProps: IconProps = {
-  size: 16,
+  size: 15,
   className:
     "dark:fill-nb-gray-400 fill-gray-500 peer-data-[active=true]/icon:dark:fill-white peer-data-[active=true]/icon:fill-gray-900 shrink-0",
   autoHeight: false,

src/assets/icons/JWTIcon.tsx

@@ -0,0 +1,36 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function JWTIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      height="2500"
+      viewBox=".4 .3 99.7 100"
+      width="2500"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <g fill="none">
+        <path
+          d="m57.8 27.2-.1-26.9h-15l.1 26.9 7.5 10.3zm-15 46.1v27h15v-27l-7.5-10.3z"
+          fill="#fff"
+        />
+        <path
+          d="m57.8 73.3 15.8 21.8 12.1-8.8-15.8-21.8-12.1-3.9zm-15-46.1-15.9-21.8-12.1 8.8 15.8 21.8 12.2 3.9z"
+          fill="#00f2e6"
+        />
+        <path
+          d="m30.6 36-25.6-8.3-4.6 14.2 25.6 8.4 12.1-4zm31.8 18.2 7.5 10.3 25.6 8.3 4.6-14.2-25.6-8.3z"
+          fill="#00b9f1"
+        />
+        <path
+          d="m74.5 50.3 25.6-8.4-4.6-14.2-25.6 8.3-7.5 10.3zm-48.5 0-25.6 8.3 4.6 14.2 25.6-8.3 7.5-10.3z"
+          fill="#d63aff"
+        />
+        <path
+          d="m30.6 64.5-15.8 21.8 12.1 8.8 15.9-21.8v-12.7zm39.3-28.5 15.8-21.8-12.1-8.8-15.8 21.8v12.7z"
+          fill="#fb015b"
+        />
+      </g>
+    </svg>
+  );
+}

src/assets/icons/NetBirdIcon.tsx

@@ -5,9 +5,17 @@ import NetBirdLogo from "@/assets/netbird.svg";
 
 type Props = {
   size?: number;
+  className?: string;
 };
-function NetBirdIcon({ size = 16 }: Props) {
-  return <Image src={NetBirdLogo} alt={"Netbird Icon"} width={size} />;
+function NetBirdIcon({ size = 16, className }: Props) {
+  return (
+    <Image
+      src={NetBirdLogo}
+      alt={"Netbird Icon"}
+      width={size}
+      className={className}
+    />
+  );
 }
 
 export default memo(NetBirdIcon);

src/assets/netbird-full.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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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="#F2F2F2"/>
+<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>

src/auth/OIDCError.tsx

@@ -2,7 +2,7 @@ import { useOidc, useOidcUser } from "@axa-fr/react-oidc";
 import Button from "@components/Button";
 import Paragraph from "@components/Paragraph";
 import loadConfig from "@utils/config";
-import { ArrowRightIcon, LogOut } from "lucide-react";
+import { ArrowRightIcon } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
 import { useEffect, useState } from "react";
@@ -15,7 +15,9 @@ export const OIDCError = () => {
   const params = useSearchParams();
   const errorParam = params.get("error");
   const accessDenied = errorParam === "access_denied";
+  const invalidRequest = errorParam === "invalid_request";
   const [title, setTitle] = useState(params.get("error_description"));
+  const errorDescription = params.get("error_description");
   const { logout, login } = useOidc();
 
   useEffect(() => {
@@ -55,7 +57,7 @@ export const OIDCError = () => {
             variant={"primary"}
             size={"sm"}
             className={"mt-5"}
-            onClick={() => login("/", { client_id: config.clientId })}
+            onClick={() => logout("/", { client_id: config.clientId })}
           >
             Continue
             <ArrowRightIcon size={16} />
@@ -72,9 +74,14 @@ export const OIDCError = () => {
         </>
       ) : (
         <>
-          <Paragraph className={"text-center mt-2"}>
+          <Paragraph className={"text-center mt-2 block"}>
             There was an error logging you in. <br />
-            Error: {oidcUserLoadingState}
+            Error:{" "}
+            <span className={"inline capitalize"}>
+              {invalidRequest && errorDescription
+                ? errorDescription
+                : oidcUserLoadingState}
+            </span>
           </Paragraph>
           <Button
             variant={"primary"}
@@ -83,7 +90,6 @@ export const OIDCError = () => {
             onClick={() => logout("/", { client_id: config.clientId })}
           >
             Logout
-            <LogOut size={16} />
           </Button>
         </>
       )}

src/auth/OIDCProvider.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { OidcProvider } from "@axa-fr/react-oidc";
 import {
   AuthorityConfiguration,
   OidcConfiguration,
-} from "@axa-fr/react-oidc/dist/vanilla/oidc";
+  OidcProvider,
+} from "@axa-fr/react-oidc";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useLocalStorage } from "@hooks/useLocalStorage";
 import { useRedirect } from "@hooks/useRedirect";
 import loadConfig, { buildExtras } from "@utils/config";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -29,7 +30,7 @@ const auth0AuthorityConfig: AuthorityConfiguration = {
   revocation_endpoint: new URL("oauth/revoke", config.authority).href,
   end_session_endpoint: new URL("v2/logout", config.authority).href,
   userinfo_endpoint: new URL("userinfo", config.authority).href,
-  //issuer: new URL("", config.authority).href,
+  issuer: new URL("", config.authority).href,
 };
 
 const onEvent = (configurationName: any, eventName: any, data: any) => {
@@ -43,6 +44,19 @@ export default function OIDCProvider({ children }: Props) {
   const [mounted, setMounted] = useState(false);
   const router = useRouter();
   const path = usePathname();
+  const params = useSearchParams()?.toString();
+  const [, setQueryParams] = useLocalStorage("netbird-query-params", params);
+
+  useEffect(() => {
+    if (
+      params?.includes("tab") ||
+      params?.includes("search") ||
+      params?.includes("id")
+    ) {
+      setQueryParams(params);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const withCustomHistory = () => {
     return {

src/auth/SecureProvider.tsx

@@ -11,9 +11,17 @@ export const SecureProvider = ({ children }: Props) => {
   const currentPath = usePathname();
 
   useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined = undefined;
     if (!isAuthenticated) {
-      login(currentPath);
+      timeout = setTimeout(async () => {
+        if (!isAuthenticated) {
+          await login(currentPath);
+        }
+      }, 1500);
     }
+    return () => {
+      clearTimeout(timeout);
+    };
   }, [currentPath, isAuthenticated, login]);
 
   return (

src/components/Badge.tsx

@@ -2,7 +2,7 @@ import { cn } from "@utils/helpers";
 import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-type BadgeVariants = VariantProps<typeof variants>;
+export type BadgeVariants = VariantProps<typeof variants>;
 
 interface Props extends React.HTMLAttributes<HTMLDivElement>, BadgeVariants {
   children: React.ReactNode;
@@ -22,6 +22,9 @@ const variants = cva("", {
       purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
       yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
       gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
+      grayer: [
+        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+      ],
       "gray-ghost": [
         "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
       ],
@@ -37,6 +40,7 @@ const variants = cva("", {
       "blue-darker": ["hover:bg-sky-800"],
       red: ["hover:bg-red-950/40"],
       gray: ["hover:bg-nb-gray-900"],
+      grayer: ["hover:bg-nb-gray-900"],
       "gray-ghost": ["hover:bg-nb-gray-900"],
       green: ["hover:bg-green-950/50"],
       netbird: ["hover:bg-netbird-950/50"],
@@ -50,7 +54,7 @@ export default function Badge({
   variant = "blue",
   useHover = false,
   ...props
-}: Props) {
+}: Readonly<Props>) {
   return (
     <div
       className={cn(

src/components/Breadcrumbs.tsx

@@ -15,13 +15,25 @@ type ItemProps = {
   label: string;
   icon?: React.ReactNode;
   active?: boolean;
+  disabled?: boolean;
 };
 
-export const Item = ({ href, label, icon, active }: ItemProps) => {
+export const Item = ({
+  href,
+  label,
+  icon,
+  active,
+  disabled = false,
+}: ItemProps) => {
   const router = useRouter();
 
   return (
-    <div className={"flex items-center gap-2 group"}>
+    <div
+      className={cn(
+        "flex items-center gap-2 group",
+        disabled && "pointer-events-none",
+      )}
+    >
       <ChevronRightIcon
         size={16}
         className={"text-nb-gray-400 group-first:hidden"}

src/components/Button.tsx

@@ -35,6 +35,11 @@ export const buttonVariants = cva(
           "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
           "dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-700/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
         ],
+        secondaryLighter: [
+          "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
+          "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
+          "dark:bg-nb-gray-900/70 dark:text-gray-400 dark:border-gray-700/70 dark:hover:text-white dark:hover:bg-nb-gray-800/60",
+        ],
         input: [
           "bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-neutral-200 text-gray-900",
           "dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20  ",
@@ -49,6 +54,10 @@ export const buttonVariants = cva(
           "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
           "dark:focus:ring-zinc-800/50 dark:bg-white dark:text-gray-800 dark:border-gray-700/40 dark:hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
         ],
+        white: [
+          "focus:ring-white/50 bg-white text-gray-800 border-white outline-none hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
+          "disabled:dark:bg-nb-gray-900 disabled:dark:text-nb-gray-300 disabled:dark:border-nb-gray-900",
+        ],
         outline: [
           "bg-white hover:text-black focus:ring-zinc-200/50  hover:bg-gray-100 border-gray-200 text-gray-900",
           "dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
@@ -69,6 +78,7 @@ export const buttonVariants = cva(
       },
       size: {
         xs: "text-xs py-2 px-4",
+        xs2: "text-[0.78rem] py-2 px-4",
         sm: "text-sm py-2.5 px-4",
         md: "text-md py-2.5 px-4",
         lg: "text-lg py-2.5 px-4",

src/components/ButtonGroup.tsx

@@ -5,14 +5,16 @@ import React, { forwardRef } from "react";
 type Props = {
   children: React.ReactNode;
   disabled?: boolean;
+  className?: string;
 };
 
-function ButtonGroup({ children, disabled }: Props) {
+function ButtonGroup({ children, disabled, className }: Props) {
   return (
     <div
       className={cn(
         "rounded-lg border-[1px] dark:border-nb-gray-900 border-neutral-200 overflow-hidden flex items-center justify-center shrink-0 border-separate",
         disabled ? "opacity-100 !border-nb-gray-900/20" : "",
+        className,
       )}
     >
       {children}
@@ -21,7 +23,10 @@ function ButtonGroup({ children, disabled }: Props) {
 }
 
 const ButtonGroupButton = forwardRef(
-  ({ ...props }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+  (
+    { className, ...props }: ButtonProps,
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
     return (
       <Button
         ref={ref}
@@ -31,6 +36,7 @@ const ButtonGroupButton = forwardRef(
         className={cn(
           "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[41px]",
           "!py-2.5 !px-4",
+          className,
         )}
       />
     );

src/components/Card.tsx

@@ -7,6 +7,7 @@ import React from "react";
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
+
 function Card({ children, className, ...props }: Props) {
   return (
     <div
@@ -30,6 +31,9 @@ type CardListItemProps = {
   value: React.ReactNode;
   className?: string;
   copy?: boolean;
+  copyText?: string;
+  tooltip?: boolean;
+  extraText?: string[];
 };
 
 function CardListItem({
@@ -37,9 +41,10 @@ function CardListItem({
   value,
   className,
   copy = false,
+  copyText,
+  tooltip = true,
+  extraText = [],
 }: CardListItemProps) {
-  const [, copyToClipBoard] = useCopyToClipboard(value as string);
-
   return (
     <li
       className={cn(
@@ -48,22 +53,68 @@ function CardListItem({
       )}
     >
       <div className={"flex gap-2.5 items-center text-sm"}>{label}</div>
-      <div
-        className={cn(
-          "text-right text-nb-gray-400 text-sm flex items-center gap-2",
-          copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
-        )}
-        onClick={() =>
-          copy && copyToClipBoard(`${label} has been copied to clipboard.`)
-        }
-      >
-        <TextWithTooltip text={value as string} maxChars={40} />
-        {copy && <Copy size={13} />}
+      <div className={"flex flex-col gap-2"}>
+        <CardTextItem
+          label={label}
+          value={value}
+          copy={copy}
+          copyText={copyText}
+          tooltip={tooltip}
+        />
+        {extraText?.map((extraLabel, index) => (
+          <CardTextItem
+            key={index}
+            label={label}
+            value={extraLabel}
+            copy={copy}
+            copyText={copyText}
+            tooltip={tooltip}
+          />
+        ))}
       </div>
     </li>
   );
 }
 
+type CardTextItemProps = {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  copy?: boolean;
+  copyText?: string;
+  tooltip?: boolean;
+};
+
+const CardTextItem = ({
+  label,
+  value,
+  copy = false,
+  copyText,
+  tooltip = true,
+}: CardTextItemProps) => {
+  const [, copyToClipBoard] = useCopyToClipboard(value as string);
+  return (
+    <div
+      className={cn(
+        "text-right text-nb-gray-400 text-sm flex items-center gap-2",
+        copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
+      )}
+      onClick={() =>
+        copy &&
+        copyToClipBoard(
+          `${copyText ? copyText : label} has been copied to clipboard.`,
+        )
+      }
+    >
+      {tooltip ? (
+        <TextWithTooltip text={value as string} maxChars={40} />
+      ) : (
+        value
+      )}
+      {copy && <Copy size={13} className={"shrink-0"} />}
+    </div>
+  );
+};
+
 Card.List = CardList;
 Card.ListItem = CardListItem;
 

src/components/Checkbox.tsx

@@ -2,19 +2,41 @@
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 import * as React from "react";
 
+type CheckboxVariants = VariantProps<typeof variants>;
+
+const variants = cva([], {
+  variants: {
+    variant: {
+      default: [
+        "dark:data-[state=unchecked]:bg-nb-gray-950 dark:border-nb-gray-900 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 ",
+        "dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+      ],
+      tableCell: [
+        "dark:data-[state=unchecked]:bg-nb-gray-920 dark:border-nb-gray-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 ",
+        "dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+      ],
+    },
+  },
+});
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+    CheckboxVariants
+>(({ className, variant = "default", ...props }, ref) => (
   <div className={"h-5 w-5"}>
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "dark:data-[state=unchecked]:bg-nb-gray-950",
-        "peer h-5 w-5 shrink-0 rounded-[4px]  border border-neutral-900 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 dark:border-nb-gray-900 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-netbird dark:data-[state=checked]:text-neutral-50",
+        variants({ variant }),
+        "border-neutral-900",
+        "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 ",
         className,
       )}
       {...props}

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-800/50",
+      "bg-transparent dark:aria-selected:bg-nb-gray-800/20",
       className,
     )}
     {...props}

src/components/CopyToClipboardText.tsx

@@ -6,9 +6,18 @@ import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 type Props = {
   children: React.ReactNode;
   message?: string;
+  iconAlignment?: "left" | "right";
+  className?: string;
+  alwaysShowIcon?: boolean;
 };
 
-export default function CopyToClipboardText({ children, message }: Props) {
+export default function CopyToClipboardText({
+  children,
+  message,
+  iconAlignment = "right",
+  className,
+  alwaysShowIcon = false,
+}: Props) {
   const [wrapper, copyToClipboard, copied] = useCopyToClipboard();
 
   return (
@@ -16,6 +25,7 @@ export default function CopyToClipboardText({ children, message }: Props) {
       className={cn(
         "flex gap-2 items-center group cursor-pointer transition-all hover:underline underline-offset-4 decoration-dashed decoration-nb-gray-600",
         !copied && "hover:opacity-90",
+        className,
       )}
       onClick={(e) => {
         e.stopPropagation();
@@ -28,13 +38,21 @@ export default function CopyToClipboardText({ children, message }: Props) {
 
       {copied ? (
         <CheckIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
-          size={12}
+          className={cn(
+            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
+            iconAlignment === "left" ? "order-first" : "order-last",
+            !alwaysShowIcon && "opacity-0",
+          )}
+          size={11}
         />
       ) : (
         <CopyIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
-          size={12}
+          className={cn(
+            "text-nb-gray-100 group-hover:opacity-100 shrink-0",
+            iconAlignment === "left" ? "order-first" : "order-last",
+            !alwaysShowIcon && "opacity-0",
+          )}
+          size={11}
         />
       )}
     </div>

src/components/DatePickerWithRange.tsx

@@ -6,7 +6,7 @@ import { Calendar } from "@components/ui/Calendar";
 import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { Calendar as CalendarIcon } from "lucide-react";
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { DateRange } from "react-day-picker";
 
 interface Props {
@@ -15,38 +15,145 @@ interface Props {
   className?: string;
 }
 
+const defaultRanges = {
+  today: {
+    from: dayjs().startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  yesterday: {
+    from: dayjs().subtract(1, "day").startOf("day").toDate(),
+    to: dayjs().subtract(1, "day").endOf("day").toDate(),
+  },
+  last14Days: {
+    from: dayjs().subtract(14, "day").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  lastMonth: {
+    from: dayjs().subtract(1, "month").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+  allTime: {
+    from: dayjs("1970-01-01").startOf("day").toDate(),
+    to: dayjs().endOf("day").toDate(),
+  },
+};
+
+const isEqualDateRange = (a: DateRange | undefined, b: DateRange) => {
+  if (!a) return false;
+  const aFromDay = dayjs(a.from).format("YYYY-MM-DD");
+  const aToDay = dayjs(a.to).format("YYYY-MM-DD");
+  const bFromDay = dayjs(b.from).format("YYYY-MM-DD");
+  const bToDay = dayjs(b.to).format("YYYY-MM-DD");
+  return aFromDay === bFromDay && aToDay === bToDay;
+};
+
 export function DatePickerWithRange({ className, value, onChange }: Props) {
+  const isActive = useMemo(() => {
+    return {
+      today: isEqualDateRange(value, defaultRanges.today),
+      yesterday: isEqualDateRange(value, defaultRanges.yesterday),
+      last14Days: isEqualDateRange(value, defaultRanges.last14Days),
+      lastMonth: isEqualDateRange(value, defaultRanges.lastMonth),
+      allTime: isEqualDateRange(value, defaultRanges.allTime),
+    };
+  }, [value]);
+
+  const displayDateValue = useMemo(() => {
+    if (!value) return "Select date range";
+
+    if (isActive.allTime) return "All Time";
+    if (isActive.lastMonth) return "Last Month";
+    if (isActive.last14Days) return "Last 14 Days";
+    if (isActive.yesterday) return "Yesterday";
+    if (isActive.today) return "Today";
+
+    if (!value.to) return dayjs(value.from).format("MMM DD, YYYY").toString();
+    return `${dayjs(value.from).format("MMM DD, YYYY")} - ${dayjs(
+      value.to,
+    ).format("MMM DD, YYYY")}`;
+  }, [value, isActive]);
+
+  const [calendarOpen, setCalendarOpen] = useState(false);
+
+  const updateRangeAndClose = (range: DateRange) => {
+    setCalendarOpen(false);
+    onChange?.(range);
+  };
+
   return (
     <div className={cn("grid gap-2", className)}>
-      <Popover>
+      <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
         <PopoverTrigger asChild>
           <Button
             id="date"
             variant={"secondary"}
-            className={cn("w-[260px] justify-start text-left font-normal")}
+            className={cn("max-w-[260px] justify-start text-left font-normal")}
           >
-            <CalendarIcon size={16} />
-            {value?.from ? (
-              value.to ? (
-                <>
-                  {dayjs(value.from).format("MMM DD, YYYY")} -{" "}
-                  {dayjs(value.to).format("MMM DD, YYYY")}
-                </>
-              ) : (
-                <>{dayjs(value.from, "LLL dd, y").toString()}</>
-              )
-            ) : (
-              <span>Pick your date range</span>
-            )}
+            <CalendarIcon size={16} className={"shrink-0"} />
+            {displayDateValue}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start" sideOffset={10}>
+          <div
+            className={
+              "px-4 py-3 flex flex-wrap gap-2 max-w-[280px] sm:max-w-none border-b border-nb-gray-800 items-center justify-between w-full"
+            }
+          >
+            <div>
+              <CalendarButton
+                label={
+                  <>
+                    <CalendarIcon size={14} className={"shrink-0"} />
+                    All Time
+                  </>
+                }
+                active={isActive.allTime}
+                onClick={() => updateRangeAndClose(defaultRanges.allTime)}
+              />
+            </div>
+            <div className={"flex gap-2 flex-wrap"}>
+              <CalendarButton
+                label={"Last Month"}
+                active={isActive.lastMonth}
+                onClick={() => updateRangeAndClose(defaultRanges.lastMonth)}
+              />
+              <CalendarButton
+                label={"Last 14 Days"}
+                active={isActive.last14Days}
+                onClick={() => updateRangeAndClose(defaultRanges.last14Days)}
+              />
+              <CalendarButton
+                label={"Yesterday"}
+                active={isActive.yesterday}
+                onClick={() => updateRangeAndClose(defaultRanges.yesterday)}
+              />
+              <CalendarButton
+                label={"Today"}
+                active={isActive.today}
+                onClick={() => updateRangeAndClose(defaultRanges.today)}
+              />
+            </div>
+          </div>
           <Calendar
             initialFocus
             mode="range"
             defaultMonth={value?.from}
             selected={value}
-            onSelect={onChange}
+            onSelect={(range) => {
+              let from =
+                range && range.from
+                  ? dayjs(range.from).startOf("day").toDate()
+                  : undefined;
+              let to =
+                range && range.to
+                  ? dayjs(range.to).endOf("day").toDate()
+                  : undefined;
+              if (!from && !to) {
+                onChange?.(undefined);
+                return;
+              }
+              onChange?.({ from, to });
+            }}
             numberOfMonths={2}
           />
         </PopoverContent>
@@ -54,3 +161,25 @@ export function DatePickerWithRange({ className, value, onChange }: Props) {
     </div>
   );
 }
+
+type CalendarButtonProps = {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  active?: boolean;
+};
+
+function CalendarButton({ label, onClick, active }: CalendarButtonProps) {
+  return (
+    <button
+      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-transparent text-nb-gray-300 hover:bg-nb-gray-900 hover:text-nb-gray-100",
+      )}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+}

src/components/DisableDarkReader.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+
+export const DisableDarkReader = () => {
+  useEffect(() => {
+    try {
+      const lock = document.createElement("meta");
+      lock.name = "darkreader-lock";
+      document.head.appendChild(lock);
+    } catch (e) {}
+  }, []);
+
+  return null;
+};

src/components/DropdownInfoText.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@utils/helpers";
+import * as React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const DropdownInfoText = ({ children, className }: Props) => {
+  return (
+    <div className={cn("text-center pt-2 mb-6 text-nb-gray-400", className)}>
+      {children}
+    </div>
+  );
+};

src/components/DropdownInput.tsx

@@ -0,0 +1,48 @@
+import { IconArrowBack } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { forwardRef } from "react";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+export const DropdownInput = forwardRef<HTMLInputElement, Props>(
+  ({ value, onChange, placeholder = "Search..." }, ref) => {
+    return (
+      <div className={"relative w-full"}>
+        <input
+          ref={ref}
+          className={cn(
+            "min-h-[42px] w-full relative",
+            "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
+            "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
+            "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
+          )}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+        />
+        <div className={"absolute left-0 top-0 h-full flex items-center pl-4"}>
+          <div className={"flex items-center"}>
+            <SearchIcon size={14} />
+          </div>
+        </div>
+        <div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>
+          <div
+            className={
+              "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
+            }
+          >
+            <IconArrowBack size={10} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+DropdownInput.displayName = "DropdownInput";

src/components/FancyToggleSwitch.tsx

@@ -2,16 +2,51 @@ import HelpText from "@components/HelpText";
 import { Label } from "@components/Label";
 import { ToggleSwitch } from "@components/ToggleSwitch";
 import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
-type Props = {
+export const fancyToggleSwitchVariants = cva([], {
+  variants: {
+    variant: {
+      default: ["px-6 py-4 border rounded-md"],
+      blank: null,
+    },
+    state: {
+      true: null,
+      false: null,
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      state: true,
+      className: ["border-nb-gray-800 bg-nb-gray-900/70"],
+    },
+    {
+      variant: "default",
+      state: false,
+      className: [
+        "border-nb-gray-910 bg-nb-gray-900/30 hover:bg-nb-gray-900/40",
+      ],
+    },
+  ],
+});
+
+export type FancyToggleSwitchVariants = VariantProps<
+  typeof fancyToggleSwitchVariants
+>;
+
+interface Props extends FancyToggleSwitchVariants {
   value: boolean;
   onChange: (value: boolean) => void;
   helpText?: React.ReactNode;
   label?: React.ReactNode;
   children?: React.ReactNode;
   disabled?: boolean;
-};
+  dataCy?: string;
+  className?: string;
+}
+
 export default function FancyToggleSwitch({
   value,
   onChange,
@@ -19,28 +54,49 @@ export default function FancyToggleSwitch({
   label,
   children,
   disabled = false,
-}: Props) {
+  dataCy,
+  className,
+  variant = "default",
+}: Readonly<Props>) {
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!value);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
+
   return (
     <div
-      onClick={() => {
-        if (disabled) return;
-        onChange(!value);
-      }}
+      onClick={handleToggle}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      role={"switch"}
+      aria-checked={value}
       className={cn(
-        "px-5 py-3.5 border rounded-md cursor-pointer transition-all duration-300 relative z-[1]",
-        value
-          ? "border-nb-gray-800 bg-nb-gray-900/70"
-          : "border-nb-gray-800 bg-nb-gray-900/30 hover:bg-nb-gray-900/40",
-        disabled && "opacity-30 pointer-events-none",
+        "cursor-pointer transition-all duration-300 relative z-[1]",
+        "inline-block text-left w-full",
+        disabled && "opacity-50 pointer-events-none",
+        fancyToggleSwitchVariants({ variant, state: value }),
+        className,
       )}
     >
-      <div className={"flex justify-between gap-10  "}>
+      <div className={"flex justify-between gap-10"}>
         <div className={"max-w-sm"}>
           <Label>{label}</Label>
           <HelpText margin={false}>{helpText}</HelpText>
         </div>
-        <div className={"mt-2"}>
-          <ToggleSwitch checked={value} onCheckedChange={onChange} />
+        <div className={"mt-2 pr-1"}>
+          <ToggleSwitch
+            checked={value}
+            onCheckedChange={onChange}
+            dataCy={dataCy}
+          />
         </div>
       </div>
       <div>{children && value ? children : null}</div>

src/components/FullTooltip.tsx

@@ -4,6 +4,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/Tooltip";
+import { TooltipProps } from "@radix-ui/react-tooltip";
 import { cn } from "@utils/helpers";
 import React, { useState } from "react";
 
@@ -19,7 +20,11 @@ type Props = {
   align?: "end" | "center" | "start";
   side?: "top" | "bottom" | "left" | "right";
   keepOpen?: boolean;
-};
+  customOpen?: boolean;
+  customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+} & TooltipProps;
 export default function FullTooltip({
   children,
   content,
@@ -32,6 +37,10 @@ export default function FullTooltip({
   align = "center",
   side = "top",
   keepOpen = false,
+  customOpen,
+  customOnOpenChange,
+  delayDuration = 1,
+  skipDelayDuration = 300,
 }: Props) {
   const [open, setOpen] = useState(!!keepOpen);
 
@@ -41,8 +50,16 @@ export default function FullTooltip({
   };
 
   return !disabled ? (
-    <TooltipProvider disableHoverableContent={!interactive}>
-      <Tooltip delayDuration={1} open={open} onOpenChange={handleOpen}>
+    <TooltipProvider
+      disableHoverableContent={!interactive}
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+    >
+      <Tooltip
+        delayDuration={delayDuration}
+        open={customOpen || open}
+        onOpenChange={customOnOpenChange || handleOpen}
+      >
         {children && (
           <TooltipTrigger asChild={true}>
             {hoverButton ? (
@@ -50,6 +67,7 @@ export default function FullTooltip({
                 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",
+                  className,
                 )}
               >
                 {children}

src/components/HelpText.tsx

@@ -12,14 +12,14 @@ export default function HelpText({
   className,
 }: Props) {
   return (
-    <p
+    <span
       className={cn(
-        "text-[.8rem] dark:text-nb-gray-300",
+        "text-[.8rem] dark:text-nb-gray-300 block font-light tracking-wide",
         margin && "mb-2",
         className,
       )}
     >
       {children}
-    </p>
+    </span>
   );
 }

src/components/Input.tsx

@@ -1,18 +1,23 @@
 import FullTooltip from "@components/FullTooltip";
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import { AlertCircle } from "lucide-react";
 import * as React from "react";
 
+type InputVariants = VariantProps<typeof inputVariants>;
+
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    InputVariants {
   customPrefix?: React.ReactNode;
   customSuffix?: React.ReactNode;
   maxWidthClass?: string;
   icon?: React.ReactNode;
   error?: string;
   errorTooltip?: boolean;
+  errorTooltipPosition?: "top" | "top-right";
+  prefixClassName?: string;
 }
 
 const inputVariants = cva("", {
@@ -22,6 +27,10 @@ const inputVariants = cva("", {
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
+      darker: [
+        "dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-800",
+        "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
+      ],
       error: [
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
         "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
@@ -49,6 +58,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       maxWidthClass = "",
       error,
       errorTooltip = false,
+      errorTooltipPosition = "top",
+      variant = "default",
+      prefixClassName,
       ...props
     },
     ref,
@@ -65,6 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 "flex h-[42px] w-auto rounded-l-md bg-white px-3 py-2 text-sm ",
                 "border  items-center whitespace-nowrap",
                 props.disabled && "opacity-20",
+                prefixClassName,
               )}
             >
               {customPrefix}
@@ -72,9 +85,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
 
           <div
-            className={
-              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]"
-            }
+            className={cn(
+              "absolute left-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pl-3 leading-[0]",
+              props.disabled && "opacity-30",
+            )}
           >
             {icon}
           </div>
@@ -84,7 +98,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             ref={ref}
             {...props}
             className={cn(
-              inputVariants({ variant: error ? "error" : "default" }),
+              inputVariants({ variant: error ? "error" : variant }),
               "flex h-[42px] w-full rounded-md  bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-20  ",
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
@@ -97,17 +111,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           />
 
           <div
-            className={
-              "absolute right-0 top-0 h-full flex items-center text-xs dark:text-nb-gray-300 pr-4 leading-[0]"
-            }
+            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",
+              props.disabled && "opacity-30",
+            )}
           >
             {customSuffix}
           </div>
           {error && errorTooltip && (
             <div
-              className={
-                "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center"
-              }
+              className={cn(
+                errorTooltipPosition == "top" &&
+                  "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center",
+                errorTooltipPosition == "top-right" &&
+                  "absolute -right-6 top-2 h-[0px] w-full flex items-center pr-3 justify-end",
+              )}
             >
               <FullTooltip
                 content={
@@ -120,7 +138,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   </div>
                 }
                 interactive={false}
-                align={"center"}
+                align={errorTooltipPosition == "top" ? "center" : "end"}
                 side={"top"}
                 keepOpen={true}
               >

src/components/NetworkRouteSelector.tsx

@@ -1,5 +1,7 @@
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
@@ -62,8 +64,13 @@ export function NetworkRouteSelector({
     const isSearching = search.length > 0;
     const found =
       dropdownOptions.filter((item) => {
+        const hasDomains = item?.domains ? item.domains.length > 0 : false;
+        const domains =
+          hasDomains && item?.domains ? item?.domains.join(" ") : "";
         return (
-          item.network_id.includes(search) || item.network.includes(search)
+          item.network_id.includes(search) ||
+          item.network?.includes(search) ||
+          domains.includes(search)
         );
       }).length > 0;
     return isSearching && !found;
@@ -102,12 +109,12 @@ export function NetworkRouteSelector({
             {value ? (
               <div
                 className={
-                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1"
+                  "flex items-center justify-between text-sm text-white w-full pr-4 pl-1 gap-2"
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
                   <NetworkRoutesIcon size={16} />
-                  {value.network_id}
+                  <TextWithTooltip text={value.network_id} maxChars={15} />
                 </div>
 
                 <div
@@ -117,6 +124,7 @@ export function NetworkRouteSelector({
                 >
                   {value.network}
                 </div>
+                <DomainList domains={value?.domains} />
               </div>
             ) : (
               <span>Select an existing network...</span>
@@ -208,15 +216,23 @@ export function NetworkRouteSelector({
                     return (
                       <CommandItem
                         key={option.network + option.network_id}
-                        value={option.network + option.network_id}
+                        value={
+                          option.network +
+                          option.network_id +
+                          option?.domains?.join(", ")
+                        }
                         onSelect={() => {
                           togglePeer(option);
                           setOpen(false);
                         }}
+                        className={"gap-2"}
                       >
                         <div className={"flex items-center gap-2.5 text-sm"}>
                           <NetworkRoutesIcon size={14} />
-                          {option.network_id}
+                          <TextWithTooltip
+                            text={option.network_id}
+                            maxChars={15}
+                          />
                         </div>
 
                         <div
@@ -226,6 +242,7 @@ export function NetworkRouteSelector({
                         >
                           {option.network}
                         </div>
+                        <DomainList domains={option?.domains} />
                       </CommandItem>
                     );
                   })}
@@ -238,3 +255,23 @@ export function NetworkRouteSelector({
     </Popover>
   );
 }
+
+function DomainList({ domains }: { domains?: string[] }) {
+  const firstDomain = domains ? domains[0] : "";
+  return (
+    domains &&
+    domains.length > 0 && (
+      <FullTooltip
+        content={<div className={"text-xs max-w-sm"}>{domains.join(", ")}</div>}
+      >
+        <div
+          className={
+            "text-xs text-nb-gray-300 block min-w-0 truncate max-w-[180px]"
+          }
+        >
+          {firstDomain} {domains.length > 1 && "+" + (domains.length - 1)}
+        </div>
+      </FullTooltip>
+    )
+  );
+}

src/components/Notification.tsx

@@ -1,3 +1,4 @@
+import { IconCircleX } from "@tabler/icons-react";
 import type { ErrorResponse } from "@utils/api";
 import { cn } from "@utils/helpers";
 import classNames from "classnames";
@@ -15,6 +16,7 @@ export interface NotifyProps<T> {
   duration?: number;
   icon?: React.ReactNode;
   backgroundColor?: string;
+  preventSuccessToast?: boolean;
 }
 interface NotificationProps<T> extends NotifyProps<T> {
   t: Toast;
@@ -28,12 +30,15 @@ export default function Notification<T>({
   promise,
   loadingMessage,
   duration = 3500,
+  preventSuccessToast = false,
 }: NotificationProps<T>) {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(!!promise);
 
   const [toastDuration] = useState(duration);
 
+  const [preventSuccess, setPreventSuccess] = useState(false);
+
   const closeToast = () => {
     setTimeout(() => {
       setLoading(false);
@@ -46,6 +51,7 @@ export default function Notification<T>({
     if (promise) {
       promise
         .then(() => {
+          if (preventSuccessToast) setPreventSuccess(true);
           setLoading(false);
           closeToast();
         })
@@ -65,7 +71,7 @@ export default function Notification<T>({
 
   return (
     <AnimatePresence>
-      {t.visible && (
+      {t.visible && !preventSuccess && (
         <motion.div
           initial={{ opacity: 1, y: -50 }}
           animate={{ opacity: 1, y: 0 }}
@@ -88,7 +94,7 @@ export default function Notification<T>({
               {loading ? (
                 <Loader2 size={14} className={"animate-spin"} />
               ) : error ? (
-                <XIcon size={14} />
+                <IconCircleX size={24} />
               ) : (
                 icon || <CheckIcon size={14} />
               )}

src/components/PeerGroupSelector.tsx

@@ -1,26 +1,46 @@
 import Badge from "@components/Badge";
 import { Checkbox } from "@components/Checkbox";
 import { CommandItem } from "@components/Command";
+import { DropdownInfoText } from "@components/DropdownInfoText";
+import FullTooltip from "@components/FullTooltip";
+import InlineLink from "@components/InlineLink";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
+import { Radio, RadioItem } from "@components/Radio";
 import { ScrollArea } from "@components/ScrollArea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import { AccessControlGroupCount } from "@components/ui/AccessControlGroupCount";
 import GroupBadge from "@components/ui/GroupBadge";
+import GroupBadgeWithEditPeers from "@components/ui/GroupBadgeWithEditPeers";
+import ResourceBadge from "@components/ui/ResourceBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { useSearch } from "@hooks/useSearch";
+import useSortedDropdownOptions from "@hooks/useSortedDropdownOptions";
 import { IconArrowBack } from "@tabler/icons-react";
+import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
 import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
 import { sortBy, trim, unionBy } from "lodash";
 import {
   ChevronsUpDown,
   FolderGit2,
+  GlobeIcon,
+  Layers3,
+  Layers3Icon,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   SearchIcon,
+  WorkflowIcon,
 } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { useElementSize } from "@/hooks/useElementSize";
-import type { Group, GroupPeer } from "@/interfaces/Group";
+import type { Group, GroupPeer, GroupResource } from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
 import type { Peer } from "@/interfaces/Peer";
+import { PolicyRuleResource } from "@/interfaces/Policy";
 
 interface MultiSelectProps {
   values: Group[];
@@ -29,6 +49,18 @@ interface MultiSelectProps {
   max?: number;
   disabled?: boolean;
   popoverWidth?: "auto" | number;
+  hideAllGroup?: boolean;
+  showPeerCount?: boolean;
+  disableInlineRemoveGroup?: boolean;
+  saveGroupAssignments?: boolean;
+  showRoutes?: boolean;
+  disabledGroups?: Group[];
+  dataCy?: string;
+  showResourceCounter?: boolean;
+  showResources?: boolean;
+  resource?: PolicyRuleResource;
+  onResourceChange?: (resource?: PolicyRuleResource) => void;
+  placeholder?: string;
 }
 export function PeerGroupSelector({
   onChange,
@@ -37,17 +69,44 @@ export function PeerGroupSelector({
   max,
   disabled = false,
   popoverWidth = "auto",
-}: MultiSelectProps) {
-  const { groups, dropdownOptions, setDropdownOptions } = useGroups();
+  hideAllGroup = false,
+  showPeerCount = false,
+  disableInlineRemoveGroup = false,
+  saveGroupAssignments = true,
+  showRoutes = false,
+  disabledGroups,
+  dataCy = "group-selector-dropdown",
+  showResourceCounter = true,
+  showResources = false,
+  resource,
+  onResourceChange,
+  placeholder = "Add or select group(s)...",
+}: Readonly<MultiSelectProps>) {
+  const { groups, dropdownOptions, setDropdownOptions, addDropdownOptions } =
+    useGroups();
   const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
   const [search, setSearch] = useState("");
+  const { data: resources, isLoading } = useFetchApi<NetworkResource[]>(
+    "/networks/resources",
+  );
 
   // Update dropdown options when groups change
   useEffect(() => {
     if (!groups) return;
-    const sortedGroups = sortBy([...groups], "name") as Group[];
-    setDropdownOptions(unionBy(sortedGroups, dropdownOptions, "name"));
+    const sortedGroups = sortBy([...groups], "name");
+
+    const clientGroups = dropdownOptions.filter(
+      (group) => group.keepClientState,
+    );
+    let uniqueGroups = unionBy(sortedGroups, dropdownOptions, "name");
+    uniqueGroups = unionBy(clientGroups, uniqueGroups, "name");
+
+    uniqueGroups = hideAllGroup
+      ? uniqueGroups.filter((group) => group.name !== "All")
+      : uniqueGroups;
+
+    setDropdownOptions(uniqueGroups);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groups]);
 
@@ -62,32 +121,44 @@ export function PeerGroupSelector({
 
   // Add group to the groupOptions if it does not exist
   const selectGroup = (name: string) => {
+    onResourceChange?.(undefined);
     const group = groups?.find((group) => group.name == name);
     const option = dropdownOptions.find((option) => option.name == name);
     const groupPeers: GroupPeer[] | undefined =
       (group?.peers as GroupPeer[]) || [];
-    groupPeers &&
-      groupPeers.push({ id: peer?.id as string, name: peer?.name as string });
+    const groupResources: GroupResource[] | undefined =
+      (group?.resources as GroupResource[]) || [];
+
+    if (peer) groupPeers?.push({ id: peer?.id as string, name: peer?.name });
 
     if (!group && !option) {
-      setDropdownOptions((previous) => [
-        ...previous,
-        { name: name, peers: groupPeers },
+      addDropdownOptions([
+        { name: name, peers: groupPeers, resources: groupResources },
       ]);
     }
 
     if (max == 1 && values.length == 1) {
-      onChange([{ name: name, id: group?.id, peers: groupPeers }]);
+      onChange([
+        {
+          name: name,
+          id: group?.id,
+          peers: groupPeers,
+          resources: groupResources,
+        },
+      ]);
     } else {
       onChange((previous) => [
         ...previous,
-        { name: name, id: group?.id, peers: groupPeers },
+        {
+          name: name,
+          id: group?.id,
+          peers: groupPeers,
+          resources: groupResources,
+        },
       ]);
     }
 
     if (max == 1) setOpen(false);
-
-    setSearch("");
   };
 
   // Remove group from the groupOptions if it does not have an id
@@ -102,21 +173,24 @@ export function PeerGroupSelector({
     const isSearching = search.length > 0;
     const groupDoesNotExist =
       dropdownOptions.filter((item) => item.name == trim(search)).length == 0;
-    return isSearching && groupDoesNotExist;
+    const isAllGroup = search.toLowerCase() == "all";
+    return isSearching && groupDoesNotExist && !isAllGroup;
   }, [search, dropdownOptions]);
 
   const [open, setOpen] = useState(false);
 
   const folderIcon = useMemo(() => {
-    return <FolderGit2 size={12} />;
+    return <FolderGit2 size={12} className={"shrink-0"} />;
   }, []);
 
   const peerIcon = useMemo(() => {
-    return <MonitorSmartphoneIcon size={14} />;
+    return <MonitorSmartphoneIcon size={14} className={"shrink-0"} />;
   }, []);
 
   const [slice, setSlice] = useState(10);
 
+  const [tab, setTab] = useState("groups");
+
   useEffect(() => {
     if (open) {
       setTimeout(() => {
@@ -127,26 +201,65 @@ export function PeerGroupSelector({
     }
   }, [open, dropdownOptions]);
 
+  const onPeerAssignmentChange = (oldGroup: Group, newGroup: Group) => {
+    const filtered = values.filter((group) => group.name !== oldGroup.name);
+    const union = unionBy([newGroup], filtered, "name");
+    onChange(union);
+  };
+
+  const sortedDropdownOptions = useSortedDropdownOptions(
+    dropdownOptions,
+    values,
+    open,
+  );
+
+  // Reset the search input when switching tabs
+  useEffect(() => {
+    setSearch("");
+    setTimeout(() => {
+      searchRef.current?.focus();
+    }, 0);
+  }, [tab]);
+
+  const searchPlaceholder =
+    tab === "groups"
+      ? 'Search groups or add new group by pressing "Enter"...'
+      : "Search resource...";
+
+  const selectResource = (resource?: NetworkResource) => {
+    onResourceChange?.(
+      resource
+        ? ({
+            id: resource?.id,
+            type: resource?.type,
+          } as PolicyRuleResource)
+        : undefined,
+    );
+    onChange([]);
+  };
+
   return (
     <Popover
       open={open}
       onOpenChange={(isOpen) => {
+        setOpen(isOpen);
         if (!isOpen && search.length > 0) {
           setTimeout(() => {
             setSearch("");
-          }, 100);
+          }, 200);
         }
-        setOpen(isOpen);
       }}
     >
       <PopoverTrigger asChild>
         <button
           className={cn(
-            "min-h-[46px] w-full relative items-center",
+            "min-h-[46px] w-full relative items-center group",
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
             "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
+            "disabled:pointer-events-none disabled:opacity-30 transition-all",
           )}
           disabled={disabled}
+          data-cy={dataCy}
           ref={inputRef}
         >
           <div
@@ -154,31 +267,76 @@ export function PeerGroupSelector({
               "flex items-center gap-2 border-nb-gray-700 flex-wrap h-full"
             }
           >
-            {values.map((group) => (
-              <GroupBadge
+            {resource && showResources && (
+              <ResourceBadge
                 className={"py-[3px]"}
-                group={group}
-                key={group.name}
-                onClick={() => {
-                  if (peer != undefined && group.name == "All") return; // Prevent removing the "All" group
-                  toggleGroupByName(group.name);
+                resource={resources?.find((r) => r.id === resource.id)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  selectResource();
                 }}
-                showX={peer != undefined ? group.name !== "All" : true}
+                showX={true}
               />
-            ))}
+            )}
+            {values.map((group) => {
+              return (
+                <div
+                  key={group.name}
+                  className={cn(
+                    showPeerCount
+                      ? "flex gap-x-1 gap-y-2 items-center justify-between w-full"
+                      : "",
+                  )}
+                >
+                  {showPeerCount ? (
+                    <GroupBadgeWithEditPeers
+                      className={"py-[3px]"}
+                      group={group}
+                      key={group.name}
+                      showNewBadge={true}
+                      onPeerAssignmentChange={onPeerAssignmentChange}
+                      useSave={saveGroupAssignments}
+                    />
+                  ) : (
+                    <GroupBadge
+                      className={"py-[3px]"}
+                      group={group}
+                      key={group.name}
+                      showNewBadge={true}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (disableInlineRemoveGroup) return;
+                        if (peer != undefined && group.name == "All") return; // Prevent removing the "All" group
+                        toggleGroupByName(group.name);
+                      }}
+                      showX={
+                        peer != undefined
+                          ? group.name !== "All"
+                          : !disableInlineRemoveGroup
+                      }
+                    />
+                  )}
+                </div>
+              );
+            })}
 
-            {values.length == 0 && (
-              <span className={"pl-1"}>Add or select group(s)...</span>
+            {values.length == 0 && !resource && (
+              <span className={"pl-1"}>{placeholder}</span>
             )}
           </div>
 
-          <div className={"pl-2"}>
-            <ChevronsUpDown size={18} className={"shrink-0"} />
+          <div className={"pl-2"} data-cy={"group-selector-open-close"}>
+            <ChevronsUpDown
+              size={18}
+              className={"shrink-0 group-hover:text-nb-gray-300 transition-all"}
+            />
           </div>
         </button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+        className="w-full p-0 shadow-sm shadow-nb-gray-950"
         style={{
           width: popoverWidth === "auto" ? width : popoverWidth,
         }}
@@ -199,18 +357,17 @@ export function PeerGroupSelector({
           <CommandList className={"w-full"}>
             <div className={"relative"}>
               <CommandInput
+                data-cy={"group-search-input"}
                 className={cn(
                   "min-h-[42px] w-full relative",
                   "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
                   "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
+                  "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
                 )}
                 ref={searchRef}
                 value={search}
                 onValueChange={setSearch}
-                placeholder={
-                  'Search groups or add new group by pressing "Enter"...'
-                }
+                placeholder={searchPlaceholder}
               />
               <div
                 className={
@@ -236,74 +393,287 @@ export function PeerGroupSelector({
               </div>
             </div>
 
-            <CommandGroup>
-              <ScrollArea
-                className={
-                  "max-h-[195px]  overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                }
-              >
-                {searchedGroupNotFound && (
-                  <CommandItem
-                    key={search}
-                    onSelect={() => {
-                      toggleGroupByName(search);
-                      searchRef.current?.focus();
-                    }}
-                    value={search}
-                    onClick={(e) => e.preventDefault()}
+            <Tabs defaultValue={"groups"} value={tab} onValueChange={setTab}>
+              {showResources && <TabTriggers searchRef={searchRef} />}
+              <TabsContent value={"groups"} className={"p-0 my-0"}>
+                <CommandGroup>
+                  <ScrollArea
+                    className={cn(
+                      "max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3",
+                      sortedDropdownOptions.length == 0 && !search && "py-0",
+                    )}
                   >
-                    <Badge variant={"gray-ghost"}>
-                      {folderIcon}
-                      {search}
-                    </Badge>
-                    <div className={"text-neutral-500 dark:text-nb-gray-300"}>
-                      Add this group by pressing{" "}
-                      <span className={"font-bold text-netbird"}>
-                        {"'Enter'"}
-                      </span>
-                    </div>
-                  </CommandItem>
-                )}
-
-                {dropdownOptions.slice(0, slice).map((option) => {
-                  const isSelected =
-                    values.find((group) => group.name == option.name) !=
-                    undefined;
-                  return (
-                    <CommandItem
-                      key={option.name}
-                      value={option.name + option.id}
-                      onSelect={() => {
-                        if (peer != undefined && option.name == "All") return; // Prevent removing the "All" group
-                        toggleGroupByName(option.name);
-                        searchRef.current?.focus();
-                      }}
-                      onClick={(e) => e.preventDefault()}
-                    >
-                      <div className={"flex items-center gap-2"}>
+                    {searchedGroupNotFound && (
+                      <CommandItem
+                        key={search}
+                        onSelect={() => {
+                          toggleGroupByName(search);
+                          searchRef.current?.focus();
+                        }}
+                        value={search}
+                        onClick={(e) => e.preventDefault()}
+                      >
                         <Badge variant={"gray-ghost"}>
                           {folderIcon}
-                          <TextWithTooltip text={option.name} maxChars={30} />
+                          {search}
                         </Badge>
-                      </div>
+                        <div
+                          className={"text-neutral-500 dark:text-nb-gray-300"}
+                        >
+                          Add this group by pressing{" "}
+                          <span className={"font-bold text-netbird"}>
+                            {"'Enter'"}
+                          </span>
+                        </div>
+                      </CommandItem>
+                    )}
 
-                      <div
-                        className={
-                          "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
-                        }
-                      >
-                        {peerIcon}
-                        {option.peers_count || 0} Peer(s)
-                        <Checkbox checked={isSelected} />
-                      </div>
-                    </CommandItem>
-                  );
-                })}
-              </ScrollArea>
-            </CommandGroup>
+                    {sortedDropdownOptions.slice(0, slice).map((option) => {
+                      const isSelected =
+                        values.find((group) => group.name == option.name) !=
+                        undefined;
+                      const peerCount =
+                        option.peers?.length ?? option?.peers_count ?? 0;
+
+                      const isDisabled = disabledGroups
+                        ? disabledGroups?.findIndex(
+                            (g) => g.id === option.id,
+                          ) !== -1
+                        : false;
+
+                      if (hideAllGroup && option?.name === "All") return;
+
+                      return (
+                        <FullTooltip
+                          content={
+                            <div className={"text-xs max-w-xs"}>
+                              This group is already part of the routing peer and
+                              can not be used for the access control groups.
+                            </div>
+                          }
+                          disabled={!isDisabled}
+                          className={"w-full block"}
+                          key={option.name}
+                        >
+                          <CommandItem
+                            key={option.name}
+                            value={option.name + option.id}
+                            disabled={isDisabled}
+                            onSelect={() => {
+                              if (peer != undefined && option.name == "All")
+                                return; // Prevent removing the "All" group
+                              if (isDisabled) return;
+                              toggleGroupByName(option.name);
+                              searchRef.current?.focus();
+                            }}
+                            className={cn(isDisabled && "opacity-40")}
+                            onClick={(e) => e.preventDefault()}
+                          >
+                            <div className={"flex items-center gap-2"}>
+                              <GroupBadge group={option} showNewBadge={true} />
+                            </div>
+
+                            <div className={"flex items-center gap-5"}>
+                              {option?.id && showRoutes && (
+                                <AccessControlGroupCount group_id={option.id} />
+                              )}
+
+                              {showResourceCounter && (
+                                <ResourcesCounter group={option} />
+                              )}
+
+                              <div
+                                className={
+                                  "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                                }
+                              >
+                                {peerIcon}
+                                {peerCount} Peer(s)
+                                <Checkbox checked={isSelected} />
+                              </div>
+                            </div>
+                          </CommandItem>
+                        </FullTooltip>
+                      );
+                    })}
+                  </ScrollArea>
+                </CommandGroup>
+              </TabsContent>
+              {showResources && (
+                <TabsContent value={"resources"} className={"p-0 my-0"}>
+                  <ResourcesList
+                    search={search}
+                    resources={resources}
+                    isLoading={isLoading}
+                    value={resource}
+                    onChange={selectResource}
+                  />
+                </TabsContent>
+              )}
+            </Tabs>
           </CommandList>
         </Command>
       </PopoverContent>
     </Popover>
   );
 }
+
+const TabTriggers = ({
+  searchRef,
+}: {
+  searchRef: React.MutableRefObject<HTMLInputElement | null>;
+}) => {
+  return (
+    <TabsList justify={"start"} className={"px-3"}>
+      <TabsTrigger
+        value={"groups"}
+        className={"text-[.8rem] font-normal"}
+        onClick={() => searchRef.current?.focus()}
+      >
+        <FolderGit2
+          className={
+            "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+          }
+          size={14}
+        />
+        Groups
+      </TabsTrigger>
+      <TabsTrigger
+        value={"resources"}
+        className={"text-[.8rem] font-normal"}
+        onClick={() => searchRef.current?.focus()}
+      >
+        <Layers3Icon
+          className={
+            "text-nb-gray-500 group-data-[state=active]/trigger:text-netbird transition-all"
+          }
+          size={14}
+        />
+        Resource
+      </TabsTrigger>
+    </TabsList>
+  );
+};
+
+const ResourcesCounter = ({ group }: { group: Group }) => {
+  return group?.resources_count && group.resources_count > 0 ? (
+    <div
+      className={
+        "text-nb-gray-300 font-medium flex items-center gap-2 transition-all"
+      }
+    >
+      <Layers3 size={14} className={"shrink-0"} />
+      {group.resources_count} Resource(s)
+    </div>
+  ) : null;
+};
+
+const resourcesSearchPredicate = (item: NetworkResource, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.address.toLowerCase().includes(lowerCaseQuery);
+};
+
+const ResourcesList = ({
+  search,
+  resources,
+  isLoading,
+  value,
+  onChange,
+}: {
+  search: string;
+  resources?: NetworkResource[];
+  isLoading: boolean;
+  value?: PolicyRuleResource;
+  onChange: (resource: NetworkResource) => void;
+}) => {
+  const [filteredItems, _, setSearch] = useSearch(
+    resources || [],
+    resourcesSearchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  useEffect(() => {
+    setSearch(search);
+  }, [search, setSearch]);
+
+  if (isLoading) {
+    return (
+      <div className={"max-h-[195px] flex flex-col gap-1 py-2 px-2"}>
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+        <Skeleton height={42} className={"rounded-md"} />
+      </div>
+    );
+  }
+
+  if (search != "" && filteredItems.length == 0) {
+    return (
+      <DropdownInfoText className={"mt-5 max-w-sm mx-auto"}>
+        There are no resources matching your search. Please try a different
+        search term.
+      </DropdownInfoText>
+    );
+  }
+
+  if (search == "" && filteredItems.length == 0) {
+    return (
+      <DropdownInfoText className={"mt-5 max-w-sm mx-auto"}>
+        There are no resources available yet. <br />
+        Go to <InlineLink href={"/networks"}>Networks</InlineLink> to add some
+        resources.
+      </DropdownInfoText>
+    );
+  }
+
+  return (
+    <Radio defaultValue={value?.id} name={"resource"} value={value?.id}>
+      <VirtualScrollAreaList
+        items={filteredItems}
+        onSelect={onChange}
+        itemClassName={"dark:aria-selected:bg-nb-gray-800/20"}
+        renderItem={(res) => {
+          return (
+            <Fragment key={res.id}>
+              <div className={"flex items-center gap-2"}>
+                <Badge
+                  useHover={true}
+                  data-cy={"group-badge"}
+                  variant={"gray-ghost"}
+                  className={cn("transition-all group whitespace-nowrap")}
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                >
+                  {res.type === "host" && (
+                    <WorkflowIcon size={12} className={"shrink-0"} />
+                  )}
+                  {res.type === "domain" && (
+                    <GlobeIcon size={12} className={"shrink-0"} />
+                  )}
+                  {res.type === "subnet" && (
+                    <NetworkIcon size={12} className={"shrink-0"} />
+                  )}
+
+                  <TextWithTooltip text={res?.name || ""} maxChars={20} />
+                </Badge>
+              </div>
+
+              <div className={"flex items-center gap-5"}>
+                <div
+                  className={
+                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                  }
+                >
+                  {res.address}
+                  <RadioItem value={res.id} />
+                </div>
+              </div>
+            </Fragment>
+          );
+        }}
+      />
+    </Radio>
+  );
+};

src/components/PeerSelector.tsx

@@ -1,20 +1,25 @@
-import { CommandItem } from "@components/Command";
+import { DropdownInfoText } from "@components/DropdownInfoText";
+import { DropdownInput } from "@components/DropdownInput";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
-import { ScrollArea } from "@components/ScrollArea";
-import SmallOSIcon from "@components/ui/SmallOSIcon";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { IconArrowBack } from "@tabler/icons-react";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { getOperatingSystem } from "@hooks/useOperatingSystem";
+import { useSearch } from "@hooks/useSearch";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
-import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
-import { sortBy, trim, unionBy } from "lodash";
-import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
+import { isRoutingPeerSupported } from "@utils/version";
+import { sortBy, unionBy } from "lodash";
+import { ArrowUpCircleIcon, ChevronsUpDown, MapPin } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { useElementSize } from "@/hooks/useElementSize";
-import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
+import { OSLogo } from "@/modules/peers/PeerOSCell";
+
+const MapPinIcon = memo(() => <MapPin size={12} />);
+MapPinIcon.displayName = "MapPinIcon";
 
 interface MultiSelectProps {
   value?: Peer;
@@ -23,6 +28,13 @@ interface MultiSelectProps {
   disabled?: boolean;
 }
 
+const searchPredicate = (item: Peer, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  if (item.hostname.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.ip.toLowerCase().startsWith(lowerCaseQuery);
+};
+
 export function PeerSelector({
   onChange,
   value,
@@ -30,24 +42,22 @@ export function PeerSelector({
   disabled = false,
 }: MultiSelectProps) {
   const { data: peers } = useFetchApi<Peer[]>("/peers");
-
-  const [dropdownOptions, setDropdownOptions] = useState<Peer[]>([]);
-  const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
-  const [search, setSearch] = useState("");
 
-  // Update dropdown options when peers change
+  const [unfilteredItems, setUnfilteredItems] = useState<Peer[]>([]);
+  const [filteredItems, search, setSearch] = useSearch(
+    unfilteredItems,
+    searchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  // Update unfiltered items when peers change
   useEffect(() => {
     if (!peers) return;
 
     // Sort
     let options = sortBy([...peers], "name") as Peer[];
 
-    // Filter out peers that are not linux
-    options = options.filter((peer) => {
-      return getOperatingSystem(peer.os) == OperatingSystem.LINUX;
-    });
-
     // Filter out excluded peers
     if (excludedPeers) {
       options = options.filter((peer) => {
@@ -56,7 +66,7 @@ export function PeerSelector({
       });
     }
 
-    setDropdownOptions(unionBy(options, dropdownOptions, "name"));
+    setUnfilteredItems(unionBy(options, unfilteredItems, "id"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [peers]);
 
@@ -68,38 +78,11 @@ export function PeerSelector({
       onChange(peer);
       setSearch("");
     }
+    setOpen(false);
   };
 
-  const peerNotFound = useMemo(() => {
-    const isSearching = search.length > 0;
-
-    // Search peer by ip or name
-    const peerFound =
-      dropdownOptions.filter((item) => {
-        return (
-          item.name.includes(search) ||
-          item.hostname.includes(search) ||
-          item.ip.includes(search)
-        );
-      }).length > 0;
-
-    return isSearching && !peerFound;
-  }, [search, dropdownOptions]);
-
   const [open, setOpen] = useState(false);
 
-  const [slice, setSlice] = useState(10);
-
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setSlice(dropdownOptions.length);
-      }, 100);
-    } else {
-      setSlice(10);
-    }
-  }, [open, dropdownOptions]);
-
   return (
     <Popover
       open={open}
@@ -115,7 +98,7 @@ export function PeerSelector({
       <PopoverTrigger asChild>
         <button
           className={cn(
-            "min-h-[42px] w-full relative items-center group",
+            "min-h-[46px] w-full relative items-center group",
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
             "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer enabled:hover:dark:bg-nb-gray-900/50",
             "disabled:opacity-40 disabled:cursor-default",
@@ -135,8 +118,7 @@ export function PeerSelector({
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
-                  <SmallOSIcon os={value.os} />
-                  <TextWithTooltip text={value.name} maxChars={20} />
+                  <TextWithTooltip text={value.name} maxChars={22} />
                 </div>
 
                 <div
@@ -144,7 +126,7 @@ export function PeerSelector({
                     "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
                   }
                 >
-                  <MapPin size={12} />
+                  <MapPinIcon />
                   {value.ip}
                 </div>
               </div>
@@ -158,117 +140,124 @@ 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 shadow-nb-gray-950"
         style={{
           width: width,
         }}
-        forceMount={true}
         align="start"
         side={"top"}
         sideOffset={10}
       >
-        <Command
-          className={"w-full flex"}
-          loop
-          filter={(value, search) => {
-            const formatValue = trim(value.toLowerCase());
-            const formatSearch = trim(search.toLowerCase());
-            if (formatValue.includes(formatSearch)) return 1;
-            return 0;
-          }}
-        >
-          <CommandList className={"w-full"}>
-            <div className={"relative"}>
-              <CommandInput
-                className={cn(
-                  "min-h-[42px] w-full relative",
-                  "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
-                  "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
-                )}
-                ref={searchRef}
-                value={search}
-                onValueChange={setSearch}
-                placeholder={"Search for peers by name or ip..."}
-              />
-              <div
-                className={
-                  "absolute left-0 top-0 h-full flex items-center pl-4"
-                }
-              >
-                <div className={"flex items-center"}>
-                  <SearchIcon size={14} />
-                </div>
-              </div>
-              <div
-                className={
-                  "absolute right-0 top-0 h-full flex items-center pr-4"
-                }
-              >
-                <div
-                  className={
-                    "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
-                  }
-                >
-                  <IconArrowBack size={10} />
-                </div>
-              </div>
-            </div>
+        <div className={"w-full"}>
+          <DropdownInput
+            value={search}
+            onChange={setSearch}
+            placeholder={"Search for peers by name or ip..."}
+          />
 
-            <div className={""}>
-              {dropdownOptions.length == 0 && !peerNotFound && (
-                <div
-                  className={
-                    "text-center pb-2 text-nb-gray-500 max-w-xs mx-auto"
-                  }
-                >
-                  {
-                    "Seems like you don't have any linux peers to assign as a routing peer."
-                  }
-                </div>
-              )}
-              {peerNotFound && (
-                <div className={"text-center pb-2 text-nb-gray-500"}>
-                  There are no peers matching your search.
-                </div>
-              )}
-              <CommandGroup>
-                <ScrollArea
-                  className={
-                    "max-h-[180px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                  }
-                >
-                  {dropdownOptions.slice(0, slice).map((option) => {
-                    return (
-                      <CommandItem
-                        key={option.name}
-                        value={option.name + option.id}
-                        onSelect={() => {
-                          togglePeer(option);
-                          setOpen(false);
-                        }}
+          {unfilteredItems.length == 0 && !search && (
+            <div className={"max-w-xs mx-auto"}>
+              <DropdownInfoText>
+                {"No peers available to select."}
+              </DropdownInfoText>
+            </div>
+          )}
+
+          {filteredItems.length == 0 && search != "" && (
+            <DropdownInfoText>
+              There are no peers matching your search.
+            </DropdownInfoText>
+          )}
+
+          {filteredItems.length > 0 && (
+            <VirtualScrollAreaList
+              items={filteredItems}
+              onSelect={(item) => {
+                const isSupported = isRoutingPeerSupported(
+                  item.version,
+                  item.os,
+                );
+                if (!isSupported) return;
+                togglePeer(item);
+              }}
+              renderItem={(option) => {
+                const os = getOperatingSystem(option.os);
+                const isSupported = isRoutingPeerSupported(
+                  option.version,
+                  option.os,
+                );
+                return (
+                  <FullTooltip
+                    disabled={isSupported}
+                    interactive={false}
+                    delayDuration={200}
+                    skipDelayDuration={350}
+                    className={"w-full flex items-center justify-between"}
+                    content={
+                      <div className={"max-w-[240px] text-xs"}>
+                        Please update NetBird to at least{" "}
+                        <span className={"text-netbird"}>v0.36.6</span> or later
+                        to use this peer as a routing peer.
+                      </div>
+                    }
+                  >
+                    <div
+                      className={cn(
+                        "flex items-center gap-2.5 text-sm",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          "flex items-center justify-center grayscale brightness-[100%] contrast-[40%]",
+                          "w-4 h-4 shrink-0",
+                          os === OperatingSystem.WINDOWS && "p-[2.5px]",
+                          os === OperatingSystem.APPLE && "p-[2.7px]",
+                          os === OperatingSystem.FREEBSD && "p-[1.5px]",
+                          !isSupported && "opacity-50",
+                        )}
                       >
-                        <div className={"flex items-center gap-2.5 text-sm"}>
-                          <SmallOSIcon os={option.os} />
-                          <TextWithTooltip text={option.name} maxChars={20} />
-                        </div>
+                        <OSLogo os={option.os} />
+                      </div>
 
-                        <div
-                          className={
-                            "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
-                          }
-                        >
-                          <MapPin size={12} />
-                          {option.ip}
+                      <div className={cn(!isSupported && "opacity-50")}>
+                        <TextWithTooltip
+                          text={option.name}
+                          maxChars={22}
+                          hideTooltip={!isSupported}
+                        />
+                      </div>
+                      {!isSupported && (
+                        <div className={"relative"}>
+                          <span className="animate-ping absolute left-0 inline-flex h-[14px] w-[14px] rounded-full bg-netbird opacity-20"></span>
+                          <ArrowUpCircleIcon
+                            size={14}
+                            className={"text-netbird"}
+                          />
                         </div>
-                      </CommandItem>
-                    );
-                  })}
-                </ScrollArea>
-              </CommandGroup>
-            </div>
-          </CommandList>
-        </Command>
+                      )}
+                    </div>
+
+                    <div
+                      className={cn(
+                        "font-medium flex items-center gap-1 font-mono text-[10px]",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                        !isSupported && "opacity-50",
+                      )}
+                    >
+                      <MapPinIcon />
+                      {option.ip}
+                    </div>
+                  </FullTooltip>
+                );
+              }}
+            />
+          )}
+        </div>
       </PopoverContent>
     </Popover>
   );

src/components/PortSelector.tsx

@@ -73,6 +73,7 @@ export function PortSelector({
             "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
             "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
           )}
+          data-cy={"port-selector"}
           disabled={disabled}
           ref={inputRef}
         >
@@ -138,6 +139,7 @@ export function PortSelector({
                   "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
                   "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
                 )}
+                data-cy={"port-input"}
                 typeof={"number"}
                 ref={searchRef}
                 value={search}

src/components/Radio.tsx

@@ -0,0 +1,71 @@
+import * as RadioPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { forwardRef } from "react";
+
+type RadioVariants = VariantProps<typeof variants>;
+
+const variants = cva([], {
+  variants: {
+    variant: {
+      default: [
+        "dark:data-[state=unchecked]:bg-nb-gray-950 dark:border-nb-gray-900 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
+        "dark:data-[state=checked]:bg-netbird",
+      ],
+    },
+  },
+});
+
+const Radio = forwardRef<
+  React.ElementRef<typeof RadioPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root> & RadioVariants
+>(
+  (
+    { className, children, variant = "default", defaultValue, ...props },
+    ref,
+  ) => (
+    <RadioPrimitive.Root
+      ref={ref}
+      defaultValue={defaultValue}
+      name={props.name}
+      {...props}
+    >
+      {children}
+    </RadioPrimitive.Root>
+  ),
+);
+Radio.displayName = RadioPrimitive.Root.displayName;
+
+type Props = {
+  value: string;
+  className?: string;
+} & RadioVariants;
+
+const RadioItem = ({ value, className, variant = "default" }: Props) => {
+  return (
+    <RadioPrimitive.Item
+      value={value}
+      className={cn(
+        variants({ variant }),
+        "border-neutral-900",
+        "peer h-5 w-5 shrink-0 rounded-full 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 relative",
+        className,
+      )}
+    >
+      <RadioPrimitive.Indicator asChild={true}>
+        <div
+          className={cn(
+            "h-2 w-2 bg-netbird absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center rounded-full",
+            "data-[state=checked]:bg-white data-[state=checked]:text-neutral-50 ",
+          )}
+        ></div>
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Item>
+  );
+};
+RadioItem.displayName = RadioPrimitive.Item.displayName;
+
+export { Radio, RadioItem };

src/components/ScrollArea.tsx

@@ -1,27 +1,45 @@
-"use client";
-
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@utils/helpers";
 import * as React from "react";
 
+type AdditionalScrollAreaProps = {
+  withoutViewport?: boolean;
+};
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+    AdditionalScrollAreaProps
+>(({ className, children, withoutViewport = false, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+    {withoutViewport ? (
+      children
+    ) : (
+      <ScrollAreaViewport>{children}</ScrollAreaViewport>
+    )}
+    <ScrollBar orientation="horizontal" />
+    <ScrollBar orientation="vertical" />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <ScrollAreaPrimitive.Viewport
+    ref={ref}
+    className={cn("h-full w-full rounded-[inherit]", className)}
+    {...props}
+  />
+));
+ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
@@ -30,11 +48,9 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
+      "flex select-none touch-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 p-[1px]",
+      orientation === "horizontal" && "w-full h-2.5 p-[1px] bottom-0",
       className,
     )}
     {...props}
@@ -43,10 +59,22 @@ const ScrollBar = React.forwardRef<
       className={cn(
         "relative rounded-full bg-neutral-200 dark:bg-nb-gray-800",
         orientation === "vertical" && "flex-1",
+        orientation === "horizontal" && "h-full",
       )}
     />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+const MemoizedScrollArea = React.memo(ScrollArea);
+const MemoizedScrollAreaViewport = React.memo(ScrollAreaViewport);
+const MemoizedScrollBar = React.memo(ScrollBar);
+
+export {
+  MemoizedScrollArea,
+  MemoizedScrollAreaViewport,
+  MemoizedScrollBar,
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+};

src/components/SegmentedTabs.tsx

@@ -21,12 +21,19 @@ function SegmentedTabs({ value, onChange, children }: Props) {
   );
 }
 
-function List({ children }: { children: React.ReactNode }) {
+function List({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
     <TabsList
-      className={
-        "bg-nb-gray-930/70 p-1.5 rounded-t-lg flex justify-center gap-1 border border-b-0 border-nb-gray-900"
-      }
+      className={cn(
+        "bg-nb-gray-930/70 p-1.5 rounded-t-lg flex justify-center gap-1 border border-b-0 border-nb-gray-900",
+        className,
+      )}
     >
       {children}
     </TabsList>

src/components/Separator.tsx

@@ -1,7 +1,3 @@
 export default function Separator() {
-  return (
-    <span
-      className={"h-[1px] w-full dark:bg-nb-gray-900 bg-nb-gray-100 block"}
-    ></span>
-  );
+  return <span className={"h-[1px] w-full bg-zinc-700/40 block"}></span>;
 }

src/components/SidebarItem.tsx

@@ -60,10 +60,12 @@ export default function SidebarItem({
         <li className={"px-4 cursor-pointer"}>
           <button
             className={classNames(
-              "rounded-lg text-base w-full ",
+              "rounded-lg text-[.87rem] w-full ",
               "font-normal ",
               className,
-              isChild ? "pl-7 pr-2 py-2 mt-1 mb-0.5" : "py-2 px-3",
+              isChild
+                ? "pl-7 pr-2 py-[.45rem] mt-1 mb-0.5"
+                : "py-[.45rem] px-3",
               isActive
                 ? "text-gray-900 bg-gray-200 dark:text-white dark:bg-nb-gray-900"
                 : "text-gray-600 hover:bg-gray-200 dark:text-nb-gray-400 dark:hover:bg-nb-gray-900/50",

src/components/Slider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@utils/helpers";
+import React from "react";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
+      <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-neutral-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

src/components/SquareIcon.tsx

@@ -15,6 +15,7 @@ const iconVariant = cva(
         green: "bg-green-950 border-green-500 text-green-500",
         purple: "bg-purple-950 border-purple-500 text-purple-500",
         indigo: "bg-indigo-950 border-indigo-500 text-indigo-500",
+        yellow: "bg-yellow-950 border-yellow-400 text-yellow-400",
       },
       size: {
         small: "w-8 h-8",

src/components/Steps.tsx

@@ -4,9 +4,18 @@ import React from "react";
 type Props = {
   children: React.ReactNode;
   className?: string;
+  horizontal?: boolean;
 };
-export default function Steps({ children, className }: Props) {
-  return <div className={cn("pt-4", className)}>{children}</div>;
+export default function Steps({
+  children,
+  className,
+  horizontal = false,
+}: Readonly<Props>) {
+  return (
+    <div className={cn("pt-4", horizontal && "flex", className)}>
+      {children}
+    </div>
+  );
 }
 
 type StepProps = {
@@ -14,21 +23,32 @@ type StepProps = {
   step: number;
   line?: boolean;
   center?: boolean;
+  horizontal?: boolean;
 };
 
-const Step = ({ children, step, line = true, center = false }: StepProps) => {
+const Step = ({
+  children,
+  step,
+  line = true,
+  center = false,
+  horizontal,
+}: StepProps) => {
   return (
     <div
       className={cn(
-        "flex gap-4 items-start min-w-full justify-start relative pb-6 -mx-1.5 group px-[2px]",
+        "flex gap-4 items-start  justify-start relative pb-6 -mx-1.5 group px-[2px]",
         center && "items-center",
+        horizontal ? "flex-col items-center" : "min-w-full",
       )}
     >
       {line && (
         <span
-          className={
-            "h-full w-[2px] bg-nb-gray-100 dark:bg-nb-gray-800 absolute left-0 ml-[18px] z-0 transition-all"
-          }
+          className={cn(
+            "bg-nb-gray-100 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]",
+          )}
         ></span>
       )}
 
@@ -36,7 +56,7 @@ const Step = ({ children, step, line = true, center = false }: StepProps) => {
         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",
+          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200 step-circle",
         )}
       >
         {step}

src/components/Tabs.tsx

@@ -39,7 +39,7 @@ const Tabs = React.forwardRef<
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
 type TabListProps = {
-  justify?: "start" | "end" | "center";
+  justify?: "start" | "end" | "center" | "between";
 };
 
 const TabsList = React.forwardRef<
@@ -54,18 +54,21 @@ const TabsList = React.forwardRef<
       justify == "center" && "justify-center justify-items-end",
       justify == "start" && "justify-start",
       justify == "end" && "justify-end",
+      justify == "between" && "justify-between",
     )}
     {...props}
   >
-    <ScrollArea>
-      <div className={"relative z-[1] flex flex-nowrap"}>{props.children}</div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
     <span
       className={
         "absolute left-0 dark:bg-nb-gray-900 bg-nb-gray-100 w-full h-[1px] bottom-0 z-0"
       }
     />
+    <ScrollArea>
+      <div className={"relative z-[1] flex flex-nowrap w-full "}>
+        {props.children}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   </TabsPrimitive.List>
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;

src/components/Textarea.tsx

@@ -1,11 +1,16 @@
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
+type TextareaVariants = VariantProps<typeof inputVariants>;
+
 export interface InputProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    TextareaVariants {
   error?: string;
+  customElement?: React.ReactNode;
+  resize?: boolean;
 }
 
 const inputVariants = cva("", {
@@ -15,6 +20,10 @@ const inputVariants = cva("", {
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
+      darker: [
+        "dark:bg-nb-gray-900/40 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 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: [
         "dark:bg-red-950/30 dark:placeholder:text-red-400/70 placeholder:text-red-500 border-red-500 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",
@@ -24,7 +33,10 @@ const inputVariants = cva("", {
 });
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, InputProps>(
-  ({ className, error, ...props }, ref) => {
+  (
+    { className, variant = "default", resize, customElement, error, ...props },
+    ref,
+  ) => {
     return (
       <>
         <div className={cn("flex relative")}>
@@ -32,14 +44,20 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, InputProps>(
             ref={ref}
             {...props}
             className={cn(
-              inputVariants({ variant: error ? "error" : "default" }),
-              "flex w-full rounded-md  bg-white px-3 py-2 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50  ",
+              inputVariants({ variant: error ? "error" : variant }),
+              "flex w-full min-h-[42px] rounded-md bg-white px-3 pb-3 pt-2.5 text-sm file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50  ",
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
               "border",
+              "overflow-hidden",
               className,
+              resize ? "resize" : "resize-none",
             )}
+            style={{
+              height: variant === "darker" ? "42px" : "auto",
+            }}
           />
+          {customElement && customElement}
         </div>
         {error && (
           <Paragraph className={"text-xs !text-red-500 mt-2"}>

src/components/ToggleSwitch.tsx

@@ -36,29 +36,36 @@ const switchVariants = cva("", {
 
 const ToggleSwitch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & SwitchVariants
->(({ className, size = "default", variant = "default", ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex  shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50  dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 ",
-      className,
-      switchVariants({ size, variant }),
-    )}
-    {...props}
-    onClick={(e) => {
-      e.stopPropagation();
-      props.onClick?.(e);
-    }}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
+    SwitchVariants & { dataCy?: string }
+>(
+  (
+    { className, size = "default", variant = "default", dataCy, ...props },
+    ref,
+  ) => (
+    <SwitchPrimitives.Root
       className={cn(
-        switchVariants({ "thumb-size": size }),
-        "pointer-events-none block  rounded-full bg-white shadow-lg ring-0 transition-transform  data-[state=unchecked]:translate-x-0 dark:bg-white",
+        "peer inline-flex  shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50  dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 ",
+        className,
+        switchVariants({ size, variant }),
       )}
-    />
-  </SwitchPrimitives.Root>
-));
+      {...props}
+      data-cy={dataCy}
+      onClick={(e) => {
+        e.stopPropagation();
+        props.onClick?.(e);
+      }}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          switchVariants({ "thumb-size": size }),
+          "pointer-events-none block  rounded-full bg-white shadow-lg ring-0 transition-transform  data-[state=unchecked]:translate-x-0 dark:bg-white",
+        )}
+      />
+    </SwitchPrimitives.Root>
+  ),
+);
 ToggleSwitch.displayName = SwitchPrimitives.Root.displayName;
 
 export { ToggleSwitch };

src/components/Tooltip.tsx

@@ -10,6 +10,9 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+export const tooltipClasses =
+  "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white  text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50";
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -19,10 +22,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       asChild={true}
       sideOffset={sideOffset}
-      className={cn(
-        "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white  text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50",
-        className,
-      )}
+      className={cn(tooltipClasses, className)}
       {...props}
     >
       <div>{props.children}</div>

src/components/VerticalTabs.tsx

@@ -11,17 +11,36 @@ type Props = {
   onChange: (value: string) => void;
   children: React.ReactNode;
 };
+
+const TabSwitchContext = React.createContext<{
+  switchTab: (value: string) => void;
+}>({
+  switchTab: () => {},
+});
+
+export const useTabSwitchContext = () => {
+  return React.useContext(TabSwitchContext);
+};
+
 function VerticalTabs({ value, onChange, children }: Props) {
   return (
     <TabContext.Provider value={value || ""}>
-      <Tabs.Root
-        orientation={"vertical"}
-        className={"block lg:flex bg-nb-gray"}
-        value={value}
-        onValueChange={(value) => onChange(value)}
+      <TabSwitchContext.Provider
+        value={{
+          switchTab: (value: string) => {
+            onChange(value);
+          },
+        }}
       >
-        {children}
-      </Tabs.Root>
+        <Tabs.Root
+          orientation={"vertical"}
+          className={"block lg:flex bg-nb-gray"}
+          value={value}
+          onValueChange={(value) => onChange(value)}
+        >
+          {children}
+        </Tabs.Root>
+      </TabSwitchContext.Provider>
     </TabContext.Provider>
   );
 }
@@ -32,7 +51,7 @@ function List({ children }: { children: React.ReactNode }) {
     <Tabs.List
       className={cn(
         "px-4 py-4 whitespace-nowrap overflow-y-hidden shrink-0 no-scrollbar",
-        "lg:h-full items-start bg-nb-gray border-b border-nb-gray-930",
+        "lg:h-full items-start bg-nb-gray border-b-0 border-nb-gray-930",
         "flex lg:flex-col lg:gap-1",
       )}
       style={{

src/components/VirtualScrollAreaList.tsx

@@ -0,0 +1,144 @@
+import {
+  MemoizedScrollArea,
+  MemoizedScrollAreaViewport,
+} from "@components/ScrollArea";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+
+type Props<T extends { id?: string }> = {
+  items: T[];
+  onSelect: (item: T) => void;
+  renderItem?: (item: T) => React.ReactNode;
+  itemClassName?: string;
+};
+
+export function VirtualScrollAreaList<T extends { id?: string }>({
+  items,
+  onSelect,
+  renderItem,
+  itemClassName,
+}: Readonly<Props<T>>) {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    setSelected(0);
+  }, [items]);
+
+  const scrollToItem = useCallback((index: number) => {
+    virtuosoRef.current?.scrollIntoView({
+      index,
+      behavior: "auto",
+      align: "center",
+    });
+  }, []);
+
+  const navigation = useCallback(
+    (e: KeyboardEvent) => {
+      if (items.length === 0) return;
+      const length = items.length - 1;
+      if (e.code === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+        e.preventDefault();
+        const newSelected = selected === 0 ? length : selected - 1;
+        setSelected(newSelected);
+        scrollToItem(newSelected);
+      } else if (e.key === "ArrowDown" || e.key === "Tab") {
+        e.preventDefault();
+        const newSelected = selected === length ? 0 : selected + 1;
+        setSelected(newSelected);
+        scrollToItem(newSelected);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onSelect?.(items[selected]);
+      }
+    },
+    [items, scrollToItem, selected],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", navigation);
+    return () => {
+      window.removeEventListener("keydown", navigation);
+    };
+  }, [navigation]);
+
+  const renderMemoizedItem = useMemo(() => renderItem, [renderItem]);
+
+  return (
+    <MemoizedScrollArea
+      withoutViewport={true}
+      className={"max-h-[195px] flex flex-col gap-1 py-2"}
+    >
+      <Virtuoso
+        ref={virtuosoRef}
+        overscan={50}
+        data={items}
+        computeItemKey={(index) => items[index].id as string}
+        context={{ selected, setSelected, onClick: onSelect }}
+        itemContent={(index, option, { selected, setSelected, onClick }) => {
+          return (
+            <VirtualScrollListItemWrapper
+              onMouseEnter={() => setSelected(index)}
+              id={option.id}
+              onClick={() => onClick(option)}
+              ariaSelected={selected === index}
+              className={itemClassName}
+            >
+              {renderMemoizedItem ? renderMemoizedItem(option) : option.id}
+            </VirtualScrollListItemWrapper>
+          );
+        }}
+        style={{ height: 195 }}
+        components={{
+          Scroller: MemoizedScrollAreaViewport,
+        }}
+      />
+    </MemoizedScrollArea>
+  );
+}
+
+type ItemWrapperProps = {
+  children: React.ReactNode;
+  id?: string;
+  onMouseEnter?: () => void;
+  onClick?: () => void;
+  ariaSelected?: boolean;
+  className?: string;
+};
+
+export const VirtualScrollListItemWrapper = memo(
+  ({
+    id,
+    children,
+    onClick,
+    onMouseEnter,
+    ariaSelected,
+    className,
+  }: ItemWrapperProps) => {
+    return (
+      <div
+        key={id ?? undefined}
+        className={"pr-3 pl-2 webkit-scroll"}
+        onMouseEnter={onMouseEnter}
+        onClick={onClick}
+      >
+        <div
+          className={cn(
+            "text-xs flex justify-between py-2 px-3 cursor-pointer items-center rounded-md",
+            "bg-transparent dark:aria-selected:bg-nb-gray-800/50",
+            className,
+          )}
+          aria-selected={ariaSelected}
+          role={"listitem"}
+          tabIndex={0}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+VirtualScrollListItemWrapper.displayName = "VirtualScrollListItemWrapper";

src/components/modal/Modal.tsx

@@ -31,8 +31,9 @@ const ModalOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed top-0 left-0 bottom-0 right-0 grid z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-neutral-950/70",
+      "fixed top-0 left-0 bottom-0 right-0 grid z-50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       "mx-auto place-items-start overflow-y-auto md:py-16",
+      "bg-black/30 dark:bg-black/50 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -65,7 +66,7 @@ const ModalContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "mx-auto relative top-0 z-50 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]: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  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",
             className,
             maxWidthClass,
           )}
@@ -75,7 +76,10 @@ const ModalContent = React.forwardRef<
           <>
             {children}
             {showClose && (
-              <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
+              <DialogPrimitive.Close
+                data-cy={"modal-close"}
+                className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+              >
                 <X className="h-4 w-4" />
                 <span className="sr-only">Close</span>
               </DialogPrimitive.Close>

src/components/modal/ModalHeader.tsx

@@ -9,6 +9,9 @@ interface Props extends IconVariant {
   description: string | React.ReactNode;
   className?: string;
   margin?: string;
+  truncate?: boolean;
+  children?: React.ReactNode;
+  center?: boolean;
 }
 export default function ModalHeader({
   icon,
@@ -17,14 +20,32 @@ export default function ModalHeader({
   color = "netbird",
   className = "pb-6 px-8",
   margin = "mt-0",
+  truncate = false,
+  children,
+  center,
 }: Props) {
   return (
-    <div className={className}>
-      <div className={"flex items-start gap-5 pr-10"}>
+    <div className={cn(className, "min-w-0")}>
+      <div className={"flex items-start gap-5 min-w-0"}>
         {icon && <SquareIcon color={color} icon={icon} />}
-        <div>
-          <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
-          <Paragraph className={cn("text-sm", margin)}>{description}</Paragraph>
+        <div className={cn("min-w-0", center && "text-center")}>
+          <h2
+            className={cn(
+              "text-lg my-0 leading-[1.5]",
+              center && "text-center",
+            )}
+          >
+            {title}
+          </h2>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <Paragraph
+              className={cn("text-sm", margin, truncate && "!block truncate")}
+            >
+              {description}
+            </Paragraph>
+          )}
         </div>
       </div>
     </div>

src/components/select/SelectDropdown.tsx

@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import { CommandItem } from "@components/Command";
+import Paragraph from "@components/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
 import { SelectDropdownSearchInput } from "@components/select/SelectDropdownSearchInput";
@@ -31,6 +32,7 @@ interface SelectDropdownProps {
   popoverWidth?: "auto" | number;
   options: SelectOption[];
   showSearch?: boolean;
+  showValues?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   isLoading?: boolean;
@@ -43,6 +45,7 @@ export function SelectDropdown({
   popoverWidth = "auto",
   options,
   showSearch = false,
+  showValues = false,
   placeholder = "Select...",
   searchPlaceholder = "Search...",
   isLoading = false,
@@ -186,6 +189,7 @@ export function SelectDropdown({
                       option={option}
                       toggle={toggle}
                       key={option.value}
+                      showValue={showValues}
                     />
                   ))}
                 </div>
@@ -201,9 +205,11 @@ export function SelectDropdown({
 const SelectDropdownItem = ({
   option,
   toggle,
+  showValue = false,
 }: {
   option: SelectOption;
   toggle: (value: string) => void;
+  showValue?: boolean;
 }) => {
   const value = option.value || "" + option.label || "";
   const elementRef = useRef<HTMLDivElement>(null);
@@ -233,6 +239,13 @@ const SelectDropdownItem = ({
               <span className={"text-nb-gray-200"}>{option.label}</span>
             </div>
           </div>
+          {showValue && (
+            <div className={"flex items-center gap-2.5 p-1"}>
+              <Paragraph className={cn("text-sm text-right")}>
+                {option.value}
+              </Paragraph>
+            </div>
+          )}
         </CommandItem>
       ) : (
         <div className={"h-[35px] py-1 px-2"}></div>

src/components/skeletons/SkeletonPeerDetail.tsx

@@ -0,0 +1,36 @@
+import Skeleton from "react-loading-skeleton";
+
+export default function SkeletonPeerDetail() {
+  return (
+    <div className={"w-full mt-6 p-default"}>
+      <div className={"flex flex-wrap w-full justify-between max-w-6xl "}>
+        <Skeleton height={24} width={300} className={"rounded-md"} />
+      </div>
+      <div className={"flex flex-wrap w-full justify-between mt-4 max-w-6xl "}>
+        <Skeleton height={42} width={400} className={"rounded-md"} />
+        <div className={"flex gap-3"}>
+          <Skeleton height={42} width={80} className={"rounded-md"} />
+          <Skeleton height={42} width={120} className={"rounded-md"} />
+        </div>
+      </div>
+      <div
+        className={
+          "flex flex-wrap w-full justify-between mt-6 max-w-6xl gap-10"
+        }
+      >
+        <Skeleton
+          height={400}
+          width={"100%"}
+          className={"rounded-md"}
+          containerClassName={"flex-1 "}
+        />
+        <Skeleton
+          height={300}
+          width={"100%"}
+          className={"rounded-md opacity-30"}
+          containerClassName={"flex-1 "}
+        />
+      </div>
+    </div>
+  );
+}

src/components/skeletons/SkeletonTable.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@utils/helpers";
+import * as React from "react";
 import Skeleton from "react-loading-skeleton";
 
 type Props = {
@@ -8,24 +9,10 @@ type Props = {
 export default function SkeletonTable({ withHeader = true }: Props) {
   return (
     <div className={"w-full"}>
-      {withHeader && (
-        <div
-          className={
-            "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between"
-          }
-        >
-          <div className={"flex gap-x-4 gap-y-6"}>
-            <Skeleton height={42} width={400} className={"rounded-md"} />
-            <Skeleton height={42} width={140} className={"rounded-md"} />
-            <Skeleton height={42} width={190} className={"rounded-md"} />
-            <Skeleton height={42} width={50} className={"rounded-md"} />
-          </div>
-          <Skeleton height={42} width={120} className={"rounded-md"} />
-        </div>
-      )}
+      {withHeader && <SkeletonTableHeader />}
       <Skeleton
         height={48}
-        containerClassName={"flex-1 "}
+        containerClassName={"flex"}
         className={cn(withHeader && "mt-8")}
       />
       <div>
@@ -60,3 +47,28 @@ export function TableSkeletonRow({ odd = false }: RowProps) {
     </div>
   );
 }
+
+type SkeletonTableHeaderProps = {
+  className?: string;
+};
+
+export const SkeletonTableHeader = ({
+  className,
+}: SkeletonTableHeaderProps) => {
+  return (
+    <div
+      className={cn(
+        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between",
+        className,
+      )}
+    >
+      <div className={"flex gap-x-4 gap-y-6"}>
+        <Skeleton height={42} width={400} className={"rounded-md"} />
+        <Skeleton height={42} width={140} className={"rounded-md"} />
+        <Skeleton height={42} width={190} className={"rounded-md"} />
+        <Skeleton height={42} width={50} className={"rounded-md"} />
+      </div>
+      <Skeleton height={42} width={120} className={"rounded-md"} />
+    </div>
+  );
+};

src/components/table/DataTable.tsx

@@ -1,7 +1,9 @@
 "use client";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
+import { DataTableHeadingPortal } from "@components/table/DataTableHeadingPortal";
 import { DataTablePagination } from "@components/table/DataTablePagination";
+import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
   Table,
   TableBody,
@@ -9,6 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 } from "@components/table/Table";
 import NoResults from "@components/ui/NoResults";
 import {
@@ -27,6 +30,8 @@ import {
   getSortedRowModel,
   PaginationState,
   Row,
+  RowSelectionState,
+  SortingFn,
   SortingState,
   Table as TanStackTable,
   useReactTable,
@@ -51,14 +56,21 @@ declare module "@tanstack/table-core" {
   interface FilterMeta {
     itemRank: RankingInfo;
   }
+  interface SortingFns {
+    checkbox: SortingFn<unknown>;
+  }
 }
 
 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
-  const val = row.getValue(columnId);
-  if (!val) return false;
-  if (typeof val !== "string") return false;
-  const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
-  return val.toLowerCase().includes(lowerCaseValue);
+  try {
+    const val = row.getValue(columnId);
+    if (!val) return false;
+    if (typeof val !== "string") return false;
+    const lowerCaseValue = removeAllSpaces(trim(value.toLowerCase()));
+    return val.toLowerCase().includes(lowerCaseValue);
+  } catch (e) {
+    return false;
+  }
 };
 
 const exactMatch: FilterFn<any> = (row, columnId, value) => {
@@ -93,6 +105,20 @@ const arrIncludesSomeExact: FilterFn<any> = (
   return value.some((val) => val === rowValue);
 };
 
+const checkboxSort: SortingFn<any> = (rowA, rowB, columnId) => {
+  const valueA =
+    columnId === "select" ? rowA.getIsSelected() : rowA.getValue(columnId);
+  const valueB =
+    columnId === "select" ? rowB.getIsSelected() : rowB.getValue(columnId);
+  if (valueA && !valueB) {
+    return -1;
+  }
+  if (!valueA && valueB) {
+    return 1;
+  }
+  return 0;
+};
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[] | undefined;
@@ -100,6 +126,7 @@ interface DataTableProps<TData, TValue> {
   aboveTable?: (table: TanStackTable<TData>) => React.ReactNode;
   searchPlaceholder?: string;
   columnVisibility?: VisibilityState;
+  setColumnVisibility?: React.Dispatch<React.SetStateAction<VisibilityState>>;
   sorting?: SortingState;
   setSorting?: React.Dispatch<React.SetStateAction<SortingState>>;
   text?: string;
@@ -117,10 +144,25 @@ interface DataTableProps<TData, TValue> {
   wrapperClassName?: string;
   tableClassName?: string;
   searchClassName?: string;
-  showSearch?: boolean;
+  showSearchAndFilters?: boolean;
   rightSide?: (table: TanStackTable<TData>) => React.ReactNode;
   manualPagination?: boolean;
   showHeader?: boolean;
+  rowSelection?: RowSelectionState;
+  setRowSelection?: React.Dispatch<React.SetStateAction<RowSelectionState>>;
+  useRowId?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
+  showResetFilterButton?: boolean;
+  onFilterReset?: () => void;
+  wrapperComponent?: React.ElementType;
+  wrapperProps?: any;
+  keepStateInLocalStorage?: boolean;
+  paginationPaddingClassName?: string;
+  tableCellClassName?: string;
+  initialSelectionState?: RowSelectionState;
+  initialPageSize?: number;
+  uniqueKey?: string;
+  resetRowSelectionOnSearch?: boolean;
 }
 
 export function DataTable<TData, TValue>(props: DataTableProps<TData, TValue>) {
@@ -134,6 +176,7 @@ export function DataTableContent<TData, TValue>({
   children,
   searchPlaceholder = "Search...",
   columnVisibility = {},
+  setColumnVisibility,
   sorting = [],
   setSorting,
   text = "rows",
@@ -154,25 +197,46 @@ export function DataTableContent<TData, TValue>({
   rightSide,
   manualPagination = false,
   showHeader = true,
+  rowSelection,
+  setRowSelection,
+  useRowId,
+  headingTarget,
+  showResetFilterButton = true,
+  onFilterReset,
+  showSearchAndFilters = true,
+  wrapperProps,
+  wrapperComponent,
+  keepStateInLocalStorage = true,
+  paginationPaddingClassName,
+  tableCellClassName,
+  initialPageSize = 10,
+  uniqueKey,
+  resetRowSelectionOnSearch = true,
 }: DataTableProps<TData, TValue>) {
   const path = usePathname();
+
   const [columnFilters, setColumnFilters] = useLocalStorage<ColumnFiltersState>(
-    "netbird-table-columns" + path,
+    `netbird-table-columns${uniqueKey ? "/" + (uniqueKey as string) : path}`,
     [],
+    keepStateInLocalStorage,
   );
   const [globalSearch, setGlobalSearch] = useLocalStorage(
-    "netbird-table-search" + path,
+    `netbird-table-search${uniqueKey ? "/" + (uniqueKey as string) : path}`,
     "",
+    keepStateInLocalStorage,
   );
 
   const [paginationState, setPaginationState] =
-    useLocalStorage<PaginationState>("netbird-table-pagination" + path, {
-      pageIndex: 0,
-      pageSize: 10,
-    });
-
-  const [tableColumnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>(columnVisibility);
+    useLocalStorage<PaginationState>(
+      `netbird-table-pagination${
+        uniqueKey ? "/" + (uniqueKey as string) : path
+      }`,
+      {
+        pageIndex: 0,
+        pageSize: 10,
+      },
+      keepStateInLocalStorage,
+    );
 
   const hasInitialData = !!(data && data.length > 0);
 
@@ -191,17 +255,23 @@ export function DataTableContent<TData, TValue>({
     manualPagination: manualPagination,
     state: {
       sorting,
+      rowSelection: rowSelection ?? {},
       columnFilters,
-      columnVisibility: tableColumnVisibility,
+      columnVisibility: columnVisibility,
       globalFilter: globalSearch,
       pagination: paginationState,
     },
     initialState: {
       pagination: {
         pageIndex: 0,
-        pageSize: 10,
+        pageSize: initialPageSize || 10,
       },
     },
+    sortingFns: {
+      checkbox: checkboxSort,
+    },
+    getRowId: useRowId ? (row) => row.id : undefined,
+    onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onPaginationChange: setPaginationState,
     onColumnFiltersChange: setColumnFilters,
@@ -223,10 +293,26 @@ export function DataTableContent<TData, TValue>({
   const TableDataUnstyledComponent = as === "table" ? "td" : "div";
   const TableRowUnstyledComponent = as === "table" ? "tr" : "div";
 
+  /**
+   * Reset all filters, search & set pagination to first page
+   */
+  const resetFilters = () => {
+    table.setPageIndex(0);
+    setColumnFilters([]);
+    setGlobalSearch("");
+    setRowSelection?.({});
+    onFilterReset?.();
+  };
+
   return (
     <div className={cn("relative table-fixed-scroll", className)}>
-      {!minimal && (
-        <div className={"flex gap-x-4 gap-y-6 p-default flex-wrap"}>
+      {showSearchAndFilters && (
+        <div
+          className={cn(
+            "flex gap-x-4 gap-y-6 flex-wrap",
+            !minimal && "p-default",
+          )}
+        >
           <DataTableGlobalSearch
             className={searchClassName}
             disabled={!hasInitialData}
@@ -234,169 +320,193 @@ export function DataTableContent<TData, TValue>({
             setGlobalSearch={(val) => {
               table.setPageIndex(0);
               setGlobalSearch(val);
+              resetRowSelectionOnSearch && setRowSelection?.({});
             }}
             placeholder={searchPlaceholder}
           />
           {children && children(table)}
+          {showResetFilterButton && (
+            <DataTableResetFilterButton onClick={resetFilters} table={table} />
+          )}
           <div className={"flex gap-4 flex-wrap grow"}>
             <div className={"flex gap-4 flex-wrap"}></div>
             {rightSide && rightSide(table)}
           </div>
         </div>
       )}
+
       {aboveTable && aboveTable(table)}
-      {!hasInitialData && !isLoading && getStartedCard}
+
+      {!hasInitialData && !isLoading && (
+        <TableWrapper
+          wrapperComponent={wrapperComponent}
+          wrapperProps={wrapperProps}
+        >
+          {getStartedCard}
+        </TableWrapper>
+      )}
 
       {hasInitialData && !isLoading && (
-        <TableComponent
-          className={cn("relative mt-8", tableClassName)}
-          minimal={minimal}
+        <TableWrapper
+          wrapperComponent={wrapperComponent}
+          wrapperProps={wrapperProps}
         >
-          {showHeader && as == "table" && (
-            <TableHeaderComponent minimal={minimal}>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRowComponent key={headerGroup.id} minimal={minimal}>
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        minimal={minimal}
-                        inset={inset}
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRowComponent>
-              ))}
-            </TableHeaderComponent>
-          )}
-
-          <Accordion
-            asChild={true}
-            type={"multiple"}
-            value={accordion}
-            onValueChange={setAccordion}
+          <TableComponent
+            className={cn("relative mt-8", tableClassName)}
+            minimal={minimal}
           >
-            <TableBodyComponent
-              className={cn(
-                "relative",
-                data == undefined && "blur-sm",
-                wrapperClassName,
-              )}
-            >
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <AccordionItem
-                    value={row.original.id}
-                    asChild={true}
-                    key={row.original.id}
-                  >
-                    <>
-                      <TableRowComponent
-                        minimal={minimal}
-                        data-row-id={row.original.id}
-                        className={cn(
-                          (onRowClick || renderExpandedRow) &&
-                            "cursor-pointer relative group/accordion",
-                          rowClassName,
-                        )}
-                        data-state={row.getIsSelected() && "selected"}
-                        data-accordion={
-                          accordion?.includes(row.original.id)
-                            ? "opened"
-                            : "closed"
-                        }
-                        onClick={(e) => {
-                          if (renderExpandedRow) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setAccordion((prev) => {
-                              if (prev?.includes(row.original.id)) {
-                                return prev.filter(
-                                  (item) => item !== row.original.id,
-                                );
-                              } else {
-                                return [...(prev ?? []), row.original.id];
-                              }
-                            });
-                          }
-                        }}
-                      >
-                        <>
-                          {row.getVisibleCells().map((cell) => (
-                            <TableCellComponent
-                              key={cell.id}
-                              className={"relative"}
-                              minimal={minimal}
-                              inset={inset}
-                              onClick={() => {
-                                onRowClick && onRowClick(row, cell.column.id);
-                              }}
-                            >
-                              <div
-                                className={
-                                  "absolute left-0 top-0 w-full h-full z-0"
-                                }
-                              ></div>
-                              <div className={"relative z-[1]"}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
-                              </div>
-                            </TableCellComponent>
-                          ))}
-                        </>
-                      </TableRowComponent>
+            {showHeader && as == "table" && (
+              <TableHeaderComponent minimal={minimal}>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRowComponent key={headerGroup.id} minimal={minimal}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead
+                          key={header.id}
+                          minimal={minimal}
+                          inset={inset}
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRowComponent>
+                ))}
+              </TableHeaderComponent>
+            )}
 
-                      {renderExpandedRow && (
-                        <AccordionContent asChild={true}>
-                          <TableRowComponent
-                            data-row-id={row.id + "-expanded-row"}
-                            key={row.id + "-expanded-row"}
-                            minimal={minimal}
-                            className={cn(
-                              onRowClick && "cursor-pointer relative",
-                              rowClassName,
-                            )}
-                            data-state={row.getIsSelected() && "selected"}
-                          >
-                            <TableDataUnstyledComponent
-                              className={"w-full"}
-                              colSpan={row.getVisibleCells().length}
+            <Accordion
+              asChild={true}
+              type={"multiple"}
+              value={accordion}
+              onValueChange={setAccordion}
+            >
+              <TableBodyComponent
+                className={cn(
+                  "relative",
+                  data == undefined && "blur-sm",
+                  wrapperClassName,
+                )}
+              >
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <AccordionItem
+                      value={row.original.id}
+                      asChild={true}
+                      key={row.original.id}
+                    >
+                      <>
+                        <TableRowComponent
+                          minimal={minimal}
+                          data-row-id={row.original.id}
+                          className={cn(
+                            (onRowClick || renderExpandedRow) &&
+                              "cursor-pointer relative group/accordion",
+                            rowClassName,
+                          )}
+                          data-state={row.getIsSelected() && "selected"}
+                          data-accordion={
+                            accordion?.includes(row.original.id)
+                              ? "opened"
+                              : "closed"
+                          }
+                          onClick={(e) => {
+                            if (renderExpandedRow) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setAccordion((prev) => {
+                                if (prev?.includes(row.original.id)) {
+                                  return prev.filter(
+                                    (item) => item !== row.original.id,
+                                  );
+                                } else {
+                                  return [...(prev ?? []), row.original.id];
+                                }
+                              });
+                            }
+                          }}
+                        >
+                          <>
+                            {row.getVisibleCells().map((cell) => (
+                              <TableCellComponent
+                                key={cell.id}
+                                className={cn("relative", tableCellClassName)}
+                                minimal={minimal}
+                                inset={inset}
+                                onClick={() => {
+                                  onRowClick && onRowClick(row, cell.column.id);
+                                }}
+                              >
+                                <div
+                                  className={
+                                    "absolute left-0 top-0 w-full h-full z-0"
+                                  }
+                                ></div>
+                                <div className={"relative z-[1]"}>
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                </div>
+                              </TableCellComponent>
+                            ))}
+                          </>
+                        </TableRowComponent>
+
+                        {renderExpandedRow && (
+                          <AccordionContent asChild={true}>
+                            <TableRowComponent
+                              data-row-id={row.id + "-expanded-row"}
+                              key={row.id + "-expanded-row"}
+                              minimal={minimal}
+                              className={cn(
+                                onRowClick && "cursor-pointer relative",
+                                rowClassName,
+                              )}
+                              data-state={row.getIsSelected() && "selected"}
                             >
-                              {renderExpandedRow(row.original)}
-                            </TableDataUnstyledComponent>
-                          </TableRowComponent>
-                        </AccordionContent>
-                      )}
-                    </>
-                  </AccordionItem>
-                ))
-              ) : (
-                <TableRowUnstyledComponent>
-                  <TableCellComponent
-                    colSpan={columns.length}
-                    className="!py-4 !px-0 text-center"
-                  >
-                    <NoResults />
-                  </TableCellComponent>
-                </TableRowUnstyledComponent>
-              )}
-            </TableBodyComponent>
-          </Accordion>
-        </TableComponent>
+                              <TableDataUnstyledComponent
+                                className={"w-full"}
+                                colSpan={row.getVisibleCells().length}
+                              >
+                                {renderExpandedRow(row.original)}
+                              </TableDataUnstyledComponent>
+                            </TableRowComponent>
+                          </AccordionContent>
+                        )}
+                      </>
+                    </AccordionItem>
+                  ))
+                ) : (
+                  <TableRowUnstyledComponent>
+                    <TableCellComponent
+                      colSpan={columns.length}
+                      className="!py-0 !px-0 text-center"
+                    >
+                      <NoResults className={"py-4"} />
+                    </TableCellComponent>
+                  </TableRowUnstyledComponent>
+                )}
+              </TableBodyComponent>
+            </Accordion>
+          </TableComponent>
+        </TableWrapper>
       )}
 
       <div className={paginationClassName}>
-        <DataTablePagination table={table} text={text} />
+        <DataTablePagination
+          table={table}
+          text={text}
+          paginationPadding={paginationPaddingClassName}
+        />
       </div>
+
+      <DataTableHeadingPortal table={table} headingTarget={headingTarget} />
     </div>
   );
 }

src/components/table/DataTableHeadingPortal.tsx

@@ -0,0 +1,64 @@
+import { Table } from "@tanstack/react-table";
+import * as React from "react";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+
+type Props<TData> = {
+  table: Table<TData> | null;
+  headingTarget?: HTMLHeadingElement | null;
+};
+
+export const DataTableHeadingPortal = function <TData>({
+  table,
+  headingTarget,
+}: Props<TData>) {
+  const hasMounted = useRef(false);
+
+  if (!headingTarget) return;
+  if (!hasMounted.current) hasMounted.current = true;
+
+  const totalItems = table?.getPreFilteredRowModel().rows.length;
+  const filteredItems = table?.getFilteredRowModel().rows.length;
+  if (!totalItems || totalItems == 1) return;
+
+  const hasAnyFiltersActive =
+    table &&
+    !(
+      table?.getState().columnFilters.length <= 0 &&
+      table?.getState().globalFilter === ""
+    );
+
+  const portalContainer = document.createElement("span");
+  headingTarget.prepend(portalContainer);
+
+  return createPortal(
+    <Heading
+      hasAnyFilterActive={hasAnyFiltersActive}
+      totalItems={totalItems}
+      filteredItems={filteredItems}
+    />,
+    portalContainer,
+  );
+};
+
+type HeadingProps = {
+  hasAnyFilterActive: boolean | null;
+  filteredItems?: number;
+  totalItems?: number;
+};
+
+const Heading = ({
+  hasAnyFilterActive,
+  filteredItems,
+  totalItems,
+}: HeadingProps) => {
+  if (hasAnyFilterActive) {
+    return (
+      <>
+        <span className={"text-netbird"}>{filteredItems}</span> of {totalItems}{" "}
+      </>
+    );
+  }
+
+  return `${totalItems} `;
+};

src/components/table/DataTablePagination.tsx

@@ -1,5 +1,6 @@
 import ButtonGroup from "@components/ButtonGroup";
 import { Table } from "@tanstack/react-table";
+import { cn } from "@utils/helpers";
 import {
   ChevronLeft,
   ChevronRight,
@@ -10,11 +11,13 @@ import {
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   text?: string;
+  paginationPadding?: string;
 }
 
 export function DataTablePagination<TData>({
   table,
   text = "rows",
+  paginationPadding = "px-8 py-8",
 }: DataTablePaginationProps<TData>) {
   const allRows = table.getFilteredRowModel().rows.length;
   const rowsPerPage = table.getState().pagination.pageSize;
@@ -25,8 +28,8 @@ export function DataTablePagination<TData>({
   const pageCount = table.getPageCount();
 
   return pageCount > 1 ? (
-    <div className="flex items-center justify-between px-8 py-8">
-      <div className=" text-nb-gray-400">
+    <div className={cn("flex items-center justify-between", paginationPadding)}>
+      <div className="text-nb-gray-400">
         Showing{" "}
         <span className={"font-medium text-white"}>
           {showingFrom} to {showingTo}

src/components/table/DataTableResetFilterButton.tsx

@@ -0,0 +1,55 @@
+import Button from "@components/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
+import { Table } from "@tanstack/react-table";
+import { FilterX } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+
+interface Props<TData> {
+  table: Table<TData>;
+  onClick: () => void;
+}
+
+export default function DataTableResetFilterButton<TData>({
+  table,
+  onClick,
+}: Props<TData>) {
+  const [hovered, setHovered] = useState(false);
+  const isDisabled =
+    table.getState().columnFilters.length <= 0 &&
+    table.getState().globalFilter === "";
+
+  return !isDisabled ? (
+    <Tooltip delayDuration={1}>
+      <TooltipTrigger
+        asChild={true}
+        onMouseOver={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Button
+          className={"h-[42px]"}
+          variant={"secondary"}
+          disabled={isDisabled}
+          onClick={onClick}
+        >
+          <FilterX size={16} />
+        </Button>
+      </TooltipTrigger>
+
+      <TooltipContent
+        sideOffset={10}
+        className={"px-3 py-2"}
+        onPointerDownOutside={(event) => {
+          if (hovered) event.preventDefault();
+        }}
+      >
+        <span className={"text-xs text-neutral-300"}>
+          Reset Filters & Search
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+}

src/components/table/DataTableRowsPerPage.tsx

@@ -28,9 +28,10 @@ export function DataTableRowsPerPage<TData>({
             role="combobox"
             aria-expanded={open}
             disabled={disabled}
+            data-cy={"rows-per-page"}
             className="w-[200px] justify-between"
           >
-            <RowsIcon size={15} className={"text-nb-gray-300"} />
+            <RowsIcon size={15} className={"text-nb-gray-300 shrink-0"} />
             <div>
               <span className={"text-white"}>
                 {table.getState().pagination.pageSize}
@@ -47,6 +48,7 @@ export function DataTableRowsPerPage<TData>({
                 <CommandItem
                   key={val}
                   value={val.toString()}
+                  data-cy={`rows-per-page-value`}
                   onSelect={(currentValue) => {
                     table.setPageSize(Number(currentValue));
                     setOpen(false);

src/components/table/Table.tsx

@@ -1,6 +1,25 @@
 import { cn } from "@utils/helpers";
 import * as React from "react";
 
+type TableWrapperProps = {
+  wrapperComponent?: React.ElementType;
+  wrapperProps?: any;
+  children: React.ReactNode;
+};
+
+const TableWrapper = ({
+  wrapperComponent,
+  children,
+  wrapperProps,
+}: TableWrapperProps) => {
+  if (!wrapperComponent) return <>{children}</>;
+  return React.createElement(
+    wrapperComponent,
+    wrapperProps ? wrapperProps : {},
+    children,
+  );
+};
+
 type TableProps = {
   minimal?: boolean;
 };
@@ -82,11 +101,11 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      " transition-colors data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
+      " transition-colors group/table-row data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-nb-gray-930/70",
       "dark:data-[state=selected]:border-nb-gray-900",
       minimal
         ? "dark:hover:bg-nb-gray-900/10"
-        : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-900/20 hover:bg-neutral-100/50",
+        : "border-b dark:border-zinc-700/40 dark:hover:bg-nb-gray-940 hover:bg-neutral-100/50",
       className,
     )}
     {...props}
@@ -164,4 +183,5 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 };

src/components/ui/AccessControlGroupCount.tsx

@@ -0,0 +1,67 @@
+import FullTooltip from "@components/FullTooltip";
+import useFetchApi from "@utils/api";
+import { uniqBy } from "lodash";
+import { RouteIcon } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import Skeleton from "react-loading-skeleton";
+import { Route } from "@/interfaces/Route";
+
+type Props = {
+  group_id: string;
+};
+export const AccessControlGroupCount = ({ group_id }: Props) => {
+  const { data, isLoading } = useFetchApi<Route[]>("/routes");
+
+  const routes = useMemo(() => {
+    const routes = data?.filter((route) => {
+      const groups = route?.access_control_groups;
+      if (!groups) return false;
+      return groups.includes(group_id);
+    });
+    return uniqBy(routes, "network_id");
+  }, [data, group_id]);
+
+  if (isLoading) return <Skeleton width={100} height={16} />;
+
+  return routes && routes.length > 0 ? (
+    <FullTooltip
+      content={
+        <div className={"text-xs max-w-lg w-full gap-2"}>
+          {routes.map((route) => {
+            const domains = route?.domains;
+
+            return (
+              <div
+                key={route.id}
+                className={
+                  "w-full gap-10 flex text-nb-gray-300/80 justify-between"
+                }
+              >
+                <span className={"flex items-center gap-2 text-nb-gray-200"}>
+                  <RouteIcon size={12} /> {route.network_id}
+                </span>
+                {domains ? (
+                  <span className={""}>{domains.join(", ")}</span>
+                ) : (
+                  <span className={"font-mono text-[10px]"}>
+                    {route.network}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      }
+    >
+      <div
+        className={
+          "text-nb-gray-300 font-medium flex items-center gap-2 hover:text-nb-gray-100 transition-all"
+        }
+      >
+        <RouteIcon size={14} className={"shrink-0"} />
+        {routes.length} Route(s)
+      </div>
+    </FullTooltip>
+  ) : null;
+};

src/components/ui/AnnouncementBanner.tsx

@@ -0,0 +1,92 @@
+import InlineLink from "@components/InlineLink";
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
+
+const variants = cva(
+  {},
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+        important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
+      },
+      tagBadge: {
+        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        important: "bg-white text-netbird font-medium",
+      },
+      closeButton: {
+        default:
+          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+        important:
+          "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
+      },
+      inlineLink: {
+        default: "text-nb-blue-400 hover:underline",
+        important: "!text-white underline hover:opacity-80",
+      },
+    },
+  },
+);
+
+export type AnnouncementVariant = VariantProps<typeof variants>;
+
+export const AnnouncementBanner = () => {
+  const { bannerHeight, closeAnnouncement, announcements } = useAnnouncement();
+  const announcement = announcements?.find((a) => a.isOpen);
+
+  return announcement ? (
+    <div
+      className={cn(
+        "flex items-center justify-center text-sm px-8 font-light",
+        variants({ variant: announcement.variant }),
+      )}
+      style={{ height: bannerHeight }}
+    >
+      <div className={"flex items-center gap-2"}>
+        {announcement.tag && (
+          <div
+            className={cn(
+              "bg-nb-gray-200/10 backdrop-blur text-nb-gray-100 font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
+              variants({ tagBadge: announcement.variant }),
+            )}
+          >
+            {announcement.tag}
+          </div>
+        )}
+        <div>
+          {announcement.text}
+          {announcement.link && (
+            <InlineLink
+              href={announcement.link || "#"}
+              target={announcement.isExternal ? "_blank" : undefined}
+              className={cn(
+                "ml-2 !text-sm",
+                variants({ inlineLink: announcement.variant }),
+              )}
+            >
+              {announcement.linkText || "Learn more"}
+              <ArrowRightIcon size={14} />
+            </InlineLink>
+          )}
+        </div>
+      </div>
+      {announcement.closeable && (
+        <div className={"absolute right-0 px-4"}>
+          <div
+            className={cn(
+              "rounded-md p-1 text-nb-gray-300 transition-all cursor-pointer",
+              variants({ closeButton: announcement.variant }),
+            )}
+            onClick={() => closeAnnouncement(announcement.hash)}
+          >
+            <XIcon size={14} />
+          </div>
+        </div>
+      )}
+    </div>
+  ) : null;
+};

src/components/ui/CountrySelector.tsx

@@ -2,19 +2,16 @@ import {
   SelectDropdown,
   SelectOption,
 } from "@components/select/SelectDropdown";
-import useFetchApi from "@utils/api";
 import { createElement, useMemo } from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
-import { Country } from "@/interfaces/Country";
+import { useCountries } from "@/contexts/CountryProvider";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
 };
 export const CountrySelector = ({ value, onChange }: Props) => {
-  const { data: countries, isLoading } = useFetchApi<Country[]>(
-    "/locations/countries",
-  );
+  const { countries, isLoading } = useCountries();
 
   const countryList = useMemo(() => {
     return countries?.map((country) => {

src/components/ui/DomainListBadge.tsx

@@ -0,0 +1,70 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { GlobeIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  domains: string[];
+};
+export const DomainListBadge = ({ domains }: Props) => {
+  const firstDomain = domains.length > 0 ? domains[0] : undefined;
+
+  return (
+    <DomainsTooltip domains={domains}>
+      <div className={"inline-flex items-center gap-2"}>
+        {firstDomain && (
+          <Badge variant={"gray"}>
+            <GlobeIcon size={10} />
+            {firstDomain}
+          </Badge>
+        )}
+        {domains && domains.length > 1 && (
+          <Badge variant={"gray"}>+ {domains.length - 1}</Badge>
+        )}
+      </div>
+    </DomainsTooltip>
+  );
+};
+
+export const DomainsTooltip = ({
+  domains,
+  children,
+  className,
+}: {
+  domains: string[];
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <FullTooltip
+      interactive={false}
+      className={className}
+      content={
+        <div className={"flex flex-col gap-2 items-start"}>
+          {domains.map((domain) => {
+            return (
+              domain && (
+                <div
+                  key={domain}
+                  className={"flex gap-2 items-center justify-between w-full"}
+                >
+                  <div
+                    className={
+                      "flex gap-2 items-center text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <GlobeIcon size={11} />
+                    {domain}
+                  </div>
+                </div>
+              )
+            );
+          })}
+        </div>
+      }
+      disabled={domains.length <= 1}
+    >
+      {children}
+    </FullTooltip>
+  );
+};

src/components/ui/GradientFadedBackground.tsx

@@ -4,7 +4,7 @@ export const GradientFadedBackground = () => {
   return (
     <div
       className={
-        "h-full w-full absolute left-0 top-0 rounded-md overflow-hidden z-0"
+        "h-full w-full absolute left-0 top-0 rounded-md overflow-hidden z-0 pointer-events-none"
       }
     >
       <div