diff --git a/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
index 5cad4618e..f68a1b7a5 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/ChatTest.tsx
@@ -53,6 +53,9 @@ const ChatTest = () => {
           <Link to="/requests" className="nav-button">
             CHAT.REQUESTS
           </Link>
+          <Link to="/info" className="nav-button">
+            CHAT.INFO
+          </Link>
           <Link to="/hash" className="nav-button">
             CHAT.CONVERSATIONHASH
           </Link>
@@ -71,6 +74,9 @@ const ChatTest = () => {
           <Link to="/getGroupAccess" className="nav-button">
             CHAT.GETGROUPACCESS
           </Link>
+          <Link to="/modifyroles" className="nav-button">
+            CHAT.MODIFYROLES
+          </Link>
           <Link to="/getGroupMemberStatus" className="nav-button">
             CHAT.GETGROUPMEMBERSTATUS
           </Link>
@@ -80,7 +86,7 @@ const ChatTest = () => {
           <Link to="/getGroupInfoTest" className="nav-button">
             CHAT.GetGroupInfoTest
           </Link>
-                <Link to="/getGroupMembersTest" className="nav-button">
+          <Link to="/getGroupMembersTest" className="nav-button">
             CHAT.GetGroupMembersTest
           </Link>
           <Link to="/searchGroups" className="nav-button">
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatTest/GetChatInfo.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetChatInfo.tsx
new file mode 100644
index 000000000..7e02e5bd0
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/GetChatInfo.tsx
@@ -0,0 +1,92 @@
+import { useState, useContext } from 'react';
+import {
+  Section,
+  SectionItem,
+  CodeFormatter,
+  SectionButton,
+} from '../components/StyledComponents';
+import Loader from '../components/Loader';
+import { EnvContext } from '../context';
+import * as PushAPI from '@pushprotocol/restapi';
+import ChatTest from './ChatTest';
+
+const GetChatInfoTest = () => {
+  const { env } = useContext<any>(EnvContext);
+  const [isLoading, setLoading] = useState(false);
+  const [getChatInfoReponse, setGetChatInfoResponse] = useState<any>('');
+  const [chatId, setChatId] = useState<string>('');
+  const [address, setAddress] = useState<string>('');
+  const updateChatId = (e: React.SyntheticEvent<HTMLElement>) => {
+    setChatId((e.target as HTMLInputElement).value);
+  };
+  const updateAddress = (e: React.SyntheticEvent<HTMLElement>) => {
+    setAddress((e.target as HTMLInputElement).value);
+  };
+
+  const testGetChatInfo = async () => {
+    try {
+      setLoading(true);
+
+      const response = await PushAPI.chat.getChatInfo({
+        chatId: chatId,
+        address: address,
+        env: env,
+      });
+
+      setGetChatInfoResponse(response);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <ChatTest />
+      <h2>Get Chat Info Test page</h2>
+
+      <Loader show={isLoading} />
+
+      <Section>
+        <div>
+          <SectionItem style={{ marginTop: 20 }}>
+            <label>chatId</label>
+            <input
+              type="text"
+              onChange={updateChatId}
+              value={chatId}
+              style={{ width: 400, height: 30 }}
+            />
+          </SectionItem>
+          <SectionItem style={{ marginTop: 20 }}>
+            <label>address</label>
+            <input
+              type="text"
+              onChange={updateAddress}
+              value={address}
+              style={{ width: 400, height: 30 }}
+            />
+          </SectionItem>
+
+          <SectionItem style={{ marginTop: 20 }}>
+            <SectionButton onClick={testGetChatInfo}>
+              get chat info
+            </SectionButton>
+          </SectionItem>
+        </div>
+        <SectionItem>
+          <div>
+            {getChatInfoReponse ? (
+              <CodeFormatter>
+                {JSON.stringify(getChatInfoReponse, null, 4)}
+              </CodeFormatter>
+            ) : null}
+          </div>
+        </SectionItem>
+      </Section>
+    </div>
+  );
+};
+
+export default GetChatInfoTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatTest/ModifyRoles.tsx b/packages/examples/sdk-frontend-react/src/app/ChatTest/ModifyRoles.tsx
new file mode 100644
index 000000000..afed95013
--- /dev/null
+++ b/packages/examples/sdk-frontend-react/src/app/ChatTest/ModifyRoles.tsx
@@ -0,0 +1,113 @@
+import { useState, useContext } from 'react';
+import {
+  Section,
+  SectionItem,
+  CodeFormatter,
+  SectionButton,
+} from '../components/StyledComponents';
+import Loader from '../components/Loader';
+import { EnvContext, Web3Context } from '../context';
+import * as PushAPI from '@pushprotocol/restapi';
+import ChatTest from './ChatTest';
+
+const ModifyRolesTest = () => {
+  const { account: acc, library } = useContext<any>(Web3Context);
+  const { env } = useContext<any>(EnvContext);
+  const [isLoading, setLoading] = useState(false);
+  const [modifyRolesResponse, setModifyRolesResponse] = useState<any>('');
+  const [chatId, setChatId] = useState<string>('');
+  const [addresses, setAddresses] = useState<string[]>([]);
+  const [role, setRole] = useState<any>('');
+  const updateChatId = (e: React.SyntheticEvent<HTMLElement>) => {
+    setChatId((e.target as HTMLInputElement).value);
+  };
+  const updateRole = (e: React.SyntheticEvent<HTMLElement>) => {
+    setRole((e.target as HTMLInputElement).value);
+  };
+  const updateAddress = (e: React.SyntheticEvent<HTMLElement>) => {
+    const inputAddresses = (e.target as HTMLInputElement).value
+      .split(',')
+      .map((item) => item.trim());
+
+    setAddresses(inputAddresses);
+  };
+
+  const testModifyRoles = async () => {
+    try {
+      setLoading(true);
+      const librarySigner = library.getSigner();
+      const response = await PushAPI.chat.modifyRoles({
+        chatId: chatId,
+        newRole: role,
+        members: addresses,
+        env,
+        signer: librarySigner,
+        account: acc,
+      });
+
+      setModifyRolesResponse(response);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <ChatTest />
+      <h2>Modify Roles Test page</h2>
+
+      <Loader show={isLoading} />
+
+      <Section>
+        <div>
+          <SectionItem style={{ marginTop: 20 }}>
+            <label>chatId</label>
+            <input
+              type="text"
+              onChange={updateChatId}
+              value={chatId}
+              style={{ width: 400, height: 30 }}
+            />
+          </SectionItem>
+          <SectionItem style={{ marginTop: 20 }}>
+            <label>New Role (ADMIN or MEMBER)</label>
+            <input
+              type="text"
+              onChange={updateRole}
+              value={role}
+              style={{ width: 400, height: 30 }}
+            />
+          </SectionItem>
+          <SectionItem style={{ marginTop: 20 }}>
+            <label>addresses separated by a comma</label>
+            <input
+              type="text"
+              onChange={updateAddress}
+              value={addresses}
+              style={{ width: 400, height: 30 }}
+            />
+          </SectionItem>
+
+          <SectionItem style={{ marginTop: 20 }}>
+            <SectionButton onClick={testModifyRoles}>
+              Modify Roles
+            </SectionButton>
+          </SectionItem>
+        </div>
+        <SectionItem>
+          <div>
+            {modifyRolesResponse ? (
+              <CodeFormatter>
+                {JSON.stringify(modifyRolesResponse, null, 4)}
+              </CodeFormatter>
+            ) : null}
+          </div>
+        </SectionItem>
+      </Section>
+    </div>
+  );
+};
+
+export default ModifyRolesTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
index 2074d5514..ed1f9c03d 100644
--- a/packages/examples/sdk-frontend-react/src/app/app.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Route, Routes, Link } from 'react-router-dom';
 import { useWeb3React } from '@web3-react/core';
-import { PushAPI } from "@pushprotocol/restapi";
+import { PushAPI } from '@pushprotocol/restapi';
 import ConnectButtonComp from './components/Connect';
 import { Checkbox } from './components/Checkbox';
 import Dropdown from './components/Dropdown';
@@ -94,7 +94,8 @@ import GetGroupMemberCountTest from './ChatTest/GetGroupMemberCountTest';
 import GetGroupInfoTest from './ChatTest/GetGroupInfoTest';
 import GetGroupMembersTest from './ChatTest/GetGroupMembersTest';
 import VideoV2 from './Video';
-
+import GetChatInfoTest from './ChatTest/GetChatInfo';
+import ModifyRolesTest from './ChatTest/ModifyRoles';
 
 window.Buffer = window.Buffer || Buffer;
 
@@ -260,8 +261,8 @@ export function App() {
         env: env,
         account: account,
         alpha: { feature: ['SCALABILITY_V2'] },
-    })
-    setPushUser(pushUser);
+      });
+      setPushUser(pushUser);
       setSigner(librarySigner);
       if (user?.encryptedPrivateKey) {
         pgpPrivateKey = await PushApi.chat.decryptPGPKey({
@@ -422,6 +423,7 @@ export function App() {
                       <Route path="/hash" element={<ConversationHashTest />} />
                       <Route path="/history" element={<HistoryTest />} />
                       <Route path="/requests" element={<GetRequestsTest />} />
+                      <Route path="/info" element={<GetChatInfoTest />} />
                       <Route
                         path="/createGroup"
                         element={<CreateGroupTest />}
@@ -447,6 +449,10 @@ export function App() {
                         path="/updateGroup"
                         element={<UpdateGroupTest />}
                       />
+                      <Route
+                        path="/modifyroles"
+                        element={<ModifyRolesTest />}
+                      />
                       {/* chat method  routes */}
                       <Route path="/get" element={<GetUserTest />} />
                       <Route