diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4eb7e76fd2..fbebc08848 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
       "dependencies": {
         "@casl/ability": "^6.5.0",
         "@casl/react": "^3.1.0",
diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx
index 748f8a2e74..bd418d502c 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupMembersModal.tsx
@@ -2,7 +2,7 @@ import { useMemo,useState } from "react";
 import { faMagnifyingGlass,faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
     Button,
@@ -39,7 +39,6 @@ export const OrgGroupMembersModal = ({
     handlePopUpToggle
 }: Props) => {
     const [searchMemberFilter, setSearchMemberFilter] = useState("");
-    const { createNotification } = useNotificationContext();
     
     const popUpData = popUp?.groupMembers?.data as {
         slug: string;
diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx
index c4dd2ad4ea..3e1965f76d 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx
@@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import {
@@ -33,7 +33,6 @@ export const OrgGroupModal = ({
   handlePopUpToggle
 }: Props) => {
     const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
     const { data: roles } = useGetOrgRoles(currentOrg?.id || "");
     const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateGroup();
     const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateGroup();
diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
index 01352e69fd..320c115fd6 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
     Button,
@@ -21,7 +21,6 @@ import { OrgGroupModal } from "./OrgGroupModal";
 import { OrgGroupsTable } from "./OrgGroupsTable";
 
 export const OrgGroupsSection = () => {
-    const { createNotification } = useNotificationContext();
     const { subscription } = useSubscription();
     const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
         
diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
index c5fe56aa3d..79e08bc142 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faMagnifyingGlass, faPencil, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
@@ -52,7 +52,6 @@ type Props = {
 export const OrgGroupsTable = ({
     handlePopUpOpen
 }: Props) => {
-    const { createNotification } = useNotificationContext();
     const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
     const { currentOrg } = useOrganization();
     const orgId = currentOrg?.id || "";
diff --git a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx
index 6d0948f5ca..333f69cd88 100644
--- a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx
+++ b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
     Button,
     FormControl,
@@ -41,7 +41,6 @@ export const GroupModal = ({
     popUp,
     handlePopUpToggle
 }: Props) => {
-    const { createNotification } = useNotificationContext();
     const { currentOrg } = useOrganization();
     const { currentWorkspace } = useWorkspace();
 
diff --git a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
index 6421cf6a70..8812d9c9a0 100644
--- a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
+++ b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx
@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -207,7 +207,6 @@ export const GroupRoles = ({
   groupSlug
 }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
 
diff --git a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
index 72e6e2d74f..5fa69b4333 100644
--- a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
     Button,
@@ -15,7 +15,6 @@ import { GroupModal } from "./GroupModal";
 import { GroupTable } from "./GroupsTable";
 
 export const GroupsSection = () => {
-    const { createNotification } = useNotificationContext();
     const { currentWorkspace } = useWorkspace();
 
     const workspaceId = currentWorkspace?.id ?? "";
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
index 572325d4ad..fd65cfd580 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx
@@ -15,6 +15,7 @@ type Props = {
   formName:
     | "role"
     | "member"
+    | "groups"
     | "integrations"
     | "webhooks"
     | "service-tokens"