Add fine-grained ssh policy (#522)

* Add fine-grained ssh policy

* Update version text

* Fix coderabbit comment

.github/workflows/build_and_push.yml

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

docker/init_react_envs.sh

@@ -61,7 +61,7 @@ export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
 export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
-export NETBIRD_WASM_PATH=${NETBIRD_WASM_PATH:-https://pkgs.netbird.io/wasm/client}
+export NETBIRD_WASM_PATH=${NETBIRD_WASM_PATH}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 

package.json

@@ -56,7 +56,6 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "elkjs": "^0.10.0",
-    "eslint": "^8",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "flowbite": "^1.8.1",
@@ -66,7 +65,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.539.0",
-    "next": "^14.2.28",
+    "next": "^14.2.35",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18.3.1",
@@ -90,10 +89,10 @@
     "@faker-js/faker": "^9.5.1",
     "@types/chroma-js": "^3.1.1",
     "@types/js-cookie": "^3.0.6",
-    "eslint-config-next": "^14.2.28",
-    "cypress": "^13.13.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.5",
     "postcss": "^8",
     "prettier": "3.0.3",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3.4.17"
   }
 }

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

@@ -33,7 +33,7 @@ export default function AccessControlPage() {
         <div className={"p-default py-6"}>
           <Breadcrumbs>
             <Breadcrumbs.Item
-              href={"/policies"}
+              href={"/access-control"}
               label={"Access Control"}
               icon={<AccessControlIcon size={14} />}
             />

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

@@ -32,7 +32,7 @@ export default function NameServers() {
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
-            href={"/dns"}
+            href={"/dns/nameservers"}
             label={"DNS"}
             icon={<DNSIcon size={13} />}
           />

src/app/(dashboard)/group/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: `Group - ${globalMetaTitle}`,
+};
+export default BlankLayout;

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

@@ -0,0 +1,315 @@
+"use client";
+
+import Breadcrumbs from "@components/Breadcrumbs";
+import FullTooltip from "@components/FullTooltip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { GroupBadgeIcon } from "@components/ui/GroupBadgeIcon";
+import { PageNotFound } from "@components/ui/PageNotFound";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import useRedirect from "@hooks/useRedirect";
+import useFetchApi from "@utils/api";
+import { cn, singularize } from "@utils/helpers";
+import { FolderGit2Icon, Layers3Icon, PencilIcon } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useState } from "react";
+import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import DNSIcon from "@/assets/icons/DNSIcon";
+import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
+import TeamIcon from "@/assets/icons/TeamIcon";
+import { GroupProvider, useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import RoutesProvider from "@/contexts/RoutesProvider";
+import { Group, GROUP_TOOLTIP_TEXT } from "@/interfaces/Group";
+import PageContainer from "@/layouts/PageContainer";
+import { GroupNameserversSection } from "@/modules/groups/details/GroupNameserversSection";
+import { GroupNetworkRoutesSection } from "@/modules/groups/details/GroupNetworkRoutesSection";
+import { GroupPeersSection } from "@/modules/groups/details/GroupPeersSection";
+import { GroupPoliciesSection } from "@/modules/groups/details/GroupPoliciesSection";
+import { GroupResourcesSection } from "@/modules/groups/details/GroupResourcesSection";
+import { GroupSetupKeysSection } from "@/modules/groups/details/GroupSetupKeysSection";
+import { GroupUsersSection } from "@/modules/groups/details/GroupUsersSection";
+import useGroupDetails from "@/modules/groups/details/useGroupDetails";
+
+export default function GroupPage() {
+  const queryParameter = useSearchParams();
+  const { isRestricted } = usePermissions();
+  const groupId = queryParameter.get("id");
+  const {
+    data: group,
+    isLoading,
+    error,
+  } = useFetchApi<Group>(`/groups/${groupId}`, true);
+
+  useRedirect("/groups", false, !groupId || isRestricted);
+
+  if (isRestricted) {
+    return (
+      <PageContainer>
+        <RestrictedAccess page={"Group Information"} />
+      </PageContainer>
+    );
+  }
+
+  if (error)
+    return (
+      <PageNotFound
+        title={error?.message}
+        description={
+          "The group you are attempting to access cannot be found. It may have been deleted, or you may not have permission to view it. Please verify the URL or return to the dashboard."
+        }
+      />
+    );
+
+  return group && !isLoading ? (
+    <PageContainer>
+      <RoutesProvider>
+        <GroupProvider group={group} isDetailPage={true}>
+          <div className={"p-default py-6 pb-0 w-full mb-[6px]"}>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                href={"/groups"}
+                label={"Groups"}
+                icon={<FolderGit2Icon size={14} />}
+              />
+              <Breadcrumbs.Item label={group.name} active />
+            </Breadcrumbs>
+            <GroupDetailsName />
+          </div>
+          <GroupOverviewTabs group={group} />
+        </GroupProvider>
+      </RoutesProvider>
+    </PageContainer>
+  ) : (
+    <FullScreenLoading />
+  );
+}
+
+const GroupDetailsName = () => {
+  const { group, isJWTGroup, isAllowedToRename, openGroupRenameModal } =
+    useGroupContext();
+  const { permission } = usePermissions();
+
+  return (
+    <div className={"w-full"}>
+      <h1 className={"flex items-center gap-3 w-full whitespace-nowrap"}>
+        <GroupBadgeIcon id={group?.id} issued={group?.issued} size={20} />
+        {group.name}
+        {group.name !== "All" && permission?.groups?.update && (
+          <div>
+            <FullTooltip
+              content={
+                <div className={"text-xs max-w-xs"}>
+                  {isJWTGroup
+                    ? GROUP_TOOLTIP_TEXT.RENAME.JWT
+                    : GROUP_TOOLTIP_TEXT.RENAME.INTEGRATION}
+                </div>
+              }
+              interactive={false}
+              disabled={isAllowedToRename}
+              className={"w-full block"}
+            >
+              <div
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  !isAllowedToRename &&
+                    "opacity-40 cursor-not-allowed pointer-events-none",
+                )}
+                onClick={openGroupRenameModal}
+              >
+                <PencilIcon size={16} />
+              </div>
+            </FullTooltip>
+          </div>
+        )}
+      </h1>
+    </div>
+  );
+};
+
+const validAllGroupTabs = [
+  "policies",
+  "resources",
+  "network-routes",
+  "nameservers",
+];
+const validOtherGroupTabs = ["users", "peers", "setup-keys"];
+
+const GroupOverviewTabs = ({ group }: { group: Group }) => {
+  const searchParams = useSearchParams();
+
+  const getInitialTab = () => {
+    const isAllGroup = group.name === "All";
+    const tabParam = searchParams.get("tab");
+    const validTabs = isAllGroup
+      ? validAllGroupTabs
+      : [...validAllGroupTabs, ...validOtherGroupTabs];
+    if (tabParam === null) return isAllGroup ? "policies" : "users";
+    if (isAllGroup) {
+      return validTabs.includes(tabParam) ? tabParam : "policies";
+    }
+    return validTabs.includes(tabParam) ? tabParam : "users";
+  };
+
+  const [tab, setTab] = useState(getInitialTab());
+  const { groupDetails, isLoading } = useGroupDetails(group?.id || "");
+
+  const peersCount = groupDetails?.peers_count || 0;
+  const usersCount = groupDetails?.users?.length || 0;
+  const policiesCount = groupDetails?.policies?.length || 0;
+  const resourcesCount = groupDetails?.resources_count || 0;
+  const routesCount = groupDetails?.routes?.length || 0;
+  const nameserversCount = groupDetails?.nameservers?.length || 0;
+  const setupKeysCount = groupDetails?.setupKeys?.length || 0;
+
+  return (
+    <Tabs
+      defaultValue={tab}
+      onValueChange={(v) => setTab(v)}
+      value={tab}
+      className={"pt-2 pb-0 mb-0"}
+    >
+      <TabsList justify={"start"} className={"px-8"}>
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"users"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <TeamIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Users", usersCount)}
+          </TabsTrigger>
+        )}
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"peers"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <PeerIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Peers", peersCount)}
+          </TabsTrigger>
+        )}
+
+        <TabsTrigger
+          value={"policies"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <AccessControlIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Policies", policiesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"resources"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <Layers3Icon size={14} />
+          {singularize("Resources", resourcesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"network-routes"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <NetworkRoutesIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Network Routes", routesCount)}
+        </TabsTrigger>
+
+        <TabsTrigger
+          value={"nameservers"}
+          className={groupDetails === null ? "animate-pulse" : ""}
+        >
+          <DNSIcon
+            size={12}
+            className={
+              "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+            }
+          />
+          {singularize("Nameservers", nameserversCount)}
+        </TabsTrigger>
+
+        {group.name !== "All" && (
+          <TabsTrigger
+            value={"setup-keys"}
+            className={groupDetails === null ? "animate-pulse" : ""}
+          >
+            <SetupKeysIcon
+              size={12}
+              className={
+                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+              }
+            />
+            {singularize("Setup Keys", setupKeysCount)}
+          </TabsTrigger>
+        )}
+      </TabsList>
+
+      <TabsContent value={"users"} className={"pb-8"}>
+        <GroupUsersSection users={groupDetails?.users} isLoading={isLoading} />
+      </TabsContent>
+
+      <TabsContent value={"peers"} className={"pb-8"}>
+        <GroupPeersSection
+          peers={groupDetails?.peersOfGroup}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"policies"} className={"pb-8"}>
+        <GroupPoliciesSection
+          policies={groupDetails?.policies}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"resources"} className={"pb-8"}>
+        <GroupResourcesSection
+          resources={groupDetails?.networkResources}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"network-routes"} className={"pb-8"}>
+        <GroupNetworkRoutesSection
+          routes={groupDetails?.routes}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"nameservers"} className={"pb-8"}>
+        <GroupNameserversSection
+          nameserverGroups={groupDetails?.nameservers}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+
+      <TabsContent value={"setup-keys"} className={"pb-8"}>
+        <GroupSetupKeysSection
+          setupKeys={groupDetails?.setupKeys}
+          isLoading={isLoading}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+};

src/app/(dashboard)/groups/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: `Groups - ${globalMetaTitle}`,
+};
+export default BlankLayout;

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

