Update links for networks concept (#433)

- Add support to key deletion
- Add custom and unlimited expiration

.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

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,7 +13,7 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^5.14.0",
+    "@axa-fr/react-oidc": "^7.22.18",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -22,8 +22,9 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -37,6 +38,7 @@
     "@types/node": "20.10.6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-window": "^1.8.8",
     "autoprefixer": "^10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -53,8 +55,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",
@@ -67,13 +69,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,6 +4,7 @@ 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 { ExternalLinkIcon } from "lucide-react";
 import React from "react";
@@ -15,6 +16,9 @@ import ActivityTable from "@/modules/activity/ActivityTable";
 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"}>
@@ -25,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>
@@ -48,7 +48,11 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        <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)/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";
@@ -13,6 +14,7 @@ import PeersProvider from "@/contexts/PeersProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
+import { NetworkRoutesDeprecationInfo } from "@/modules/networks/misc/NetworkRoutesDeprecationInfo";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
 
 const NetworkRoutesTable = lazy(
@@ -23,6 +25,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,10 +40,8 @@ export default function NetworkRoutes() {
                 icon={<NetworkRoutesIcon size={13} />}
               />
             </Breadcrumbs>
-            <h1>
-              {groupedRoutes && groupedRoutes.length > 1
-                ? `${groupedRoutes.length} Network Routes`
-                : "Network Routes"}
+            <h1 ref={headingRef}>
+              Network Routes <NetworkRoutesDeprecationInfo size={18} />
             </h1>
             <Paragraph>
               Network routes allow you to access other networks like LANs and
@@ -65,6 +68,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

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

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

@@ -0,0 +1,58 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import InlineLink from "@components/InlineLink";
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
+import { ExternalLinkIcon } from "lucide-react";
+import React, { Suspense } from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { Network } from "@/interfaces/Network";
+import PageContainer from "@/layouts/PageContainer";
+import NetworksTable from "@/modules/networks/table/NetworksTable";
+
+export default function Networks() {
+  const { data: networks, isLoading } = useFetchApi<Network[]>("/networks");
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/networks"}
+            label={"Networks"}
+            icon={<NetworkRoutesIcon size={13} />}
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Networks</h1>
+        <Paragraph>
+          Networks allow you to access other resources like LANs and VPCs
+          without installing NetBird on every device.
+        </Paragraph>
+        <Paragraph>
+          Learn more about
+          <InlineLink href={"https://docs.netbird.io/how-to/networks-concept"} 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,6 +23,8 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { getOperatingSystem } from "@hooks/useOperatingSystem";
+import useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
@@ -53,22 +55,22 @@ 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 { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
-import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
-import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
+import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
+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}>
+  const { data: peer, isLoading } = useFetchApi<Peer>("/peers/" + peerId, true);
+
+  useRedirect("/peers", false, !peerId);
+
+  return peer && !isLoading ? (
+    <PeerProvider peer={peer} key={peerId}>
       <PeerOverview />
     </PeerProvider>
   ) : (
@@ -129,7 +131,6 @@ function PeerOverview() {
   };
 
   const { isUser } = useLoggedInUser();
-  const hasExitNodes = useHasExitNodes(peer);
 
   return (
     <PageContainer>
@@ -296,65 +297,38 @@ function PeerOverview() {
                 />
               </FullTooltip>
 
-              <div>
-                <Label>Assigned Groups</Label>
-                <HelpText>
-                  Use groups to control what this peer can access.
-                </HelpText>
-                <FullTooltip
-                  content={
-                    <div
-                      className={
-                        "flex gap-2 items-center !text-nb-gray-300 text-xs"
-                      }
-                    >
-                      <LockIcon size={14} />
-                      <span>
-                        {`You don't have the required permissions to update this
-                          setting.`}
-                      </span>
-                    </div>
-                  }
-                  interactive={false}
-                  className={"w-full block"}
-                  disabled={!isUser}
-                >
+              {!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}
                   />
-                </FullTooltip>
-              </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
 
-        <Separator />
-
         {isLinux && !isUser ? (
-          <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 className={"gap-4 flex"}>
-                    <AddExitNodeButton peer={peer} firstTime={!hasExitNodes} />
-                    <AddRouteDropdownButton />
-                  </div>
-                </div>
-              </div>
-              <PeerRoutesTable peer={peer} />
-            </div>
-          </div>
+          <>
+            <Separator />
+            <PeerNetworkRoutesSection peer={peer} />
+          </>
         ) : null}
+
+        {peer?.id && (
+          <>
+            <Separator />
+            <AccessiblePeersSection peerID={peer.id} />
+          </>
+        )}
       </RoutesProvider>
     </PageContainer>
   );

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

@@ -4,13 +4,12 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
-import useFetchApi from "@utils/api";
+import { usePortalElement } from "@hooks/usePortalElement";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useGroups } from "@/contexts/GroupsProvider";
+import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
 import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
-import { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
 
@@ -21,24 +20,22 @@ export default function Peers() {
 
   return (
     <PageContainer>
-      {permission?.dashboard_view === "blocked" ? (
+      {permission.dashboard_view === "blocked" ? (
         <PeersBlockedView />
       ) : (
-        <PeersView />
+        <PeersProvider>
+          <PeersView />
+        </PeersProvider>
       )}
     </PageContainer>
   );
 }
 
 function PeersView() {
-  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
+  const { peers, isLoading } = usePeers();
   const { users } = useUsers();
-  const { refresh } = useGroups();
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -58,7 +55,7 @@ function PeersView() {
             icon={<PeerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>{peers && peers.length > 1 ? `${peers.length} Peers` : "Peers"}</h1>
+        <h1 ref={headingRef}>Peers</h1>
         <Paragraph>
           A list of all machines and devices connected to your private network.
           Use this view to manage peers.
@@ -76,7 +73,11 @@ function PeersView() {
         </Paragraph>
       </div>
       <Suspense fallback={<SkeletonTable />}>
-        <PeersTable isLoading={isLoading} peers={peersWithUser} />
+        <PeersTable
+          isLoading={isLoading}
+          peers={peersWithUser}
+          headingTarget={portalTarget}
+        />
       </Suspense>
     </>
   );

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={"https://docs.netbird.io/how-to/manage-posture-checks"} 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

@@ -6,6 +6,7 @@ import {
   AlertOctagonIcon,
   FolderGit2Icon,
   LockIcon,
+  NetworkIcon,
   ShieldIcon,
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
@@ -16,6 +17,7 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
+import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
@@ -47,6 +49,10 @@ export default function NetBirdSettings() {
             <LockIcon size={14} />
             Permissions
           </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="networks">
+            <NetworkIcon size={14} />
+            Networks
+          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -57,6 +63,7 @@ export default function NetBirdSettings() {
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
+            {account && <NetworkSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>

src/app/(dashboard)/setup-keys/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, useMemo } from "react";
@@ -38,6 +39,9 @@ export default function SetupKeys() {
     });
   }, [setupKeys, groups]);
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -48,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.
@@ -74,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";
@@ -42,8 +45,12 @@ export default function UserPage() {
     return users?.find((u) => u.id === userId);
   }, [users, userId]);
 
-  return !isLoading && user ? (
-    <UserOverview user={user} />
+  useRedirect("/team/users", false, !userId);
+
+  const userGroups = useGroupIdsToGroups(user?.auto_groups);
+
+  return !isLoading && user && userGroups !== undefined ? (
+    <UserOverview user={user} initialGroups={userGroups} />
   ) : (
     <FullScreenLoading />
   );
@@ -51,16 +58,16 @@ export default function UserPage() {
 
 type Props = {
   user: User;
+  initialGroups: Group[];
 };
 
-function UserOverview({ user }: Props) {
+function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
   const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
-  const initialGroups = user.auto_groups;
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: initialGroups,
@@ -177,6 +184,7 @@ function UserOverview({ user }: Props) {
                 className={"w-full"}
                 disabled={!hasChanges}
                 onClick={save}
+                data-cy={"save-changes"}
               >
                 Save Changes
               </Button>
@@ -184,7 +192,7 @@ function UserOverview({ user }: Props) {
           )}
         </div>
 
-        <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
+        <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
           <UserInformationCard user={user} />
           <div className={"flex flex-col gap-8 w-1/2 "}>
             {!user.is_service_user && (
@@ -197,6 +205,8 @@ function UserOverview({ user }: Props) {
                   disabled={isUser}
                   onChange={setSelectedGroups}
                   values={selectedGroups}
+                  hideAllGroup={true}
+                  dataCy={"user-group-selector"}
                 />
               </div>
             )}
@@ -211,6 +221,8 @@ function UserOverview({ user }: Props) {
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
+                  hideOwner={user.is_service_user}
+                  currentUser={user}
                   disabled={
                     isLoggedInUser ||
                     !isOwnerOrAdmin ||
@@ -238,7 +250,10 @@ function UserOverview({ user }: Props) {
                 <div className={"inline-flex gap-4 justify-end"}>
                   <div>
                     <CreateAccessTokenModal user={user}>
-                      <Button variant={"primary"}>
+                      <Button
+                        variant={"primary"}
+                        data-cy={"access-token-open-modal"}
+                      >
                         <IconCirclePlus size={16} />
                         Create Access Token
                       </Button>
@@ -287,6 +302,7 @@ function UserInformationCard({ user }: { user: User }) {
         )}
 
         <Card.ListItem
+          tooltip={false}
           label={
             <>
               <GalleryHorizontalEnd size={16} />
@@ -298,15 +314,18 @@ function UserInformationCard({ user }: { user: User }) {
 
         {!isServiceUser && (
           <>
-            <Card.ListItem
-              label={
-                <>
-                  <Ban size={16} />
-                  Block User
-                </>
-              }
-              value={<UserBlockCell user={user} isUserPage={true} />}
-            />
+            {!user.is_current && user.role != Role.Owner && (
+              <Card.ListItem
+                label={
+                  <>
+                    <Ban size={16} />
+                    Block User
+                  </>
+                }
+                value={<UserBlockCell user={user} isUserPage={true} />}
+              />
+            )}
+
             <Card.ListItem
               label={
                 <>

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

@@ -68,4 +68,9 @@ p {
 
 .stepper-bg-variant .step-circle {
     @apply !border-[#1d2024];
+}
+
+.webkit-scroll{
+    -webkit-overflow-scrolling: touch;
+    -webkit-transform: translate3d(0, 0, 0);
 }

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/assets/icons/CircleIcon.tsx

@@ -16,6 +16,8 @@ export default function CircleIcon({
   return (
     <span
       style={{ width: size + "px", height: size + "px" }}
+      data-cy="circle-icon"
+      data-cy-status={active ? "active" : "inactive"}
       className={cn(
         "rounded-full",
         active

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/auth/OIDCError.tsx

@@ -15,7 +15,9 @@ export const OIDCError = () => {
   const params = useSearchParams();
   const errorParam = params.get("error");
   const accessDenied = errorParam === "access_denied";
+  const invalidRequest = errorParam === "invalid_request";
   const [title, setTitle] = useState(params.get("error_description"));
+  const errorDescription = params.get("error_description");
   const { logout, login } = useOidc();
 
   useEffect(() => {
@@ -72,9 +74,14 @@ export const OIDCError = () => {
         </>
       ) : (
         <>
-          <Paragraph className={"text-center mt-2"}>
+          <Paragraph className={"text-center mt-2 block"}>
             There was an error logging you in. <br />
-            Error: {oidcUserLoadingState}
+            Error:{" "}
+            <span className={"inline capitalize"}>
+              {invalidRequest && errorDescription
+                ? errorDescription
+                : oidcUserLoadingState}
+            </span>
           </Paragraph>
           <Button
             variant={"primary"}

src/auth/OIDCProvider.tsx

@@ -1,10 +1,10 @@
 "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";
@@ -30,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) => {

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/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/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/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,11 @@
+import * as React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const DropdownInfoText = ({ children }: Props) => {
+  return (
+    <div className={"text-center pt-2 mb-6 text-nb-gray-400"}>{children}</div>
+  );
+};

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

@@ -31,7 +31,7 @@ export default function FancyToggleSwitch({
         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",
+        disabled && "opacity-50 pointer-events-none",
       )}
     >
       <div className={"flex justify-between gap-10  "}>

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,9 @@ type Props = {
   align?: "end" | "center" | "start";
   side?: "top" | "bottom" | "left" | "right";
   keepOpen?: boolean;
-};
+  customOpen?: boolean;
+  customOnOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
+} & TooltipProps;
 export default function FullTooltip({
   children,
   content,
@@ -32,6 +35,8 @@ export default function FullTooltip({
   align = "center",
   side = "top",
   keepOpen = false,
+  customOpen,
+  customOnOpenChange,
 }: Props) {
   const [open, setOpen] = useState(!!keepOpen);
 
@@ -42,7 +47,11 @@ export default function FullTooltip({
 
   return !disabled ? (
     <TooltipProvider disableHoverableContent={!interactive}>
-      <Tooltip delayDuration={1} open={open} onOpenChange={handleOpen}>
+      <Tooltip
+        delayDuration={1}
+        open={customOpen || open}
+        onOpenChange={customOnOpenChange || handleOpen}
+      >
         {children && (
           <TooltipTrigger asChild={true}>
             {hoverButton ? (

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

@@ -16,6 +16,7 @@ export interface NotifyProps<T> {
   duration?: number;
   icon?: React.ReactNode;
   backgroundColor?: string;
+  preventSuccessToast?: boolean;
 }
 interface NotificationProps<T> extends NotifyProps<T> {
   t: Toast;
@@ -29,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);
@@ -47,6 +51,7 @@ export default function Notification<T>({
     if (promise) {
       promise
         .then(() => {
+          if (preventSuccessToast) setPreventSuccess(true);
           setLoading(false);
           closeToast();
         })
@@ -66,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 }}

src/components/PeerGroupSelector.tsx

@@ -1,25 +1,37 @@
 import Badge from "@components/Badge";
 import { Checkbox } from "@components/Checkbox";
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
+import { AccessControlGroupCount } from "@components/ui/AccessControlGroupCount";
 import GroupBadge from "@components/ui/GroupBadge";
+import GroupBadgeWithEditPeers from "@components/ui/GroupBadgeWithEditPeers";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { useSearch } from "@hooks/useSearch";
+import useSortedDropdownOptions from "@hooks/useSortedDropdownOptions";
 import { IconArrowBack } from "@tabler/icons-react";
+import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
 import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
 import { sortBy, trim, unionBy } from "lodash";
 import {
   ChevronsUpDown,
   FolderGit2,
+  GlobeIcon,
+  Layers3,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   SearchIcon,
+  WorkflowIcon,
 } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { useElementSize } from "@/hooks/useElementSize";
 import type { Group, GroupPeer } from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
 import type { Peer } from "@/interfaces/Peer";
 
 interface MultiSelectProps {
@@ -29,6 +41,13 @@ interface MultiSelectProps {
   max?: number;
   disabled?: boolean;
   popoverWidth?: "auto" | number;
+  hideAllGroup?: boolean;
+  showPeerCount?: boolean;
+  disableInlineRemoveGroup?: boolean;
+  saveGroupAssignments?: boolean;
+  showRoutes?: boolean;
+  disabledGroups?: Group[];
+  dataCy?: string;
 }
 export function PeerGroupSelector({
   onChange,
@@ -37,8 +56,16 @@ 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",
+}: Readonly<MultiSelectProps>) {
+  const { groups, dropdownOptions, setDropdownOptions, addDropdownOptions } =
+    useGroups();
   const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
   const [search, setSearch] = useState("");
@@ -46,8 +73,19 @@ export function PeerGroupSelector({
   // 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]);
 
@@ -66,14 +104,11 @@ export function PeerGroupSelector({
     const option = dropdownOptions.find((option) => option.name == name);
     const groupPeers: GroupPeer[] | undefined =
       (group?.peers as GroupPeer[]) || [];
-    groupPeers &&
-      groupPeers.push({ id: peer?.id as string, name: peer?.name as string });
+
+    if (peer) groupPeers?.push({ id: peer?.id as string, name: peer?.name });
 
     if (!group && !option) {
-      setDropdownOptions((previous) => [
-        ...previous,
-        { name: name, peers: groupPeers },
-      ]);
+      addDropdownOptions([{ name: name, peers: groupPeers }]);
     }
 
     if (max == 1 && values.length == 1) {
@@ -100,17 +135,18 @@ export function PeerGroupSelector({
     const isSearching = search.length > 0;
     const groupDoesNotExist =
       dropdownOptions.filter((item) => item.name == trim(search)).length == 0;
-    return isSearching && groupDoesNotExist;
+    const isAllGroup = search.toLowerCase() == "all";
+    return isSearching && groupDoesNotExist && !isAllGroup;
   }, [search, dropdownOptions]);
 
   const [open, setOpen] = useState(false);
 
   const folderIcon = useMemo(() => {
-    return <FolderGit2 size={12} />;
+    return <FolderGit2 size={12} className={"shrink-0"} />;
   }, []);
 
   const peerIcon = useMemo(() => {
-    return <MonitorSmartphoneIcon size={14} />;
+    return <MonitorSmartphoneIcon size={14} className={"shrink-0"} />;
   }, []);
 
   const [slice, setSlice] = useState(10);
@@ -125,6 +161,18 @@ 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,
+  );
+
   return (
     <Popover
       open={open}
@@ -140,12 +188,13 @@ export function PeerGroupSelector({
       <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",
+            "disabled:pointer-events-none disabled:opacity-30 transition-all",
           )}
           disabled={disabled}
+          data-cy={dataCy}
           ref={inputRef}
         >
           <div
@@ -153,26 +202,59 @@ export function PeerGroupSelector({
               "flex items-center gap-2 border-nb-gray-700 flex-wrap h-full"
             }
           >
-            {values.map((group) => (
-              <GroupBadge
-                className={"py-[3px]"}
-                group={group}
-                key={group.name}
-                onClick={() => {
-                  if (peer != undefined && group.name == "All") return; // Prevent removing the "All" group
-                  toggleGroupByName(group.name);
-                }}
-                showX={peer != undefined ? group.name !== "All" : 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>
             )}
           </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>
@@ -198,11 +280,12 @@ export function PeerGroupSelector({
           <CommandList className={"w-full"}>
             <div className={"relative"}>
               <CommandInput
+                data-cy={"group-search-input"}
                 className={cn(
                   "min-h-[42px] w-full relative",
                   "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
                   "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
+                  "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
                 )}
                 ref={searchRef}
                 value={search}
@@ -237,9 +320,10 @@ export function PeerGroupSelector({
 
             <CommandGroup>
               <ScrollArea
-                className={
-                  "max-h-[195px]  overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                }
+                className={cn(
+                  "max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3",
+                  sortedDropdownOptions.length == 0 && !search && "py-0",
+                )}
               >
                 {searchedGroupNotFound && (
                   <CommandItem
@@ -264,38 +348,66 @@ export function PeerGroupSelector({
                   </CommandItem>
                 )}
 
-                {dropdownOptions.slice(0, slice).map((option) => {
+                {sortedDropdownOptions.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"}>
-                        <Badge variant={"gray-ghost"}>
-                          {folderIcon}
-                          <TextWithTooltip text={option.name} maxChars={30} />
-                        </Badge>
-                      </div>
+                  const peerCount =
+                    option.peers?.length ?? option?.peers_count ?? 0;
 
-                      <div
-                        className={
-                          "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
-                        }
+                  const isDisabled = disabledGroups
+                    ? disabledGroups?.findIndex((g) => g.id === option.id) !==
+                      -1
+                    : false;
+
+                  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()}
                       >
-                        {peerIcon}
-                        {option.peers_count || 0} Peer(s)
-                        <Checkbox checked={isSelected} />
-                      </div>
-                    </CommandItem>
+                        <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} />
+                          )}
+
+                          <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>
@@ -306,3 +418,99 @@ export function PeerGroupSelector({
     </Popover>
   );
 }
+
+const ResourcesCounter = ({ group }: { group: Group }) => {
+  return group?.resources_count && group.resources_count > 0 ? (
+    <div
+      className={
+        "text-nb-gray-300 font-medium flex items-center gap-2 transition-all"
+      }
+    >
+      <Layers3 size={14} className={"shrink-0"} />
+      {group.resources_count} Resource(s)
+    </div>
+  ) : null;
+};
+
+const resourcesSearchPredicate = (item: NetworkResource, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.address.toLowerCase().includes(lowerCaseQuery);
+};
+
+const ResourcesList = ({ search }: { search: string }) => {
+  const { data: resources, isLoading } = useFetchApi<NetworkResource[]>(
+    "/networks/resources",
+  );
+
+  const [filteredItems, _, setSearch] = useSearch(
+    resources || [],
+    resourcesSearchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  useEffect(() => {
+    setSearch(search);
+  }, [search, setSearch]);
+
+  return isLoading ? (
+    <>Loading...</>
+  ) : (
+    filteredItems.length > 0 && (
+      <VirtualScrollAreaList
+        items={filteredItems}
+        onSelect={(option) => null}
+        renderItem={(res) => {
+          const isSelected = false;
+
+          return (
+            <Fragment key={res.id}>
+              <div className={"flex items-center gap-2"}>
+                <Badge
+                  useHover={true}
+                  data-cy={"group-badge"}
+                  variant={"gray-ghost"}
+                  className={cn("transition-all group whitespace-nowrap")}
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                >
+                  {res.type === "host" && (
+                    <WorkflowIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+                  {res.type === "domain" && (
+                    <GlobeIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+                  {res.type === "subnet" && (
+                    <NetworkIcon
+                      size={12}
+                      className={"text-yellow-400 shrink-0"}
+                    />
+                  )}
+
+                  <TextWithTooltip text={res?.name || ""} maxChars={20} />
+                </Badge>
+              </div>
+
+              <div className={"flex items-center gap-5"}>
+                <div
+                  className={
+                    "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                  }
+                >
+                  <Checkbox checked={isSelected} />
+                </div>
+              </div>
+            </Fragment>
+          );
+        }}
+      />
+    )
+  );
+};

src/components/PeerSelector.tsx

@@ -1,21 +1,31 @@
-import { CommandItem } from "@components/Command";
+import { DropdownInfoText } from "@components/DropdownInfoText";
+import { DropdownInput } from "@components/DropdownInput";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
-import { ScrollArea } from "@components/ScrollArea";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { IconArrowBack } from "@tabler/icons-react";
+import { VirtualScrollAreaList } from "@components/VirtualScrollAreaList";
+import { useSearch } from "@hooks/useSearch";
 import useFetchApi from "@utils/api";
 import { cn } from "@utils/helpers";
-import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
-import { sortBy, trim, unionBy } from "lodash";
-import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
+import { sortBy, unionBy } from "lodash";
+import { ChevronsUpDown, MapPin } from "lucide-react";
 import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { FcLinux } from "react-icons/fc";
 import { useElementSize } from "@/hooks/useElementSize";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
 
+const MapPinIcon = memo(() => <MapPin size={12} />);
+MapPinIcon.displayName = "MapPinIcon";
+
+const LinuxIcon = memo(() => (
+  <span className={"grayscale brightness-[100%] contrast-[40%]"}>
+    <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
+  </span>
+));
+LinuxIcon.displayName = "LinuxIcon";
+
 interface MultiSelectProps {
   value?: Peer;
   onChange: React.Dispatch<React.SetStateAction<Peer | undefined>>;
@@ -23,6 +33,13 @@ interface MultiSelectProps {
   disabled?: boolean;
 }
 
+const searchPredicate = (item: Peer, query: string) => {
+  const lowerCaseQuery = query.toLowerCase();
+  if (item.name.toLowerCase().includes(lowerCaseQuery)) return true;
+  if (item.hostname.toLowerCase().includes(lowerCaseQuery)) return true;
+  return item.ip.toLowerCase().startsWith(lowerCaseQuery);
+};
+
 export function PeerSelector({
   onChange,
   value,
@@ -30,13 +47,16 @@ export function PeerSelector({
   disabled = false,
 }: MultiSelectProps) {
   const { data: peers } = useFetchApi<Peer[]>("/peers");
-
-  const [dropdownOptions, setDropdownOptions] = useState<Peer[]>([]);
-  const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
-  const [search, setSearch] = useState("");
 
-  // Update dropdown options when peers change
+  const [unfilteredItems, setUnfilteredItems] = useState<Peer[]>([]);
+  const [filteredItems, search, setSearch] = useSearch(
+    unfilteredItems,
+    searchPredicate,
+    { filter: true, debounce: 150 },
+  );
+
+  // Update unfiltered items when peers change
   useEffect(() => {
     if (!peers) return;
 
@@ -56,7 +76,7 @@ export function PeerSelector({
       });
     }
 
-    setDropdownOptions(unionBy(options, dropdownOptions, "id"));
+    setUnfilteredItems(unionBy(options, unfilteredItems, "id"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [peers]);
 
@@ -68,44 +88,11 @@ export function PeerSelector({
       onChange(peer);
       setSearch("");
     }
+    setOpen(false);
   };
 
-  const peerNotFound = useMemo(() => {
-    const isSearching = search.length > 0;
-
-    // Search peer by ip or name
-    const peerFound =
-      dropdownOptions.filter((item) => {
-        return (
-          item.name.includes(search) ||
-          item.hostname.includes(search) ||
-          item.ip.includes(search)
-        );
-      }).length > 0;
-
-    return isSearching && !peerFound;
-  }, [search, dropdownOptions]);
-
   const [open, setOpen] = useState(false);
 
-  const [slice, setSlice] = useState(10);
-
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => {
-        setSlice(dropdownOptions.length);
-      }, 100);
-    } else {
-      setSlice(10);
-    }
-  }, [open, dropdownOptions]);
-
-  const LinuxIcon = (
-    <span className={"grayscale brightness-[100%] contrast-[40%]"}>
-      <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
-    </span>
-  );
-
   return (
     <Popover
       open={open}
@@ -141,7 +128,7 @@ export function PeerSelector({
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
-                  {LinuxIcon}
+                  <LinuxIcon />
                   <TextWithTooltip text={value.name} maxChars={20} />
                 </div>
 
@@ -150,7 +137,7 @@ export function PeerSelector({
                     "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
                   }
                 >
-                  <MapPin size={12} />
+                  <MapPinIcon />
                   {value.ip}
                 </div>
               </div>
@@ -168,113 +155,67 @@ export function PeerSelector({
         style={{
           width: width,
         }}
-        forceMount={true}
         align="start"
         side={"top"}
         sideOffset={10}
       >
-        <Command
-          className={"w-full flex"}
-          loop
-          filter={(value, search) => {
-            const formatValue = trim(value.toLowerCase());
-            const formatSearch = trim(search.toLowerCase());
-            if (formatValue.includes(formatSearch)) return 1;
-            return 0;
-          }}
-        >
-          <CommandList className={"w-full"}>
-            <div className={"relative"}>
-              <CommandInput
-                className={cn(
-                  "min-h-[42px] w-full relative",
-                  "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
-                  "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
-                  "dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
-                )}
-                ref={searchRef}
-                value={search}
-                onValueChange={setSearch}
-                placeholder={"Search for peers by name or ip..."}
-              />
-              <div
-                className={
-                  "absolute left-0 top-0 h-full flex items-center pl-4"
-                }
-              >
-                <div className={"flex items-center"}>
-                  <SearchIcon size={14} />
-                </div>
-              </div>
-              <div
-                className={
-                  "absolute right-0 top-0 h-full flex items-center pr-4"
-                }
-              >
-                <div
-                  className={
-                    "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
-                  }
-                >
-                  <IconArrowBack size={10} />
-                </div>
-              </div>
-            </div>
+        <div className={"w-full"}>
+          <DropdownInput
+            value={search}
+            onChange={setSearch}
+            placeholder={"Search for peers by name or ip..."}
+          />
 
-            <div className={""}>
-              {dropdownOptions.length == 0 && !peerNotFound && (
-                <div
-                  className={
-                    "text-center pb-2 text-nb-gray-500 max-w-xs mx-auto"
-                  }
-                >
-                  {
-                    "Seems like you don't have any linux peers to assign as a routing peer."
-                  }
-                </div>
-              )}
-              {peerNotFound && (
-                <div className={"text-center pb-2 text-nb-gray-500"}>
-                  There are no peers matching your search.
-                </div>
-              )}
-              <CommandGroup>
-                <ScrollArea
-                  className={
-                    "max-h-[180px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-                  }
-                >
-                  {dropdownOptions.slice(0, slice).map((option) => {
-                    return (
-                      <CommandItem
-                        key={option.name}
-                        value={option.name + option.id}
-                        onSelect={() => {
-                          togglePeer(option);
-                          setOpen(false);
-                        }}
-                      >
-                        <div className={"flex items-center gap-2.5 text-sm"}>
-                          {LinuxIcon}
-                          <TextWithTooltip text={option.name} maxChars={20} />
-                        </div>
+          {unfilteredItems.length == 0 && (
+            <DropdownInfoText>
+              {
+                "Seems like you don't have any linux peers to assign as a routing peer."
+              }
+            </DropdownInfoText>
+          )}
 
-                        <div
-                          className={
-                            "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-1 font-mono text-[10px]"
-                          }
-                        >
-                          <MapPin size={12} />
-                          {option.ip}
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                </ScrollArea>
-              </CommandGroup>
-            </div>
-          </CommandList>
-        </Command>
+          {filteredItems.length == 0 && (
+            <DropdownInfoText>
+              There are no peers matching your search.
+            </DropdownInfoText>
+          )}
+
+          {filteredItems.length > 0 && (
+            <VirtualScrollAreaList
+              items={filteredItems}
+              onSelect={togglePeer}
+              renderItem={(option) => {
+                return (
+                  <>
+                    <div
+                      className={cn(
+                        "flex items-center gap-2.5 text-sm",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                      )}
+                    >
+                      <LinuxIcon />
+                      <TextWithTooltip text={option.name} maxChars={20} />
+                    </div>
+
+                    <div
+                      className={cn(
+                        "font-medium flex items-center gap-1 font-mono text-[10px]",
+                        value && value.id == option.id
+                          ? "text-white"
+                          : "text-nb-gray-300",
+                      )}
+                    >
+                      <MapPinIcon />
+                      {option.ip}
+                    </div>
+                  </>
+                );
+              }}
+            />
+          )}
+        </div>
       </PopoverContent>
     </Popover>
   );

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/ScrollArea.tsx

@@ -4,30 +4,66 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@utils/helpers";
 import * as React from "react";
 
+type AdditionalScrollAreaProps = {
+  withoutViewport?: boolean;
+};
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
+    AdditionalScrollAreaProps
+>(({ className, children, withoutViewport = false, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn(
+      "relative will-change-scroll webkit-scroll",
+      className,
+      "overflow-hidden",
+    )}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+    {withoutViewport ? (
+      children
+    ) : (
+      <ScrollAreaViewport disableOverflowY={false}>
+        {children}
+      </ScrollAreaViewport>
+    )}
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
+type AdditionalScrollAreaViewportProps = {
+  disableOverflowY?: boolean;
+};
+
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> &
+    AdditionalScrollAreaViewportProps
+>(({ disableOverflowY = true, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Viewport
+      ref={ref}
+      className="h-full w-full rounded-[inherit] will-change-scroll webkit-scroll"
+      {...props}
+      style={
+        disableOverflowY ? { overflowY: undefined, ...props.style } : undefined
+      }
+    />
+  );
+});
+ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
+    style={{ boxSizing: "unset", overflow: undefined }}
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
@@ -49,4 +85,15 @@ const ScrollBar = React.forwardRef<
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+const MemoizedScrollArea = React.memo(ScrollArea);
+const MemoizedScrollAreaViewport = React.memo(ScrollAreaViewport);
+const MemoizedScrollBar = React.memo(ScrollBar);
+
+export {
+  MemoizedScrollArea,
+  MemoizedScrollAreaViewport,
+  MemoizedScrollBar,
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+};

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/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/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/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>
   );
 }

src/components/VirtualScrollAreaList.tsx

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

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

@@ -10,6 +10,8 @@ interface Props extends IconVariant {
   className?: string;
   margin?: string;
   truncate?: boolean;
+  children?: React.ReactNode;
+  center?: boolean;
 }
 export default function ModalHeader({
   icon,
@@ -19,18 +21,31 @@ export default function ModalHeader({
   className = "pb-6 px-8",
   margin = "mt-0",
   truncate = false,
+  children,
+  center,
 }: Props) {
   return (
     <div className={cn(className, "min-w-0")}>
-      <div className={"flex items-start gap-5 pr-10 min-w-0"}>
+      <div className={"flex items-start gap-5 min-w-0"}>
         {icon && <SquareIcon color={color} icon={icon} />}
-        <div className={"min-w-0"}>
-          <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
-          <Paragraph
-            className={cn("text-sm", margin, truncate && "!block truncate")}
+        <div className={cn("min-w-0", center && "text-center")}>
+          <h2
+            className={cn(
+              "text-lg my-0 leading-[1.5]",
+              center && "text-center",
+            )}
           >
-            {description}
-          </Paragraph>
+            {title}
+          </h2>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <Paragraph
+              className={cn("text-sm", margin, truncate && "!block truncate")}
+            >
+              {description}
+            </Paragraph>
+          )}
         </div>
       </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,6 +1,7 @@
 "use client";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
+import { DataTableHeadingPortal } from "@components/table/DataTableHeadingPortal";
 import { DataTablePagination } from "@components/table/DataTablePagination";
 import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
@@ -10,6 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 } from "@components/table/Table";
 import NoResults from "@components/ui/NoResults";
 import {
@@ -28,6 +30,8 @@ import {
   getSortedRowModel,
   PaginationState,
   Row,
+  RowSelectionState,
+  SortingFn,
   SortingState,
   Table as TanStackTable,
   useReactTable,
@@ -52,6 +56,9 @@ declare module "@tanstack/table-core" {
   interface FilterMeta {
     itemRank: RankingInfo;
   }
+  interface SortingFns {
+    checkbox: SortingFn<unknown>;
+  }
 }
 
 const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
@@ -98,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;
@@ -105,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;
@@ -122,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>) {
@@ -139,6 +176,7 @@ export function DataTableContent<TData, TValue>({
   children,
   searchPlaceholder = "Search...",
   columnVisibility = {},
+  setColumnVisibility,
   sorting = [],
   setSorting,
   text = "rows",
@@ -159,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);
 
@@ -196,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,
@@ -235,12 +300,19 @@ export function DataTableContent<TData, TValue>({
     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}
@@ -248,170 +320,193 @@ export function DataTableContent<TData, TValue>({
             setGlobalSearch={(val) => {
               table.setPageIndex(0);
               setGlobalSearch(val);
+              resetRowSelectionOnSearch && setRowSelection?.({});
             }}
             placeholder={searchPlaceholder}
           />
           {children && children(table)}
-          <DataTableResetFilterButton onClick={resetFilters} table={table} />
+          {showResetFilterButton && (
+            <DataTableResetFilterButton onClick={resetFilters} table={table} />
+          )}
           <div className={"flex gap-4 flex-wrap grow"}>
             <div className={"flex gap-4 flex-wrap"}></div>
             {rightSide && rightSide(table)}
           </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/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/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

src/components/ui/GroupBadge.tsx

@@ -7,10 +7,11 @@ import { Group } from "@/interfaces/Group";
 
 type Props = {
   group: Group;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   showX?: boolean;
   children?: React.ReactNode;
   className?: string;
+  showNewBadge?: boolean;
 };
 export default function GroupBadge({
   onClick,
@@ -18,22 +19,42 @@ export default function GroupBadge({
   showX = false,
   children,
   className,
+  showNewBadge = false,
 }: Props) {
+  const isNew = !group?.id;
+
   return (
     <Badge
-      key={group.id}
+      key={group.id || group.name}
       useHover={true}
+      data-cy={"group-badge"}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
-      onClick={onClick}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.(e);
+      }}
     >
       <FolderGit2 size={12} className={"shrink-0"} />
+
       <TextWithTooltip text={group?.name || ""} maxChars={20} />
       {children}
+      {isNew && showNewBadge && (
+        <span
+          className={
+            "text-[7px] relative top-[.25px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
+          }
+        >
+          NEW
+        </span>
+      )}
+
       {showX && (
         <XIcon
           size={12}
-          className={"cursor-pointer group-hover:text-white shrink-0"}
+          className={
+            "cursor-pointer group-hover:text-nb-gray-100 transition-all shrink-0"
+          }
         />
       )}
     </Badge>

src/components/ui/GroupBadgeWithEditPeers.tsx

@@ -0,0 +1,124 @@
+import Badge from "@components/Badge";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { cn } from "@utils/helpers";
+import { EyeIcon, FolderGit2, SquarePen } from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
+
+type Props = {
+  group: Group;
+  className?: string;
+  showNewBadge?: boolean;
+  showPeerCount?: boolean;
+  useSave?: boolean;
+  onPeerAssignmentChange?: (oldGroup: Group, newGroup: Group) => void;
+};
+
+export default function GroupBadgeWithEditPeers({
+  group,
+  className,
+  showNewBadge = false,
+  useSave = true,
+  onPeerAssignmentChange,
+}: Readonly<Props>) {
+  const isNew = !group?.id;
+  const [editGroupPeersModal, setEditGroupPeersModal] = useState(false);
+  const { dropdownOptions, addDropdownOptions, updateGroupDropdown } =
+    useGroups();
+
+  const currentGroup = useMemo(() => {
+    return dropdownOptions?.find((g) => g.name === group?.name);
+  }, [group, dropdownOptions]);
+
+  const peerCount =
+    currentGroup?.peers?.length ?? currentGroup?.peers_count ?? 0;
+
+  const updateGroupOptions = (g: Group) => {
+    updateGroupDropdown(group.name, g);
+    onPeerAssignmentChange?.(group, g);
+  };
+
+  const isAllGroup = currentGroup?.name === "All";
+
+  return (
+    <>
+      {currentGroup && editGroupPeersModal && (
+        <AssignPeerToGroupModal
+          useSave={useSave}
+          group={currentGroup}
+          onUpdate={(g) => updateGroupOptions(g)}
+          open={editGroupPeersModal}
+          setOpen={setEditGroupPeersModal}
+        />
+      )}
+
+      <Badge
+        key={group.id ?? group.name}
+        useHover={true}
+        variant={"gray-ghost"}
+        className={cn(
+          "transition-all group group/badge whitespace-nowrap overflow-hidden",
+          className,
+        )}
+        onClick={(e) => {
+          if (!currentGroup) return;
+          e.stopPropagation();
+          setEditGroupPeersModal(true);
+        }}
+      >
+        <div
+          className={
+            "flex flex-col items-start justify-start pt-[0px] pb-[2px]"
+          }
+        >
+          <div
+            className={
+              "text-nb-gray-200 flex gap-1.5 items-center z-10 relative"
+            }
+          >
+            <FolderGit2 size={12} className={"shrink-0"} />
+            <TextWithTooltip text={group?.name || ""} maxChars={20} />
+            {isNew && showNewBadge && (
+              <span
+                className={
+                  "text-[7px] relative -top-[0px] leading-[0] bg-green-900 border border-green-500/20 py-1.5 px-1 rounded-[3px] text-green-400"
+                }
+              >
+                NEW
+              </span>
+            )}
+          </div>
+          <span
+            className={
+              "text-[0.7rem] relative leading-none mt-[2px] text-nb-gray-300 mb-[1px] font-normal flex gap-1.5 items-center group-hover/badge:text-netbird transition-all"
+            }
+          >
+            <span>
+              <span
+                className={
+                  "font-medium text-nb-gray-200 group-hover/badge:text-netbird transition-all"
+                }
+              >
+                {peerCount}
+              </span>{" "}
+              Peers{" "}
+            </span>
+            {isAllGroup ? (
+              <EyeIcon size={11} className={"shrink-0"} />
+            ) : (
+              <SquarePen
+                size={11}
+                className={
+                  "shrink-0 transition-all relative z-10 group-hover/badge:text-netbird text-netbird-400/80"
+                }
+              />
+            )}
+          </span>
+        </div>
+      </Badge>
+    </>
+  );
+}

src/components/ui/InputDomain.tsx

@@ -0,0 +1,89 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import { validator } from "@utils/helpers";
+import { uniqueId } from "lodash";
+import { GlobeIcon, MinusCircleIcon } from "lucide-react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Domain } from "@/interfaces/Domain";
+
+type Props = {
+  value: Domain;
+  onChange: (d: Domain) => void;
+  onRemove: () => void;
+  onError?: (error: boolean) => void;
+  error?: string;
+};
+enum ActionType {
+  ADD = "ADD",
+  REMOVE = "REMOVE",
+  UPDATE = "UPDATE",
+}
+
+export const domainReducer = (state: Domain[], action: any): Domain[] => {
+  switch (action.type) {
+    case ActionType.ADD:
+      return [...state, { name: "", id: uniqueId("domain") }];
+    case ActionType.REMOVE:
+      return state.filter((_, i) => i !== action.index);
+    case ActionType.UPDATE:
+      return state.map((n, i) => (i === action.index ? action.d : n));
+    default:
+      return state;
+  }
+};
+
+export default function InputDomain({
+  value,
+  onChange,
+  onRemove,
+  onError,
+}: Readonly<Props>) {
+  const [name, setName] = useState(value?.name || "");
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+    onChange({ ...value, name: e.target.value });
+  };
+
+  const domainError = useMemo(() => {
+    if (name == "") {
+      return "";
+    }
+    const valid = validator.isValidDomain(name);
+    if (!valid) {
+      return "Please enter a valid domain, e.g. example.com or intra.example.com";
+    }
+  }, [name]);
+
+  useEffect(() => {
+    const hasError = domainError !== "" && domainError !== undefined;
+    onError?.(hasError);
+    return () => onError?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [domainError]);
+
+  return (
+    <div className={"flex gap-2 w-full"}>
+      <div className={"w-full"}>
+        <Input
+          customPrefix={<GlobeIcon size={15} />}
+          placeholder={"e.g., example.com"}
+          maxWidthClass={"w-full"}
+          data-cy={"domain-input"}
+          value={name}
+          error={domainError}
+          onChange={handleNameChange}
+        />
+      </div>
+
+      <Button
+        className={"h-[42px]"}
+        variant={"default-outline"}
+        onClick={onRemove}
+      >
+        <MinusCircleIcon size={15} />
+      </Button>
+    </div>
+  );
+}

src/components/ui/MultipleGroups.tsx

@@ -34,7 +34,10 @@ export default function MultipleGroups({
     <TooltipProvider disableHoverableContent={false}>
       <Tooltip delayDuration={1}>
         <TooltipTrigger asChild={true}>
-          <div className={"inline-flex items-center gap-2 z-0"}>
+          <div
+            className={"inline-flex items-center gap-2 z-0"}
+            data-cy={"multiple-groups"}
+          >
             {firstGroup && <GroupBadge group={firstGroup} />}
             {otherGroups && otherGroups.length > 0 && (
               <Badge

src/components/ui/NoResults.tsx

@@ -1,4 +1,5 @@
 import Paragraph from "@components/Paragraph";
+import { cn } from "@utils/helpers";
 import { FilterX } from "lucide-react";
 import React from "react";
 import Skeleton from "react-loading-skeleton";
@@ -8,23 +9,25 @@ type Props = {
   title?: string;
   description?: string;
   children?: React.ReactNode;
+  className?: string;
 };
 export default function NoResults({
   icon,
   title = "Could not find any results",
   description = "We couldn't find any results. Please try a different search term or change your filters.",
   children,
+  className,
 }: Props) {
   return (
-    <div className={"relative overflow-hidden"}>
+    <div className={cn("relative overflow-hidden", className)}>
       <div
         className={
-          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden"
+          "absolute z-20 bg-gradient-to-b dark:to-nb-gray-950 dark:from-nb-gray-950/70 w-full h-full overflow-hidden top-0"
         }
       ></div>
       <div
         className={
-          "absolute w-full h-full left-0 top-0 z-10 px-5 overflow-hidden"
+          "absolute w-full h-full left-0 top-0 z-10 px-5 overflow-hidden py-4"
         }
       >
         <div className={"flex flex-col gap-2"}>
@@ -33,7 +36,7 @@ export default function NoResults({
           <Skeleton className={"w-full"} height={70} duration={4} />
         </div>
       </div>
-      <div className={"max-w-md mx-auto relative z-20 py-6"}>
+      <div className={cn("max-w-md mx-auto relative z-20 py-6")}>
         <div
           className={
             "mx-auto w-14 h-14 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md"

src/components/ui/NoResultsCard.tsx

@@ -0,0 +1,59 @@
+import Card from "@components/Card";
+import Paragraph from "@components/Paragraph";
+import { FilterX } from "lucide-react";
+import React from "react";
+import Skeleton from "react-loading-skeleton";
+
+type Props = {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+};
+export default function NoResultsCard({
+  icon,
+  title = "Could not find any results",
+  description = "We couldn't find any results. Please try a different search term or change your filters.",
+  children,
+}: Readonly<Props>) {
+  return (
+    <div className={"px-8 mt-8"}>
+      <Card className={"w-full relative overflow-hidden"}>
+        <div
+          className={
+            "absolute z-20 bg-gradient-to-b  dark:to-nb-gray-950 dark:from-nb-gray-950/40 w-full h-full"
+          }
+        ></div>
+        <div
+          className={
+            "absolute w-full h-full left-0 top-0 z-10 px-5 py-3 overflow-hidden"
+          }
+        >
+          <div className={"flex flex-col gap-2"}>
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+            <Skeleton className={"w-full"} height={70} duration={4} />
+          </div>
+        </div>
+        <div className={"max-w-md mx-auto relative z-20 py-8"}>
+          <div
+            className={
+              "mx-auto w-10 h-10 bg-nb-gray-930 flex items-center justify-center mb-3 rounded-md border border-nb-gray-800"
+            }
+          >
+            {icon || <FilterX size={24} />}
+          </div>
+          <div className={"text-center"}>
+            <h1 className={"text-2xl font-medium max-w-lg mx-auto"}>{title}</h1>
+            <Paragraph className={"justify-center my-2 !text-nb-gray-400"}>
+              {description}
+            </Paragraph>
+            {children}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

src/components/ui/PeerBadge.tsx

@@ -1,15 +1,84 @@
-import Badge from "@components/Badge";
-import { MonitorSmartphoneIcon } from "lucide-react";
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn } from "@utils/helpers";
+import { EyeIcon, MonitorSmartphoneIcon, SquarePen } from "lucide-react";
 import * as React from "react";
+import { useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
 
 type Props = {
   children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export default function PeerBadge({ children }: Props) {
+  group?: Group;
+  useSave?: boolean;
+  onAssignmentChange?: (group: Group) => void;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+export default function PeerBadge({
+  children,
+  group,
+  variant = "gray",
+  className,
+  useSave = true,
+  onAssignmentChange,
+}: Props) {
+  const [editGroupPeersModal, setEditGroupPeersModal] = useState(false);
+
+  const { dropdownOptions, addDropdownOptions } = useGroups();
+
+  const currentGroup = useMemo(() => {
+    return dropdownOptions?.find((g) => g.name === group?.name);
+  }, [group, dropdownOptions]);
+
+  const peerCount = useMemo(() => {
+    let peerCount = currentGroup?.peers_count ?? 0;
+    let countedPeers = currentGroup?.peers?.length ?? 0;
+    if (peerCount !== countedPeers) {
+      peerCount = countedPeers;
+    }
+    return peerCount;
+  }, [currentGroup]);
+
+  const updateGroupOptions = (g: Group) => {
+    addDropdownOptions([g]);
+    onAssignmentChange && onAssignmentChange(g);
+  };
+
   return (
-    <Badge variant={"gray"} className={"px-3 gap-2 whitespace-nowrap"}>
-      <MonitorSmartphoneIcon size={12} />
-      {children}
-    </Badge>
+    <>
+      {currentGroup && editGroupPeersModal && (
+        <AssignPeerToGroupModal
+          useSave={useSave}
+          group={currentGroup}
+          onUpdate={(g) => updateGroupOptions(g)}
+          open={editGroupPeersModal}
+          setOpen={setEditGroupPeersModal}
+        />
+      )}
+
+      <Badge
+        variant={variant}
+        className={cn(className, "px-3 gap-2 whitespace-nowrap")}
+        onClick={(e) => {
+          if (!currentGroup) return;
+          e.stopPropagation();
+          setEditGroupPeersModal(true);
+        }}
+        useHover={!!currentGroup}
+      >
+        {!currentGroup && <MonitorSmartphoneIcon size={12} />}
+        {currentGroup ? <>{peerCount} Peer(s)</> : children}
+
+        {currentGroup && (
+          <>
+            {currentGroup.name == "All" ? (
+              <EyeIcon size={12} />
+            ) : (
+              <SquarePen size={12} />
+            )}
+          </>
+        )}
+      </Badge>
+    </>
   );
 }

src/components/ui/PolicyDirection.tsx

@@ -1,12 +1,13 @@
 import Badge from "@components/Badge";
-import {cn} from "@utils/helpers";
-import React, {useEffect} from "react";
+import { cn } from "@utils/helpers";
+import React, { useEffect } from "react";
 import LongArrowLeftIcon from "@/assets/icons/LongArrowLeftIcon";
 
 type Props = {
   disabled?: boolean;
   value: Direction;
   onChange: (value: Direction) => void;
+  className?: string;
 };
 
 export type Direction = "bi" | "in" | "out";
@@ -15,6 +16,7 @@ export default function PolicyDirection({
   disabled = false,
   value,
   onChange,
+  className,
 }: Props) {
   const toggleIn = () => {
     if (value == "in") {
@@ -40,6 +42,14 @@ export default function PolicyDirection({
     }
   };
 
+  const toggleDirection = () => {
+    if (value == "bi") {
+      onChange("in");
+    } else {
+      onChange("bi");
+    }
+  };
+
   useEffect(() => {
     if (disabled) onChange("bi");
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,15 +58,17 @@ export default function PolicyDirection({
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 mt-[23px] cursor-pointer",
+        "flex flex-col gap-2 mt-[23px] cursor-pointer select-none",
         disabled && "opacity-50 pointer-events-none",
+        "hover:opacity-80 transition-all",
+        className,
       )}
+      onClick={toggleDirection}
+      data-cy={"policy-direction"}
     >
       <Badge
         variant={value == "bi" ? "green" : value == "in" ? "blueDark" : "gray"}
         className={"px-4 py-1"}
-        onClick={toggleIn}
-        useHover={true}
       >
         <LongArrowLeftIcon
           size={40}
@@ -72,10 +84,8 @@ export default function PolicyDirection({
         />
       </Badge>
       <Badge
-        useHover={true}
         variant={value == "bi" ? "green" : value == "out" ? "blueDark" : "gray"}
         className={"px-4 py-1"}
-        onClick={toggleOut}
       >
         <LongArrowLeftIcon
           size={40}

src/components/ui/UserDropdown.tsx

@@ -33,10 +33,9 @@ export default function UserDropdown() {
     logout("/", { client_id: config.clientId }).then();
   };
 
-  useHotkeys("shift+mod+l", () => logout(), []);
-
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+  useHotkeys("shift+mod+l", () => logoutSession(), []);
   const { permission } = useLoggedInUser();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   return (
     <DropdownMenu

src/contexts/DialogProvider.tsx

@@ -24,7 +24,7 @@ type DialogOptions = {
   description?: string | React.ReactNode;
   confirmText?: string;
   cancelText?: string;
-  type?: "default" | "warning" | "danger";
+  type?: "default" | "warning" | "danger" | "center";
   children?: React.ReactNode;
 };
 
@@ -51,6 +51,7 @@ export default function DialogProvider({ children }: Props) {
     default: "",
     warning: <AlertCircle size={18} />,
     danger: <AlertTriangle size={18} />,
+    center: "",
   };
 
   return (
@@ -61,8 +62,9 @@ export default function DialogProvider({ children }: Props) {
         onOpenChange={(open) => fn.current && fn.current(open)}
       >
         {dialogOptions && (
-          <ModalContent maxWidthClass={"max-w-lg"} showClose={false}>
+          <ModalContent maxWidthClass={"max-w-[400px]"} showClose={false}>
             <ModalHeader
+              center={dialogOptions.type == "center"}
               title={dialogOptions.title || "Confirmation"}
               margin={"mt-1"}
               description={
@@ -94,6 +96,7 @@ export default function DialogProvider({ children }: Props) {
                   className={"w-full"}
                   size={"sm"}
                   tabIndex={-1}
+                  data-cy={"confirmation.cancel"}
                   onClick={() => fn.current && fn.current(false)}
                 >
                   {dialogOptions.cancelText || "Cancel"}
@@ -109,6 +112,7 @@ export default function DialogProvider({ children }: Props) {
                 }
                 className={"w-full"}
                 size={"sm"}
+                data-cy={"confirmation.confirm"}
                 onClick={() => fn.current && fn.current(true)}
               >
                 {dialogOptions.confirmText || "Confirm"}

src/contexts/GroupsProvider.tsx

@@ -1,8 +1,9 @@
-import useFetchApi from "@utils/api";
-import { usePathname } from "next/navigation";
-import React, { useState } from "react";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { merge, sortBy, unionBy } from "lodash";
+import React, { useEffect, useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
 
 type Props = {
   children: React.ReactNode;
@@ -14,29 +15,114 @@ const GroupContext = React.createContext(
     refresh: () => void;
     dropdownOptions: Group[];
     setDropdownOptions: React.Dispatch<React.SetStateAction<Group[]>>;
+    addDropdownOptions: (options: Group[]) => void;
     isLoading: boolean;
+    createOrUpdate: (group: Group) => Promise<Group>;
+    reset: () => void;
+    updateGroupDropdown: (oldGroupName: string, newGroup: Group) => void;
   },
 );
 
 export default function GroupsProvider({ children }: Props) {
-  const path = usePathname();
-  const { permission } = useLoggedInUser();
+  const { permission, isUser } = useLoggedInUser();
 
-  return path === "/peers" && permission.dashboard_view == "blocked" ? (
+  return permission.dashboard_view == "blocked" ? (
     <>{children}</>
   ) : (
-    <GroupsProviderContent>{children}</GroupsProviderContent>
+    <GroupsProviderContent isUser={isUser}>{children}</GroupsProviderContent>
   );
 }
 
-export function GroupsProviderContent({ children }: Props) {
-  const { data: groups, mutate, isLoading } = useFetchApi<Group[]>("/groups");
+type ProviderContentProps = {
+  children: React.ReactNode;
+  isUser: boolean;
+};
+
+export function GroupsProviderContent({
+  children,
+  isUser,
+}: Readonly<ProviderContentProps>) {
+  const {
+    data: groups,
+    mutate,
+    isLoading,
+  } = useFetchApi<Group[]>("/groups", false, true, !isUser);
+  const groupRequest = useApiCall<Group>("/groups", true);
   const [dropdownOptions, setDropdownOptions] = useState<Group[]>([]);
 
   const refresh = () => {
     if (groups && !isLoading) mutate().then();
   };
 
+  const reset = () => {
+    mutate();
+    setDropdownOptions([]);
+    addDropdownOptions(groups || []);
+  };
+
+  const addDropdownOptions = (options: Group[]) => {
+    setDropdownOptions((prev) => {
+      let union = unionBy(options, prev, "name");
+      return sortBy(
+        union.map((item) =>
+          merge({}, prev.find((p) => p.name === item.name) || {}, item),
+        ),
+        "name",
+      );
+    });
+  };
+
+  const updateGroupDropdown = (oldGroupName: string, newGroup: Group) => {
+    setDropdownOptions((prev) => {
+      let updated = prev.map((g) => {
+        if (g.name === oldGroupName) {
+          return newGroup;
+        }
+        return g;
+      });
+      return sortBy(updated, "name");
+    });
+  };
+
+  // Update dropdown options when groups change
+  useEffect(() => {
+    if (!groups) return;
+    const sortedGroups = sortBy([...groups], "name");
+    const dropdownGroups = dropdownOptions.filter((g) => g.keepClientState);
+    const union = unionBy(dropdownGroups, sortedGroups, "name");
+    addDropdownOptions(union);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groups]);
+
+  const createOrUpdate = async (group: Group) => {
+    let peers = group?.peers?.map((p) => {
+      let isString = typeof p === "string";
+      if (isString) return p;
+      let peer = p as Peer;
+      return peer.id;
+    }) as string[];
+
+    if (group.name === "All") return Promise.resolve(group);
+
+    const groupID =
+      group?.id ?? groups?.find((g) => g.name === group.name)?.id ?? undefined;
+
+    if (groupID) {
+      return groupRequest.put(
+        {
+          name: group.name,
+          peers: peers,
+        },
+        `/${group.id}`,
+      );
+    } else {
+      return groupRequest.post({
+        name: group.name,
+        peers: peers,
+      });
+    }
+  };
+
   return (
     <GroupContext.Provider
       value={{
@@ -44,7 +130,11 @@ export function GroupsProviderContent({ children }: Props) {
         refresh,
         dropdownOptions,
         setDropdownOptions,
+        addDropdownOptions,
         isLoading,
+        createOrUpdate,
+        reset,
+        updateGroupDropdown,
       }}
     >
       {children}

src/contexts/PeerProvider.tsx

@@ -77,9 +77,7 @@ export default function PeerProvider({ children, peer }: Props) {
             ? loginExpiration
             : peer.login_expiration_enabled,
         approval_required:
-          approval_required != undefined
-            ? approval_required
-            : peer.approval_required,
+          approval_required == undefined ? undefined : approval_required,
       },
       `/${peer.id}`,
     );

src/contexts/PeersProvider.tsx

@@ -1,5 +1,5 @@
 import useFetchApi from "@utils/api";
-import React from "react";
+import React, { useMemo } from "react";
 import type { Peer } from "@/interfaces/Peer";
 
 type Props = {
@@ -9,15 +9,21 @@ type Props = {
 const PeerContext = React.createContext(
   {} as {
     peers: Peer[] | undefined;
+    isLoading: boolean;
   },
 );
 
-export default function PeersProvider({ children }: Props) {
-  const { data: peers } = useFetchApi<Peer[]>("/peers");
+export default function PeersProvider({ children }: Readonly<Props>) {
+  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
 
-  return (
-    <PeerContext.Provider value={{ peers }}>{children}</PeerContext.Provider>
-  );
+  const data = useMemo(() => {
+    return {
+      peers,
+      isLoading,
+    };
+  }, [peers, isLoading]);
+
+  return <PeerContext.Provider value={data}>{children}</PeerContext.Provider>;
 }
 
 export const usePeers = () => React.useContext(PeerContext);

src/contexts/PoliciesProvider.tsx

@@ -15,12 +15,15 @@ const PoliciesContext = React.createContext(
       onSuccess?: (p: Policy) => void,
       message?: string,
     ) => void;
+    createPolicy: (policy: Policy) => Promise<Policy>;
   },
 );
 
 export default function PoliciesProvider({ children }: Props) {
   const request = useApiCall<Policy>("/policies");
 
+  const createPolicy = async (policy: Policy) => request.post(policy);
+
   const updatePolicy = async (
     policy: Policy,
     toUpdate: Partial<Policy>,
@@ -29,9 +32,8 @@ export default function PoliciesProvider({ children }: Props) {
   ) => {
     notify({
       title: "Access Control Policy " + policy.name,
-      description: message
-        ? message
-        : "The access control policy was successfully updated",
+      description:
+        message || "The access control policy was successfully updated",
       promise: request
         .put(
           {
@@ -55,7 +57,7 @@ export default function PoliciesProvider({ children }: Props) {
   };
 
   return (
-    <PoliciesContext.Provider value={{ updatePolicy }}>
+    <PoliciesContext.Provider value={{ updatePolicy, createPolicy }}>
       {children}
     </PoliciesContext.Provider>
   );

src/contexts/RoutesProvider.tsx

@@ -20,11 +20,12 @@ const RoutesContext = React.createContext(
       toUpdate: Partial<Route>,
       onSuccess?: (route: Route) => void,
       message?: string,
+      options?: { remove_access_control_groups?: boolean },
     ) => void;
   },
 );
 
-export default function RoutesProvider({ children }: Props) {
+export default function RoutesProvider({ children }: Readonly<Props>) {
   const routeRequest = useApiCall<Route>("/routes", true);
   const { mutate } = useSWRConfig();
 
@@ -33,12 +34,13 @@ export default function RoutesProvider({ children }: Props) {
     toUpdate: Partial<Route>,
     onSuccess?: (route: Route) => void,
     message?: string,
+    options?: { remove_access_control_groups?: boolean },
   ) => {
+    const hasDomains = route.domains ? route.domains.length > 0 : false;
+
     notify({
       title: "Network " + route.network_id + "-" + route.network,
-      description: message
-        ? message
-        : "The network route was successfully updated",
+      description: message ?? "The network route was successfully updated",
       promise: routeRequest
         .put(
           {
@@ -48,10 +50,17 @@ export default function RoutesProvider({ children }: Props) {
             peer: toUpdate.peer ?? (route.peer || undefined),
             peer_groups:
               toUpdate.peer_groups ?? (route.peer_groups || undefined),
-            network: route.network,
+            network: !hasDomains ? route.network : undefined,
+            domains: hasDomains ? route.domains : undefined,
+            keep_route: route.keep_route,
             metric: toUpdate.metric ?? route.metric ?? 9999,
             masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
             groups: toUpdate.groups ?? route.groups ?? [],
+            access_control_groups: options?.remove_access_control_groups
+              ? undefined
+              : toUpdate.access_control_groups ??
+                route.access_control_groups ??
+                undefined,
           },
           `/${route.id}`,
         )
@@ -70,9 +79,7 @@ export default function RoutesProvider({ children }: Props) {
   ) => {
     notify({
       title: "Network " + route.network_id + "-" + route.network,
-      description: message
-        ? message
-        : "The network route was successfully created",
+      description: message ?? "The network route was successfully created",
       promise: routeRequest
         .post({
           network_id: route.network_id,
@@ -80,10 +87,13 @@ export default function RoutesProvider({ children }: Props) {
           enabled: route.enabled,
           peer: route.peer || undefined,
           peer_groups: route.peer_groups || undefined,
-          network: route.network,
+          network: route?.network || undefined,
+          domains: route?.domains || undefined,
+          keep_route: route?.keep_route || false,
           metric: route.metric || 9999,
           masquerade: route.masquerade,
           groups: route.groups || [],
+          access_control_groups: route?.access_control_groups || undefined,
         })
         .then((route) => {
           mutate("/routes");

src/hooks/useAutosizeTextArea.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string,
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "42px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

src/hooks/useLocalStorage.tsx

@@ -19,7 +19,10 @@ type SetValue<T> = Dispatch<SetStateAction<T>>;
 export function useLocalStorage<T>(
   key: string,
   initialValue: T,
+  enabled: boolean = true,
 ): [T, SetValue<T>] {
+  const [tempValue, setTempValue] = useState(initialValue);
+
   // Get from local storage then
   // parse stored json or return initialValue
   const readValue = useCallback((): T => {
@@ -39,11 +42,18 @@ export function useLocalStorage<T>(
 
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(readValue);
+  const [storedValue, setStoredValue] = useState<T>(
+    enabled ? readValue : initialValue,
+  );
 
   // Return a wrapped version of useState's setter function that ...
   // ... persists the new value to localStorage.
   const setValue: SetValue<T> = useEventCallback((value) => {
+    if (!enabled) {
+      setStoredValue(value);
+      return;
+    }
+
     // Prevent build error "window is undefined" but keeps working
     if (typeof window === "undefined") {
       console.warn(
@@ -69,12 +79,14 @@ export function useLocalStorage<T>(
   });
 
   useEffect(() => {
+    if (!enabled) return;
     setStoredValue(readValue());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleStorageChange = useCallback(
     (event: StorageEvent | CustomEvent) => {
+      if (!enabled) return;
       if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {
         return;
       }
@@ -90,6 +102,9 @@ export function useLocalStorage<T>(
   // See: useLocalStorage()
   useEventListener("local-storage", handleStorageChange);
 
+  if (!enabled) {
+    return [tempValue, setTempValue];
+  }
   return [storedValue, setValue];
 }
 

src/hooks/useOperatingSystem.ts

@@ -2,6 +2,10 @@
 
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 
+/**
+ * Get the operating system of the user based on the user agent of the browser
+ * This is used for the setup modal to show the correct installation guide
+ */
 export default function useOperatingSystem() {
   const isBrowser = typeof window !== "undefined";
   const userAgent = isBrowser ? navigator.userAgent.toLowerCase() : "";
@@ -9,16 +13,26 @@ export default function useOperatingSystem() {
     ? /(iP*)/g.test(navigator.userAgent) && navigator.maxTouchPoints > 2
     : false;
   if (iOS) return OperatingSystem.IOS;
+  // For FreeBSD, we return Linux as we currently don't have an official installation guide for FreeBSD
+  if (userAgent.toLowerCase().includes("freebsd")) return OperatingSystem.LINUX;
   return getOperatingSystem(userAgent);
 }
 
+/**
+ * Get the operating system based on a string (user agent, api response, etc.)
+ * Falls back to Linux if the operating system is not recognized
+ */
 export const getOperatingSystem = (os: string) => {
+  if (os.toLowerCase().includes("freebsd"))
+    return OperatingSystem.FREEBSD as const;
   if (os.toLowerCase().includes("darwin"))
     return OperatingSystem.APPLE as const;
   if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const;
   if (os.toLowerCase().includes("android"))
     return OperatingSystem.ANDROID as const;
   if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("ipad")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("iphone")) return OperatingSystem.IOS as const;
   if (os.toLowerCase().includes("windows"))
     return OperatingSystem.WINDOWS as const;
   return OperatingSystem.LINUX as const;

src/hooks/usePortalElement.tsx

@@ -0,0 +1,12 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function usePortalElement<Element>() {
+  const ref = useRef<Element>(null);
+  const [portalTarget, setPortalTarget] = useState<Element | null>(null);
+
+  useLayoutEffect(() => {
+    setPortalTarget(ref.current);
+  }, []);
+
+  return { ref, portalTarget, setPortalTarget };
+}

src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+
+const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default usePrevious;

src/hooks/useRedirect.tsx

@@ -1,8 +1,9 @@
 import loadConfig from "@utils/config";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 const config = loadConfig();
+
 export const useRedirect = (
   url: string,
   replace: boolean = false,
@@ -10,24 +11,43 @@ export const useRedirect = (
 ) => {
   const router = useRouter();
   const currentPath = usePathname();
-  const callBackUrls = [config.redirectURI, config.silentRedirectURI];
+  const callBackUrls = useRef([config.redirectURI, config.silentRedirectURI]);
+  const isRedirecting = useRef(false);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    if (!enable) return;
-    if (callBackUrls.includes(url)) return; // Don't redirect to the callback urls to avoid infinite loop
-    if (url === currentPath) return; // Don't redirect to the current page
+    // If redirect is disabled or the url is already in the callback urls or the url is the current path then do not redirect
+    if (!enable || callBackUrls.current.includes(url) || url === currentPath)
+      return;
 
-    const redirect = replace ? router.replace : router.push; // Replace the current history or add a new one
+    const performRedirect = () => {
+      if (!isRedirecting.current) {
+        isRedirecting.current = true;
+        router.refresh();
+        if (replace) {
+          router.replace(url);
+        } else {
+          router.push(url);
+        }
+        isRedirecting.current = false;
+      }
+    };
 
-    router.refresh();
-    redirect(url);
+    performRedirect();
 
-    // Timer in case the user has his browser tab open but not focused
-    const interval = setInterval(() => {
-      router.refresh();
-      redirect(url);
-    }, 1000);
+    // Try to redirect after 1.25 seconds if for whatever reason the redirect did not happen (network change, browser tab open but not focused etc.)
+    intervalRef.current = setInterval(() => {
+      if (!isRedirecting.current) {
+        performRedirect();
+      }
+    }, 1250);
 
-    return () => clearInterval(interval);
-  }, [replace, router, url, enable]);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [replace, router, url, enable, currentPath]);
 };
+
+export default useRedirect;

src/hooks/useSearch.ts

@@ -0,0 +1,91 @@
+import { debounce as lodashDebounce, isEqual } from "lodash";
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import usePrevious from "./usePrevious";
+
+export type Predicate<T> = (item: T, query: string) => boolean;
+
+export interface Options {
+  initialQuery?: string;
+  filter?: boolean;
+  debounce?: number;
+}
+
+function filterCollection<T>(
+  collection: T[],
+  predicate: Predicate<T>,
+  query: string,
+  filter: boolean,
+): T[] {
+  if (query) {
+    return collection.filter((item) => predicate(item, query));
+  } else {
+    return filter ? collection : [];
+  }
+}
+
+export function useSearch<T>(
+  collection: T[],
+  predicate: Predicate<T>,
+  { debounce, filter = false, initialQuery = "" }: Options = {},
+): [
+  T[],
+  string,
+  (event: ChangeEvent<HTMLInputElement> | string) => void,
+  (querty: string) => void,
+] {
+  const isMounted = useRef<boolean>(false);
+  const [query, setQuery] = useState<string>(initialQuery);
+  const prevCollection = usePrevious(collection);
+  const prevPredicate = usePrevious(predicate);
+  const prevQuery = usePrevious(query);
+  const prevFilter = usePrevious(filter);
+  const [filteredCollection, setFilteredCollection] = useState<T[]>(() =>
+    filterCollection<T>(collection, predicate, query, filter),
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement> | string) => {
+      setQuery(typeof event === "string" ? event : event.target.value);
+    },
+    [setQuery],
+  );
+
+  const debouncedFilterCollection = useCallback(
+    lodashDebounce(
+      (
+        collection: T[],
+        predicate: Predicate<T>,
+        query: string,
+        filter: boolean,
+      ) => {
+        if (isMounted.current) {
+          setFilteredCollection(
+            filterCollection(collection, predicate, query, filter),
+          );
+        }
+      },
+      debounce,
+    ),
+    [debounce],
+  );
+
+  useEffect(() => {
+    if (
+      !isEqual(collection, prevCollection) ||
+      !isEqual(predicate, prevPredicate) ||
+      !isEqual(query, prevQuery) ||
+      !isEqual(filter, prevFilter)
+    )
+      debouncedFilterCollection(collection, predicate, query, filter);
+  }, [collection, predicate, query, filter]);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return [filteredCollection, query, handleChange, setQuery];
+}

src/hooks/useSortedDropdownOptions.ts

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Group } from "@/interfaces/Group";
+
+const useSortedDropdownOptions = (
+  dropdownOptions: Group[],
+  values: Group[],
+  isPopupOpen: boolean,
+): Group[] => {
+  const sortOrderRef = useRef<Map<string, number>>(new Map());
+  const prevValuesRef = useRef<Group[]>([]);
+
+  // Update sort order when values change and popup is closed
+  useEffect(() => {
+    if (
+      !isPopupOpen &&
+      JSON.stringify(values) !== JSON.stringify(prevValuesRef.current)
+    ) {
+      sortOrderRef.current = new Map(
+        values.map((group, index) => [group.name, index]),
+      );
+      prevValuesRef.current = values;
+    }
+  }, [values, isPopupOpen]);
+
+  // Sort the dropdown options based on the current sort order
+  return useMemo(() => {
+    const sortOrder = sortOrderRef.current;
+    return [...dropdownOptions].sort((a, b) => {
+      const indexA = sortOrder.get(a.name) ?? Infinity;
+      const indexB = sortOrder.get(b.name) ?? Infinity;
+      return indexA - indexB;
+    });
+  }, [dropdownOptions, sortOrderRef.current]);
+};
+
+export default useSortedDropdownOptions;

src/interfaces/Account.ts

@@ -11,5 +11,6 @@ export interface Account {
     jwt_groups_claim_name: string;
     jwt_allow_groups: string[];
     regular_users_view_blocked: boolean;
+    routing_peer_dns_resolution_enabled: boolean;
   };
 }

src/interfaces/Domain.ts

@@ -0,0 +1,4 @@
+export interface Domain {
+  id?: string;
+  name: string;
+}

src/interfaces/Group.ts

@@ -3,6 +3,11 @@ export interface Group {
   name: string;
   peers?: GroupPeer[] | string[];
   peers_count?: number;
+  resources?: string[];
+  resources_count?: number;
+
+  // Frontend only
+  keepClientState?: boolean;
 }
 
 export interface GroupPeer {

src/interfaces/Nameserver.ts

@@ -17,11 +17,6 @@ export interface Nameserver {
   id?: string;
 }
 
-export interface Domain {
-  id?: string;
-  name: string;
-}
-
 export const NameserverPresets: Record<string, NameserverGroup> = {
   Default: {
     name: "",

src/interfaces/Network.ts

@@ -0,0 +1,28 @@
+import { Group } from "@/interfaces/Group";
+
+export interface Network {
+  id: string;
+  name: string;
+  description?: string;
+  resources?: string[];
+  policies?: string[];
+  routers?: string[];
+  routing_peers_count?: number;
+}
+
+export interface NetworkRouter {
+  id: string;
+  peer?: string;
+  peer_groups?: string[];
+  metric: number;
+  masquerade: boolean;
+}
+
+export interface NetworkResource {
+  id: string;
+  name: string;
+  description?: string;
+  address: string;
+  groups?: string[] | Group[];
+  type?: "domain" | "host" | "subnet";
+}

src/interfaces/OperatingSystem.ts

@@ -6,4 +6,5 @@ export enum OperatingSystem {
   DOCKER,
   IOS,
   UNKNOWN,
+  FREEBSD,
 }

src/interfaces/Policy.ts

@@ -1,13 +1,14 @@
 import { Group } from "@/interfaces/Group";
+import { PostureCheck } from "@/interfaces/PostureCheck";
 
 export interface Policy {
   id?: string;
   name: string;
   description: string;
   enabled: boolean;
-  query: string;
+  query?: string;
   rules: PolicyRule[];
-  source_posture_checks: string[];
+  source_posture_checks: string[] | PostureCheck[];
 }
 
 export interface PolicyRule {

src/interfaces/PostureCheck.ts

@@ -10,6 +10,7 @@ export interface PostureCheck {
     os_version_check?: OperatingSystemVersionCheck;
     geo_location_check?: GeoLocationCheck;
     peer_network_range_check?: PeerNetworkRangeCheck;
+    process_check?: ProcessCheck;
   };
   policies?: Policy[];
   active?: boolean;
@@ -53,6 +54,17 @@ export interface PeerNetworkRangeCheck {
   action: "allow" | "deny";
 }
 
+export interface ProcessCheck {
+  processes: Process[];
+}
+
+export interface Process {
+  id: string;
+  linux_path?: string;
+  mac_path?: string;
+  windows_path?: string;
+}
+
 export const windowsKernelVersions: SelectOption[] = [
   { value: "5.0", label: "Windows 2000" },
   { value: "5.1", label: "Windows XP" },

src/interfaces/Route.ts

@@ -3,26 +3,37 @@ export interface Route {
   description: string;
   enabled: boolean;
   peer?: string;
-  network: string;
+  network?: string;
+  domains?: string[];
   network_id: string;
   network_type?: string;
   metric?: number;
   masquerade: boolean;
   groups: string[];
+  keep_route?: boolean;
+  access_control_groups?: string[];
+  // Frontend only
   peer_groups?: string[];
   routesGroups?: string[];
   groupedRoutes?: GroupedRoute[];
   group_names?: string[];
+  domain_search?: string;
 }
 
 export interface GroupedRoute {
   id: string;
   enabled: boolean;
-  network: string;
+  network?: string;
+  domains?: string[];
+  keep_route?: boolean;
+  access_control_groups?: string[];
   network_id: string;
   high_availability_count: number;
   is_using_route_groups: boolean;
   routes?: Route[];
   group_names?: string[];
   description?: string;
+  description_search?: string;
+  domain_search?: string;
+  routes_search?: string;
 }

src/layouts/AppLayout.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import "../app/globals.css";
+import { DisableDarkReader } from "@components/DisableDarkReader";
 import { TooltipProvider } from "@components/Tooltip";
 import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
@@ -52,6 +53,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
             }}
           />
           <NavigationEvents />
+          <DisableDarkReader />
         </AnalyticsProvider>
       </body>
     </html>

src/layouts/Navigation.tsx

@@ -8,7 +8,6 @@ import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import DocsIcon from "@/assets/icons/DocsIcon";
-import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import SettingsIcon from "@/assets/icons/SettingsIcon";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
@@ -17,6 +16,7 @@ import SidebarItem from "@/components/SidebarItem";
 import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { headerHeight } from "@/layouts/Header";
+import { NetworkNavigation } from "@/modules/networks/misc/NetworkNavigation";
 
 const customTheme: CustomFlowbiteTheme["sidebar"] = {
   root: {
@@ -34,6 +34,7 @@ export default function Navigation({
   hideOnMobile = false,
 }: Props) {
   const { isUser } = useLoggedInUser();
+  const { isOwnerOrAdmin } = useLoggedInUser();
   const { bannerHeight } = useAnnouncement();
 
   return (
@@ -104,11 +105,8 @@ export default function Navigation({
                       />
                     </SidebarItem>
 
-                    <SidebarItem
-                      icon={<NetworkRoutesIcon />}
-                      label="Network Routes"
-                      href={"/network-routes"}
-                    />
+                    <NetworkNavigation />
+
                     <SidebarItem
                       icon={<DNSIcon />}
                       label="DNS"
@@ -141,33 +139,24 @@ export default function Navigation({
                     />
                   </>
                 )}
-
-                {isUser && (
-                  <SidebarItem
-                    icon={<DocsIcon />}
-                    href={"https://docs.netbird.io/"}
-                    target={"_blank"}
-                    label="Documentation"
-                  />
-                )}
               </SidebarItemGroup>
-              {!isUser && (
-                <SidebarItemGroup>
+
+              <SidebarItemGroup>
+                {isOwnerOrAdmin && (
                   <SidebarItem
                     icon={<SettingsIcon />}
                     label="Settings"
                     href={"/settings"}
                     exactPathMatch={true}
                   />
-
-                  <SidebarItem
-                    icon={<DocsIcon />}
-                    href={"https://docs.netbird.io/"}
-                    target={"_blank"}
-                    label="Documentation"
-                  />
-                </SidebarItemGroup>
-              )}
+                )}
+                <SidebarItem
+                  icon={<DocsIcon />}
+                  href={"https://docs.netbird.io/"}
+                  target={"_blank"}
+                  label="Documentation"
+                />
+              </SidebarItemGroup>
             </div>
           </div>
         </ScrollArea>

src/layouts/PageContainer.tsx

@@ -11,6 +11,7 @@ export default function PageContainer({ children, className }: Props) {
       className={cn(
         className,
         "relative flex-auto overflow-auto bg-nb-gray z-1",
+        "focus:outline-none",
       )}
     >
       {children}

src/modules/access-control/AccessControlModal.tsx

@@ -14,7 +14,6 @@ import {
   ModalTrigger,
 } from "@components/modal/Modal";
 import ModalHeader from "@components/modal/ModalHeader";
-import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { PortSelector } from "@components/PortSelector";
@@ -27,10 +26,8 @@ import {
 } from "@components/Select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
-import PolicyDirection, { Direction } from "@components/ui/PolicyDirection";
-import useFetchApi, { useApiCall } from "@utils/api";
+import PolicyDirection from "@components/ui/PolicyDirection";
 import { cn } from "@utils/helpers";
-import { uniqBy } from "lodash";
 import {
   ArrowRightLeft,
   ExternalLinkIcon,
@@ -42,14 +39,12 @@ import {
   Shield,
   Text,
 } from "lucide-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useSWRConfig } from "swr";
+import React, { useMemo, useState } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
-import { usePolicies } from "@/contexts/PoliciesProvider";
 import { Group } from "@/interfaces/Group";
 import { Policy, Protocol } from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
-import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useAccessControl } from "@/modules/access-control/useAccessControl";
 import { PostureCheckTab } from "@/modules/posture-checks/ui/PostureCheckTab";
 import { PostureCheckTabTrigger } from "@/modules/posture-checks/ui/PostureCheckTabTrigger";
 
@@ -62,20 +57,20 @@ type UpdateModalProps = {
   open: boolean;
   onOpenChange?: (open: boolean) => void;
   cell?: string;
+  postureCheckTemplates?: PostureCheck[];
+  onSuccess?: (policy: Policy) => void;
+  useSave?: boolean;
+  allowEditPeers?: boolean;
 };
 
-export default function AccessControlModal({ children }: Props) {
+export default function AccessControlModal({ children }: Readonly<Props>) {
   const [modal, setModal] = useState(false);
 
   return (
-    <>
-      <Modal open={modal} onOpenChange={setModal} key={modal ? 1 : 0}>
-        {children && <ModalTrigger asChild>{children}</ModalTrigger>}
-        {modal && (
-          <AccessControlModalContent onSuccess={() => setModal(false)} />
-        )}
-      </Modal>
-    </>
+    <Modal open={modal} onOpenChange={setModal} key={modal ? 1 : 0}>
+      {children && <ModalTrigger asChild>{children}</ModalTrigger>}
+      {modal && <AccessControlModalContent onSuccess={() => setModal(false)} />}
+    </Modal>
   );
 }
 
@@ -84,38 +79,84 @@ export function AccessControlUpdateModal({
   open,
   onOpenChange,
   cell,
-}: UpdateModalProps) {
+  postureCheckTemplates,
+  onSuccess,
+  useSave = true,
+  allowEditPeers,
+}: Readonly<UpdateModalProps>) {
   return (
-    <>
-      <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
-        {open && (
-          <AccessControlModalContent
-            onSuccess={() => onOpenChange && onOpenChange(false)}
-            policy={policy}
-            cell={cell}
-          />
-        )}
-      </Modal>
-    </>
+    <Modal open={open} onOpenChange={onOpenChange} key={open ? 1 : 0}>
+      {open && (
+        <AccessControlModalContent
+          onSuccess={(p) => {
+            onOpenChange && onOpenChange(false);
+            onSuccess && onSuccess(p);
+          }}
+          policy={policy}
+          cell={cell}
+          postureCheckTemplates={postureCheckTemplates}
+          useSave={useSave}
+          allowEditPeers={allowEditPeers}
+        />
+      )}
+    </Modal>
   );
 }
 
 type ModalProps = {
   onSuccess?: (p: Policy) => void;
   policy?: Policy;
+  initialDestinationGroups?: Group[] | string[];
+  initialName?: string;
+  initialDescription?: string;
   cell?: string;
+  postureCheckTemplates?: PostureCheck[];
+  useSave?: boolean;
+  allowEditPeers?: boolean;
 };
 
 export function AccessControlModalContent({
   onSuccess,
   policy,
   cell,
-}: ModalProps) {
-  const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
-    useFetchApi<PostureCheck[]>("/posture-checks");
-
-  const { updatePolicy } = usePolicies();
-  const firstRule = policy?.rules ? policy.rules[0] : undefined;
+  postureCheckTemplates,
+  useSave = true,
+  allowEditPeers = false,
+  initialDestinationGroups,
+  initialName,
+  initialDescription,
+}: Readonly<ModalProps>) {
+  const {
+    portAndDirectionDisabled,
+    destinationGroups,
+    direction,
+    ports,
+    sourceGroups,
+    setSourceGroups,
+    setDestinationGroups,
+    setPorts,
+    setDirection,
+    setProtocol,
+    enabled,
+    setEnabled,
+    setName,
+    setDescription,
+    setPostureChecks,
+    name,
+    protocol,
+    description,
+    postureChecks,
+    submit,
+    isPostureChecksLoading,
+    getPolicyData,
+  } = useAccessControl({
+    policy,
+    postureCheckTemplates,
+    onSuccess,
+    initialDestinationGroups,
+    initialName,
+    initialDescription,
+  });
 
   const [tab, setTab] = useState(() => {
     if (!cell) return "policy";
@@ -124,152 +165,36 @@ export function AccessControlModalContent({
     return "policy";
   });
 
-  const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
-  const [ports, setPorts] = useState<number[]>(() => {
-    if (!firstRule) return [];
-    if (firstRule.ports == undefined) return [];
-    if (firstRule.ports.length > 0) {
-      return firstRule.ports.map((p) => Number(p));
+  const continuePostureChecksDisabled = useMemo(() => {
+    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
+    if (direction != "bi" && ports.length == 0) return true;
+  }, [sourceGroups, destinationGroups, direction, ports]);
+
+  const submitDisabled = useMemo(() => {
+    if (name.length == 0) return true;
+    if (continuePostureChecksDisabled) return true;
+  }, [name, continuePostureChecksDisabled]);
+
+  const handleProtocolChange = (p: Protocol) => {
+    setProtocol(p);
+    if (p == "icmp") {
+      setPorts([]);
     }
-    return [];
-  });
-  const [protocol, setProtocol] = useState<Protocol>(
-    firstRule ? firstRule.protocol : "all",
-  );
-  const [direction, setDirection] = useState<Direction>(() => {
-    if (firstRule && firstRule?.bidirectional) return "bi";
-    if (firstRule && firstRule?.bidirectional == false) return "in";
-    return "bi";
-  });
-  const [name, setName] = useState(policy?.name || "");
-  const [description, setDescription] = useState(policy?.description || "");
-  const { mutate } = useSWRConfig();
-
-  const policyRequest = useApiCall<Policy>("/policies");
-
-  const [
-    sourceGroups,
-    setSourceGroups,
-    { getGroupsToUpdate: getSourceGroupsToUpdate },
-  ] = useGroupHelper({
-    initial: firstRule ? (firstRule.sources as Group[]) : [],
-  });
-
-  const [
-    destinationGroups,
-    setDestinationGroups,
-    { getGroupsToUpdate: getDestinationGroupsToUpdate },
-  ] = useGroupHelper({
-    initial: firstRule ? (firstRule.destinations as Group[]) : [],
-  });
-
-  const submit = async () => {
-    const g1 = getSourceGroupsToUpdate();
-    const g2 = getDestinationGroupsToUpdate();
-    const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
-      (g) => g.promise,
-    );
-    const groups = await Promise.all(
-      createOrUpdateGroups.map((call) => call()),
-    );
-
-    let sources = sourceGroups
-      .map((g) => {
-        const find = groups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
-    let destinations = destinationGroups
-      .map((g) => {
-        const find = groups.find((group) => group.name === g.name);
-        return find?.id;
-      })
-      .filter((g) => g !== undefined) as string[];
-
-    if (direction == "out") {
-      const tmp = sources;
-      sources = destinations;
-      destinations = tmp;
+    if (p == "all") {
+      setPorts([]);
     }
-
-    const policyObj = {
-      name,
-      description,
-      enabled,
-      source_posture_checks: postureChecks
-        ? postureChecks.map((c) => c.id)
-        : undefined,
-      rules: [
-        {
-          bidirectional: direction == "bi",
-          description,
-          name,
-          action: "accept",
-          protocol,
-          enabled,
-          sources,
-          destinations,
-          ports: ports.length > 0 ? ports.map((p) => p.toString()) : undefined,
-        },
-      ],
-    } as Policy;
-
-    if (policy) {
-      updatePolicy(
-        policy,
-        policyObj,
-        () => {
-          mutate("/policies");
-          onSuccess && onSuccess(policy);
-        },
-        "The policy was successfully saved",
-      );
-    } else {
-      notify({
-        title: "Create Access Control Policy",
-        description: "Policy was created successfully.",
-        loadingMessage: "Creating your policy...",
-        promise: policyRequest.post(policyObj).then((policy) => {
-          mutate("/policies");
-          onSuccess && onSuccess(policy);
-        }),
-      });
+    if (p == "tcp" || p == "udp") {
+      setDirection("in");
     }
   };
 
-  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
-
-  const buttonDisabled = useMemo(() => {
-    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
-    if (name.length == 0) return true;
-    if (direction != "bi" && ports.length == 0) return true;
-  }, [sourceGroups, destinationGroups, direction, ports, name]);
-
-  const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
-  const postureChecksLoaded = useRef(false);
-
-  const initialPostureChecks = useMemo(() => {
-    return (
-      allPostureChecks?.filter((check) => {
-        if (policy?.source_posture_checks) {
-          return policy.source_posture_checks.includes(check.id);
-        }
-        return false;
-      }) || []
-    );
-  }, [policy, allPostureChecks]);
-
-  useEffect(() => {
-    if (postureChecksLoaded.current) return;
-
-    if (initialPostureChecks.length > 0) {
-      postureChecksLoaded.current = true;
-      setPostureChecks(initialPostureChecks);
-    }
-  }, [initialPostureChecks]);
+  const close = () => {
+    const data = getPolicyData();
+    onSuccess && onSuccess(data);
+  };
 
   return (
-    <ModalContent maxWidthClass={"max-w-2xl"}>
+    <ModalContent maxWidthClass={"max-w-3xl"}>
       <ModalHeader
         icon={<AccessControlIcon className={"fill-netbird"} />}
         title={
@@ -283,14 +208,17 @@ export function AccessControlModalContent({
         color={"netbird"}
       />
 
-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
         <TabsList justify={"start"} className={"px-8"}>
           <TabsTrigger value={"policy"}>
             <ArrowRightLeft size={16} />
             Policy
           </TabsTrigger>
-          <PostureCheckTabTrigger />
-          <TabsTrigger value={"general"}>
+          <PostureCheckTabTrigger disabled={continuePostureChecksDisabled} />
+          <TabsTrigger
+            value={"general"}
+            disabled={continuePostureChecksDisabled}
+          >
             <Text
               size={16}
               className={
@@ -303,7 +231,10 @@ export function AccessControlModalContent({
 
         <TabsContent value={"policy"} className={"pb-8"}>
           <div className={"px-8 flex-col flex gap-6"}>
-            <div className={"flex justify-between items-center"}>
+            <div
+              className={"flex justify-between items-center"}
+              data-cy={"protocol-wrapper"}
+            >
               <div>
                 <Label>Protocol</Label>
                 <HelpText className={"max-w-sm"}>
@@ -315,15 +246,18 @@ export function AccessControlModalContent({
               </div>
               <Select
                 value={protocol}
-                onValueChange={(v) => setProtocol(v as Protocol)}
+                onValueChange={(v) => handleProtocolChange(v as Protocol)}
               >
                 <SelectTrigger className="w-[140px]">
-                  <div className={"flex items-center gap-3"}>
+                  <div
+                    className={"flex items-center gap-3"}
+                    data-cy={"protocol-select-button"}
+                  >
                     <Share2 size={15} className={"text-nb-gray-300"} />
                     <SelectValue placeholder="Select protocol..." />
                   </div>
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent data-cy={"protocol-selection"}>
                   <SelectItem value="all">ALL</SelectItem>
                   <SelectItem value="tcp">TCP</SelectItem>
                   <SelectItem value="udp">UDP</SelectItem>
@@ -339,9 +273,14 @@ export function AccessControlModalContent({
                   Source
                 </Label>
                 <PeerGroupSelector
+                  dataCy={"source-group-selector"}
+                  showPeerCount={allowEditPeers}
+                  disableInlineRemoveGroup={false}
                   popoverWidth={500}
+                  showRoutes={false}
                   onChange={setSourceGroups}
                   values={sourceGroups}
+                  saveGroupAssignments={useSave}
                 />
               </div>
               <PolicyDirection
@@ -356,9 +295,14 @@ export function AccessControlModalContent({
                   Destination
                 </Label>
                 <PeerGroupSelector
+                  dataCy={"destination-group-selector"}
+                  showRoutes={true}
+                  showPeerCount={allowEditPeers}
+                  disableInlineRemoveGroup={false}
                   popoverWidth={500}
                   onChange={setDestinationGroups}
                   values={destinationGroups}
+                  saveGroupAssignments={useSave}
                 />
               </div>
             </div>
@@ -418,6 +362,7 @@ export function AccessControlModalContent({
                 autoFocus={true}
                 tabIndex={0}
                 value={name}
+                data-cy={"policy-name"}
                 onChange={(e) => setName(e.target.value)}
                 placeholder={"e.g., Devs to Servers"}
               />
@@ -429,6 +374,7 @@ export function AccessControlModalContent({
               </HelpText>
               <Textarea
                 value={description}
+                data-cy={"policy-description"}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder={
                   "e.g., Devs are allowed to access servers and servers are allowed to access Devs."
@@ -446,7 +392,7 @@ export function AccessControlModalContent({
             Learn more about
             <InlineLink
               href={
-                "https://docs.netbird.io/how-to/routing-traffic-to-private-networks"
+                "https://docs.netbird.io/how-to/manage-network-access"
               }
               target={"_blank"}
             >
@@ -456,24 +402,81 @@ export function AccessControlModalContent({
           </Paragraph>
         </div>
         <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {!policy ? (
+            <>
+              {tab == "policy" && (
+                <ModalClose asChild={true}>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+              )}
 
-          <Button
-            variant={"primary"}
-            disabled={buttonDisabled}
-            onClick={submit}
-          >
-            {policy ? (
-              <>Save Changes</>
-            ) : (
-              <>
-                <PlusCircle size={16} />
-                Add Policy
-              </>
-            )}
-          </Button>
+              {tab == "posture_checks" && (
+                <Button variant={"secondary"} onClick={() => setTab("policy")}>
+                  Back
+                </Button>
+              )}
+
+              {tab == "policy" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("posture_checks")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "posture_checks" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("general")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "general" && (
+                <>
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("posture_checks")}
+                  >
+                    Back
+                  </Button>
+
+                  <Button
+                    variant={"primary"}
+                    disabled={submitDisabled}
+                    onClick={submit}
+                    data-cy={"submit-policy"}
+                  >
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+              <Button
+                variant={"primary"}
+                disabled={submitDisabled}
+                onClick={() => {
+                  if (useSave) {
+                    submit();
+                  } else {
+                    close();
+                  }
+                }}
+              >
+                Save Changes
+              </Button>
+            </>
+          )}
         </div>
       </ModalFooter>
     </ModalContent>