add resources to groups update operation (#434)

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

.github/workflows/codespell.yml

@@ -13,4 +13,4 @@ jobs:
         with:
           only_warn: 1
           skip: package-lock.json,*.svg
-          ignore_words_list: mappin          
+          ignore_words_list: mappin, allTime

package.json

@@ -55,8 +55,8 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.383.0",
-    "next": "13.5.5",
+    "lucide-react": "^0.460.0",
+    "next": "13.5.7",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18",
@@ -76,7 +76,7 @@
     "typescript": "^5"
   },
   "devDependencies": {
-    "cypress": "^13.3.3",
+    "cypress": "^13.13.0",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

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,7 @@ 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";
@@ -54,15 +55,12 @@ 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();
@@ -72,7 +70,7 @@ export default function PeerPage() {
   useRedirect("/peers", false, !peerId);
 
   return peer && !isLoading ? (
-    <PeerProvider peer={peer}>
+    <PeerProvider peer={peer} key={peerId}>
       <PeerOverview />
     </PeerProvider>
   ) : (
@@ -133,7 +131,6 @@ function PeerOverview() {
   };
 
   const { isUser } = useLoggedInUser();
-  const hasExitNodes = useHasExitNodes(peer);
 
   return (
     <PageContainer>
@@ -300,29 +297,12 @@ 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}
@@ -330,36 +310,25 @@ function PeerOverview() {
                     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)/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

@@ -22,11 +22,13 @@ import { useSWRConfig } from "swr";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { Group } from "@/interfaces/Group";
 import { Role, User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 import AccessTokensTable from "@/modules/access-tokens/AccessTokensTable";
 import CreateAccessTokenModal from "@/modules/access-tokens/CreateAccessTokenModal";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 import UserBlockCell from "@/modules/users/table-cells/UserBlockCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
@@ -45,8 +47,10 @@ export default function UserPage() {
 
   useRedirect("/team/users", false, !userId);
 
-  return !isLoading && user ? (
-    <UserOverview user={user} />
+  const userGroups = useGroupIdsToGroups(user?.auto_groups);
+
+  return !isLoading && user && userGroups !== undefined ? (
+    <UserOverview user={user} initialGroups={userGroups} />
   ) : (
     <FullScreenLoading />
   );
@@ -54,16 +58,16 @@ export default function UserPage() {
 
 type Props = {
   user: User;
+  initialGroups: Group[];
 };
 
-function UserOverview({ user }: Props) {
+function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
   const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
-  const initialGroups = user.auto_groups;
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: initialGroups,
@@ -180,6 +184,7 @@ function UserOverview({ user }: Props) {
                 className={"w-full"}
                 disabled={!hasChanges}
                 onClick={save}
+                data-cy={"save-changes"}
               >
                 Save Changes
               </Button>
@@ -201,6 +206,7 @@ function UserOverview({ user }: Props) {
                   onChange={setSelectedGroups}
                   values={selectedGroups}
                   hideAllGroup={true}
+                  dataCy={"user-group-selector"}
                 />
               </div>
             )}
@@ -244,7 +250,10 @@ function UserOverview({ user }: Props) {
                 <div className={"inline-flex gap-4 justify-end"}>
                   <div>
                     <CreateAccessTokenModal user={user}>
-                      <Button variant={"primary"}>
+                      <Button
+                        variant={"primary"}
+                        data-cy={"access-token-open-modal"}
+                      >
                         <IconCirclePlus size={16} />
                         Create Access Token
                       </Button>
@@ -293,6 +302,7 @@ function UserInformationCard({ user }: { user: User }) {
         )}
 
         <Card.ListItem
+          tooltip={false}
           label={
             <>
               <GalleryHorizontalEnd size={16} />

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/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/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/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/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,12 +1,15 @@
 import FullTooltip from "@components/FullTooltip";
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import { AlertCircle } from "lucide-react";
 import * as React from "react";
 
+type InputVariants = VariantProps<typeof inputVariants>;
+
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    InputVariants {
   customPrefix?: React.ReactNode;
   customSuffix?: React.ReactNode;
   maxWidthClass?: string;
@@ -14,6 +17,7 @@ export interface InputProps
   error?: string;
   errorTooltip?: boolean;
   errorTooltipPosition?: "top" | "top-right";
+  prefixClassName?: string;
 }
 
 const inputVariants = cva("", {
@@ -23,6 +27,10 @@ const inputVariants = cva("", {
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
         "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
       ],
+      darker: [
+        "dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-800",
+        "ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
+      ],
       error: [
         "dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
         "ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
@@ -51,6 +59,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       error,
       errorTooltip = false,
       errorTooltipPosition = "top",
+      variant = "default",
+      prefixClassName,
       ...props
     },
     ref,
@@ -67,6 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 "flex h-[42px] w-auto rounded-l-md bg-white px-3 py-2 text-sm ",
                 "border  items-center whitespace-nowrap",
                 props.disabled && "opacity-20",
+                prefixClassName,
               )}
             >
               {customPrefix}
@@ -74,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>
@@ -86,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",
@@ -99,9 +111,10 @@ 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>

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 type {Group, GroupPeer, GroupResource} from "@/interfaces/Group";
+import { NetworkResource } from "@/interfaces/Network";
 import type { Peer } from "@/interfaces/Peer";
 
 interface MultiSelectProps {
@@ -30,6 +42,12 @@ interface MultiSelectProps {
   disabled?: boolean;
   popoverWidth?: "auto" | number;
   hideAllGroup?: boolean;
+  showPeerCount?: boolean;
+  disableInlineRemoveGroup?: boolean;
+  saveGroupAssignments?: boolean;
+  showRoutes?: boolean;
+  disabledGroups?: Group[];
+  dataCy?: string;
 }
 export function PeerGroupSelector({
   onChange,
@@ -39,8 +57,15 @@ export function PeerGroupSelector({
   disabled = false,
   popoverWidth = "auto",
   hideAllGroup = false,
-}: MultiSelectProps) {
-  const { groups, dropdownOptions, setDropdownOptions } = useGroups();
+  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("");
@@ -48,9 +73,14 @@ export function PeerGroupSelector({
   // Update dropdown options when groups change
   useEffect(() => {
     if (!groups) return;
-    const sortedGroups = sortBy([...groups], "name") as Group[];
+    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;
@@ -74,25 +104,21 @@ export function PeerGroupSelector({
     const option = dropdownOptions.find((option) => option.name == name);
     const groupPeers: GroupPeer[] | undefined =
       (group?.peers as GroupPeer[]) || [];
+    const groupResources: GroupResource[] | undefined =
+        (group?.resources as GroupResource[]) || [];
 
-    if (peer) {
-      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, resources: groupResources }]);
     }
 
     if (max == 1 && values.length == 1) {
-      onChange([{ name: name, id: group?.id, peers: groupPeers }]);
+      onChange([{ name: name, id: group?.id, peers: groupPeers, resources: groupResources }]);
     } else {
       onChange((previous) => [
         ...previous,
-        { name: name, id: group?.id, peers: groupPeers },
+        { name: name, id: group?.id, peers: groupPeers, resources: groupResources },
       ]);
     }
 
@@ -137,6 +163,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}
@@ -152,12 +190,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
@@ -165,26 +204,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>
@@ -250,7 +322,10 @@ export function PeerGroupSelector({
 
             <CommandGroup>
               <ScrollArea
-                className={"max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3"}
+                className={cn(
+                  "max-h-[195px] flex flex-col gap-1 pl-2 py-2 pr-3",
+                  sortedDropdownOptions.length == 0 && !search && "py-0",
+                )}
               >
                 {searchedGroupNotFound && (
                   <CommandItem
@@ -275,38 +350,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>
@@ -317,3 +420,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/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

@@ -16,8 +16,9 @@ const ScrollArea = React.forwardRef<
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn(
-      "relative overflow-hidden will-change-scroll webkit-scroll",
+      "relative will-change-scroll webkit-scroll",
       className,
+      "overflow-hidden",
     )}
     {...props}
   >

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/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,
           )}
@@ -77,7 +78,7 @@ const ModalContent = React.forwardRef<
             {showClose && (
               <DialogPrimitive.Close
                 data-cy={"modal-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"
+                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>

src/components/modal/ModalHeader.tsx

@@ -11,6 +11,7 @@ interface Props extends IconVariant {
   margin?: string;
   truncate?: boolean;
   children?: React.ReactNode;
+  center?: boolean;
 }
 export default function ModalHeader({
   icon,
@@ -21,13 +22,21 @@ export default function ModalHeader({
   margin = "mt-0",
   truncate = false,
   children,
+  center,
 }: Props) {
   return (
     <div className={cn(className, "min-w-0")}>
-      <div className={"flex items-start gap-5 pr-10 min-w-0"}>
+      <div className={"flex items-start gap-5 min-w-0"}>
         {icon && <SquareIcon color={color} icon={icon} />}
-        <div className={"min-w-0"}>
-          <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
+        <div className={cn("min-w-0", center && "text-center")}>
+          <h2
+            className={cn(
+              "text-lg my-0 leading-[1.5]",
+              center && "text-center",
+            )}
+          >
+            {title}
+          </h2>
           {children ? (
             <>{children}</>
           ) : (

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

@@ -11,6 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  TableWrapper,
 } from "@components/table/Table";
 import NoResults from "@components/ui/NoResults";
 import {
@@ -30,6 +31,7 @@ import {
   PaginationState,
   Row,
   RowSelectionState,
+  SortingFn,
   SortingState,
   Table as TanStackTable,
   useReactTable,
@@ -54,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) => {
@@ -100,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;
@@ -125,7 +144,7 @@ interface DataTableProps<TData, TValue> {
   wrapperClassName?: string;
   tableClassName?: string;
   searchClassName?: string;
-  showSearch?: boolean;
+  showSearchAndFilters?: boolean;
   rightSide?: (table: TanStackTable<TData>) => React.ReactNode;
   manualPagination?: boolean;
   showHeader?: boolean;
@@ -134,6 +153,16 @@ interface DataTableProps<TData, TValue> {
   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>) {
@@ -173,22 +202,41 @@ export function DataTableContent<TData, TValue>({
   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,
-    });
+    useLocalStorage<PaginationState>(
+      `netbird-table-pagination${
+        uniqueKey ? "/" + (uniqueKey as string) : path
+      }`,
+      {
+        pageIndex: 0,
+        pageSize: 10,
+      },
+      keepStateInLocalStorage,
+    );
 
   const hasInitialData = !!(data && data.length > 0);
 
@@ -216,9 +264,12 @@ export function DataTableContent<TData, TValue>({
     initialState: {
       pagination: {
         pageIndex: 0,
-        pageSize: 10,
+        pageSize: initialPageSize || 10,
       },
     },
+    sortingFns: {
+      checkbox: checkboxSort,
+    },
     getRowId: useRowId ? (row) => row.id : undefined,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
@@ -250,12 +301,18 @@ export function DataTableContent<TData, TValue>({
     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}
@@ -263,7 +320,7 @@ export function DataTableContent<TData, TValue>({
             setGlobalSearch={(val) => {
               table.setPageIndex(0);
               setGlobalSearch(val);
-              setRowSelection?.({});
+              resetRowSelectionOnSearch && setRowSelection?.({});
             }}
             placeholder={searchPlaceholder}
           />
@@ -277,164 +334,179 @@ export function DataTableContent<TData, TValue>({
           </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}
-        text={text}
-      />
+
+      <DataTableHeadingPortal table={table} headingTarget={headingTarget} />
     </div>
   );
 }

src/components/table/DataTableHeadingPortal.tsx

@@ -6,24 +6,20 @@ import { createPortal } from "react-dom";
 type Props<TData> = {
   table: Table<TData> | null;
   headingTarget?: HTMLHeadingElement | null;
-  text: string;
 };
+
 export const DataTableHeadingPortal = function <TData>({
   table,
   headingTarget,
-  text = "Items",
 }: Props<TData>) {
   const hasMounted = useRef(false);
 
   if (!headingTarget) return;
-
-  if (!hasMounted.current) {
-    headingTarget.innerHTML = "";
-    hasMounted.current = true;
-  }
+  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 &&
@@ -32,14 +28,16 @@ export const DataTableHeadingPortal = function <TData>({
       table?.getState().globalFilter === ""
     );
 
+  const portalContainer = document.createElement("span");
+  headingTarget.prepend(portalContainer);
+
   return createPortal(
     <Heading
-      text={text}
       hasAnyFilterActive={hasAnyFiltersActive}
       totalItems={totalItems}
       filteredItems={filteredItems}
     />,
-    headingTarget,
+    portalContainer,
   );
 };
 
@@ -47,27 +45,20 @@ type HeadingProps = {
   hasAnyFilterActive: boolean | null;
   filteredItems?: number;
   totalItems?: number;
-  text: string;
 };
 
 const Heading = ({
   hasAnyFilterActive,
   filteredItems,
   totalItems,
-  text,
 }: HeadingProps) => {
-  if (!totalItems || totalItems == 1) {
-    return text;
-  }
-
   if (hasAnyFilterActive) {
     return (
       <>
         <span className={"text-netbird"}>{filteredItems}</span> of {totalItems}{" "}
-        {text}
       </>
     );
   }
 
-  return `${totalItems} ${text}`;
+  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/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/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,25 +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={(e) => {
         e.preventDefault();
-        onClick?.();
+        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

@@ -70,6 +70,7 @@ export default function InputDomain({
           customPrefix={<GlobeIcon size={15} />}
           placeholder={"e.g., example.com"}
           maxWidthClass={"w-full"}
+          data-cy={"domain-input"}
           value={name}
           error={domainError}
           onChange={handleNameChange}

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={

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 {Group, GroupResource} from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
 
 type Props = {
   children: React.ReactNode;
@@ -14,29 +15,123 @@ 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[];
+
+    let resources = group?.resources?.map((r) => {
+        let isString = typeof r === "string";
+        if (isString) return r;
+        let resource = r as GroupResource;
+        return resource.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,
+          resources: resources,
+        },
+        `/${group.id}`,
+      );
+    } else {
+      return groupRequest.post({
+        name: group.name,
+        peers: peers,
+        resources: resources,
+      });
+    }
+  };
+
   return (
     <GroupContext.Provider
       value={{
@@ -44,7 +139,11 @@ export function GroupsProviderContent({ children }: Props) {
         refresh,
         dropdownOptions,
         setDropdownOptions,
+        addDropdownOptions,
         isLoading,
+        createOrUpdate,
+        reset,
+        updateGroupDropdown,
       }}
     >
       {children}

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,14 +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(
           {
@@ -56,6 +56,11 @@ export default function RoutesProvider({ children }: Props) {
             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}`,
         )
@@ -74,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,
@@ -90,6 +93,7 @@ export default function RoutesProvider({ children }: Props) {
           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/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/Group.ts

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

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/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/Route.ts

@@ -11,6 +11,7 @@ export interface Route {
   masquerade: boolean;
   groups: string[];
   keep_route?: boolean;
+  access_control_groups?: string[];
   // Frontend only
   peer_groups?: string[];
   routesGroups?: string[];
@@ -25,6 +26,7 @@ export interface GroupedRoute {
   network?: string;
   domains?: string[];
   keep_route?: boolean;
+  access_control_groups?: string[];
   network_id: string;
   high_availability_count: number;
   is_using_route_groups: boolean;
@@ -33,4 +35,5 @@ export interface GroupedRoute {
   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,144 +165,6 @@ 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));
-    }
-    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;
-    }
-
-    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);
-        }),
-      });
-    }
-  };
-
-  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
-
-  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 continuePostureChecksDisabled = useMemo(() => {
     if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
     if (direction != "bi" && ports.length == 0) return true;
@@ -280,10 +183,18 @@ export function AccessControlModalContent({
     if (p == "all") {
       setPorts([]);
     }
+    if (p == "tcp" || p == "udp") {
+      setDirection("in");
+    }
+  };
+
+  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={
@@ -320,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"}>
@@ -335,12 +249,15 @@ export function AccessControlModalContent({
                 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>
@@ -356,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
@@ -373,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>
@@ -435,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"}
               />
@@ -446,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."
@@ -463,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"}
             >
@@ -520,6 +449,7 @@ export function AccessControlModalContent({
                     variant={"primary"}
                     disabled={submitDisabled}
                     onClick={submit}
+                    data-cy={"submit-policy"}
                   >
                     <PlusCircle size={16} />
                     Add Policy
@@ -535,7 +465,13 @@ export function AccessControlModalContent({
               <Button
                 variant={"primary"}
                 disabled={submitDisabled}
-                onClick={submit}
+                onClick={() => {
+                  if (useSave) {
+                    submit();
+                  } else {
+                    close();
+                  }
+                }}
               >
                 Save Changes
               </Button>

src/modules/access-control/table/AccessControlActiveCell.tsx

@@ -1,4 +1,5 @@
 import { ToggleSwitch } from "@components/ToggleSwitch";
+import { cloneDeep } from "@utils/helpers";
 import React, { useMemo } from "react";
 import { mutate } from "swr";
 import { usePolicies } from "@/contexts/PoliciesProvider";
@@ -8,7 +9,7 @@ import { Policy } from "@/interfaces/Policy";
 type Props = {
   policy: Policy;
 };
-export default function AccessControlActiveCell({ policy }: Props) {
+export default function AccessControlActiveCell({ policy }: Readonly<Props>) {
   const { updatePolicy } = usePolicies();
 
   const isChecked = useMemo(() => {
@@ -16,7 +17,7 @@ export default function AccessControlActiveCell({ policy }: Props) {
   }, [policy]);
 
   const update = async (enabled: boolean) => {
-    const rules = [...policy.rules];
+    const rules = cloneDeep(policy.rules);
     rules.forEach((rule) => {
       rule.enabled = enabled;
       rule.sources = rule.sources
@@ -26,8 +27,8 @@ export default function AccessControlActiveCell({ policy }: Props) {
           }) as string[])
         : [];
       rule.destinations = rule.destinations
-        ? (rule.destinations.map((source) => {
-            const group = source as Group;
+        ? (rule.destinations.map((destination) => {
+            const group = destination as Group;
             return group.id;
           }) as string[])
         : [];

src/modules/access-control/table/AccessControlNameCell.tsx

@@ -6,12 +6,14 @@ import ActiveInactiveRow from "@/modules/common-table-rows/ActiveInactiveRow";
 type Props = {
   policy: Policy;
 };
-export default function AccessControlNameCell({ policy }: Props) {
+
+export default function AccessControlNameCell({ policy }: Readonly<Props>) {
   return (
     <ActiveInactiveRow
       active={policy.enabled}
       inactiveDot={"gray"}
       text={policy.name}
+      dataCy={policy.name}
     >
       <DescriptionWithTooltip className={"mt-1"} text={policy.description} />
     </ActiveInactiveRow>

src/modules/access-control/table/AccessControlTable.tsx

@@ -31,6 +31,7 @@ import AccessControlSourcesCell from "@/modules/access-control/table/AccessContr
 type Props = {
   policies?: Policy[];
   isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 export const AccessControlTableColumns: ColumnDef<Policy>[] = [
@@ -161,7 +162,11 @@ export const AccessControlTableColumns: ColumnDef<Policy>[] = [
   },
 ];
 
-export default function AccessControlTable({ policies, isLoading }: Props) {
+export default function AccessControlTable({
+  policies,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
 
@@ -191,8 +196,9 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
         />
       )}
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
-        text={"Access Control"}
+        text={"Access Control Policies"}
         sorting={sorting}
         setSorting={setSorting}
         columns={AccessControlTableColumns}
@@ -222,12 +228,14 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
               "It looks like you don't have any policies yet. Policies can allow connections by specific protocol and ports."
             }
             button={
-              <AccessControlModal>
-                <Button variant={"primary"} className={""}>
-                  <PlusCircle size={16} />
-                  Add Policy
-                </Button>
-              </AccessControlModal>
+              <div className={"flex gap-4 items-center justify-center"}>
+                <AccessControlModal>
+                  <Button variant={"primary"} className={""}>
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </AccessControlModal>
+              </div>
             }
             learnMore={
               <>
@@ -246,12 +254,14 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
         rightSide={() => (
           <>
             {policies && policies?.length > 0 && (
-              <AccessControlModal>
-                <Button variant={"primary"} className={"ml-auto"}>
-                  <PlusCircle size={16} />
-                  Add Policy
-                </Button>
-              </AccessControlModal>
+              <div className={"flex ml-auto gap-4"}>
+                <AccessControlModal>
+                  <Button variant={"primary"} className={"ml-auto"}>
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </AccessControlModal>
+              </div>
             )}
           </>
         )}

src/modules/access-control/useAccessControl.ts

@@ -0,0 +1,272 @@
+import { notify } from "@components/Notification";
+import { Direction } from "@components/ui/PolicyDirection";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { merge, uniqBy } from "lodash";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSWRConfig } from "swr";
+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 { usePostureCheck } from "@/modules/posture-checks/usePostureCheck";
+
+type Props = {
+  policy?: Policy;
+  postureCheckTemplates?: PostureCheck[];
+  onSuccess?: (policy: Policy) => void;
+  initialDestinationGroups?: Group[] | string[];
+  initialName?: string;
+  initialDescription?: string;
+};
+
+// TODO add reducer
+
+export const useAccessControl = ({
+  policy,
+  postureCheckTemplates,
+  initialDestinationGroups,
+  initialName,
+  initialDescription,
+  onSuccess,
+}: Props = {}) => {
+  const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
+    useFetchApi<PostureCheck[]>("/posture-checks");
+
+  const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
+  const postureChecksLoaded = useRef(false);
+
+  const initialPostureChecks = useMemo(() => {
+    const foundChecks =
+      allPostureChecks?.filter((check) => {
+        if (policy?.source_posture_checks) {
+          if (
+            policy.source_posture_checks.every((id) => typeof id === "string")
+          ) {
+            let checks = policy.source_posture_checks as string[];
+            return checks.includes(check.id);
+          } else {
+            return policy.source_posture_checks.some((c) => {
+              let policyCheck = c as PostureCheck;
+              return policyCheck.id === check.id;
+            });
+          }
+        }
+        return false;
+      }) || [];
+
+    const templates = postureCheckTemplates || [];
+
+    return merge(foundChecks, templates);
+  }, [policy, allPostureChecks, postureCheckTemplates]);
+
+  useEffect(() => {
+    if (postureChecksLoaded.current) return;
+
+    if (initialPostureChecks.length > 0) {
+      postureChecksLoaded.current = true;
+      setPostureChecks(initialPostureChecks);
+    }
+  }, [initialPostureChecks]);
+
+  const { updatePolicy } = usePolicies();
+  const firstRule = policy?.rules ? policy.rules[0] : undefined;
+
+  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));
+    }
+    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 || initialName || "");
+  const [description, setDescription] = useState(
+    policy?.description || initialDescription || "",
+  );
+  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[])
+      : initialDestinationGroups ?? [],
+  });
+
+  const { updateOrCreateAndNotify: checkToCreate } = usePostureCheck({});
+  const createPostureChecksWithoutID = async () => {
+    const checks = postureChecks.filter(
+      (check) => check?.id === undefined || check?.id === "",
+    );
+    const createChecks = checks.map((check) => checkToCreate(check));
+    return Promise.all(createChecks);
+  };
+
+  const getPolicyData = () => {
+    let sources = sourceGroups;
+    let destinations = destinationGroups;
+    if (direction == "out") {
+      const tmp = sourceGroups;
+      sources = destinations;
+      destinations = tmp;
+    }
+
+    return {
+      name,
+      description,
+      enabled,
+      source_posture_checks: postureChecks,
+      rules: [
+        {
+          bidirectional: direction == "bi",
+          description,
+          name,
+          sources: sources,
+          destinations: destinations,
+          action: "accept",
+          protocol,
+          enabled,
+          ports: ports.length > 0 ? ports.map((p) => p.toString()) : undefined,
+        },
+      ],
+    } as Policy;
+  };
+
+  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()),
+    );
+
+    // Create posture checks if they don't have an ID
+    let hasError = false;
+    let allChecks = postureChecks;
+    await createPostureChecksWithoutID()
+      .then((checks) => {
+        allChecks = [...allChecks, ...(checks as PostureCheck[])];
+      })
+      .catch((e) => {
+        hasError = true;
+        console.error(e);
+      });
+    if (hasError) return;
+
+    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;
+    }
+
+    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 && policy?.id !== undefined) {
+      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);
+        }),
+      });
+    }
+  };
+
+  const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
+
+  return {
+    protocol,
+    setProtocol,
+    direction,
+    setDirection,
+    name,
+    setName,
+    description,
+    setDescription,
+    enabled,
+    setEnabled,
+    ports,
+    setPorts,
+    sourceGroups,
+    setSourceGroups,
+    destinationGroups,
+    setDestinationGroups,
+    postureChecks,
+    setPostureChecks,
+    submit,
+    getPolicyData,
+    portAndDirectionDisabled,
+    isPostureChecksLoading,
+  } as const;
+};

src/modules/access-tokens/AccessTokenActionCell.tsx

@@ -46,7 +46,12 @@ export default function AccessTokenActionCell({ access_token }: Props) {
 
   return (
     <div className={"flex justify-end pr-4"}>
-      <Button variant={"danger-outline"} size={"sm"} onClick={handleConfirm}>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={handleConfirm}
+        data-cy={"access-token-delete"}
+      >
         <Trash2 size={16} />
         Delete
       </Button>

src/modules/access-tokens/AccessTokensTable.tsx

@@ -91,6 +91,7 @@ export default function AccessTokensTable({ user }: Props) {
               text={"Access Tokens"}
               tableClassName={"mt-0"}
               minimal={true}
+              showSearchAndFilters={false}
               inset={false}
               sorting={sorting}
               setSorting={setSorting}
@@ -98,8 +99,9 @@ export default function AccessTokensTable({ user }: Props) {
               data={tokens}
             />
           ) : (
-            <div className={"py-3 bg-nb-gray-950 overflow-hidden"}>
+            <div className={"bg-nb-gray-950 overflow-hidden"}>
               <NoResults
+                className={"py-3"}
                 title={"No access tokens"}
                 description={
                   "You don't have any access tokens yet. You can add a token to access the NetBird API."

src/modules/access-tokens/CreateAccessTokenModal.tsx

@@ -98,6 +98,7 @@ export default function CreateAccessTokenModal({ children, user }: Props) {
                   variant={"secondary"}
                   className={"w-full"}
                   tabIndex={-1}
+                  data-cy={"access-token-copy-close"}
                 >
                   Close
                 </Button>
@@ -170,6 +171,7 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
           <Label>Name</Label>
           <HelpText>Set an easily identifiable name for your token</HelpText>
           <Input
+            data-cy={"access-token-name"}
             placeholder={"e.g., Infra token"}
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -184,6 +186,7 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
           <Input
             maxWidthClass={"max-w-[200px]"}
             placeholder={"30"}
+            data-cy={"access-token-expires-in"}
             min={1}
             max={365}
             value={expiresIn}
@@ -215,7 +218,12 @@ export function AccessTokenModalContent({ onSuccess, user }: ModalProps) {
             <Button variant={"secondary"}>Cancel</Button>
           </ModalClose>
 
-          <Button variant={"primary"} onClick={submit} disabled={isDisabled}>
+          <Button
+            variant={"primary"}
+            onClick={submit}
+            disabled={isDisabled}
+            data-cy={"create-access-token"}
+          >
             <PlusCircle size={16} />
             Create Token
           </Button>

src/modules/account/useAccount.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { Account } from "@/interfaces/Account";
 
 export const useAccount = () => {
-  const { data: accounts } = useFetchApi<Account[]>("/accounts");
+  const { data: accounts } = useFetchApi<Account[]>("/accounts", true, true);
 
   return useMemo(() => {
     if (!accounts) return;

src/modules/activity/ActivityDescription.tsx

@@ -47,6 +47,14 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "setupkey.delete")
+    return (
+      <div className={"inline"}>
+        Setup-Key <Value> {m.name}</Value> with key <Value>{m.key}</Value> was
+        deleted
+      </div>
+    );
+
   if (event.activity_code == "setupkey.add")
     return (
       <div className={"inline"}>
@@ -535,6 +543,98 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * Resource
+   */
+  if (event.activity_code == "resource.group.add")
+    return (
+      <div className={"inline"}>
+        Group <Value>{m.resource_name}</Value> added to resource{"  "}
+        <Value>{m.name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "resource.group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{m.resource_name}</Value> removed from resource{"  "}
+        <Value>{m.name}</Value>
+      </div>
+    );
+
+  /**
+   * Networks
+   */
+
+  if (event.activity_code == "network.resource.create")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> created for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.resource.update")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> updated for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.resource.delete")
+    return (
+      <div className={"inline"}>
+        Resource <Value>{m.name}</Value> deleted from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.create")
+    return (
+      <div className={"inline"}>
+        Routing peer created for network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.delete")
+    return (
+      <div className={"inline"}>
+        Routing peer deleted from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.router.update")
+    return (
+      <div className={"inline"}>
+        Routing peer updated from network{"  "}
+        <Value>{m.network_name}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "network.create")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> created
+      </div>
+    );
+
+  if (event.activity_code == "network.delete")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> deleted
+      </div>
+    );
+
+  if (event.activity_code == "network.update")
+    return (
+      <div className={"inline"}>
+        Network with name <Value>{m.name}</Value> updated
+      </div>
+    );
+
   return (
     <div className={"flex gap-2.5 items-center"}>
       <span className={"mb-[1px]"}>{event.activity}</span>

src/modules/activity/ActivityEventCodeSelector.tsx

@@ -149,7 +149,7 @@ export function ActivityEventCodeSelector({
 
             <ScrollArea
               className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
+                "max-h-[380px] overflow-y-hidden flex flex-col gap-1 pl-2 py-2 pr-3"
               }
             >
               {Object.keys(groupedEventNames).map((group) => {

src/modules/activity/ActivityTable.tsx

@@ -24,6 +24,7 @@ import { ActivityUserSelector } from "@/modules/activity/ActivityUserSelector";
 type Props = {
   events?: ActivityEvent[];
   isLoading: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 const ActivityFeedColumnsTable: ColumnDef<ActivityEvent>[] = [
@@ -52,7 +53,14 @@ const ActivityFeedColumnsTable: ColumnDef<ActivityEvent>[] = [
   },
 ];
 
-export default function ActivityTable({ events, isLoading }: Props) {
+const defaultFromDate = dayjs().subtract(14, "day").toDate();
+const defaultToDate = dayjs().toDate();
+
+export default function ActivityTable({
+  events,
+  isLoading,
+  headingTarget,
+}: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
 
@@ -68,8 +76,8 @@ export default function ActivityTable({ events, isLoading }: Props) {
   const [initialDateRange, setInitialDateRange] = useLocalStorage<
     DateRange | undefined
   >("netbird-table-range" + path, {
-    from: dayjs().subtract(14, "day").toDate(),
-    to: dayjs().toDate(),
+    from: defaultFromDate,
+    to: defaultToDate,
   });
 
   // Range for DatePicker
@@ -80,6 +88,7 @@ export default function ActivityTable({ events, isLoading }: Props) {
 
   return (
     <DataTable
+      headingTarget={headingTarget}
       wrapperClassName={"gap-0 flex flex-col"}
       tableClassName={"px-8 mt-10"}
       paginationClassName={"max-w-[800px]"}
@@ -125,6 +134,11 @@ export default function ActivityTable({ events, isLoading }: Props) {
           }
         />
       }
+      onFilterReset={() => {
+        const date = { from: defaultFromDate, to: defaultToDate };
+        setInitialDateRange(date);
+        setDateRange(date);
+      }}
     >
       {(table) => {
         return (

src/modules/activity/ActivityTypeIcon.tsx

@@ -8,6 +8,7 @@ import {
   Globe,
   HelpCircleIcon,
   KeyRound,
+  Layers3Icon,
   LogIn,
   MonitorSmartphoneIcon,
   NetworkIcon,
@@ -89,6 +90,14 @@ export default function ActivityTypeIcon({
     return (
       <RefreshCcw size={size} className={cn(DEFAULT_CLASSES, className)} />
     );
+  } else if (code.startsWith("resource")) {
+    return (
+      <Layers3Icon size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
+  } else if (code.startsWith("network")) {
+    return (
+      <NetworkIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
   } else {
     return (
       <HelpCircleIcon size={size} className={cn(DEFAULT_CLASSES, className)} />

src/modules/activity/ActivityUserSelector.tsx

@@ -175,7 +175,7 @@ export function ActivityUserSelector({
 
             <ScrollArea
               className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
+                "max-h-[380px] overflow-y-hidden flex flex-col gap-1 pl-2 py-2 pr-3"
               }
             >
               <CommandGroup>

src/modules/common-table-rows/ActiveInactiveRow.tsx

@@ -11,7 +11,9 @@ type Props = {
   text?: string | React.ReactNode;
   className?: string;
   additionalInfo?: React.ReactNode;
+  dataCy?: string;
 };
+
 export default function ActiveInactiveRow({
   active,
   children,
@@ -20,13 +22,15 @@ export default function ActiveInactiveRow({
   inactiveDot = "gray",
   className,
   additionalInfo,
-}: Props) {
+  dataCy,
+}: Readonly<Props>) {
   return (
     <div
       className={cn(
         "gap-3 dark:text-neutral-300 text-neutral-500 min-w-0",
         className,
       )}
+      data-cy={dataCy}
     >
       {leftSection}
       <div className={"flex flex-col gap-1"}>

src/modules/common-table-rows/EmptyRow.tsx

@@ -1,3 +1,9 @@
-export default function EmptyRow() {
-  return <div className={"text-nb-gray-600"}>-</div>;
+import { cn } from "@utils/helpers";
+
+type Props = {
+  className?: string;
+};
+
+export default function EmptyRow({ className }: Readonly<Props>) {
+  return <div className={cn("text-nb-gray-600", className)}>-</div>;
 }

src/modules/dns-nameservers/table/NameserverGroupTable.tsx

@@ -85,14 +85,17 @@ export const NameserverGroupTableColumns: ColumnDef<NameserverGroup>[] = [
     cell: ({ cell }) => <NameserverActionCell ns={cell.row.original} />,
   },
 ];
+
 type Props = {
   nameserverGroups?: NameserverGroup[];
   isLoading?: boolean;
+  headingTarget?: HTMLHeadingElement | null;
 };
 
 export default function NameserverGroupTable({
   nameserverGroups,
   isLoading,
+  headingTarget,
 }: Props) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -123,6 +126,7 @@ export default function NameserverGroupTable({
         />
       )}
       <DataTable
+        headingTarget={headingTarget}
         isLoading={isLoading}
         text={"Network Routes"}
         sorting={sorting}

src/modules/groups/AssignPeerToGroupModal.tsx

@@ -0,0 +1,375 @@
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import { Modal, ModalContent } from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResultsCard from "@components/ui/NoResultsCard";
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { cn } from "@utils/helpers";
+import { FolderGit2, PencilLineIcon } from "lucide-react";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import { DataTable } from "@/components/table/DataTable";
+import { Group, GroupPeer } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import { EditGroupNameModal } from "@/modules/groups/EditGroupNameModal";
+import PeerAddressCell from "@/modules/peers/PeerAddressCell";
+import PeerNameCell from "@/modules/peers/PeerNameCell";
+import { PeerOSCell } from "@/modules/peers/PeerOSCell";
+
+type Props = {
+  group: Group;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onUpdate?: (g: Group) => void;
+  useSave?: boolean;
+};
+
+export const AssignPeerToGroupModal = ({
+  group,
+  open = false,
+  setOpen,
+  onUpdate,
+  useSave = true,
+}: Props) => {
+  return (
+    <Modal open={open} onOpenChange={setOpen} key={open ? "1" : "0"}>
+      {open && (
+        <AssignGroupToPeerModalContent
+          group={group}
+          onSuccess={(g) => {
+            setOpen(false);
+            onUpdate && onUpdate(g);
+          }}
+          useSave={useSave}
+        />
+      )}
+    </Modal>
+  );
+};
+
+type ContentProps = {
+  group: Group;
+  onSuccess?: (g: Group) => void;
+  useSave?: boolean;
+};
+
+export const AssignGroupToPeerModalContent = ({
+  group,
+  onSuccess,
+  useSave,
+}: ContentProps) => {
+  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
+  const { mutate } = useSWRConfig();
+  const groupRequest = useApiCall<Group>("/groups");
+  const [initialPeersSet, setInitialPeersSet] = useState(false);
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+  const isAllGroup = group.name === "All";
+  const [sorting, setSorting] = useState([
+    {
+      id: "select",
+      desc: false,
+    },
+    {
+      id: "name",
+      desc: false,
+    },
+  ]);
+
+  const [groupNameModal, setGroupNameModal] = useState(false);
+  const [groupName, setGroupName] = useState(group.name);
+
+  const onGroupNameUpdate = (name: string) => {
+    setGroupNameModal(false);
+    setGroupName(name);
+  };
+
+  // Get initial selected peers
+  const getInitialSelectedPeers = useCallback(() => {
+    if (!group) return undefined;
+    if (!peers) return undefined;
+    let initialSelectedPeers = group?.peers
+      ?.map((p) => {
+        if (typeof p === "string") return p;
+        return p.id;
+      })
+      .filter((p) => p !== undefined) as string[];
+    if (!initialSelectedPeers) return {};
+
+    // Return Record<string, boolean> for initialSelectedPeers
+    return initialSelectedPeers.reduce(
+      (acc, peerId) => {
+        acc[peerId] = true;
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+  }, [group, peers]);
+
+  const handleOnSave = async (selectedPeers: Peer[]) => {
+    if (!useSave) {
+      onSuccess &&
+        onSuccess({
+          ...group,
+          name: groupName,
+          peers: selectedPeers.map((peer) => {
+            return {
+              id: peer.id,
+              name: peer.name,
+            } as GroupPeer;
+          }),
+          peers_count: selectedPeers.length,
+          resources: group.resources,
+          keepClientState: true,
+        });
+      return;
+    }
+
+    const hasGroupID = !!group?.id;
+    let request;
+
+    if (hasGroupID) {
+      request = () =>
+        groupRequest.put(
+          {
+            name: group.name,
+            peers: selectedPeers.map((peer) => peer.id),
+            resources: group.resources,
+          },
+          "/" + group?.id,
+        );
+    } else {
+      request = () =>
+        groupRequest.post({
+          name: group.name,
+          peers: selectedPeers.map((peer) => peer.id),
+          resources: group.resources,
+        });
+    }
+    notify({
+      title: "Saving changes",
+      description: `${group?.name || "Group"} was successfully saved.`,
+      promise: request()
+        .then((g: Group) => {
+          mutate("/groups");
+          onSuccess && onSuccess(g);
+        })
+        .catch(() => {}),
+      loadingMessage: "Updating group...",
+    });
+  };
+
+  useEffect(() => {
+    if (initialPeersSet) return;
+    const initialSelectedPeers = getInitialSelectedPeers();
+    if (initialSelectedPeers === undefined) return;
+    setSelectedRows(initialSelectedPeers);
+    setInitialPeersSet(true);
+  }, [getInitialSelectedPeers, initialPeersSet]);
+
+  return (
+    <ModalContent
+      maxWidthClass={"max-w-4xl"}
+      className={cn(peers && peers.length > 0 ? "pb-0" : "pb-8")}
+      showClose={true}
+    >
+      {groupNameModal && (
+        <EditGroupNameModal
+          initialName={groupName}
+          open={groupNameModal}
+          onOpenChange={setGroupNameModal}
+          onSuccess={onGroupNameUpdate}
+        />
+      )}
+      <div className={"flex items-start justify-between pr-8"}>
+        <ModalHeader
+          title={
+            <div className={"flex items-center gap-2 mb-1 text-nb-gray-100"}>
+              <FolderGit2 size={16} className={"shrink-0"} />
+              <div className={"flex gap-2 items-center"}>
+                {groupName}
+                {groupName !== "All" && (
+                  <button
+                    className={
+                      "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                    }
+                    onClick={() => setGroupNameModal(true)}
+                  >
+                    <PencilLineIcon size={16} />
+                  </button>
+                )}
+              </div>
+            </div>
+          }
+          description={
+            isAllGroup
+              ? "View assigned peers for this group"
+              : "Manage assigned peers for this group"
+          }
+          color={"blue"}
+        />
+      </div>
+
+      {initialPeersSet ? (
+        <DataTable
+          useRowId={true}
+          rowSelection={selectedRows}
+          setRowSelection={setSelectedRows}
+          onRowClick={(row) => row.toggleSelected()}
+          text={"Peers"}
+          resetRowSelectionOnSearch={false}
+          uniqueKey={group?.id ?? group?.name}
+          sorting={sorting}
+          keepStateInLocalStorage={false}
+          setSorting={setSorting}
+          columns={PeersTableColumns}
+          data={initialPeersSet ? peers : undefined}
+          isLoading={isLoading && !initialPeersSet}
+          tableCellClassName={"!py-1 scale-[95%]"}
+          searchPlaceholder={"Search by name, IP or owner..."}
+          minimal={false}
+          columnVisibility={{
+            connected: false,
+            select: !isAllGroup,
+            approval_required: false,
+            group_name_strings: false,
+            group_names: false,
+            ip: false,
+            user_name: false,
+            user_email: false,
+          }}
+          getStartedCard={
+            <NoResultsCard
+              title={"Seems like you don't have any peers"}
+              description={
+                "In order to view or assign peers to a group, you need to have at least one peer."
+              }
+              icon={<PeerIcon className={"fill-nb-gray-200"} size={14} />}
+            />
+          }
+          rightSide={(table) => (
+            <div className={"ml-auto flex items-center gap-5"}>
+              <div className={"text-sm"}>
+                {Object.keys(selectedRows).length > 0 && (
+                  <div className={"text-nb-gray-200"}>
+                    <span className={"text-netbird font-medium"}>
+                      {Object.keys(selectedRows).length}
+                    </span>{" "}
+                    Peer(s) selected
+                  </div>
+                )}
+              </div>
+              {!isAllGroup && (
+                <Button
+                  variant={"primary"}
+                  className={"ml-auto"}
+                  disabled={peers?.length === 0}
+                  onClick={() => {
+                    const selectedPeers = table
+                      .getSelectedRowModel()
+                      .rows.map((row) => row.original);
+                    handleOnSave(selectedPeers).then();
+                  }}
+                >
+                  Confirm Changes
+                </Button>
+              )}
+            </div>
+          )}
+        />
+      ) : (
+        <SkeletonTable withHeader={false} />
+      )}
+    </ModalContent>
+  );
+};
+
+const PeersTableColumns: ColumnDef<Peer>[] = [
+  {
+    id: "select",
+    header: ({ table, column }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    accessorFn: (peer) => peer.id,
+    sortingFn: "checkbox",
+    cell: ({ row }) => {
+      return (
+        <div className={"min-w-[20px] max-w-[20px]"}>
+          <Checkbox
+            variant={"tableCell"}
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <PeerNameCell peer={row.original} linkToPeer={false} />,
+  },
+  {
+    id: "approval_required",
+    accessorKey: "approval_required",
+    sortingFn: "basic",
+    accessorFn: (peer) => peer.approval_required,
+  },
+  {
+    id: "connected",
+    accessorKey: "connected",
+    accessorFn: (peer) => peer.connected,
+  },
+  {
+    accessorKey: "ip",
+    sortingFn: "text",
+  },
+  {
+    id: "user_name",
+    accessorFn: (peer) => (peer.user ? peer.user?.name : "Unknown"),
+  },
+  {
+    id: "user_email",
+    accessorFn: (peer) => (peer.user ? peer.user?.email : "Unknown"),
+  },
+  {
+    accessorKey: "dns_label",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Address</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerAddressCell peer={row.original} />,
+  },
+  {
+    accessorKey: "group_name_strings",
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
+    sortingFn: "text",
+  },
+  {
+    accessorKey: "group_names",
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
+    sortingFn: "text",
+    filterFn: "arrIncludesSome",
+  },
+  {
+    accessorKey: "os",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>OS</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+  },
+];

src/modules/groups/EditGroupNameModal.tsx

@@ -0,0 +1,78 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { IconCornerDownLeft } from "@tabler/icons-react";
+import { trim } from "lodash";
+import * as React from "react";
+import { useMemo, useState } from "react";
+
+type Props = {
+  initialName: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (name: string) => void;
+};
+export const EditGroupNameModal = ({
+  initialName,
+  onOpenChange,
+  open,
+  onSuccess,
+}: Props) => {
+  const [name, setName] = useState(initialName);
+  const isDisabled = useMemo(() => {
+    if (name === initialName) return true;
+    const trimmedName = trim(name);
+    return trimmedName.length === 0;
+  }, [name, initialName]);
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent maxWidthClass={"max-w-md"}>
+        <form>
+          <ModalHeader
+            title={"Edit Group Name"}
+            description={"Set an easily identifiable name for your group."}
+            color={"blue"}
+          />
+
+          <div className={"p-default flex flex-col gap-4"}>
+            <div>
+              <Input
+                placeholder={"e.g., AWS Servers"}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <ModalFooter className={"items-center"} separator={false}>
+            <div className={"flex gap-3 w-full justify-end"}>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"} className={"w-full"}>
+                  Cancel
+                </Button>
+              </ModalClose>
+
+              <Button
+                variant={"primary"}
+                className={"w-full"}
+                onClick={() => onSuccess(name)}
+                disabled={isDisabled}
+                type={"submit"}
+              >
+                Confirm
+                <IconCornerDownLeft size={16} />
+              </Button>
+            </div>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

src/modules/groups/useGroupHelper.tsx

@@ -80,6 +80,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
     return groupRequest.put(
       {
         name: g.name,
+        resources: g.resources,
         peers: newPeerGroups
           ? newPeerGroups.map((p) => {
               const groupPeer = p as GroupPeer;
@@ -112,6 +113,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
         {
           name: selectedGroup.name,
           peers: peers,
+          resources: selectedGroup.resources,
         },
         `/${selectedGroup.id}`,
       );
@@ -122,6 +124,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
       .post({
         name: selectedGroup.name,
         peers: groupPeers || [],
+        resources: selectedGroup.resources,
       })
       .then((group) => {
         setSelectedGroups((prev) => {

src/modules/groups/useGroupIdsToGroups.tsx

@@ -0,0 +1,25 @@
+import { uniq } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import type { Group } from "@/interfaces/Group";
+
+export const useGroupIdsToGroups = (initial?: string[]) => {
+  const { groups, isLoading } = useGroups();
+  const [initialSet, setInitialSet] = useState(false);
+  const [mappedGroups, setMappedGroups] = useState<Group[] | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    // Only run the mapping once when groups are loaded and initial IDs are available
+    if (!initialSet && !isLoading && groups && initial) {
+      const mapped = uniq(initial)
+        .map((group) => groups.find((g) => g?.id === group))
+        .filter((g): g is Group => g !== undefined);
+      setMappedGroups(mapped);
+      setInitialSet(true); // Mark that we've done the initial mapping to prevent subsequent runs
+    }
+  }, [groups, initial, isLoading, initialSet]);
+
+  return useMemo(() => mappedGroups, [mappedGroups]);
+};

src/modules/networks/NetworkModal.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import Separator from "@components/Separator";
+import { Textarea } from "@components/Textarea";
+import { useApiCall } from "@utils/api";
+import { ExternalLinkIcon, PlusCircle } from "lucide-react";
+import React, { useState } from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { Network } from "@/interfaces/Network";
+
+type Props = {
+  open: boolean;
+  setOpen?: (open: boolean) => void;
+  network?: Network;
+  onCreated?: (network: Network) => void;
+  onUpdated?: (network: Network) => void;
+};
+
+export default function NetworkModal({
+  open,
+  setOpen,
+  network,
+  onCreated,
+  onUpdated,
+}: Readonly<Props>) {
+  return (
+    <Modal open={open} onOpenChange={setOpen}>
+      <Content
+        network={network}
+        onCreated={(network) => {
+          setOpen?.(false);
+          onCreated?.(network);
+        }}
+        onUpdated={(network) => {
+          setOpen?.(false);
+          onUpdated?.(network);
+        }}
+        key={open ? "1" : "0"}
+      />
+    </Modal>
+  );
+}
+
+type ContentProps = {
+  onCreated?: (network: Network) => void;
+  onUpdated?: (network: Network) => void;
+  network?: Network;
+};
+
+const Content = ({ network, onCreated, onUpdated }: ContentProps) => {
+  const [name, setName] = useState(network?.name || "");
+  const [description, setDescription] = useState(network?.description || "");
+  const create = useApiCall<Network>("/networks").post;
+  const update = useApiCall<Network>("/networks").put;
+
+  const updateNetwork = async () => {
+    notify({
+      title: name,
+      description: "Network updated successfully.",
+      loadingMessage: "Updating network...",
+      promise: update({ name, description }, `/${network?.id}`).then((n) => {
+        onUpdated?.(n);
+      }),
+    });
+  };
+
+  const createNetwork = async () => {
+    notify({
+      title: name,
+      description: "Network created successfully.",
+      loadingMessage: "Creating network...",
+      promise: create({ name, description }).then((n) => {
+        onCreated?.(n);
+      }),
+    });
+  };
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<NetworkRoutesIcon className={"fill-netbird"} />}
+        title={network ? "Update Network" : "Add Network"}
+        description={
+          network
+            ? network.name
+            : "Access resources like LANs and VPC by adding a network."
+        }
+        color={"netbird"}
+      />
+      <Separator />
+      <div className={"px-8 flex-col flex gap-6 py-6"}>
+        <div>
+          <Label>Network Name</Label>
+          <HelpText>Provide a unique name for the network.</HelpText>
+          <Input
+            tabIndex={0}
+            placeholder={"e.g., Office Network"}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+        <div>
+          <Label>Description (optional)</Label>
+          <HelpText>
+            Write a short description to add more context to this network.
+          </HelpText>
+          <Textarea
+            placeholder={"e.g., Berlin, Münzstraße 12 "}
+            value={description}
+            rows={3}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <ModalFooter className={"items-center"}>
+        <div className={"w-full"}>
+          <Paragraph className={"text-sm mt-auto"}>
+            Learn more about
+            <InlineLink href={"https://docs.netbird.io/how-to/networks-concept"} target={"_blank"}>
+              Networks
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </Paragraph>
+        </div>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+
+          <Button
+            variant={"primary"}
+            data-cy={"submit-route"}
+            disabled={!name}
+            onClick={network ? updateNetwork : createNetwork}
+          >
+            {network ? (
+              "Save Changes"
+            ) : (
+              <>
+                <PlusCircle size={16} />
+                Add Network
+              </>
+            )}
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+};

src/modules/networks/NetworkProvider.tsx

@@ -0,0 +1,340 @@
+import { Modal } from "@components/modal/Modal";
+import { notify } from "@components/Notification";
+import { useApiCall } from "@utils/api";
+import * as React from "react";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { Group } from "@/interfaces/Group";
+import { Network, NetworkResource, NetworkRouter } from "@/interfaces/Network";
+import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
+import NetworkModal from "@/modules/networks/NetworkModal";
+import NetworkResourceModal from "@/modules/networks/resources/NetworkResourceModal";
+import NetworkRoutingPeerModal from "@/modules/networks/routing-peers/NetworkRoutingPeerModal";
+
+type Props = {
+  children: React.ReactNode;
+  network?: Network;
+};
+
+const NetworksContext = React.createContext(
+  {} as {
+    openAddRoutingPeerModal: (network: Network, router?: NetworkRouter) => void;
+    openEditNetworkModal: (network: Network) => void;
+    openCreateNetworkModal: () => void;
+    openResourceModal: (network: Network, resource?: NetworkResource) => void;
+    openPolicyModal: (network?: Network, resource?: NetworkResource) => void;
+    deleteNetwork: (network: Network) => void;
+    deleteResource: (network: Network, resource: NetworkResource) => void;
+    deleteRouter: (network: Network, router: NetworkRouter) => void;
+    network?: Network;
+  },
+);
+
+export const NetworkProvider = ({ children, network }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { confirm } = useDialog();
+  const deleteCall = useApiCall("/networks").del;
+
+  const [currentNetwork, setCurrentNetwork] = useState<Network>();
+  const [currentResource, setCurrentResource] = useState<NetworkResource>();
+  const [currentRouter, setCurrentRouter] = useState<NetworkRouter>();
+
+  const [policyDefaultSettings, setPolicyDefaultSettings] = useState<{
+    name?: string;
+    description?: string;
+    destinationGroups?: Group[] | string[];
+  }>();
+
+  const [routingPeerModal, setRoutingPeerModal] = useState(false);
+  const [networkModal, setNetworkModal] = useState(false);
+  const [resourceModal, setResourceModal] = useState(false);
+  const [policyModal, setPolicyModal] = useState(false);
+
+  const openAddRoutingPeerModal = (
+    network: Network,
+    router?: NetworkRouter,
+  ) => {
+    setCurrentNetwork(network);
+    router && setCurrentRouter(router);
+    setRoutingPeerModal(true);
+  };
+
+  const openEditNetworkModal = (network: Network) => {
+    setCurrentNetwork(network);
+    setNetworkModal(true);
+  };
+
+  const openCreateNetworkModal = () => {
+    setCurrentNetwork(undefined);
+    setNetworkModal(true);
+  };
+
+  const openResourceModal = (network: Network, resource?: NetworkResource) => {
+    setCurrentNetwork(network);
+    resource && setCurrentResource(resource);
+    setResourceModal(true);
+  };
+
+  const openPolicyModal = (network?: Network, resource?: NetworkResource) => {
+    setPolicyDefaultSettings({
+      destinationGroups: resource?.groups,
+      name:
+        network && !resource
+          ? `${network?.name} Policy`
+          : resource
+          ? `${resource?.name} Policy`
+          : "",
+      description:
+        network && !resource
+          ? network?.description
+          : network
+          ? `${network.name} ${
+              network.description ? ", " + network.description : ""
+            }`
+          : undefined,
+    });
+    setPolicyModal(true);
+  };
+
+  const deleteNetwork = async (network: Network) => {
+    const choice = await confirm({
+      title: `Delete network '${network.name}'?`,
+      description:
+        "Are you sure you want to delete this network? Every resource and routing peers will be removed from this network. This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: network.name,
+      description: "Network deleted successfully.",
+      loadingMessage: "Deleting network...",
+      promise: deleteCall({}, `/${network.id}`).then(() => {
+        mutate("/networks");
+        mutate("/groups");
+      }),
+    });
+  };
+
+  const deleteResource = async (
+    network: Network,
+    resource: NetworkResource,
+  ) => {
+    const choice = await confirm({
+      title: `Delete resource '${resource.name}'?`,
+      description:
+        "Are you sure you want to delete this resource? This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: resource.name,
+      description: "Resource deleted successfully.",
+      loadingMessage: "Deleting resource...",
+      promise: deleteCall({}, `/${network.id}/resources/${resource.id}`).then(
+        () => {
+          mutate(`/networks/${network.id}/resources`);
+          mutate("/groups");
+        },
+      ),
+    });
+  };
+
+  const deleteRouter = async (network: Network, router: NetworkRouter) => {
+    const choice = await confirm({
+      title: `Remove this router?`,
+      description: "Are you sure you want to remove this router?",
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+
+    if (!choice) return;
+
+    notify({
+      title: "Router of " + network.name,
+      description: "Router deleted successfully.",
+      loadingMessage: "Deleting router...",
+      promise: deleteCall({}, `/${network.id}/routers/${router.id}`).then(
+        () => {
+          mutate(`/networks/${network.id}/routers`);
+        },
+      ),
+    });
+  };
+
+  const askForRoutingPeer = async (network: Network) => {
+    const choice = await confirm({
+      title: `Add Routing Peer to '${network.name}'?`,
+      description:
+        "Without a routing peer, the resources inside this network will not be accessible by any peers.",
+      confirmText: "Add Routing Peer",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openAddRoutingPeerModal(network);
+  };
+
+  const askForResource = async (network: Network) => {
+    const choice = await confirm({
+      title: `Add Resource to '${network.name}'?`,
+      description:
+        "Peers will be able to access your network resources once you add them.",
+      confirmText: "Add Resource",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openResourceModal(network);
+  };
+
+  const askForAccessControlPolicy = async (res: NetworkResource) => {
+    const choice = await confirm({
+      title: `Add policy for '${res.name}'?`,
+      description:
+        "Without a policy, the resource will not be accessible by any peers. Create a policy to control access to this resource.",
+      confirmText: "Create Policy",
+      cancelText: "Later",
+      type: "default",
+    });
+    if (!choice) return;
+    openPolicyModal(currentNetwork, res);
+  };
+
+  return (
+    <NetworksContext.Provider
+      value={{
+        openAddRoutingPeerModal,
+        openEditNetworkModal,
+        openCreateNetworkModal,
+        openResourceModal,
+        openPolicyModal,
+        deleteNetwork,
+        deleteResource,
+        deleteRouter,
+        network,
+      }}
+    >
+      {children}
+
+      <NetworkModal
+        open={networkModal}
+        setOpen={setNetworkModal}
+        network={currentNetwork}
+        onCreated={async (network) => {
+          mutate("/networks");
+          await askForRoutingPeer(network);
+        }}
+        onUpdated={() => {
+          mutate("/networks");
+        }}
+      />
+      <Modal
+        open={policyModal}
+        onOpenChange={(state) => {
+          setPolicyModal(state);
+          setPolicyDefaultSettings(undefined);
+        }}
+      >
+        <AccessControlModalContent
+          key={policyModal ? "1" : "0"}
+          initialDestinationGroups={policyDefaultSettings?.destinationGroups}
+          initialName={policyDefaultSettings?.name}
+          initialDescription={policyDefaultSettings?.description}
+          onSuccess={(p) => {
+            setPolicyModal(false);
+            setPolicyDefaultSettings(undefined);
+            mutate("/networks");
+            if (network) {
+              mutate(`/networks/${network.id}/resources`);
+              mutate(`/networks/${network.id}`);
+            }
+          }}
+        />
+      </Modal>
+      {currentNetwork && (
+        <>
+          <NetworkRoutingPeerModal
+            network={currentNetwork}
+            router={currentRouter}
+            open={routingPeerModal}
+            onCreated={async () => {
+              setRoutingPeerModal(false);
+              setCurrentRouter(undefined);
+              mutate(`/networks`);
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${currentNetwork.id}/routers`);
+                mutate(`/networks/${network.id}`);
+              } else {
+                await askForResource(currentNetwork);
+              }
+            }}
+            onUpdated={async () => {
+              setRoutingPeerModal(false);
+              setCurrentRouter(undefined);
+              mutate(`/networks`);
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}`);
+                mutate(`/networks/${currentNetwork.id}/routers`);
+              }
+            }}
+            setOpen={(state) => {
+              setCurrentRouter(undefined);
+              setRoutingPeerModal(state);
+            }}
+          />
+          <NetworkResourceModal
+            network={currentNetwork}
+            resource={currentResource}
+            onCreated={async (r) => {
+              setResourceModal(false);
+              setCurrentResource(undefined);
+              mutate("/networks");
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              } else {
+                await askForAccessControlPolicy(r);
+              }
+            }}
+            onUpdated={() => {
+              setResourceModal(false);
+              setCurrentResource(undefined);
+              mutate("/networks");
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              }
+            }}
+            open={resourceModal}
+            setOpen={(state) => {
+              setCurrentResource(undefined);
+              setResourceModal(state);
+            }}
+          />
+        </>
+      )}
+    </NetworksContext.Provider>
+  );
+};
+
+export const useNetworksContext = () => {
+  const context = React.useContext(NetworksContext);
+  if (context === undefined) {
+    throw new Error("useNetworksContext must be used within a NetworkProvider");
+  }
+  return context;
+};

src/modules/networks/NetworkRangeCell.tsx

@@ -1,16 +1,20 @@
+import { DomainListBadge } from "@components/ui/DomainListBadge";
 import { IconDirectionSign } from "@tabler/icons-react";
 import { InfoIcon } from "lucide-react";
 import * as React from "react";
-import { Route } from "@/interfaces/Route";
 import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
 
 type Props = {
-  route: Route;
+  network?: string;
+  domains?: string[];
 };
-export default function PeerRouteNetworkCell({ route }: Props) {
-  const isExitNode = route?.network === "0.0.0.0/0";
+export default function NetworkRangeCell({ network, domains }: Props) {
+  const isExitNode = network === "0.0.0.0/0";
+  const hasDomains = domains ? domains.length > 0 : false;
 
-  return isExitNode ? (
+  return hasDomains && domains ? (
+    <DomainListBadge domains={domains} />
+  ) : isExitNode ? (
     <ExitNodeHelpTooltip>
       <div className={"flex gap-2 items-center dark:text-nb-gray-300 group"}>
         <IconDirectionSign size={16} className={"text-yellow-400"} />
@@ -24,8 +28,6 @@ export default function PeerRouteNetworkCell({ route }: Props) {
       </div>
     </ExitNodeHelpTooltip>
   ) : (
-    <div className={"font-mono dark:text-nb-gray-300 flex max-w-[10px]"}>
-      {route.network}
-    </div>
+    <div className={"font-mono dark:text-nb-gray-300 flex"}>{network}</div>
   );
 }

src/modules/networks/PolicyCell.tsx

@@ -0,0 +1,30 @@
+import Badge from "@components/Badge";
+import Button from "@components/Button";
+import { PlusCircle, ShieldIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  count: number;
+};
+
+export const PolicyCell = ({ count }: Props) => {
+  return count > 0 ? (
+    <div className={"flex gap-3"}>
+      <Badge variant={"gray"} useHover={true}>
+        <ShieldIcon size={14} className={"text-green-500"} />
+        <div>
+          <span className={"font-medium"}>{count}</span> Access Policie(s)
+        </div>
+      </Badge>
+      <Button size={"xs"} variant={"secondary"} className={"min-w-[130px]"}>
+        <PlusCircle size={12} />
+        Add Policy
+      </Button>
+    </div>
+  ) : (
+    <Button size={"xs"} variant={"secondary"} className={"min-w-[130px]"}>
+      <PlusCircle size={12} />
+      Add Policy
+    </Button>
+  );
+};

src/modules/networks/misc/NetworkInformationSquare.tsx

@@ -0,0 +1,82 @@
+import DescriptionWithTooltip from "@components/ui/DescriptionWithTooltip";
+import { cn } from "@utils/helpers";
+import { ArrowRightIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  onClick?: () => void;
+  name: string;
+  description?: string;
+  active?: boolean;
+  size?: "md" | "lg";
+};
+export const NetworkInformationSquare = ({
+  onClick,
+  name,
+  description,
+  active = false,
+  size = "md",
+}: Props) => {
+  return (
+    <button
+      className={cn(
+        "flex w-full items-center max-w-[300px] gap-4 dark:text-neutral-300 text-neutral-500 transition-all group/network rounded-md",
+        onClick
+          ? "hover:text-neutral-100 hover:bg-nb-gray-910 cursor-pointer py-2 pl-3 pr-5 relative"
+          : "cursor-default",
+      )}
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          "bg-nb-gray-800 text-nb-gray-100 rounded-md flex items-center justify-center font-medium relative",
+          "uppercase",
+          size === "md" ? "h-10 w-10 text-md" : "h-12 w-12 text-lg",
+          "shrink-0",
+        )}
+      >
+        {name.substring(0, 2)}
+        <div
+          className={cn(
+            "h-2 w-2 rounded-full absolute bottom-0 right-0 z-10",
+            active ? "bg-green-500" : "bg-nb-gray-700",
+          )}
+        ></div>
+        <div
+          className={cn(
+            "h-3 w-3 bg-nb-gray-950 rounded-tl-[8px] rounded-br absolute bottom-0 right-0 transition-all",
+            onClick && "group-hover/network:bg-nb-gray-910",
+            onClick && "group-hover/table-row:bg-nb-gray-940",
+          )}
+        ></div>
+      </div>
+      <div className={"mt-[0px] flex items-center flex-wrap"}>
+        <p
+          className={cn(
+            "font-medium",
+            size == "md" ? "text-sm" : "text-xl leading-none mb-0.5",
+          )}
+        >
+          {name}
+        </p>
+        <DescriptionWithTooltip
+          className={cn(
+            "text-left",
+            size == "lg" && "text-md leading-none mt-0.5",
+          )}
+          maxChars={24}
+          text={description}
+        />
+      </div>
+      {onClick && (
+        <div
+          className={
+            "absolute right-0 top-0 h-full flex items-center pr-4 text-nb-gray-200 opacity-0 group-hover/network:opacity-100"
+          }
+        >
+          <ArrowRightIcon size={18} />
+        </div>
+      )}
+    </button>
+  );
+};

src/modules/networks/misc/NetworkNavigation.tsx

@@ -0,0 +1,27 @@
+import SidebarItem from "@components/SidebarItem";
+import * as React from "react";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import { NetworkRoutesDeprecationInfo } from "@/modules/networks/misc/NetworkRoutesDeprecationInfo";
+
+export const NetworkNavigation = () => {
+  return (
+    <SidebarItem
+      icon={<NetworkRoutesIcon />}
+      label="Networks"
+      collapsible
+      exactPathMatch={false}
+    >
+      <SidebarItem label="Networks" isChild href={"/networks"} />
+      <SidebarItem
+        label={
+          <div className={"flex items-center"}>
+            Network Routes
+            <NetworkRoutesDeprecationInfo />
+          </div>
+        }
+        isChild
+        href={"/network-routes"}
+      />
+    </SidebarItem>
+  );
+};

src/modules/networks/misc/NetworkRoutesDeprecationInfo.tsx

@@ -0,0 +1,23 @@
+import FullTooltip from "@components/FullTooltip";
+import { TriangleAlertIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  size?: number;
+};
+export const NetworkRoutesDeprecationInfo = ({ size = 14 }: Props) => {
+  return (
+    <FullTooltip
+      content={
+        <div className={"text-xs max-w-[230px]"}>
+          Network Routes will be deprecated and replaced with Networks.
+        </div>
+      }
+    >
+      <TriangleAlertIcon
+        size={size}
+        className={"text-amber-500 ml-2.5 hover:text-amber-400 cursor-help"}
+      />
+    </FullTooltip>
+  );
+};

src/modules/networks/resources/NetworkResourceModal.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import Button from "@components/Button";
+import HelpText from "@components/HelpText";
+import InlineLink from "@components/InlineLink";
+import { Input } from "@components/Input";
+import { Label } from "@components/Label";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import Separator from "@components/Separator";
+import { useApiCall } from "@utils/api";
+import { ExternalLinkIcon, PlusCircle, WorkflowIcon } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+import { ResourceSingleAddressInput } from "@/modules/networks/resources/ResourceSingleAddressInput";
+
+type Props = {
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  network: Network;
+  resource?: NetworkResource;
+  onCreated?: (r: NetworkResource) => void;
+  onUpdated?: (r: NetworkResource) => void;
+};
+
+export default function NetworkResourceModal({
+  network,
+  open,
+  setOpen,
+  resource,
+  onUpdated,
+  onCreated,
+}: Props) {
+  return (
+    <Modal open={open} onOpenChange={setOpen}>
+      <ResourceModalContent
+        key={open ? "1" : "0"}
+        network={network}
+        resource={resource}
+        onCreated={onCreated}
+        onUpdated={onUpdated}
+      />
+    </Modal>
+  );
+}
+
+type ModalProps = {
+  onCreated?: (r: NetworkResource) => void;
+  onUpdated?: (r: NetworkResource) => void;
+  network: Network;
+  resource?: NetworkResource;
+};
+
+export function ResourceModalContent({
+  onCreated,
+  onUpdated,
+  network,
+  resource,
+}: ModalProps) {
+  const create = useApiCall<NetworkResource>(
+    `/networks/${network.id}/resources`,
+  ).post;
+  const update = useApiCall<NetworkResource>(
+    `/networks/${network.id}/resources/${resource?.id}`,
+  ).put;
+
+  const [name, setName] = useState(resource?.name || "");
+  const [description, setDescription] = useState(resource?.description || "");
+  const [address, setAddress] = useState(resource?.address || "");
+  const [groups, setGroups, { save: saveGroups }] = useGroupHelper({
+    initial: resource?.groups || [],
+  });
+
+  const createResource = async () => {
+    const savedGroups = await saveGroups();
+    notify({
+      title: "Resource Created",
+      description: `The resource "${name}" has been created successfully.`,
+      loadingMessage: "Creating resource...",
+      promise: create({
+        name,
+        description,
+        address,
+        groups: savedGroups.map((g) => g.id),
+      }).then((r) => {
+        onCreated?.(r);
+      }),
+    });
+  };
+
+  const updateResource = async () => {
+    const savedGroups = await saveGroups();
+    notify({
+      title: "Resource Updated",
+      description: `The resource "${name}" has been updated successfully.`,
+      loadingMessage: "Updating resource...",
+      promise: update({
+        name,
+        description,
+        address,
+        groups: savedGroups.map((g) => g.id),
+      }).then((r) => {
+        onUpdated?.(r);
+      }),
+    });
+  };
+
+  // TODO:  Address validation is missing for proper handling of submit button
+  const canCreate = useMemo(() => {
+    return name.length > 0 && address.length > 0 && groups.length > 0;
+  }, [name, address, groups]);
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<WorkflowIcon size={20} />}
+        title={resource ? "Edit Resource" : "Add Resource"}
+        description={
+          resource
+            ? `${resource.name}`
+            : `Add new resource to "${network?.name}"`
+        }
+        color={"yellow"}
+      />
+
+      <Separator />
+
+      <div className={"px-8 flex-col flex gap-6 py-6"}>
+        <div>
+          <Label>Name</Label>
+          <HelpText>Provide a name for your resource</HelpText>
+          <Input
+            tabIndex={0}
+            placeholder={"e.g., Postgres Database"}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </div>
+
+        <ResourceSingleAddressInput value={address} onChange={setAddress} />
+
+        <div>
+          <Label>Assigned Groups</Label>
+          <HelpText>
+            Control access to this resource by assigning it to groups
+          </HelpText>
+          <PeerGroupSelector onChange={setGroups} values={groups} />
+        </div>
+      </div>
+
+      <ModalFooter className={"items-center"}>
+        <div className={"w-full"}>
+          <Paragraph className={"text-sm mt-auto"}>
+            Learn more about
+            <InlineLink href={"https://docs.netbird.io/how-to/networks-concept#resources"} target={"_blank"}>
+              Resources
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+          </Paragraph>
+        </div>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+
+          <Button
+            variant={"primary"}
+            data-cy={"submit-route"}
+            onClick={resource ? updateResource : createResource}
+            disabled={!canCreate}
+          >
+            {resource ? (
+              <>Save Changes</>
+            ) : (
+              <>
+                <PlusCircle size={16} />
+                Add Resource
+              </>
+            )}
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}

src/modules/networks/resources/ResourceActionCell.tsx

@@ -0,0 +1,39 @@
+import Button from "@components/Button";
+import { SquarePenIcon, Trash2 } from "lucide-react";
+import * as React from "react";
+import { NetworkResource } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
+
+type Props = {
+  resource: NetworkResource;
+};
+export const ResourceActionCell = ({ resource }: Props) => {
+  const { deleteResource, network, openResourceModal } = useNetworksContext();
+
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <Button
+        variant={"default-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          openResourceModal(network, resource);
+        }}
+      >
+        <SquarePenIcon size={16} />
+        Edit
+      </Button>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={() => {
+          if (!network) return;
+          deleteResource(network, resource);
+        }}
+      >
+        <Trash2 size={16} />
+        Remove
+      </Button>
+    </div>
+  );
+};