diff --git a/veda-auth-portal/package-lock.json b/veda-auth-portal/package-lock.json
index f1b291d..53a2459 100644
--- a/veda-auth-portal/package-lock.json
+++ b/veda-auth-portal/package-lock.json
@@ -1708,6 +1708,15 @@
         "@types/lodash": "*"
       }
     },
+    "@types/node": {
+      "version": "22.5.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
+      "integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~6.19.2"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -3142,6 +3151,11 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-tag-input-component": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-tag-input-component/-/react-tag-input-component-2.0.2.tgz",
+      "integrity": "sha512-dydI9luVwwv9vrjE5u1TTnkcOVkOVL6mhFti8r6hLi78V2F2EKWQOLptURz79UYbDHLSk6tnbvGl8FE+sMpADg=="
+    },
     "regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -3349,6 +3363,12 @@
         "@typescript-eslint/utils": "8.1.0"
       }
     },
+    "undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true
+    },
     "update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
diff --git a/veda-auth-portal/package.json b/veda-auth-portal/package.json
index 7bc7893..1eb76f2 100644
--- a/veda-auth-portal/package.json
+++ b/veda-auth-portal/package.json
@@ -21,10 +21,12 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-oidc-context": "^3.1.0",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.1",
+    "react-tag-input-component": "^2.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^22.5.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
diff --git a/veda-auth-portal/src/App.css b/veda-auth-portal/src/App.css
deleted file mode 100644
index e69de29..0000000
diff --git a/veda-auth-portal/src/App.tsx b/veda-auth-portal/src/App.tsx
index 127299e..e27d506 100644
--- a/veda-auth-portal/src/App.tsx
+++ b/veda-auth-portal/src/App.tsx
@@ -1,7 +1,6 @@
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 import { Heading } from '@chakra-ui/react';
 import { Groups } from './components/Groups';
-import './App.css';
 import { NavContainer } from './components/NavContainer';
 import { GroupDetails } from './components/Groups/GroupDetails';
 import { Login } from './components/Login';