@@ -0,0 +1,56 @@
+"use client";
+
+import Paragraph from "@components/Paragraph";
+import SkeletonTable from "@components/skeletons/SkeletonTable";
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { usePortalElement } from "@hooks/usePortalElement";
+import { ExternalLinkIcon, FolderGit2Icon } from "lucide-react";
+import React, { lazy, Suspense } from "react";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import InlineLink from "@/components/InlineLink";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import PageContainer from "@/layouts/PageContainer";
+
+const GroupsTable = lazy(() => import("@/modules/groups/table/GroupsTable"));
+
+export default function GroupsPage() {
+  const { permission } = usePermissions();
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
+  return (
+    <PageContainer>
+      <div className={"p-default py-6"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/groups"}
+            label={"Groups"}
+            icon={<FolderGit2Icon size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <h1 ref={headingRef}>Groups</h1>
+        <Paragraph>
+          Here is the overview of the groups of your organization. You can
+          delete the unused ones.
+        </Paragraph>
+        <Paragraph>
+          Learn more about{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/manage-network-access"}
+            target={"_blank"}
+          >
+            Groups
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+          in our documentation.
+        </Paragraph>
+      </div>
+      <RestrictedAccess hasAccess={permission.groups.read} page={"Groups"}>
+        <Suspense fallback={<SkeletonTable />}>
+          <GroupsTable headingTarget={portalTarget} />
+        </Suspense>
+      </RestrictedAccess>
+    </PageContainer>
+  );
+}

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

@@ -7,7 +7,7 @@ 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 { ArrowUpRightIcon, ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeersProvider from "@/contexts/PeersProvider";
@@ -16,6 +16,7 @@ import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
+import { Callout } from "@components/Callout";
 
 const NetworkRoutesTable = lazy(
   () => import("@/modules/route-group/NetworkRoutesTable"),
@@ -59,6 +60,17 @@ export default function NetworkRoutes() {
               </InlineLink>
               in our documentation.
             </Paragraph>
+
+            <Callout className={"max-w-xl mt-3"} variant={"warning"}>
+              <span>
+                We recommend using the new Networks concept to easier visualise
+                and manage access to your resources.{" "}
+                <InlineLink href={"/networks"}>
+                  Go to Networks
+                  <ArrowUpRightIcon size={14} />
+                </InlineLink>
+              </span>
+            </Callout>
           </div>
 
           <RestrictedAccess hasAccess={permission.routes.read}>

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

@@ -30,6 +30,7 @@ import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
+  ArrowRightIcon,
   Barcode,
   CalendarDays,
   Cpu,
@@ -65,6 +66,7 @@ import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSectio
 import { PeerSSHToggle } from "@/modules/peer/PeerSSHToggle";
 import { RDPButton } from "@/modules/remote-access/rdp/RDPButton";
 import { SSHButton } from "@/modules/remote-access/ssh/SSHButton";
+import Link from "next/link";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
@@ -148,7 +150,7 @@ const PeerGeneralInformation = () => {
   );
   const [selectedGroups, setSelectedGroups, { getAllGroupCalls }] =
     useGroupHelper({
-      initial: peerGroups,
+      initial: peerGroups?.filter((g) => g?.name !== "All"),
       peer,
     });
 
@@ -237,9 +239,21 @@ const PeerGeneralInformation = () => {
             </h1>
             <LoginExpiredBadge loginExpired={peer.login_expired} />
           </div>
-          <div className={"flex items-center gap-8"}>
-            <Paragraph className={"flex items-center"}>{user?.email}</Paragraph>
-          </div>
+          {(user?.id || user?.email) && (
+            <div className={"flex items-center gap-8"}>
+              <Paragraph className={"flex items-center"}>
+                <Link
+                  href={`/team/user?id=${user?.id}`}
+                  className={
+                    "hover:text-nb-gray-200 transition-all flex items-center gap-1"
+                  }
+                >
+                  {user?.email || user?.id}
+                  <ArrowRightIcon size={14} />
+                </Link>
+              </Paragraph>
+            </div>
+          )}
         </div>
         <div className={"flex gap-4"}>
           <Button

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

@@ -19,9 +19,9 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import ClientSettingsTab from "@/modules/settings/ClientSettingsTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
-import GroupsTab from "@/modules/settings/GroupsTab";
 import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
+import GroupsSettings from "@/modules/settings/GroupsSettings";
 
 export default function NetBirdSettings() {
   const queryParams = useSearchParams();
@@ -81,7 +81,7 @@ export default function NetBirdSettings() {
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
-            {account && <GroupsTab account={account} />}
+            {account && <GroupsSettings account={account} />}
             {account && <NetworkSettingsTab account={account} />}
             {account && <ClientSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}

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

@@ -9,6 +9,7 @@ import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useRedirect from "@hooks/useRedirect";
@@ -16,7 +17,15 @@ import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
 import dayjs from "dayjs";
-import { Ban, GalleryHorizontalEnd, History, Mail, User2 } from "lucide-react";
+import {
+  Ban,
+  GalleryHorizontalEnd,
+  History,
+  KeyRoundIcon,
+  Mail,
+  MonitorSmartphoneIcon,
+  User2,
+} from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -33,6 +42,7 @@ 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 { UserPeersSection } from "@/modules/users/UserPeersSection";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
 
 export default function UserPage() {
@@ -80,6 +90,7 @@ type Props = {
 function UserOverview({ user, initialGroups }: Readonly<Props>) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
+  const isServiceUser = !!user?.is_service_user;
   const { mutate } = useSWRConfig();
   const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
@@ -91,7 +102,6 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
     });
 
   const [role, setRole] = useState(user.role || Role.User);
-
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
     role,
     selectedGroups,
@@ -114,13 +124,24 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
           `/${user.id}`,
         )
         .then(() => {
-          mutate(`/users?service_user=${user.is_service_user}`);
+          mutate(`/users?service_user=${isServiceUser}`);
           updateChangesRef([role, selectedGroups]);
         }),
       loadingMessage: "Saving changes...",
     });
   };
 
+  const isProfilePage = !!user?.is_current && !isServiceUser;
+  const canViewTokens = permission?.pats?.read;
+  const canViewPeers = permission?.peers?.read;
+
+  const showAccessTokens = (user?.is_current || isServiceUser) && canViewTokens;
+  const showPeers = !isServiceUser && canViewPeers;
+  const showTabs = isProfilePage && showPeers && showAccessTokens;
+  const showSeparator = !showTabs;
+
+  const [tab, setTab] = useState(isServiceUser ? "access-tokens" : "peers");
+
   return (
     <PageContainer>
       <div className={"p-default py-6 mb-4"}>
@@ -132,7 +153,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             icon={<TeamIcon size={13} />}
           />
 
-          {user.is_service_user ? (
+          {isServiceUser ? (
             <Breadcrumbs.Item
               href={"/team/service-users"}
               label={"Service Users"}
@@ -158,7 +179,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                   "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
                 }
                 style={
-                  user.is_service_user
+                  isServiceUser
                     ? {
                         color: "white",
                       }
@@ -171,13 +192,13 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                       }
                 }
               >
-                {user.is_service_user ? (
+                {isServiceUser ? (
                   <IconSettings2 size={16} />
                 ) : (
                   user?.name?.charAt(0) || user?.id?.charAt(0)
                 )}
               </div>
-              <h1 className={"flex items-center gap-3"}>
+              <h1 className={"flex items-center gap-3"} title={user?.id}>
                 {user.name || user.id}
               </h1>
             </div>
@@ -188,7 +209,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                 variant={"default"}
                 className={"w-full"}
                 onClick={() => {
-                  user.is_service_user
+                  isServiceUser
                     ? router.push("/team/service-users")
                     : router.push("/team/users");
                 }}
@@ -212,7 +233,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
         <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
           <UserInformationCard user={user} />
           <div className={"flex flex-col gap-8 w-1/2 "}>
-            {!user.is_service_user && isOwnerOrAdmin && (
+            {!isServiceUser && isOwnerOrAdmin && (
               <div>
                 <Label>Auto-assigned groups</Label>
                 <HelpText>
@@ -238,7 +259,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
-                  hideOwner={user.is_service_user}
+                  hideOwner={isServiceUser}
                   currentUser={user}
                   disabled={isLoggedInUser || !permission.users.update}
                 />
@@ -248,38 +269,65 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
         </div>
       </div>
 
-      {(user.is_current || user.is_service_user) && permission.pats.read && (
-        <>
-          <Separator />
-          <div className={"px-8 py-6"}>
-            <div className={"max-w-6xl"}>
-              <div className={"flex justify-between items-center"}>
-                <div>
-                  <h2>Access Tokens</h2>
-                  <Paragraph>
-                    Access tokens give access to NetBird API.
-                  </Paragraph>
-                </div>
-                <div className={"inline-flex gap-4 justify-end"}>
+      {showSeparator && <Separator />}
+
+      <Tabs
+        defaultValue={tab}
+        onValueChange={setTab}
+        value={tab}
+        className={"pb-0 mb-0"}
+      >
+        <TabsList justify={"start"} className={"px-8"} hidden={!showTabs}>
+          {showPeers && (
+            <TabsTrigger value={"peers"}>
+              <MonitorSmartphoneIcon size={16} />
+              Peers
+            </TabsTrigger>
+          )}
+          {showAccessTokens && (
+            <TabsTrigger value={"access-tokens"}>
+              <KeyRoundIcon size={16} />
+              Access Tokens
+            </TabsTrigger>
+          )}
+        </TabsList>
+        {showPeers && (
+          <TabsContent value={"peers"} className={"pb-8"}>
+            <UserPeersSection user={user} />
+          </TabsContent>
+        )}
+        {showAccessTokens && (
+          <TabsContent value={"access-tokens"} className={"pb-8"}>
+            <div className={"px-8"}>
+              <div className={"max-w-6xl"}>
+                <div className={"flex justify-between items-center"}>
                   <div>
-                    <CreateAccessTokenModal user={user}>
-                      <Button
-                        variant={"primary"}
-                        data-cy={"access-token-open-modal"}
-                        disabled={!permission.pats.create}
-                      >
-                        <IconCirclePlus size={16} />
-                        Create Access Token
-                      </Button>
-                    </CreateAccessTokenModal>
+                    <h2>Access Tokens</h2>
+                    <Paragraph>
+                      Access tokens give access to NetBird API.
+                    </Paragraph>
+                  </div>
+                  <div className={"inline-flex gap-4 justify-end"}>
+                    <div>
+                      <CreateAccessTokenModal user={user}>
+                        <Button
+                          variant={"primary"}
+                          data-cy={"access-token-open-modal"}
+                          disabled={!permission.pats.create}
+                        >
+                          <IconCirclePlus size={16} />
+                          Create Access Token
+                        </Button>
+                      </CreateAccessTokenModal>
+                    </div>
                   </div>
                 </div>
+                <AccessTokensTable user={user} />
               </div>
-              <AccessTokensTable user={user} />
             </div>
-          </div>
-        </>
-      )}
+          </TabsContent>
+        )}
+      </Tabs>
     </PageContainer>
   );
 }

src/app/(remote-access)/peer/rdp/page.tsx

@@ -4,7 +4,6 @@ import { notify } from "@components/Notification";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { IconCircleX } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
-import { cn } from "@utils/helpers";
 import { Loader2Icon } from "lucide-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { Peer } from "@/interfaces/Peer";
@@ -20,6 +19,8 @@ import {
   NetBirdStatus,
   useNetBirdClient,
 } from "@/modules/remote-access/useNetBirdClient";
+import { cn } from "@utils/helpers";
+import { isNetbirdSSHProtocolSupported } from "@utils/version";
 
 export default function RDPPage() {
   const { peerId } = useRDPQueryParams();
@@ -31,7 +32,7 @@ export default function RDPPage() {
   } = useFetchApi<Peer>(`/peers/${peerId}`, true, false, !!peerId);
 
   return (
-    <div className={"w-screen h-screen overflow-hidden"}>
+    <div className={"w-screen h-screen overflow-hidden fixed inset-0"}>
       {peerId && peer && !isLoading ? (
         <RDPSession key={peer.id} peer={peer} />
       ) : (
@@ -84,7 +85,12 @@ function RDPSession({ peer }: Props) {
       try {
         setCredentials(rdpCredentials);
         setIsNetBirdConnecting(true);
-        await client.connectTemporary(peer.id, [`tcp/${rdpCredentials.port}`]);
+        const protocol = isNetbirdSSHProtocolSupported(peer.version)
+          ? "netbird-ssh"
+          : "tcp";
+        await client.connectTemporary(peer.id, [
+          `${protocol}/${rdpCredentials.port}`,
+        ]);
         setIsNetBirdConnecting(false);
       } catch (error) {
         sendErrorNotification(

src/app/(remote-access)/peer/ssh/page.tsx

@@ -2,7 +2,6 @@
 
 import { PageNotFound } from "@components/ui/PageNotFound";
 import useFetchApi, { ErrorResponse } from "@utils/api";
-import { isNativeSSHSupported } from "@utils/version";
 import { CircleXIcon, InfoIcon, Loader2Icon } from "lucide-react";
 import React, { useEffect, useRef } from "react";
 import type { Peer } from "@/interfaces/Peer";
@@ -13,6 +12,10 @@ import {
   NetBirdStatus,
   useNetBirdClient,
 } from "@/modules/remote-access/useNetBirdClient";
+import {
+  isNativeSSHSupported,
+  isNetbirdSSHProtocolSupported,
+} from "@utils/version";
 
 export default function SSHPage() {
   const { peerId, username, port } = useSSHQueryParams();
@@ -88,7 +91,10 @@ function SSHTerminal({ username, port, peer }: Props) {
     connected.current = false;
     try {
       const aclPort = isNativeSSHSupported(peer.version) ? "22022" : port;
-      const rules = [`tcp/${aclPort}`];
+      const protocol = isNetbirdSSHProtocolSupported(peer.version)
+        ? "netbird-ssh"
+        : "tcp";
+      const rules = [`${protocol}/${aclPort}`];
       await client?.connectTemporary(peer.id, rules);
       await ssh({
         hostname: peer.ip,
@@ -108,9 +114,13 @@ function SSHTerminal({ username, port, peer }: Props) {
       if (!peer.id) return;
       if (connected.current) return;
       connected.current = true;
+
       try {
         const aclPort = isNativeSSHSupported(peer.version) ? "22022" : port;
-        const rules = [`tcp/${aclPort}`];
+        const protocol = isNetbirdSSHProtocolSupported(peer.version)
+          ? "netbird-ssh"
+          : "tcp";
+        const rules = [`${protocol}/${aclPort}`];
         await client?.connectTemporary(peer.id, rules);
         const res = await ssh({
           hostname: peer.ip,
@@ -121,7 +131,7 @@ function SSHTerminal({ username, port, peer }: Props) {
           sshConnectedOnce.current = true;
         }
       } catch (error) {
-        console.error("Connection failed:", error);
+        console.error("Connection error:", error);
       }
     };
 

src/assets/icons/JumpcloudIcon.tsx

@@ -0,0 +1,19 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function JumpcloudIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="167"
+      height="82"
+      viewBox="0 0 167 82"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M166.911 58.3592C166.911 64.3815 164.519 70.1571 160.26 74.4155C156.002 78.6739 150.226 81.0662 144.204 81.0662H137.961C137.31 73.4972 129.5 67.0612 118.46 64.0722C121.244 61.3253 123.148 57.8124 123.931 53.9803C124.713 50.1482 124.338 46.17 122.854 42.5515C121.369 38.933 118.842 35.8378 115.594 33.6594C112.345 31.481 108.522 30.3178 104.611 30.3178C100.7 30.3178 96.8772 31.481 93.6289 33.6594C90.3805 35.8378 87.8534 38.933 86.3689 42.5515C84.8843 46.17 84.5094 50.1482 85.2918 53.9803C86.0743 57.8124 87.9786 61.3253 90.7628 64.0722C85.5111 65.3278 80.6301 67.8055 76.5167 71.3037C73.9207 69.8152 71.1411 68.6726 68.2487 67.9049C70.6422 65.5587 72.2829 62.5529 72.9614 59.2707C73.6399 55.9884 73.3255 52.5784 72.0584 49.4755C70.7913 46.3726 68.6288 43.7174 65.8467 41.8484C63.0646 39.9793 59.7888 38.9812 56.4372 38.9812C53.0855 38.9812 49.8098 39.9793 47.0277 41.8484C44.2455 43.7174 42.0831 46.3726 40.816 49.4755C39.5488 52.5784 39.2345 55.9884 39.913 59.2707C40.5915 62.5529 42.2321 65.5587 44.6257 67.9049C35.9237 70.3154 29.5841 75.1364 28.2342 80.9698H21.991C16.0936 80.7777 10.502 78.2999 6.39821 74.0603C2.2944 69.8206 0 64.1513 0 58.2508C0 52.3503 2.2944 46.681 6.39821 42.4413C10.502 38.2016 16.0936 35.7238 21.991 35.5317C24.8814 35.5419 27.7438 36.0981 30.4278 37.1709C32.2478 33.2162 35.1686 29.8695 38.8407 27.5312C42.5128 25.1928 46.7807 23.9618 51.1341 23.9854C51.6885 23.9854 52.2429 23.9854 52.7732 23.9854C53.9093 18.1059 56.8018 12.7093 61.0689 8.50798C65.336 4.30669 70.7769 1.49837 76.6733 0.453829C82.5698 -0.590709 88.6443 0.177651 94.095 2.65746C99.546 5.13728 104.116 9.21191 107.203 14.3434C110.733 13.2708 114.463 13.023 118.104 13.6193C121.746 14.2155 125.202 15.6397 128.206 17.7822C131.21 19.9247 133.682 22.7283 135.432 25.977C137.182 29.2257 138.162 32.8326 138.298 36.52C141.665 35.6031 145.198 35.4762 148.622 36.1492C152.046 36.8222 155.269 38.277 158.038 40.4001C160.808 42.5233 163.049 45.2574 164.588 48.3892C166.127 51.5211 166.922 54.9661 166.911 58.4557V58.3592Z"
+        fill="#4CC2BF"
+      />
+    </svg>
+  );
+}

src/assets/icons/OIDCIcon.tsx

@@ -0,0 +1,27 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function OIDCIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      width="173"
+      height="174"
+      viewBox="0 0 173 174"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path
+        d="M76.3945 173.48L103.325 154.065L102.072 0L76.3945 20.041V173.48Z"
+        fill="#FF8E00"
+      />
+      <path
+        d="M76.7077 173.48C-24.0221 157.466 -26.8926 69.7689 76.0814 50.7288L76.3945 68.8909C3.35034 81.0694 12.6045 146.598 76.3945 156.257L76.7077 173.48Z"
+        fill="white"
+      />
+      <path
+        d="M103.011 68.2646C115.468 68.3493 126.32 74.0515 137.144 79.8508L121.174 91.7502H172.216L172.529 56.9916L156.558 68.8909C140.397 60.7278 125.542 50.9315 103.011 50.7288V68.2646Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

src/assets/nameservers/dns0-zero.svg

@@ -1,12 +0,0 @@
-<svg width="573" height="148" viewBox="0 0 573 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4_4)">
-<path d="M0.739014 125.602V33.09H28.239C34.491 33.09 39.919 34.274 44.524 36.638C49.128 39.004 52.698 42.341 55.233 46.65C57.767 50.958 59.034 56.071 59.034 61.984V96.58C59.034 102.41 57.767 107.5 55.233 111.85C52.698 116.203 49.128 119.581 44.523 121.99C39.918 124.397 34.491 125.601 28.239 125.601L0.739014 125.602ZM16.58 111.028H28.24C32.801 111.028 36.433 109.741 39.138 107.163C41.841 104.587 43.193 101.06 43.193 96.581V61.984C43.193 57.592 41.841 54.107 39.138 51.529C36.433 48.952 32.801 47.663 28.239 47.663H16.58V111.028ZM76.396 125.602V33.09H95.786L121.512 107.86C121.216 104.673 120.942 101.483 120.688 98.292C120.386 94.5366 120.154 90.776 119.991 87.012C119.821 83.169 119.738 79.812 119.738 76.938V33.09H134.185V125.602H114.795L89.323 50.832C89.491 53.283 89.703 56.239 89.956 59.702C90.2137 63.2478 90.4251 66.7967 90.59 70.348C90.758 73.982 90.844 77.318 90.844 80.36V125.602H76.396ZM181.582 126.869C175.245 126.869 169.752 125.812 165.107 123.701C160.46 121.591 156.889 118.569 154.398 114.64C151.905 110.711 150.616 106.086 150.533 100.763H166.374C166.374 104.565 167.747 107.543 170.494 109.698C173.238 111.852 176.976 112.929 181.709 112.929C186.271 112.929 189.839 111.874 192.417 109.761C194.993 107.65 196.282 104.735 196.282 101.017C196.282 97.892 195.374 95.167 193.558 92.842C191.74 90.52 189.142 88.936 185.764 88.09L175.119 85.175C167.852 83.318 162.256 79.979 158.327 75.164C154.398 70.348 152.434 64.518 152.434 57.675C152.434 52.438 153.616 47.875 155.982 43.988C158.347 40.103 161.705 37.103 166.058 34.99C170.408 32.88 175.54 31.822 181.455 31.822C190.409 31.822 197.506 34.125 202.745 38.729C207.983 43.335 210.645 49.523 210.73 57.295H194.888C194.888 53.663 193.704 50.812 191.34 48.741C188.974 46.671 185.637 45.636 181.328 45.636C177.188 45.636 173.978 46.608 171.697 48.551C169.416 50.495 168.275 53.24 168.275 56.788C168.275 60 169.141 62.724 170.873 64.962C172.603 67.202 175.119 68.786 178.413 69.714L189.439 72.756C196.789 74.616 202.407 77.932 206.294 82.704C210.179 87.478 212.124 93.371 212.124 100.383C212.124 105.623 210.856 110.248 208.322 114.26C205.787 118.273 202.239 121.378 197.677 123.574C193.114 125.77 187.748 126.869 181.582 126.869ZM257.366 126.869C251.366 126.869 246.17 125.729 241.778 123.448C237.384 121.167 233.985 117.957 231.577 113.816C229.169 109.678 227.965 104.818 227.965 99.242V59.45C227.965 53.874 229.169 49.017 231.577 44.876C233.984 40.738 237.384 37.526 241.778 35.245C246.17 32.964 251.366 31.823 257.366 31.823C263.449 31.823 268.665 32.963 273.017 35.245C277.367 37.526 280.747 40.738 283.156 44.876C285.563 49.016 286.767 53.874 286.767 59.45V99.243C286.767 104.819 285.563 109.679 283.156 113.817C280.748 117.957 277.346 121.167 272.954 123.449C268.56 125.729 263.364 126.869 257.366 126.869ZM257.366 113.183C261.758 113.183 265.265 111.915 267.885 109.381C270.502 106.846 271.813 103.468 271.813 99.242V59.45C271.813 55.227 270.503 51.846 267.885 49.312C265.265 46.777 261.758 45.51 257.366 45.51C252.972 45.51 249.466 46.777 246.848 49.312C244.228 51.846 242.918 55.227 242.918 59.45V99.243C242.918 103.469 244.228 106.847 246.848 109.382C249.465 111.916 252.972 113.183 257.366 113.183ZM257.366 87.583C254.915 87.583 252.909 86.781 251.346 85.175C249.782 83.571 249.002 81.5 249.002 78.965C249.002 76.431 249.762 74.403 251.283 72.883C252.803 71.362 254.831 70.601 257.366 70.601C259.901 70.601 261.928 71.361 263.449 72.883C264.969 74.403 265.73 76.431 265.73 78.966C265.73 81.5 264.97 83.571 263.45 85.176C261.928 86.781 259.9 87.583 257.366 87.583Z" fill="black"/>
-<path d="M332.69 126.999C329.057 126.999 326.164 125.941 324.01 123.831C321.855 121.72 320.778 118.847 320.778 115.213C320.778 111.581 321.855 108.686 324.01 106.532C326.164 104.378 329.057 103.3 332.69 103.3C336.322 103.3 339.217 104.378 341.372 106.532C343.526 108.686 344.603 111.582 344.603 115.213C344.603 118.847 343.526 121.72 341.372 123.831C339.217 125.941 336.322 126.999 332.691 126.999H332.69ZM381.862 125.732V33.219H437.369V47.032H397.449V71.112H432.934V84.798H397.45V111.918H437.37V125.732H381.862ZM484.766 126.999C475.725 126.999 468.65 124.528 463.539 119.585C458.426 114.643 455.872 107.906 455.872 99.372V33.219H471.84V99.245C471.84 103.639 472.937 107.061 475.135 109.51C477.331 111.962 480.54 113.185 484.766 113.185C488.905 113.185 492.095 111.962 494.334 109.51C496.572 107.06 497.693 103.639 497.693 99.245V33.219H513.66V99.372C513.66 107.906 511.126 114.642 506.057 119.585C500.987 124.528 493.891 126.999 484.767 126.999H484.766Z" fill="#686868"/>
-<path d="M549 0H573V148H549V0Z" fill="#FFCC03"/>
-</g>
-<defs>
-<clipPath id="clip0_4_4">
-<rect width="573" height="148" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/assets/nameservers/dns0.svg

@@ -1,12 +0,0 @@
-<svg width="573" height="148" viewBox="0 0 573 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4_4)">
-<path d="M0.739014 125.602V33.09H28.239C34.491 33.09 39.919 34.274 44.524 36.638C49.128 39.004 52.698 42.341 55.233 46.65C57.767 50.958 59.034 56.071 59.034 61.984V96.58C59.034 102.41 57.767 107.5 55.233 111.85C52.698 116.203 49.128 119.581 44.523 121.99C39.918 124.397 34.491 125.601 28.239 125.601L0.739014 125.602ZM16.58 111.028H28.24C32.801 111.028 36.433 109.741 39.138 107.163C41.841 104.587 43.193 101.06 43.193 96.581V61.984C43.193 57.592 41.841 54.107 39.138 51.529C36.433 48.952 32.801 47.663 28.239 47.663H16.58V111.028ZM76.396 125.602V33.09H95.786L121.512 107.86C121.216 104.673 120.942 101.483 120.688 98.292C120.386 94.5366 120.154 90.776 119.991 87.012C119.821 83.169 119.738 79.812 119.738 76.938V33.09H134.185V125.602H114.795L89.323 50.832C89.491 53.283 89.703 56.239 89.956 59.702C90.2137 63.2478 90.4251 66.7967 90.59 70.348C90.758 73.982 90.844 77.318 90.844 80.36V125.602H76.396ZM181.582 126.869C175.245 126.869 169.752 125.812 165.107 123.701C160.46 121.591 156.889 118.569 154.398 114.64C151.905 110.711 150.616 106.086 150.533 100.763H166.374C166.374 104.565 167.747 107.543 170.494 109.698C173.238 111.852 176.976 112.929 181.709 112.929C186.271 112.929 189.839 111.874 192.417 109.761C194.993 107.65 196.282 104.735 196.282 101.017C196.282 97.892 195.374 95.167 193.558 92.842C191.74 90.52 189.142 88.936 185.764 88.09L175.119 85.175C167.852 83.318 162.256 79.979 158.327 75.164C154.398 70.348 152.434 64.518 152.434 57.675C152.434 52.438 153.616 47.875 155.982 43.988C158.347 40.103 161.705 37.103 166.058 34.99C170.408 32.88 175.54 31.822 181.455 31.822C190.409 31.822 197.506 34.125 202.745 38.729C207.983 43.335 210.645 49.523 210.73 57.295H194.888C194.888 53.663 193.704 50.812 191.34 48.741C188.974 46.671 185.637 45.636 181.328 45.636C177.188 45.636 173.978 46.608 171.697 48.551C169.416 50.495 168.275 53.24 168.275 56.788C168.275 60 169.141 62.724 170.873 64.962C172.603 67.202 175.119 68.786 178.413 69.714L189.439 72.756C196.789 74.616 202.407 77.932 206.294 82.704C210.179 87.478 212.124 93.371 212.124 100.383C212.124 105.623 210.856 110.248 208.322 114.26C205.787 118.273 202.239 121.378 197.677 123.574C193.114 125.77 187.748 126.869 181.582 126.869ZM257.366 126.869C251.366 126.869 246.17 125.729 241.778 123.448C237.384 121.167 233.985 117.957 231.577 113.816C229.169 109.678 227.965 104.818 227.965 99.242V59.45C227.965 53.874 229.169 49.017 231.577 44.876C233.984 40.738 237.384 37.526 241.778 35.245C246.17 32.964 251.366 31.823 257.366 31.823C263.449 31.823 268.665 32.963 273.017 35.245C277.367 37.526 280.747 40.738 283.156 44.876C285.563 49.016 286.767 53.874 286.767 59.45V99.243C286.767 104.819 285.563 109.679 283.156 113.817C280.748 117.957 277.346 121.167 272.954 123.449C268.56 125.729 263.364 126.869 257.366 126.869ZM257.366 113.183C261.758 113.183 265.265 111.915 267.885 109.381C270.502 106.846 271.813 103.468 271.813 99.242V59.45C271.813 55.227 270.503 51.846 267.885 49.312C265.265 46.777 261.758 45.51 257.366 45.51C252.972 45.51 249.466 46.777 246.848 49.312C244.228 51.846 242.918 55.227 242.918 59.45V99.243C242.918 103.469 244.228 106.847 246.848 109.382C249.465 111.916 252.972 113.183 257.366 113.183ZM257.366 87.583C254.915 87.583 252.909 86.781 251.346 85.175C249.782 83.571 249.002 81.5 249.002 78.965C249.002 76.431 249.762 74.403 251.283 72.883C252.803 71.362 254.831 70.601 257.366 70.601C259.901 70.601 261.928 71.361 263.449 72.883C264.969 74.403 265.73 76.431 265.73 78.966C265.73 81.5 264.97 83.571 263.45 85.176C261.928 86.781 259.9 87.583 257.366 87.583Z" fill="black"/>
-<path d="M332.69 126.999C329.057 126.999 326.164 125.941 324.01 123.831C321.855 121.72 320.778 118.847 320.778 115.213C320.778 111.581 321.855 108.686 324.01 106.532C326.164 104.378 329.057 103.3 332.69 103.3C336.322 103.3 339.217 104.378 341.372 106.532C343.526 108.686 344.603 111.582 344.603 115.213C344.603 118.847 343.526 121.72 341.372 123.831C339.217 125.941 336.322 126.999 332.691 126.999H332.69ZM381.862 125.732V33.219H437.369V47.032H397.449V71.112H432.934V84.798H397.45V111.918H437.37V125.732H381.862ZM484.766 126.999C475.725 126.999 468.65 124.528 463.539 119.585C458.426 114.643 455.872 107.906 455.872 99.372V33.219H471.84V99.245C471.84 103.639 472.937 107.061 475.135 109.51C477.331 111.962 480.54 113.185 484.766 113.185C488.905 113.185 492.095 111.962 494.334 109.51C496.572 107.06 497.693 103.639 497.693 99.245V33.219H513.66V99.372C513.66 107.906 511.126 114.642 506.057 119.585C500.987 124.528 493.891 126.999 484.767 126.999H484.766Z" fill="#359CEF"/>
-<path d="M549 0H573V148H549V0Z" fill="#FFCC03"/>
-</g>
-<defs>
-<clipPath id="clip0_4_4">
-<rect width="573" height="148" fill="white"/>
-</clipPath>
-</defs>
-</svg>

src/components/Badge.tsx

@@ -32,6 +32,10 @@ const variants = cva("", {
       green: ["bg-green-950 border-green-500 border text-green-400"],
       netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
     },
+    size: {
+      default: "text-[0.75rem] py-1.5 px-3",
+      xs: "text-[0.6rem] py-[0.3rem] px-2",
+    },
     hover: {
       none: [],
       blue: ["hover:bg-sky-200"],
@@ -42,7 +46,7 @@ const variants = cva("", {
       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"],
+      "gray-ghost": ["hover:bg-nb-gray-800 cursor-pointer"],
       green: ["hover:bg-green-950/50"],
       netbird: ["hover:bg-netbird-950/50"],
     },
@@ -53,6 +57,7 @@ export default function Badge({
   children,
   className,
   variant = "blue",
+  size = "default",
   useHover = false,
   disabled = false,
   ...props
@@ -60,8 +65,8 @@ export default function Badge({
   return (
     <div
       className={cn(
-        "relative z-10 cursor-inherit whitespace-nowrap rounded-md text-[12px] py-1.5 px-3 font-normal flex gap-1.5 items-center justify-center transition-all",
-        variants({ variant, hover: useHover ? variant : "none" }),
+        "relative z-10 cursor-inherit whitespace-nowrap rounded-md font-normal flex gap-1.5 items-center justify-center transition-all",
+        variants({ variant, hover: useHover ? variant : "none", size }),
         disabled && "cursor-not-allowed opacity-50 select-none",
         className,
       )}

src/components/ButtonGroup.tsx

@@ -34,7 +34,7 @@ const ButtonGroupButton = forwardRef(
         border={2}
         rounded={false}
         className={cn(
-          "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[41px]",
+          "first:border-l-0 last:border-r-0 border-t-0 border-b-0 h-[40px]",
           "!py-2.5 !px-4",
           className,
         )}

src/components/DropdownMenu.tsx

@@ -81,7 +81,7 @@ const menuItemVariants = cva("", {
   variants: {
     variant: {
       default:
-        "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-gray-400 dark:data-[state=open]:bg-nb-gray-900 dark:data-[state=open]:text-gray-50",
+        "dark:focus:bg-nb-gray-900 dark:focus:text-gray-50 dark:text-nb-gray-300 dark:data-[state=open]:bg-nb-gray-900 dark:data-[state=open]:text-gray-50",
       danger:
         "dark:focus:bg-red-900/20 dark:focus:text-red-500 dark:text-red-500",
     },

src/components/HoverCard.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { TooltipVariants, tooltipVariants } from "./Tooltip";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> &
+    TooltipVariants
+>(
+  (
+    {
+      className = "px-4 py-2.5",
+      sideOffset = 7,
+      side = "top",
+      variant = "default",
+      ...props
+    },
+    ref,
+  ) => (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        ref={ref}
+        asChild={true}
+        side={side}
+        sideOffset={sideOffset}
+        className={cn(tooltipVariants({ variant }), className)}
+        {...props}
+      >
+        <div>{props.children}</div>
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
+  ),
+);
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

src/components/Label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const labelVariants = cva(
-  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1 inline-block dark:text-nb-gray-200 flex items-center gap-2",
+  "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1.5 inline-block dark:text-nb-gray-200 flex items-center gap-2",
 );
 
 const Label = React.forwardRef<

src/components/PeerGroupSelector.tsx

@@ -42,8 +42,8 @@ import { NetworkResource } from "@/interfaces/Network";
 import type { Peer } from "@/interfaces/Peer";
 import { PolicyRuleResource } from "@/interfaces/Policy";
 import { User } from "@/interfaces/User";
-import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
 import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
+import { PeerOperatingSystemIcon } from "@/modules/peers/PeerOperatingSystemIcon";
 
 const groupsSearchPredicate = (item: Group, query: string) => {
   const lowerCaseQuery = query.toLowerCase();
@@ -171,7 +171,15 @@ export function PeerGroupSelector({
     const groupResources: GroupResource[] | undefined =
       (group?.resources as GroupResource[]) || [];
 
-    if (peer) groupPeers?.push({ id: peer?.id as string, name: peer?.name });
+    if (peer) {
+      const peerInGroup = groupPeers?.find((p) => p?.id === peer?.id);
+      if (!peerInGroup) {
+        groupPeers?.push({
+          id: peer?.id as string,
+          name: peer?.name,
+        });
+      }
+    }
 
     if (!group && !option) {
       addDropdownOptions([
@@ -518,7 +526,7 @@ export function PeerGroupSelector({
                               />
                             </div>
 
-                            <div className={"flex items-center gap-5"}>
+                            <div className={"flex items-center gap-4"}>
                               {option?.id && showRoutes && (
                                 <AccessControlGroupCount group_id={option.id} />
                               )}
@@ -527,19 +535,12 @@ export function PeerGroupSelector({
                                 <ResourcesCounter group={option} />
                               )}
 
-                              <div className={"flex gap-3 items-center"}>
+                              <div className={"flex gap-4 items-center"}>
                                 {!users ? (
-                                  <div
-                                    className={
-                                      "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
-                                    }
-                                  >
-                                    <MonitorSmartphoneIcon
-                                      size={14}
-                                      className={"shrink-0"}
-                                    />
-                                    {peerCount} Peer(s)
-                                  </div>
+                                  <PeerCounter
+                                    group={option}
+                                    showResourceCounter={showResourceCounter}
+                                  />
                                 ) : (
                                   <UsersCounter
                                     group={option}
@@ -547,7 +548,6 @@ export function PeerGroupSelector({
                                     selected={isSelected}
                                   />
                                 )}
-
                                 <Checkbox checked={isSelected} />
                               </div>
                             </div>
@@ -663,7 +663,14 @@ const UsersCounter = ({
     users?.filter((user) => user.auto_groups.includes(group.id as string)) ||
     [];
 
-  if (usersOfGroup.length === 0) return null;
+  if (usersOfGroup.length === 0)
+    return (
+      <span
+        className={"group-hover/user-stack:text-nb-gray-200 text-nb-gray-300"}
+      >
+        0 User(s)
+      </span>
+    );
 
   return (
     <HorizontalUsersStack
@@ -678,6 +685,31 @@ const UsersCounter = ({
   );
 };
 
+const PeerCounter = ({
+  group,
+  showResourceCounter,
+}: {
+  group: Group;
+  showResourceCounter?: boolean;
+}) => {
+  const peerCount = group.peers?.length ?? group?.peers_count ?? 0;
+  const resourcesCount = group?.resources_count ?? 0;
+  const hidePeerCounter =
+    showResourceCounter && peerCount === 0 && resourcesCount > 0;
+
+  return (
+    <div
+      className={cn(
+        "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2",
+        hidePeerCounter && "hidden",
+      )}
+    >
+      <MonitorSmartphoneIcon size={14} className={"shrink-0"} />
+      {peerCount} Peer(s)
+    </div>
+  );
+};
+
 const ResourcesCounter = ({ group }: { group: Group }) => {
   return group?.resources_count && group.resources_count > 0 ? (
     <div

src/components/PortSelector.tsx

@@ -139,7 +139,11 @@ export function PortSelector({
                 <Badge
                   key={x}
                   variant={"gray"}
-                  onClick={() => toggle(x)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggle(x);
+                  }}
                   className={"uppercase tracking-wider font-medium py-1"}
                 >
                   {x}

src/components/Tabs.tsx

@@ -39,38 +39,43 @@ const Tabs = React.forwardRef<
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
 type TabListProps = {
+  hidden?: boolean;
   justify?: "start" | "end" | "center" | "between";
 };
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & TabListProps
->(({ className, justify = "center", ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "flex flex-nowrap text-neutral-500 dark:text-nb-gray-400 w-full relative",
-      className,
-      justify == "center" && "justify-center justify-items-end",
-      justify == "start" && "justify-start",
-      justify == "end" && "justify-end",
-      justify == "between" && "justify-between",
-    )}
-    {...props}
-  >
-    <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>
-));
+>(({ className, justify = "center", hidden = false, ...props }, ref) => {
+  return (
+    !hidden && (
+      <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+          "flex flex-nowrap text-neutral-500 dark:text-nb-gray-400 w-full relative",
+          className,
+          justify == "center" && "justify-center justify-items-end",
+          justify == "start" && "justify-start",
+          justify == "end" && "justify-end",
+          justify == "between" && "justify-between",
+        )}
+        {...props}
+      >
+        <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;
 
 const TabsTrigger = React.forwardRef<

src/components/Tooltip.tsx

@@ -22,14 +22,14 @@ export const tooltipVariants = cva(
     variants: {
       variant: {
         default: [
-          "bg-white dark:bg-nb-gray-940",
-          "text-neutral-950 dark:text-neutral-50",
-          "border-neutral-200 dark:border-nb-gray-930",
+          "bg-nb-gray-940",
+          "text-neutral-50",
+          "border-neutral-200 border-nb-gray-930",
         ],
         lighter: [
-          "bg-white dark:bg-nb-gray-920",
-          "text-neutral-950 dark:text-neutral-50",
-          "border-neutral-200 dark:border-nb-gray-900",
+          "bg-nb-gray-920",
+          "text-neutral-50",
+          "border-neutral-200 border-nb-gray-900",
         ],
       },
     },

src/components/skeletons/SkeletonTable.tsx

@@ -10,7 +10,7 @@ export default function SkeletonTable({ withHeader = true }: Readonly<Props>) {
   return (
     <div className={"w-full"}>
       {withHeader && <SkeletonTableHeader />}
-      <div className={"mt-6"}>
+      <div className={"mt-6 relative -top-1"}>
         <TableSkeletonRow />
         <TableSkeletonRow odd />
         <TableSkeletonRow />
@@ -68,7 +68,7 @@ export const SkeletonTableHeader = ({
   return (
     <div
       className={cn(
-        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between",
+        "flex gap-x-4 gap-y-6 p-default flex-wrap w-full justify-between relative -top-1",
         className,
       )}
     >

src/components/table/DataTable.tsx

@@ -133,6 +133,7 @@ interface DataTableProps<TData, TValue> {
   getStartedCard?: React.ReactNode;
   placeholders?: TData[];
   renderExpandedRow?: (row: TData) => React.ReactNode;
+  renderRow?: (row: TData, children: React.ReactNode) => React.ReactNode;
   minimal?: boolean;
   className?: string;
   inset?: boolean;
@@ -193,6 +194,7 @@ export function DataTable<TData, TValue>({
   onRowClick,
   getStartedCard,
   renderExpandedRow,
+  renderRow,
   minimal,
   className,
   tableClassName,
@@ -507,7 +509,7 @@ export function DataTable<TData, TValue>({
                 {table.getRowModel().rows?.length ? (
                   table.getRowModel().rows.map((row) => {
                     const expandedRow = renderExpandedRow?.(row.original);
-                    return (
+                    const rowContent = (
                       <AccordionItem
                         value={row.original.id}
                         asChild={true}
@@ -597,6 +599,8 @@ export function DataTable<TData, TValue>({
                         </>
                       </AccordionItem>
                     );
+
+                    return renderRow ? renderRow(row.original, rowContent) : rowContent;
                   })
                 ) : (
                   <TableRowUnstyledComponent>

src/components/table/DataTableMultiSelectPopup.tsx

@@ -0,0 +1,89 @@
+import Button from "@components/Button";
+import FullTooltip from "@components/FullTooltip";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { AnimatePresence, motion } from "framer-motion";
+import { MonitorSmartphoneIcon } from "lucide-react";
+import * as React from "react";
+
+type Props<T> = {
+  selectedItems?: T[];
+  label?: string;
+  onCanceled?: () => void;
+  rightSide?: React.ReactNode;
+};
+
+export function DataTableMultiSelectPopup<T>({
+  onCanceled,
+  label = "Peer(s) selected",
+  selectedItems,
+  rightSide,
+}: Props<T>) {
+  const count = selectedItems?.length || 0;
+  return (
+    <AnimatePresence>
+      {count > 0 && (
+        <div
+          className={"fixed -bottom-16 z-50 w-full left-0 pointer-events-none"}
+        >
+          <motion.div
+            exit={{
+              y: 100,
+            }}
+          >
+            <AnimatePresence>
+              <motion.div
+                animate={{ y: 0 }}
+                initial={{ y: 100 }}
+                exit={{ y: 100 }}
+                transition={{
+                  type: "spring",
+                  stiffness: 270,
+                  damping: 25,
+                  duration: 0.35,
+                }}
+                className={cn(
+                  "max-w-xl mx-auto border relative z-[50] bg-nb-gray-800 border-nb-gray-900 shadow-2xl border-b-0 overflow-hidden pointer-events-auto",
+                  "rounded-t-lg",
+                )}
+              >
+                <AnimatePresence mode={"popLayout"}>
+                  <div
+                    className={
+                      "flex gap-2 items-center text-sm px-6 pt-3.5 pb-20 bg-nb-gray-920/90 text-nb-gray-200 justify-between"
+                    }
+                  >
+                    <div className={"flex gap-2 items-center"}>
+                      <MonitorSmartphoneIcon size={16} className={""} />
+                      <span>
+                        <span className={"font-medium text-white"}>
+                          {count}
+                        </span>{" "}
+                        {label}
+                      </span>
+                    </div>
+                    <div className={"flex gap-2 items-center"}>
+                      {rightSide}
+                      <FullTooltip
+                        content={<span className={"text-xs"}>Cancel</span>}
+                      >
+                        <Button
+                          onClick={onCanceled}
+                          variant={"default-outline"}
+                          size={"xs"}
+                          className={"!h-9 !w-9"}
+                        >
+                          <IconX size={16} className={"shrink-0"} />
+                        </Button>
+                      </FullTooltip>
+                    </div>
+                  </div>
+                </AnimatePresence>
+              </motion.div>
+            </AnimatePresence>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/table/DataTableRefreshButton.tsx

@@ -35,7 +35,7 @@ export default function DataTableRefreshButton({ onClick, isDisabled }: Props) {
         }}
       >
         <Button
-          className={"h-[44px]"}
+          className={"h-[42px]"}
           variant={"secondary"}
           disabled={isDisabled == true ? true : disabled}
         >

src/components/table/DataTableResetFilterButton.tsx

@@ -36,7 +36,7 @@ export default function DataTableResetFilterButton<TData>({
           }}
         >
           <Button
-            className={"h-[44px]"}
+            className={"h-[42px]"}
             variant={"secondary"}
             onClick={onClick}
           >

src/components/ui/AddGroupButton.tsx

@@ -0,0 +1,115 @@
+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,
+  ModalTrigger,
+} from "@components/modal/Modal";
+import { ExternalLinkIcon, FolderGit2Icon, PlusCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useSWRConfig } from "swr";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
+import { useApiCall } from "@/utils/api";
+import ModalHeader from "../modal/ModalHeader";
+import { notify } from "../Notification";
+import Paragraph from "../Paragraph";
+import Separator from "../Separator";
+
+export const AddGroupButton = () => {
+  const create = useApiCall<Group>("/groups", true).post;
+  const { mutate } = useSWRConfig();
+  const [name, setName] = useState<string>("");
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const { permission } = usePermissions();
+
+  const createGroup = () => {
+    notify({
+      title: "Create Group",
+      description: `Group '${name}' successfully created`,
+      loadingMessage: "Creating group...",
+      promise: create({ name }).then((g) => {
+        setOpen(false);
+        setName("");
+        mutate("/groups");
+        router.push(`/group?id=${g?.id}`);
+      }),
+    });
+  };
+
+  return (
+    permission?.groups?.create && (
+      <Modal open={open} onOpenChange={setOpen}>
+        <ModalTrigger asChild>
+          <Button
+            variant={"primary"}
+            size={"sm"}
+            className={"ml-auto h-[42px]"}
+          >
+            <PlusCircle size={16} />
+            Create Group
+          </Button>
+        </ModalTrigger>
+        <ModalContent maxWidthClass={"max-w-xl"}>
+          <ModalHeader
+            icon={<FolderGit2Icon size={18} />}
+            title="Create Group"
+            description="Create a group to manage and organize access in your network"
+            color="netbird"
+          />
+          <Separator />
+          <div className={"px-8 flex-col flex gap-6 py-6"}>
+            <div>
+              <Label>Name</Label>
+              <HelpText>
+                Set an easily identifiable name for your group
+              </HelpText>
+              <Input
+                tabIndex={0}
+                placeholder={"e.g., Developers"}
+                value={name}
+                onChange={(e) => setName(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/manage-network-access"}
+                  target={"_blank"}
+                >
+                  Groups
+                  <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={createGroup}
+              >
+                <PlusCircle size={16} />
+                Create Group
+              </Button>
+            </div>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    )
+  );
+};

src/components/ui/GroupBadge.tsx

@@ -6,6 +6,7 @@ import { cn } from "@utils/helpers";
 import { XIcon } from "lucide-react";
 import * as React from "react";
 import { Group } from "@/interfaces/Group";
+import { useRouter } from "next/navigation";
 
 type Props = {
   group: Group;
@@ -17,6 +18,9 @@ type Props = {
   maxChars?: number;
   maxWidth?: string;
   hideTooltip?: boolean;
+  textClassName?: string;
+  redirectGroupTab?: string;
+  redirectToGroupPage?: boolean;
 };
 
 export default function GroupBadge({
@@ -29,19 +33,33 @@ export default function GroupBadge({
   maxChars = 20,
   maxWidth,
   hideTooltip = false,
+  textClassName,
+  redirectGroupTab,
+  redirectToGroupPage = false,
 }: Readonly<Props>) {
   const isNew = !group?.id;
+  const router = useRouter();
+
+  const handleGroupPageRedirect = () => {
+    if (!group?.id) return;
+    let redirectUrl = `/group?id=${group.id}`;
+    if (redirectGroupTab) {
+      redirectUrl += `&tab=${encodeURIComponent(redirectGroupTab)}`;
+    }
+    router.push(redirectUrl);
+  };
 
   return (
     <Badge
       key={group.id ?? group.name}
-      useHover={true}
+      useHover={!!onClick || redirectToGroupPage}
       data-cy={"group-badge"}
       variant={"gray-ghost"}
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={(e) => {
         e.preventDefault();
         onClick?.(e);
+        if (redirectToGroupPage) handleGroupPageRedirect();
       }}
     >
       <GroupBadgeIcon id={group?.id} issued={group?.issued} />
@@ -49,6 +67,7 @@ export default function GroupBadge({
         text={group?.name || ""}
         maxChars={maxChars}
         maxWidth={maxWidth}
+        className={textClassName}
         hideTooltip={hideTooltip}
       />
       {children}

src/components/ui/GroupBadgeIcon.tsx

@@ -2,7 +2,9 @@ import { FolderGit2 } from "lucide-react";
 import * as React from "react";
 import EntraIcon from "@/assets/icons/EntraIcon";
 import GoogleIcon from "@/assets/icons/GoogleIcon";
+import JumpcloudIcon from "@/assets/icons/JumpcloudIcon";
 import JWTIcon from "@/assets/icons/JWTIcon";
+import OIDCIcon from "@/assets/icons/OIDCIcon";
 import OktaIcon from "@/assets/icons/OktaIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { GroupIssued } from "@/interfaces/Group";
@@ -20,8 +22,14 @@ export const GroupBadgeIcon = ({
   const { groups } = useGroups();
   const group = groups?.find((g) => g.id === id);
 
-  const { isAzureGroup, isGoogleGroup, isOktaGroup, isJWTGroup } =
-    useGroupIdentification({ id, issued: issued ?? group?.issued });
+  const {
+    isAzureGroup,
+    isGoogleGroup,
+    isOktaGroup,
+    isJWTGroup,
+    isJumpcloudGroup,
+    isOIDCGroup,
+  } = useGroupIdentification({ id, issued: issued ?? group?.issued });
 
   if (isGoogleGroup)
     return <GoogleIcon size={size - 1} className={"shrink-0 mr-0.5"} />;
@@ -29,6 +37,10 @@ export const GroupBadgeIcon = ({
     return <EntraIcon size={size + 1} className={"shrink-0 mr-0.5"} />;
   if (isOktaGroup)
     return <OktaIcon size={size - 1} className={"shrink-0 mr-0.5"} />;
+  if (isJumpcloudGroup)
+    return <JumpcloudIcon size={size + 2} className={"shrink-0 mr-0.5"} />;
+  if (isOIDCGroup)
+    return <OIDCIcon size={size} className={"shrink-0 mr-0.5"} />;
   if (isJWTGroup) return <JWTIcon size={size} className={"shrink-0"} />;
 
   return <FolderGit2 size={size} className={"shrink-0"} />;

src/components/ui/InstallNetBirdButton.tsx

@@ -0,0 +1,21 @@
+import Button from "@components/Button";
+import { Modal, ModalTrigger } from "@components/modal/Modal";
+import { DownloadIcon } from "lucide-react";
+import React, { useState } from "react";
+import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
+
+export function InstallNetBirdButton() {
+  const [installModal, setInstallModal] = useState(false);
+
+  return (
+    <Modal open={installModal} onOpenChange={setInstallModal}>
+      <ModalTrigger asChild>
+        <Button variant={"secondary"} size={"sm"}>
+          <DownloadIcon size={16} />
+          Install NetBird
+        </Button>
+      </ModalTrigger>
+      <SetupModal />
+    </Modal>
+  );
+}

src/components/ui/MultipleGroups.tsx

@@ -1,19 +1,21 @@
 import Badge from "@components/Badge";
-import { ScrollArea } from "@components/ScrollArea";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@components/Tooltip";
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@components/HoverCard";
+import { ScrollArea } from "@components/ScrollArea";
 import GroupBadge from "@components/ui/GroupBadge";
-import PeerBadge from "@components/ui/PeerBadge";
+import PeerCountBadge from "@components/ui/PeerCountBadge";
+import ResourceCountBadge from "@components/ui/ResourceCountBadge";
 import { cn } from "@utils/helpers";
 import { ArrowRightIcon, PencilLineIcon } from "lucide-react";
 import * as React from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { useUsers } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
 import EmptyRow from "@/modules/common-table-rows/EmptyRow";
+import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
 
 type Props = {
   groups: Group[];
@@ -21,6 +23,9 @@ type Props = {
   description?: string;
   onClick?: () => void;
   className?: string;
+  showResources?: boolean;
+  redirectGroupTab?: string;
+  showUsers?: boolean;
 };
 
 export default function MultipleGroups({
@@ -29,6 +34,9 @@ export default function MultipleGroups({
   description = "Use groups to control what this peer can access",
   onClick,
   className,
+  showResources = false,
+  showUsers = false,
+  redirectGroupTab,
 }: Readonly<Props>) {
   const { permission } = usePermissions();
 
@@ -45,13 +53,9 @@ export default function MultipleGroups({
   const otherGroups = orderedGroups.length > 0 ? orderedGroups.slice(1) : [];
 
   return (
-    <TooltipProvider
-      disableHoverableContent={false}
-      delayDuration={200}
-      skipDelayDuration={200}
-    >
-      <Tooltip>
-        <TooltipTrigger asChild={true}>
+    <div className={"flex"}>
+      <HoverCard openDelay={200} closeDelay={100}>
+        <HoverCardTrigger>
           <div
             className={cn("inline-flex items-center gap-2 z-0", className)}
             data-cy={"multiple-groups"}
@@ -78,9 +82,9 @@ export default function MultipleGroups({
               </Badge>
             )}
           </div>
-        </TooltipTrigger>
+        </HoverCardTrigger>
         {orderedGroups && orderedGroups.length > 0 && (
-          <TooltipContent
+          <HoverCardContent
             className={"p-0"}
             onClick={(e) => e.stopPropagation()}
           >
@@ -102,19 +106,31 @@ export default function MultipleGroups({
                           "flex gap-2 items-center justify-between w-full"
                         }
                       >
-                        <GroupBadge group={group}></GroupBadge>
+                        <GroupBadge
+                          group={group}
+                          className={"py-0"}
+                          textClassName={"py-1.5"}
+                          redirectToGroupPage={true}
+                          redirectGroupTab={redirectGroupTab}
+                        ></GroupBadge>
                         <ArrowRightIcon size={14} />
-                        <PeerBadge> {group.peers_count} Peer(s)</PeerBadge>
+                        {showResources ? (
+                          <ResourceCountBadge group={group} />
+                        ) : showUsers ? (
+                          <UserCountStack group={group} />
+                        ) : (
+                          <PeerCountBadge group={group} />
+                        )}
                       </div>
                     )
                   );
                 })}
               </div>
             </ScrollArea>
-          </TooltipContent>
+          </HoverCardContent>
         )}
-      </Tooltip>
-    </TooltipProvider>
+      </HoverCard>
+    </div>
   );
 }
 
@@ -129,3 +145,17 @@ export const TransparentEditIconButton = () => {
     </div>
   );
 };
+
+export const UserCountStack = ({ group }: { group: Group }) => {
+  const { users } = useUsers();
+  const usersOfGroup =
+    users?.filter((user) => user.auto_groups.includes(group.id as string)) ||
+    [];
+  return (
+    <HorizontalUsersStack
+      users={usersOfGroup}
+      side={"right"}
+      isAllGroup={group?.name === "All"}
+    />
+  );
+};

src/components/ui/NoResultsCard.tsx

@@ -1,5 +1,6 @@
 import Card from "@components/Card";
 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";
@@ -9,15 +10,18 @@ type Props = {
   title?: string;
   description?: string;
   children?: React.ReactNode;
+  className?: string;
 };
+
 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,
+  className,
 }: Readonly<Props>) {
   return (
-    <div className={"px-8 mt-8"}>
+    <div className={cn("px-8 mt-8", className)}>
       <Card className={"w-full relative overflow-hidden"}>
         <div
           className={

src/components/ui/PeerCountBadge.tsx

@@ -0,0 +1,64 @@
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn, singularize } from "@utils/helpers";
+import { MonitorSmartphoneIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useMemo } from "react";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { Group } from "@/interfaces/Group";
+import ResourceCountBadge from "@components/ui/ResourceCountBadge";
+
+type Props = {
+  group?: Group;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+
+export default function PeerCountBadge({
+  group,
+  variant = "gray",
+  className,
+}: Props) {
+  const router = useRouter();
+  const { dropdownOptions } = 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 canRedirect = !!group?.id && group?.name !== "All";
+
+  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (canRedirect) router.push(`/group?id=${group?.id}&tab=peers`);
+  };
+
+  const resourcesCount = group?.resources_count ?? 0;
+  const showResources = resourcesCount > 0 && peerCount === 0;
+
+  return showResources ? (
+    <ResourceCountBadge group={group} />
+  ) : (
+    <Badge
+      variant={variant}
+      className={cn(
+        className,
+        "px-3 gap-2 whitespace-nowrap",
+        canRedirect && "cursor-pointer",
+      )}
+      onClick={onClick}
+      useHover={canRedirect}
+    >
+      <MonitorSmartphoneIcon size={12} />
+      {singularize("Peers", peerCount, true)}
+    </Badge>
+  );
+}

src/components/ui/PolicyDirection.tsx

@@ -2,7 +2,7 @@ import Badge from "@components/Badge";
 import { cn } from "@utils/helpers";
 import React, { useEffect, useMemo } from "react";
 import LongArrowLeftIcon from "@/assets/icons/LongArrowLeftIcon";
-import { PolicyRuleResource } from "@/interfaces/Policy";
+import { PolicyRuleResource, Protocol } from "@/interfaces/Policy";
 
 type Props = {
   disabled?: boolean;
@@ -10,6 +10,7 @@ type Props = {
   onChange: (value: Direction) => void;
   className?: string;
   destinationResource?: PolicyRuleResource;
+  protocol?: Protocol;
 };
 
 export type Direction = "bi" | "in" | "out";
@@ -20,8 +21,10 @@ export default function PolicyDirection({
   onChange,
   className,
   destinationResource,
+  protocol,
 }: Readonly<Props>) {
   const toggleDirection = () => {
+    if (protocol === "netbird-ssh") return;
     if (value == "bi") {
       onChange("in");
     } else {
@@ -30,9 +33,13 @@ export default function PolicyDirection({
   };
 
   useEffect(() => {
+    if (protocol === "netbird-ssh") {
+      onChange("in");
+      return;
+    }
     if (disabled) onChange("bi");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabled]);
+  }, [disabled, protocol]);
 
   const isNetworkResource =
     !!destinationResource && destinationResource?.type !== "peer";
@@ -67,7 +74,8 @@ export default function PolicyDirection({
     <button
       className={cn(
         "flex flex-col gap-2 mt-[23px] cursor-pointer select-none",
-        disabled && "opacity-50 pointer-events-none",
+        (disabled || protocol === "netbird-ssh") &&
+          "opacity-50 pointer-events-none",
         "hover:opacity-80 transition-all",
         className,
       )}

src/components/ui/ResourceCountBadge.tsx

@@ -0,0 +1,33 @@
+import Badge, { BadgeVariants } from "@components/Badge";
+import { cn, singularize } from "@utils/helpers";
+import { LayersIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { Group } from "@/interfaces/Group";
+
+type Props = {
+  group?: Group;
+} & React.HTMLAttributes<HTMLDivElement> &
+  BadgeVariants;
+
+export default function ResourceCountBadge({ group }: Props) {
+  const router = useRouter();
+  const hasId = !!group?.id;
+
+  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (hasId) router.push(`/group?id=${group?.id}&tab=resources`);
+  };
+
+  return (
+    <Badge
+      className={cn("px-3 gap-2 whitespace-nowrap", hasId && "cursor-pointer")}
+      variant={"gray"}
+      onClick={onClick}
+      useHover={hasId}
+    >
+      <LayersIcon size={12} />
+      {singularize("Resources", group?.resources_count, true)}
+    </Badge>
+  );
+}

src/components/ui/TruncatedText.tsx

@@ -1,4 +1,4 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
 import { cn } from "@utils/helpers";
 import React, { useMemo, useState } from "react";
 
@@ -55,38 +55,28 @@ export default function TruncatedText({
   }
 
   return (
-    <HoverCard.Root
-      openDelay={650}
-      closeDelay={100}
-      open={open}
-      onOpenChange={setOpen}
-    >
-      <HoverCard.Trigger asChild={true}>
+    <Tooltip delayDuration={650} open={open} onOpenChange={setOpen}>
+      <TooltipTrigger asChild={true}>
         <div className="w-full min-w-0 inline-block" style={containerStyle}>
           <div ref={contentRef} className={cn(className, "truncate")}>
             {text}
           </div>
         </div>
-      </HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          onMouseLeave={() => setOpen(false)}
-          onMouseEnter={() => setOpen(false)}
-          alignOffset={20}
-          sideOffset={4}
-          className={cn(
-            "z-[9999] overflow-hidden rounded-md border border-neutral-200 bg-white text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-nb-gray-930 dark:bg-nb-gray-940 dark:text-neutral-50",
-            className,
-            "px-3 py-1.5",
-          )}
-        >
-          <div className="text-neutral-300 flex flex-col gap-1">
-            <div className="max-w-xs break-all whitespace-normal text-xs">
-              {text}
-            </div>
+      </TooltipTrigger>
+      <TooltipContent
+        alignOffset={20}
+        sideOffset={4}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className={cn(className, "px-3 py-1.5")}
+      >
+        <div className="text-neutral-300 flex flex-col gap-1">
+          <div className="max-w-xs break-all whitespace-normal text-xs">
+            {text}
           </div>
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
+        </div>
+      </TooltipContent>
+    </Tooltip>
   );
 }

src/contexts/AnalyticsProvider.tsx

@@ -17,6 +17,12 @@ declare global {
   }
 }
 
+export type HubspotFormField = {
+  objectTypeId?: string;
+  name: string;
+  value: string;
+};
+
 const AnalyticsContext = React.createContext(
   {} as {
     initialized: boolean;

src/contexts/AnnouncementProvider.tsx

@@ -4,7 +4,18 @@ import md5 from "crypto-js/md5";
 import React, { useEffect, useState } from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 
-const initialAnnouncements: Announcement[] = [];
+const initialAnnouncements: Announcement[] = [
+  {
+    tag: "New",
+    text: "NetBird v0.60.0 - Identity-aware, private SSH over your NetBird network.",
+    link: "https://docs.netbird.io/how-to/ssh",
+    linkText: "Documentation",
+    variant: "default", // "default" or "important"
+    isExternal: true,
+    closeable: true,
+    isCloudOnly: false,
+  },
+];
 
 export interface Announcement extends AnnouncementVariant {
   tag: string;

src/contexts/GroupProvider.tsx

@@ -0,0 +1,335 @@
+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 { useGroups } from "@/contexts/GroupsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import { User } from "@/interfaces/User";
+import { EditGroupNameModal } from "@/modules/groups/EditGroupNameModal";
+import { useGroupIdentification } from "@/modules/groups/useGroupIdentification";
+
+type Props = {
+  group: Group;
+  children?: React.ReactNode;
+  isDetailPage?: boolean;
+};
+
+const GroupContext = React.createContext(
+  {} as {
+    group: Group;
+    deleteGroup: () => Promise<void>;
+    renameGroup: (name: string) => Promise<void>;
+    isRegularGroup: boolean;
+    isIntegrationGroup: boolean;
+    isJWTGroup: boolean;
+    isAllowedToDelete: boolean;
+    isAllowedToRename: boolean;
+    openGroupRenameModal?: () => void;
+    addPeersToGroup: (peers: Peer[]) => Promise<void>;
+    removePeersFromGroup: (peer: Peer[]) => Promise<void>;
+    addUsersToGroup: (users: User[]) => Promise<void>;
+    removeUsersFromGroup: (users: User[]) => Promise<void>;
+  },
+);
+
+export const GroupProvider = ({
+  group,
+  children,
+  isDetailPage = true,
+}: Props) => {
+  const { permission } = usePermissions();
+  const [groupNameModal, setGroupNameModal] = useState(false);
+  const { mutate } = useSWRConfig();
+  const { deleteGroupDropdownOption, updateGroupDropdown } = useGroups();
+  const groupRequest = useApiCall<Group>("/groups/" + group.id);
+  const userRequest = useApiCall<User>("/users");
+  const { confirm } = useDialog();
+  const { isRegularGroup, isIntegrationGroup, isJWTGroup } =
+    useGroupIdentification({
+      id: group?.id,
+      issued: group?.issued,
+    });
+
+  const isAllowedToRename = isRegularGroup && permission?.groups?.update;
+  const isAllowedToDelete = !isIntegrationGroup && permission?.groups?.delete;
+
+  const handleDelete = async () => {
+    if (!isAllowedToDelete) return Promise.reject("Not allowed to delete");
+
+    const promise = groupRequest.del().then(() => {
+      deleteGroupDropdownOption(group.name);
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+    });
+
+    notify({
+      title: "Delete Group " + group.name,
+      description: "Group successfully deleted",
+      promise,
+      loadingMessage: "Deleting group...",
+    });
+
+    return promise;
+  };
+
+  const deleteGroup = async () => {
+    const choice = await confirm({
+      title: `Delete '${group.name}'?`,
+      description:
+        "Are you sure you want to delete this group? This action cannot be undone.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+    if (!choice) return;
+    handleDelete().then();
+  };
+
+  const renameGroup = (name: string) => {
+    if (!isAllowedToRename) return Promise.reject("Not allowed to rename");
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const promise = groupRequest
+      .put({ ...group, peers: currentPeerIds, name })
+      .then(() => {
+        updateGroupDropdown(group.name, { ...group, name });
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: `Rename Group ${group.name}`,
+      description: "Group successfully renamed to " + name,
+      promise,
+      loadingMessage: "Renaming group...",
+    });
+
+    return promise;
+  };
+
+  const removePeersFromGroup = async (peers: Peer[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    const peer = peers.length === 1 ? peers[0] : undefined;
+
+    const choice = await confirm({
+      title: peer
+        ? `Remove peer '${peer.name}' from '${group.name}'?`
+        : `Remove peers from '${group.name}'?`,
+      description: peer
+        ? `Are you sure you want to remove this peer from the group? You can add it back later if needed.`
+        : `Are you sure you want to remove these peers from the group? You can add them back later if needed.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "warning",
+      maxWidthClass: "max-w-lg",
+    });
+
+    if (!choice) return Promise.resolve();
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const newPeerIds = currentPeerIds.filter((pid) => {
+      return !peers.find((peer) => peer.id === pid);
+    });
+    const promise = groupRequest
+      .put({ ...group, peers: newPeerIds })
+      .then(() => {
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: `Remove Peer from Group`,
+      description: peer
+        ? `Peer '${peer.name}' successfully removed from group '${group.name}'`
+        : `Peers successfully removed from group '${group.name}'`,
+      promise,
+      loadingMessage: peer
+        ? "Removing peer from group..."
+        : `Removing peers from group...`,
+    });
+
+    return promise;
+  };
+
+  const addPeersToGroup = async (peers: Peer[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+
+    const currentPeerIds =
+      group.peers?.map((p) => (typeof p === "string" ? p : p.id)) || [];
+    const newPeerIds = [...currentPeerIds, ...peers.map((peer) => peer.id)];
+
+    const uniquePeerIds = Array.from(new Set(newPeerIds));
+
+    const promise = groupRequest
+      .put({ ...group, peers: uniquePeerIds })
+      .then(() => {
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+      });
+
+    notify({
+      title: "Adding peers to group",
+      description: `Peers were successfully added to ${group.name}.`,
+      promise,
+      loadingMessage: "Adding peers to group...",
+    });
+
+    return promise;
+  };
+
+  const removeUserFromGroup = async (
+    user: User,
+    returnOnlyPromise?: boolean,
+  ) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+
+    const currentGroupIds = user.auto_groups?.map((g) => g) || [];
+    const newGroupIds = currentGroupIds.filter((gid) => gid !== group.id);
+    const promise = userRequest
+      .put({ ...user, auto_groups: newGroupIds }, `/${user.id}`)
+      .then(() => {
+        if (returnOnlyPromise) return;
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+        mutate("/users?service_user=false");
+      });
+
+    if (!returnOnlyPromise) {
+      notify({
+        title: `Remove User from Group ${group.name}`,
+        description: `User '${user.name}' was successfully removed from group '${group.name}'.`,
+        promise,
+        loadingMessage: "Removing user from group...",
+      });
+    }
+
+    return promise;
+  };
+
+  const removeUsersFromGroup = async (users: User[]) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+    let promises = users.map((user) => removeUserFromGroup(user, true));
+
+    const user = users.length === 1 ? users[0] : undefined;
+
+    const choice = await confirm({
+      title: user
+        ? `Remove user '${user?.name ?? user?.id}' from '${group.name}'?`
+        : `Remove users from '${group.name}'?`,
+      description: user
+        ? `Are you sure you want to remove this user from the group? You can add it back later if needed.`
+        : `Are you sure you want to remove these users from the group? You can add them back later if needed.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      type: "warning",
+      maxWidthClass: "max-w-lg",
+    });
+    if (!choice) return Promise.resolve();
+
+    const promise = Promise.all(promises).then(() => {
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+      mutate("/users?service_user=false");
+    });
+    notify({
+      title: `Remove Users from Group ${group.name}`,
+      description: `Users were successfully removed from group '${group.name}'.`,
+      promise,
+      loadingMessage: "Removing users from group...",
+    });
+    return promise;
+  };
+
+  const addUserToGroup = async (user: User, returnOnlyPromise?: boolean) => {
+    if (!permission?.groups?.update) return Promise.reject();
+    if (!permission?.users?.update) return Promise.reject();
+    const currentGroupIds = user.auto_groups?.map((g) => g) || [];
+    const newGroupIds = Array.from(new Set([...currentGroupIds, group.id]));
+    const promise = userRequest
+      .put({ ...user, auto_groups: newGroupIds }, `/${user.id}`)
+      .then(() => {
+        if (returnOnlyPromise) return;
+        if (isDetailPage) mutate(`/groups/${group.id}`);
+        mutate("/groups");
+        mutate("/users?service_user=false");
+      });
+    if (!returnOnlyPromise) {
+      notify({
+        title: `Add User to Group ${group.name}`,
+        description: `User '${user.name}' was successfully added to group '${group.name}'.`,
+        promise,
+        loadingMessage: "Adding user to group...",
+      });
+    }
+    return promise;
+  };
+
+  const addUsersToGroup = async (users: User[]) => {
+    let promises = users.map((user) => addUserToGroup(user, true));
+    const promise = Promise.all(promises).then(() => {
+      if (isDetailPage) mutate(`/groups/${group.id}`);
+      mutate("/groups");
+      mutate("/users?service_user=false");
+    });
+    notify({
+      title: `Add Users to Group ${group.name}`,
+      description: `Users were successfully added to group '${group.name}'.`,
+      promise,
+      loadingMessage: "Adding users to group...",
+    });
+    return promise;
+  };
+
+  const openGroupRenameModal = () => {
+    if (!isAllowedToRename) return;
+    setGroupNameModal(true);
+  };
+
+  return (
+    <GroupContext.Provider
+      value={{
+        group,
+        deleteGroup,
+        renameGroup,
+        isRegularGroup,
+        isIntegrationGroup,
+        isJWTGroup,
+        isAllowedToDelete,
+        isAllowedToRename,
+        openGroupRenameModal,
+        addPeersToGroup,
+        removePeersFromGroup,
+        addUsersToGroup,
+        removeUsersFromGroup,
+      }}
+    >
+      <EditGroupNameModal
+        initialName={group.name}
+        open={groupNameModal}
+        onOpenChange={setGroupNameModal}
+        onSuccess={(newName) =>
+          renameGroup(newName).then(() => {
+            setGroupNameModal(false);
+          })
+        }
+      />
+      {children}
+    </GroupContext.Provider>
+  );
+};
+
+export const useGroupContext = () => {
+  const context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error("useGroup must be used within a GroupProvider");
+  }
+  return context;
+};

src/contexts/GroupsProvider.tsx

@@ -20,6 +20,7 @@ const GroupContext = React.createContext(
     createOrUpdate: (group: Group) => Promise<Group>;
     reset: () => void;
     updateGroupDropdown: (oldGroupName: string, newGroup: Group) => void;
+    deleteGroupDropdownOption: (name: string) => void;
   },
 );
 
@@ -132,6 +133,13 @@ export function GroupsProviderContent({
     }
   };
 
+  const deleteGroupDropdownOption = (name: string) => {
+    setDropdownOptions((prev) => {
+      let updated = prev.filter((g) => g.name !== name);
+      return sortBy(updated, "name");
+    });
+  };
+
   return (
     <GroupContext.Provider
       value={{
@@ -144,6 +152,7 @@ export function GroupsProviderContent({
         createOrUpdate,
         reset,
         updateGroupDropdown,
+        deleteGroupDropdownOption,
       }}
     >
       {children}

src/contexts/PeerProvider.tsx

@@ -138,7 +138,11 @@ export default function PeerProvider({
         <PeerSSHInstructions
           open={sshInstructionsModal}
           onOpenChange={setSSHInstructionsModal}
-          onSuccess={() => toggleSSH(true)}
+          peer={peer}
+          onSuccess={() => {
+            mutate(`/peers/${peer.id}`);
+            setSSHInstructionsModal(false);
+          }}
         />
       )}
 

src/contexts/PoliciesProvider.tsx

@@ -1,7 +1,9 @@
+import { Modal } from "@components/modal/Modal";
 import { notify } from "@components/Notification";
 import { useApiCall } from "@utils/api";
-import React from "react";
+import React, { useState } from "react";
 import { Policy } from "@/interfaces/Policy";
+import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
 
 type Props = {
   children: React.ReactNode;
@@ -16,11 +18,15 @@ const PoliciesContext = React.createContext(
       message?: string,
     ) => void;
     createPolicy: (policy: Policy) => Promise<Policy>;
+    openEditPolicyModal: (policy: Policy, tab?: string) => void;
   },
 );
 
 export default function PoliciesProvider({ children }: Props) {
   const request = useApiCall<Policy>("/policies");
+  const [policyModal, setPolicyModal] = useState(false);
+  const [currentPolicy, setCurrentPolicy] = useState<Policy>();
+  const [initialPolicyTab, setInitialPolicyTab] = useState("");
 
   const createPolicy = async (policy: Policy) => request.post(policy);
 
@@ -56,9 +62,34 @@ export default function PoliciesProvider({ children }: Props) {
     });
   };
 
+  const openEditPolicyModal = (policy: Policy, tab?: string) => {
+    setCurrentPolicy(policy);
+    tab && setInitialPolicyTab(tab);
+    setPolicyModal(true);
+  };
+
   return (
-    <PoliciesContext.Provider value={{ updatePolicy, createPolicy }}>
+    <PoliciesContext.Provider
+      value={{ updatePolicy, createPolicy, openEditPolicyModal }}
+    >
       {children}
+      <Modal
+        open={policyModal}
+        onOpenChange={(state) => {
+          setPolicyModal(state);
+          setCurrentPolicy(undefined);
+        }}
+      >
+        <AccessControlModalContent
+          key={policyModal ? "1" : "0"}
+          policy={currentPolicy}
+          initialTab={initialPolicyTab}
+          onSuccess={async (p) => {
+            setPolicyModal(false);
+            setCurrentPolicy(undefined);
+          }}
+        />
+      </Modal>
     </PoliciesContext.Provider>
   );
 }

src/interfaces/Account.ts

@@ -22,5 +22,12 @@ export interface Account {
     dns_domain: string;
     network_range?: string;
     lazy_connection_enabled: boolean;
+    auto_update_version: string;
   };
+  onboarding?: AccountOnboarding;
+}
+
+export interface AccountOnboarding {
+  onboarding_flow_pending: boolean;
+  signup_form_pending: boolean;
 }

src/interfaces/Group.ts

@@ -26,3 +26,14 @@ export enum GroupIssued {
   INTEGRATION = "integration",
   JWT = "jwt",
 }
+
+export const GROUP_TOOLTIP_TEXT = {
+  RENAME: {
+    JWT: "This group is issued by JWT and cannot be renamed.",
+    INTEGRATION: "This group is issued by an IdP and cannot be renamed.",
+  },
+  DELETE: {
+    INTEGRATION: "This group is issued by an IdP and cannot be deleted.",
+  },
+  IN_USE: "Remove dependencies to this group to delete it.",
+};

src/interfaces/Nameserver.ts

@@ -104,50 +104,4 @@ export const NameserverPresets: Record<string, NameserverGroup> = {
     enabled: true,
     search_domains_enabled: false,
   },
-  DNS0: {
-    name: "DNS0.EU",
-    description: "DNS0.EU DNS Servers",
-    primary: true,
-    domains: [],
-    nameservers: [
-      {
-        ip: "193.110.81.0",
-        ns_type: "udp",
-        port: 53,
-        id: "1",
-      },
-      {
-        ip: "185.253.5.0",
-        ns_type: "udp",
-        port: 53,
-        id: "2",
-      },
-    ],
-    groups: [],
-    enabled: true,
-    search_domains_enabled: false,
-  },
-  DNS0Zero: {
-    name: "DNS0.EU Zero",
-    description: "DNS0.EU Zero DNS Servers",
-    primary: true,
-    domains: [],
-    nameservers: [
-      {
-        ip: "193.110.81.9",
-        ns_type: "udp",
-        port: 53,
-        id: "1",
-      },
-      {
-        ip: "185.253.5.9",
-        ns_type: "udp",
-        port: 53,
-        id: "2",
-      },
-    ],
-    groups: [],
-    enabled: true,
-    search_domains_enabled: false,
-  },
 };

src/interfaces/Network.ts

@@ -28,3 +28,7 @@ export interface NetworkResource {
   type?: "domain" | "host" | "subnet";
   enabled: boolean;
 }
+
+export interface NetworkResourceWithNetwork extends NetworkResource {
+  network: Network;
+}

src/interfaces/Peer.ts

@@ -24,9 +24,24 @@ export interface Peer {
   login_expiration_enabled: boolean;
   inactivity_expiration_enabled: boolean;
   approval_required: boolean;
+  disapproval_reason?: string;
   city_name: string;
   country_code: string;
   connection_ip: string;
   serial_number: string;
   ephemeral: boolean;
+  local_flags?: PeerLocalFlags;
+}
+
+export interface PeerLocalFlags {
+  block_inbound: boolean;
+  block_lan_access: boolean;
+  disable_client_routes: boolean;
+  disable_dns: boolean;
+  disable_firewall: boolean;
+  disable_server_routes: boolean;
+  lazy_connection_enabled: boolean;
+  rosenpass_enabled: boolean;
+  rosenpass_permissive: boolean;
+  server_ssh_allowed: boolean;
 }

src/interfaces/Policy.ts

@@ -25,8 +25,11 @@ export interface PolicyRule {
   port_ranges?: PortRange[];
   sourceResource?: PolicyRuleResource;
   destinationResource?: PolicyRuleResource;
+  authorized_groups?: AuthorizedGroups;
 }
 
+export type AuthorizedGroups = Record<string, string[]>; // group_id, local machine usernames
+
 export interface PortRange {
   start: number;
   end: number;
@@ -37,4 +40,4 @@ export interface PolicyRuleResource {
   type?: "domain" | "host" | "subnet" | "peer";
 }
 
-export type Protocol = "all" | "tcp" | "udp" | "icmp";
+export type Protocol = "all" | "tcp" | "udp" | "icmp" | "netbird-ssh";

src/layouts/DashboardLayout.tsx

@@ -5,6 +5,7 @@ import { useOidcUser } from "@axa-fr/react-oidc";
 import Button from "@components/Button";
 import { UserAvatar } from "@components/ui/UserAvatar";
 import { cn } from "@utils/helpers";
+import { isNetBirdHosted } from "@utils/netbird";
 import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
@@ -20,6 +21,7 @@ import GroupsProvider from "@/contexts/GroupsProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import UsersProvider from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
+import { OnboardingProvider } from "@/modules/onboarding/OnboardingProvider";
 import Header, { headerHeight } from "./Header";
 
 export default function DashboardLayout({
@@ -33,6 +35,7 @@ export default function DashboardLayout({
         <AnnouncementProvider>
           <GroupsProvider>
             <CountryProvider>
+              {!isNetBirdHosted() && <OnboardingProvider />}
               <DashboardPageContent>{children}</DashboardPageContent>
             </CountryProvider>
           </GroupsProvider>

src/layouts/Navigation.tsx

@@ -113,6 +113,12 @@ export default function Navigation({
                     exactPathMatch={true}
                     visible={permission.policies.read}
                   />
+                  <SidebarItem
+                    label="Groups"
+                    isChild
+                    href={"/groups"}
+                    visible={permission.policies.read}
+                  />
                   <SidebarItem
                     label="Posture Checks"
                     isChild

src/modules/access-control/AccessControlModal.tsx

@@ -39,17 +39,21 @@ import {
   Power,
   Share2,
   Shield,
+  SquareTerminalIcon,
   Text,
 } from "lucide-react";
 import React, { useMemo, useState } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
-import { Policy, Protocol } from "@/interfaces/Policy";
+import { Policy, PolicyRuleResource, Protocol } from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { useAccessControl } from "@/modules/access-control/useAccessControl";
 import { PostureCheckTab } from "@/modules/posture-checks/ui/PostureCheckTab";
 import { PostureCheckTabTrigger } from "@/modules/posture-checks/ui/PostureCheckTabTrigger";
+import { SSHAccessType } from "@/modules/access-control/ssh/SSHAccessType";
+import { SSHAuthorizedGroups } from "@/modules/access-control/ssh/SSHAuthorizedGroups";
+import { useUsers } from "@/contexts/UsersProvider";
 
 type Props = {
   children?: React.ReactNode;
@@ -116,6 +120,10 @@ type ModalProps = {
   postureCheckTemplates?: PostureCheck[];
   useSave?: boolean;
   allowEditPeers?: boolean;
+  initialProtocol?: Protocol;
+  initialPorts?: number[];
+  initialDestinationResource?: PolicyRuleResource;
+  initialTab?: string;
 };
 
 export function AccessControlModalContent({
@@ -128,8 +136,13 @@ export function AccessControlModalContent({
   initialDestinationGroups,
   initialName,
   initialDescription,
+  initialProtocol,
+  initialPorts,
+  initialDestinationResource,
+  initialTab,
 }: Readonly<ModalProps>) {
   const { permission } = usePermissions();
+  const { users } = useUsers();
 
   const {
     portDisabled,
@@ -163,6 +176,10 @@ export function AccessControlModalContent({
     portRanges,
     setPortRanges,
     hasPortSupport,
+    sshAccessType,
+    setSshAccessType,
+    sshAuthorizedGroups,
+    setSshAuthorizedGroups,
   } = useAccessControl({
     policy,
     postureCheckTemplates,
@@ -170,9 +187,13 @@ export function AccessControlModalContent({
     initialDestinationGroups,
     initialName,
     initialDescription,
+    initialPorts,
+    initialProtocol,
+    initialDestinationResource,
   });
 
   const [tab, setTab] = useState(() => {
+    if (initialTab && initialTab !== "") return initialTab;
     if (!cell) return "policy";
     if (cell == "posture_checks") return "posture_checks";
     return "policy";
@@ -239,10 +260,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"}
+              className={"flex justify-between items-center gap-10"}
               data-cy={"protocol-wrapper"}
             >
-              <div>
+              <div className={"w-full"}>
                 <Label>Protocol</Label>
                 <HelpText className={"max-w-sm"}>
                   Allow only specified network protocols. To change traffic
@@ -258,7 +279,7 @@ export function AccessControlModalContent({
                   !permission.policies.update || !permission.policies.create
                 }
               >
-                <SelectTrigger className="w-[140px]">
+                <SelectTrigger className="w-[280px]">
                   <div
                     className={"flex items-center gap-3"}
                     data-cy={"protocol-select-button"}
@@ -272,6 +293,7 @@ export function AccessControlModalContent({
                   <SelectItem value="tcp">TCP</SelectItem>
                   <SelectItem value="udp">UDP</SelectItem>
                   <SelectItem value="icmp">ICMP</SelectItem>
+                  <SelectItem value="netbird-ssh">NetBird SSH</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -286,14 +308,15 @@ export function AccessControlModalContent({
                   dataCy={"source-group-selector"}
                   popoverWidth={500}
                   placeholder={"Select source(s)..."}
-                  showRoutes={true}
+                  showRoutes={protocol !== "netbird-ssh"}
                   showResources={false}
-                  showPeers={true}
+                  showPeers={protocol !== "netbird-ssh"}
                   showResourceCounter={false}
                   showPeerCount={allowEditPeers}
                   disableInlineRemoveGroup={false}
                   values={sourceGroups}
                   onChange={setSourceGroups}
+                  users={protocol === "netbird-ssh" ? users : undefined}
                   resource={sourceResource}
                   onResourceChange={setSourceResource}
                   saveGroupAssignments={useSave}
@@ -306,6 +329,7 @@ export function AccessControlModalContent({
                 value={direction}
                 onChange={setDirection}
                 disabled={destinationOnlyResources}
+                protocol={protocol}
                 destinationResource={destinationResource}
               />
 
@@ -319,7 +343,7 @@ export function AccessControlModalContent({
                   popoverWidth={500}
                   placeholder={"Select destination(s)..."}
                   showRoutes={true}
-                  showResources={true}
+                  showResources={protocol !== "netbird-ssh"}
                   showPeers={true}
                   showResourceCounter={true}
                   showPeerCount={allowEditPeers}
@@ -354,33 +378,79 @@ export function AccessControlModalContent({
                 </Callout>
               )}
 
-            <div
-              className={cn(
-                "mb-2",
-                portDisabled && "opacity-30 pointer-events-none",
-              )}
-            >
+            {protocol === "netbird-ssh" ? (
               <div>
-                <Label className={"flex items-center gap-2"}>
-                  <Shield size={14} />
-                  Ports
-                </Label>
-                <HelpText>
-                  Allow network traffic and access only to specified ports.
-                  Select ports or port ranges between 1 and 65535.
-                </HelpText>
-              </div>
-              <div className={""}>
-                <PortSelector
-                  showAll={true}
-                  ports={ports}
-                  onPortsChange={setPorts}
-                  portRanges={portRanges}
-                  onPortRangesChange={setPortRanges}
-                  disabled={portDisabled}
+                {destinationHasResources && (
+                  <Callout
+                    variant={"warning"}
+                    icon={
+                      <AlertCircleIcon
+                        size={14}
+                        className={"shrink-0 relative top-[3px] text-netbird"}
+                      />
+                    }
+                    className="mb-6"
+                  >
+                    SSH access only works on peers, not on routed resources.
+                    Please ensure your destination groups contain peers for SSH
+                    connectivity.
+                  </Callout>
+                )}
+                <div
+                  className={"flex justify-between items-center gap-10 mt-2"}
+                >
+                  <div className={"w-full"}>
+                    <Label className={"flex items-center gap-2"}>
+                      <SquareTerminalIcon size={15} />
+                      SSH Access
+                    </Label>
+                    <HelpText>
+                      Select {`'Full Access'`} to allow SSH as any local user,
+                      or {`'Limited Access'`} to specify which local users each
+                      group is allowed to use.
+                    </HelpText>
+                  </div>
+                  <SSHAccessType
+                    value={sshAccessType}
+                    onChange={setSshAccessType}
+                  />
+                </div>
+                <SSHAuthorizedGroups
+                  sourceGroups={sourceGroups}
+                  authorizedGroups={sshAuthorizedGroups}
+                  setAuthorizedGroups={setSshAuthorizedGroups}
+                  accessType={sshAccessType}
                 />
               </div>
-            </div>
+            ) : (
+              <div
+                className={cn(
+                  "mb-2 mt-2",
+                  portDisabled && "opacity-30 pointer-events-none",
+                )}
+              >
+                <div>
+                  <Label className={"flex items-center gap-2"}>
+                    <Shield size={14} />
+                    Ports
+                  </Label>
+                  <HelpText>
+                    Allow network traffic and access only to specified ports.
+                    Select ports or port ranges between 1 and 65535.
+                  </HelpText>
+                </div>
+                <div className={""}>
+                  <PortSelector
+                    showAll={true}
+                    ports={ports}
+                    onPortsChange={setPorts}
+                    portRanges={portRanges}
+                    onPortRangesChange={setPortRanges}
+                    disabled={portDisabled}
+                  />
+                </div>
+              </div>
+            )}
 
             <FancyToggleSwitch
               value={enabled}

src/modules/access-control/ssh/SSHAccessType.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Dispatch, SetStateAction } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@components/Select";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { ShieldHalfIcon, ShieldUserIcon } from "lucide-react";
+
+type Props = {
+  value: "full" | "limited";
+  onChange: Dispatch<SetStateAction<"full" | "limited">>;
+};
+
+export const SSHAccessType = ({ value, onChange }: Props) => {
+  const { permission } = usePermissions();
+
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange(v as "full" | "limited")}
+      disabled={!permission?.policies?.update || !permission?.policies?.create}
+    >
+      <SelectTrigger className="w-[280px]">
+        <div
+          className={"flex items-center gap-3"}
+          data-cy={"protocol-select-button"}
+        >
+          {value === "full" ? (
+            <ShieldUserIcon size={15} className={"text-nb-gray-300 shrink-0"} />
+          ) : (
+            <ShieldHalfIcon size={15} className={"text-nb-gray-300 shrink-0"} />
+          )}
+          <SelectValue placeholder="Select ssh access type..." />
+        </div>
+      </SelectTrigger>
+      <SelectContent data-cy={"ssh-access-selection"}>
+        <SelectItem value="full" className={"whitespace-nowrap"}>
+          Full Access
+        </SelectItem>
+        <SelectItem value="limited" className={"whitespace-nowrap"}>
+          Limited Access
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};

src/modules/access-control/ssh/SSHAuthorizedGroups.tsx

@@ -0,0 +1,139 @@
+import { InfoIcon } from "lucide-react";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { Group } from "@/interfaces/Group";
+import { AuthorizedGroups } from "@/interfaces/Policy";
+import GroupBadge from "@components/ui/GroupBadge";
+import { HorizontalUsersStack } from "@/modules/users/HorizontalUsersStack";
+import { useUsers } from "@/contexts/UsersProvider";
+import { cn } from "@utils/helpers";
+import { Callout } from "@components/Callout";
+import { SSHUsernameSelector } from "@/modules/access-control/ssh/SSHUsernameSelector";
+
+type Props = {
+  sourceGroups?: Group[];
+  accessType?: "full" | "limited";
+  authorizedGroups?: AuthorizedGroups;
+  setAuthorizedGroups?: (authorizedGroups: AuthorizedGroups) => void;
+};
+
+export function SSHAuthorizedGroups({
+  sourceGroups,
+  authorizedGroups,
+  setAuthorizedGroups,
+  accessType,
+}: Props) {
+  const isEmpty =
+    !authorizedGroups || Object.keys(authorizedGroups).length === 0;
+
+  useEffect(() => {
+    if (sourceGroups) {
+      let groupsMap: AuthorizedGroups = {};
+      sourceGroups.forEach((sourceGroup) => {
+        if (!sourceGroup?.name) return;
+
+        const groupId = sourceGroup?.id;
+        if (groupId) {
+          groupsMap[sourceGroup.name] = authorizedGroups?.[groupId] || [];
+        } else {
+          groupsMap[sourceGroup.name] = [];
+        }
+      });
+      setAuthorizedGroups?.(groupsMap);
+    }
+  }, [sourceGroups]);
+
+  const handleUserNamesChange = useCallback(
+    (groupName: string, values: string[]) => {
+      setAuthorizedGroups?.({
+        ...authorizedGroups,
+        [groupName]: values || [],
+      });
+    },
+    [authorizedGroups, setAuthorizedGroups],
+  );
+
+  if (accessType === "full") return;
+
+  if ((accessType === "limited" && isEmpty) || !authorizedGroups) {
+    return (
+      <Callout
+        variant={"info"}
+        icon={<InfoIcon size={14} className={"shrink-0 relative top-[3px]"} />}
+        className="mt-3 py-[.75rem]"
+      >
+        You have not added any source groups yet, please add source groups in
+        order to specify which user group has access to which system users on
+        the destination machines.
+      </Callout>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-md overflow-hidden mt-3 py-2",
+        "border border-nb-gray-900 bg-nb-gray-920/30",
+      )}
+    >
+      {Object.entries(authorizedGroups).map(([groupName, usernames]) => (
+        <AuthorizedUserRow
+          key={groupName}
+          groupName={groupName}
+          usernames={usernames}
+          sourceGroups={sourceGroups}
+          handleUserNamesChange={(values) =>
+            handleUserNamesChange(groupName, values)
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+type RowProps = {
+  sourceGroups?: Group[];
+  groupName: string;
+  usernames: string[];
+  handleUserNamesChange: (usernames: string[]) => void;
+};
+
+function AuthorizedUserRow({
+  sourceGroups,
+  usernames,
+  groupName,
+  handleUserNamesChange,
+}: RowProps) {
+  const { users } = useUsers();
+
+  const group = useMemo(
+    () => sourceGroups?.find((g) => g.name === groupName),
+    [sourceGroups, groupName],
+  );
+
+  const usersOfGroup = useMemo(
+    () =>
+      users?.filter((user) => user.auto_groups.includes(group?.id || "")) || [],
+    [users, group],
+  );
+
+  return (
+    group && (
+      <div className="flex gap-6 w-full items-center py-2 px-4">
+        <div className={"flex items-center gap-2 col-span-3"}>
+          <GroupBadge group={group} showNewBadge={true} />
+          <HorizontalUsersStack users={usersOfGroup} />
+        </div>
+        <div
+          className={
+            "flex items-center gap-4 min-w-[340px] max-w-[340px] ml-auto"
+          }
+        >
+          <SSHUsernameSelector
+            onChange={handleUserNamesChange}
+            values={usernames}
+          />
+        </div>
+      </div>
+    )
+  );
+}

src/modules/access-control/ssh/SSHUsernameSelector.tsx

@@ -0,0 +1,261 @@
+import Badge from "@components/Badge";
+import { Callout } from "@components/Callout";
+import { Checkbox } from "@components/Checkbox";
+import { CommandItem } from "@components/Command";
+import { DropdownInfoText } from "@components/DropdownInfoText";
+import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
+import { IconArrowBack } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { Command, CommandGroup, CommandInput, CommandList } from "cmdk";
+import { trim } from "lodash";
+import {
+  ChevronsUpDown,
+  CircleUserIcon,
+  SearchIcon,
+  XIcon,
+} from "lucide-react";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useElementSize } from "@/hooks/useElementSize";
+import { PostureCheck } from "@/interfaces/PostureCheck";
+
+interface MultiSelectProps {
+  values?: string[];
+  onChange: (value: string[]) => void;
+  disabled?: boolean;
+  popoverWidth?: "auto" | number;
+}
+
+export function SSHUsernameSelector({
+  values,
+  onChange,
+  disabled = false,
+  popoverWidth = "auto",
+}: Readonly<MultiSelectProps>) {
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
+  const [search, setSearch] = useState("");
+
+  const toggle = (value: string) => {
+    if (disabled) return;
+
+    const previous = values || [];
+    if (previous.includes(value)) {
+      onChange(previous.filter((item) => item !== value));
+    } else {
+      onChange([...previous, value]);
+    }
+
+    setSearch("");
+  };
+
+  const notFound = useMemo(() => {
+    const isSearching = search.length > 0;
+    const trimmed = trim(search);
+    return trimmed && !values?.includes(trimmed) && isSearching;
+  }, [search, values]);
+
+  return (
+    <>
+      <Popover
+        open={open}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            setTimeout(() => {
+              setSearch("");
+            }, 100);
+          }
+          setOpen(isOpen);
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            className={cn(
+              "min-h-[42px] w-full relative items-center",
+              "border border-neutral-200 dark:border-nb-gray-700 justify-between py-1.5 px-2.5",
+              "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={"ssh-username-selector"}
+            disabled={disabled}
+            ref={inputRef}
+          >
+            <div
+              className={
+                "flex items-center gap-2 border-nb-gray-700 flex-wrap h-full"
+              }
+            >
+              {values?.length === 0 && (
+                <Badge variant={"gray"} className={"font-normal py-1"}>
+                  <CircleUserIcon size={12} className={"shrink-0"} />
+                  All Local Users
+                </Badge>
+              )}
+
+              {values?.map((user) => (
+                <Badge
+                  key={user}
+                  variant={"gray"}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggle(user);
+                  }}
+                  className={"font-normal py-1"}
+                >
+                  {user}
+                  <XIcon
+                    size={12}
+                    className={"cursor-pointer group-hover:text-black"}
+                  />
+                </Badge>
+              ))}
+            </div>
+
+            <ChevronsUpDown size={18} className={"shrink-0"} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-full p-0 shadow-sm  shadow-nb-gray-950"
+          style={{
+            width: popoverWidth === "auto" ? width : popoverWidth,
+          }}
+          align="start"
+          side={"top"}
+          sideOffset={10}
+        >
+          <Command
+            className={"w-full flex"}
+            loop
+            filter={(value, search) => {
+              const formatValue = trim(value.toLowerCase());
+              const formatSearch = trim(search.toLowerCase());
+              if (formatValue.includes(formatSearch)) return 1;
+              return 0;
+            }}
+          >
+            <CommandList className={"w-full"}>
+              <div className={"relative"}>
+                <CommandInput
+                  className={cn(
+                    "min-h-[42px] w-full relative",
+                    "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
+                    "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
+                    "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
+                  )}
+                  data-cy={"ssh-username-input"}
+                  ref={searchRef}
+                  value={search}
+                  onValueChange={setSearch}
+                  placeholder={"E.g., root, ec2-user, ubuntu"}
+                />
+                <div
+                  className={
+                    "absolute left-0 top-0 h-full flex items-center pl-4"
+                  }
+                >
+                  <div className={"flex items-center"}>
+                    <SearchIcon size={14} />
+                  </div>
+                </div>
+                <div
+                  className={
+                    "absolute right-0 top-0 h-full flex items-center pr-4"
+                  }
+                >
+                  <div
+                    className={
+                      "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
+                    }
+                  >
+                    <IconArrowBack size={10} />
+                  </div>
+                </div>
+              </div>
+
+              <div
+                className={cn(
+                  "flex flex-col gap-2",
+                  values?.length != 0 && "p-2",
+                  values?.length != 0 && search && "p-2",
+                )}
+              >
+                {notFound && (
+                  <CommandGroup>
+                    <div
+                      className={cn(
+                        "max-h-[180px] overflow-y-auto flex flex-col gap-1",
+                      )}
+                    >
+                      <CommandItem
+                        key={search}
+                        onSelect={() => {
+                          toggle(search);
+                          searchRef.current?.focus();
+                        }}
+                        value={search}
+                        onClick={(e) => e.preventDefault()}
+                      >
+                        <Badge variant={"gray"} className={"font-normal py-1"}>
+                          {search}
+                        </Badge>
+                        <div
+                          className={"text-neutral-500 dark:text-nb-gray-300"}
+                        >
+                          Add username by pressing{" "}
+                          <span className={"font-bold text-netbird"}>
+                            {"'Enter'"}
+                          </span>
+                        </div>
+                      </CommandItem>
+                    </div>
+                  </CommandGroup>
+                )}
+
+                <CommandGroup>
+                  <div
+                    className={cn(
+                      "max-h-[180px] overflow-y-auto flex flex-col gap-1",
+                    )}
+                  >
+                    {values?.map((user) => {
+                      const isSelected = values?.includes(user);
+                      return (
+                        <CommandItem
+                          key={user}
+                          value={user.toString()}
+                          onSelect={() => {
+                            toggle(user);
+                            searchRef.current?.focus();
+                          }}
+                          onClick={(e) => e.preventDefault()}
+                        >
+                          <div className={"flex items-center gap-2"}>
+                            <Badge
+                              variant={"gray"}
+                              className={"font-normal py-1"}
+                            >
+                              {user}
+                            </Badge>
+                          </div>
+
+                          <div
+                            className={
+                              "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-2"
+                            }
+                          >
+                            <Checkbox checked={isSelected} />
+                          </div>
+                        </CommandItem>
+                      );
+                    })}
+                  </div>
+                </CommandGroup>
+              </div>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

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

@@ -37,6 +37,9 @@ export default function AccessControlActiveCell({ policy }: Readonly<Props>) {
       if (rule.destinationResource) {
         rule.destinations = null;
       }
+      if (rule.sourceResource) {
+        rule.sources = null;
+      }
     });
 
     updatePolicy(

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

@@ -1,5 +1,9 @@
-import MultipleGroups from "@components/ui/MultipleGroups";
+import MultipleGroups, {
+  TransparentEditIconButton,
+} from "@components/ui/MultipleGroups";
+import { cn } from "@utils/helpers";
 import React, { useMemo } from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
 import { Policy } from "@/interfaces/Policy";
 import { AccessControlResourceCell } from "@/modules/access-control/table/AccessControlResourceCell";
@@ -8,9 +12,13 @@ import EmptyRow from "@/modules/common-table-rows/EmptyRow";
 type Props = {
   policy: Policy;
 };
+
 export default function AccessControlDestinationsCell({
   policy,
 }: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const canUpdate = permission?.policies?.update;
+
   const firstRule = useMemo(() => {
     if (policy.rules.length > 0) return policy.rules[0];
     return undefined;
@@ -23,7 +31,10 @@ export default function AccessControlDestinationsCell({
   }
 
   return firstRule ? (
-    <MultipleGroups groups={firstRule.destinations as Group[]} />
+    <div className={cn("flex items-center gap-1", canUpdate && "group")}>
+      <MultipleGroups groups={firstRule.destinations as Group[]} />
+      {canUpdate && <TransparentEditIconButton />}
+    </div>
   ) : (
     <EmptyRow />
   );

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

@@ -16,7 +16,9 @@ export default function AccessControlDirectionCell({
   }, [policy]);
 
   const bidirectional = firstRule ? firstRule.bidirectional : false;
-  const isSingleResource = !!firstRule?.destinationResource;
+  const isSingleResource =
+    !!firstRule?.destinationResource &&
+    firstRule?.destinationResource?.type !== "peer";
 
   return (
     <div className={"flex h-full"}>

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

@@ -5,9 +5,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/Tooltip";
-import { orderBy } from "lodash";
 import React, { useMemo } from "react";
 import { Policy } from "@/interfaces/Policy";
+import { parsePortsToStrings } from "@/modules/access-control/useAccessControl";
 
 type Props = {
   policy: Policy;
@@ -23,19 +23,7 @@ export default function AccessControlPortsCell({ policy }: Readonly<Props>) {
   const hasPortRanges = rule?.port_ranges && rule?.port_ranges?.length > 0;
   const hasAnyPorts = hasPorts || hasPortRanges;
 
-  const allPorts = useMemo(() => {
-    const ports = rule?.ports ?? [];
-    const portRanges =
-      rule?.port_ranges?.map((r) => {
-        if (r.start === r.end) return `${r.start}`;
-        return `${r.start}-${r.end}`;
-      }) ?? [];
-    return orderBy(
-      [...portRanges, ...ports],
-      [(p) => Number(p.split("-")[0])],
-      ["asc"],
-    );
-  }, [rule]);
+  const allPorts = useMemo(() => parsePortsToStrings(rule), [rule]);
 
   const firstTwoPorts = useMemo(() => {
     return allPorts?.slice(0, 2) ?? [];

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

@@ -1,5 +1,9 @@
-import MultipleGroups from "@components/ui/MultipleGroups";
+import MultipleGroups, {
+  TransparentEditIconButton,
+} from "@components/ui/MultipleGroups";
+import { cn } from "@utils/helpers";
 import React, { useMemo } from "react";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
 import { Policy } from "@/interfaces/Policy";
 import { AccessControlResourceCell } from "@/modules/access-control/table/AccessControlResourceCell";
@@ -8,7 +12,11 @@ import EmptyRow from "@/modules/common-table-rows/EmptyRow";
 type Props = {
   policy: Policy;
 };
+
 export default function AccessControlSourcesCell({ policy }: Props) {
+  const { permission } = usePermissions();
+  const canUpdate = permission?.policies?.update;
+
   const firstRule = useMemo(() => {
     if (policy.rules.length > 0) return policy.rules[0];
     return undefined;
@@ -19,7 +27,13 @@ export default function AccessControlSourcesCell({ policy }: Props) {
   }
 
   return firstRule ? (
-    <MultipleGroups groups={firstRule.sources as Group[]} />
+    <div className={cn("flex items-center gap-1", canUpdate && "group")}>
+      <MultipleGroups
+        groups={firstRule.sources as Group[]}
+        showUsers={firstRule.protocol === "netbird-ssh"}
+      />
+      {canUpdate && <TransparentEditIconButton />}
+    </div>
   ) : (
     <EmptyRow />
   );

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

@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import ButtonGroup from "@components/ButtonGroup";
+import Card from "@components/Card";
 import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
@@ -15,6 +16,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
+import NoResults from "@/components/ui/NoResults";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import type { Policy } from "@/interfaces/Policy";
@@ -35,6 +37,7 @@ type Props = {
   policies?: Policy[];
   isLoading: boolean;
   headingTarget?: HTMLHeadingElement | null;
+  isGroupPage?: boolean;
 };
 
 export const AccessControlTableColumns: ColumnDef<Policy>[] = [
@@ -179,12 +182,13 @@ export default function AccessControlTable({
   policies,
   isLoading,
   headingTarget,
+  isGroupPage,
 }: Readonly<Props>) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
   const { permission } = usePermissions();
   const params = useSearchParams();
-  const idParam = params.get("id") ?? undefined;
+  const idParam = !isGroupPage ? params.get("id") : undefined;
 
   // Default sorting state of the table
   const [sorting, setSorting] = useLocalStorage<SortingState>(
@@ -195,6 +199,7 @@ export default function AccessControlTable({
         desc: true,
       },
     ],
+    !isGroupPage,
   );
 
   const [editModal, setEditModal] = useState(false);
@@ -249,7 +254,13 @@ export default function AccessControlTable({
       <DataTable
         headingTarget={headingTarget}
         isLoading={isLoading}
-        keepStateInLocalStorage={!idParam}
+        wrapperComponent={isGroupPage ? Card : undefined}
+        wrapperProps={isGroupPage ? { className: "mt-6 w-full" } : undefined}
+        paginationPaddingClassName={isGroupPage ? "px-0 pt-8" : undefined}
+        tableClassName={isGroupPage ? "mt-0 mb-2" : undefined}
+        inset={!isGroupPage}
+        minimal={isGroupPage}
+        keepStateInLocalStorage={!isGroupPage || !idParam}
         initialSearch={idParam ? "" : undefined}
         initialFilters={
           idParam
@@ -278,25 +289,22 @@ export default function AccessControlTable({
         }}
         searchPlaceholder={"Search by name and description..."}
         getStartedCard={
-          <GetStartedTest
-            icon={
-              <SquareIcon
-                icon={
-                  <AccessControlIcon className={"fill-nb-gray-200"} size={20} />
-                }
-                color={"gray"}
-                size={"large"}
-              />
-            }
-            title={"Create New Policy"}
-            description={
-              "It looks like you don't have any policies yet. Policies can allow connections by specific protocol and ports."
-            }
-            button={
+          isGroupPage ? (
+            <NoResults
+              className={"py-4"}
+              title={"This group is not used within any policies yet"}
+              description={
+                "Assign this group as either a source or destination inside a policy to see them listed here."
+              }
+              icon={
+                <AccessControlIcon size={20} className={"fill-nb-gray-300"} />
+              }
+            >
               <div className={"flex gap-4 items-center justify-center"}>
                 <AccessControlModal>
                   <Button
                     variant={"primary"}
+                    className={"mt-4"}
                     disabled={!permission.policies.create}
                   >
                     <PlusCircle size={16} />
@@ -304,25 +312,59 @@ export default function AccessControlTable({
                   </Button>
                 </AccessControlModal>
               </div>
-            }
-            learnMore={
-              <>
-                Learn more about
-                <InlineLink
-                  href={"https://docs.netbird.io/how-to/manage-network-access"}
-                  target={"_blank"}
-                >
-                  Access Controls
-                  <ExternalLinkIcon size={12} />
-                </InlineLink>
-              </>
-            }
-          />
+            </NoResults>
+          ) : (
+            <GetStartedTest
+              icon={
+                <SquareIcon
+                  icon={
+                    <AccessControlIcon
+                      className={"fill-nb-gray-200"}
+                      size={20}
+                    />
+                  }
+                  color={"gray"}
+                  size={"large"}
+                />
+              }
+              title={"Create New Policy"}
+              description={
+                "It looks like you don't have any policies yet. Policies can allow connections by specific protocol and ports."
+              }
+              button={
+                <div className={"flex gap-4 items-center justify-center"}>
+                  <AccessControlModal>
+                    <Button
+                      variant={"primary"}
+                      disabled={!permission.policies.create}
+                    >
+                      <PlusCircle size={16} />
+                      Add Policy
+                    </Button>
+                  </AccessControlModal>
+                </div>
+              }
+              learnMore={
+                <>
+                  Learn more about
+                  <InlineLink
+                    href={
+                      "https://docs.netbird.io/how-to/manage-network-access"
+                    }
+                    target={"_blank"}
+                  >
+                    Access Controls
+                    <ExternalLinkIcon size={12} />
+                  </InlineLink>
+                </>
+              }
+            />
+          )
         }
         rightSide={() => (
           <>
             {policies && policies?.length > 0 && (
-              <div className={"flex ml-auto gap-4"}>
+              <div className={"flex items-center ml-auto"}>
                 <AccessControlModal>
                   <Button
                     variant={"primary"}

src/modules/access-control/useAccessControl.ts

@@ -1,12 +1,19 @@
 import { notify } from "@components/Notification";
 import { Direction } from "@components/ui/PolicyDirection";
 import useFetchApi, { useApiCall } from "@utils/api";
-import { merge, uniqBy } from "lodash";
+import { merge, orderBy, 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, PortRange, Protocol } from "@/interfaces/Policy";
+import {
+  AuthorizedGroups,
+  Policy,
+  PolicyRule,
+  PolicyRuleResource,
+  PortRange,
+  Protocol,
+} from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { usePostureCheck } from "@/modules/posture-checks/usePostureCheck";
@@ -18,6 +25,9 @@ type Props = {
   initialDestinationGroups?: Group[] | string[];
   initialName?: string;
   initialDescription?: string;
+  initialProtocol?: Protocol;
+  initialPorts?: number[];
+  initialDestinationResource?: PolicyRuleResource;
 };
 
 // TODO add reducer
@@ -29,6 +39,9 @@ export const useAccessControl = ({
   initialName,
   initialDescription,
   onSuccess,
+  initialProtocol,
+  initialPorts,
+  initialDestinationResource,
 }: Props = {}) => {
   const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
@@ -75,6 +88,7 @@ export const useAccessControl = ({
   const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
 
   const [ports, setPorts] = useState<number[]>(() => {
+    if (initialPorts) return initialPorts;
     if (!firstRule) return [];
     if (firstRule.ports == undefined) return [];
     if (firstRule.ports.length > 0) {
@@ -93,7 +107,7 @@ export const useAccessControl = ({
   });
 
   const [protocol, setProtocol] = useState<Protocol>(
-    firstRule ? firstRule.protocol : "all",
+    firstRule ? firstRule.protocol : initialProtocol ?? "all",
   );
   const [direction, setDirection] = useState<Direction>(() => {
     if (!firstRule) return "bi";
@@ -131,9 +145,24 @@ export const useAccessControl = ({
   );
 
   const [destinationResource, setDestinationResource] = useState(
-    firstRule?.destinationResource,
+    firstRule?.destinationResource ?? initialDestinationResource,
   );
 
+  const [sshAccessType, setSshAccessType] = useState<"full" | "limited">(() => {
+    if (protocol === "netbird-ssh") {
+      return firstRule?.authorized_groups !== undefined &&
+        Object.keys(firstRule?.authorized_groups).length > 0
+        ? "limited"
+        : "full";
+    } else {
+      return "full";
+    }
+  });
+
+  const [sshAuthorizedGroups, setSshAuthorizedGroups] = useState<
+    AuthorizedGroups | undefined
+  >(firstRule?.authorized_groups);
+
   const { updateOrCreateAndNotify: checkToCreate } = usePostureCheck({});
   const createPostureChecksWithoutID = async () => {
     const checks = postureChecks.filter(
@@ -176,6 +205,7 @@ export const useAccessControl = ({
           enabled,
           ports: newPorts,
           port_ranges: newPortRanges,
+          authorized_groups: sshAuthorizedGroups,
         },
       ],
     } as Policy;
@@ -226,10 +256,34 @@ export const useAccessControl = ({
       destinations = tmp;
     }
 
-    const [newPorts, newPortRanges] = parseAccessControlPorts(
-      ports,
-      portRanges,
-    );
+    let [newPorts, newPortRanges] = parseAccessControlPorts(ports, portRanges);
+
+    let authorizedGroups: AuthorizedGroups = {};
+    if (protocol === "netbird-ssh") {
+      // Set port 22 for SSH protocol
+      newPorts = ["22"];
+      newPortRanges = [];
+
+      const isEmpty =
+        !sshAuthorizedGroups ||
+        Object.keys(sshAuthorizedGroups).length === 0 ||
+        sshAccessType === "full";
+
+      if (!isEmpty) {
+        Object.entries(sshAuthorizedGroups).reduce(
+          (acc, [groupName, usernames]) => {
+            const group = groups?.find((group) => group.name === groupName);
+            if (group?.id) {
+              authorizedGroups[group.id] = usernames;
+            }
+            return acc;
+          },
+          {} as AuthorizedGroups,
+        );
+      } else {
+        authorizedGroups = {};
+      }
+    }
 
     const policyObj = {
       name,
@@ -252,6 +306,8 @@ export const useAccessControl = ({
           destinationResource: destinationResource || undefined,
           ports: newPorts,
           port_ranges: newPortRanges,
+          authorized_groups:
+            protocol === "netbird-ssh" ? authorizedGroups : undefined,
         },
       ],
     } as Policy;
@@ -362,6 +418,10 @@ export const useAccessControl = ({
     destinationHasResources,
     destinationOnlyResources,
     hasPortSupport,
+    sshAccessType,
+    setSshAccessType,
+    sshAuthorizedGroups,
+    setSshAuthorizedGroups,
   } as const;
 };
 
@@ -380,3 +440,18 @@ const parseAccessControlPorts = (ports: number[], portRanges: PortRange[]) => {
   const allRanges = [...portRanges, ...portRangesFromPorts];
   return [undefined, allRanges];
 };
+
+export const parsePortsToStrings = (rule?: PolicyRule): string[] => {
+  if (!rule) return [];
+  const ports = rule?.ports ?? [];
+  const portRanges =
+    rule?.port_ranges?.map((r) => {
+      if (r.start === r.end) return `${r.start}`;
+      return `${r.start}-${r.end}`;
+    }) ?? [];
+  return orderBy(
+    [...portRanges, ...ports],
+    [(p) => Number(p.split("-")[0])],
+    ["asc"],
+  );
+};

src/modules/activity/ActivityDescription.tsx

@@ -203,6 +203,14 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "user.create")
+    return (
+      <div className={"inline"}>
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>{" "}
+        was created by <Value>{event?.initiator_name || "NetBird"}</Value>
+      </div>
+    );
+
   if (event.activity_code == "user.group.add")
     return (
       <div className={"inline"}>
@@ -391,6 +399,14 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "group.update")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.old_name}</Value> was renamed to{" "}
+        <Value>{event.meta.new_name}</Value>
+      </div>
+    );
+
   /**
    * Account
    */

src/modules/dns-nameservers/NameserverTemplateModal.tsx

@@ -5,18 +5,21 @@ import { ExternalLinkIcon, GlobeIcon } from "lucide-react";
 import Image, { StaticImageData } from "next/image";
 import React, { useState } from "react";
 import CloudflareLogo from "@/assets/nameservers/cloudflare.svg";
-import DNS0Logo from "@/assets/nameservers/dns0.svg";
-import DNS0ZeroLogo from "@/assets/nameservers/dns0-zero.svg";
 import GoogleLogo from "@/assets/nameservers/google.svg";
 import Quad9Logo from "@/assets/nameservers/quad9.svg";
+import { Group } from "@/interfaces/Group";
 import { NameserverGroup, NameserverPresets } from "@/interfaces/Nameserver";
 import NameserverModal from "@/modules/dns-nameservers/NameserverModal";
 
 type Props = {
   children: React.ReactNode;
+  distributionGroups?: Group[];
 };
 
-export default function NameserverTemplateModal({ children }: Readonly<Props>) {
+export default function NameserverTemplateModal({
+  children,
+  distributionGroups,
+}: Readonly<Props>) {
   const [open, setOpen] = useState(false);
   const [presetModal, setPresetModal] = useState(false);
   const [preset, setPreset] = useState(NameserverPresets.Default);
@@ -39,7 +42,14 @@ export default function NameserverTemplateModal({ children }: Readonly<Props>) {
             setPresetModal(o);
             if (!o) setOpen(false);
           }}
-          preset={preset}
+          preset={{
+            ...preset,
+            groups: distributionGroups
+              ? distributionGroups
+                  .map((group) => group.id)
+                  .filter((id): id is string => !!id)
+              : [],
+          }}
         />
       )}
     </>
@@ -54,9 +64,9 @@ export function NameserverTemplateModalContent({
   onePresetSelection,
 }: Readonly<ModalProps>) {
   return (
-    <ModalContent maxWidthClass={"max-w-5xl"} showClose={true}>
+    <ModalContent maxWidthClass={"max-w-xl"} showClose={true}>
       <div className={"px-8 py-3 flex flex-col gap-6 mt-4"}>
-        <div className={"grid grid-cols-1 md:grid-cols-2 gap-4"}>
+        <div className={"grid grid-cols-1 md:grid-cols-1 gap-4"}>
           <NameserverTemplate
             onClick={() => onePresetSelection(NameserverPresets.Google)}
             src={GoogleLogo}
@@ -75,25 +85,6 @@ export function NameserverTemplateModalContent({
             }
             href={"https://www.cloudflare.com/learning/dns/what-is-1.1.1.1/"}
           />
-
-          <NameserverTemplate
-            onClick={() => onePresetSelection(NameserverPresets.DNS0)}
-            src={DNS0Logo}
-            title={"DNS0.EU DNS"}
-            description={
-              "A free, sovereign and GDPR-compliant DNS resolver with a strong focus on security to protect the citizens and organizations of the European Union."
-            }
-            href={"https://www.dns0.eu/"}
-          />
-          <NameserverTemplate
-            onClick={() => onePresetSelection(NameserverPresets.DNS0Zero)}
-            src={DNS0ZeroLogo}
-            title={"DNS0.EU Zero DNS"}
-            description={
-              "Increase the catch rate for malicious domains by combining human-vetted threat intelligence with advanced heuristics that automatically identify high-risk patterns."
-            }
-            href={"https://www.dns0.eu/zero"}
-          />
           <NameserverTemplate
             onClick={() => onePresetSelection(NameserverPresets.Quad9)}
             src={Quad9Logo}

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

@@ -1,14 +1,21 @@
-import MultipleGroups from "@components/ui/MultipleGroups";
+import MultipleGroups, {
+  TransparentEditIconButton,
+} from "@components/ui/MultipleGroups";
+import { cn } from "@utils/helpers";
 import * as React from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
 import { NameserverGroup } from "@/interfaces/Nameserver";
 
 type Props = {
   ns: NameserverGroup;
 };
+
 export default function NameserverDistributionGroupsCell({ ns }: Props) {
   const { groups } = useGroups();
+  const { permission } = usePermissions();
+  const canUpdate = permission?.nameservers?.update;
 
   const allGroups = ns.groups
     .map((group) => {
@@ -16,5 +23,10 @@ export default function NameserverDistributionGroupsCell({ ns }: Props) {
     })
     .filter((g) => g != undefined) as Group[];
 
-  return <MultipleGroups groups={allGroups} />;
+  return (
+    <div className={cn("flex items-center gap-1", canUpdate && "group")}>
+      <MultipleGroups groups={allGroups} />
+      {canUpdate && <TransparentEditIconButton />}
+    </div>
+  );
 }

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

@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import ButtonGroup from "@components/ButtonGroup";
+import Card from "@components/Card";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -13,8 +14,10 @@ import { usePathname } from "next/navigation";
 import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
+import NoResults from "@/components/ui/NoResults";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { Group } from "@/interfaces/Group";
 import { NameserverGroup } from "@/interfaces/Nameserver";
 import NameserverModal from "@/modules/dns-nameservers/NameserverModal";
 import NameserverTemplateModal from "@/modules/dns-nameservers/NameserverTemplateModal";
@@ -91,12 +94,16 @@ type Props = {
   nameserverGroups?: NameserverGroup[];
   isLoading?: boolean;
   headingTarget?: HTMLHeadingElement | null;
+  isGroupPage?: boolean;
+  distributionGroups?: Group[];
 };
 
 export default function NameserverGroupTable({
   nameserverGroups,
   isLoading,
   headingTarget,
+  isGroupPage,
+  distributionGroups,
 }: Readonly<Props>) {
   const { mutate } = useSWRConfig();
   const path = usePathname();
@@ -111,6 +118,7 @@ export default function NameserverGroupTable({
         desc: true,
       },
     ],
+    !isGroupPage,
   );
 
   const [editModal, setEditModal] = useState(false);
@@ -133,6 +141,14 @@ export default function NameserverGroupTable({
         text={"Network Routes"}
         sorting={sorting}
         setSorting={setSorting}
+        wrapperComponent={isGroupPage ? Card : undefined}
+        wrapperProps={isGroupPage ? { className: "mt-6 w-full" } : undefined}
+        paginationPaddingClassName={isGroupPage ? "px-0 pt-8" : undefined}
+        tableClassName={isGroupPage ? "mt-0" : undefined}
+        inset={false}
+        minimal={isGroupPage}
+        showSearchAndFilters={isGroupPage}
+        keepStateInLocalStorage={!isGroupPage}
         columnVisibility={{
           description: false,
           domain_list: false,
@@ -147,54 +163,78 @@ export default function NameserverGroupTable({
         data={nameserverGroups}
         searchPlaceholder={"Search by name, domains or nameservers..."}
         getStartedCard={
-          <GetStartedTest
-            icon={
-              <SquareIcon
-                icon={<DNSIcon className={"fill-nb-gray-200"} size={20} />}
-                color={"gray"}
-                size={"large"}
-              />
-            }
-            title={"Create Nameserver"}
-            description={
-              "It looks like you don't have any nameservers. Get started by adding one to your network. Select a predefined or add your custom nameservers."
-            }
-            button={
-              <div className={"flex flex-col"}>
-                <div>
-                  <NameserverTemplateModal>
-                    <Button
-                      variant={"primary"}
-                      className={""}
-                      disabled={!permission.nameservers.create}
-                    >
-                      <PlusCircle size={16} />
-                      Add Nameserver
-                    </Button>
-                  </NameserverTemplateModal>
-                </div>
-              </div>
-            }
-            learnMore={
-              <>
-                Learn more about
-                <InlineLink
-                  href={
-                    "https://docs.netbird.io/how-to/manage-dns-in-your-network"
-                  }
-                  target={"_blank"}
+          isGroupPage ? (
+            <NoResults
+              icon={<DNSIcon className={"fill-nb-gray-200"} size={20} />}
+              className={"py-4"}
+              title={"This group is not used within any nameservers yet"}
+              description={
+                "Assign this group as a distribution group in your nameservers to see them listed here."
+              }
+            >
+              <NameserverTemplateModal distributionGroups={distributionGroups}>
+                <Button
+                  variant={"primary"}
+                  className={"mt-4"}
+                  disabled={!permission.nameservers.create}
                 >
-                  DNS
-                  <ExternalLinkIcon size={12} />
-                </InlineLink>
-              </>
-            }
-          />
+                  <PlusCircle size={16} />
+                  Add Nameserver
+                </Button>
+              </NameserverTemplateModal>
+            </NoResults>
+          ) : (
+            <GetStartedTest
+              icon={
+                <SquareIcon
+                  icon={<DNSIcon className={"fill-nb-gray-200"} size={20} />}
+                  color={"gray"}
+                  size={"large"}
+                />
+              }
+              title={"Create Nameserver"}
+              description={
+                "It looks like you don't have any nameservers. Get started by adding one to your network. Select a predefined or add your custom nameservers."
+              }
+              button={
+                <div className={"flex flex-col"}>
+                  <div>
+                    <NameserverTemplateModal
+                      distributionGroups={distributionGroups}
+                    >
+                      <Button
+                        variant={"primary"}
+                        className={""}
+                        disabled={!permission.nameservers.create}
+                      >
+                        <PlusCircle size={16} />
+                        Add Nameserver
+                      </Button>
+                    </NameserverTemplateModal>
+                  </div>
+                </div>
+              }
+              learnMore={
+                <>
+                  Learn more about
+                  <InlineLink
+                    href={
+                      "https://docs.netbird.io/how-to/manage-dns-in-your-network"
+                    }
+                    target={"_blank"}
+                  >
+                    DNS
+                    <ExternalLinkIcon size={12} />
+                  </InlineLink>
+                </>
+              }
+            />
+          )
         }
         rightSide={() => (
           <>
             {nameserverGroups && nameserverGroups?.length > 0 && (
-              <NameserverTemplateModal>
+              <NameserverTemplateModal distributionGroups={distributionGroups}>
                 <Button
                   variant={"primary"}
                   className={"ml-auto"}

src/modules/exit-node/AddExitNodeButton.tsx

@@ -4,6 +4,7 @@ import { IconCirclePlus, IconDirectionSign } from "@tabler/icons-react";
 import * as React from "react";
 import { useState } from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
 import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
 import { RouteModalContent } from "@/modules/routes/RouteModal";
@@ -11,8 +12,13 @@ import { RouteModalContent } from "@/modules/routes/RouteModal";
 type Props = {
   peer?: Peer;
   firstTime?: boolean;
+  distributionGroups?: Group[];
 };
-export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
+export const AddExitNodeButton = ({
+  peer,
+  firstTime = false,
+  distributionGroups,
+}: Props) => {
   const [modal, setModal] = useState(false);
   const { permission } = usePermissions();
 
@@ -42,6 +48,7 @@ export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
           <RouteModalContent
             onSuccess={() => setModal(false)}
             peer={peer}
+            distributionGroups={distributionGroups}
             isFirstExitNode={firstTime}
             exitNode={true}
           />

src/modules/groups/AssignPeerToGroupModal.tsx

@@ -11,7 +11,7 @@ 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 { useCallback, useEffect, useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import { DataTable } from "@/components/table/DataTable";
@@ -28,6 +28,11 @@ type Props = {
   setOpen: (open: boolean) => void;
   onUpdate?: (g: Group) => void;
   useSave?: boolean;
+  excludedPeers?: Peer[];
+  showHeader?: boolean;
+  showClose?: boolean;
+  buttonText?: string;
+  selectInitialPeers?: boolean;
 };
 
 export const AssignPeerToGroupModal = ({
@@ -36,6 +41,11 @@ export const AssignPeerToGroupModal = ({
   setOpen,
   onUpdate,
   useSave = true,
+  excludedPeers,
+  showHeader,
+  showClose,
+  buttonText,
+  selectInitialPeers,
 }: Props) => {
   return (
     <Modal open={open} onOpenChange={setOpen} key={open ? "1" : "0"}>
@@ -47,6 +57,11 @@ export const AssignPeerToGroupModal = ({
             onUpdate && onUpdate(g);
           }}
           useSave={useSave}
+          excludedPeers={excludedPeers}
+          showHeader={showHeader}
+          showClose={showClose}
+          buttonText={buttonText}
+          selectInitialPeers={selectInitialPeers}
         />
       )}
     </Modal>
@@ -57,12 +72,22 @@ type ContentProps = {
   group: Group;
   onSuccess?: (g: Group) => void;
   useSave?: boolean;
+  excludedPeers?: Peer[];
+  showHeader?: boolean;
+  showClose?: boolean;
+  buttonText?: string;
+  selectInitialPeers?: boolean;
 };
 
 export const AssignGroupToPeerModalContent = ({
   group,
   onSuccess,
   useSave,
+  excludedPeers,
+  showHeader = true,
+  showClose = true,
+  buttonText = "Confirm Changes",
+  selectInitialPeers = true,
 }: ContentProps) => {
   const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
   const { mutate } = useSWRConfig();
@@ -89,8 +114,9 @@ export const AssignGroupToPeerModalContent = ({
     setGroupName(name);
   };
 
-  // Get initial selected peers
+  // Get initially selected peers
   const getInitialSelectedPeers = useCallback(() => {
+    if (!selectInitialPeers) return {};
     if (!group) return undefined;
     if (!peers) return undefined;
     let initialSelectedPeers = group?.peers
@@ -109,24 +135,23 @@ export const AssignGroupToPeerModalContent = ({
       },
       {} as Record<string, boolean>,
     );
-  }, [group, peers]);
+  }, [group, peers, selectInitialPeers]);
 
   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,
-        });
+      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;
     }
 
@@ -172,11 +197,19 @@ export const AssignGroupToPeerModalContent = ({
     setInitialPeersSet(true);
   }, [getInitialSelectedPeers, initialPeersSet]);
 
+  const data = useMemo(() => {
+    if (!initialPeersSet) return;
+    return peers?.filter((p) => {
+      if (!excludedPeers || excludedPeers.length === 0) return true;
+      return !excludedPeers.find((ep) => ep.id === p.id);
+    });
+  }, [initialPeersSet, peers, excludedPeers]);
+
   return (
     <ModalContent
       maxWidthClass={"max-w-4xl"}
       className={cn(peers && peers.length > 0 ? "pb-0" : "pb-8")}
-      showClose={true}
+      showClose={showClose}
     >
       {groupNameModal && (
         <EditGroupNameModal
@@ -186,34 +219,37 @@ export const AssignGroupToPeerModalContent = ({
           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>
-                )}
+
+      {showHeader && (
+        <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>
-            </div>
-          }
-          description={
-            isAllGroup
-              ? "View assigned peers for this group"
-              : "Manage assigned peers for this group"
-          }
-          color={"blue"}
-        />
-      </div>
+            }
+            description={
+              isAllGroup
+                ? "View assigned peers for this group"
+                : "Manage assigned peers for this group"
+            }
+            color={"blue"}
+          />
+        </div>
+      )}
 
       {initialPeersSet ? (
         <DataTable
@@ -228,10 +264,11 @@ export const AssignGroupToPeerModalContent = ({
           keepStateInLocalStorage={false}
           setSorting={setSorting}
           columns={PeersTableColumns}
-          data={initialPeersSet ? peers : undefined}
+          data={data}
           isLoading={isLoading && !initialPeersSet}
           tableCellClassName={"!py-1 scale-[95%]"}
           searchPlaceholder={"Search by name, IP or owner..."}
+          searchClassName={"w-[350px]"}
           minimal={false}
           columnVisibility={{
             connected: false,
@@ -245,9 +282,10 @@ export const AssignGroupToPeerModalContent = ({
           }}
           getStartedCard={
             <NoResultsCard
-              title={"Seems like you don't have any peers"}
+              className={"mb-8"}
+              title={"You don't have any peers to assign"}
               description={
-                "In order to view or assign peers to a group, you need to have at least one peer."
+                "In order to assign peers to this group you need to have at least one peer that is not already part of this group."
               }
               icon={<PeerIcon className={"fill-nb-gray-200"} size={14} />}
             />
@@ -268,7 +306,10 @@ export const AssignGroupToPeerModalContent = ({
                 <Button
                   variant={"primary"}
                   className={"ml-auto"}
-                  disabled={peers?.length === 0}
+                  disabled={
+                    peers?.length === 0 ||
+                    Object.keys(selectedRows).length === 0
+                  }
                   onClick={() => {
                     const selectedPeers = table
                       .getSelectedRowModel()
@@ -276,7 +317,7 @@ export const AssignGroupToPeerModalContent = ({
                     handleOnSave(selectedPeers).then();
                   }}
                 >
-                  Confirm Changes
+                  {buttonText}
                 </Button>
               )}
             </div>
@@ -289,7 +330,7 @@ export const AssignGroupToPeerModalContent = ({
   );
 };
 
-const PeersTableColumns: ColumnDef<Peer>[] = [
+export const PeersTableColumns: ColumnDef<Peer>[] = [
   {
     id: "select",
     header: ({ table, column }) => (

src/modules/groups/AssignUserToGroupModal.tsx

@@ -0,0 +1,229 @@
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import { Modal, ModalContent } from "@components/modal/Modal";
+import DataTableHeader from "@components/table/DataTableHeader";
+import NoResultsCard from "@components/ui/NoResultsCard";
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import useFetchApi from "@utils/api";
+import { cn } from "@utils/helpers";
+import dayjs from "dayjs";
+import * as React from "react";
+import { useMemo, useState } from "react";
+import TeamIcon from "@/assets/icons/TeamIcon";
+import { DataTable } from "@/components/table/DataTable";
+import { Group } from "@/interfaces/Group";
+import { Peer } from "@/interfaces/Peer";
+import { User } from "@/interfaces/User";
+import LastTimeRow from "@/modules/common-table-rows/LastTimeRow";
+import { EditGroupNameModal } from "@/modules/groups/EditGroupNameModal";
+import { PeerOSCell } from "@/modules/peers/PeerOSCell";
+import UserNameCell from "@/modules/users/table-cells/UserNameCell";
+import UserRoleCell from "@/modules/users/table-cells/UserRoleCell";
+import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
+
+type Props = {
+  group: Group;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onSuccess?: (users: User[]) => void;
+  excludedUsers?: User[];
+  showClose?: boolean;
+  buttonText?: string;
+};
+
+export const AssignUserToGroupModal = ({
+  group,
+  open = false,
+  setOpen,
+  onSuccess,
+  excludedUsers,
+  showClose,
+  buttonText,
+}: Props) => {
+  return (
+    <Modal open={open} onOpenChange={setOpen} key={open ? "1" : "0"}>
+      {open && (
+        <AssignUserToGroupModalContent
+          group={group}
+          onSuccess={(users) => {
+            setOpen(false);
+            onSuccess?.(users);
+          }}
+          excludedUsers={excludedUsers}
+          showClose={showClose}
+          buttonText={buttonText}
+        />
+      )}
+    </Modal>
+  );
+};
+
+type ContentProps = {
+  group: Group;
+  onSuccess?: (users: User[]) => void;
+  excludedUsers?: User[];
+  showClose?: boolean;
+  buttonText?: string;
+};
+
+export const AssignUserToGroupModalContent = ({
+  group,
+  onSuccess,
+  excludedUsers,
+  showClose = true,
+  buttonText = "Assign Users",
+}: ContentProps) => {
+  const { data: users, isLoading } = useFetchApi<User[]>(
+    "/users?service_user=false",
+  );
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+  const isAllGroup = group.name === "All";
+  const [sorting, setSorting] = useState([
+    {
+      id: "name",
+      desc: false,
+    },
+  ]);
+
+  const data = useMemo(() => {
+    return users?.filter((p) => {
+      if (!excludedUsers || excludedUsers.length === 0) return true;
+      return !excludedUsers.find((ep) => ep.id === p.id);
+    });
+  }, [users, excludedUsers]);
+
+  return (
+    <ModalContent
+      maxWidthClass={"max-w-4xl"}
+      className={cn(users && users.length > 0 ? "pb-0" : "pb-8")}
+      showClose={showClose}
+    >
+      <DataTable
+        useRowId={true}
+        rowSelection={selectedRows}
+        setRowSelection={setSelectedRows}
+        onRowClick={(row) => row.toggleSelected()}
+        text={"Users"}
+        resetRowSelectionOnSearch={false}
+        uniqueKey={group?.id ?? group?.name}
+        sorting={sorting}
+        keepStateInLocalStorage={false}
+        setSorting={setSorting}
+        columns={UsersTableColumns}
+        data={data}
+        isLoading={isLoading}
+        tableCellClassName={"!py-1 scale-[95%]"}
+        searchPlaceholder={"Search by name, email or role..."}
+        searchClassName={"w-[350px]"}
+        minimal={false}
+        columnVisibility={{}}
+        getStartedCard={
+          <NoResultsCard
+            className={"mb-8"}
+            title={"You don't have any users to assign"}
+            description={
+              "In order to assign users to this group you need to have at least one user that is not already part of this group."
+            }
+            icon={<TeamIcon 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>{" "}
+                  User(s) selected
+                </div>
+              )}
+            </div>
+            {!isAllGroup && (
+              <Button
+                variant={"primary"}
+                className={"ml-auto"}
+                disabled={
+                  users?.length === 0 || Object.keys(selectedRows).length === 0
+                }
+                onClick={() => {
+                  const selectedUsers = table
+                    .getSelectedRowModel()
+                    .rows.map((row) => row.original);
+                  onSuccess?.(selectedUsers);
+                }}
+              >
+                {buttonText}
+              </Button>
+            )}
+          </div>
+        )}
+      />
+    </ModalContent>
+  );
+};
+
+const UsersTableColumns: ColumnDef<User>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={row.getIsSelected()}
+          variant={"tableCell"}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    accessorFn: (row) => row.name + " " + row.email,
+    sortingFn: "text",
+    cell: ({ row }) => <UserNameCell user={row.original} />,
+  },
+  {
+    accessorKey: "role",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Role</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <UserRoleCell user={row.original} />,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Status</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <UserStatusCell user={row.original} />,
+  },
+  {
+    accessorKey: "last_login",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Last Login</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => (
+      <LastTimeRow
+        date={dayjs(row.original.last_login).toDate()}
+        text={"Last login on"}
+      />
+    ),
+  },
+];

src/modules/groups/EditGroupNameModal.tsx

@@ -7,10 +7,10 @@ import {
   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";
+import { useGroups } from "@/contexts/GroupsProvider";
 
 type Props = {
   initialName: string;
@@ -25,53 +25,66 @@ export const EditGroupNameModal = ({
   onSuccess,
 }: Props) => {
   const [name, setName] = useState(initialName);
+  const { groups } = useGroups();
+  const [error, setError] = useState("");
+
   const isDisabled = useMemo(() => {
     if (name === initialName) return true;
+    if (error !== "") return true;
     const trimmedName = trim(name);
     return trimmedName.length === 0;
-  }, [name, initialName]);
+  }, [name, initialName, error]);
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = e.target.value;
+    const findGroup = groups?.find((g) => g.name === newName);
+    if (findGroup) {
+      setError("This group already exists. Please choose another name.");
+    } else {
+      setError("");
+    }
+    setName(newName);
+  };
 
   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"}
-          />
+        <ModalHeader
+          title={"Rename Group"}
+          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 className={"p-default flex flex-col gap-4"}>
+          <div>
+            <Input
+              placeholder={"e.g., Developers"}
+              value={name}
+              onChange={handleNameChange}
+              error={error}
+            />
           </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} />
+        <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>
-            </div>
-          </ModalFooter>
-        </form>
+            </ModalClose>
+
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              onClick={() => onSuccess(name)}
+              disabled={isDisabled}
+              type={"submit"}
+            >
+              Save
+            </Button>
+          </div>
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );

src/modules/groups/details/GroupDetailsRemoveCell.tsx

@@ -0,0 +1,47 @@
+import { MinusCircle } from "lucide-react";
+import * as React from "react";
+import Button from "@/components/Button";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Peer } from "@/interfaces/Peer";
+import { User } from "@/interfaces/User";
+
+type Props = {
+  onRemove: () => void;
+};
+
+export function GroupDetailsRemoveCell({ onRemove }: Props) {
+  return (
+    <div className={"flex justify-end pr-4"}>
+      <Button
+        variant={"default-outline"}
+        size={"sm"}
+        onClick={() => onRemove()}
+      >
+        <MinusCircle size={14} />
+        Remove
+      </Button>
+    </div>
+  );
+}
+
+export const GroupPeersRemoveCell = ({ peer }: { peer: Peer }) => {
+  const { removePeersFromGroup } = useGroupContext();
+  const { permission } = usePermissions();
+  return (
+    permission?.peers?.update &&
+    permission?.groups?.update && (
+      <GroupDetailsRemoveCell onRemove={() => removePeersFromGroup([peer])} />
+    )
+  );
+};
+
+export const GroupUsersRemoveCell = ({ user }: { user: User }) => {
+  const { removeUsersFromGroup } = useGroupContext();
+  const { permission } = usePermissions();
+  return (
+    permission?.users?.update && (
+      <GroupDetailsRemoveCell onRemove={() => removeUsersFromGroup([user])} />
+    )
+  );
+};

src/modules/groups/details/GroupDetailsTableContainer.tsx

@@ -0,0 +1,47 @@
+import Paragraph from "@components/Paragraph";
+import SkeletonTable, {
+  SkeletonTableHeader,
+} from "@components/skeletons/SkeletonTable";
+import React, { Suspense } from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  headingRef?: React.RefObject<HTMLHeadingElement>;
+  children: React.ReactNode;
+};
+
+export const GroupDetailsTableContainer = ({
+  title,
+  description,
+  headingRef,
+  children,
+}: Props) => {
+  return (
+    <div className={"pb-10 px-8"}>
+      <div className={"w-full"}>
+        {(title || description) && (
+          <div className={"flex justify-between items-center mb-5"}>
+            <div>
+              {title && <h2 ref={headingRef}>{title}</h2>}
+              {description && <Paragraph>{description}</Paragraph>}
+            </div>
+          </div>
+        )}
+
+        <Suspense
+          fallback={
+            <div className={"relative"}>
+              <SkeletonTableHeader className={"!p-0"} />
+              <div className={"mt-6 w-full"}>
+                <SkeletonTable withHeader={false} />
+              </div>
+            </div>
+          }
+        >
+          {children}
+        </Suspense>
+      </div>
+    </div>
+  );
+};

src/modules/groups/details/GroupNameserversSection.tsx

@@ -0,0 +1,32 @@
+import { usePortalElement } from "@hooks/usePortalElement";
+import React, { lazy } from "react";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { NameserverGroup } from "@/interfaces/Nameserver";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+
+const NameserverGroupTable = lazy(
+  () => import("@/modules/dns-nameservers/table/NameserverGroupTable"),
+);
+
+type Props = {
+  nameserverGroups?: NameserverGroup[];
+  isLoading?: boolean;
+};
+
+export const GroupNameserversSection = ({
+  nameserverGroups,
+  isLoading = true,
+}: Props) => {
+  const { group } = useGroupContext();
+
+  return (
+    <GroupDetailsTableContainer>
+      <NameserverGroupTable
+        isLoading={isLoading}
+        nameserverGroups={nameserverGroups}
+        isGroupPage={true}
+        distributionGroups={[group]}
+      />
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupNetworkRoutesSection.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { Route } from "@/interfaces/Route";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+import NetworkRoutesTable from "@/modules/route-group/NetworkRoutesTable";
+import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
+
+type Props = {
+  routes?: Route[];
+  isLoading?: boolean;
+};
+
+export const GroupNetworkRoutesSection = ({
+  routes,
+  isLoading = true,
+}: Props) => {
+  const groupedRoutes = useGroupedRoutes({ routes });
+  const { group } = useGroupContext();
+
+  return (
+    <GroupDetailsTableContainer>
+      <NetworkRoutesTable
+        isGroupPage={true}
+        isLoading={isLoading}
+        groupedRoutes={groupedRoutes}
+        routes={routes}
+        distributionGroups={[group]}
+      />
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupPeersSection.tsx

@@ -0,0 +1,219 @@
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import FullTooltip from "@components/FullTooltip";
+import DataTableHeader from "@components/table/DataTableHeader";
+import { DataTableMultiSelectPopup } from "@components/table/DataTableMultiSelectPopup";
+import { InstallNetBirdButton } from "@components/ui/InstallNetBirdButton";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import { MinusCircle, PlusCircle } from "lucide-react";
+import * as React from "react";
+import { lazy, useState } from "react";
+import PeerIcon from "@/assets/icons/PeerIcon";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Peer } from "@/interfaces/Peer";
+import { AssignPeerToGroupModal } from "@/modules/groups/AssignPeerToGroupModal";
+import { GroupPeersRemoveCell } from "@/modules/groups/details/GroupDetailsRemoveCell";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+import PeerAddressCell from "@/modules/peers/PeerAddressCell";
+import PeerLastSeenCell from "@/modules/peers/PeerLastSeenCell";
+import PeerNameCell from "@/modules/peers/PeerNameCell";
+import { PeerOSCell } from "@/modules/peers/PeerOSCell";
+
+const GroupPeersTable = lazy(() => import("@/modules/peer/MinimalPeersTable"));
+
+const GroupPeersTableColumns: ColumnDef<Peer>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={row.getIsSelected()}
+          variant={"tableCell"}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <PeerNameCell peer={row.original} />,
+  },
+  {
+    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: "last_seen",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Last seen</DataTableHeader>;
+    },
+    sortingFn: "datetime",
+    cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
+  },
+  {
+    accessorKey: "os",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>OS</DataTableHeader>;
+    },
+    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+  },
+  {
+    id: "remove_from_group",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => <GroupPeersRemoveCell peer={row.original} />,
+  },
+];
+
+type Props = {
+  peers?: Peer[];
+  isLoading?: boolean;
+};
+
+export const GroupPeersSection = ({ peers, isLoading = true }: Props) => {
+  const { group, addPeersToGroup, removePeersFromGroup } = useGroupContext();
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+  const [open, setOpen] = useState(false);
+  const { permission } = usePermissions();
+
+  return (
+    <GroupDetailsTableContainer>
+      <GroupPeersTable
+        isLoading={isLoading}
+        peers={peers}
+        columns={GroupPeersTableColumns}
+        selectedRows={selectedRows}
+        setSelectedRows={setSelectedRows}
+        getStartedCard={
+          <NoResults
+            className={"py-4"}
+            title={"This group has no assigned peers yet"}
+            description={
+              "Install NetBird and assign existing peers to this group to see them listed here."
+            }
+            icon={<PeerIcon size={20} className={"fill-nb-gray-300"} />}
+          >
+            {permission?.peers?.update && permission?.groups?.update && (
+              <div className={"flex items-center justify-center mt-4 gap-4"}>
+                <InstallNetBirdButton />
+                <Button
+                  variant={"primary"}
+                  size={"sm"}
+                  onClick={() => setOpen(true)}
+                >
+                  <PlusCircle size={16} />
+                  Assign Peers
+                </Button>
+              </div>
+            )}
+          </NoResults>
+        }
+        onRowClick={(row) => row.toggleSelected()}
+        rightSide={(table) => (
+          <>
+            <DataTableMultiSelectPopup
+              selectedItems={table
+                .getSelectedRowModel()
+                .rows.map((row) => row.original)}
+              onCanceled={() => setSelectedRows({})}
+              rightSide={
+                <>
+                  <FullTooltip
+                    content={
+                      <span className={"text-xs"}>Remove Peers from Group</span>
+                    }
+                  >
+                    <Button
+                      variant={"default-outline"}
+                      size={"xs"}
+                      className={"!h-9 !w-9"}
+                      onClick={() => {
+                        let peers = table
+                          .getSelectedRowModel()
+                          .rows.map((row) => row.original);
+                        removePeersFromGroup(peers).then();
+                        setSelectedRows({});
+                      }}
+                    >
+                      <MinusCircle size={16} className={"shrink-0"} />
+                    </Button>
+                  </FullTooltip>
+                </>
+              }
+            />
+            <AssignPeerToGroupModal
+              group={group}
+              open={open}
+              setOpen={setOpen}
+              useSave={false}
+              showHeader={false}
+              showClose={false}
+              buttonText={"Assign Peers"}
+              selectInitialPeers={false}
+              excludedPeers={peers}
+              onUpdate={(g) => {
+                let peers = g.peers as Peer[];
+                addPeersToGroup(peers).then();
+              }}
+            />
+            {peers && peers?.length > 0 && (
+              <div className={"ml-auto flex items-center"}>
+                <div className={"flex items-center justify-center gap-4"}>
+                  <InstallNetBirdButton />
+                  {permission?.peers?.update && permission?.groups?.update && (
+                    <Button
+                      variant={"primary"}
+                      size={"sm"}
+                      onClick={() => setOpen(true)}
+                    >
+                      <PlusCircle size={16} />
+                      Assign Peers
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      />
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupPoliciesSection.tsx

@@ -0,0 +1,26 @@
+import React, { lazy } from "react";
+import PoliciesProvider from "@/contexts/PoliciesProvider";
+import { Policy } from "@/interfaces/Policy";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+
+const AccessControlTable = lazy(
+  () => import("@/modules/access-control/table/AccessControlTable"),
+);
+type Props = {
+  policies?: Policy[];
+  isLoading?: boolean;
+};
+
+export const GroupPoliciesSection = ({ policies, isLoading = true }: Props) => {
+  return (
+    <GroupDetailsTableContainer>
+      <PoliciesProvider>
+        <AccessControlTable
+          isLoading={isLoading}
+          policies={policies}
+          isGroupPage={true}
+        />
+      </PoliciesProvider>
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupResourcesSection.tsx

@@ -0,0 +1,181 @@
+import Button from "@components/Button";
+import Card from "@components/Card";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { removeAllSpaces } from "@utils/helpers";
+import { ArrowUpRightIcon, Layers3Icon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { useSWRConfig } from "swr";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
+import { NetworkResourceWithNetwork } from "@/interfaces/Network";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+import { NetworkProvider } from "@/modules/networks/NetworkProvider";
+import { ResourceActionCell } from "@/modules/networks/resources/ResourceActionCell";
+import ResourceAddressCell from "@/modules/networks/resources/ResourceAddressCell";
+import { ResourceEnabledCell } from "@/modules/networks/resources/ResourceEnabledCell";
+import { ResourceGroupCell } from "@/modules/networks/resources/ResourceGroupCell";
+import ResourceNameCell from "@/modules/networks/resources/ResourceNameCell";
+import { ResourcePolicyCell } from "@/modules/networks/resources/ResourcePolicyCell";
+
+const GroupResourcesColumns: ColumnDef<NetworkResourceWithNetwork>[] = [
+  {
+    id: "id",
+    accessorKey: "id",
+    filterFn: "exactMatch",
+  },
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Resource</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceNameCell resource={row.original} />;
+    },
+  },
+  {
+    id: "description",
+    accessorKey: "description",
+    accessorFn: (resource) =>
+      removeAllSpaces(resource?.description || "").toLowerCase(),
+  },
+  {
+    id: "address",
+    accessorKey: "address",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Address</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceAddressCell resource={row.original} />;
+    },
+  },
+  {
+    id: "enabled",
+    accessorKey: "enabled",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Active</DataTableHeader>;
+    },
+    cell: ({ row }) => (
+      <ResourceEnabledCell
+        resource={row.original}
+        mutateAllResourcesOnUpdate={true}
+      />
+    ),
+  },
+  {
+    id: "groups",
+    accessorFn: (resource) => {
+      let groups = resource?.groups as Group[];
+      return groups.map((group) => group.name).join(", ");
+    },
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Groups</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourceGroupCell resource={row.original} />;
+    },
+  },
+  {
+    id: "policies",
+    accessorKey: "id",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Policies</DataTableHeader>;
+    },
+    cell: ({ row }) => {
+      return <ResourcePolicyCell resource={row.original} />;
+    },
+  },
+  {
+    id: "actions",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => {
+      return <ResourceActionCell resource={row.original} />;
+    },
+  },
+];
+
+type Props = {
+  resources?: NetworkResourceWithNetwork[];
+  isLoading?: boolean;
+};
+
+export const GroupResourcesSection = ({
+  resources,
+  isLoading = true,
+}: Props) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const { permission } = usePermissions();
+  const router = useRouter();
+  const { mutate } = useSWRConfig();
+
+  return (
+    <GroupDetailsTableContainer>
+      <DataTable
+        wrapperComponent={Card}
+        wrapperProps={{ className: "mt-6 pb-2 w-full" }}
+        sorting={sorting}
+        setSorting={setSorting}
+        minimal={true}
+        isLoading={isLoading}
+        showSearchAndFilters={true}
+        renderRow={(row, children) => (
+          <NetworkProvider
+            network={row.network}
+            onResourceUpdate={() => mutate("/networks/resources")}
+            onResourceDelete={() => mutate("/networks/resources")}
+          >
+            {children}
+          </NetworkProvider>
+        )}
+        inset={false}
+        tableClassName={"mt-0"}
+        text={"Resources"}
+        columns={GroupResourcesColumns}
+        keepStateInLocalStorage={false}
+        data={resources}
+        searchPlaceholder={"Search by name, address or group..."}
+        getStartedCard={
+          <NoResults
+            className={"py-4"}
+            title={"This group has no assigned resources"}
+            description={
+              "Assign this group to your resources inside your networks to see them listed here."
+            }
+            icon={<Layers3Icon size={20} />}
+          >
+            {permission?.networks?.create && (
+              <>
+                <Button
+                  variant={"primary"}
+                  className={"mt-4"}
+                  onClick={() => router.push("/networks")}
+                >
+                  Go to Networks
+                  <ArrowUpRightIcon size={16} />
+                </Button>
+              </>
+            )}
+          </NoResults>
+        }
+        columnVisibility={{
+          description: false,
+          id: false,
+        }}
+        paginationPaddingClassName={"px-0 pt-8"}
+      >
+        {(table) => (
+          <DataTableRowsPerPage
+            table={table}
+            disabled={!resources || resources?.length == 0}
+          />
+        )}
+      </DataTable>
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupSetupKeysSection.tsx

@@ -0,0 +1,31 @@
+import React, { lazy } from "react";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { SetupKey } from "@/interfaces/SetupKey";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+
+const SetupKeysTable = lazy(
+  () => import("@/modules/setup-keys/SetupKeysTable"),
+);
+
+type Props = {
+  setupKeys?: SetupKey[];
+  isLoading?: boolean;
+};
+
+export const GroupSetupKeysSection = ({
+  setupKeys,
+  isLoading = true,
+}: Props) => {
+  const { group } = useGroupContext();
+
+  return (
+    <GroupDetailsTableContainer>
+      <SetupKeysTable
+        isLoading={isLoading}
+        setupKeys={setupKeys}
+        isGroupPage={true}
+        groups={[group]}
+      />
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/GroupUsersSection.tsx

@@ -0,0 +1,229 @@
+import Button from "@components/Button";
+import { Checkbox } from "@components/Checkbox";
+import FullTooltip from "@components/FullTooltip";
+import DataTableHeader from "@components/table/DataTableHeader";
+import { DataTableMultiSelectPopup } from "@components/table/DataTableMultiSelectPopup";
+import NoResults from "@components/ui/NoResults";
+import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
+import dayjs from "dayjs";
+import { MinusCircle, PlusCircle } from "lucide-react";
+import React, { lazy, useState } from "react";
+import TeamIcon from "@/assets/icons/TeamIcon";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { User } from "@/interfaces/User";
+import LastTimeRow from "@/modules/common-table-rows/LastTimeRow";
+import { AssignUserToGroupModal } from "@/modules/groups/AssignUserToGroupModal";
+import { GroupUsersRemoveCell } from "@/modules/groups/details/GroupDetailsRemoveCell";
+import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
+import UserBlockCell from "@/modules/users/table-cells/UserBlockCell";
+import UserNameCell from "@/modules/users/table-cells/UserNameCell";
+import UserRoleCell from "@/modules/users/table-cells/UserRoleCell";
+import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
+import { InviteUserButton } from "@/modules/users/UsersTable";
+
+const UsersTable = lazy(() => import("@/modules/users/UsersTable"));
+
+export const GroupUsersTableColumns: ColumnDef<User>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected()}
+          onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className={"min-w-[20px] max-w-[20px]"}>
+        <Checkbox
+          checked={row.getIsSelected()}
+          variant={"tableCell"}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </div>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    accessorFn: (row) => row.name + " " + row.email,
+    sortingFn: "text",
+    cell: ({ row }) => <UserNameCell user={row.original} />,
+  },
+  {
+    accessorKey: "is_current",
+    sortingFn: "basic",
+  },
+  {
+    accessorKey: "role",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Role</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <UserRoleCell user={row.original} />,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Status</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <UserStatusCell user={row.original} />,
+  },
+  {
+    accessorKey: "is_blocked",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Block User</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <UserBlockCell user={row.original} />,
+  },
+  {
+    accessorKey: "last_login",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Last Login</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => (
+      <LastTimeRow
+        date={dayjs(row.original.last_login).toDate()}
+        text={"Last login on"}
+      />
+    ),
+  },
+  {
+    id: "approval_required",
+    accessorKey: "approval_required",
+    sortingFn: "basic",
+    accessorFn: (u) => u?.pending_approval,
+  },
+  {
+    id: "remove_from_group",
+    accessorKey: "id",
+    header: "",
+    cell: ({ row }) => <GroupUsersRemoveCell user={row.original} />,
+  },
+];
+
+type Props = {
+  users?: User[];
+  isLoading?: boolean;
+};
+
+export const GroupUsersSection = ({ users, isLoading = true }: Props) => {
+  const { group, addUsersToGroup, removeUsersFromGroup } = useGroupContext();
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
+  const [open, setOpen] = useState(false);
+  const { permission } = usePermissions();
+
+  return (
+    <GroupDetailsTableContainer>
+      <UsersTable
+        isLoading={isLoading}
+        columns={GroupUsersTableColumns}
+        selectedRows={selectedRows}
+        setSelectedRows={setSelectedRows}
+        onRowClick={(row) => row.toggleSelected()}
+        keepStateInLocalStorage={false}
+        minimal={true}
+        users={users}
+        getStartedCard={
+          <NoResults
+            className={"py-4"}
+            title={"This group has no assigned users yet"}
+            description={
+              "Invite new users or assign existing ones to this group to see them listed here."
+            }
+            icon={<TeamIcon size={20} className={"fill-nb-gray-300"} />}
+          >
+            {permission?.users?.update && (
+              <div className={"flex gap-4 items-center justify-center mt-4"}>
+                <Button
+                  variant={"secondary"}
+                  size={"sm"}
+                  onClick={() => setOpen(true)}
+                >
+                  <PlusCircle size={16} />
+                  Assign Users
+                </Button>
+                <InviteUserButton show={true} groups={[group]} />
+              </div>
+            )}
+          </NoResults>
+        }
+        rightSide={(table) => {
+          return (
+            <>
+              <DataTableMultiSelectPopup
+                label={"User(s) selected"}
+                selectedItems={table
+                  .getSelectedRowModel()
+                  .rows.map((row) => row.original)}
+                onCanceled={() => setSelectedRows({})}
+                rightSide={
+                  <>
+                    <FullTooltip
+                      content={
+                        <span className={"text-xs"}>
+                          Remove Users from Group
+                        </span>
+                      }
+                    >
+                      <Button
+                        variant={"default-outline"}
+                        size={"xs"}
+                        className={"!h-9 !w-9"}
+                        onClick={() => {
+                          let usersToRemove = table
+                            .getSelectedRowModel()
+                            .rows.map((row) => row.original);
+                          removeUsersFromGroup(usersToRemove).then();
+                          setSelectedRows({});
+                        }}
+                      >
+                        <MinusCircle size={16} className={"shrink-0"} />
+                      </Button>
+                    </FullTooltip>
+                  </>
+                }
+              />
+              <AssignUserToGroupModal
+                group={group}
+                open={open}
+                setOpen={setOpen}
+                showClose={false}
+                excludedUsers={users}
+                onSuccess={(newUsers) => {
+                  addUsersToGroup(newUsers).then();
+                }}
+              />
+              {users && users?.length > 0 && permission?.users?.update && (
+                <div
+                  className={"flex gap-4 items-center justify-center ml-auto"}
+                >
+                  <Button
+                    variant={"secondary"}
+                    size={"sm"}
+                    onClick={() => setOpen(true)}
+                  >
+                    <PlusCircle size={16} />
+                    Assign Users
+                  </Button>
+                  <InviteUserButton show={true} groups={[group]} />
+                </div>
+              )}
+            </>
+          );
+        }}
+      />
+    </GroupDetailsTableContainer>
+  );
+};

src/modules/groups/details/useGroupDetails.ts

@@ -0,0 +1,156 @@
+import { useMemo } from "react";
+import { Group, GroupPeer, GroupResource } from "@/interfaces/Group";
+import { NameserverGroup } from "@/interfaces/Nameserver";
+import {
+  Network,
+  NetworkResource,
+  NetworkResourceWithNetwork,
+} from "@/interfaces/Network";
+import { Peer } from "@/interfaces/Peer";
+import { Policy } from "@/interfaces/Policy";
+import { Route } from "@/interfaces/Route";
+import { SetupKey } from "@/interfaces/SetupKey";
+import { User } from "@/interfaces/User";
+import useFetchApi from "@/utils/api";
+
+export interface GroupDetails extends Group {
+  policies: Policy[];
+  nameservers: NameserverGroup[];
+  routes: Route[];
+  setupKeys: SetupKey[];
+  users: User[];
+  peersOfGroup: Peer[];
+  networkResources: NetworkResourceWithNetwork[];
+}
+
+export default function useGroupDetails(groupId: string) {
+  const { data: group, isLoading: isGroupsLoading } = useFetchApi<Group>(
+    `/groups/${groupId}`,
+  );
+  const { data: policies, isLoading: isPoliciesLoading } =
+    useFetchApi<Policy[]>(`/policies`);
+  const { data: nameservers, isLoading: isNameserversLoading } =
+    useFetchApi<NameserverGroup[]>(`/dns/nameservers`);
+  const { data: routes, isLoading: isRoutesLoading } =
+    useFetchApi<Route[]>(`/routes`);
+  const { data: setupKeys, isLoading: isSetupKeysLoading } =
+    useFetchApi<SetupKey[]>(`/setup-keys`);
+  const { data: users, isLoading: isUsersLoading } = useFetchApi<User[]>(
+    `/users?service_user=false`,
+  );
+  const { data: peers, isLoading: isPeerLoading } =
+    useFetchApi<Peer[]>(`/peers`);
+  const { data: resources, isLoading: isLoadingResources } = useFetchApi<
+    NetworkResource[]
+  >("/networks/resources");
+  const { data: networks, isLoading: isNetworksLoading } =
+    useFetchApi<Network[]>("/networks");
+
+  const linkedPolicies = useMemo(() => {
+    return (
+      policies?.filter((policy) => {
+        let rule = policy.rules?.[0] ?? undefined;
+        const sourceGroups = (rule.sources as Group[]) || [];
+        const destinationGroups = (rule.destinations as Group[]) || [];
+        const isInSources = sourceGroups.some((g) => g.id === groupId);
+        const isInDestinations = destinationGroups.some(
+          (g) => g.id === groupId,
+        );
+        return isInSources || isInDestinations;
+      }) || []
+    );
+  }, [policies, groupId]);
+
+  const linkedNameservers = useMemo(() => {
+    return nameservers?.filter((ns) => ns.groups?.includes(groupId)) || [];
+  }, [nameservers, groupId]);
+
+  const linkedRoutes = useMemo(() => {
+    return (
+      routes?.filter((route) => {
+        const isInDistributionGroups = route.groups?.includes(groupId);
+        const isInAccessControlGroups =
+          route.access_control_groups?.includes(groupId);
+        const isInPeerGroups = route.peer_groups?.includes(groupId);
+
+        return (
+          isInAccessControlGroups || isInDistributionGroups || isInPeerGroups
+        );
+      }) || []
+    );
+  }, [routes, groupId]);
+
+  const linkedSetupKeys = useMemo(() => {
+    return setupKeys?.filter((key) => key.auto_groups?.includes(groupId)) || [];
+  }, [setupKeys, groupId]);
+
+  const linkedUsers = useMemo(() => {
+    return users?.filter((user) => user.auto_groups?.includes(groupId)) || [];
+  }, [users, groupId]);
+
+  const linkedPeers = useMemo(() => {
+    const groupPeerIds = (group?.peers as GroupPeer[])?.map((p) => p.id);
+    return peers?.filter((p) => groupPeerIds?.includes(p.id!)) || [];
+  }, [peers, group]);
+
+  const linkedNetworkResources = useMemo(() => {
+    if (!resources || !group?.resources) return [];
+    const resourcesIds = (group?.resources as GroupResource[])?.map(
+      (p) => p.id,
+    );
+    let networkResources = resources.filter(
+      (p) => resourcesIds?.includes(p.id),
+    );
+
+    return networkResources.map((networkResource) => {
+      const network = networks?.find(
+        (n) => n.resources?.includes(networkResource.id),
+      );
+      return {
+        ...networkResource,
+        network: network,
+      } as NetworkResourceWithNetwork;
+    });
+  }, [group?.resources, networks, resources]);
+
+  const isLoading =
+    isGroupsLoading ||
+    isPoliciesLoading ||
+    isNameserversLoading ||
+    isRoutesLoading ||
+    isSetupKeysLoading ||
+    isUsersLoading ||
+    isPeerLoading ||
+    isLoadingResources ||
+    isNetworksLoading;
+
+  const groupDetails = useMemo(() => {
+    if (isLoading || !group) return null;
+
+    return {
+      ...group,
+      policies: linkedPolicies,
+      nameservers: linkedNameservers,
+      routes: linkedRoutes,
+      setupKeys: linkedSetupKeys,
+      users: linkedUsers,
+      peersOfGroup: linkedPeers,
+      networkResources: linkedNetworkResources,
+    } as GroupDetails;
+  }, [
+    isLoading,
+    group,
+    linkedPolicies,
+    linkedNameservers,
+    linkedRoutes,
+    linkedSetupKeys,
+    linkedUsers,
+    linkedPeers,
+    linkedNetworkResources,
+  ]);
+
+  return {
+    groupDetails,
+    isLoading,
+  };
+}

src/modules/groups/table/GroupsActionCell.tsx

@@ -0,0 +1,128 @@
+import Button from "@components/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/DropdownMenu";
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import { FolderIcon, MoreVertical, Pencil, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { useGroupContext } from "@/contexts/GroupProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { GROUP_TOOLTIP_TEXT } from "@/interfaces/Group";
+import { GroupUsage } from "@/modules/groups/useGroupsUsage";
+
+type Props = {
+  group: GroupUsage;
+  inUse: boolean;
+};
+
+export default function GroupsActionCell({ group, inUse }: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const router = useRouter();
+
+  const {
+    deleteGroup,
+    isAllowedToRename,
+    isAllowedToDelete,
+    isIntegrationGroup,
+    isJWTGroup,
+    openGroupRenameModal,
+  } = useGroupContext();
+
+  const canDelete = isAllowedToDelete && !inUse;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex justify-end pr-4 gap-3",
+          group.name === "All" && "pointer-events-none opacity-0",
+        )}
+      >
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger
+            asChild
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          >
+            <Button variant={"secondary"} className={"!px-3"}>
+              <MoreVertical size={16} className={"shrink-0"} />
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent className="w-auto" align="end">
+            <DropdownMenuItem
+              onClick={() => router.push("/group?id=" + group.id)}
+              disabled={!permission.groups.read}
+            >
+              <div className="flex gap-3 items-center">
+                <FolderIcon size={14} className="shrink-0" />
+                View Details
+              </div>
+            </DropdownMenuItem>
+
+            {permission?.groups?.update && (
+              <>
+                <DropdownMenuSeparator />
+                <FullTooltip
+                  content={
+                    <div className={"text-xs max-w-xs"}>
+                      {isJWTGroup
+                        ? GROUP_TOOLTIP_TEXT.RENAME.JWT
+                        : GROUP_TOOLTIP_TEXT.RENAME.INTEGRATION}
+                    </div>
+                  }
+                  interactive={false}
+                  disabled={isAllowedToRename}
+                  className={"w-full block"}
+                >
+                  <DropdownMenuItem
+                    onClick={openGroupRenameModal}
+                    disabled={!isAllowedToRename}
+                  >
+                    <div className="flex gap-3 items-center">
+                      <Pencil size={14} className="shrink-0" />
+                      Rename
+                    </div>
+                  </DropdownMenuItem>
+                </FullTooltip>
+              </>
+            )}
+            {permission?.groups?.delete && (
+              <FullTooltip
+                content={
+                  <div className={"text-xs max-w-xs"}>
+                    {isIntegrationGroup
+                      ? GROUP_TOOLTIP_TEXT.DELETE.INTEGRATION
+                      : GROUP_TOOLTIP_TEXT.IN_USE}
+                  </div>
+                }
+                interactive={false}
+                disabled={canDelete}
+                className={"w-full block"}
+              >
+                <DropdownMenuItem
+                  onClick={deleteGroup}
+                  variant={"danger"}
+                  disabled={!canDelete}
+                >
+                  <div className="flex gap-3 items-center">
+                    <Trash2 size={14} className="shrink-0" />
+                    Delete
+                  </div>
+                </DropdownMenuItem>
+              </FullTooltip>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
+  );
+}

src/modules/groups/table/GroupsCountCell.tsx

@@ -0,0 +1,59 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+type Props = {
+  icon: React.ReactNode;
+  count: number;
+  groupName: string;
+  text?: string;
+  href?: string;
+  hidden?: boolean;
+};
+export default function GroupsCountCell({
+  icon,
+  count = 0,
+  groupName,
+  text,
+  href,
+  hidden = false,
+}: Props) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    href && router.push(href);
+  };
+
+  return (
+    !hidden && (
+      <FullTooltip
+        className={"w-full"}
+        content={
+          <div className={"text-xs"}>
+            Group{" "}
+            <span className={"text-netbird font-medium"}>{groupName}</span> is
+            used in <span className={"font-medium text-netbird"}>{count}</span>{" "}
+            {text}
+          </div>
+        }
+        disabled={count === 0}
+      >
+        <Badge
+          variant={"gray"}
+          useHover={!!href}
+          onClick={href ? handleClick : undefined}
+          className={cn(
+            "gap-2 w-full",
+            count === 0 && "opacity-30",
+            href && "cursor-pointer",
+          )}
+        >
+          {icon}
+          {count}
+        </Badge>
+      </FullTooltip>
+    )
+  );
+}

src/modules/groups/table/GroupsNameCell.tsx

@@ -0,0 +1,43 @@
+import { GroupBadgeIcon } from "@components/ui/GroupBadgeIcon";
+import TextWithTooltip from "@components/ui/TextWithTooltip";
+import { useRouter } from "next/navigation";
+import React from "react";
+import CircleIcon from "@/assets/icons/CircleIcon";
+import { Group } from "@/interfaces/Group";
+
+type Props = {
+  active: boolean;
+  group: Group;
+};
+export default function GroupsNameCell({ active, group }: Readonly<Props>) {
+  const router = useRouter();
+  return (
+    <div className={""}>
+      <div
+        className={
+          "inline-flex items-center justify-start text-neutral-300 gap-2.5 py-2 px-3 pr-4 hover:bg-nb-gray-800/60 cursor-pointer rounded-md"
+        }
+        onClick={() => router.push("/group?id=" + group.id)}
+      >
+        <div className={"flex items-center justify-center h-full"}>
+          <GroupBadgeIcon id={group?.id} issued={group?.issued} />
+        </div>
+
+        <div
+          className={"flex flex-col min-w-0 cursor-pointer"}
+          aria-label={`View details of group ${group.name}`}
+        >
+          <div className={"font-medium flex gap-2 items-center justify-center"}>
+            <TextWithTooltip text={group?.name} maxChars={50} />
+          </div>
+        </div>
+        <CircleIcon
+          size={8}
+          active={active}
+          inactiveDot={"gray"}
+          className={"shrink-0"}
+        />
+      </div>
+    </div>
+  );
+}

src/modules/groups/table/GroupsTable.tsx

@@ -2,9 +2,8 @@ import ButtonGroup from "@components/ButtonGroup";
 import { DataTable } from "@components/table/DataTable";
 import DataTableHeader from "@components/table/DataTableHeader";
 import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
-import NoResults from "@components/ui/NoResults";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
-import { FolderGit2Icon, Layers3Icon } from "lucide-react";
+import { Layers3Icon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
@@ -13,13 +12,15 @@ import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import TeamIcon from "@/assets/icons/TeamIcon";
+import { AddGroupButton } from "@/components/ui/AddGroupButton";
+import { GroupProvider } from "@/contexts/GroupProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
-import GroupsActionCell from "@/modules/settings/GroupsActionCell";
-import GroupsCountCell from "@/modules/settings/GroupsCountCell";
-import GroupsNameCell from "@/modules/settings/GroupsNameCell";
-import useGroupsUsage, { GroupUsage } from "@/modules/settings/useGroupsUsage";
+import GroupsActionCell from "@/modules/groups/table/GroupsActionCell";
+import GroupsCountCell from "@/modules/groups/table/GroupsCountCell";
+import GroupsNameCell from "@/modules/groups/table/GroupsNameCell";
+import useGroupsUsage, { GroupUsage } from "@/modules/groups/useGroupsUsage";
+import { removeAllSpaces } from "@utils/helpers";
 
-// Peers, Access Controls, DNS, Routes, Setup Keys, Users
 export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
   {
     accessorKey: "name",
@@ -42,24 +43,25 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
     sortingFn: "text",
   },
   {
-    accessorKey: "setup_keys_count",
+    accessorKey: "users_count",
     header: ({ column }) => {
       return (
         <DataTableHeader
           column={column}
-          center={true}
-          tooltip={<div className={"text-sm normal-case"}>Setup Keys</div>}
+          tooltip={<div className={"text-xs normal-case"}>Users</div>}
         >
-          <SetupKeysIcon size={12} />
+          <TeamIcon size={12} />
         </DataTableHeader>
       );
     },
     cell: ({ row }) => (
       <GroupsCountCell
-        icon={<SetupKeysIcon size={10} />}
+        icon={<TeamIcon size={10} />}
         groupName={row.original.name}
-        text={"Setup Key(s)"}
-        count={row.original.setup_keys_count}
+        href={`/group?id=${row.original.id}&tab=users`}
+        hidden={row.original.name === "All"}
+        text={"User(s)"}
+        count={row.original.users_count}
       />
     ),
   },
@@ -69,7 +71,7 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
       return (
         <DataTableHeader
           column={column}
-          tooltip={<div className={"text-sm normal-case"}>Peers</div>}
+          tooltip={<div className={"text-xs normal-case"}>Peers</div>}
         >
           <PeerIcon size={12} />
         </DataTableHeader>
@@ -79,39 +81,20 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
       <GroupsCountCell
         icon={<PeerIcon size={10} />}
         groupName={row.original.name}
+        href={`/group?id=${row.original.id}&tab=peers`}
+        hidden={row.original.name === "All"}
         text={"Peer(s)"}
         count={row.original.peers_count}
       />
     ),
   },
-  {
-    accessorKey: "nameservers_count",
-    header: ({ column }) => {
-      return (
-        <DataTableHeader
-          column={column}
-          tooltip={<div className={"text-sm normal-case"}>DNS</div>}
-        >
-          <DNSIcon size={12} />
-        </DataTableHeader>
-      );
-    },
-    cell: ({ row }) => (
-      <GroupsCountCell
-        icon={<DNSIcon size={10} />}
-        groupName={row.original.name}
-        text={"DNS"}
-        count={row.original.nameservers_count}
-      />
-    ),
-  },
   {
     accessorKey: "policies_count",
     header: ({ column }) => {
       return (
         <DataTableHeader
           column={column}
-          tooltip={<div className={"text-sm normal-case"}>Access Controls</div>}
+          tooltip={<div className={"text-xs normal-case"}>Policies</div>}
         >
           <AccessControlIcon size={12} />
         </DataTableHeader>
@@ -121,32 +104,12 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
       <GroupsCountCell
         icon={<AccessControlIcon size={10} />}
         groupName={row.original.name}
-        text={"Access Control(s)"}
+        href={`/group?id=${row.original.id}&tab=policies`}
+        text={row.original.policies_count === 1 ? "Policy" : "Policies"}
         count={row.original.policies_count}
       />
     ),
   },
-  {
-    accessorKey: "routes_count",
-    header: ({ column }) => {
-      return (
-        <DataTableHeader
-          column={column}
-          tooltip={<div className={"text-sm normal-case"}>Network Routes</div>}
-        >
-          <NetworkRoutesIcon size={12} />
-        </DataTableHeader>
-      );
-    },
-    cell: ({ row }) => (
-      <GroupsCountCell
-        icon={<NetworkRoutesIcon size={10} />}
-        groupName={row.original.name}
-        text={"Network Route(s)"}
-        count={row.original.routes_count}
-      />
-    ),
-  },
   {
     accessorKey: "resources_count",
     header: ({ column }) => {
@@ -154,7 +117,7 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
         <DataTableHeader
           column={column}
           tooltip={
-            <div className={"text-sm normal-case"}>Network Resources</div>
+            <div className={"text-xs normal-case"}>Network Resources</div>
           }
         >
           <Layers3Icon size={12} />
@@ -165,29 +128,77 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
       <GroupsCountCell
         icon={<Layers3Icon size={10} />}
         groupName={row.original.name}
+        href={`/group?id=${row.original.id}&tab=resources`}
         text={"Network Resource(s)"}
         count={row.original.resources_count}
       />
     ),
   },
   {
-    accessorKey: "users_count",
+    accessorKey: "routes_count",
     header: ({ column }) => {
       return (
         <DataTableHeader
           column={column}
-          tooltip={<div className={"text-sm normal-case"}>Users</div>}
+          tooltip={<div className={"text-xs normal-case"}>Network Routes</div>}
         >
-          <TeamIcon size={12} />
+          <NetworkRoutesIcon size={12} />
         </DataTableHeader>
       );
     },
     cell: ({ row }) => (
       <GroupsCountCell
-        icon={<TeamIcon size={10} />}
+        icon={<NetworkRoutesIcon size={10} />}
         groupName={row.original.name}
-        text={"User(s)"}
-        count={row.original.users_count}
+        href={`/group?id=${row.original.id}&tab=network-routes`}
+        text={"Network Route(s)"}
+        count={row.original.routes_count}
+      />
+    ),
+  },
+  {
+    accessorKey: "nameservers_count",
+    header: ({ column }) => {
+      return (
+        <DataTableHeader
+          column={column}
+          tooltip={<div className={"text-xs normal-case"}>Nameservers</div>}
+        >
+          <DNSIcon size={12} />
+        </DataTableHeader>
+      );
+    },
+    cell: ({ row }) => (
+      <GroupsCountCell
+        icon={<DNSIcon size={10} />}
+        groupName={row.original.name}
+        href={`/group?id=${row.original.id}&tab=nameservers`}
+        text={"Nameserver(s)"}
+        count={row.original.nameservers_count}
+      />
+    ),
+  },
+  {
+    accessorKey: "setup_keys_count",
+    header: ({ column }) => {
+      return (
+        <DataTableHeader
+          column={column}
+          center={true}
+          tooltip={<div className={"text-xs normal-case"}>Setup Keys</div>}
+        >
+          <SetupKeysIcon size={12} />
+        </DataTableHeader>
+      );
+    },
+    cell: ({ row }) => (
+      <GroupsCountCell
+        icon={<SetupKeysIcon size={10} />}
+        groupName={row.original.name}
+        href={`/group?id=${row.original.id}&tab=setup-keys`}
+        hidden={row.original.name === "All"}
+        text={"Setup Key(s)"}
+        count={row.original.setup_keys_count}
       />
     ),
   },
@@ -213,9 +224,16 @@ export const GroupsTableColumns: ColumnDef<GroupUsage>[] = [
     accessorKey: "id",
     header: "",
     cell: ({ row }) => (
-      <GroupsActionCell group={row.original} in_use={row.getValue("in_use")} />
+      <GroupProvider group={row.original} isDetailPage={false}>
+        <GroupsActionCell group={row.original} inUse={row.getValue("in_use")} />
+      </GroupProvider>
     ),
   },
+  {
+    accessorKey: "search",
+    accessorFn: (row) => removeAllSpaces(row.name),
+    filterFn: "fuzzy",
+  },
 ];
 
 type Props = {
@@ -223,7 +241,7 @@ type Props = {
 };
 
 export default function GroupsTable({ headingTarget }: Readonly<Props>) {
-  const groups = useGroupsUsage();
+  const { data: groups, isLoading } = useGroupsUsage();
   const path = usePathname();
 
   // Default sorting state of the table
@@ -231,88 +249,74 @@ export default function GroupsTable({ headingTarget }: Readonly<Props>) {
     "netbird-table-sort" + path,
     [
       {
-        id: "name",
+        id: "in_use",
         desc: true,
       },
+      {
+        id: "name",
+        desc: false,
+      },
     ],
   );
 
   return (
-    <>
-      {groups && groups.length > 0 ? (
-        <DataTable
-          headingTarget={headingTarget}
-          text={"Groups"}
-          inset={false}
-          sorting={sorting}
-          setSorting={setSorting}
-          columns={GroupsTableColumns}
-          data={groups}
-          searchPlaceholder={"Search group..."}
-          columnVisibility={{
-            in_use: false,
-          }}
-        >
-          {(table) => (
-            <>
-              <ButtonGroup disabled={groups?.length == 0}>
-                <ButtonGroup.Button
-                  onClick={() =>
-                    table.getColumn("in_use")?.setFilterValue(undefined)
-                  }
-                  disabled={groups?.length == 0}
-                  variant={
-                    table.getColumn("in_use")?.getFilterValue() === undefined
-                      ? "tertiary"
-                      : "secondary"
-                  }
-                >
-                  All
-                </ButtonGroup.Button>
-                <ButtonGroup.Button
-                  onClick={() =>
-                    table.getColumn("in_use")?.setFilterValue(true)
-                  }
-                  disabled={groups?.length == 0}
-                  variant={
-                    table.getColumn("in_use")?.getFilterValue() === true
-                      ? "tertiary"
-                      : "secondary"
-                  }
-                >
-                  Used
-                </ButtonGroup.Button>
-                <ButtonGroup.Button
-                  disabled={groups?.length == 0}
-                  onClick={() =>
-                    table.getColumn("in_use")?.setFilterValue(false)
-                  }
-                  variant={
-                    table.getColumn("in_use")?.getFilterValue() === false
-                      ? "tertiary"
-                      : "secondary"
-                  }
-                >
-                  Unused
-                </ButtonGroup.Button>
-              </ButtonGroup>
-              <DataTableRowsPerPage
-                table={table}
-                disabled={groups?.length == 0}
-              />
-            </>
-          )}
-        </DataTable>
-      ) : (
-        <div className={"bg-nb-gray-950 overflow-hidden"}>
-          <NoResults
-            className={"py-3"}
-            title={"No groups"}
-            description={"You don't have any groups created yet."}
-            icon={<FolderGit2Icon size={20} className={"fill-nb-gray-300"} />}
-          />
-        </div>
+    <DataTable
+      headingTarget={headingTarget}
+      text={"Groups"}
+      sorting={sorting}
+      isLoading={isLoading}
+      setSorting={setSorting}
+      columns={GroupsTableColumns}
+      data={groups}
+      searchPlaceholder={"Search group by name..."}
+      rightSide={() => <AddGroupButton />}
+      columnVisibility={{
+        in_use: false,
+        search: false,
+      }}
+    >
+      {(table) => (
+        <>
+          <ButtonGroup disabled={groups?.length == 0}>
+            <ButtonGroup.Button
+              onClick={() =>
+                table.getColumn("in_use")?.setFilterValue(undefined)
+              }
+              disabled={groups?.length == 0}
+              variant={
+                table.getColumn("in_use")?.getFilterValue() === undefined
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              All
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              onClick={() => table.getColumn("in_use")?.setFilterValue(true)}
+              disabled={groups?.length == 0}
+              variant={
+                table.getColumn("in_use")?.getFilterValue() === true
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Used
+            </ButtonGroup.Button>
+            <ButtonGroup.Button
+              disabled={groups?.length == 0}
+              onClick={() => table.getColumn("in_use")?.setFilterValue(false)}
+              variant={
+                table.getColumn("in_use")?.getFilterValue() === false
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Unused
+            </ButtonGroup.Button>
+          </ButtonGroup>
+          <DataTableRowsPerPage table={table} disabled={groups?.length == 0} />
+        </>
       )}
-    </>
+    </DataTable>
   );
 }

src/modules/groups/useGroupHelper.tsx

@@ -72,6 +72,8 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
   };
 
   const removePeerFromGroup = async (g: Group) => {
+    if (g.name === "All") return Promise.resolve(g);
+
     const newPeerGroups = g.peers?.filter((p) => {
       const groupPeer = p as GroupPeer;
       return groupPeer.id !== peer?.id;

src/modules/groups/useGroupIdentification.ts

@@ -6,13 +6,15 @@ type Props = {
 };
 
 export const useGroupIdentification = ({ id, issued }: Props) => {
-  const isJWTGroup = issued === GroupIssued.JWT;
   const isOktaGroup = !!id?.includes("okta");
   const isGoogleGroup = !!id?.includes("google");
   const isAzureGroup = !!id?.includes("azure");
+  const isJumpcloudGroup = !!id?.includes("jumpcloud");
+  const isOIDCGroup = !!id?.includes("oidc");
 
-  const isRegularGroup =
-    !isJWTGroup && !isOktaGroup && !isGoogleGroup && !isAzureGroup;
+  const isJWTGroup = issued === GroupIssued.JWT;
+  const isIntegrationGroup = issued === GroupIssued.INTEGRATION;
+  const isRegularGroup = issued === GroupIssued.API || isJWTGroup;
 
   return {
     isOktaGroup,
@@ -20,5 +22,8 @@ export const useGroupIdentification = ({ id, issued }: Props) => {
     isAzureGroup,
     isJWTGroup,
     isRegularGroup,
+    isJumpcloudGroup,
+    isOIDCGroup,
+    isIntegrationGroup,
   };
 };

src/modules/groups/useGroupsUsage.tsx

@@ -1,16 +1,13 @@
 import useFetchApi from "@utils/api";
 import { useMemo } from "react";
-import { Group, GroupIssued } from "@/interfaces/Group";
+import { Group } from "@/interfaces/Group";
 import { NameserverGroup } from "@/interfaces/Nameserver";
 import { Policy } from "@/interfaces/Policy";
 import { Route } from "@/interfaces/Route";
 import { SetupKey } from "@/interfaces/SetupKey";
 import { User } from "@/interfaces/User";
 
-export interface GroupUsage {
-  id: string;
-  name: string;
-  issued: GroupIssued;
+export interface GroupUsage extends Group {
   peers_count: number;
   policies_count: number;
   nameservers_count: number;
@@ -22,7 +19,7 @@ export interface GroupUsage {
 
 export default function useGroupsUsage() {
   const { data: groups, isLoading: isGroupsLoading } =
-    useFetchApi<Group[]>(`/groups`); // Groups , Peers count
+    useFetchApi<Group[]>(`/groups`); // Groups, Peers count
   const { data: policies, isLoading: isPoliciesLoading } =
     useFetchApi<Policy[]>(`/policies`); // Policies
   const { data: nameservers, isLoading: isNameserversLoading } =
@@ -60,12 +57,6 @@ export default function useGroupsUsage() {
       .filter((u) => u !== undefined);
   }, [nameservers, isNameserversLoading]);
 
-  const routesGroups = useMemo(() => {
-    if (isRoutesLoading) return;
-    if (!routes) return [];
-    return routes?.map((route) => route.groups).filter((u) => u !== undefined);
-  }, [routes, isRoutesLoading]);
-
   const setupKeysGroups = useMemo(() => {
     if (isSetupKeysLoading) return;
     if (!setupKeys) return [];
@@ -100,8 +91,9 @@ export default function useGroupsUsage() {
     isUsersLoading,
   ]);
 
-  return useMemo(() => {
+  const groupsUsage = useMemo(() => {
     if (isLoading) return [];
+    if (isRoutesLoading) return [];
     if (!groups) return [];
     return groups?.map((group) => {
       const policyCount = policiesGroups?.filter((policy) => {
@@ -112,9 +104,20 @@ export default function useGroupsUsage() {
         return nameserver.includes(group.id as string);
       }).length;
 
-      const routeCount = routesGroups?.filter((route) => {
-        return route.includes(group.id as string);
-      }).length;
+      const routeCount = (
+        routes?.filter((route) => {
+          const groupId = group.id as string;
+          const isInDistributionGroups =
+            route.groups?.includes(groupId) ?? false;
+          const isInAccessControlGroups =
+            route.access_control_groups?.includes(groupId) ?? false;
+          const isInPeerGroups = route.peer_groups?.includes(groupId) ?? false;
+
+          return (
+            isInAccessControlGroups || isInDistributionGroups || isInPeerGroups
+          );
+        }) || []
+      ).length;
 
       const setupKeyCount = setupKeysGroups?.filter((setupKey) => {
         return setupKey.includes(group.id as string);
@@ -125,9 +128,7 @@ export default function useGroupsUsage() {
       }).length;
 
       return {
-        id: group.id,
-        issued: group.issued,
-        name: group.name,
+        ...group,
         peers_count: group.peers_count,
         resources_count: group.resources_count,
         policies_count: policyCount,
@@ -142,8 +143,14 @@ export default function useGroupsUsage() {
     groups,
     policiesGroups,
     nameserversGroups,
-    routesGroups,
+    routes,
+    isRoutesLoading,
     setupKeysGroups,
     usersGroups,
   ]);
+
+  return {
+    data: groupsUsage,
+    isLoading,
+  };
 }

src/modules/networks/NetworkProvider.tsx

@@ -12,10 +12,14 @@ import NetworkModal from "@/modules/networks/NetworkModal";
 import NetworkResourceModal from "@/modules/networks/resources/NetworkResourceModal";
 import { ResourceGroupModal } from "@/modules/networks/resources/ResourceGroupModal";
 import NetworkRoutingPeerModal from "@/modules/networks/routing-peers/NetworkRoutingPeerModal";
+import { Policy } from "@/interfaces/Policy";
+import PoliciesProvider from "@/contexts/PoliciesProvider";
 
 type Props = {
   children: React.ReactNode;
   network?: Network;
+  onResourceUpdate?: () => void;
+  onResourceDelete?: () => void;
 };
 
 const NetworksContext = React.createContext(
@@ -29,6 +33,7 @@ const NetworksContext = React.createContext(
       resource?: NetworkResource,
     ) => void;
     openPolicyModal: (network?: Network, resource?: NetworkResource) => void;
+    openEditPolicyModal: (policy: Policy) => void;
     deleteNetwork: (network: Network) => Promise<void>;
     deleteResource: (network: Network, resource: NetworkResource) => void;
     deleteRouter: (network: Network, router: NetworkRouter) => void;
@@ -36,7 +41,12 @@ const NetworksContext = React.createContext(
   },
 );
 
-export const NetworkProvider = ({ children, network }: Props) => {
+export const NetworkProvider = ({
+  children,
+  network,
+  onResourceDelete,
+  onResourceUpdate,
+}: Props) => {
   const { mutate } = useSWRConfig();
   const { confirm } = useDialog();
   const deleteCall = useApiCall("/networks").del;
@@ -50,6 +60,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
     description?: string;
     destinationGroups?: Group[] | string[];
   }>();
+  const [currentPolicy, setCurrentPolicy] = useState<Policy>();
 
   const [routingPeerModal, setRoutingPeerModal] = useState(false);
   const [networkModal, setNetworkModal] = useState(false);
@@ -112,6 +123,11 @@ export const NetworkProvider = ({ children, network }: Props) => {
     setPolicyModal(true);
   };
 
+  const openEditPolicyModal = (policy: Policy) => {
+    setCurrentPolicy(policy);
+    setPolicyModal(true);
+  };
+
   const deleteNetwork = async (network: Network) => {
     const choice = await confirm({
       title: `Delete network '${network.name}'?`,
@@ -160,6 +176,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
       loadingMessage: "Deleting resource...",
       promise: deleteCall({}, `/${network.id}/resources/${resource.id}`).then(
         () => {
+          onResourceDelete?.();
           mutate(`/networks/${network.id}/resources`);
           mutate("/groups");
         },
@@ -238,6 +255,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
         openResourceModal,
         openResourceGroupModal,
         openPolicyModal,
+        openEditPolicyModal,
         deleteNetwork,
         deleteResource,
         deleteRouter,
@@ -259,31 +277,37 @@ export const NetworkProvider = ({ children, network }: Props) => {
           mutate(`/networks/${n.id}`);
         }}
       />
-      <Modal
-        open={policyModal}
-        onOpenChange={(state) => {
-          setPolicyModal(state);
-          setPolicyDefaultSettings(undefined);
-        }}
-      >
-        <AccessControlModalContent
-          key={policyModal ? "1" : "0"}
-          initialDestinationGroups={policyDefaultSettings?.destinationGroups}
-          initialName={policyDefaultSettings?.name}
-          initialDescription={policyDefaultSettings?.description}
-          onSuccess={async (p) => {
-            setPolicyModal(false);
+      <PoliciesProvider>
+        <Modal
+          open={policyModal}
+          onOpenChange={(state) => {
+            setPolicyModal(state);
             setPolicyDefaultSettings(undefined);
-            mutate("/networks");
-            if (network) {
-              mutate(`/networks/${network.id}/resources`);
-              mutate(`/networks/${network.id}`);
-            } else {
-              currentNetwork && (await askForRoutingPeer(currentNetwork));
-            }
+            setCurrentPolicy(undefined);
           }}
-        />
-      </Modal>
+        >
+          <AccessControlModalContent
+            key={policyModal ? "1" : "0"}
+            initialDestinationGroups={policyDefaultSettings?.destinationGroups}
+            initialName={policyDefaultSettings?.name}
+            initialDescription={policyDefaultSettings?.description}
+            policy={currentPolicy}
+            onSuccess={async (p) => {
+              setPolicyModal(false);
+              setPolicyDefaultSettings(undefined);
+              setCurrentPolicy(undefined);
+              mutate("/networks");
+              if (network) {
+                onResourceUpdate?.();
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              } else {
+                currentNetwork && (await askForRoutingPeer(currentNetwork));
+              }
+            }}
+          />
+        </Modal>
+      </PoliciesProvider>
       {currentNetwork && (
         <>
           <NetworkRoutingPeerModal
@@ -329,6 +353,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
               setCurrentResource(undefined);
               mutate("/groups");
               if (network) {
+                onResourceUpdate?.();
                 mutate(`/networks/${network.id}/resources`);
                 mutate(`/networks/${network.id}`);
               }
@@ -356,6 +381,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
               mutate("/networks");
               mutate("/groups");
               if (network) {
+                onResourceUpdate?.();
                 mutate(`/networks/${network.id}/resources`);
                 mutate(`/networks/${network.id}`);
               }

src/modules/networks/resources/ResourceActionCell.tsx

@@ -62,7 +62,7 @@ export const ResourceActionCell = ({ resource }: Props) => {
           >
             <div className={"flex gap-3 items-center"}>
               <Trash2 size={14} className={"shrink-0"} />
-              Remove
+              Delete
             </div>
           </DropdownMenuItem>
         </DropdownMenuContent>

src/modules/networks/resources/ResourceEnabledCell.tsx

@@ -11,8 +11,12 @@ import { useNetworksContext } from "@/modules/networks/NetworkProvider";
 
 type Props = {
   resource: NetworkResource;
+  mutateAllResourcesOnUpdate?: boolean;
 };
-export const ResourceEnabledCell = ({ resource }: Props) => {
+export const ResourceEnabledCell = ({
+  resource,
+  mutateAllResourcesOnUpdate,
+}: Props) => {
   const { permission } = usePermissions();
 
   const { mutate } = useSWRConfig();
@@ -40,6 +44,7 @@ export const ResourceEnabledCell = ({ resource }: Props) => {
           .filter((g) => g !== undefined),
         enabled,
       }).then(() => {
+        mutateAllResourcesOnUpdate && mutate("/networks/resources");
         mutate(`/networks/${network?.id}/resources`);
       }),
     });