@@ -25,7 +24,7 @@ export default function App() {
         <Route path="/" element={<Login />} />
           <Route path="/applications" element={<ProtectedComponent Component={NotImplemented}  />} />
           <Route path="/users" element={<ProtectedComponent Component={NotImplemented}  />} />
-          <Route path="/groups/:id" element={<ProtectedComponent Component={GroupDetails}  />} />
+          <Route path="/groups/:id/:path" element={<ProtectedComponent Component={GroupDetails}  />} />
           <Route path="/groups" element={<ProtectedComponent Component={Groups}  />} />
       </Routes>
     </BrowserRouter>
diff --git a/veda-auth-portal/src/components/Groups/AddGroupMemberModal.tsx b/veda-auth-portal/src/components/Groups/AddGroupMemberModal.tsx
new file mode 100644
index 0000000..66dc3c3
--- /dev/null
+++ b/veda-auth-portal/src/components/Groups/AddGroupMemberModal.tsx
@@ -0,0 +1,122 @@
+import {
+    useToast,
+    Button, Input, Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton, FormControl,
+    FormLabel,
+    Stack,
+    Select
+} from "@chakra-ui/react";
+import { BACKEND_URL } from "../../lib/constants";
+import axios, { AxiosResponse } from "axios";
+import React from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+  
+  export const AddGroupMemberModal = ({
+    groupId,
+    isOpen,
+    onClose,
+  }: {
+    groupId: string | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+  }) => {
+    const toast = useToast();
+    const [newEmail, setNewEmail] = React.useState("");
+    const [newRole, setNewRole] = React.useState("MEMBER");
+    const auth = useAuth();
+    const navigate = useNavigate();
+
+    const handleAddMember = async () => {
+      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+  
+      if (!emailRegex.test(newEmail)) {
+        toast({
+          title: "Invalid email",
+          status: "error",
+          duration: 2000,
+          isClosable: true,
+        });
+        return;
+      }
+  
+      const resp = await axios
+        .post(
+          `${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members`,
+          {
+            username: newEmail,
+            type: newRole,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${auth.user?.access_token}`,
+            },
+          }
+        )
+        .catch((error) => {
+          toast({
+            title: "Error adding member",
+            description: error.response.data.error,
+            status: "error",
+            duration: 2000,
+            isClosable: true,
+          });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }) as AxiosResponse<any, any>;
+      
+      if (resp.status > 199 && resp.status < 300) {
+        onClose();
+        navigate(0);
+      }
+    };
+  
+    return (
+      <>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Add Member</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Stack spacing={4}>
+                <FormControl>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder="name@example.com"
+                    value={newEmail}
+                    onChange={(e) => setNewEmail(e.target.value)}
+                  />
+                </FormControl>
+  
+                <FormControl>
+                  <FormLabel>Role</FormLabel>
+                  <Select
+                    value={newRole}
+                    onChange={(e) => setNewRole(e.target.value)}
+                  >
+                    <option value="MEMBER">Member</option>
+                    <option value="OWNER">Owner</option>
+                    <option value="ADMIN">ADMIN</option>
+                  </Select>
+                </FormControl>
+  
+                <Button colorScheme="blue" onClick={handleAddMember}>
+                  Add
+                  {newEmail && newRole ? ` ${newEmail} as ${newRole}` : ""}
+                </Button>
+              </Stack>
+            </ModalBody>
+  
+            <ModalFooter />
+          </ModalContent>
+        </Modal>
+      </>
+    );
+  };
+  
\ No newline at end of file
diff --git a/veda-auth-portal/src/components/Groups/CreateGroupModal.tsx b/veda-auth-portal/src/components/Groups/CreateGroupModal.tsx
new file mode 100644
index 0000000..410c42d
--- /dev/null
+++ b/veda-auth-portal/src/components/Groups/CreateGroupModal.tsx
@@ -0,0 +1,231 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  VStack,
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+  Box,
+  useToast
+} from '@chakra-ui/react';
+import { Group } from '../../interfaces/Groups';
+import { useState } from 'react';
+import { TagsInput } from "react-tag-input-component";
+import axios from 'axios';
+import { BACKEND_URL } from '../../lib/constants';
+import { useNavigate } from 'react-router-dom';
+
+export const CreateGroupModal = ({isOpen, onClose, auth }: {
+  isOpen: boolean;
+  onClose: () => void;
+  auth: any;
+}) => {
+  const [group, setGroup] = useState({} as Group);
+  const toast = useToast();
+  const navigate = useNavigate();
+
+  const handleSubmit = () => {
+    if (!group.id || !group.name || !group.description) {
+      toast({
+        title: 'Invalid input',
+        description: 'Please fill out all required fields',
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    const groupObj = {
+      ...group,
+      owner_id: auth?.user?.profile?.email,
+    }
+
+    axios.post(`${BACKEND_URL}/api/v1/group-management/groups`, groupObj, {
+      headers: {
+        Authorization: `Bearer ${auth.user.access_token}`
+      }
+    }).then(() => {
+      onClose();
+      navigate(0);
+    }).catch((err) => {
+      console.log(err);
+      toast({
+        title: 'An error occurred',
+        description: err.response?.data?.message || 'Please try again later',
+        status: 'error',
+        duration: 3000,
+        isClosable: true,
+      });
+    });
+  };
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Create Group</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack
+              spacing={4}
+            >
+              <FormControl>
+                <FormLabel>Id</FormLabel>
+                <Input placeholder='must be unique from all other groups'
+                  value={group.id}
+                  onChange={(e) => setGroup((prev) => ({...prev, id: e.target.value}))}
+                />
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Name</FormLabel>
+                <Input placeholder='i.e. Dashboard Viewers'
+                  value={group.name}
+                  onChange={(e) => setGroup((prev) => ({...prev, name: e.target.value}))}
+                />
+              </FormControl>
+
+
+              <FormControl>
+                <FormLabel>Description</FormLabel>
+                <Textarea placeholder='i.e. viewers and editors of the dashboard'
+                  value={group.description}
+                  onChange={(e) => setGroup((prev) => ({...prev, description: e.target.value}))}
+                />
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Parent Group Id (optional)</FormLabel>
+                <Input 
+                  placeholder=''
+                  value={group.parent_id}
+                  onChange={(e) => setGroup((prev) => ({...prev, parent_id: e.target.value}))}
+                />
+              </FormControl>
+
+
+              <FormControl>
+                <FormLabel>Attributes (optional)</FormLabel>
+                {
+                  group.attributes?.map((attr) => {
+                    return (
+                      <Box key={attr.id} border='1px solid lightgray' rounded='md' mt={2} p={2}>
+                        <Input placeholder='key'
+                          value={attr.key}
+                          onChange={(e) => {
+                            setGroup((prev) => ({
+                              ...prev,
+                              attributes: prev.attributes?.map((a) => {
+                                if (a.id === attr.id) {
+                                  return {...a, key: e.target.value}
+                                }
+                                return a;
+                              })
+                            }))
+                          }}
+                        />
+
+                        <TagsInput
+                          value={attr.value}
+                          onChange={(tags) => {
+                            setGroup((prev) => ({
+                              ...prev,
+                              attributes: prev.attributes?.map((a) => {
+                                if (a.id === attr.id) {
+                                  return {...a, value: tags}
+                                }
+                                return a;
+                              })
+                            }))
+                          }}
+                          name="fruits"
+                          placeHolder="i.e. grafana:viewer"
+                        />
+
+                        <Button
+                          size='sm'
+                          colorScheme='red'
+                          mt={2}
+                          onClick={() => {
+                            setGroup((prev) => ({
+                              ...prev,
+                              attributes: prev.attributes?.filter((a) => a.id !== attr.id)
+                            }))
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </Box>
+                    )
+                  })
+                }
+
+                <Button
+                  mt={2}
+                  onClick={() => {
+                    setGroup((prev) => ({
+                      ...prev,
+                      attributes: [
+                        ...(prev.attributes || []),
+                        {
+                          id: Date.now(),
+                          key: '',
+                          value: []
+                        }
+                      ]
+                    }))
+                  }}
+                >
+                  Add Attribute
+                </Button>
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Client roles (enter to create a new role)</FormLabel>
+                <TagsInput
+                  value={group.client_roles}
+                  onChange={(tags) => {
+                    setGroup((prev) => ({...prev, client_roles: tags}))}}
+                  name="fruits"
+                  placeHolder="i.e. grafana:viewer"
+                />
+              </FormControl>
+
+
+              <FormControl>
+                <FormLabel>Realm roles (enter to create a new role)</FormLabel>
+                <TagsInput
+                  value={group.realm_roles}
+                  onChange={(tags) => {
+                    setGroup((prev) => ({...prev, realm_roles: tags}))}}
+                  name="fruits"
+                  placeHolder="i.e. grafana:viewer"
+                />
+              </FormControl>
+
+              <Button colorScheme='blue'  onClick={handleSubmit}>
+                Submit
+              </Button>
+            </VStack>
+
+            
+          </ModalBody>
+
+          <ModalFooter>
+           
+          </ModalFooter>
+        </ModalContent>
+
+      </Modal>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/veda-auth-portal/src/components/Groups/GroupDetails.tsx b/veda-auth-portal/src/components/Groups/GroupDetails.tsx
index b369bcd..4f76a4c 100644
--- a/veda-auth-portal/src/components/Groups/GroupDetails.tsx
+++ b/veda-auth-portal/src/components/Groups/GroupDetails.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React from "react";
+import { Link, useParams } from "react-router-dom";
 import { NavContainer } from "../NavContainer";
 import { PageTitle } from "../PageTitle";
 import { FaArrowLeft } from "react-icons/fa6";
@@ -10,19 +10,10 @@ import {
   Text,
   Tabs, TabList, TabPanels, Tab, TabPanel
 } from "@chakra-ui/react";
-import { useEffect } from "react";
-import { GroupMembership } from "../../interfaces/GroupMembership";
 import { GroupSettings } from "./GroupSettings";
 import { GroupMembers } from "./GroupMembers";
-
-const MOCK_GROUP_BASIC_INFO = {
-  "id": "group_1",
-  "name": "group_1",
-  "created_time": "1723691939603",
-  "last_modified_time": "1723691939606",
-  "description": "this is a test description for the group",
-  "owner_id": "ganning.xu@gatech.edu"
-};
+import { useApi } from "../../hooks/useApi";
+import { BACKEND_URL } from "../../lib/constants";
 
 interface CustomTabProps {
   children: React.ReactNode;
@@ -41,14 +32,9 @@ const CustomTab = ({ children }: CustomTabProps) => {
 }
 
 export const GroupDetails = () => {
-  const [basicInfo, setBasicInfo] = useState<GroupMembership | null>(null);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setBasicInfo(MOCK_GROUP_BASIC_INFO);
-    }, 500);
-  }, []);
-
+  const { id, path } = useParams();
+  const defaultIndex = path === 'members' ? 1 : 0;
+  const basicGroupInfo = useApi(`${BACKEND_URL}/api/v1/group-management/groups/${id}`);
 
   return (
     <>
@@ -61,11 +47,17 @@ export const GroupDetails = () => {
         </Link>
 
         <Box mt={4}>
-          <PageTitle>{basicInfo?.name}</PageTitle>
-          <Text color="default.secondary" mt={2}>{basicInfo?.description}</Text>
+          <PageTitle>{basicGroupInfo?.data?.name}</PageTitle>
+          <Text color="default.secondary" mt={2}>{basicGroupInfo?.data?.description}</Text>
         </Box>
 
-        <Tabs>
+        <Tabs 
+          defaultIndex={defaultIndex}
+          onChange={(index) => {
+            window.history.replaceState(null, '', `/groups/${id}/${index === 0 ? 'settings' : 'members'}`);
+          }}
+          isLazy
+        >
           <TabList mt={4}>
             <CustomTab>Settings</CustomTab>
             <CustomTab>Members</CustomTab>
@@ -73,10 +65,10 @@ export const GroupDetails = () => {
 
           <TabPanels>
             <TabPanel>
-              <GroupSettings groupId={basicInfo?.id} />
+              <GroupSettings groupId={id} />
             </TabPanel>
             <TabPanel>
-              <GroupMembers groupId={basicInfo?.id} />
+              <GroupMembers groupId={id} />
             </TabPanel>
           </TabPanels>
       </Tabs>
diff --git a/veda-auth-portal/src/components/Groups/GroupMembers.tsx b/veda-auth-portal/src/components/Groups/GroupMembers.tsx
index d3f4793..079c199 100644
--- a/veda-auth-portal/src/components/Groups/GroupMembers.tsx
+++ b/veda-auth-portal/src/components/Groups/GroupMembers.tsx
@@ -13,27 +13,20 @@ import {
   Tbody,
   Td, Th,
   Thead,
-  Tr
+  Tr, useDisclosure
 } from '@chakra-ui/react';
 import { PageTitle } from '../PageTitle';
 import { ActionButton } from '../ActionButton';
 import { CiSearch } from 'react-icons/ci';
 import { IoIosAdd } from "react-icons/io";
-
-const MOCK_MEMBERS = [
-  {
-    name: "Amy Brown",
-    email: "am748@iu.edu"
-  },
-  {
-    name: "Bob Smith",
-    email: "bobSmith@gmail.com"
-  },
-  {
-    name: "Charlie Green",
-    email: "charlieGreen@gmail.com"
-  }
-]
+import { useApi } from '../../hooks/useApi';
+import { BACKEND_URL } from '../../lib/constants';
+import axios from 'axios';
+import React from 'react';
+import { useAuth } from 'react-oidc-context';
+import { AddGroupMemberModal } from './AddGroupMemberModal';
+import { Member } from '../../interfaces/Groups';
+import { useNavigate } from 'react-router-dom';
 
 interface GroupMembersProps {
   groupId: string | undefined;
@@ -41,11 +34,55 @@ interface GroupMembersProps {
 
 export const GroupMembers = ({ groupId }: GroupMembersProps) => {
   const toast = useToast();
-  if (!groupId) {
-    return (
-      <Text>No group selected</Text>
-    )
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [search, setSearch] = React.useState('');
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  const groupMembers = useApi(`${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members`);
+
+  
+    console.log(groupMembers.data?.profiles);
+    let filteredMembers = [];
+
+    if (!groupMembers.isPending && groupMembers.data) {
+      const lowerSearch = search.toLowerCase();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      filteredMembers = groupMembers.data.profiles.filter((member: any) => {
+        return member.first_name.toLowerCase().includes(lowerSearch)
+          || member.last_name.toLowerCase().includes(lowerSearch)
+          || member.email.toLowerCase().includes(lowerSearch);
+      })
+    }
+
+  const handleRemoveMember = async (email: string) => {
+    const resp = await axios.delete(`${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members/${email}`, {
+      headers: {
+        Authorization: `Bearer ${auth.user?.access_token}`
+      }
+    });
+
+    if (resp.status > 199 && resp.status < 300) {
+      toast({
+        title: 'Member removed',
+        status: 'success',
+        duration: 2000,
+        isClosable: true
+      })
+    } else {
+      toast({
+        title: 'Error removing member',
+        status: 'error',
+        duration: 2000,
+        isClosable: true
+      })
+    }
   }
+
+  if (groupMembers.isPending) {
+    return <Text>Loading...</Text>
+  }
+
   return (
     <>
       <Box bg='gray.100' p={4} rounded='lg'>
@@ -96,42 +133,52 @@ export const GroupMembers = ({ groupId }: GroupMembersProps) => {
             _hover={{
               borderColor: 'black'
             }}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
           />
         </InputGroup>
         <Box>
           <ActionButton
             icon={IoIosAdd}
-            onClick={() => {
-              console.log('Search')
-            }}>
+            onClick={onOpen}>
               Add members
             </ActionButton>
         </Box>
 
+        <AddGroupMemberModal isOpen={isOpen} onClose={onClose} groupId={groupId}  />
+
+
       </Flex>
 
       <TableContainer mt={8}>
-        <Table size='sm'>
+        <Table size='md'>
           <Thead>
             <Tr>
               <Th>Name</Th>
+              <Th>Role</Th>
               <Th>Email</Th>
               <Th>Action</Th>
             </Tr>
           </Thead>
           <Tbody>
             {
-              MOCK_MEMBERS.map((member, index) => (
-                <Tr key={index}>
-                  <Td>{member.name}</Td>
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              filteredMembers.map((member: Member) => (
+                <Tr key={member.email}>
+                  <Td>{`${member.first_name} ${member.last_name}`}</Td>
+                  <Td>{member.membership_type}</Td>
                   <Td>{member.email}</Td>
                   <Td>
                     <Button
                       variant='link'
                       color='blue.400'
                       size='sm'
+                      onClick={() => {
+                        handleRemoveMember(member.email);
+                        navigate(0);
+                      }}
                     >
-                      Remove
+                      Disable
                     </Button>
                   </Td>
                 </Tr>
diff --git a/veda-auth-portal/src/components/Groups/GroupSettings.tsx b/veda-auth-portal/src/components/Groups/GroupSettings.tsx
index 62f7a9e..adaa1bb 100644
--- a/veda-auth-portal/src/components/Groups/GroupSettings.tsx
+++ b/veda-auth-portal/src/components/Groups/GroupSettings.tsx
@@ -15,38 +15,19 @@ import {
   Td, TableContainer,
   Code,
   IconButton,
-  Switch
+  Switch,
+  useToast
 } from '@chakra-ui/react';
 import { PageTitle } from '../PageTitle';
 import { FiTrash2 } from "react-icons/fi";
 import { ActionButton } from '../ActionButton';
-
-const MOCK_GROUP_MANAGERS = [
-  {
-    email: "ganning.xu@gatech.edu",
-  },
-  {
-    email: "testemail@gmail.com"
-  },
-  {
-    email: "bob@gmail.com"
-  }
-]
-
-const MOCK_ROLES = [
-  {
-    name: "grafana:admin",
-    description: "View dashboard."
-  },
-  {
-    name: "stac:admin",
-    description: "Can view group settings and access group resources."
-  },
-  {
-    name: "grafana:editor",
-    description: "Can view group settings and access group resources."
-  }
-]
+import { BACKEND_URL } from '../../lib/constants';
+import { useEffect } from 'react';
+import React from 'react';
+import { useAuth } from 'react-oidc-context';
+import { Group, Member } from '../../interfaces/Groups';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
 
 interface GroupSettingsProps {
   groupId: string | undefined;
@@ -66,11 +47,47 @@ const LeftRightLayout = ({ left, right }: { left: React.ReactNode, right: React.
 }
 
 export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
-  if (!groupId) {
-    return (
-      <Text>No group selected</Text>
-    )
+  const [name, setName] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [owner, setOwner] = React.useState('');
+  const [groupManagers, setGroupManagers] = React.useState([]);
+  const [roles, setRoles] = React.useState([] as string[] | undefined);
+  const auth = useAuth();
+  const toast = useToast();
+  const navigate = useNavigate();
+
+  const customFetch = async (url: string, options?: RequestInit) => {
+    const resp = await fetch(url, {
+      ...options,
+      headers: {
+        ...options?.headers,
+        'Authorization': `Bearer ${auth?.user?.access_token}`
+      }
+    });
+
+    const data = await resp.json();
+
+    return data;
   }
+
+  useEffect(() => {
+    (async () => {
+      const groupBasicInfo:Group = await customFetch(`${BACKEND_URL}/api/v1/group-management/groups/${groupId}`);
+      console.log(groupBasicInfo);
+      setName(groupBasicInfo.name);
+      setDescription(groupBasicInfo.description);
+      setOwner(groupBasicInfo.owner_id);
+      setRoles(groupBasicInfo.client_roles);
+
+      const groupMembers = await customFetch(`${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members`);
+      const groupManagers = groupMembers.profiles.filter((member: Member) => member.membership_type === 'ADMIN');
+      setGroupManagers(groupManagers);
+
+    })();
+  }, [])
+
+
+
   return (
     <>
       <PageTitle size="md">Group Settings</PageTitle>
@@ -86,11 +103,20 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
             <Stack spacing={4}>
               <FormControl color='default.default'>
                 <FormLabel>Name</FormLabel>
-                <Input type='text' />
+                <Input 
+                  type='text' 
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  
+                />
               </FormControl>
               <FormControl>
                 <FormLabel>Description</FormLabel>
-                <Input type='text' />
+                <Input 
+                  type='text' 
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
               </FormControl>
             </Stack>
           )}
@@ -102,7 +128,9 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
           )}
           right={(
             <Stack spacing={4}>
-              <Text ml={2}>Lisa Chou (You)</Text>
+              <Text ml={2}>
+                {owner}
+              </Text>
             </Stack>
           )}
         />
@@ -117,8 +145,13 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
           right={(
             <>
               <Stack spacing={2}>
-                {MOCK_GROUP_MANAGERS.map((manager, index) => (
-                  <Flex key={index} align='center' justifyContent='space-between'>
+                {
+                  groupManagers.length === 0 && (
+                    <Text>No group managers</Text>
+                  )
+                }
+                {groupManagers.map((manager: Member) => (
+                  <Flex key={manager.email} align='center' justifyContent='space-between'>
                     <Text ml={2}>{manager.email}</Text>
                     <Button
                       border='1px solid'
@@ -126,12 +159,42 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
                       size='sm'
                       bg='white'
                       shadow='sm'
+                      onClick={async () => {
+                        const resp = await axios.delete(`${BACKEND_URL}/api/v1/group-management/groups/${groupId}/members/${manager.email}`, {
+                          headers: {
+                            Authorization: `Bearer ${auth.user?.access_token}`
+                          }
+                        });
+                    
+                        if (resp.status > 199 && resp.status < 300) {
+                          toast({
+                            title: 'Member removed',
+                            status: 'success',
+                            duration: 2000,
+                            isClosable: true
+                          })
+                        } else {
+                          toast({
+                            title: 'Error removing member',
+                            status: 'error',
+                            duration: 2000,
+                            isClosable: true
+                          })
+                        }
+
+                        navigate(0);
+                      }}
                     >Remove</Button>
                   </Flex>
                 ))}
               </Stack>
 
-              <Button variant='link' color='blue.400' size='sm' mt={4}>Add Manager</Button>
+              <Button variant='link' color='blue.400' size='sm' mt={4} 
+                onClick={() => {
+                  navigate(`/groups/${groupId}/members`);
+                  navigate(0);
+                }}
+              >Add Manager</Button>
             </>
           )}
           />
@@ -150,12 +213,12 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
                   </Tr>
                 </Thead>
                 <Tbody>
-                  {MOCK_ROLES.map((role, index) => (
+                  {roles?.map((role, index) => (
                     <Tr key={index}>
                       <Td>
-                        <Code colorScheme='gray'>{role.name}</Code>
+                        <Code colorScheme='gray'>{role}</Code>
                       </Td>
-                      <Td>{role.description}</Td>
+                      {/* <Td>{role.description}</Td> */}
 
                       <Td>
                         <IconButton
@@ -170,7 +233,7 @@ export const GroupSettings = ({ groupId }: GroupSettingsProps) => {
                 </Tbody>
               </Table>
             </TableContainer>
-            <Button variant='link' color='blue.400' size='sm' mt={4}>Add Manager</Button>
+            <Button variant='link' color='blue.400' size='sm' mt={4}>Add Role</Button>
           </Box>
 
           <LeftRightLayout
diff --git a/veda-auth-portal/src/components/Groups/index.tsx b/veda-auth-portal/src/components/Groups/index.tsx
index 5143b28..b13c482 100644
--- a/veda-auth-portal/src/components/Groups/index.tsx
+++ b/veda-auth-portal/src/components/Groups/index.tsx
@@ -5,7 +5,8 @@ import {
   Thead,
   Tbody, Tr,
   Th,
-  Td, TableContainer
+  Td, TableContainer,
+  useDisclosure
 } from '@chakra-ui/react'
 import { NavContainer } from '../NavContainer'
 import { PageTitle } from '../PageTitle'
@@ -17,18 +18,27 @@ import { useAuth } from 'react-oidc-context'
 import { BACKEND_URL, CLIENT_ID } from '../../lib/constants'
 import { useApi } from '../../hooks/useApi'
 import { decodeToken } from '../../lib/util'
+import { CreateGroupModal } from './CreateGroupModal'
 
 
 export const Groups = () => {
   const [search, setSearch] = useState('');
+  const createGroupModal = useDisclosure();
   
   const auth = useAuth();
   const userInfo = decodeToken(auth.user?.access_token);
-  
-
   const userGroups = useApi(`${BACKEND_URL}/api/v1/group-management/users/${userInfo?.email}/group-memberships?client_id=${CLIENT_ID}`);
+  let filteredGroups = [];
 
-  console.log('userGroups', userGroups);
+  if (!userGroups.isPending && userGroups.data) {
+    const lowerSearch = search.toLowerCase();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    filteredGroups = userGroups.data.groups.filter((group: any) => {
+      return group.name?.toLowerCase().includes(lowerSearch) 
+        || group.description?.toLowerCase().includes(lowerSearch)
+        || group.owner_id?.toLowerCase().includes(lowerSearch);
+    })
+  }
 
   return (
     <NavContainer activeTab='groups'>
@@ -39,12 +49,16 @@ export const Groups = () => {
           <Text color='gray.500' mt={2}>View and manage all groups.</Text>
         </Box>
         <ActionButton icon={IoIosAdd} onClick={() => {
-          console.log('Create Group')
+          createGroupModal.onOpen();
         }}>
           Create Group
         </ActionButton>
       </Flex>
 
+      <CreateGroupModal 
+        auth={auth}
+      isOpen={createGroupModal.isOpen} onClose={createGroupModal.onClose} />
+
       {/* SEARCH BOX */}
       <InputGroup mt={4}>
           <InputRightElement pointerEvents='none'>
@@ -80,12 +94,12 @@ export const Groups = () => {
           <Tbody>
             {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              userGroups.data?.groups?.map((group: any) => {
+              filteredGroups.map((group: any) => {
                 return (
                   <Tr key={group.id}>
                     <Td>
                       <Link
-                        to={`/groups/${group.id}`}
+                        to={`/groups/${group.id}/settings`}
                       >
                         <Text
                           color='blue.400'
diff --git a/veda-auth-portal/src/components/NavContainer.tsx b/veda-auth-portal/src/components/NavContainer.tsx
index 1484f59..1e93419 100644
--- a/veda-auth-portal/src/components/NavContainer.tsx
+++ b/veda-auth-portal/src/components/NavContainer.tsx
@@ -57,41 +57,44 @@ export const NavContainer = ({ activeTab, children }: NavContainerProps) => {
   return (
     <>
       <Grid templateColumns='repeat(15, 1fr)'>
-        <GridItem colSpan={2}  bg='#F7F7F7'>
-          <Flex justifyContent='space-between' direction="column" h='100vh' p={4}>
-            <Box>
-              <Heading size='md'>
-                VEDA Auth Portal
-              </Heading>
+        <GridItem colSpan={3} bg='#F7F7F7'>
+          <Flex h='100vh' >
+            <Box position='fixed'>
+              <Flex justifyContent='space-between' direction="column" h='100vh' p={4} >
+              <Box>
+                <Heading size='md'>
+                  VEDA Auth Portal
+                </Heading>
 
-              <Stack direction='column'  mt={4}>
-                <NavItem to='/applications' icon={AiOutlineAppstore} text="Applications" activeTab={activeTab} />
-                <NavItem to='/groups' icon={FiUsers} text="Groups" activeTab={activeTab} />
-                <NavItem to='/users' icon={FiUser} text="Users" activeTab={activeTab} />
-              </Stack>
-            </Box>
+                <Stack direction='column'  mt={4}>
+                  <NavItem to='/applications' icon={AiOutlineAppstore} text="Applications" activeTab={activeTab} />
+                  <NavItem to='/groups' icon={FiUsers} text="Groups" activeTab={activeTab} />
+                  <NavItem to='/users' icon={FiUser} text="Users" activeTab={activeTab} />
+                </Stack>
+              </Box>
 
-            <Button 
-              variant='unstyled' 
-              w='fit-content'
-              _hover={{
-                color: 'gray.500'
-              }}
-              onClick={async () => {
-                await auth.removeUser();
-              }}
-            >
-              <Flex alignItems='center' gap={2} w='fit-content'>
-                  <Icon as={MdLogout} />
-                  <Text as='span' >Logout</Text>
-              </Flex>
+              <Button 
+                variant='unstyled' 
+                w='fit-content'
+                _hover={{
+                  color: 'gray.500'
+                }}
+                onClick={async () => {
+                  await auth.removeUser();
+                }}
+              >
+                <Flex alignItems='center' gap={2} w='fit-content'>
+                    <Icon as={MdLogout} />
+                    <Text as='span' >Logout</Text>
+                </Flex>
 
-            </Button>
-          
+              </Button>
+            </Flex>
+            </Box>
           </Flex>
 
         </GridItem>
-        <GridItem colSpan={13} p={16}>
+        <GridItem colSpan={12} p={16}>
           {children}
         </GridItem>
       </Grid>
diff --git a/veda-auth-portal/src/index.tsx b/veda-auth-portal/src/index.tsx
index 4e4099e..8fb9e58 100644
--- a/veda-auth-portal/src/index.tsx
+++ b/veda-auth-portal/src/index.tsx
@@ -2,16 +2,11 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 import { extendTheme, ChakraProvider } from '@chakra-ui/react'
 import { AuthProvider, AuthProviderProps } from "react-oidc-context";
-import oidcConfig from './lib/oidcConfig.json'
-import { BACKEND_URL } from './lib/constants';
+import localOidcConfig from './lib/localOidcConfig.json';
+import prodOidcConfig from './lib/prodOidcConfig.json';
+import { BACKEND_URL, CLIENT_ID } from './lib/constants';
 import { WebStorageStateStore } from 'oidc-client-ts';
 
-// if (!oidcConfig) {
-//   console.error('OIDC configuration not found');
-// } else {
-//   console.log('OIDC configuration found', oidcConfig);
-// }
-
 const theme = extendTheme({
   colors: {
     default: {
@@ -29,23 +24,37 @@ const theme = extendTheme({
   },
 });
 
-const theConfig:AuthProviderProps= {
+let theOidcConfig;
+let redirect_uri:string;
+
+if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+  theOidcConfig = localOidcConfig;
+  redirect_uri = 'http://localhost:5173/oauth-callback';
+} else {
+  // production code
+  theOidcConfig = prodOidcConfig;
+  redirect_uri = 'https://veda.usecustos.org/oauth-callback';
+}
+
+const theConfig:AuthProviderProps = {
   authority: `${BACKEND_URL}/api/v1/identity-management/`,
-  client_id: "veda-dafsxhsztbsczrmmbftw-10000000",
-  redirect_uri: "http://localhost:5173/oauth-callback",
+  client_id: CLIENT_ID,
+  redirect_uri: redirect_uri,
   response_type: "code",
   scope: "openid email",
   metadata: {
-    authorization_endpoint: oidcConfig.authorization_endpoint,
-    token_endpoint: oidcConfig.token_endpoint,
-    revocation_endpoint: oidcConfig.revocation_endpoint,
-    introspection_endpoint: oidcConfig.introspection_endpoint,
-    userinfo_endpoint: oidcConfig.userinfo_endpoint,
-    jwks_uri: oidcConfig.jwks_uri,
+    authorization_endpoint: theOidcConfig.authorization_endpoint,
+    token_endpoint: theOidcConfig.token_endpoint,
+    revocation_endpoint: theOidcConfig.revocation_endpoint,
+    introspection_endpoint: theOidcConfig.introspection_endpoint,
+    userinfo_endpoint: theOidcConfig.userinfo_endpoint,
+    jwks_uri: theOidcConfig.jwks_uri,
   },
   userStore: new WebStorageStateStore({ store: window.localStorage }),
+  automaticSilentRenew: true,
 };
 
+
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 root.render(
diff --git a/veda-auth-portal/src/interfaces/GroupMembership.tsx b/veda-auth-portal/src/interfaces/GroupMembership.tsx
deleted file mode 100644
index e328179..0000000
--- a/veda-auth-portal/src/interfaces/GroupMembership.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface GroupMembership {
-  id: string;
-  name: string;
-  created_time: string;
-  last_modified_time: string;
-  description: string;
-  owner_id: string;
-  num_members?: number;
-  your_role?: string;
-};
diff --git a/veda-auth-portal/src/interfaces/Groups.tsx b/veda-auth-portal/src/interfaces/Groups.tsx
new file mode 100644
index 0000000..f482a03
--- /dev/null
+++ b/veda-auth-portal/src/interfaces/Groups.tsx
@@ -0,0 +1,39 @@
+export interface GroupMembership {
+  id: string;
+  name: string;
+  created_time: string;
+  last_modified_time: string;
+  description: string;
+  owner_id: string;
+  num_members?: number;
+  your_role?: string;
+};
+
+export interface Member {
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  created_at: string;
+  last_modified_at: string;
+  membership_type: string;
+}
+
+export interface Group {
+  id: string;
+  name: string;
+  realm_roles?: string[];
+  client_roles?: string[];
+  parent_id?: string;
+  created_time: string;
+  last_modified_time: string;
+  attributes?: Attribute[];
+  description: string;
+  owner_id: string;
+}
+
+export interface Attribute {
+  id: number;
+  key: string;
+  value: string[];
+}
\ No newline at end of file
diff --git a/veda-auth-portal/src/lib/constants.ts b/veda-auth-portal/src/lib/constants.ts
index 00b7832..a14ae6c 100644
--- a/veda-auth-portal/src/lib/constants.ts
+++ b/veda-auth-portal/src/lib/constants.ts
@@ -1,5 +1,13 @@
 import packageJson from '../../package.json';
 
 export const PORTAL_VERSION = packageJson.version;
-export const CLIENT_ID = '';
-export const BACKEND_URL = 'http://localhost:8081'
\ No newline at end of file
+export let CLIENT_ID:string;
+export let BACKEND_URL:string;
+
+if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+    CLIENT_ID = 'veda-dafsxhsztbsczrmmbftw-10000000';
+    BACKEND_URL = 'http://localhost:8081';
+} else {
+    CLIENT_ID = 'veda-iui65nmkgaf7bihdyndc-10000000';
+    BACKEND_URL = 'https://api.veda.usecustos.org';
+}
\ No newline at end of file
diff --git a/veda-auth-portal/src/lib/oidcConfig.json b/veda-auth-portal/src/lib/localOidcConfig.json
similarity index 100%
rename from veda-auth-portal/src/lib/oidcConfig.json
rename to veda-auth-portal/src/lib/localOidcConfig.json
diff --git a/veda-auth-portal/src/lib/prodOidcConfig.json b/veda-auth-portal/src/lib/prodOidcConfig.json
new file mode 100644
index 0000000..6c9d4ee
--- /dev/null
+++ b/veda-auth-portal/src/lib/prodOidcConfig.json
@@ -0,0 +1,285 @@
+{
+    "issuer": "https://10000000.veda-auth-central.org",
+    "authorization_endpoint": "https://api.veda.usecustos.org/api/v1/identity-management/authorize",
+    "token_endpoint": "https://api.veda.usecustos.org/api/v1/identity-management/token",
+    "userinfo_endpoint": "https://api.veda.usecustos.org/api/v1/user-management/userinfo",
+    "jwks_uri": "https://api.veda.usecustos.org/api/v1/identity-management/.well-known/jwks.json",
+    "response_types_supported": [
+        "code",
+        "none",
+        "id_token",
+        "token",
+        "id_token token",
+        "code id_token",
+        "code token",
+        "code id_token token"
+    ],
+    "subject_types_supported": [
+        "public",
+        "pairwise"
+    ],
+    "id_token_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "scopes_supported": [
+        "openid",
+        "email",
+        "address",
+        "roles",
+        "example:doc:delete",
+        "profile",
+        "offline_access",
+        "microprofile-jwt",
+        "phone",
+        "user:email",
+        "example:doc:create",
+        "web-origins",
+        "example:doc:read",
+        "acr",
+        "example:doc:update"
+    ],
+    "token_endpoint_auth_methods_supported": [
+        "private_key_jwt",
+        "client_secret_basic",
+        "client_secret_post",
+        "tls_client_auth",
+        "client_secret_jwt"
+    ],
+    "claims_supported": [
+        "aud",
+        "sub",
+        "iss",
+        "auth_time",
+        "name",
+        "given_name",
+        "family_name",
+        "preferred_username",
+        "email",
+        "acr"
+    ],
+    "introspection_endpoint_auth_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "request_parameter_supported": true,
+    "pushed_authorization_request_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/ext/par/request",
+    "introspection_endpoint": "https://api.veda.usecustos.org/api/v1/identity-management/token/introspect",
+    "claims_parameter_supported": true,
+    "id_token_encryption_enc_values_supported": [
+        "A256GCM",
+        "A192GCM",
+        "A128GCM",
+        "A128CBC-HS256",
+        "A192CBC-HS384",
+        "A256CBC-HS512"
+    ],
+    "userinfo_encryption_enc_values_supported": [
+        "A256GCM",
+        "A192GCM",
+        "A128GCM",
+        "A128CBC-HS256",
+        "A192CBC-HS384",
+        "A256CBC-HS512"
+    ],
+    "introspection_endpoint_auth_methods_supported": [
+        "private_key_jwt",
+        "client_secret_basic",
+        "client_secret_post",
+        "tls_client_auth",
+        "client_secret_jwt"
+    ],
+    "authorization_encryption_alg_values_supported": [
+        "RSA-OAEP",
+        "RSA-OAEP-256",
+        "RSA1_5"
+    ],
+    "tls_client_certificate_bound_access_tokens": true,
+    "response_modes_supported": [
+        "query",
+        "fragment",
+        "form_post",
+        "query.jwt",
+        "fragment.jwt",
+        "form_post.jwt",
+        "jwt"
+    ],
+    "backchannel_logout_session_supported": true,
+    "backchannel_authentication_request_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "ES256",
+        "RS256",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "authorization_encryption_enc_values_supported": [
+        "A256GCM",
+        "A192GCM",
+        "A128GCM",
+        "A128CBC-HS256",
+        "A192CBC-HS384",
+        "A256CBC-HS512"
+    ],
+    "revocation_endpoint_auth_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "backchannel_token_delivery_modes_supported": [
+        "poll",
+        "ping"
+    ],
+    "revocation_endpoint_auth_methods_supported": [
+        "private_key_jwt",
+        "client_secret_basic",
+        "client_secret_post",
+        "tls_client_auth",
+        "client_secret_jwt"
+    ],
+    "request_uri_parameter_supported": true,
+    "grant_types_supported": [
+        "authorization_code",
+        "implicit",
+        "refresh_token",
+        "password",
+        "client_credentials",
+        "urn:ietf:params:oauth:grant-type:device_code",
+        "urn:openid:params:grant-type:ciba",
+        "urn:ietf:params:oauth:grant-type:token-exchange"
+    ],
+    "require_request_uri_registration": true,
+    "code_challenge_methods_supported": [
+        "plain",
+        "S256"
+    ],
+    "id_token_encryption_alg_values_supported": [
+        "RSA-OAEP",
+        "RSA-OAEP-256",
+        "RSA1_5"
+    ],
+    "frontchannel_logout_session_supported": true,
+    "authorization_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "request_object_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512",
+        "none"
+    ],
+    "request_object_encryption_alg_values_supported": [
+        "RSA-OAEP",
+        "RSA-OAEP-256",
+        "RSA1_5"
+    ],
+    "check_session_iframe": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/login-status-iframe.html",
+    "backchannel_logout_supported": true,
+    "acr_values_supported": [
+        "0",
+        "1"
+    ],
+    "request_object_encryption_enc_values_supported": [
+        "A256GCM",
+        "A192GCM",
+        "A128GCM",
+        "A128CBC-HS256",
+        "A192CBC-HS384",
+        "A256CBC-HS512"
+    ],
+    "device_authorization_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/auth/device",
+    "userinfo_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512",
+        "none"
+    ],
+    "claim_types_supported": [
+        "normal"
+    ],
+    "userinfo_encryption_alg_values_supported": [
+        "RSA-OAEP",
+        "RSA-OAEP-256",
+        "RSA1_5"
+    ],
+    "end_session_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/logout",
+    "revocation_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/revoke",
+    "backchannel_authentication_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/protocol/openid-connect/ext/ciba/auth",
+    "frontchannel_logout_supported": true,
+    "token_endpoint_auth_signing_alg_values_supported": [
+        "PS384",
+        "ES384",
+        "RS384",
+        "HS256",
+        "HS512",
+        "ES256",
+        "RS256",
+        "HS384",
+        "ES512",
+        "PS256",
+        "PS512",
+        "RS512"
+    ],
+    "registration_endpoint": "https://auth.veda.usecustos.org/auth/realms/10000000/clients-registrations/openid-connect"
+}
\ No newline at end of file