diff --git a/package.json b/package.json
index c6d4e222a..bedb24bd3 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "react-router-dom": "6.3.0",
     "regenerator-runtime": "0.13.7",
     "socket.io-client": "^4.5.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.0.8",
     "tiny-invariant": "^1.2.0",
     "ts-mocha": "^10.0.0",
     "tslib": "^2.3.0",
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
index a87a6126f..a589565a6 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Web3Provider } from '@ethersproject/providers';
-import { Chat, ITheme } from '@pushprotocol/uiweb';
+import { SupportChat, ITheme } from '@pushprotocol/uiweb';
 import { lightTheme } from '@pushprotocol/uiweb';
 import { EnvContext, Web3Context } from './context';
 
@@ -31,10 +31,11 @@ export const ChatSupportTest = () => {
   };
 
   return (
-    <Chat
-      account={account}
+    //works as Chat as well as Support Chat
+    <SupportChat
+  
       signer={librarySigner}
-      supportAddress="0xD2A371cAFBE09333F6668229E4BD33196583c325"
+      supportAddress="0x6F7919412318E65109c5698bd0E640fc33DE2337"
       apiKey="tAWEnggQ9Z.UaDBNjrvlJZx3giBTIQDcT8bKQo1O1518uF1Tea7rPwfzXv2ouV5rX9ViwgJUrXm"
       env={env}
       greetingMsg="How can i help you?"
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
index 2537443d6..93b49170c 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 import { Section } from '../components/StyledComponents';
-import { CreateGroupModal } from "@pushprotocol/uiweb";
-import { ChatViewComponent } from '@pushprotocol/uiweb';
+import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
+import { ChatView } from '@pushprotocol/uiweb';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -15,7 +15,17 @@ const ChatViewComponentTest = () => {
       <h2>Chat UI Test page</h2>
       <CreateGroupModal onClose={()=>{console.log('in close')}} />
       <ChatViewComponentCard>
-        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
+      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
+
+        <ChatView 
+        onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
+        chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' 
+        limit={10}
+         isConnected={true} 
+         groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
+         groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
+         verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
+         />
       </ChatViewComponentCard>
     </div>
   );
@@ -24,7 +34,8 @@ const ChatViewComponentTest = () => {
 export default ChatViewComponentTest;
 
 const ChatViewComponentCard = styled(Section)`
-  height: 60vh;
+  height: 80vh;
+  position:relative;
 `;
 //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
 //4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
index 98a5bd2c7..e118af2ca 100644
--- a/packages/examples/sdk-frontend-react/src/app/app.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -88,6 +88,7 @@ import SearchSpaceTest from './SpaceTest/SearchSpaceTest';
 import SearchGroupTest from './ChatTest/SearchGroupTest';
 import RejectRequestTest from './ChatTest/RejectRequestTest';
 import GetGroupMemberStatusTest from './ChatTest/GetGroupMemberStatusTest';
+import { ChatSupportTest } from './ChatSupportTest';
 
 
 window.Buffer = window.Buffer || Buffer;
@@ -313,7 +314,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={darkChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
+                <ChatUIProvider  env={env} theme={lightChatTheme} >
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route
@@ -559,7 +560,10 @@ export function App() {
                       <Route
                         path="ChatProfile"
                         element={<ChatProfileTest />}
-                      />
+                      /> <Route
+                      path="ChatSupport"
+                      element={<ChatSupportTest />}
+                    />
                   </Routes>
                   {/* <ChatWidgetTest/> */}
                   {/* <ChatWidgetTest /> */}
diff --git a/packages/restapi/CHANGELOG.md b/packages/restapi/CHANGELOG.md
index 393b1c1be..ec6aa8d74 100644
--- a/packages/restapi/CHANGELOG.md
+++ b/packages/restapi/CHANGELOG.md
@@ -2,6 +2,559 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.50](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.49...restapi-0.0.1-alpha.50) (2023-10-16)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a996249](https://github.com/ethereum-push-notification-service/push-sdk/commit/a996249be88209d5ff7a2fb228ca56bbe294e9c3))
+* Merge branch 'alpha' into alpha-deployment ([119e13a](https://github.com/ethereum-push-notification-service/push-sdk/commit/119e13ac1699a96e977ce84443617f8fdb59f98f))
+* Merge branch 'alpha' into alpha-deployment ([eff31e3](https://github.com/ethereum-push-notification-service/push-sdk/commit/eff31e3dfbbc1f2835366ad5093109d7a5e58b34))
+
+
+
+## [0.0.1-alpha.49](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.48...restapi-0.0.1-alpha.49) (2023-10-10)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([6d965a9](https://github.com/ethereum-push-notification-service/push-sdk/commit/6d965a97a2486e8f4d32f7ae0c4391e4d788935f))
+
+
+
+## [0.0.1-alpha.48](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.47...restapi-0.0.1-alpha.48) (2023-10-10)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([1c9ab5e](https://github.com/ethereum-push-notification-service/push-sdk/commit/1c9ab5e5ce999308dcd2150b3f591eca0293958f))
+* minor fix ([9750680](https://github.com/ethereum-push-notification-service/push-sdk/commit/9750680b7975216297ddf17b5c0bf8075b6ff8d4))
+
+
+
+## [0.0.1-alpha.47](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.46...restapi-0.0.1-alpha.47) (2023-10-09)
+
+
+### Bug Fixes
+
+* added settings ([8f34995](https://github.com/ethereum-push-notification-service/push-sdk/commit/8f34995d9720bb47be798f2eb54738447d956567))
+* latest pull ([a1caeaf](https://github.com/ethereum-push-notification-service/push-sdk/commit/a1caeaffbc48bbb183d50595e6110bba7baa1fe1))
+* Merge branch 'alpha' into alpha-deployment ([d7251e9](https://github.com/ethereum-push-notification-service/push-sdk/commit/d7251e9b0637d3df59198673e22c42194719d7c1))
+* minor fix ([15d5856](https://github.com/ethereum-push-notification-service/push-sdk/commit/15d58568dd0f71bcf06199ae304d489d96244c34))
+
+
+
+## [0.0.1-alpha.46](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.22...restapi-0.0.1-alpha.46) (2023-10-08)
+
+
+### Bug Fixes
+
+* added settings ([#762](https://github.com/ethereum-push-notification-service/push-sdk/issues/762)) ([75604d7](https://github.com/ethereum-push-notification-service/push-sdk/commit/75604d7ae3a4dff944cd1dab54cb98ee4d4e07a7))
+* build fix ([299a3be](https://github.com/ethereum-push-notification-service/push-sdk/commit/299a3be9990d58572be1ad111af1b6a0fee17098))
+* merge alpha ([e476962](https://github.com/ethereum-push-notification-service/push-sdk/commit/e476962f26070e0dfd20e5334514eee930eeeaad))
+* merge main ([16dd007](https://github.com/ethereum-push-notification-service/push-sdk/commit/16dd007772a4c5104e336eef318f0056de7a5cfb))
+
+
+
+## [0.0.1-alpha.45](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.44...restapi-0.0.1-alpha.45) (2023-10-05)
+
+
+### Bug Fixes
+
+* alpha to main ([76a8d84](https://github.com/ethereum-push-notification-service/push-sdk/commit/76a8d849e689793590cf096c794016267503df3d))
+* Merge branch 'alpha' into alpha-deployment ([522814d](https://github.com/ethereum-push-notification-service/push-sdk/commit/522814d67af116576c753ee4c1a2681967a4c11c))
+* Merge branch 'alpha' into alpha-deployment ([fdb3925](https://github.com/ethereum-push-notification-service/push-sdk/commit/fdb3925a9ee63dc747ba227dfb719d784c21592d))
+* Notification event mutation ([ec2aedb](https://github.com/ethereum-push-notification-service/push-sdk/commit/ec2aedbc2e09bc4ded91a9f119464e3a61983606))
+* restored config ([098beac](https://github.com/ethereum-push-notification-service/push-sdk/commit/098beacaebdd19678878c9e50d5b3f103cb39803))
+
+
+
+## [0.0.1-alpha.44](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.43...restapi-0.0.1-alpha.44) (2023-10-03)
+
+
+### Bug Fixes
+
+* log removed ([68b38e9](https://github.com/ethereum-push-notification-service/push-sdk/commit/68b38e91a1afacb21baa0ee29f8967d86ce4b7f7))
+* minor fix ([c73b6cc](https://github.com/ethereum-push-notification-service/push-sdk/commit/c73b6ccfb510dfc38150a4207f806ccee7b44efb))
+
+
+
+## [0.0.1-alpha.43](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.42...restapi-0.0.1-alpha.43) (2023-09-29)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([0bf9a2d](https://github.com/ethereum-push-notification-service/push-sdk/commit/0bf9a2d6e0e8ff19af34e5e53ee6e05f35bc0479))
+
+
+
+## [0.0.1-alpha.42](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.41...restapi-0.0.1-alpha.42) (2023-09-29)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([6c3b91d](https://github.com/ethereum-push-notification-service/push-sdk/commit/6c3b91d79622e695808e38afb1e5dbdccab2f3eb))
+
+
+
+## [0.0.1-alpha.41](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.40...restapi-0.0.1-alpha.41) (2023-09-29)
+
+
+### Bug Fixes
+
+* minor fixes ([4338d18](https://github.com/ethereum-push-notification-service/push-sdk/commit/4338d18e07dbb51245331547442014eff2b54707))
+
+
+
+## [0.0.1-alpha.40](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.39...restapi-0.0.1-alpha.40) (2023-09-29)
+
+
+### Bug Fixes
+
+* minor fixes ([be3e90a](https://github.com/ethereum-push-notification-service/push-sdk/commit/be3e90ae43625eac56cc82548e150a6296a09777))
+* socket enabled ([fa4fc0a](https://github.com/ethereum-push-notification-service/push-sdk/commit/fa4fc0ae78898432232031df85a1ec04cc9027c8))
+
+
+
+## [0.0.1-alpha.39](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.38...restapi-0.0.1-alpha.39) (2023-09-29)
+
+
+### Bug Fixes
+
+* more fixes ([fe0ad48](https://github.com/ethereum-push-notification-service/push-sdk/commit/fe0ad486338d1cc57508e5ccc1c3b2aeece9624a))
+
+
+
+## [0.0.1-alpha.38](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.37...restapi-0.0.1-alpha.38) (2023-09-29)
+
+
+### Bug Fixes
+
+* error handling in socket events ([399d1fe](https://github.com/ethereum-push-notification-service/push-sdk/commit/399d1fe396ce19f764c9fc80dea3a3852216837a))
+
+
+
+## [0.0.1-alpha.37](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.36...restapi-0.0.1-alpha.37) (2023-09-29)
+
+
+### Bug Fixes
+
+* minor fixes ([12e3ca5](https://github.com/ethereum-push-notification-service/push-sdk/commit/12e3ca542aa11f7640ba5b84492707eb6e8bc3fc))
+
+
+
+## [0.0.1-alpha.36](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.21...restapi-0.0.1-alpha.36) (2023-09-29)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([c4d2cff](https://github.com/ethereum-push-notification-service/push-sdk/commit/c4d2cff0d7ecf909ab9dd993f54ffa9f4ce9d7b4))
+* some changes on stream ([92a2202](https://github.com/ethereum-push-notification-service/push-sdk/commit/92a220264e15dad6636b1e7a34ca6f0871849b14))
+* stream cases ([3ca0496](https://github.com/ethereum-push-notification-service/push-sdk/commit/3ca0496396a9796568973376ee99e26b65f1abed))
+
+
+
+## [0.0.1-alpha.35](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.34...restapi-0.0.1-alpha.35) (2023-09-29)
+
+
+### Bug Fixes
+
+* error fixed ([99163b3](https://github.com/ethereum-push-notification-service/push-sdk/commit/99163b3338940dd9904630007868ca01faf4190c))
+* Merge branch 'alpha' into alpha-deployment ([be03539](https://github.com/ethereum-push-notification-service/push-sdk/commit/be035393a90a50ac2b9115b8f0a817a988f395f9))
+* Merge branch 'alpha' into alpha-deployment ([8d56ee8](https://github.com/ethereum-push-notification-service/push-sdk/commit/8d56ee882719a65391e7e51abfb0b7f86c2ae5ad))
+* Merge branch 'main' into alpha ([b6887db](https://github.com/ethereum-push-notification-service/push-sdk/commit/b6887db0aa76126a47efa6ec88fc9841d7c3ae06))
+* remove only from test ([09524c7](https://github.com/ethereum-push-notification-service/push-sdk/commit/09524c793ecdef095f90c54bc5895ca1c6adba01))
+
+
+
+## [0.0.1-alpha.34](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.33...restapi-0.0.1-alpha.34) (2023-09-27)
+
+
+### Bug Fixes
+
+* added class based implementation for notification ([#699](https://github.com/ethereum-push-notification-service/push-sdk/issues/699)) ([44f0b7b](https://github.com/ethereum-push-notification-service/push-sdk/commit/44f0b7be1fb568c90c4dfebb7dc61ab82efaddc2))
+* changed typescript 5.0.2 and configured eslint ([8ca7e42](https://github.com/ethereum-push-notification-service/push-sdk/commit/8ca7e4203bcc06886dfe293f8aec5597aec60e5b))
+
+
+
+## [0.0.1-alpha.33](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.19...restapi-0.0.1-alpha.33) (2023-09-07)
+
+
+### Bug Fixes
+
+* merge alpha ([1783d45](https://github.com/ethereum-push-notification-service/push-sdk/commit/1783d45bb3ceab1cce3c6bb19dfbda38c3662a3e))
+* Merge branch 'alpha' into alpha-deployment ([84aaadf](https://github.com/ethereum-push-notification-service/push-sdk/commit/84aaadfb19e335e5806086fba2ad5e94c1bf3b7e))
+* merge main ([5f37942](https://github.com/ethereum-push-notification-service/push-sdk/commit/5f379427e8a517089758de776eab9f2409aa61f8))
+* merge main ([44e0d32](https://github.com/ethereum-push-notification-service/push-sdk/commit/44e0d324af1d4605129a5e129d3ab6481313c00c))
+* merge main ([9efdbe8](https://github.com/ethereum-push-notification-service/push-sdk/commit/9efdbe8c6f86eeb859075af493797575728cf902))
+* merge main ([93e3106](https://github.com/ethereum-push-notification-service/push-sdk/commit/93e31068bc48e9a271c376d2610e503f69499f8b))
+
+
+
+## [0.0.1-alpha.32](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.31...restapi-0.0.1-alpha.32) (2023-08-17)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([8dd925c](https://github.com/ethereum-push-notification-service/push-sdk/commit/8dd925cd5e0a134e07735b5a3ef7382f4b1909de))
+* Read me fixes ([7c02c3a](https://github.com/ethereum-push-notification-service/push-sdk/commit/7c02c3adef593b59bde6c8dd4d23b760e99a5416))
+* Space rules ([2181074](https://github.com/ethereum-push-notification-service/push-sdk/commit/2181074811549a0c70aea189bc82a1acf1944ba1))
+
+
+
+## [0.0.1-alpha.31](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.30...restapi-0.0.1-alpha.31) (2023-08-16)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a4c170e](https://github.com/ethereum-push-notification-service/push-sdk/commit/a4c170edd7766c843412bd83f6ef7e5a9ab70247))
+
+
+
+## [0.0.1-alpha.30](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.9...restapi-0.0.1-alpha.30) (2023-08-15)
+
+
+### Bug Fixes
+
+* fixed subscribe and unsubscribe ([3f908a0](https://github.com/ethereum-push-notification-service/push-sdk/commit/3f908a02ce7faee703340e17f6441f3ebe88fd58))
+* Merge branch 'alpha' into alpha-deployment ([984a80f](https://github.com/ethereum-push-notification-service/push-sdk/commit/984a80f178abc220a0243a5fce00413d4dd0aadb))
+* merge main ([f338fd4](https://github.com/ethereum-push-notification-service/push-sdk/commit/f338fd49707933c65bdcc7736cdd08d6784625ba))
+* **merged:** merged ([bb71789](https://github.com/ethereum-push-notification-service/push-sdk/commit/bb717897cec1e7d46d86be05b1d29ca9103272c5))
+
+
+
+## [0.0.1-alpha.29](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.28...restapi-0.0.1-alpha.29) (2023-08-02)
+
+
+### Bug Fixes
+
+* url correction ([26b6b73](https://github.com/ethereum-push-notification-service/push-sdk/commit/26b6b739d8b6b8a38ae10ae87270ca4d8782db51))
+
+
+
+## [0.0.1-alpha.28](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.4...restapi-0.0.1-alpha.28) (2023-08-02)
+
+
+### Bug Fixes
+
+* add: scw sig verification ([#593](https://github.com/ethereum-push-notification-service/push-sdk/issues/593)) ([6768065](https://github.com/ethereum-push-notification-service/push-sdk/commit/67680657981a847e23a4dbad6d2fd6a7bc127743))
+* Merge branch 'alpha' into alpha-deployment ([6c19940](https://github.com/ethereum-push-notification-service/push-sdk/commit/6c19940b4d72d9443b8afd06ddc2a6f9e29582a7))
+* merged main ([c5533f8](https://github.com/ethereum-push-notification-service/push-sdk/commit/c5533f8dce7b88cb1f14aa72f83579a8e01dcf36))
+
+
+
+## [0.0.1-alpha.27](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.3...restapi-0.0.1-alpha.27) (2023-07-24)
+
+
+### Bug Fixes
+
+* merge alpha ([16a55af](https://github.com/ethereum-push-notification-service/push-sdk/commit/16a55af713da0394ab9d82e13fed6d64190b247d))
+* Merge branch 'alpha' into alpha-deployment ([6ea669a](https://github.com/ethereum-push-notification-service/push-sdk/commit/6ea669a5aa3cebe693de259c1ea28787c0407d2a))
+* signer compatibility with viem ([3df201c](https://github.com/ethereum-push-notification-service/push-sdk/commit/3df201c7474b88d270d6e868bc516f223539e74c))
+
+
+
+## [0.0.1-alpha.26](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.2...restapi-0.0.1-alpha.26) (2023-07-21)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([3f3369a](https://github.com/ethereum-push-notification-service/push-sdk/commit/3f3369a1bda71a82cde8ef386901265a62a91a2c))
+* merge main ([c07ce16](https://github.com/ethereum-push-notification-service/push-sdk/commit/c07ce1628321dd3bae46d08e08bfc7986795bb64))
+* signer compatibility with viem and ethers ([1edea43](https://github.com/ethereum-push-notification-service/push-sdk/commit/1edea431ccf7f19cc0430deb2ce7a5c61390d99f))
+* signer compatibility with viem and ethers ([#567](https://github.com/ethereum-push-notification-service/push-sdk/issues/567)) ([c07c3fa](https://github.com/ethereum-push-notification-service/push-sdk/commit/c07c3fab76a095998b1eac830c941116ad1e9b4f))
+* space feed API path fix ([00d91b1](https://github.com/ethereum-push-notification-service/push-sdk/commit/00d91b1860525c15618f130970c9173100424a23))
+* use SpaceIFeeds ([5b7f2fc](https://github.com/ethereum-push-notification-service/push-sdk/commit/5b7f2fc2398a2203925059aa2721e855ea9f98d4))
+
+
+
+## [0.0.1-alpha.25](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.4.1...restapi-0.0.1-alpha.25) (2023-07-19)
+
+
+### Bug Fixes
+
+* fixed merge conflicts ([dfab492](https://github.com/ethereum-push-notification-service/push-sdk/commit/dfab492127e821219c5fd5dc08ed08a172bee31b))
+* Merge branch 'alpha' into alpha-deployment ([a71302b](https://github.com/ethereum-push-notification-service/push-sdk/commit/a71302b4a5066cb9d00ca5d14e55228c558eda85))
+* Merge branch 'main' into alpha-deployment ([fe93d43](https://github.com/ethereum-push-notification-service/push-sdk/commit/fe93d43a103d5067b16d8f7a5d01835be1d1f40a))
+* renamed spaces variables and removed some unused variables ([3519d39](https://github.com/ethereum-push-notification-service/push-sdk/commit/3519d3982be389711f48891896478b7a35a71b73))
+* space api ([064e10d](https://github.com/ethereum-push-notification-service/push-sdk/commit/064e10d9c66ab1d39f799fd64a39652862b2f074))
+
+
+
+## [0.0.1-alpha.24](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.23...restapi-0.0.1-alpha.24) (2023-07-14)
+
+
+### Bug Fixes
+
+* rename chats to spaces ([899eb21](https://github.com/ethereum-push-notification-service/push-sdk/commit/899eb212af29e3a65541686d98927e37b97927c5))
+
+
+
+## [0.0.1-alpha.23](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.22...restapi-0.0.1-alpha.23) (2023-07-12)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([b120e30](https://github.com/ethereum-push-notification-service/push-sdk/commit/b120e302f6b9f8e360b43f80dcdd3248c1e4304b))
+* Merge branch 'alpha' into alpha-deployment ([54c5721](https://github.com/ethereum-push-notification-service/push-sdk/commit/54c57219c7f3f198a3f7578a0720895aff2d27f4))
+* Merge branch 'main' into alpha ([7b316ec](https://github.com/ethereum-push-notification-service/push-sdk/commit/7b316ec8e6f3178c02e7fce6d27884ba8ef1b4f4))
+* Merge branch 'main' into alpha ([d66202d](https://github.com/ethereum-push-notification-service/push-sdk/commit/d66202d0798b9ec731d7f5d30031b89ae29d72b4))
+
+
+
+## [0.0.1-alpha.22](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.21...restapi-0.0.1-alpha.22) (2023-07-07)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([5c84e2f](https://github.com/ethereum-push-notification-service/push-sdk/commit/5c84e2f07667fe4e9d94561544807b11c103ac49))
+* merged maain ([942cc65](https://github.com/ethereum-push-notification-service/push-sdk/commit/942cc65a60aa043054cebb143990711fb6e2efdb))
+
+
+
+## [0.0.1-alpha.21](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.20...restapi-0.0.1-alpha.21) (2023-07-07)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([c05d024](https://github.com/ethereum-push-notification-service/push-sdk/commit/c05d024415bb1cb9e1fe59714d7db5516d161c06))
+* merged main ([46cf04e](https://github.com/ethereum-push-notification-service/push-sdk/commit/46cf04e75c314065c77a5a77d9351d9ccc7e0a58))
+* spaces naming ([6db7fc0](https://github.com/ethereum-push-notification-service/push-sdk/commit/6db7fc09b680060f022040feb2a22aeed9c652d0))
+
+
+
+## [0.0.1-alpha.20](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.19...restapi-0.0.1-alpha.20) (2023-07-03)
+
+
+### Bug Fixes
+
+* new commit ([25f2725](https://github.com/ethereum-push-notification-service/push-sdk/commit/25f2725efb0e1017ee2a0460259b27f252471014))
+
+
+
+## [0.0.1-alpha.19](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.3.9...restapi-0.0.1-alpha.19) (2023-07-03)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a15e368](https://github.com/ethereum-push-notification-service/push-sdk/commit/a15e368241215e2e2219792afd718567d621bf2a))
+* merge main ([6998d35](https://github.com/ethereum-push-notification-service/push-sdk/commit/6998d35aa181f17a5ad8d9501943a6a867814650))
+* rename based on new convention ([0e34479](https://github.com/ethereum-push-notification-service/push-sdk/commit/0e34479b1581abd59e0f853d6547e23a0afb5e28))
+
+
+
+## [0.0.1-alpha.18](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.3.8...restapi-0.0.1-alpha.18) (2023-06-20)
+
+
+### Bug Fixes
+
+* add name to SpaceIFeeds ([9c22271](https://github.com/ethereum-push-notification-service/push-sdk/commit/9c222715d0f15ae912b90661f9d18d42bddc4c89))
+* Merge branch 'alpha' into alpha-deployment ([b521522](https://github.com/ethereum-push-notification-service/push-sdk/commit/b521522c3b147b789a03b2683da4b6cefac795fe))
+* Merge branch 'main' into alpha ([64de06f](https://github.com/ethereum-push-notification-service/push-sdk/commit/64de06fc3cfd4359cf0d7fb70212e775ce9e51b9))
+* merge main ([27105a2](https://github.com/ethereum-push-notification-service/push-sdk/commit/27105a247fe4bd4db78a41be06ef6a2d52fb6b21))
+* update path ([10d62b1](https://github.com/ethereum-push-notification-service/push-sdk/commit/10d62b1a017b3d0a5044a4ab33bdce183f795f51))
+
+
+
+## [0.0.1-alpha.17](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.3.5...restapi-0.0.1-alpha.17) (2023-06-08)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a9d8ff1](https://github.com/ethereum-push-notification-service/push-sdk/commit/a9d8ff18bcad950e40b966e5b4020e29b493aa28))
+* merge main ([78c020a](https://github.com/ethereum-push-notification-service/push-sdk/commit/78c020ac61decc2d3b78d3749c8ec5df7478842f))
+* **video:** fix error on repeated acceptRequest calls ([#442](https://github.com/ethereum-push-notification-service/push-sdk/issues/442)) ([f34bfa0](https://github.com/ethereum-push-notification-service/push-sdk/commit/f34bfa09cf88e812e07c0dcf7fabf792726c577f))
+
+
+
+## [0.0.1-alpha.16](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.3.3...restapi-0.0.1-alpha.16) (2023-06-02)
+
+
+### Bug Fixes
+
+* add spaces for functions ([#307](https://github.com/ethereum-push-notification-service/push-sdk/issues/307)) ([aea015a](https://github.com/ethereum-push-notification-service/push-sdk/commit/aea015ae478da77ebaa41a4e111ac213027b0b6a))
+* Merge branch 'alpha' into alpha-deployment ([ad6a56b](https://github.com/ethereum-push-notification-service/push-sdk/commit/ad6a56be24c326b7fb1f6eddb01b20b489eee27d))
+* merge main ([3959345](https://github.com/ethereum-push-notification-service/push-sdk/commit/39593456140e152e53f4bd7c10a19e0d8f05dfc9))
+
+
+
+## [0.0.1-alpha.15](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.3.2...restapi-0.0.1-alpha.15) (2023-05-29)
+
+
+### Bug Fixes
+
+* fix nft videocall ([#411](https://github.com/ethereum-push-notification-service/push-sdk/issues/411)) ([8cdb999](https://github.com/ethereum-push-notification-service/push-sdk/commit/8cdb999bc548caf67ec6fbe625253b5795a4e465))
+* Iuser structure changed ([#365](https://github.com/ethereum-push-notification-service/push-sdk/issues/365)) ([2fc6f54](https://github.com/ethereum-push-notification-service/push-sdk/commit/2fc6f549c80a65a5a6009b0c2fa9635d757bdf11)), closes [#390](https://github.com/ethereum-push-notification-service/push-sdk/issues/390) [#295](https://github.com/ethereum-push-notification-service/push-sdk/issues/295)
+* Merge branch 'alpha' into alpha-deployment ([a66c9a4](https://github.com/ethereum-push-notification-service/push-sdk/commit/a66c9a4a3628700a450b8e2fb7a5f942d1d84095))
+* Merge branch 'alpha' into alpha-deployment ([f247665](https://github.com/ethereum-push-notification-service/push-sdk/commit/f2476650b650ade59721c30f6e8483e86c013cd4))
+* merged main to alpha ([067bc5d](https://github.com/ethereum-push-notification-service/push-sdk/commit/067bc5d358c5f218628a980ce23ab3b39615805f))
+
+
+
+## [0.0.1-alpha.13](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.12...restapi-0.0.1-alpha.13) (2023-05-19)
+
+
+### Bug Fixes
+
+* backward compatiblity fix ([fbf2463](https://github.com/ethereum-push-notification-service/push-sdk/commit/fbf246396a44513626fc1dda6e90c12d2f073ead))
+* Merge branch 'alpha' into alpha-deployment ([3b5a0f1](https://github.com/ethereum-push-notification-service/push-sdk/commit/3b5a0f160b72e775cf17031067fa7488171e1bbd))
+
+
+
+## [0.0.1-alpha.12](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.11...restapi-0.0.1-alpha.12) (2023-05-19)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([963cc02](https://github.com/ethereum-push-notification-service/push-sdk/commit/963cc02768862b6a9427519257ff9f9565f613ea))
+* **video:** fix enableAudio ([85ef733](https://github.com/ethereum-push-notification-service/push-sdk/commit/85ef733127bdfbae5c66c671ddc7700785d192c0))
+
+
+
+## [0.0.1-alpha.11](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.10...restapi-0.0.1-alpha.11) (2023-05-19)
+
+
+### Bug Fixes
+
+* added enums ([f1880d8](https://github.com/ethereum-push-notification-service/push-sdk/commit/f1880d8f037fc640851af4311bd5e514de5cf3db))
+* changed additionalMeta structure ([#406](https://github.com/ethereum-push-notification-service/push-sdk/issues/406)) ([0cf573e](https://github.com/ethereum-push-notification-service/push-sdk/commit/0cf573e56165bf3164a42cbc4b41a3085801e90a))
+* fix versions ([05c8fa9](https://github.com/ethereum-push-notification-service/push-sdk/commit/05c8fa9f9286e78d706c6be53e7b8ae963105766))
+* Merge branch 'alpha' into alpha-deployment ([68f11eb](https://github.com/ethereum-push-notification-service/push-sdk/commit/68f11eb71d44423081000c00c36cb0a936558f2f))
+* Merge branch 'alpha' into alpha-deployment ([3700515](https://github.com/ethereum-push-notification-service/push-sdk/commit/3700515be010fdcab6062db0a039f7df612a7a6b))
+* Merge branch 'alpha' into alpha-deployment ([925b437](https://github.com/ethereum-push-notification-service/push-sdk/commit/925b4379aa7b7d2d061b23d5ccbc42d06829f100))
+* **sendvideonotifications:** modify additional meta acc to new std ([#407](https://github.com/ethereum-push-notification-service/push-sdk/issues/407)) ([9d2124a](https://github.com/ethereum-push-notification-service/push-sdk/commit/9d2124aa61f798a0b137636aac62397e1e52150e))
+* **types:** remove bad import ([5517200](https://github.com/ethereum-push-notification-service/push-sdk/commit/55172002a2cecb33407a3828c2debeca24e0c972))
+* **video:** remove stop audio/video logic from create function ([#404](https://github.com/ethereum-push-notification-service/push-sdk/issues/404)) ([983c896](https://github.com/ethereum-push-notification-service/push-sdk/commit/983c896a2c89463f117f5a4d8153ef95501f2124))
+
+
+### Reverts
+
+* **getverificationproof:** add wallet and env params to getVerificationProof ([#403](https://github.com/ethereum-push-notification-service/push-sdk/issues/403)) ([26f6fcb](https://github.com/ethereum-push-notification-service/push-sdk/commit/26f6fcb9b2992850cd33ea613cea13830bd48bc3))
+
+
+
+## [0.0.1-alpha.10](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.9...restapi-0.0.1-alpha.10) (2023-05-17)
+
+
+### Bug Fixes
+
+* added deprecated info to history ([#399](https://github.com/ethereum-push-notification-service/push-sdk/issues/399)) ([eda1a34](https://github.com/ethereum-push-notification-service/push-sdk/commit/eda1a345975141c5656891dbf919aacd2924d66b))
+* Merge branch 'alpha' into alpha-deployment ([46ebed2](https://github.com/ethereum-push-notification-service/push-sdk/commit/46ebed2b9d4b4ff0518429a091d0a37b1d3f022d))
+
+
+
+## [0.0.1-alpha.9](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.8...restapi-0.0.1-alpha.9) (2023-05-16)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([469398d](https://github.com/ethereum-push-notification-service/push-sdk/commit/469398dc94df805257d6a6bb8e0707cebc5f7d8a))
+* **video:** turn off trickle while creating peer instance ([#398](https://github.com/ethereum-push-notification-service/push-sdk/issues/398)) ([ae5b38e](https://github.com/ethereum-push-notification-service/push-sdk/commit/ae5b38e702539eaf92a516b4e557c5a88de0f4c7))
+
+
+
+## [0.0.1-alpha.8](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.7...restapi-0.0.1-alpha.8) (2023-05-16)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([549fd83](https://github.com/ethereum-push-notification-service/push-sdk/commit/549fd839867d84a98a10206a7f9945aeb1720e49))
+* Merge branch 'main' into alpha ([72464fd](https://github.com/ethereum-push-notification-service/push-sdk/commit/72464fd97260b612649035e3b241f946de8f9e92))
+* **video:** set trickle to true while creating peer instance ([#397](https://github.com/ethereum-push-notification-service/push-sdk/issues/397)) ([0b609be](https://github.com/ethereum-push-notification-service/push-sdk/commit/0b609bec87a6187d1e7cbf8052a2b9a36b9fcd7a))
+
+
+
+## [0.0.1-alpha.7](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.6...restapi-0.0.1-alpha.7) (2023-05-15)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([37c1c8d](https://github.com/ethereum-push-notification-service/push-sdk/commit/37c1c8db579876f5835c2e5bb5e6baf073dc9208))
+* **video:** remove status change upon connect in request ([#394](https://github.com/ethereum-push-notification-service/push-sdk/issues/394)) ([7441ef0](https://github.com/ethereum-push-notification-service/push-sdk/commit/7441ef0fb2c9ed39e12a4f1819ade0ee7e0d6b10))
+
+
+
+## [0.0.1-alpha.6](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.5...restapi-0.0.1-alpha.6) (2023-05-14)
+
+
+### Bug Fixes
+
+* add video call retry logic upon error & doc: add video call in restapi/readme  ([#391](https://github.com/ethereum-push-notification-service/push-sdk/issues/391)) ([9c8c86b](https://github.com/ethereum-push-notification-service/push-sdk/commit/9c8c86b35d1cb0300d0170e87931dd31a15f9342))
+
+
+
+## [0.0.1-alpha.5](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.4...restapi-0.0.1-alpha.5) (2023-05-14)
+
+
+
+## [0.0.1-alpha.4](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.2.15...restapi-0.0.1-alpha.4) (2023-05-12)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a1a8666](https://github.com/ethereum-push-notification-service/push-sdk/commit/a1a86661b1823c84328ec90ac9aafc6c57f574f3))
+* Merge branch 'main' into alpha ([5fc51db](https://github.com/ethereum-push-notification-service/push-sdk/commit/5fc51db1a336203048b4b42a5384cb37cf79c509))
+* **video:** separate react state from video class instance variable data ([#389](https://github.com/ethereum-push-notification-service/push-sdk/issues/389)) ([83bf445](https://github.com/ethereum-push-notification-service/push-sdk/commit/83bf4457332b127bf9e41a2f4c93fb851367724d))
+
+
+
+## [0.0.1-alpha.3](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.2...restapi-0.0.1-alpha.3) (2023-05-11)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([e19b9b0](https://github.com/ethereum-push-notification-service/push-sdk/commit/e19b9b05b60174e68dc7bfe0e2349e20d8af2604))
+* Replace arrow functions with normal functions in the Video class ([#380](https://github.com/ethereum-push-notification-service/push-sdk/issues/380)) ([b90435a](https://github.com/ethereum-push-notification-service/push-sdk/commit/b90435a953b908899c92eb5b4d4c3677e47b1552))
+
+
+
+## [0.0.1-alpha.2](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-1.2.13...restapi-0.0.1-alpha.2) (2023-05-10)
+
+
+### Bug Fixes
+
+* merge alpha ([7f0642c](https://github.com/ethereum-push-notification-service/push-sdk/commit/7f0642c4c417390a5bb52d36d9493bd5b767b634))
+* merge main ([a5fdfe1](https://github.com/ethereum-push-notification-service/push-sdk/commit/a5fdfe10f18c857c32aa5fe5c5dd95db0f268cd1))
+* merge main to alpha ([4866a37](https://github.com/ethereum-push-notification-service/push-sdk/commit/4866a37ed0502c0d16ac91f088d3bb5e597b652a))
+
+
+
+## [0.0.1-alpha.1](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.0...restapi-0.0.1-alpha.1) (2023-05-08)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([1223c60](https://github.com/ethereum-push-notification-service/push-sdk/commit/1223c60b0f179b26537992a776155aefffd7b5ef))
+* sendVideoNotification and end video call logic ([#367](https://github.com/ethereum-push-notification-service/push-sdk/issues/367)) ([d39c703](https://github.com/ethereum-push-notification-service/push-sdk/commit/d39c703bcda6d332717a5e9b1af6ab574be9d991))
+
+
+
+## [0.0.1-alpha.0](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-beta.2...restapi-0.0.1-alpha.0) (2023-05-04)
+
+
+### Bug Fixes
+
+* added pagination and deprecation tag ([#346](https://github.com/ethereum-push-notification-service/push-sdk/issues/346)) ([69763b8](https://github.com/ethereum-push-notification-service/push-sdk/commit/69763b8da2cf3e92bb85908e4f46a72b650c9dba))
+* changed Definitions for auth.update and upgrade ([#351](https://github.com/ethereum-push-notification-service/push-sdk/issues/351)) ([31daee3](https://github.com/ethereum-push-notification-service/push-sdk/commit/31daee3a5aa913705d1dec8210c0412cd89c94c9))
+* eip191v2 signatures for create and auth.update ([#353](https://github.com/ethereum-push-notification-service/push-sdk/issues/353)) ([008e6d0](https://github.com/ethereum-push-notification-service/push-sdk/commit/008e6d08d75fdacf19f1674cc2b8bd82091fa31f))
+* Merge branch 'main' into alpha ([477bae4](https://github.com/ethereum-push-notification-service/push-sdk/commit/477bae4fdc4e86374615f0f67c41c570a567b9fe))
+
+
+
+## [0.0.1-alpha.45](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.44...restapi-0.0.1-alpha.45) (2023-10-05)
+
+
+### Bug Fixes
+
+* alpha to main ([76a8d84](https://github.com/ethereum-push-notification-service/push-sdk/commit/76a8d849e689793590cf096c794016267503df3d))
+* local tests ([#744](https://github.com/ethereum-push-notification-service/push-sdk/issues/744)) ([e6ac9dc](https://github.com/ethereum-push-notification-service/push-sdk/commit/e6ac9dc896e710213d74e715da8af971c10b5e29))
+* Merge branch 'alpha' into alpha-deployment ([522814d](https://github.com/ethereum-push-notification-service/push-sdk/commit/522814d67af116576c753ee4c1a2681967a4c11c))
+* Merge branch 'alpha' into alpha-deployment ([fdb3925](https://github.com/ethereum-push-notification-service/push-sdk/commit/fdb3925a9ee63dc747ba227dfb719d784c21592d))
+* Notification event mutation ([ec2aedb](https://github.com/ethereum-push-notification-service/push-sdk/commit/ec2aedbc2e09bc4ded91a9f119464e3a61983606))
+* restored config ([098beac](https://github.com/ethereum-push-notification-service/push-sdk/commit/098beacaebdd19678878c9e50d5b3f103cb39803))
+
+
+
 ## [0.0.1-alpha.44](https://github.com/ethereum-push-notification-service/push-sdk/compare/restapi-0.0.1-alpha.43...restapi-0.0.1-alpha.44) (2023-10-03)
 
 
diff --git a/packages/restapi/package.json b/packages/restapi/package.json
index 7d07fba25..ebc92f5d0 100644
--- a/packages/restapi/package.json
+++ b/packages/restapi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pushprotocol/restapi",
-  "version": "1.4.22",
+  "version": "0.0.1-alpha.50",
   "type": "commonjs",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
diff --git a/packages/restapi/src/lib/space/acceptPromotionRequest.ts b/packages/restapi/src/lib/space/acceptPromotionRequest.ts
index 6ed125b25..c37c5e3b7 100644
--- a/packages/restapi/src/lib/space/acceptPromotionRequest.ts
+++ b/packages/restapi/src/lib/space/acceptPromotionRequest.ts
@@ -1,11 +1,15 @@
+import { produce } from 'immer';
+
 import type Space from './Space';
 import { addSpeakers } from './addSpeakers';
+import sendLiveSpaceData from './helpers/sendLiveSpaceData';
 
 import { pCAIP10ToWallet } from '../helpers';
 import {
   SPACE_ACCEPT_REQUEST_TYPE,
   SPACE_INVITE_ROLES,
 } from '../payloads/constants';
+import { CHAT } from '../types';
 
 export interface IAcceptPromotionRequestType {
   signalData: any;
@@ -35,6 +39,35 @@ export async function acceptPromotionRequest(
     env: this.env,
   });
 
+  const modifiedLiveSpaceData = produce(
+    this.spaceSpecificData.liveSpaceData,
+    (draft) => {
+      const listenerIndex =
+        this.spaceSpecificData.liveSpaceData.listeners.findIndex(
+          (listener) =>
+            pCAIP10ToWallet(listener.address) ===
+            pCAIP10ToWallet(promoteeAddress)
+        );
+
+      draft.listeners.splice(listenerIndex, 1);
+
+      draft.speakers.push({
+        address: pCAIP10ToWallet(promoteeAddress),
+        emojiReactions: null,
+        audio: null,
+      });
+    }
+  );
+
+  await sendLiveSpaceData({
+    spaceId: this.spaceSpecificData.spaceId,
+    pgpPrivateKey: this.pgpPrivateKey,
+    env: this.env,
+    signer: this.signer,
+    liveSpaceData: modifiedLiveSpaceData,
+    action: CHAT.META.SPACE.SPEAKER.PRVILEGE,
+  });
+
   // accept the promotion request
   // this.acceptRequest({
   //   signalData,
diff --git a/packages/uiweb/CHANGELOG.md b/packages/uiweb/CHANGELOG.md
index fc461f033..90ffe6c03 100644
--- a/packages/uiweb/CHANGELOG.md
+++ b/packages/uiweb/CHANGELOG.md
@@ -2,6 +2,164 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.29](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.28...uiweb-0.0.1-alpha.29) (2023-11-07)
+
+
+### Bug Fixes
+
+* added alias to support chat ([#821](https://github.com/ethereum-push-notification-service/push-sdk/issues/821)) ([cbd0bbd](https://github.com/ethereum-push-notification-service/push-sdk/commit/cbd0bbd15d9269c3dee9b257e6a3c6adafc7e206))
+* Merge branch 'alpha' into alpha-deployment ([247f0f2](https://github.com/ethereum-push-notification-service/push-sdk/commit/247f0f22bd7b814807ba4b98d11351c114e156f6))
+
+
+
+## [0.0.1-alpha.28](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.27...uiweb-0.0.1-alpha.28) (2023-11-03)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([bf0510a](https://github.com/ethereum-push-notification-service/push-sdk/commit/bf0510aa1a299e2d90af01735882fac1e7821f5d))
+
+
+### Features
+
+* added some more default patterns for markdown ([#817](https://github.com/ethereum-push-notification-service/push-sdk/issues/817)) ([838b5f2](https://github.com/ethereum-push-notification-service/push-sdk/commit/838b5f242ab92fb958a8da30ead6bed034e5525c))
+
+
+
+## [0.0.1-alpha.27](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.26...uiweb-0.0.1-alpha.27) (2023-11-03)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([eac8df1](https://github.com/ethereum-push-notification-service/push-sdk/commit/eac8df177d358254221666bd0b23d5d982b93167))
+
+
+
+## [0.0.1-alpha.26](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.25...uiweb-0.0.1-alpha.26) (2023-11-02)
+
+
+### Bug Fixes
+
+* merge alpha ([745c3d6](https://github.com/ethereum-push-notification-service/push-sdk/commit/745c3d6fdffce621c0e14252c1d926384d959246))
+* Merge branch 'alpha' into alpha-deployment ([394010d](https://github.com/ethereum-push-notification-service/push-sdk/commit/394010d5b0d947abea5efa4fab1de332c621d9b7))
+* replaced hardcoded access failed msg with actual conditions ([#812](https://github.com/ethereum-push-notification-service/push-sdk/issues/812)) ([035c784](https://github.com/ethereum-push-notification-service/push-sdk/commit/035c784d649f878f76b4b56ef7f4a908bd33b419))
+
+
+
+## [0.0.1-alpha.25](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.24...uiweb-0.0.1-alpha.25) (2023-10-31)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a4ca4dc](https://github.com/ethereum-push-notification-service/push-sdk/commit/a4ca4dc0ac1424741642f0afa55dc6ac581af3ab))
+
+
+
+## [0.0.1-alpha.25](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.24...uiweb-0.0.1-alpha.25) (2023-10-31)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([a4ca4dc](https://github.com/ethereum-push-notification-service/push-sdk/commit/a4ca4dc0ac1424741642f0afa55dc6ac581af3ab))
+
+
+
+## [0.0.1-alpha.24](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.23...uiweb-0.0.1-alpha.24) (2023-10-25)
+
+
+### Bug Fixes
+
+* fixed horizontal alignment of group info and fixed icon on connect button modal ([#804](https://github.com/ethereum-push-notification-service/push-sdk/issues/804)) ([982da0d](https://github.com/ethereum-push-notification-service/push-sdk/commit/982da0de8826380ce6c048ce9689c1ecb7c8efbc))
+* Merge branch 'alpha' into alpha-deployment ([11edd78](https://github.com/ethereum-push-notification-service/push-sdk/commit/11edd786f40bd7cfc69d9a859901b03625d410fb))
+
+
+
+## [0.0.1-alpha.23](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.22...uiweb-0.0.1-alpha.23) (2023-10-24)
+
+
+
+## [0.0.1-alpha.22](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.21...uiweb-0.0.1-alpha.22) (2023-10-19)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([c46ab7e](https://github.com/ethereum-push-notification-service/push-sdk/commit/c46ab7e07950e72310047a0a16f63fd01fd32a02))
+* Merge branch 'alpha' into alpha-deployment ([5c1a194](https://github.com/ethereum-push-notification-service/push-sdk/commit/5c1a194b3a44b2f486b392e4e02c9fd711351864))
+
+
+
+## [0.0.1-alpha.21](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.20...uiweb-0.0.1-alpha.21) (2023-10-16)
+
+
+### Bug Fixes
+
+* fixed lint issues in chat ([#784](https://github.com/ethereum-push-notification-service/push-sdk/issues/784)) ([0c71905](https://github.com/ethereum-push-notification-service/push-sdk/commit/0c719052a873c1c2aceefbd801f672542ba9ec69))
+* Merge branch 'alpha' into alpha-deployment ([ff9e92c](https://github.com/ethereum-push-notification-service/push-sdk/commit/ff9e92c5dda229af26be8f858b05579e7f366057))
+* Merge branch 'alpha' into alpha-deployment ([a996249](https://github.com/ethereum-push-notification-service/push-sdk/commit/a996249be88209d5ff7a2fb228ca56bbe294e9c3))
+
+
+
+## [0.0.1-alpha.20](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.19...uiweb-0.0.1-alpha.20) (2023-10-13)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([de2303a](https://github.com/ethereum-push-notification-service/push-sdk/commit/de2303a76da0057f6ad0bd191c7ddd520f40b037))
+* ui fixes for lk ([#782](https://github.com/ethereum-push-notification-service/push-sdk/issues/782)) ([5f49fac](https://github.com/ethereum-push-notification-service/push-sdk/commit/5f49fac6d88f7745609e41df89f05851aa046025))
+
+
+
+## [0.0.1-alpha.19](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.18...uiweb-0.0.1-alpha.19) (2023-10-12)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([eff31e3](https://github.com/ethereum-push-notification-service/push-sdk/commit/eff31e3dfbbc1f2835366ad5093109d7a5e58b34))
+
+
+
+## [0.0.1-alpha.18](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.17...uiweb-0.0.1-alpha.18) (2023-10-10)
+
+
+### Bug Fixes
+
+* merge alpha ([e476962](https://github.com/ethereum-push-notification-service/push-sdk/commit/e476962f26070e0dfd20e5334514eee930eeeaad))
+* Merge branch 'alpha' into alpha-deployment ([6d965a9](https://github.com/ethereum-push-notification-service/push-sdk/commit/6d965a97a2486e8f4d32f7ae0c4391e4d788935f))
+* merge main ([16dd007](https://github.com/ethereum-push-notification-service/push-sdk/commit/16dd007772a4c5104e336eef318f0056de7a5cfb))
+* merge main ([902194c](https://github.com/ethereum-push-notification-service/push-sdk/commit/902194cd30f9b83891b6e3dde8c39ddddacc876e))
+
+
+
+## [1.1.14](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.15...uiweb-1.1.14) (2023-10-03)
+
+
+### Bug Fixes
+
+* Merge branch 'main' into deployment ([afdc6f8](https://github.com/ethereum-push-notification-service/push-sdk/commit/afdc6f8669dd0cd9ece859f4c8f6dc4181872e2c))
+* Merge branch 'main' into deployment ([f9bb113](https://github.com/ethereum-push-notification-service/push-sdk/commit/f9bb113702f47132dc512910e5060286e985f4bf))
+
+
+
+## [0.0.1-alpha.17](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.16...uiweb-0.0.1-alpha.17) (2023-10-05)
+
+
+### Bug Fixes
+
+* Merge branch 'alpha' into alpha-deployment ([95c84a5](https://github.com/ethereum-push-notification-service/push-sdk/commit/95c84a58e2e4f21465ccd21c29d82b3ace594f0d))
+
+
+
+## [0.0.1-alpha.16](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.15...uiweb-0.0.1-alpha.16) (2023-10-05)
+
+
+### Bug Fixes
+
+* alpha to main ([76a8d84](https://github.com/ethereum-push-notification-service/push-sdk/commit/76a8d849e689793590cf096c794016267503df3d))
+* fixed typo ([3c6b14d](https://github.com/ethereum-push-notification-service/push-sdk/commit/3c6b14d1ae68ce74c91864d898e3d646898655bb))
+* minor fixes ([6737403](https://github.com/ethereum-push-notification-service/push-sdk/commit/6737403738dd70ad4056f9d10b4ab363fc172094))
+
+
+
 ## [0.0.1-alpha.15](https://github.com/ethereum-push-notification-service/push-sdk/compare/uiweb-0.0.1-alpha.14...uiweb-0.0.1-alpha.15) (2023-09-25)
 
 
diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
index 0bfdce8e0..fbd33cd9a 100644
--- a/packages/uiweb/package.json
+++ b/packages/uiweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pushprotocol/uiweb",
-  "version": "0.0.1-alpha.15",
+  "version": "0.0.1-alpha.29",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -25,6 +25,8 @@
     "livekit-client": "^1.13.3",
     "moment": "^2.29.4",
     "react-icons": "^4.10.1",
+    "react-easy-crop": "^4.1.4",
+    "react-image-file-resizer": "^0.4.7",
     "react-toastify": "^9.1.3",
     "react-twitter-embed": "^4.0.4",
     "uuid": "^9.0.1"
@@ -33,6 +35,6 @@
     "@pushprotocol/restapi": "^1.2.15",
     "@pushprotocol/socket": "^0.5.0",
     "react": ">=16.8.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.0.8"
   }
 }
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
index dd8d4f64d..e99062b39 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/AddWalletContent.tsx
@@ -17,7 +17,7 @@ import useToast from '../reusables/NewToast';
 import {
   getNewChatUser,
 } from '../../../helpers';
-import { ModalButtonProps, User } from '../exportedTypes';
+import { IChatTheme, ModalButtonProps, User } from '../exportedTypes';
 import { addWalletValidation } from '../helpers/helper';
 import { device } from '../../../config';
 import CloseIcon from '../../../icons/close.svg';
@@ -44,7 +44,6 @@ export const AddWalletContent = ({
   handleMemberList,
   groupMembers,
   isLoading,
-  modalHeader,
 }: AddWalletContentProps) => {
   const theme = useContext(ThemeContext);
 
@@ -119,6 +118,7 @@ export const AddWalletContent = ({
 
   return (
     <Section
+      margin="auto"
       width={isMobile ? '100%' : '410px'}
       flexDirection="column"
       padding={isMobile ? '0px auto' : '0px 10px'}
@@ -241,15 +241,15 @@ const MultipleMemberList = styled.div`
   }
 `;
 
-const ModalConfirmButton = styled.button<ModalButtonProps>`
+const ModalConfirmButton = styled.button<ModalButtonProps & { theme: IChatTheme } >`
   margin: 60px 0 0 0;
   width: 197px;
   background: ${(props) =>
-    props.memberListCount ? props.theme.backgroundColor.buttonBackground : props.theme.backgroundColor.buttonDisableBackground};
+    props.memberListCount ? props.theme.backgroundColor!.buttonBackground : props.theme.backgroundColor!.buttonDisableBackground};
   color: ${(props) =>
-    props.memberListCount ? props.theme.textColor.buttonText : props.theme.textColor.buttonDisableText};
+    props.memberListCount ? props.theme.textColor!.buttonText : props.theme.textColor!.buttonDisableText};
   border: ${(props) =>
-    props.memberListCount ? 'none' : props.theme.border.modal};
+    props.memberListCount ? 'none' : props.theme.border!.modal};
   min-width: 50%;
   box-sizing: border-box;
   cursor: pointer;
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
index fa6d4e27b..e47d24135 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -20,114 +20,27 @@ import 'react-toastify/dist/ReactToastify.min.css';
 
 import { IGroup } from '../../../types';
 import { isValidETHAddress } from '../helpers/helper';
-import { IChatProfile, IChatTheme } from '../exportedTypes';
+import {
+  IChatProfile,
+  MODAL_BACKGROUND_TYPE,
+  MODAL_POSITION_TYPE,
+
+} from '../exportedTypes';
 import { InfuraAPIKey, allowedNetworks, device } from '../../../config';
 import { resolveNewEns, shortenText } from '../../../helpers';
-import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg';
+
 import PublicChatIcon from '../../../icons/Public-Chat.svg';
 import GreyImage from '../../../icons/greyImage.png';
 import InfoIcon from '../../../icons/infodark.svg';
 import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg';
+import { TokenGatedSvg } from '../../../icons/TokenGatedSvg';
 
 
-type OptionProps = {
-  options: boolean;
-  setOptions: React.Dispatch<React.SetStateAction<boolean>>;
-  isGroup: boolean;
-  groupInfo: IGroup | null | undefined;
-  setGroupInfo: React.Dispatch<React.SetStateAction<IGroup | null | undefined>>;
-  theme: IChatTheme;
-};
-
-const Options = ({
-  options,
-  setOptions,
-  isGroup,
-  groupInfo,
-  setGroupInfo,
-  theme,
-}: OptionProps) => {
-  const DropdownRef = useRef(null);
-  const [modal, setModal] = useState(false);
-
-  useClickAway(DropdownRef, () => {
-    setOptions(false);
-  });
-
-  const ShowModal = () => {
-    setModal(true);
-  };
-
-  if (groupInfo && isGroup) {
-    return (
-      <Section
-        zIndex="300"
-        flexDirection="row"
-        gap="10px"
-        margin="0 20px 0 auto"
-      >
-        {/* {(groupInfo?.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && (
-          <Image
-            src={TokenGatedIcon}
-            height="24px"
-            maxHeight="24px"
-            width={'auto'}
-          />
-        )} */}
-        <Image
-          src={groupInfo?.isPublic ? PublicChatIcon : TokenGatedIcon}
-          height="28px"
-          maxHeight="32px"
-          width={'auto'}
-        />
-
-        <ImageItem onClick={() => setOptions(true)}>
-          <Image
-            src={VerticalEllipsisIcon}
-            height="21px"
-            maxHeight="32px"
-            width={'auto'}
-            cursor="pointer"
-          />
-
-          {options && (
-            <DropDownBar theme={theme} ref={DropdownRef}>
-              <DropDownItem cursor="pointer" onClick={ShowModal}>
-                <Image
-                  src={InfoIcon}
-                  height="21px"
-                  maxHeight="21px"
-                  width={'auto'}
-                  cursor="pointer"
-                />
-
-                <TextItem cursor="pointer">Group Info</TextItem>
-              </DropDownItem>
-            </DropDownBar>
-          )}
-
-          {modal && (
-            <GroupInfoModal
-              theme={theme}
-              setModal={setModal}
-              groupInfo={groupInfo}
-              setGroupInfo={setGroupInfo}
-            />
-          )}
-        </ImageItem>
-      </Section>
-    );
-  } else {
-    return null;
-  }
-};
-
 export const ChatProfile: React.FC<IChatProfile> = ({
   chatId,
   style,
-}: {
-  chatId: string;
-  style: 'Info' | 'Preview';
+  groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }) => {
   const theme = useContext(ThemeContext);
   const { account, env } = useChatData();
@@ -142,6 +55,16 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const isMobile = useMediaQuery(device.tablet);
   const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5;
   const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);
+  const DropdownRef = useRef(null);
+  const [modal, setModal] = useState(false);
+
+  useClickAway(DropdownRef, () => {
+    setOptions(false);
+  });
+
+  const ShowModal = () => {
+    setModal(true);
+  };
 
   const fetchProfileData = async () => {
     if (isValidETHAddress(chatId)) {
@@ -164,7 +87,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
       return isGroup
         ? groupInfo?.groupImage ?? GreyImage
         : chatInfo?.profile?.picture ??
-        createBlockie?.(chatId)?.toDataURL()?.toString();
+            createBlockie?.(chatId)?.toDataURL()?.toString();
     } else {
       return createBlockie?.(chatId)?.toDataURL()?.toString();
     }
@@ -174,13 +97,14 @@ export const ChatProfile: React.FC<IChatProfile> = ({
     return isGroup
       ? groupInfo?.groupName
       : ensName
-        ? `${ensName} (${isMobile
-          ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true)
-          : chatId
+      ? `${ensName} (${
+          isMobile
+            ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true)
+            : chatId
         })`
-        : chatInfo
-          ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true)
-          : shortenText(chatId, 6, true);
+      : chatInfo
+      ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true)
+      : shortenText(chatId, 6, true);
   };
 
   useEffect(() => {
@@ -196,16 +120,64 @@ export const ChatProfile: React.FC<IChatProfile> = ({
           member={{ wallet: getProfileName() as string, image: getImage() }}
           customStyle={{ fontSize: '17px' }}
         />
+        <Section
+          zIndex="unset"
+          flexDirection="row"
+          gap="10px"
+          margin="0 20px 0 auto"
+          alignSelf="center"
+        >
+          {(groupInfo?.rules?.chat?.conditions ||
+            groupInfo?.rules?.entry?.conditions) && <TokenGatedSvg />}
+          {!!groupInfo?.isPublic && (
+            <Image
+              src={PublicChatIcon}
+              height="28px"
+              maxHeight="32px"
+              width={'auto'}
+            />
+          )}
 
-        <Options
-          options={options}
-          setOptions={setOptions}
-          isGroup={isGroup}
-          groupInfo={groupInfo}
-          setGroupInfo={setGroupInfo}
-          theme={theme}
-        />
-
+          {!!groupInfo && isGroup && (
+            <ImageItem onClick={() => setOptions(true)}>
+              <Image
+                src={VerticalEllipsisIcon}
+                height="21px"
+                maxHeight="32px"
+                width={'auto'}
+                cursor="pointer"
+              />
+
+              {options && (
+                <DropDownBar theme={theme} ref={DropdownRef}>
+                  <DropDownItem cursor="pointer" onClick={ShowModal}>
+                    <Image
+                      src={InfoIcon}
+                      height="21px"
+                      maxHeight="21px"
+                      width={'auto'}
+                      cursor="pointer"
+                    />
+
+                    <TextItem cursor="pointer">Group Info</TextItem>
+                  </DropDownItem>
+                </DropDownBar>
+              )}
+            </ImageItem>
+          )}
+         
+        
+        </Section>
+        {modal && (
+            <GroupInfoModal
+              theme={theme}
+              setModal={setModal}
+              groupInfo={groupInfo!}
+              setGroupInfo={setGroupInfo}
+              groupInfoModalBackground={groupInfoModalBackground}
+              groupInfoModalPositionType={groupInfoModalPositionType}
+            />
+          )}
         {/* {!isGroup && 
                     <VideoChatSection>
                         <Image src={VideoChatIcon} height="18px" maxHeight="18px" width={'auto'} />
@@ -230,7 +202,6 @@ const Container = styled.div`
   align-items: center;
   padding: 6px;
   box-sizing: border-box;
-  position: relative;
 `;
 
 const ImageItem = styled.div`
@@ -241,6 +212,7 @@ const DropDownBar = styled.div`
   position: absolute;
   top: 30px;
   left: -130px;
+  cursor: pointer;
   display: block;
   min-width: 140px;
   color: rgb(101, 119, 149);
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
index aca69ae8f..855e1e70b 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -16,7 +16,7 @@ import { ProfileContainer } from '../reusables';
 
 import { IGroup } from '../../../types';
 import { IChatTheme } from '../theme';
-import { device } from '../../../config';
+import { ENV, device } from '../../../config';
 import {
   convertToWalletAddressList,
   getAdminList,
@@ -31,11 +31,12 @@ import addIcon from '../../../icons/addicon.svg';
 import DismissAdmin from '../../../icons/dismissadmin.svg';
 import AddAdmin from '../../../icons/addadmin.svg';
 import Remove from '../../../icons/remove.svg';
-import { shortenText } from '../../../helpers';
-import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg';
+import { copyToClipboard, shortenText } from '../../../helpers';
 import ConditionsComponent from '../CreateGroup/ConditionsComponent';
-import { ConditionArray } from '../exportedTypes';
-import { ACCESS_TYPE_TITLE } from '../constants';
+import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants';
+import { getRuleInfo } from '../helpers/getRulesToCondtionArray';
+import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes';
+import { TokenGatedSvg } from '../../../icons/TokenGatedSvg';
 
 const UPDATE_KEYS = {
   REMOVE_MEMBER: 'REMOVE_MEMBER',
@@ -45,6 +46,11 @@ const UPDATE_KEYS = {
 } as const;
 
 type UpdateKeys = typeof UPDATE_KEYS[keyof typeof UPDATE_KEYS];
+type UpdateGroupType = {
+  adminList: Array<string>;
+  memberList: Array<string>;
+};
+
 const SUCCESS_MESSAGE = {
   REMOVE_MEMBER: 'Removed Member successfully',
   ADD_MEMBER: 'Group Invitation sent',
@@ -89,10 +95,10 @@ const PendingMembers = ({
         </PendingSection>
 
         {showPendingRequests && (
-          <Section
-            margin="0px 0px 0px 0px"
+          <ProfileSection
             flexDirection="column"
             flex="1"
+            justifyContent="start"
             borderRadius="16px"
           >
             {groupInfo?.pendingMembers &&
@@ -114,7 +120,7 @@ const PendingMembers = ({
                   />
                 </GroupPendingMembers>
               ))}
-          </Section>
+          </ProfileSection>
         )}
       </PendingRequestWrapper>
     );
@@ -123,91 +129,36 @@ const PendingMembers = ({
   }
 };
 
-const dummyConditonsData: ConditionArray[] = [
-  [{ operator: 'any' }],
-  [
-    {
-      type: 'PUSH',
-      category: 'ERC20',
-      subcategory: 'holder',
-      data: {
-        contract: 'eip155:1:0xf418588522d5dd018b425E472991E52EBBeEEEEE',
-        amount: 1,
-        decimals: 18,
-      },
-    },
-  ],
-  [
-    { operator: 'all' },
-    {
-      type: 'PUSH',
-      category: 'ERC20',
-      subcategory: 'holder',
-      data: {
-        contract: 'eip155:137:0x58001cC1A9E17A20935079aB40B1B8f4Fc19EFd1',
-        amount: 1,
-        decimals: 18,
-      },
-    },
-    {
-      type: 'PUSH',
-      category: 'ERC721',
-      subcategory: 'holder',
-      data: {
-        contract: 'eip155:137:0x58001cC1A9E17A20935079aB40B1B8f4Fc19EFd1',
-        amount: 1,
-        decimals: 18,
-      },
-    },
-    {
-      type: 'GUILD',
-      category: 'ROLES',
-      subcategory: 'DEFAULT',
-      data: {
-        id: '1',
-        role: '346243',
-        comparison: 'all',
-      },
-    },
-  ],
-  // [
-  //   { operator: 'any' },
-  //   {
-  //     type: 'PUSH',
-  //     category: 'INVITE',
-  //     subcategory: 'DEFAULT',
-  //     data: {
-  //       inviterRoles: 'ADMIN',
-  //     },
-  //   },
-  //   {
-  //     type: 'PUSH',
-  //     category: 'INVITE',
-  //     subcategory: 'DEFAULT',
-  //     data: {
-  //       inviterRoles: 'OWNER',
-  //     },
-  //   },
-  // ],
-];
-
-const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map(
-  (criteria) => [criteria]
-);
-
 interface ConditionsInformationProps {
   theme: IChatTheme;
   groupInfo?: IGroup | null;
+  alert?: boolean;
+  header?: string;
+  subheader?: string;
 }
 
 export const ConditionsInformation = ({
   theme,
   groupInfo,
+  alert,
+  header,
+  subheader,
 }: ConditionsInformationProps) => {
+  const groupRules = getRuleInfo(groupInfo?.rules);
+  const isMobile = useMediaQuery(device.mobileL);
+
+  const getOperator = (key: keyof typeof groupRules) => {
+    if (groupRules[key as keyof typeof groupRules].length) {
+      return groupRules[key as keyof typeof groupRules][0][0]
+        ?.operator as keyof typeof OPERATOR_OPTIONS_INFO;
+    }
+    return null;
+  };
+
   return (
     <Section
-      margin="15px 0px 0px 0px"
-      gap="20px"
+      margin="5px 0px 0px 0px"
+      gap="16px"
       flexDirection="column"
       width="100%"
     >
@@ -215,91 +166,147 @@ export const ConditionsInformation = ({
         groupInfo?.rules?.entry?.conditions) && (
         <GroupTypeBadge
           theme={theme}
-          icon={TokenGatedIcon}
-          header={'Gated group'}
-          subheader={'Conditions must be true to join'}
+          icon={<TokenGatedSvg color={alert?'#E93636':undefined}/>}
+          header={header ?? 'Gated group'}
+          subheader={subheader ?? 'Conditions must be true to join and chat'}
+          alert={alert}
         />
       )}
-      {Object.keys(ACCESS_TYPE_TITLE).map((key) => (
-        <>
-          <Span fontSize="16px" fontWeight="500" alignSelf="start">
-            {  ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]?.heading}
-          </Span>
-          <ConditionSection
-            width="100%"
-            overflow="hidden auto"
-            maxHeight="12rem"
-            theme={theme}
-            padding="0 4px 0 0"
-          >
-            <ConditionsComponent
-              moreOptions={false}
-              conditionData={dummyConditonsData}
-            />
-          </ConditionSection>
-        </>
-      ))}
+      <ConditionSection
+        overflow="hidden auto"
+        maxHeight={isMobile ? '46vh' : '49vh'}
+        justifyContent="start"
+        flexDirection="column"
+        padding="0 2px 0 0"
+        theme={theme}
+      >
+        {Object.keys(ACCESS_TYPE_TITLE).map((key, idx) => (
+          <>
+            {getOperator(key as keyof typeof groupRules) ? (
+              <Section key={idx} flexDirection="column">
+                <Span
+                  fontSize="16px"
+                  fontWeight="500"
+                  alignSelf="start"
+                  margin="5px 0"
+                >
+                  {
+                    ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]
+                      ?.heading
+                  }
+                </Span>
+
+                <Span fontSize="14px" margin="15px 0">
+                  {
+                    OPERATOR_OPTIONS_INFO[
+                      groupRules[key as keyof typeof groupRules][0][0]
+                        ?.operator as keyof typeof OPERATOR_OPTIONS_INFO
+                    ]?.head
+                  }
+                  <Span color={theme.textColor?.modalSubHeadingText}>
+                    {' '}
+                    {
+                      OPERATOR_OPTIONS_INFO[
+                        groupRules[key as keyof typeof groupRules][0][0]
+                          ?.operator as keyof typeof OPERATOR_OPTIONS_INFO
+                      ]?.tail
+                    }
+                  </Span>
+                </Span>
+                <Section
+                  width="100%"
+                  justifyContent="start"
+                  flexDirection="column"
+                >
+                  <ConditionsComponent
+                    moreOptions={false}
+                    conditionData={groupRules[key as keyof typeof groupRules]}
+                  />
+                </Section>
+              </Section>
+            ) : null}
+          </>
+        ))}
+      </ConditionSection>
     </Section>
   );
 };
 
 interface GroupTypeProps {
   theme: IChatTheme;
-  icon: string;
+  icon: React.ReactNode;
   header: string;
   subheader: string;
   cursor?: string;
   handleNextInformation?: () => void;
+  alert?: boolean;
 }
 
-const GroupTypeBadge = ({
+export const GroupTypeBadge = ({
   theme,
   icon,
   header,
   subheader,
   handleNextInformation,
   cursor,
+  alert,
 }: GroupTypeProps) => {
   return (
-    <Section cursor={cursor}>
-      <PublicEncrypted onClick={handleNextInformation} theme={theme}>
-        <Image
+    // <Section cursor={cursor} justifyContent='start' alignItems='start'>
+    <PublicEncrypted
+      onClick={handleNextInformation}
+      theme={theme}
+      alert={alert}
+      cursor="pointer"
+      justifyContent="start"
+    >
+      {/* <Image
           cursor={cursor}
           src={icon}
           height="24px"
           maxHeight="24px"
           width={'auto'}
-        />
-
-        <Section
+        /> */}
+      {icon}
+      <Section
+        cursor={cursor}
+        flexDirection="column"
+        alignItems="flex-start"
+        gap="5px"
+      >
+        <Span
           cursor={cursor}
-          flexDirection="column"
-          alignItems="flex-start"
-          gap="5px"
+          fontSize="18px"
+          textAlign="left"
+          color={theme.textColor?.modalHeadingText}
         >
-          <Span
-            cursor={cursor}
-            fontSize="18px"
-            color={theme.textColor?.modalHeadingText}
-          >
-            {header}
-          </Span>
-          <Span
-            cursor={cursor}
-            fontSize="12px"
-            color={theme.textColor?.modalSubHeadingText}
-          >
-            {subheader}
-          </Span>
-        </Section>
-      </PublicEncrypted>
-    </Section>
+          {header}
+        </Span>
+        <Span
+          cursor={cursor}
+          textAlign="left"
+          fontSize="12px"
+          color={theme.textColor?.modalSubHeadingText}
+        >
+          {subheader}
+        </Span>
+      </Section>
+    </PublicEncrypted>
+    // </Section>
   );
 };
 
 type GroupSectionProps = GroupInfoModalProps & {
   handleNextInformation: () => void;
   handlePreviousInformation?: () => void;
+  handleAddRemove: ({
+    adminList,
+    memberList,
+    updateKey,
+  }: UpdateGroupType & { updateKey: UpdateKeys }) => void;
+  setShowAddMoreWalletModal: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedMemberAddress: string | null;
+  setSelectedMemberAddress: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
 type GroupInfoModalProps = {
@@ -307,6 +314,8 @@ type GroupInfoModalProps = {
   setModal: React.Dispatch<React.SetStateAction<boolean>>;
   groupInfo: IGroup;
   setGroupInfo: React.Dispatch<React.SetStateAction<IGroup | null | undefined>>;
+  groupInfoModalBackground?: ModalBackgroundType;
+  groupInfoModalPositionType?: ModalPositionType;
 };
 
 export const GROUPINFO_STEPS = {
@@ -319,98 +328,25 @@ export type GROUP_INFO_TYPE =
 
 const GroupInformation = ({
   theme,
-  setModal,
   groupInfo,
-  setGroupInfo,
   handleNextInformation,
+  handleAddRemove,
+  setShowAddMoreWalletModal,
+  selectedMemberAddress,
+  setSelectedMemberAddress,
 }: GroupSectionProps) => {
   const { account } = useChatData();
-  const [showAddMoreWalletModal, setShowAddMoreWalletModal] =
-    useState<boolean>(false);
+
   const [showPendingRequests, setShowPendingRequests] =
     useState<boolean>(false);
-  const [memberList, setMemberList] = useState<any>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [checkedValue, setchecked] = useState<boolean>(false);
-  const [selectedMemberAddress, setSelectedMemberAddress] = useState<
-    string | null
-  >(null);
-  const { updateGroup } = useUpdateGroup();
+
+  const [copyText, setCopyText] = useState<string>('');
+
   const isMobile = useMediaQuery(device.mobileL);
 
-  const handleClose = () => onClose();
   const dropdownRef = useRef<any>(null);
   useClickAway(dropdownRef, () => setSelectedMemberAddress(null));
-  const groupInfoToast = useToast();
 
-  const groupCreator = groupInfo?.groupCreator;
-  const membersExceptGroupCreator = groupInfo?.members?.filter(
-    (x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase()
-  );
-
-  const groupMembers = [
-    ...membersExceptGroupCreator,
-    ...groupInfo.pendingMembers,
-  ];
-
-  type UpdateGroupType = {
-    adminList: Array<string>;
-    memberList: Array<string>;
-  };
-
-  const handleUpdateGroup = async (options: UpdateGroupType) => {
-    const { adminList, memberList } = options || {};
-    const updateResponse = await updateGroup({
-      groupInfo,
-      memberList,
-      adminList,
-    });
-    return { updateResponse };
-  };
-
-  const handleAddRemove = async (
-    options: UpdateGroupType & { updateKey: UpdateKeys }
-  ) => {
-    const { adminList, memberList, updateKey } = options || {};
-
-    try {
-      setIsLoading(true);
-      const { updateResponse } = await handleUpdateGroup({
-        adminList,
-        memberList,
-      });
-
-      if (typeof updateResponse !== 'string') {
-        setGroupInfo(updateResponse);
-
-        groupInfoToast.showMessageToast({
-          toastTitle: 'Success',
-          toastMessage: SUCCESS_MESSAGE[updateKey],
-          toastType: 'SUCCESS',
-          getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
-        });
-      } else {
-        groupInfoToast.showMessageToast({
-          toastTitle: 'Error',
-          toastMessage: updateResponse,
-          toastType: 'ERROR',
-          getToastIcon: (size) => <MdError size={size} color="red" />,
-        });
-      }
-    } catch (error) {
-      console.error('Error', error);
-      groupInfoToast.showMessageToast({
-        toastTitle: 'Error',
-        toastMessage: 'Please, try again',
-        toastType: 'ERROR',
-        getToastIcon: (size) => <MdError size={size} color="red" />,
-      });
-    } finally {
-      if (updateKey === UPDATE_KEYS.ADD_MEMBER) handleClose();
-      setIsLoading(false);
-      setSelectedMemberAddress(null);
-    }
-  };
   const removeMember = async () => {
     const updatedMemberList = getUpdatedMemberList(
       groupInfo,
@@ -428,27 +364,6 @@ const GroupInformation = ({
     });
   };
 
-  const addMembers = async () => {
-    //Already Present Members and PendingMembers
-    const groupMemberList = convertToWalletAddressList([
-      ...groupInfo.members,
-      ...groupInfo.pendingMembers,
-    ]);
-
-    //Newly Added Members and alreadyPresent Members in the groupchat
-    const newMembersToAdd = memberList.map((member: any) => member.wallets);
-    const members = [...groupMemberList, ...newMembersToAdd];
-
-    //Admins wallet address from both members and pendingMembers
-    const adminList = getAdminList?.(groupInfo);
-
-    await handleAddRemove({
-      memberList: members,
-      adminList,
-      updateKey: UPDATE_KEYS.ADD_MEMBER,
-    });
-  };
-
   const updateGroupAdmin = async (updateKey: UpdateKeys) => {
     const groupMemberList = convertToWalletAddressList([
       ...groupInfo.members,
@@ -493,36 +408,69 @@ const GroupInformation = ({
     textColor: '#ED5858',
   };
 
-  //remove all testing things
-
-  const a1: DropdownValueType = {
-    id: 'dismiss_admin',
-    title: 'Dismiss as admin',
-    function: () => updateGroupAdmin(UPDATE_KEYS.REMOVE_ADMIN),
-  };
-  const a2: DropdownValueType = {
-    id: 'add_admin',
-    title: 'Make group admin',
-    function: () => updateGroupAdmin(UPDATE_KEYS.ADD_ADMIN),
-  };
-
-  const handlePrevious = () => {
-    setShowAddMoreWalletModal(false);
-  };
-
-  const onClose = (): void => {
-    setModal(false);
-  };
-
   return (
-    <Section width={isMobile ? '100%' : '410px'} flexDirection="column">
+    <ScrollSection
+      margin="auto"
+      width="100%"
+      flexDirection="column"
+      gap="16px"
+      maxHeight={isMobile ? '59vh' : '61vh'}
+      height={isMobile ? '59vh' : '61vh'}
+      overflow="hidden auto"
+      justifyContent="start"
+      padding="0 2px 0 0"
+      theme={theme}
+    >
+      <GroupDescription>
+        <Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
+          Chat ID
+        </Span>
+        <Section
+          gap="5px"
+          alignSelf="start"
+          onClick={() => {
+            copyToClipboard(groupInfo?.chatId);
+            setCopyText('copied');
+          }}
+          onMouseEnter={() => {
+            setCopyText('click to copy');
+          }}
+          onMouseLeave={() => {
+            setCopyText('');
+          }}
+        >
+          <Span
+            textAlign="start"
+            fontSize="16px"
+            fontWeight="400"
+            color={theme.textColor?.modalSubHeadingText}
+          >
+            {shortenText(groupInfo?.chatId, 8, true)}
+          </Span>
+          {!!copyText && (
+            <Span
+              cursor="pointer"
+              position="relative"
+              padding="2px 10px"
+              color={theme.textColor?.modalSubHeadingText}
+              fontSize="14px"
+              fontWeight="400"
+              background={theme.backgroundColor?.modalHoverBackground}
+              borderRadius="16px"
+            >
+              {copyText}
+            </Span>
+          )}
+        </Section>
+      </GroupDescription>
       <GroupDescription>
         <Span fontSize="18px" color={theme.textColor?.modalHeadingText}>
           Group Description
         </Span>
         <Span
           textAlign="start"
-          fontSize="18px"
+          fontSize="16px"
+          fontWeight="400"
           color={theme.textColor?.modalSubHeadingText}
         >
           {groupInfo?.groupDescription}
@@ -530,7 +478,15 @@ const GroupInformation = ({
       </GroupDescription>
       <GroupTypeBadge
         theme={theme}
-        icon={groupInfo?.isPublic ? LockIcon : LockSlashIcon}
+        icon={
+          <Image
+            cursor="default"
+            src={groupInfo?.isPublic ? LockIcon : LockSlashIcon}
+            height="24px"
+            maxHeight="24px"
+            width={'auto'}
+          />
+        }
         header={groupInfo?.isPublic ? 'Open' : 'Encrypted'}
         subheader={
           groupInfo?.isPublic
@@ -538,17 +494,17 @@ const GroupInformation = ({
             : 'Chats are end-to-end encrypted'
         }
       />
-      {/* {(groupInfo.rules?.chat?.conditions ||
+      {(groupInfo.rules?.chat?.conditions ||
         groupInfo.rules?.entry?.conditions) && (
         <GroupTypeBadge
           cursor="pointer"
           handleNextInformation={handleNextInformation}
           theme={theme}
-          icon={TokenGatedIcon}
+          icon={<TokenGatedSvg/>}
           header={'Gated group'}
           subheader={'Conditions must be true to join'}
         />
-      )} */}
+      )}
 
       {isAccountOwnerAdmin(groupInfo, account!) &&
         groupInfo?.members &&
@@ -588,7 +544,12 @@ const GroupInformation = ({
         )}
       </Section>
 
-      <Section margin="15px 10px" flexDirection="column" flex="1" zIndex="2">
+      <ProfileSection
+        // margin="15px 10px"
+        flexDirection="column"
+        zIndex="2"
+        justifyContent="start"
+      >
         {groupInfo?.members &&
           groupInfo?.members?.length > 0 &&
           groupInfo?.members.map((item, index) => (
@@ -607,20 +568,8 @@ const GroupInformation = ({
               dropdownRef={dropdownRef}
             />
           ))}
-      </Section>
-      {showAddMoreWalletModal && (
-        <AddWalletContent
-          onSubmit={addMembers}
-          handlePrevious={handlePrevious}
-          onClose={onClose}
-          memberList={memberList}
-          handleMemberList={setMemberList}
-          groupMembers={groupMembers}
-          isLoading={isLoading}
-          modalHeader={'Add More Wallets'}
-        />
-      )}
-    </Section>
+      </ProfileSection>
+    </ScrollSection>
   );
 };
 
@@ -629,14 +578,36 @@ export const GroupInfoModal = ({
   setModal,
   groupInfo,
   setGroupInfo,
+  groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }: GroupInfoModalProps) => {
   const [activeComponent, setActiveComponent] = useState<GROUP_INFO_TYPE>(
     GROUPINFO_STEPS.GROUP_INFO
   );
+  const [memberList, setMemberList] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showAddMoreWalletModal, setShowAddMoreWalletModal] =
+    useState<boolean>(false);
+  useState<boolean>(false);
+  const [selectedMemberAddress, setSelectedMemberAddress] = useState<
+    string | null
+  >(null);
+
+  const isMobile = useMediaQuery(device.mobileL);
+  const groupInfoToast = useToast();
+  const { updateGroup } = useUpdateGroup();
+  const groupCreator = groupInfo?.groupCreator;
+  const membersExceptGroupCreator = groupInfo?.members?.filter(
+    (x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase()
+  );
+  const groupMembers = [
+    ...membersExceptGroupCreator,
+    ...groupInfo.pendingMembers,
+  ];
+  const dropdownRef = useRef<any>(null);
+
   const handleNextInfo = () => {
-    console.log('criteria');
     setActiveComponent((activeComponent + 1) as GROUP_INFO_TYPE);
-    console.log(activeComponent);
   };
 
   const handlePreviousInfo = () => {
@@ -653,6 +624,10 @@ export const GroupInfoModal = ({
             setModal={setModal}
             groupInfo={groupInfo}
             setGroupInfo={setGroupInfo}
+            handleAddRemove={handleAddRemove}
+            setShowAddMoreWalletModal={setShowAddMoreWalletModal}
+            selectedMemberAddress={selectedMemberAddress}
+            setSelectedMemberAddress={setSelectedMemberAddress}
           />
         );
       case GROUPINFO_STEPS.CRITERIA:
@@ -666,34 +641,19 @@ export const GroupInfoModal = ({
             setModal={setModal}
             groupInfo={groupInfo}
             setGroupInfo={setGroupInfo}
+            handleAddRemove={handleAddRemove}
+            setShowAddMoreWalletModal={setShowAddMoreWalletModal}
+            selectedMemberAddress={selectedMemberAddress}
+            setSelectedMemberAddress={setSelectedMemberAddress}
           />
         );
     }
   };
-  const [showAddMoreWalletModal, setShowAddMoreWalletModal] =
-    useState<boolean>(false);
-  useState<boolean>(false);
-  const [memberList, setMemberList] = useState<any>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [selectedMemberAddress, setSelectedMemberAddress] = useState<
-    string | null
-  >(null);
-  const { updateGroup } = useUpdateGroup();
-  const isMobile = useMediaQuery(device.mobileL);
 
-  const handleClose = () => onClose();
-  const dropdownRef = useRef<any>(null);
   useClickAway(dropdownRef, () => setSelectedMemberAddress(null));
-  const groupInfoToast = useToast();
 
-  const groupCreator = groupInfo?.groupCreator;
-  const membersExceptGroupCreator = groupInfo?.members?.filter(
-    (x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase()
-  );
-
-  type UpdateGroupType = {
-    adminList: Array<string>;
-    memberList: Array<string>;
+  const onClose = (): void => {
+    setModal(false);
   };
 
   const handleUpdateGroup = async (options: UpdateGroupType) => {
@@ -706,6 +666,7 @@ export const GroupInfoModal = ({
     return { updateResponse };
   };
 
+  const handleClose = () => onClose();
   const handleAddRemove = async (
     options: UpdateGroupType & { updateKey: UpdateKeys }
   ) => {
@@ -749,22 +710,6 @@ export const GroupInfoModal = ({
       setSelectedMemberAddress(null);
     }
   };
-  const removeMember = async () => {
-    const updatedMemberList = getUpdatedMemberList(
-      groupInfo,
-      selectedMemberAddress!
-    );
-    const adminList = getUpdatedAdminList(
-      groupInfo,
-      selectedMemberAddress,
-      true
-    );
-    await handleAddRemove({
-      memberList: updatedMemberList,
-      adminList,
-      updateKey: UPDATE_KEYS.REMOVE_MEMBER,
-    });
-  };
 
   const addMembers = async () => {
     //Already Present Members and PendingMembers
@@ -786,35 +731,23 @@ export const GroupInfoModal = ({
       updateKey: UPDATE_KEYS.ADD_MEMBER,
     });
   };
-
-  const updateGroupAdmin = async (updateKey: UpdateKeys) => {
-    const groupMemberList = convertToWalletAddressList([
-      ...groupInfo.members,
-      ...groupInfo.pendingMembers,
-    ]);
-    const newAdminList = getUpdatedAdminList(
-      groupInfo,
-      selectedMemberAddress,
-      !(updateKey === UPDATE_KEYS.ADD_ADMIN)
-    );
-    await handleAddRemove({
-      memberList: groupMemberList,
-      adminList: newAdminList,
-      updateKey,
-    });
-  };
-
-  const onClose = (): void => {
-    setModal(false);
+  const handlePrevious = () => {
+    setShowAddMoreWalletModal(false);
   };
 
   if (groupInfo) {
     return (
-      <Modal clickawayClose={onClose}>
+      <Modal
+        clickawayClose={onClose}
+        modalBackground={groupInfoModalBackground}
+        modalPositionType={groupInfoModalPositionType}
+      >
         {!showAddMoreWalletModal && (
           <Section
+            margin="auto"
             width={isMobile ? '100%' : '410px'}
             flexDirection="column"
+            gap="16px"
             padding={isMobile ? '0px auto' : '0px 10px'}
           >
             <ModalHeader
@@ -835,11 +768,16 @@ export const GroupInfoModal = ({
               />
 
               <Section flexDirection="column" alignItems="flex-start" gap="5px">
-                <Span fontSize="20px" color={theme.textColor?.modalHeadingText}>
+                <Span
+                  fontSize="20px"
+                  fontWeight="500"
+                  color={theme.textColor?.modalHeadingText}
+                >
                   {groupInfo?.groupName}
                 </Span>
                 <Span
                   fontSize="16px"
+                  fontWeight="500"
                   color={theme.textColor?.modalSubHeadingText}
                 >
                   {groupInfo?.members?.length} Members
@@ -849,6 +787,18 @@ export const GroupInfoModal = ({
             {renderComponent()}
           </Section>
         )}
+        {showAddMoreWalletModal && (
+          <AddWalletContent
+            onSubmit={addMembers}
+            handlePrevious={handlePrevious}
+            onClose={onClose}
+            memberList={memberList}
+            handleMemberList={setMemberList}
+            groupMembers={groupMembers}
+            isLoading={isLoading}
+            modalHeader={'Add More Wallets'}
+          />
+        )}
       </Modal>
     );
   } else {
@@ -858,7 +808,6 @@ export const GroupInfoModal = ({
 
 //styles
 const GroupHeader = styled.div`
-  margin-top: 34px;
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -866,7 +815,6 @@ const GroupHeader = styled.div`
 `;
 
 const GroupDescription = styled.div`
-  margin-top: 34px;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -874,22 +822,23 @@ const GroupDescription = styled.div`
   gap: 5px;
 `;
 
-const PublicEncrypted = styled.div`
-  margin-top: 20px;
+const PublicEncrypted = styled(Section)<{ alert?: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
-  gap: 19px;
+  gap: 12px;
   align-items: center;
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) =>
+    props?.alert
+      ? '1px solid #E93636'
+      : props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
-  padding: 16px;
+  padding: 12px 16px;
   box-sizing: border-box;
   background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
 `;
 
 const AddWalletContainer = styled.div`
-  margin-top: 20px;
   border: ${(props) => props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
   width: 100%;
@@ -919,7 +868,6 @@ const GroupPendingMembers = styled.div`
 
 const PendingRequestWrapper = styled.div`
   width: 100%;
-  margin-top: 20px;
   border: ${(props) => props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
   padding: 0px 0px;
@@ -966,4 +914,21 @@ const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
   }
 `;
 
+const ProfileSection = styled(Section)`
+  height: fit-content;
+`;
+const ScrollSection = styled(Section)<{ theme: IChatTheme }>`
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.scrollbarColor};
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-button {
+    height: 40px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+`;
+
 //auto update members when an user accepts not done
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/MemberProfileCard.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/MemberProfileCard.tsx
index 80b6bfa9f..a36d0848a 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/MemberProfileCard.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/MemberProfileCard.tsx
@@ -115,7 +115,8 @@ export const MemberProfileCard = ({
 const ProfileCardItem = styled(Section)<{ id: any; key: any; background: any }>`
   justify-content: space-between;
   padding: 8px 8px;
-  border-radius: 16px;
+  // border-radius: 16px;
+  border-bottom: ${(props) => props.theme.border.modalInnerComponents};
   position: relative;
   box-sizing: border-box;
   width: 100%;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
index 1b388c4ed..e7a672dbb 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
@@ -336,18 +336,18 @@ const TwitterCard = ({
   );
 };
 
-export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
+export const ChatViewBubble = ({ decryptedMessagePayload }: { decryptedMessagePayload: IMessagePayload }) => {
   const { account } = useChatData();
   const position =
-    pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account?.toLowerCase()
+    pCAIP10ToWallet(decryptedMessagePayload.fromDID).toLowerCase() !== account?.toLowerCase()
       ? 0
       : 1;
   const { tweetId, messageType }: TwitterFeedReturnType = checkTwitterUrl({
-    message: chat?.messageContent,
+    message: decryptedMessagePayload?.messageContent,
   });
   const [isGroup, setIsGroup] = useState<boolean>(false);
   useEffect(() => {
-    if (chat.toDID.split(':')[0] === 'eip155') {
+    if (decryptedMessagePayload.toDID.split(':')[0] === 'eip155') {
       if (isGroup) {
         setIsGroup(false);
       }
@@ -356,32 +356,32 @@ export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
         setIsGroup(true);
       }
     }
-  }, [chat.toDID, isGroup]);
+  }, [decryptedMessagePayload.toDID, isGroup]);
 
   if (messageType === 'TwitterFeedLink') {
-    chat.messageType = 'TwitterFeedLink';
+    decryptedMessagePayload.messageType = 'TwitterFeedLink';
   }
 
-  if (chat.messageType === 'GIF') {
-    return <GIFCard isGroup={isGroup} chat={chat} position={position} />;
+  if (decryptedMessagePayload.messageType === 'GIF') {
+    return <GIFCard isGroup={isGroup} chat={decryptedMessagePayload} position={position} />;
   }
-  if (chat.messageType === 'Image') {
-    return <ImageCard isGroup={isGroup} chat={chat} position={position} />;
+  if (decryptedMessagePayload.messageType === 'Image') {
+    return <ImageCard isGroup={isGroup} chat={decryptedMessagePayload} position={position} />;
   }
-  if (chat.messageType === 'File') {
-    return <FileCard isGroup={isGroup} chat={chat} position={position} />;
+  if (decryptedMessagePayload.messageType === 'File') {
+    return <FileCard isGroup={isGroup} chat={decryptedMessagePayload} position={position} />;
   }
-  if (chat.messageType === 'TwitterFeedLink') {
+  if (decryptedMessagePayload.messageType === 'TwitterFeedLink') {
     return (
       <TwitterCard
         tweetId={tweetId}
         isGroup={isGroup}
-        chat={chat}
+        chat={decryptedMessagePayload}
         position={position}
       />
     );
   }
-  return <MessageCard isGroup={isGroup} chat={chat} position={position} />;
+  return <MessageCard isGroup={isGroup} chat={decryptedMessagePayload} position={position} />;
 };
 
 const FileDownloadIcon = styled.i`
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
index 9cd16d4da..09cf1366f 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { IChatTheme, IChatViewComponentProps } from '../exportedTypes';
+import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 
 import { Section, Span } from '../../reusables';
 import { ChatViewList } from '../ChatViewList';
@@ -35,7 +35,11 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     gif = true,
     isConnected = true,
     autoConnect = false,
-    onGetTokenClick,
+    onVerificationFail,
+    groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    groupInfoModalPositionType =  MODAL_POSITION_TYPE.GLOBAL,
+    verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
   } = options || {};
 
   const { env, signer, account, pgpPrivateKey } = useChatData();
@@ -58,7 +62,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       padding="13px"
       theme={theme}
     >
-      {chatProfile && <ChatProfile chatId={chatId} style="Info" />}
+      {chatProfile && <ChatProfile chatId={chatId} style="Info" groupInfoModalBackground={groupInfoModalBackground} groupInfoModalPositionType={groupInfoModalPositionType}/>}
       <Section
         flex="1 1 auto"
         overflow="hidden"
@@ -85,14 +89,16 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
         </Section>
       )}
       {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
-        <Section flex="0 1 auto">
+        <Section flex="0 1 auto" position='static'>
           <MessageInput
-            onGetTokenClick={onGetTokenClick}
+            onVerificationFail={onVerificationFail}
             chatId={chatId}
             file={file}
             emoji={emoji}
             gif={gif}
             isConnected={isConnected}
+            verificationFailModalBackground={verificationFailModalBackground}
+            verificationFailModalPosition={verificationFailModalPosition}
             autoConnect = {autoConnect}
           />
         </Section>
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts b/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts
index 25a649344..7d3f2796f 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts
+++ b/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts
@@ -1 +1,2 @@
-export {ChatViewComponent} from './ChatViewComponent';
\ No newline at end of file
+export {ChatViewComponent} from './ChatViewComponent';
+export {ChatViewComponent as ChatView} from './ChatViewComponent';
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx
index 6df0a560b..140d7abc5 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx
@@ -99,9 +99,9 @@ const Button = styled.button<IThemeProps>`
   border: none;
   cursor: pointer;
   border-radius: 8px;
-  background: ${(props) => props.theme.backgroundColor.buttonBackground};
+  background: ${(props) => props.theme.backgroundColor!.buttonBackground};
   border: none;
-  color:  ${(props) => props.theme.textColor.buttonText};
+  color:  ${(props) => props.theme.textColor!.buttonText};
   width: 100%;
   font-size: 16px;
   font-weight: 600;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
index b63b1ee00..451df1678 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -380,7 +380,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
                             justifyContent={position ? 'end' : 'start'}
                             margin="7px"
                           >
-                            <ChatViewBubble chat={chat} key={index} />
+                            <ChatViewBubble decryptedMessagePayload={chat} key={index} />
                           </Section>
                         </>
                       );
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
index 74e307637..89a4cd2e2 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/MessageEncryption.tsx
@@ -42,7 +42,7 @@ const EncryptionMessageContent = {
         margin="10px 10px 0px"
         width={isMobile ? '80%' : 'fit-content'}
       >
-        <EncryptionMessageDiv textAlign="center">
+        <EncryptionMessageDiv textAlign="center" >
           {EncryptionMessageContent[id].IconComponent}
   
           <Span
@@ -61,6 +61,7 @@ const EncryptionMessageContent = {
 
   //styles
   const EncryptionMessageDiv = styled(Div)`
+  display:flex;
   text-align: center;
   svg {
     vertical-align: middle;
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
index b0090d41a..45aa9c3ba 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
@@ -1,13 +1,11 @@
 import { useContext, useEffect, useState } from 'react';
 
 import styled from 'styled-components';
-import { Signer, ethers } from 'ethers';
+import { ethers } from 'ethers';
 
 import { useAccount, useChatData } from '../../../hooks';
 import { ThemeContext } from '../theme/ThemeProvider';
-import useGetChatProfile from '../../../hooks/useGetChatProfile';
-import useCreateChatProfile from '../../../hooks/useCreateChatProfile';
-import useDecryptPGPKey from '../../../hooks/useDecryptPGPKey';
+
 
 import { getAddressFromSigner } from '../../../helpers';
 import { IChatTheme } from '../theme';
@@ -20,26 +18,17 @@ import { device } from '../../../config';
 interface IThemeProps {
   theme?: IChatTheme;
 }
-interface IConnectButtonProps {
-  autoConnect?: boolean;
-}
+
 
 export const ConnectButtonSub = ({autoConnect = false})  => {
   const {wallet, connecting , connect, disconnect} = useAccount();
 
   const {
     signer,
-    pgpPrivateKey,
-    account,
-    env,
-    setPgpPrivateKey,
     setAccount,
     setSigner,
   } = useChatData();
   const theme = useContext(ThemeContext);
-  const {fetchChatProfile} = useGetChatProfile();
-  const {creteChatProfile} = useCreateChatProfile();
-  const {decryptPGPKey} = useDecryptPGPKey();
 
 
   const setUserData = () => {
@@ -54,7 +43,6 @@ export const ConnectButtonSub = ({autoConnect = false})  => {
     } else if (!wallet) {
       setAccount('')
       setSigner(undefined)
-      setPgpPrivateKey(null)
     }
   }
   useEffect(() => {
@@ -63,37 +51,6 @@ export const ConnectButtonSub = ({autoConnect = false})  => {
     setUserData()
   }, [wallet])
 
-  useEffect(() => {
-    (async () => {
-      if (account && signer) {
-        if (!pgpPrivateKey) await handleUserCreation();
-      }
-    })();
-  }, [account, signer]);
-
-
-  const handleUserCreation = async () => {
-    if (!account && !env) return;
-    try {
-      let user  = await fetchChatProfile({ profileId: account! ,env});
-      if (!user) {
-        if (!signer) return;
-        user = await creteChatProfile({ signer: signer ,env});
-      }
-      if (user?.encryptedPrivateKey && !pgpPrivateKey) {
-        const decryptPgpKey = await decryptPGPKey({
-          encryptedPrivateKey: user.encryptedPrivateKey,
-          account: account!,
-          signer: signer,
-          env: env,
-        });
-        if(decryptPgpKey)
-        setPgpPrivateKey(decryptPgpKey);
-      }
-    } catch (e: any) {
-      console.log(e);
-    }
-  };
   return !signer ? (
     <ConnectButtonDiv theme={theme}>
       <button onClick={() => (wallet ? disconnect(wallet) : connect())}>{connecting ? 'connecting' : wallet ? 'disconnect' : 'Connect Wallet'}</button>
@@ -108,8 +65,8 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
   width: fit-content;
  
   button{
-    background: ${(props) => `${props.theme.backgroundColor.buttonBackground}!important`};
-    color: ${(props) => `${props.theme.textColor.buttonText}!important`};
+    background: ${(props) => `${props.theme.backgroundColor?.buttonBackground}!important`};
+    color: ${(props) => `${props.theme.textColor?.buttonText}!important`};
     text-align:center;
     font-size: 1em;
     cursor:pointer;
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
index b6b603fdf..19d4f96e8 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
@@ -7,10 +7,12 @@ import { Web3OnboardProvider } from '@web3-onboard/react';
 import injectedModule, { ProviderLabel } from '@web3-onboard/injected-wallets';
 import walletConnectModule from '@web3-onboard/walletconnect'
 import init from '@web3-onboard/core';
+import PushIcon from "../../../icons/Bell.svg"
 
 const APP_META_DATA = {
   name: 'Push Protocol',
-  icon: 'https://files.slack.com/files-pri/T011WQBLH39-F05QWQA0MSR/pushlogoblocknative.png',
+  logo: PushIcon,
+  icon: PushIcon,
   description: 'Example showcasing how to connect a wallet.',
 
   recommendedInjectedWallets: [
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
index 8f9bbd0c2..a1b846f3e 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx
@@ -1,15 +1,19 @@
 import { useContext, useEffect, useState } from 'react';
 
+import styled from 'styled-components';
+import { MdError } from 'react-icons/md';
+
 import {
   Button,
   DropDownInput,
   DropdownValueType,
+  InfoContainer,
   ModalHeader,
   TextInput,
 } from '../reusables';
-import { Section, } from '../../reusables';
+import { Section, Span, Spinner } from '../../reusables';
 import useMediaQuery from '../../../hooks/useMediaQuery';
-import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal';
+import {  ModalHeaderProps } from './CreateGroupModal';
 import { useChatData } from '../../../hooks';
 import { QuantityInput } from '../reusables/QuantityInput';
 import { ThemeContext } from '../theme/ThemeProvider';
@@ -18,6 +22,7 @@ import OptionButtons from '../reusables/OptionButtons';
 
 import EthereumSvg from '../../../icons/ethereum.svg';
 import PolygonSvg from '../../../icons/polygon.svg';
+import ArbitrumSvg from '../../../icons/arbitrum.svg';
 import BSCSvg from '../../../icons/bsc.svg';
 import OptimismSvg from '../../../icons/optimisim.svg';
 import { BLOCKCHAIN_NETWORK, device } from '../../../config';
@@ -32,21 +37,39 @@ import {
   TypeKeys,
   ReadonlyInputType,
 } from '../types';
-import { Data, GuildData, PushData, Rule } from '../types/tokenGatedGroupCreationType';
-
-
-
-const AddCriteria = ({
+import useToast from '../reusables/NewToast';
+import {
+  CriteriaValidationErrorType,
+  GuildData,
+  PushData,
+  Rule,
+} from '../types/tokenGatedGroupCreationType';
+import {
+  checkIfCustomEndpoint,
+  checkIfGuild,
+  checkIfPushInvite,
+  checkIfTokenNFT,
+  fetchContractInfo,
+  getCategoryDropdownValues,
+  getCriteriaData,
+  getSubCategoryDropdownValues,
+  validationCriteria,
+} from '../helpers';
+import { IChatTheme } from '../exportedTypes';
+
+const AddCriteria = ({ 
   handlePrevious,
-  handleNext,
   onClose,
-  criteriaStateManager
+  criteriaStateManager,
 }: ModalHeaderProps) => {
   const [selectedTypeValue, setSelectedTypeValue] = useState<number>(0);
+  const [validationErrors, setValidationErrors] =
+    useState<CriteriaValidationErrorType>({});
   const [selectedCategoryValue, setSelectedCategoryValue] = useState<number>(0);
   const [selectedSubCategoryValue, setSelectedSubCategoryValue] =
     useState<number>(0);
-    const [guildComparison, setGuildComparison] = useState('')
+  const [validationLoading, setValidationLoading] = useState<boolean>(false);
+  const [guildComparison, setGuildComparison] = useState('');
   const [selectedChainValue, setSelectedChainValue] = useState<number>(0);
   const [contract, setContract] = useState<string>('');
   const [inviteCheckboxes, setInviteCheckboxes] = useState<{
@@ -56,6 +79,8 @@ const AddCriteria = ({
   const [url, setUrl] = useState<string>('');
   const [guildId, setGuildId] = useState<string>('');
   const [specificRoleId, setSpecificRoleId] = useState<string>('');
+  const [unit, setUnit] = useState('TOKEN');
+  const [decimals, setDecimals] = useState(18);
 
   const [quantity, setQuantity] = useState<{ value: number; range: number }>({
     value: 0,
@@ -63,6 +88,7 @@ const AddCriteria = ({
   });
   const { env } = useChatData();
   const theme = useContext(ThemeContext);
+  const groupInfoToast = useToast();
 
   const isMobile = useMediaQuery(device.mobileL);
 
@@ -151,23 +177,15 @@ const AddCriteria = ({
     },
   };
 
-  const tokenCategoryValues = [
-    {
-      id: 0,
+  const dropdownSubCategoryValues: DropdownSubCategoryValuesType = {
+    ERC20: {
       value: SUBCATEGORY.HOLDER,
       title: 'Holder',
-      function: () => setSelectedSubCategoryValue(0),
     },
-    {
-      id: 1,
-      value: SUBCATEGORY.OWENER,
-      title: 'Owner',
-      function: () => setSelectedSubCategoryValue(1),
+    ERC721: {
+      value: SUBCATEGORY.HOLDER,
+      title: 'Holder',
     },
-  ];
-  const dropdownSubCategoryValues: DropdownSubCategoryValuesType = {
-    ERC20: tokenCategoryValues,
-    ERC721: tokenCategoryValues,
     INVITE: {
       value: SUBCATEGORY.DEFAULT,
       title: 'Default',
@@ -215,214 +233,201 @@ const AddCriteria = ({
       icon: OptimismSvg,
       function: () => setSelectedChainValue(3),
     },
+    {
+      id: 4,
+      value: BLOCKCHAIN_NETWORK[env].ARBITRUM,
+      title: 'Arbitrim',
+      icon: ArbitrumSvg,
+      function: () => setSelectedChainValue(4),
+    },
   ];
 
-  const getCategoryDropdownValues = () => {
-    return dropdownCategoryValues[
-      dropdownTypeValues[selectedTypeValue].value as TypeKeys
-    ];
-  };
-
-  const getSelectedCategoryValue = () => {
-    const category = getCategoryDropdownValues();
-    if (Array.isArray(category))
-      return (category as DropdownValueType[])[selectedCategoryValue].value!;
-    else return category.value! as SubCategoryKeys;
-  };
-
-  const getSelectedSubCategoryValue = () => {
-    const subCategory = getSubCategoryDropdownValues();
-    if (Array.isArray(subCategory))
-      return (subCategory as DropdownValueType[])[selectedCategoryValue].value!;
-    else return subCategory.value! as SubCategoryKeys;
-  };
-
-  const checkIfTokenNFT = () => {
-    const category = getSelectedCategoryValue();
-    if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721)
-      return true;
-
-    return false;
-  };
-
-  const checkIfCustomEndpoint = () => {
-    const category = getSelectedCategoryValue();
-    if (category === CATEGORY.CustomEndpoint) return true;
-    return false;
-  };
-
-  const checkIfPushInvite = () => {
-    const accessType = dropdownTypeValues[selectedTypeValue].value;
-    if (accessType === TYPE.PUSH) {
-      const category = getSelectedCategoryValue();
-      if (category === CATEGORY.INVITE) return true;
-    }
-
-    return false;
-  };
-
-  const checkIfGuild = () => {
-    const accessType = dropdownTypeValues[selectedTypeValue].value;
-    if (accessType === TYPE.GUILD) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const getSubCategoryDropdownValues = () => {
-    const category = getCategoryDropdownValues();
-    if (Array.isArray(category))
-      return dropdownSubCategoryValues[
-        (category as DropdownValueType[])[selectedCategoryValue]
-          .value as SubCategoryKeys
-      ];
-    else return dropdownSubCategoryValues[category.value as SubCategoryKeys];
-  };
-
   const onQuantityChange = (e: any) => {
     setQuantity({ ...quantity, value: e.target.value });
   };
 
-  const verifyAndDoNext = ()=>{
-    const _type = dropdownTypeValues[selectedTypeValue].value as 'PUSH' | 'GUILD'
-    const category:string = _type === "PUSH" ? (dropdownCategoryValues[_type] as DropdownValueType[])[
-      selectedCategoryValue
-    ].value || CATEGORY.ERC20 : "ROLES"
- 
-    let subCategory = "DEFAULT"
-    if(_type === "PUSH"){ 
-      if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){
-        subCategory = tokenCategoryValues[selectedSubCategoryValue].value
-      }else if(category === CATEGORY.CustomEndpoint){
-        subCategory = "GET"
-      } 
-    }
-    
-    const getData = (type:string, category:string):Data=>{
-      if(type === "PUSH"){
-        if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){
-          const selectedChain = dropdownChainsValues[selectedChainValue].value || 'eip155:1';
-          return {
-            contract: `${selectedChain}:${contract}`,
-            amount: quantity.value,
-            comparison:dropdownQuantityRangeValues[quantity.range].value,
-            decimals: 18,
-          }
-        }else if(category === CATEGORY.INVITE){
-          const _inviteRoles = []
-          if(inviteCheckboxes.admin){
-            _inviteRoles.push("ADMIN")
-          }
-          if(inviteCheckboxes.owner){
-            _inviteRoles.push("OWNER")
-          }
-
-          return{
-            inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN']
-          }
-        }else{
-          // CATEGORY.CustomEndpoint
-          // TODO: validate url
-          return{
-            url:url
-          }
-        }
-      }else{
-        // GUILD type
-        return {
-          id:guildId,
-          comparison:guildComparison,
-          role:guildComparison === 'specific' ? specificRoleId : "*",
-        }
+  const verifyAndDoNext = async () => {
+    setValidationLoading(true);
+    const _type = dropdownTypeValues[selectedTypeValue].value as
+      | 'PUSH'
+      | 'GUILD';
+    const category: string =
+      _type === 'PUSH'
+        ? (dropdownCategoryValues[_type] as DropdownValueType[])[
+            selectedCategoryValue
+          ].value || CATEGORY.ERC20
+        : 'ROLES';
+
+    let subCategory = 'DEFAULT';
+    if (_type === 'PUSH') {
+      if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) {
+        subCategory = SUBCATEGORY.HOLDER;
+      } else if (category === CATEGORY.CustomEndpoint) {
+        subCategory = 'GET';
       }
     }
 
-    const rule:Rule = {
+    const rule: Rule = {
       type: _type,
       category: category,
       subcategory: subCategory,
-      data: getData(_type, category),
+      data: getCriteriaData({
+        type: _type,
+        category,
+        contract,
+        quantity,
+        decimals,
+        unit,
+        url,
+        inviteCheckboxes,
+        guildComparison,
+        specificRoleId,
+        guildId,
+        dropdownQuantityRangeValues,
+        selectedChainValue,
+        dropdownChainsValues,
+      }),
+    };
+
+    //guild validation added
+    const errors = await validationCriteria(rule);
+    setValidationLoading(false);
+    if (Object.keys(errors).length) {
+      setValidationErrors(errors);
+    } else {
+      const isSuccess = criteriaState.addNewRule(rule);
+      if (!isSuccess) {
+        showError('Selected Criteria was already added');
+        return;
+      }
+      if (handlePrevious) {
+        handlePrevious();
+      }
     }
+  };
 
-    criteriaState.addNewRule(rule)
+  const criteriaState = criteriaStateManager.getSelectedCriteria();
 
-    if(handlePrevious){
-      handlePrevious()
-    }
+  // Autofill the form for the update
+  useEffect(() => {
+    if (criteriaState.isUpdateCriteriaEnabled()) {
+      //Load the states
+      const oldValue =
+        criteriaState.selectedRules[criteriaState.updateCriteriaIdx];
+
+      if (oldValue.type === 'PUSH') {
+        // category
+        setSelectedCategoryValue(
+          (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex(
+            (obj) => obj.value === oldValue.category
+          )
+        );
 
-  }
+        const pushData = oldValue.data as PushData;
 
-  const criteriaState = criteriaStateManager.getSelectedCriteria()
+        // sub category
+        if (
+          oldValue.category === CATEGORY.ERC20 ||
+          oldValue.category === CATEGORY.ERC721
+        ) {
+          if (pushData.token) {
+            setUnit(pushData.token);
+          }
 
+          if (pushData.decimals) {
+            setDecimals(decimals);
+          }
 
-  // Autofill the form for the update
-  useEffect(()=>{
-   if(criteriaState.isUpdateCriteriaEnabled()){
-    //Load the states
-    const oldValue = criteriaState.selectedRules[criteriaState.updateCriteriaIdx] 
-    
-    if(oldValue.type === 'PUSH'){
-      
-      // category
-      setSelectedCategoryValue(
-        (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex(obj => obj.value === oldValue.category) 
-      )
-
-      const pushData = oldValue.data as PushData
-
-      // sub category
-      if(oldValue.category === CATEGORY.ERC20 || oldValue.category === CATEGORY.ERC721){
-        setSelectedSubCategoryValue(
-          tokenCategoryValues.findIndex(obj => obj.value === oldValue.subcategory)
-        )
-
-        const contractAndChain:string[] = (pushData.contract || "eip155:1:0x").split(':')
-        setSelectedChainValue(
-          dropdownChainsValues.findIndex(
-            obj => obj.value === contractAndChain[0]+":"+contractAndChain[1]
-          ) 
-        )
-        setContract(contractAndChain.length === 3 ? contractAndChain[2]: "") 
-        setQuantity({
-          value:pushData.amount || 0, 
-          range:dropdownQuantityRangeValues.findIndex(
-            obj => obj.value === pushData.comparison
-          )
-        })
-      }else if(oldValue.category === CATEGORY.INVITE){
-        setInviteCheckboxes({
-          admin:true,
-          owner:true, 
-        })
-      }else{
-        // invite
-        setUrl(pushData.url || "") 
+          // TODO: make helper function for this
+          const contractAndChain: string[] = (
+            pushData.contract || 'eip155:1:0x'
+          ).split(':');
+          setSelectedChainValue(
+            dropdownChainsValues.findIndex(
+              (obj) =>
+                obj.value === contractAndChain[0] + ':' + contractAndChain[1]
+            )
+          );
+          setContract(contractAndChain.length === 3 ? contractAndChain[2] : '');
+          setQuantity({
+            value: pushData.amount || 0,
+            range: dropdownQuantityRangeValues.findIndex(
+              (obj) => obj.value === pushData.comparison
+            ),
+          });
+        } else if (oldValue.category === CATEGORY.INVITE) {
+          setInviteCheckboxes({
+            admin: true,
+            owner: true,
+          });
+        } else {
+          // invite
+          setUrl(pushData.url || '');
+        }
+      } else {
+        // guild condition
+        setGuildId((oldValue.data as GuildData).id);
+        setSpecificRoleId((oldValue.data as GuildData).role);
+        setGuildComparison(
+          (oldValue.data as GuildData).comparison ||
+            GUILD_COMPARISON_OPTIONS[2].value
+        );
       }
-    }else{
-      // guild condition
-      setGuildId((oldValue.data as GuildData).id)
-      setSpecificRoleId((oldValue.data as GuildData).role)
-      setGuildComparison((oldValue.data as GuildData).comparison) 
+
+      setSelectedTypeValue(
+        dropdownTypeValues.findIndex((obj) => obj.value === oldValue.type)
+      );
     }
-    
-    setSelectedTypeValue(
-      dropdownTypeValues.findIndex(obj => obj.value === oldValue.type) 
-    )
-   } 
-  },[])
+  }, []);
+
+  useEffect(() => {
+    // Debouncing
+    // Fetch the contract info
+    const getData = setTimeout(async () => {
+      await fetchContractInfo({
+        setValidationErrors,
+        selectedCategoryValue,
+        selectedTypeValue,
+        dropdownCategoryValues,
+        dropdownTypeValues,
+        contract,
+        setUnit,
+        setDecimals,
+        selectedChainValue,
+        dropdownChainsValues,
+      });
+    }, 2000);
+    return () => clearTimeout(getData);
+  }, [contract, selectedCategoryValue, selectedChainValue]);
+
+  const showError = (errorMessage: string) => {
+    groupInfoToast.showMessageToast({
+      toastTitle: 'Error',
+      toastMessage: errorMessage,
+      toastType: 'ERROR',
+      getToastIcon: (size) => <MdError size={size} color="red" />,
+    });
+  };
 
   return (
-    <Section
+    <ScrollSection
+      theme={theme}
       flexDirection="column"
-      gap="25px"
+      gap="12px"
+      overflow="hidden scroll"
+      justifyContent="start"
+      padding='0 2px 0 10px'
       width={isMobile ? '300px' : '400px'}
     >
-      <Section margin="0 0 10px 0">
+      <Section margin="0 0 5px 0">
         <ModalHeader
           handleClose={onClose}
           handlePrevious={handlePrevious}
-          title={criteriaState.isUpdateCriteriaEnabled() ? "Update Criteria" : "Add Criteria"}
+          title={
+            criteriaState.isUpdateCriteriaEnabled()
+              ? 'Update Criteria'
+              : 'Add Criteria'
+          }
         />
       </Section>
       <DropDownInput
@@ -430,73 +435,164 @@ const AddCriteria = ({
         selectedValue={selectedTypeValue}
         dropdownValues={dropdownTypeValues}
       />
-      {Array.isArray(getCategoryDropdownValues()) ? (
-        <DropDownInput
-          labelName="Gating Category"
-          selectedValue={selectedCategoryValue}
-          dropdownValues={getCategoryDropdownValues() as DropdownValueType[]}
-        />
-      ) : (
-        <TextInput
-          labelName="Gating category"
-          inputValue={(getCategoryDropdownValues() as ReadonlyInputType)?.title}
-          disabled={true}
-          customStyle={{
-            background: theme.backgroundColor?.modalHoverBackground,
-          }}
-        />
-      )}
-
-      {Array.isArray(getSubCategoryDropdownValues()) ? (
-        <DropDownInput
-          labelName="Sub-Category"
-          selectedValue={selectedSubCategoryValue}
-          dropdownValues={getSubCategoryDropdownValues() as DropdownValueType[]}
-        />
-      ) : (
-        <TextInput
-          labelName="Sub-category"
-          inputValue={(getSubCategoryDropdownValues()  as ReadonlyInputType)?.title}
-          disabled={true}
-          customStyle={{
-            background: theme.backgroundColor?.modalHoverBackground,
-          }}
-        />
-      )}
+      <Section
+        zIndex="unset"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Section width="48%" zIndex='unset'>
+          {Array.isArray(
+            getCategoryDropdownValues({
+              dropdownCategoryValues,
+              dropdownTypeValues,
+              selectedTypeValue,
+            })
+          ) ? (
+            <DropDownInput
+              labelName="Gating Category"
+              selectedValue={selectedCategoryValue}
+              dropdownValues={
+                getCategoryDropdownValues({
+                  dropdownCategoryValues,
+                  dropdownTypeValues,
+                  selectedCategoryValue,
+
+                  selectedTypeValue,
+                }) as DropdownValueType[]
+              }
+            />
+          ) : (
+            <TextInput
+              labelName="Gating category"
+              inputValue={
+                (
+                  getCategoryDropdownValues({
+                    dropdownCategoryValues,
+                    dropdownTypeValues,
+                    selectedCategoryValue,
+                    selectedTypeValue,
+                  }) as ReadonlyInputType
+                )?.title
+              }
+              disabled={true}
+              customStyle={{
+                background: theme.backgroundColor?.modalHoverBackground,
+              }}
+            />
+          )}
+        </Section>
+        <Section width="48%">
+          {Array.isArray(
+            getSubCategoryDropdownValues({
+              dropdownCategoryValues,
+              dropdownTypeValues,
+              selectedCategoryValue,
+              dropdownSubCategoryValues,
+              selectedTypeValue,
+            })
+          ) ? (
+            <DropDownInput
+              labelName="Sub-Category"
+              selectedValue={selectedSubCategoryValue}
+              dropdownValues={
+                getSubCategoryDropdownValues({
+                  dropdownCategoryValues,
+                  dropdownTypeValues,
+                  selectedCategoryValue,
+                  dropdownSubCategoryValues,
+                  selectedTypeValue,
+                }) as DropdownValueType[]
+              }
+            />
+          ) : (
+            <TextInput
+              labelName="Sub-category"
+              inputValue={
+                (
+                  getSubCategoryDropdownValues({
+                    dropdownCategoryValues,
+                    dropdownTypeValues,
+                    selectedCategoryValue,
+                    dropdownSubCategoryValues,
+                    selectedTypeValue,
+                  }) as ReadonlyInputType
+                )?.title
+              }
+              disabled={true}
+              customStyle={{
+                background: theme.backgroundColor?.modalHoverBackground,
+              }}
+            />
+          )}
+        </Section>
+      </Section>
       {/* shift to minor components  leave for now*/}
-      {checkIfTokenNFT() && (
+      {checkIfTokenNFT({
+        dropdownCategoryValues,
+        dropdownTypeValues,
+        selectedCategoryValue,
+        selectedTypeValue,
+      }) && (
         <>
           <DropDownInput
             labelName="Blockchain"
             selectedValue={selectedChainValue}
             dropdownValues={dropdownChainsValues}
           />
-          <TextInput
-            labelName="Contract"
-            inputValue={contract}
-            onInputChange={(e: any) => setContract(e.target.value)}
-            placeholder="e.g. 0x123..."
-          />
-          <QuantityInput
-            dropDownValues={dropdownQuantityRangeValues}
-            labelName="Quantity"
-            inputValue={quantity}
-            onInputChange={onQuantityChange}
-            placeholder="e.g. 1.45678"
-            unit={'TOKEN'}
-          />
+          <Section gap="10px" flexDirection="column" alignItems="start">
+            <TextInput
+              labelName="Contract"
+              inputValue={contract}
+              onInputChange={(e: any) => setContract(e.target.value)}
+              placeholder="e.g. 0x123..."
+              error={!!validationErrors?.tokenError}
+            />
+            {!!validationErrors?.tokenError && (
+              <ErrorSpan>{validationErrors?.tokenError}</ErrorSpan>
+            )}
+          </Section>
+          <Section gap="10px" flexDirection="column" alignItems="start">
+            <QuantityInput
+              dropDownValues={dropdownQuantityRangeValues}
+              labelName="Quantity"
+              inputValue={quantity}
+              error={!!validationErrors?.tokenAmount}
+              onInputChange={onQuantityChange}
+              placeholder="e.g. 1.45678"
+              unit={unit}
+            />
+            {!!validationErrors?.tokenAmount && (
+              <ErrorSpan>{validationErrors?.tokenAmount}</ErrorSpan>
+            )}
+          </Section>
         </>
       )}
 
-      {checkIfCustomEndpoint() && (
-        <TextInput
-          labelName="URL"
-          inputValue={url}
-          onInputChange={(e: any) => setUrl(e.target.value)}
-          placeholder="e.g. abc.com"
-        />
+      {checkIfCustomEndpoint({
+        dropdownCategoryValues,
+        dropdownTypeValues,
+        selectedCategoryValue,
+        selectedTypeValue,
+      }) && (
+        <Section gap="10px" flexDirection="column" alignItems="start">
+          <TextInput
+            labelName="URL"
+            inputValue={url}
+            onInputChange={(e: any) => setUrl(e.target.value)}
+            placeholder="e.g. abc.com"
+            error={!!validationErrors?.url}
+          />
+          {!!validationErrors?.url && (
+            <ErrorSpan>{validationErrors?.url}</ErrorSpan>
+          )}
+        </Section>
       )}
-      {checkIfPushInvite() && (
+      {checkIfPushInvite({
+        dropdownCategoryValues,
+        dropdownTypeValues,
+        selectedCategoryValue,
+        selectedTypeValue,
+      }) && (
         <Section flexDirection="column" gap="10px">
           {Object.keys(INVITE_CHECKBOX_LABEL).map((key) => (
             <Checkbox
@@ -505,8 +601,8 @@ const AddCriteria = ({
               }
               onToggle={() =>
                 setInviteCheckboxes({
-                  admin:true,
-                  owner:true
+                  admin: true,
+                  owner: true,
                 })
               }
               checked={
@@ -517,41 +613,78 @@ const AddCriteria = ({
         </Section>
       )}
 
-      {checkIfGuild() && (
+      {checkIfGuild(dropdownTypeValues, selectedTypeValue) && (
         <>
-          <TextInput
-            labelName="ID"
-            inputValue={guildId}
-            onInputChange={(e: any) => setGuildId(e.target.value)}
-            placeholder="e.g. 4687"
-          />
-          <OptionButtons
-            options={GUILD_COMPARISON_OPTIONS}
-            totalWidth="410px"
-            selectedValue={guildComparison}
-            handleClick={(newEl:string)=>{
-              setGuildComparison(newEl)}}
-          />
-
-          {guildComparison === "specific" && 
+          <Section gap="10px" flexDirection="column" alignItems="start">
             <TextInput
-              labelName="Specific Role"
-              inputValue={specificRoleId}
-              onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
+              labelName="ID"
+              inputValue={guildId}
+              onInputChange={(e: any) => setGuildId(e.target.value)}
               placeholder="e.g. 4687"
+              error={!!validationErrors?.guildId}
             />
-          }
-
-          
+            {!!validationErrors?.guildId && (
+              <ErrorSpan>{validationErrors?.guildId}</ErrorSpan>
+            )}
+          </Section>
+          <Section gap="10px" flexDirection="column" alignItems="start">
+            <OptionButtons
+              options={GUILD_COMPARISON_OPTIONS}
+              totalWidth={isMobile?'400px':'410px'}
+              selectedValue={guildComparison}
+              error={!!validationErrors?.guildComparison}
+              handleClick={(newEl: string) => {
+                setGuildComparison(newEl);
+              }}
+            />
+            {!!validationErrors?.guildComparison && (
+              <ErrorSpan>{validationErrors?.guildComparison}</ErrorSpan>
+            )}
+          </Section>
+          {guildComparison === 'specific' && (
+            <Section gap="10px" flexDirection="column" alignItems="start">
+              <TextInput
+                labelName="Specific Role"
+                inputValue={specificRoleId}
+                onInputChange={(e: any) => setSpecificRoleId(e.target.value)}
+                placeholder="e.g. 4687"
+                error={!!validationErrors?.guildRole}
+              />
+              {!!validationErrors?.guildRole && (
+                <ErrorSpan>{validationErrors?.guildRole}</ErrorSpan>
+              )}
+            </Section>
+          )}
         </>
       )}
       <Button width="197px" onClick={verifyAndDoNext}>
-        {criteriaState.isUpdateCriteriaEnabled() ? "Update" : "Add"}
+        {!validationLoading &&
+          (criteriaState.isUpdateCriteriaEnabled() ? 'Update' : 'Add')}
+        {validationLoading && <Spinner size="20" color="#fff" />}
       </Button>
-      <GatingRulesInformation />
-    </Section>
+      <InfoContainer label={'Learn more about access gating rules'} cta='https://push.org/docs/chat/build/conditional-rules-for-group/' />
+    </ScrollSection>
   );
 };
 
 export default AddCriteria;
 
+const ErrorSpan = styled(Span)`
+  font-size: 12px;
+  font-weight: 500;
+  color: #ed5858;
+`;
+
+const ScrollSection = styled(Section)<{ theme: IChatTheme }>`
+  &::-webkit-scrollbar-thumb {
+    background: ${(props) => props.theme.scrollbarColor};
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-button {
+    height: 40px;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/AutoImageClipper.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/AutoImageClipper.tsx
new file mode 100644
index 000000000..80a1628fe
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/AutoImageClipper.tsx
@@ -0,0 +1,153 @@
+// React + Web3 Essentials
+import React, { Fragment, useCallback, useState } from "react";
+
+// External Packages
+import Cropper from "react-easy-crop";
+import styledComponents from "styled-components";
+import Resizer from "react-image-file-resizer";
+
+type CropType = {
+    x: number;
+    y: number;
+}
+
+type CroppedAreaPixels = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+
+const AutoImageClipper = (props: { imageSrc: any; onImageCropped: any; width: any; height: any; }) => {
+    const { imageSrc, onImageCropped, width, height } = props;
+    const [crop, setCrop] = useState<CropType>({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState<number>(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState<CroppedAreaPixels|null>(null);
+    const [croppedImage, setCroppedImage] = useState<string>('');
+    const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+
+    React.useEffect(() => {
+        async function showCroppedImage() {
+            try {
+                if (imageSrc) {
+                    const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels!);
+                    const image = await resizeFile(croppedImage);
+                    onImageCropped(image);
+
+                    return;
+
+                } else {
+                    return;
+                }
+            } catch (e) {
+                console.error(e);
+
+                return;
+            }
+        }
+        showCroppedImage();
+    }, [crop]);
+
+    async function getCroppedImg(imageSrc:string, pixelCrop: { height: any; width: any; x: any; y: any; }) {
+        const image = await createImage(imageSrc);
+        const canvas = document.createElement("canvas");
+        canvas.width = pixelCrop?.width;
+        canvas.height = pixelCrop?.height;
+        const ctx = canvas.getContext("2d");
+        const fileName = "none.jpg";
+
+        ctx!.drawImage(
+            image as CanvasImageSource,
+            pixelCrop.x,
+            pixelCrop.y,
+            pixelCrop.width,
+            pixelCrop.height,
+            0,
+            0,
+            pixelCrop.width,
+            pixelCrop.height
+        );
+
+        // As Base64 string
+        // return canvas.toDataURL('image/jpeg');
+
+        // As a blob
+        return new Promise((resolve, reject) => {
+            canvas.toBlob((file) => {
+                //   resolve(URL.createObjectURL(file));
+                resolve(
+                    new File([file!], fileName, {
+                        type: "image/jpeg",
+                        lastModified: Date.now()
+                    })
+                );
+            }, "image/jpeg");
+        });
+    }
+
+    const resizeFile = (file: any) => {
+        return new Promise((resolve) => {
+            Resizer.imageFileResizer(
+                file,
+                128,
+                128,
+                "JPEG",
+                80,
+                0,
+                (uri) => {
+                    resolve(uri);
+                    setCroppedImage(uri as unknown as string);
+                },
+                "base64"
+            );
+        });
+    };
+
+    const createImage = (url: string) => {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.addEventListener("load", () => resolve(image));
+            image.addEventListener("error", (error) => reject(error));
+            image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on CodeSandbox
+            image.src = url;
+        });
+    };
+
+    const onZoomChange = (zoom: React.SetStateAction<number>) => {
+        setZoom(zoom);
+    };
+    return (
+        <Fragment>
+            <Container>
+                <Cropper
+                    image={imageSrc}
+                    crop={crop}
+                    zoom={zoom}
+                    aspect={1}
+                    onCropChange={setCrop}
+                    onCropComplete={onCropComplete}
+                    onZoomChange={onZoomChange}
+                    style={{
+                        containerStyle: {
+                            width: width ? width : "0.1px",
+                            height: height ? height : "0.1px",
+                            position: "relative",
+                            borderRadius: "16px"
+                        }
+                    }}
+                />
+            </Container>
+        </Fragment>
+    );
+};
+
+const Container = styledComponents.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `;
+
+export default AutoImageClipper;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
index 4efb0d594..6b960d7ae 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx
@@ -7,13 +7,19 @@ import { MoreDarkIcon } from '../../../icons/MoreDark';
 import { ThemeContext } from '../theme/ThemeProvider';
 import Dropdown, { DropdownValueType } from '../reusables/DropDown';
 import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes';
-import { useClickAway } from '../../../hooks';
-import { CATEGORY, CRITERIA_TYPE, CriteriaType, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types';
+import { useClickAway, useTokenSymbolLoader } from '../../../hooks';
+import {
+  CATEGORY,
+  CRITERIA_TYPE,
+  CriteriaType,
+  TOKEN_NFT_COMPARISION,
+  TokenNftComparision,
+} from '../types';
 
 import EditSvg from '../../../icons/EditSvg.svg';
 import RemoveSvg from '../../../icons/RemoveSvg.svg';
 import { shortenText } from '../../../helpers';
-import { GUILD_COMPARISON_OPTIONS } from '../constants';
+import { GUILD_COMPARISON_OPTIONS, NETWORK_ICON_DETAILS } from '../constants';
 
 export type CriteraValueType = {
   invertedIcon?: any;
@@ -54,8 +60,12 @@ const MoreOptionsContainer = ({
 
   useClickAway(dropdownRef, () => setSelectedIndex(null));
   return (
-    <Section onClick={() => handleMoreOptionsClick(row, col)}  position='static'>
-      <MoreDarkIcon color={theme.iconColor?.groupSettings} />
+    <Section onClick={() => handleMoreOptionsClick(row, col)} position="static">
+      <MoreDarkIcon
+        color={theme.iconColor?.groupSettings}
+        width="24"
+        height="24"
+      />
       {selectedIndex?.length && selectedIndex[0] === row && (
         <DropdownContainer ref={dropdownRef} theme={theme}>
           <Dropdown
@@ -85,15 +95,21 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
     return false;
   };
 
-  const getGuildRole  = () =>{
-    return (GUILD_COMPARISON_OPTIONS.find(option => option.value === criteria?.data?.['comparison']))?.heading;
- 
-  }
+  const getGuildRole = () => {
+    if (!criteria?.data?.['comparison']) {
+      return 'SPECIFIC';
+    }
+    return GUILD_COMPARISON_OPTIONS.find(
+      (option) => option.value === criteria?.data?.['comparison']
+    )?.heading;
+  };
+
+  const [tokenSymbol] = useTokenSymbolLoader(criteria);
   return (
-    <Section gap="8px">
+    <Section gap="8px" width="100%">
       <Span
         alignSelf="center"
-        background="#657795"
+        background={theme.backgroundColor?.criteriaLabelBackground}
         borderRadius="4px"
         fontSize="10px"
         color={theme.textColor?.buttonText}
@@ -102,13 +118,27 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
         {CRITERIA_TYPE[criteria.category as CriteriaType]}
       </Span>
       {checkIfNftToken() && (
-        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
-          <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
-            {getTokenNftComparisionLabel()}{' '}
+        <Section
+          width="100%"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
+            <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
+              {getTokenNftComparisionLabel()}{' '}
+            </Span>
+            {criteria?.data?.['amount']} {tokenSymbol}
           </Span>
-          {/* need to fetch token symbol */}
-          {criteria?.data?.['amount']} {criteria.category}
-        </Span>
+          <ChainIconSVG padding="0 6px 0 0" >
+            {
+              NETWORK_ICON_DETAILS[
+                criteria?.data?.['contract'].split(
+                  ':'
+                )[1] as keyof typeof NETWORK_ICON_DETAILS
+              ].icon
+            }
+          </ChainIconSVG>
+        </Section>
       )}
       {criteria.category === CATEGORY.INVITE && (
         <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
@@ -121,17 +151,17 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
           fontSize="14px"
           color={theme.textColor?.modalSubHeadingText}
         >
-          {shortenText(criteria.data?.['url'],30)}
+          {shortenText(criteria.data?.['url'], 30)}
         </Span>
       )}
-         {criteria.category === CATEGORY.ROLES && (
-        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}> 
-        {criteria?.data?.['id']} {' '}
-        <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
-         with {' '}
+      {criteria.category === CATEGORY.ROLES && (
+        <Span fontWeight="700" color={theme.textColor?.modalHeadingText}>
+          {criteria?.data?.['id']}{' '}
+          <Span fontWeight="500" color={theme.textColor?.modalSubHeadingText}>
+            with{' '}
+          </Span>
+          {getGuildRole()} role
         </Span>
-        {getGuildRole()} role
-      </Span>
       )}
     </Section>
   );
@@ -191,7 +221,7 @@ const ConditionsComponent = ({
     <Section flexDirection="column" width="100%" height="100%">
       {conditionData &&
         conditionData.slice(1).map((criteria, row) => (
-          <Section flexDirection="column"  >
+          <Section flexDirection="column">
             {criteria.length <= 2 &&
               criteria.length >= 1 &&
               criteria.map((singleCriteria, col) => (
@@ -200,7 +230,7 @@ const ConditionsComponent = ({
                     <Section
                       borderRadius={theme.borderRadius?.modalInnerComponents}
                       background={theme.backgroundColor?.modalHoverBackground}
-                      padding="10px 4px 10px 12px"
+                      padding="15px 4px 15px 12px"
                       justifyContent="space-between"
                     >
                       <CriteriaSection criteria={singleCriteria} />
@@ -241,7 +271,7 @@ const ConditionsComponent = ({
                             background={
                               theme.backgroundColor?.modalHoverBackground
                             }
-                            padding="10px 4px 10px 12px"
+                            padding="15px 4px 15px 12px"
                             justifyContent="space-between"
                             width="100%"
                           >
@@ -252,8 +282,7 @@ const ConditionsComponent = ({
                     </>
                   ))}
                 </Section>
-                <Section 
-                >
+                <Section>
                   {criteria.map((singleCriteria) => (
                     <>
                       {criteria.length > 2 &&
@@ -296,7 +325,6 @@ export default ConditionsComponent;
 
 const DropdownContainer = styled.div`
   position: absolute;
-  // left: 48%;
   top: 0;
   right: 0;
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
@@ -312,11 +340,23 @@ const DropdownContainer = styled.div`
 const OperatorSpan = styled(Span)<{ theme: IChatTheme }>`
   padding: 4px 8px;
   margin: 8px 0;
-  border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
-  background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
+  border-radius: ${(props) => props.theme.borderRadius?.modalInnerComponents};
+  background: ${(props) => props.theme.backgroundColor?.modalHoverBackground};
   color: ${(props) => props.theme.textColor?.modalSubHeadingText};
 `;
 
 const CriteriaGroup = styled(Section)<{ theme: IChatTheme }>`
   border: ${(props) => props.theme.border?.modalInnerComponents};
 `;
+
+const ChainIconSVG = styled(Section)`
+  width: 20px;
+  height: 20px;
+
+  svg,
+  svg image,
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
index 9b2ad7045..5c7252688 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -13,7 +13,7 @@ import { Section, Span } from '../../reusables';
 import { Button } from '../reusables';
 import { CreateGroupType } from './CreateGroupType';
 import useToast from '../reusables/NewToast';
-import { CreateGroupModalProps, IChatTheme } from '../exportedTypes';
+import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import { DefineCondtion } from './DefineCondition';
 import AddCriteria from './AddCriteria';
@@ -26,6 +26,8 @@ import {
 
 import { Image } from '../../../config/styles';
 import { ProfilePicture, device } from '../../../config';
+import { CriteriaValidationErrorType } from '../types';
+import AutoImageClipper from './AutoImageClipper';
 
 export const CREATE_GROUP_STEP_KEYS = {
   INPUT_DETAILS: 1,
@@ -45,6 +47,8 @@ interface GroupInputDetailsType {
 
 export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   onClose,
+  modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  modalPositionType = MODAL_POSITION_TYPE.GLOBAL
 }) => {
   const [activeComponent, setActiveComponent] = useState<CreateGroupStepKeys>(
     // replace it with info one
@@ -69,11 +73,14 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
     }
   }, [activeComponent]);
 
+  const useDummyGroupInfo = false;
   const [groupInputDetails, setGroupInputDetails] =
     useState<GroupInputDetailsType>({
-      groupName: '',
-      groupDescription: '',
-      groupImage: '',
+      groupName: useDummyGroupInfo ? 'This is duumy group name' : '',
+      groupDescription: useDummyGroupInfo
+        ? 'This is dummy group description for testing'
+        : '',
+      groupImage: useDummyGroupInfo ? ProfilePicture : '',
     });
 
   const renderComponent = () => {
@@ -129,7 +136,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   };
 
   return (
-    <Modal>
+    <Modal clickawayClose={onClose} modalBackground={modalBackground} modalPositionType={modalPositionType}>
       {renderComponent()} <ToastContainer />
     </Modal>
   );
@@ -162,9 +169,12 @@ const CreateGroupDetail = ({
   const groupInfoToast = useToast();
   const { groupName, groupDescription, groupImage } = groupInputDetails;
   const theme = useContext(ThemeContext);
-
+  const [validationErrors, setValidationErrors] =
+    useState<CriteriaValidationErrorType>({});
   const fileUploadInputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(device.mobileL);
+  const [isImageUploaded, setIsImageUploaded] = useState<boolean>(false);
+  const [imageSrc, setImageSrc] = useState<string | null>();
 
   const handleChange = (e: Event) => {
     if (!(e.target instanceof HTMLInputElement)) {
@@ -177,15 +187,22 @@ const CreateGroupDetail = ({
       (e.target as HTMLInputElement).files &&
       ((e.target as HTMLInputElement).files as FileList).length
     ) {
+      setIsImageUploaded(true);
+      setGroupInputDetails({
+        groupDescription,
+        groupName,
+        groupImage: '',
+      });
       const reader = new FileReader();
       reader.readAsDataURL(e.target.files[0]);
 
       reader.onloadend = function () {
-        setGroupInputDetails({
-          groupDescription,
-          groupName,
-          groupImage: reader.result as string,
-        });
+        setImageSrc(reader.result as string);
+        // setGroupInputDetails({
+        //   groupDescription,
+        //   groupName,
+        //   groupImage: reader.result as string,
+        // });
       };
     }
   };
@@ -205,21 +222,19 @@ const CreateGroupDetail = ({
     if (!skipVerify) {
       // verify name
       if (groupName.trim().length === 0) {
-        showError('Group Name is empty');
+        setValidationErrors({
+          groupName: 'Group name cannot be empty',
+        });
         return;
       }
 
       // verify description
       if (groupDescription.trim().length === 0) {
-        showError('Group Description is empty');
+        setValidationErrors({
+          groupDescription: 'Group Description is empty',
+        });
         return;
       }
-
-      // verify description
-      // if (!groupImage) {
-      //   showError("Group image can't be empty");
-      //   return;
-      // }
     }
 
     if (handleNext) {
@@ -238,28 +253,45 @@ const CreateGroupDetail = ({
     <Section
       flexDirection="column"
       alignItems="center"
-      gap="20px"
+      gap="16px"
+      overflow='hidden auto'
+       justifyContent='start'
       width={!isMobile ? '400px' : '300px'}
     >
       <ModalHeader title="Create Group" handleClose={onClose} />
 
       <UploadContainer onClick={handleUpload}>
-        {!groupImage && (
+        {isImageUploaded ? (
+          groupImage ? (
+            <UpdatedImageContainer>
+              <Image
+                src={groupImage}
+                objectFit="contain"
+                alt="group image"
+                width="100%"
+                height="100%"
+              />
+            </UpdatedImageContainer>
+          ) : (
+            <AutoImageClipper
+              imageSrc={imageSrc}
+              onImageCropped={(croppedImage: string) =>
+                setGroupInputDetails({
+                  groupDescription,
+                  groupName,
+                  groupImage: croppedImage,
+                })
+              }
+              width={undefined}
+              height={undefined}
+            />
+          )
+        ) : (
           <ImageContainer theme={theme}>
             <AiTwotoneCamera fontSize={40} color={'rgba(87, 93, 115, 1)'} />
           </ImageContainer>
         )}
-        {groupImage && (
-          <UpdatedImageContainer>
-            <Image
-              src={groupImage}
-              objectFit="contain"
-              alt="group image"
-              width="100%"
-              height="100%"
-            />
-          </UpdatedImageContainer>
-        )}
+      
         <FileInput
           type="file"
           accept="image/*"
@@ -268,31 +300,42 @@ const CreateGroupDetail = ({
           onChange={(e) => handleChange(e as unknown as Event)}
         />
       </UploadContainer>
-      <TextInput
-        labelName="Group Name"
-        charCount={30}
-        inputValue={groupName}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription,
-            groupName: e.target.value,
-            groupImage,
-          })
-        }
-      />
-
-      <TextArea
-        labelName="Group Description"
-        charCount={80}
-        inputValue={groupDescription}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription: e.target.value,
-            groupName,
-            groupImage,
-          })
-        }
-      />
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextInput
+          labelName="Group Name"
+          charCount={30}
+          inputValue={groupName}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription,
+              groupName: e.target.value,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupName}
+        />
+        {!!validationErrors?.groupName && (
+          <ErrorSpan>{validationErrors?.groupName}</ErrorSpan>
+        )}
+      </Section>
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextArea
+          labelName="Group Description"
+          charCount={80}
+          inputValue={groupDescription}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription: e.target.value,
+              groupName,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupDescription}
+        />
+        {!!validationErrors?.groupDescription && (
+          <ErrorSpan>{validationErrors?.groupDescription}</ErrorSpan>
+        )}
+      </Section>
       <Button width="197px" onClick={verifyAndHandelNext}>
         Next
       </Button>
@@ -300,42 +343,45 @@ const CreateGroupDetail = ({
   );
 };
 
-export const GatingRulesInformation = () => {
-  const theme = useContext(ThemeContext);
-  return (
-    <Section gap="6px" zIndex="-1">
-      <SpamIcon />
-      <Span color={theme.textColor?.modalSubHeadingText} fontSize="15px">
-        Learn more about gating rules
-      </Span>
-    </Section>
-  );
-};
 
 //use the theme
 const UploadContainer = styled.div`
   width: fit-content;
+  min-width:128px;
+  min-height:128px;
   cursor: pointer;
   align-self: center;
 `;
 
 const ImageContainer = styled.div<{ theme: IChatTheme }>`
   margin-top: 10px;
-  width: fit-content;
   cursor: pointer;
   border-radius: 32px;
-  background: ${(props) => props.theme.backgroundColor.modalHoverBackground};
-  padding: 40px;
+  background: ${(props) => props.theme.backgroundColor!.modalHoverBackground};
+  width: 128px;
+  cursor: pointer;
+  height: 128px;
+  max-height: 128px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
 `;
 const UpdatedImageContainer = styled.div`
   margin-top: 10px;
-  width: 112px;
+  width: 128px;
   cursor: pointer;
-  height: 112px;
+  height: 128px;
   overflow: hidden;
+  max-height: 128px;
   border-radius: 32px;
 `;
 
 const FileInput = styled.input`
   display: none;
 `;
+
+const ErrorSpan = styled(Span)`
+  font-size: 12px;
+  font-weight: 500;
+  color: #ed5858;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
index 44ea24006..d7a21bdc1 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
@@ -6,9 +6,9 @@ import styled from 'styled-components';
 import { ModalHeader } from '../reusables/Modal';
 import OptionButtons, { OptionDescription } from '../reusables/OptionButtons';
 import { Section, Span, Spinner } from '../../reusables';
-import { ToggleInput } from '../reusables';
+import { InfoContainer, ToggleInput } from '../reusables';
 import { Button } from '../reusables';
-import { GatingRulesInformation, ModalHeaderProps } from './CreateGroupModal';
+import {  ModalHeaderProps } from './CreateGroupModal';
 import { GroupTypeState } from './CreateGroupModal';
 import { ThemeContext } from '../theme/ThemeProvider';
 import useToast from '../reusables/NewToast';
@@ -28,13 +28,13 @@ import { ProfilePicture } from '../../../config';
 
 const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
   {
-    heading: 'Open',
-    subHeading: 'Anyone can join',
+    heading: 'Public',
+    subHeading: 'Anyone can view chats, even without joining',
     value: 'open',
   },
   {
-    heading: 'Encrypted',
-    subHeading: 'Users must join group to view',
+    heading: 'Private',
+    subHeading: 'Encrypted Chats, Users must join group to view',
     value: 'encrypted',
   },
 ];
@@ -62,8 +62,8 @@ const AddConditionSection = ({
   };
 
   return (
-    <Section alignItems="start" flexDirection="column" gap="10px">
-      <Section flexDirection="column" alignItems="start" gap="5px">
+    <Section alignItems="start" flexDirection="column" gap="0px">
+      <Section flexDirection="column" alignItems="start" gap="5px" margin='0 0 5px 0'>
         <Span
           color={theme.textColor?.modalHeadingText}
           fontSize="16px"
@@ -81,7 +81,7 @@ const AddConditionSection = ({
       </Section>
 
       {criteriaState.entryOptionsDataArray.length > 1 && (
-        <Section margin="20px 0 10px 0">
+        <Section margin="10px" >
           <OperatorContainer
             operator={criteriaState.entryRootCondition}
             setOperator={(newEl: string) => {
@@ -90,29 +90,22 @@ const AddConditionSection = ({
           />
         </Section>
       )}
-      <ConditionSection
-        width="100%"
-        overflow="hidden auto"
-        maxHeight="20rem"
-        theme={theme}
-        padding="5px 4px 5px 0"
-      >
-        <ConditionsComponent
-          conditionData={[
-            [{ operator: criteriaState.entryRootCondition }],
-            ...generateMapping(),
-          ]}
-          deleteFunction={(idx) => {
-            criteriaState.deleteEntryOptionsDataArray(idx);
-          }}
-          updateFunction={(idx) => {
-            criteriaState.selectEntryOptionsDataArrayForUpdate(idx);
-            if (handleNext) {
-              handleNext();
-            }
-          }}
-        />
-      </ConditionSection>
+   
+      <ConditionsComponent
+        conditionData={[
+          [{ operator: criteriaState.entryRootCondition }],
+          ...generateMapping(),
+        ]}
+        deleteFunction={(idx) => {
+          criteriaState.deleteEntryOptionsDataArray(idx);
+        }}
+        updateFunction={(idx) => {
+          criteriaState.selectEntryOptionsDataArrayForUpdate(idx);
+          if (handleNext) {
+            handleNext();
+          }
+        }}
+      />
 
       <Button
         onClick={() => {
@@ -150,34 +143,35 @@ export const CreateGroupType = ({
 
   const { createGatedGroup, loading } = useCreateGatedGroup();
   const groupInfoToast = useToast();
+  const theme = useContext(ThemeContext);
 
-  const getEncryptionType = () =>{
-    if(groupEncryptionType === "encrypted"){
-      return false
+  const getEncryptionType = () => {
+    if (groupEncryptionType === 'encrypted') {
+      return false;
     }
-    return true
-  }
+    return true;
+  };
 
   const createGroupService = async () => {
-    const groupInfo:GroupInfoType = {
-      groupName:groupInputDetails.groupName,
-      groupDescription:groupInputDetails.groupDescription,
-      groupImage:groupInputDetails.groupImage || ProfilePicture,
+    const groupInfo: GroupInfoType = {
+      groupName: groupInputDetails.groupName,
+      groupDescription: groupInputDetails.groupDescription,
+      groupImage: groupInputDetails.groupImage || ProfilePicture,
       isPublic: getEncryptionType(),
     };
     const rules: any = checked ? criteriaStateManager.generateRule() : {};
     const isSuccess = await createGatedGroup(groupInfo, rules);
-    if(isSuccess === true){
+    if (isSuccess === true) {
       groupInfoToast.showMessageToast({
         toastTitle: 'Success',
         toastMessage: 'Group created successfully',
         toastType: 'SUCCESS',
         getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
       });
-    }else{
-      showError('Group creation failed'); 
+    } else {
+      showError('Group creation failed');
     }
-    
+
     onClose();
   };
 
@@ -200,67 +194,78 @@ export const CreateGroupType = ({
   };
 
   return (
-    <Section flexDirection="column" gap="32px">
+    <Section flexDirection="column" gap="16px">
       <ModalHeader
         title="Create Group"
         handleClose={onClose}
         handlePrevious={handlePrevious}
       />
-      <OptionButtons
-        options={GROUP_TYPE_OPTIONS}
-        selectedValue={groupEncryptionType}
-        handleClick={(newEl: string) => {
-          setGroupEncryptionType(newEl);
-        }}
-      />
-
-      <ToggleInput
-        labelHeading="Gated Group"
-        labelSubHeading="Turn this on for Token/NFT gating options"
-        checked={checked}
-        onToggle={() => setChecked(!checked)}
-      />
-
-      {checked && (
-        <Section flexDirection="column" gap="32px">
-          <AddConditionSection
-            criteriaState={criteriaStateManager.entryCriteria}
-            handleNext={() => {
-              if (handleNext) {
-                criteriaStateManager.setSelectedCriteria(
-                  SelectedCriteria.ENTRY
-                );
-                handleNext();
-              }
+      <ScrollSection
+        width="100%"
+        overflow="hidden auto"
+        maxHeight="53vh"
+        theme={theme}
+        padding="5px 4px 5px 0"
+      >
+        <Section gap="20px" flexDirection="column" height="100%">
+          <OptionButtons
+            options={GROUP_TYPE_OPTIONS}
+            selectedValue={groupEncryptionType}
+            handleClick={(newEl: string) => {
+              setGroupEncryptionType(newEl);
             }}
-            {...ACCESS_TYPE_TITLE.ENTRY}
           />
-          <AddConditionSection
-            handleNext={() => {
-              if (handleNext) {
-                criteriaStateManager.setSelectedCriteria(SelectedCriteria.CHAT);
-                handleNext();
-              }
-            }}
-            criteriaState={criteriaStateManager.chatCriteria}
-            {...ACCESS_TYPE_TITLE.CHAT}
+
+          <ToggleInput
+            labelHeading="Gated Group"
+            labelSubHeading="Turn this on for Token/NFT gating options"
+            checked={checked}
+            onToggle={() => setChecked(!checked)}
           />
-        </Section>
-      )}
 
-      <Section gap="20px" flexDirection="column">
+          {checked && (
+            <Section flexDirection="column" gap="20px">
+              <AddConditionSection
+                criteriaState={criteriaStateManager.entryCriteria}
+                handleNext={() => {
+                  if (handleNext) {
+                    criteriaStateManager.setSelectedCriteria(
+                      SelectedCriteria.ENTRY
+                    );
+                    handleNext();
+                  }
+                }}
+                {...ACCESS_TYPE_TITLE.ENTRY}
+              />
+              <AddConditionSection
+                handleNext={() => {
+                  if (handleNext) {
+                    criteriaStateManager.setSelectedCriteria(
+                      SelectedCriteria.CHAT
+                    );
+                    handleNext();
+                  }
+                }}
+                criteriaState={criteriaStateManager.chatCriteria}
+                {...ACCESS_TYPE_TITLE.CHAT}
+              />
+            </Section>
+          )}
+        </Section>
+      </ScrollSection>
+      <Section gap="16px" flexDirection="column">
         <Button width="197px" onClick={verifyAndCreateGroup}>
           {!loading && 'Create Group'}
           {loading && <Spinner size="20" color="#fff" />}
         </Button>
-        <GatingRulesInformation />
+        <InfoContainer label='Learn more about access gating rules' cta='https://push.org/docs/chat/build/conditional-rules-for-group/' />
       </Section>
     </Section>
   );
 };
 
 //styles
-const ConditionSection = styled(Section)<{ theme: IChatTheme }>`
+const ScrollSection = styled(Section)<{ theme: IChatTheme }>`
   &::-webkit-scrollbar-thumb {
     background: ${(props) => props.theme.scrollbarColor};
     border-radius: 10px;
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
index a0637bca1..9e3315279 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/DefineCondition.tsx
@@ -3,11 +3,10 @@ import { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Section, Span } from '../../reusables';
-import { Button, ModalHeader } from '../reusables';
+import { Button, InfoContainer, ModalHeader } from '../reusables';
 import { AddButtons } from './AddButtons';
 import { ModalHeaderProps } from './CreateGroupModal';
 import { ThemeContext } from '../theme/ThemeProvider';
-import { GatingRulesInformation } from './CreateGroupModal';
 import useMediaQuery from '../../../hooks/useMediaQuery';
 import ConditionsComponent from './ConditionsComponent';
 import { OperatorContainer } from './OperatorContainer';
@@ -17,7 +16,6 @@ import { IChatTheme } from '../theme';
 import { device } from '../../../config';
 import { OPERATOR_OPTIONS_INFO } from '../constants';
 
-
 export const DefineCondtion = ({
   onClose,
   handlePrevious,
@@ -25,19 +23,19 @@ export const DefineCondtion = ({
   criteriaStateManager,
 }: ModalHeaderProps) => {
   const theme = useContext(ThemeContext);
- 
-  const [isCriteriaAdded, setIsCriteriaAdded] = useState<boolean>(true);
   const isMobile = useMediaQuery(device.mobileL);
 
   const criteriaState = criteriaStateManager.getSelectedCriteria();
 
   const customButtonStyle = {
-    background: (criteriaState.selectedRules.length<1 )
-      ? theme.backgroundColor?.buttonDisableBackground
-      : theme.backgroundColor?.buttonBackground,
-    color: (criteriaState.selectedRules.length<1 )
-      ? theme.textColor?.buttonDisableText
-      : theme.textColor?.buttonText,
+    background:
+      criteriaState.selectedRules.length < 1
+        ? theme.backgroundColor?.buttonDisableBackground
+        : theme.backgroundColor?.buttonBackground,
+    color:
+      criteriaState.selectedRules.length < 1
+        ? theme.textColor?.buttonDisableText
+        : theme.textColor?.buttonText,
   };
 
   const verifyAndDoNext = () => {
@@ -75,7 +73,7 @@ export const DefineCondtion = ({
   return (
     <Section
       flexDirection="column"
-      gap="20px"
+      gap="16px"
       width={isMobile ? '300px' : '400px'}
     >
       <ModalHeader
@@ -87,24 +85,26 @@ export const DefineCondtion = ({
         handleClose={onClose}
         handlePrevious={handlePrevious}
       />
-      {isCriteriaAdded && (
-        <>
-         {criteriaState.selectedRules.length>1 &&   <Section margin="20px 0 10px 0">
-            <OperatorContainer
-              operator={criteriaState.entryRuleTypeCondition}
-              setOperator={(newEl: string) => {
-                criteriaState.setEntryRuleTypeCondition(
-                  newEl as keyof typeof OPERATOR_OPTIONS_INFO
-                );
-              }}
-            />
-          </Section>}
-          <ConditionSection
+         <Section flexDirection="column" >
+  
+          {criteriaState.selectedRules.length > 1 && (
+            <Section margin="5px 0 16px 0">
+              <OperatorContainer
+                operator={criteriaState.entryRuleTypeCondition}
+                setOperator={(newEl: string) => {
+                  criteriaState.setEntryRuleTypeCondition(
+                    newEl as keyof typeof OPERATOR_OPTIONS_INFO
+                  );
+                }}
+              />
+            </Section>
+          )}
+         {criteriaState.selectedRules.length > 0 && <ConditionSection
             width="100%"
             overflow="hidden auto"
-            maxHeight="20rem"
+            maxHeight="15vh"
             theme={theme}
-            padding="5px 4px 10px 0"
+            padding="5px 4px 5px 0"
           >
             <ConditionsComponent
               conditionData={getRules()}
@@ -118,19 +118,19 @@ export const DefineCondtion = ({
                 }
               }}
             />
-          </ConditionSection>
-        </>
-      )}
-      <Section flexDirection="column" gap="10px">
+          </ConditionSection>}
+   
+   
         <AddButtons handleNext={handleNext} title={'+ Add criteria'} />
-        <Span
+        </Section>
+        {!criteriaState.selectedRules.length &&   <Span
           fontSize="15px"
           fontWeight="400"
           color={theme.textColor?.modalSubHeadingText}
         >
           You must add at least 1 criteria to enable gating
-        </Span>
-      </Section>
+        </Span>}
+     
       <Button
         onClick={verifyAndDoNext}
         customStyle={customButtonStyle}
@@ -138,7 +138,8 @@ export const DefineCondtion = ({
       >
         {criteriaState.isCondtionUpdateEnabled() ? 'Update' : 'Add'}
       </Button>
-      <GatingRulesInformation />
+
+      <InfoContainer label='Learn more about access gating rules' cta='https://push.org/docs/chat/build/conditional-rules-for-group/' />
     </Section>
   );
 };
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/OperatorContainer.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/OperatorContainer.tsx
index d038226c3..e4400c3fe 100644
--- a/packages/uiweb/src/lib/components/chat/CreateGroup/OperatorContainer.tsx
+++ b/packages/uiweb/src/lib/components/chat/CreateGroup/OperatorContainer.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Section, Span } from '../../reusables';
 import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants';
-import { OptionButtons } from '../reusables';
+import  OptionButtons  from '../reusables/OptionButtons';
 import { ThemeContext } from '../theme/ThemeProvider';
 
 interface OperatorContainerProps {
@@ -18,7 +18,7 @@ export const OperatorContainer = ({
 
 
   return (
-    <Section flexDirection="column" gap="16px">
+    <Section flexDirection="column" gap="12px">
       <OptionButtons
         options={OPERATOR_OPTIONS}
         selectedValue={operator}
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
index d9b9f091a..7a38fed61 100644
--- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -17,10 +17,10 @@ import { Spinner } from '../../reusables';
 import { ThemeContext } from '../theme/ThemeProvider';
 import OpenLink from '../../../icons/OpenLink';
 import useVerifyAccessControl from '../../../hooks/chat/useVerifyAccessControl';
-import TokenGatedIcon from '../../../icons/Token-Gated.svg';
-import { Modal } from '../reusables/Modal';
-import { Image } from '../../reusables';
+import { Modal, ModalHeader } from '../reusables/Modal';
 import { ConnectButtonComp } from '../ConnectButton';
+import useToast from '../reusables/NewToast';
+import { ConditionsInformation } from '../ChatProfile/GroupInfoModal';
 import {
   checkIfIntent,
   getDefaultFeedObject,
@@ -38,11 +38,11 @@ import {
   usePushChatSocket,
 } from '../../../hooks';
 
-import type { FileMessageContent } from '../../../types';
-import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes';
+import type { FileMessageContent, IGroup } from '../../../types';
+import { GIFType, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, MessageInputProps } from '../exportedTypes';
 import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config';
 import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers';
-import useToast from '../reusables/NewToast';
+import { InfoContainer } from '../reusables';
 
 /**
  * @interface IThemeProps
@@ -52,7 +52,7 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
-const ConnectButtonSection = ({autoConnect}:{autoConnect:boolean}) => {
+const ConnectButtonSection = ({ autoConnect }: { autoConnect: boolean }) => {
   const { signer } = useChatData();
   return (
     <Section
@@ -84,7 +84,9 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   file = true,
   isConnected = true,
   autoConnect = false,
-  onGetTokenClick,
+  verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
+  onVerificationFail,
 }) => {
   const [typedMessage, setTypedMessage] = useState<string>('');
   const [showEmojis, setShowEmojis] = useState<boolean>(false);
@@ -230,7 +232,6 @@ export const MessageInput: React.FC<MessageInputProps> = ({
     console.log(chatFeed)
     if (!account && !env && !chatId) return;
     if (account && env && chatId && chatFeed && chatFeed?.groupInformation) {
-      console.log('inside condition')
       setIsMember(checkIfMember(chatFeed, account));
       setIsRules(checkIfAccessVerifiedGroup(chatFeed));
     }
@@ -258,7 +259,8 @@ console.log(checkIfMember(chatFeed, account!))
         chatId,
       });
       if (response) {
-        await updateChatFeed();}
+        await updateChatFeed();
+      }
     } else {
       const sendTextMessage = await sendMessage({
         message: `Hello, please let me join this group, my wallet address is ${account}`,
@@ -379,24 +381,20 @@ console.log(checkIfMember(chatFeed, account!))
       setChatFeed(chat as IFeeds);
     }
   };
-  
-  return !Object.keys(chatFeed || {}).length ? (
-    <>
-      {!pgpPrivateKey && (isConnected || !!signer) && (
-        <TypebarSection
-          width="100%"
-          overflow="hidden"
-          borderRadius="13px"
-          position="static"
-          padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
-          background={`${theme.backgroundColor?.messageInputBackground}`}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <ConnectButtonSection autoConnect={autoConnect}/>
-        </TypebarSection>
-      )}
-    </>
+
+  return !(pgpPrivateKey && account) && isConnected ? (
+    <TypebarSection
+      width="100%"
+      overflow="hidden"
+      borderRadius="13px"
+      position="static"
+      padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
+      background={`${theme.backgroundColor?.messageInputBackground}`}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <ConnectButtonSection autoConnect={autoConnect} />
+    </TypebarSection>
   ) : !checkIfIntent({ chat: chatFeed, account: account! }) &&
     Object.keys(chatFeed || {}).length ? (
     <TypebarSection
@@ -412,143 +410,104 @@ console.log(checkIfMember(chatFeed, account!))
     >
       {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? (
         <>
-        {(isJoinGroup() || isNotVerified()) && (
-          <Section
-            width="100%"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Span
-              padding="8px 8px 8px 16px"
-              color={theme.textColor?.chatReceivedBubbleText}
-              fontSize="15px"
-              fontWeight="500"
-              textAlign="start"
-            >
-              {isJoinGroup() && 'Click on the button to join the group'}
-              {isNotVerified() && (
-                <>
-                  Sending messages requires{' '}
-                  <Span color={theme.backgroundColor?.chatSentBubbleBackground}>
-                    1 PUSH Token
-                  </Span>{' '}
-                  for participation.{' '}
-                  <Link
-                    href="https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-chat/group-chat#to-create-a-token-gated-group"
-                    target="_blank"
-                    color={theme.backgroundColor?.chatSentBubbleBackground}
-                  >
-                    Learn More <OpenLink />
-                  </Link>
-                </>
-              )}
-            </Span>
-            <ConnectWrapper>
-              <Connect
-                onClick={async() =>
-                  isJoinGroup() ? await handleJoinGroup() : await checkVerification()
-                }
-              >
-                {isJoinGroup() &&
-                <>
-                 {approveLoading ? (
-                  <Spinner color="#fff" size="24" />
-                ) : (
-                  ' Join Group '
-                )}
-                </>
-                }
-                {isNotVerified() &&
-                <>
-                  {accessLoading ? (
-                    <Spinner color="#fff" size="24" />
-                  ) : (
-                    'Verify Access'
-                  )}
-                  </>
-                  }
-              </Connect>
-            </ConnectWrapper>
-          </Section>
-        )}
-        {(!!pgpPrivateKey && !verificationSuccessfull) && (
-          <Modal width="439px">
+          {(isJoinGroup() || isNotVerified()) && (
             <Section
-              padding="10px"
-              theme={theme}
-              gap="32px"
-              flexDirection="column"
+              width="100%"
+              justifyContent="space-between"
+              alignItems="center"
             >
               <Span
+                padding="8px 8px 8px 16px"
+                color={theme.textColor?.chatReceivedBubbleText}
+                fontSize="15px"
                 fontWeight="500"
-                fontSize="24px"
-                color={theme.textColor?.encryptionMessageText}
-              >
-                Verification Failed
-              </Span>
-              <Span
-                color={theme.textColor?.encryptionMessageText}
-                fontSize="16px"
+                textAlign="start"
               >
-                Please ensure the following conditions are met to participate and
-                send messages.
-              </Span>
-              <Section gap="8px" alignItems="start">
-                <Image
-                  verticalAlign="start"
-                  height="24"
-                  width="24"
-                  src={TokenGatedIcon}
-                  alt="token-gated"
-                />
-                <Section flexDirection="column">
-                  {' '}
-                  <Span
-                    color={theme.textColor?.encryptionMessageText}
-                    textAlign="start"
-                    alignSelf="start"
-                  >
-                    Token Gated
-                  </Span>
-                  <Span
-                    fontWeight="500"
-                    textAlign="start"
-                    color={theme.textColor?.encryptionMessageText}
-                  >
-                    You need to have{' '}
-                    <Span color={theme.backgroundColor?.chatSentBubbleBackground}>
+                {isJoinGroup() && 'Click on the button to join the group'}
+                {isNotVerified() && (
+                  <>
+                    Sending messages requires{' '}
+                    <Span
+                      color={theme.backgroundColor?.chatSentBubbleBackground}
+                    >
                       1 PUSH Token
                     </Span>{' '}
-                    in your wallet to be able to send messages.
-                  </Span>
-                </Section>
-              </Section>
-              <Section gap="8px">
-                <TokenWrapper
-                  onClick={() => {
-                    if (onGetTokenClick) {
-                      onGetTokenClick();
-                    }
-                    setVerificationSuccessfull(true);
-                  }}
+                    for participation.{' '}
+                    <Link
+                      href="https://docs.push.org/developers/developer-tooling/push-sdk/sdk-packages-details/epnsproject-sdk-restapi/for-chat/group-chat#to-create-a-token-gated-group"
+                      target="_blank"
+                      color={theme.backgroundColor?.chatSentBubbleBackground}
+                    >
+                      Learn More <OpenLink />
+                    </Link>
+                  </>
+                )}
+              </Span>
+              <ConnectWrapper>
+                <Connect
+                  onClick={async () =>
+                    isJoinGroup()
+                      ? await handleJoinGroup()
+                      : await checkVerification()
+                  }
                 >
-                  <TokenGet>
-                    Get Free Tokens
-                    <OpenLink height="12" width="12" />
-                  </TokenGet>
-                </TokenWrapper>
+                  {isJoinGroup() && (
+                    <>
+                      {approveLoading ? (
+                        <Spinner color="#fff" size="24" />
+                      ) : (
+                        ' Join Group '
+                      )}
+                    </>
+                  )}
+                  {isNotVerified() && (
+                    <>
+                      {accessLoading ? (
+                        <Spinner color="#fff" size="24" />
+                      ) : (
+                        'Verify Access'
+                      )}
+                    </>
+                  )}
+                </Connect>
+              </ConnectWrapper>
+            </Section>
+          )}
+          {!!pgpPrivateKey && !verificationSuccessfull && (
+            <Modal width="550px" modalBackground={verificationFailModalBackground} modalPositionType={verificationFailModalPosition}>
+              <Section
+                margin="5px 0px 0px 0px"
+                gap="16px"
+                flexDirection="column"
+                width="100%"
+              >
+                <ModalHeader title="Access Failed" />
+                <ConditionsInformation
+                  theme={theme}
+                  groupInfo={chatFeed?.groupInformation}
+                  subheader="Please make sure the following conditions
+                   are met to pariticpate and send messages."
+                  alert={true}
+                />
                 <ConnectWrapperClose
                   onClick={() => {
+                    if (onVerificationFail) {
+                      onVerificationFail();
+                    }
                     setVerificationSuccessfull(true);
                   }}
                 >
-                  <ConnectClose>Close</ConnectClose>
+                  <ConnectClose>Cancel</ConnectClose>
                 </ConnectWrapperClose>
+                <InfoContainer
+                  cta="https://push.org/docs/chat/build/conditional-rules-for-group/"
+                  label="Learn more about access gating rules"
+                />
               </Section>
-            </Section>
-          </Modal>
-        )}
-      </>
+              {/* </Section> */}
+            </Modal>
+          )}
+        </>
       ) : null}
       {!!pgpPrivateKey &&
         (((isRules ? verified : true) && isMember) ||
diff --git a/packages/uiweb/src/lib/components/chat/constants/chainDetails.tsx b/packages/uiweb/src/lib/components/chat/constants/chainDetails.tsx
new file mode 100644
index 000000000..fb9d4c21a
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/constants/chainDetails.tsx
@@ -0,0 +1,70 @@
+
+import Tooltip from "../../tooltip";
+
+import { EthereumSvg } from '../../../icons/EthereumSvg';
+import { PolygonSvg } from "../../../icons/PolygonSvg";
+import { BSCSvg } from "../../../icons/BSCSvg";
+import { OptimismSvg } from "../../../icons/OptimismSvg";
+import { PolygonzkevmSvg } from "../../../icons/PolygonzkevmSvg";
+import { ArbitrumSvg } from "../../../icons/ArbitrumSvg"
+import React from "react";
+
+const createSVGIcon = (element:any, chainName: string) => {
+  return (
+    <Tooltip tooltipContent={`${chainName}`}>
+      {element}
+    </Tooltip>
+  );
+};
+
+export const NETWORK_ICON_DETAILS =  {
+  5: {
+    label: 'ETHEREUM GOERLI',
+    icon: createSVGIcon(<EthereumSvg/>, 'Ethereum Goerli'),
+  },
+  1: {
+    label: 'ETHEREUM MAINNET',
+    icon: createSVGIcon(<EthereumSvg/>, 'Ethereum Mainnet'),
+  },
+  80001: {
+    label: 'POLYGON MUMBAI',
+    icon: createSVGIcon(<PolygonSvg/>, 'Polygon Mumbai'),
+  },
+  137: {
+    label: 'POLYGON MAINNET',
+    icon: createSVGIcon(<PolygonSvg/>, 'Polygon Mainnet'),
+  },
+  97: {
+    label: 'BSC TESTNET',
+    icon: createSVGIcon(<BSCSvg/>, 'Bsc Testnet'),
+  },
+  56: {
+    label: 'BSC MAINNET',
+    icon: createSVGIcon(<BSCSvg/>, 'Bsc Mainnet'),
+  },
+  420: {
+    label: 'OPTIMISM TESTNET',
+    icon: createSVGIcon(<OptimismSvg/>, 'Optimism Testnet'),
+  },
+  10: {
+    label: 'OPTIMISM MAINNET',
+    icon: createSVGIcon(<OptimismSvg/>, 'Optimism Mainnet'),
+  },
+  1442: {
+    label: 'POLYGON ZK EVM TESTNET',
+    icon: createSVGIcon(<PolygonzkevmSvg/>, 'Polygon ZK EVM Testnet'),
+  },
+  1101: {
+    label: 'POLYGON ZK EVM MAINNET',
+    icon: createSVGIcon(<PolygonzkevmSvg/>, 'Polygon ZK EVM Mainnet'),
+  },
+
+  42161: {
+    label: 'ARBITRUMONE MAINNET',
+    icon: createSVGIcon(<ArbitrumSvg/>, 'Arbitrum Mainnet'),
+  },
+  421613: {
+    label: 'ARBITRUM TESTNET',
+    icon: createSVGIcon(<ArbitrumSvg/>, 'Arbitrum Testnet'),
+  },
+};
diff --git a/packages/uiweb/src/lib/components/chat/constants/index.ts b/packages/uiweb/src/lib/components/chat/constants/index.ts
index 4224f93ab..c2ab37953 100644
--- a/packages/uiweb/src/lib/components/chat/constants/index.ts
+++ b/packages/uiweb/src/lib/components/chat/constants/index.ts
@@ -53,4 +53,6 @@ export const ACCESS_TYPE_TITLE = {
     heading: 'Conditions to Chat',
     subHeading: 'Add a condition to join or leave it open for everyone',
   },
-};
\ No newline at end of file
+};
+
+export * from './chainDetails';
diff --git a/packages/uiweb/src/lib/components/chat/exportedTypes.ts b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
index 26305646d..dd4e7f7dc 100644
--- a/packages/uiweb/src/lib/components/chat/exportedTypes.ts
+++ b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
@@ -20,12 +20,18 @@ export interface IChatViewComponentProps {
   file?: boolean;
   isConnected?: boolean;
   autoConnect?:boolean;
-  onGetTokenClick?: () => void;
+  groupInfoModalBackground?: ModalBackgroundType;
+  groupInfoModalPositionType?: ModalPositionType;
+  verificationFailModalBackground?: ModalBackgroundType;
+  verificationFailModalPosition?: ModalPositionType;
+  onVerificationFail?: () => void;
 }
 
 export interface IChatProfile {
   chatId: string;
   style: "Info" | "Preview";
+  groupInfoModalBackground?: ModalBackgroundType;
+  groupInfoModalPositionType?: ModalPositionType;
 }
 
 export interface TwitterFeedReturnType {
@@ -58,7 +64,9 @@ export interface MessageInputProps {
   file?: boolean;
   isConnected?: boolean;
   autoConnect?:boolean;
-  onGetTokenClick?: () => void;
+  verificationFailModalBackground?: ModalBackgroundType;
+  verificationFailModalPosition?: ModalPositionType;
+  onVerificationFail?: () => void;
 }
 
 
@@ -113,8 +121,25 @@ export interface User {
   isAdmin?:boolean;
 }
 
+export const MODAL_BACKGROUND_TYPE = {
+  OVERLAY:'OVERLAY',
+  BLUR: 'BLUR',
+  TRANSPARENT: 'TRANSPARENT',
+
+  } as const;
+  
+  export type ModalBackgroundType = keyof typeof MODAL_BACKGROUND_TYPE;
+
+  export const MODAL_POSITION_TYPE = {
+    RELATIVE:'RELATIVE',
+    GLOBAL: 'GLOBAL',
+    } as const;
+    
+  export type ModalPositionType = keyof typeof MODAL_POSITION_TYPE;
 export interface CreateGroupModalProps {
   onClose: ()=>void;
+  modalBackground?: ModalBackgroundType;
+  modalPositionType?: ModalPositionType;
 };
 
 
diff --git a/packages/uiweb/src/lib/components/chat/helpers/addCriteriaUtilities.ts b/packages/uiweb/src/lib/components/chat/helpers/addCriteriaUtilities.ts
new file mode 100644
index 000000000..92ebbd9fe
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/addCriteriaUtilities.ts
@@ -0,0 +1,296 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DropdownValueType } from '../reusables';
+import {
+  CATEGORY,
+  Data,
+  DropdownCategoryValuesType,
+  DropdownSubCategoryValuesType,
+  SubCategoryKeys,
+  TYPE,
+  TypeKeys,
+} from '../types';
+import { tokenFetchHandler } from './tokenHelpers';
+
+type InputFunctionParams = {
+  dropdownCategoryValues?: DropdownCategoryValuesType;
+  dropdownTypeValues?: Array<DropdownValueType>;
+  selectedTypeValue?: number;
+  selectedCategoryValue?: number;
+};
+
+export const getCategoryDropdownValues = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  return dropdownCategoryValues![
+    dropdownTypeValues![selectedTypeValue!]?.value as TypeKeys
+  ];
+};
+
+export const getSelectedCategoryValue = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  const category = getCategoryDropdownValues({
+    dropdownCategoryValues,
+    dropdownTypeValues,
+    selectedTypeValue,
+  });
+  if (Array.isArray(category))
+    return (category as DropdownValueType[])[selectedCategoryValue!].value!;
+  else return category.value! as SubCategoryKeys;
+};
+
+export const getSelectedSubCategoryValue = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  dropdownSubCategoryValues,
+  selectedTypeValue,
+}: InputFunctionParams & {
+  dropdownSubCategoryValues: DropdownSubCategoryValuesType;
+}) => {
+  const subCategory = getSubCategoryDropdownValues({
+    dropdownCategoryValues,
+    dropdownTypeValues,
+    selectedCategoryValue,
+    dropdownSubCategoryValues,
+    selectedTypeValue,
+  });
+  if (Array.isArray(subCategory))
+    return (subCategory as DropdownValueType[])[selectedCategoryValue!].value!;
+  else return subCategory.value! as SubCategoryKeys;
+};
+
+export const checkIfTokenNFT = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  const category = getSelectedCategoryValue({
+    dropdownCategoryValues,
+    dropdownTypeValues,
+    selectedTypeValue,
+    selectedCategoryValue,
+  });
+  if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) return true;
+
+  return false;
+};
+
+export const checkIfCustomEndpoint = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  const category = getSelectedCategoryValue({
+    dropdownCategoryValues,
+    selectedTypeValue,
+    dropdownTypeValues,
+    selectedCategoryValue,
+  });
+  if (category === CATEGORY.CustomEndpoint) return true;
+  return false;
+};
+
+export const checkIfPushInvite = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  const accessType = dropdownTypeValues![selectedTypeValue!].value;
+  if (accessType === TYPE.PUSH) {
+    const category = getSelectedCategoryValue({
+      dropdownCategoryValues,
+      selectedTypeValue,
+      dropdownTypeValues,
+      selectedCategoryValue,
+    });
+    if (category === CATEGORY.INVITE) return true;
+  }
+
+  return false;
+};
+
+export const checkIfGuild = (
+  dropdownTypeValues: Array<DropdownValueType>,
+  selectedTypeValue: number
+) => {
+  const accessType = dropdownTypeValues[selectedTypeValue].value;
+  if (accessType === TYPE.GUILD) {
+    return true;
+  }
+
+  return false;
+};
+
+export const getSubCategoryDropdownValues = ({
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  selectedCategoryValue,
+  dropdownSubCategoryValues,
+  selectedTypeValue,
+}: InputFunctionParams & {
+  dropdownSubCategoryValues: DropdownSubCategoryValuesType;
+}) => {
+  const category = getCategoryDropdownValues({
+    dropdownCategoryValues,
+    dropdownTypeValues,
+    selectedCategoryValue,
+    selectedTypeValue,
+  });
+  if (Array.isArray(category))
+    return dropdownSubCategoryValues[
+      (category as DropdownValueType[])[selectedCategoryValue!]
+        .value as SubCategoryKeys
+    ];
+  else return dropdownSubCategoryValues[category.value as SubCategoryKeys];
+};
+
+export const getSeletedType = ({
+  dropdownTypeValues,
+  selectedTypeValue,
+}: InputFunctionParams) => {
+  return dropdownTypeValues![selectedTypeValue!].value || 'PUSH';
+};
+
+export const getSelectedCategory = ({
+  dropdownCategoryValues,
+  selectedCategoryValue,
+}: InputFunctionParams) => {
+  const category: string =
+    (dropdownCategoryValues!['PUSH'] as DropdownValueType[])[
+      selectedCategoryValue!
+    ].value || CATEGORY.ERC20;
+
+  return category;
+};
+
+export const getSelectedChain = (
+  dropdownChainsValues: Array<DropdownValueType>,
+  selectedChainValue: number
+) => {
+  return dropdownChainsValues[selectedChainValue].value || 'eip155:1';
+};
+
+type FetchContractInfoParamType = {
+  setValidationErrors: (prev: any) => void;
+  setUnit: Dispatch<SetStateAction<string>>;
+  setDecimals: Dispatch<SetStateAction<number>>;
+  contract: string;
+  dropdownChainsValues: Array<DropdownValueType>;
+  selectedChainValue: number;
+} & InputFunctionParams;
+
+export const fetchContractInfo = async ({
+  setValidationErrors,
+  selectedCategoryValue,
+  selectedTypeValue,
+  dropdownCategoryValues,
+  dropdownTypeValues,
+  contract,
+  setUnit,
+  setDecimals,
+  selectedChainValue,
+  dropdownChainsValues,
+}: FetchContractInfoParamType) => {
+  setValidationErrors((prev: any) => ({ ...prev, tokenError: undefined }));
+
+  const _type = getSeletedType({ selectedTypeValue, dropdownTypeValues });
+  const _category: string = getSelectedCategory({
+    dropdownCategoryValues,
+    selectedCategoryValue,
+  });
+  const _chainInfo = getSelectedChain(dropdownChainsValues, selectedChainValue);
+
+  await tokenFetchHandler(
+    contract,
+    _type,
+    _category,
+    _chainInfo,
+    setUnit,
+    setDecimals
+  );
+};
+
+type GetCriteriaDataParamType = {
+  type: string;
+  category: string;
+  contract: string;
+  dropdownChainsValues: Array<DropdownValueType>;
+  dropdownQuantityRangeValues: Array<DropdownValueType>;
+  selectedChainValue: number;
+  decimals: number;
+  unit: string;
+  url: string;
+  guildId: string;
+  specificRoleId: string;
+  guildComparison: string;
+  inviteCheckboxes: {
+    admin: boolean;
+    owner: boolean;
+  };
+  quantity: {
+    value: number;
+    range: number;
+  };
+} ;
+
+export const getCriteriaData = ({
+  type,
+  category,
+  contract,
+  quantity,
+  decimals,
+  unit,
+  url,
+  inviteCheckboxes,
+  guildComparison,
+  specificRoleId,
+  guildId,
+  dropdownQuantityRangeValues,
+  selectedChainValue,
+  dropdownChainsValues,
+}: GetCriteriaDataParamType): Data => {
+  if (type === 'PUSH') {
+    if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) {
+      const selectedChain =
+        dropdownChainsValues[selectedChainValue].value || 'eip155:1';
+      return {
+        contract: `${selectedChain}:${contract}`,
+        amount: quantity.value,
+        comparison: dropdownQuantityRangeValues[quantity.range].value,
+        decimals: category === CATEGORY.ERC20 ? decimals : undefined,
+        token: unit,
+      };
+    } else if (category === CATEGORY.INVITE) {
+      const _inviteRoles = [];
+      if (inviteCheckboxes.admin) {
+        _inviteRoles.push('ADMIN');
+      }
+      if (inviteCheckboxes.owner) {
+        _inviteRoles.push('OWNER');
+      }
+
+      return {
+        inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN'],
+      };
+    } else {
+      return {
+        url: url,
+      };
+    }
+  } else {
+    return {
+      id: guildId,
+      comparison: guildComparison === 'specific' ? '' : guildComparison,
+      role: guildComparison === 'specific' ? specificRoleId : '*',
+    };
+  }
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/getRulesToCondtionArray.ts b/packages/uiweb/src/lib/components/chat/helpers/getRulesToCondtionArray.ts
new file mode 100644
index 000000000..c24da7465
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/getRulesToCondtionArray.ts
@@ -0,0 +1,67 @@
+import { ConditionArray } from '../exportedTypes';
+import * as PushAPI from '@pushprotocol/restapi';
+import { fetchERC20Info, fetchERC721nfo } from './tokenHelpers';
+
+export interface GroupRulesType {
+  CHAT: ConditionArray[];
+  ENTRY: ConditionArray[];
+}
+
+export const getRuleInfo = (
+  rules: PushAPI.Rules | null | undefined
+): GroupRulesType => {
+  if (!rules) {
+    return {
+      CHAT: [],
+      ENTRY: [],
+    };
+  }
+
+  const [chatRules, entryRules] = [
+    getRulesToCondtionArray(rules.chat),
+    getRulesToCondtionArray(rules.entry),
+  ];
+
+  return {
+    CHAT: chatRules,
+    ENTRY: entryRules,
+  };
+};
+
+const getRulesToCondtionArray = (arr: any) => {
+  const getKey = (_json: any) => {
+    return Object.keys(_json)[0];
+  };
+
+  if (!arr) {
+    return [];
+  }
+
+  const data = [];
+  const conditions = Array.isArray(arr.conditions)
+    ? arr.conditions[0]
+    : arr.conditions;
+  const rootOperator = getKey(conditions);
+
+  data.push([{ operator: rootOperator }]);
+
+  if (conditions[rootOperator].length === 0) {
+    return [];
+  }
+
+  const rules = conditions[rootOperator];
+
+  for (const rule of rules) {
+    const nodeOperator = getKey(rule);
+    if (nodeOperator === 'type') {
+      data.push([rule]);
+    } else {
+      data.push([
+        { operator: nodeOperator },
+        ...rule[nodeOperator].map((el: any) => ({ ...el })),
+      ]);
+    }
+  }
+
+  return data as ConditionArray[];
+};
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/helpers/index.ts b/packages/uiweb/src/lib/components/chat/helpers/index.ts
index 55971aeab..ab6b2d902 100644
--- a/packages/uiweb/src/lib/components/chat/helpers/index.ts
+++ b/packages/uiweb/src/lib/components/chat/helpers/index.ts
@@ -2,4 +2,5 @@ export * from './twitter';
 export * from './group';
 
 export * from './helper';
-export * from './tokenGatedGroup';
\ No newline at end of file
+export * from './tokenGatedGroup';
+export * from './addCriteriaUtilities';
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
index bbdd56109..fb1a8c845 100644
--- a/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
@@ -1,5 +1,17 @@
 import axios from 'axios';
-import { CriteriaStateType, Data, GuildData, Rule } from '../types';
+import { ethers } from "ethers";
+
+import { fetchERC20Info, fetchERC721nfo } from './tokenHelpers';
+import {
+  CATEGORY,
+  CriteriaStateType,
+  CriteriaValidationErrorType,
+  Data,
+  GuildData,
+  PushData,
+  Rule,
+  TYPE,
+} from '../types';
 
 const handleDefineCondition = (
   entryCriteria: CriteriaStateType,
@@ -18,13 +30,58 @@ const handleDefineCondition = (
   }
 };
 
-const validateGUILDData = async (condition: Rule): Promise<string[]> => {
+const validateCustomEndpointData = async (
+  condition: Rule
+): Promise<CriteriaValidationErrorType> => {
+  const { data, type, subcategory } = condition;
+  const errors: CriteriaValidationErrorType = {};
+
+  if (!(data as PushData).url) {
+    return { url: 'URL is missing' };
+  } else {
+    // Protocol Validation
+    if (
+      !(data as PushData)?.url!.startsWith('http://') &&
+      !(data as PushData).url!.startsWith('https://')
+    ) {
+      return {
+        url: 'Invalid URL protocol. Only "http://" and "https://" are allowed.',
+      };
+    }
+    // URL Length Check
+    if ((data as PushData)?.url!.length > 2083) {
+      return { url: 'URL is too long.' };
+    }
+
+    // Check for GET and Template
+    if (subcategory === 'GET') {
+      if (!(data as PushData)?.url!.includes('{{user_address}}')) {
+        return {
+          url: `GET request URL should have the '{{user_address}}' template.`,
+        };
+      }
+
+      // Ensure proper number of expected templates
+      const matches = (data as PushData)?.url!.match(/{{user_address}}/g) || [];
+      if (matches.length > 1) {
+        return {
+          url: `GET request URL should not have multiple '{{user_address}}' templates.`,
+        };
+      }
+    }
+  }
+  return {};
+};
+
+const validateGUILDData = async (
+  condition: Rule
+): Promise<CriteriaValidationErrorType> => {
   const { data } = condition;
-  const errors: string[] = [];
+  const errors: CriteriaValidationErrorType = {};
 
   // Check for guild ID presence
   if (!(data as GuildData).id) {
-    errors.push('Guild ID is missing');
+    return { ...errors, guildId: 'Guild ID is missing' };
   } else {
     try {
       const response = await axios.get(
@@ -32,12 +89,12 @@ const validateGUILDData = async (condition: Rule): Promise<string[]> => {
       );
 
       if (response.status !== 200) {
-        errors.push('Invalid Guild ID');
+        return { ...errors, guildId: 'Guild ID is missing' };
       } else {
         // Validate the role values
         if ((data as GuildData).role === '*') {
           if (data.comparison !== 'all' && data.comparison !== 'any') {
-            errors.push('Invalid comparison value');
+            return { ...errors, guildComparison: 'Invalid comparison value' };
           }
         } else if ((data as GuildData).role) {
           const roleExists = response.data.roles.some(
@@ -45,23 +102,78 @@ const validateGUILDData = async (condition: Rule): Promise<string[]> => {
               role.id.toString() === (data as GuildData).role
           );
           if (!roleExists) {
-            errors.push('Invalid Guild Role ID');
+            return { ...errors, guildRole: 'Invalid Guild Role ID' };
           }
 
           // For specific role, comparison can be null or empty
           if (data.comparison) {
-            errors.push('Comparison should be empty for specific role');
+            return {
+              ...errors,
+              guildComparison: 'Comparison should be empty for specific role',
+            };
           }
         } else {
-          errors.push('Invalid role value');
+          return { ...errors, guildRole: 'Invalid role value' };
         }
       }
     } catch (error) {
-      errors.push('Error validating Guild ID');
+      return { ...errors, guildId: 'Error validating Guild ID' };
     }
   }
 
-  return errors;
+  return {};
 };
 
-export { handleDefineCondition, validateGUILDData };
+const validateTokenData = async (condition:Rule):Promise<CriteriaValidationErrorType> =>{
+  const data:PushData = condition.data;
+  const _contract = data.contract || ""
+  const _eip155Format = _contract.split(":")
+
+  if(_eip155Format.length !==3){
+    return {tokenError:"Invalid contract address"}
+  }
+
+  const [chainId, address] = [parseInt(_eip155Format[1]), _eip155Format[2]]
+
+  if(!ethers.utils.isAddress(address)){
+    return {tokenError:`Invalid contract address`}
+  }
+
+  const [err] = condition.category === CATEGORY.ERC721 ? 
+    await fetchERC721nfo(address, chainId) : await fetchERC20Info(address, chainId);
+
+  if(err){
+   return {tokenError:`Invalid ${condition.category} contract`} 
+  }
+  if(!data.amount){
+    return {tokenAmount:`Amount cannot be 0`}
+  }
+  else{
+    if(data.amount<0){
+      return {tokenAmount:`Amount cannot be in negative`}
+    }
+  }
+  return {}  
+}
+
+const validationCriteria =  async (condition: Rule):Promise<CriteriaValidationErrorType> => {
+ if(condition.type === TYPE.GUILD)
+ {
+  return validateGUILDData(condition);
+ }else{
+  if(condition.category === CATEGORY.INVITE){
+    return {}
+  }else  if (condition.category === CATEGORY.CustomEndpoint){
+  return validateCustomEndpointData(condition);
+  }else{
+    return validateTokenData(condition)
+  }
+ }
+
+}
+
+export {
+  handleDefineCondition,
+  validationCriteria,
+  validateCustomEndpointData,
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts
new file mode 100644
index 000000000..d941608ab
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/abi.ts
@@ -0,0 +1,32 @@
+const NFTContractABI = [
+  {
+    inputs: [],
+    name: 'name',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
+
+const TokenContractABI = [
+  {
+    constant: true,
+    inputs: [],
+    name: 'symbol',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    constant: true,
+    inputs: [],
+    name: 'decimals',
+    outputs: [{ internalType: 'uint8', name: '', type: 'uint8' }],
+    payable: false,
+    stateMutability: 'view',
+    type: 'function',
+  },
+];
+
+export { NFTContractABI, TokenContractABI };
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts
new file mode 100644
index 000000000..8f456aaf2
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/chain.ts
@@ -0,0 +1,33 @@
+import { InfuraAPIKey } from "../../../../config";
+
+const getInfuraUrlFor = (network: string, key: string) =>
+  `https://${network}.infura.io/v3/${key}`;
+
+const getRpcURL = (network: string, key: string) => {
+  return getInfuraUrlFor(network, key);
+};
+
+export const getChainRPC = (chainId: number): string => {
+  const key = InfuraAPIKey; 
+  
+  switch (chainId) {
+    case 1:
+      return getRpcURL("mainnet", key);
+    case 137:
+      return getRpcURL("polygon-mainnet", key);
+    case 10:
+      return getRpcURL("optimism-mainnet", key);
+    case 56:
+      return "https://bsc-dataseed.binance.org/";
+    case 5:
+      return getRpcURL("goerli", key);
+    case 420:
+      return getRpcURL("optimism-goerli", key);
+    case 80001:
+      return getRpcURL("polygon-mumbai", key);
+    case 97:
+      return "https://data-seed-prebsc-1-s1.binance.org:8545";
+    default:
+      return getRpcURL("mainnet", key);
+  }
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts
new file mode 100644
index 000000000..0031f06c0
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/fetch.ts
@@ -0,0 +1,114 @@
+import { ethers } from "ethers";
+import { getChainRPC } from "./chain";
+import { NFTContractABI, TokenContractABI } from "./abi";
+import { CATEGORY } from "../../types";
+
+interface ERC20InfoType {
+  symbol: string;
+  decimals: number;
+}
+
+export const tokenFetchHandler = async (
+  contract: string,
+  type: string,
+  category: string,
+  chainInfo: string,
+  setUnit: (value: React.SetStateAction<string>) => void,
+  setDecimals: (value: React.SetStateAction<number>) => void
+): Promise<[boolean, string]> => {
+  const isValid = ethers.utils.isAddress(contract);
+
+  if (type === 'GUILD') {
+    return [false, ''];
+  }
+
+  if (!isValid) {
+    if(category === CATEGORY.ERC20){
+      setUnit('TOKEN');
+    }else{
+      setUnit('NFT');
+    }
+    return [true, `${contract} is invalid invalid contract address`];
+  }
+
+  const _chainId = parseInt(chainInfo.split(':')[1]);
+
+  if (category === CATEGORY.ERC20) {
+    // erc 20 logic
+    const [isErr, tokenInfo] = await fetchERC20Info(contract, _chainId);
+    if (isErr) {
+      // handle error
+      const errMessage = `${contract} is invalid ERC20 on chain ${_chainId}`;
+      setUnit('TOKEN');
+      setDecimals(18);
+
+      return [true, errMessage];
+    } else {
+      // set the token info
+      setUnit(tokenInfo.symbol);
+      setDecimals(tokenInfo.decimals);
+
+      return [false, ''];
+    }
+  } else {
+    // erc 721 logic
+    const [isErr, tokenInfo] = await fetchERC721nfo(contract, _chainId);
+    if (isErr) {
+      // handle error
+      const errMessage = `${contract} is invalid ERC721 on chain ${_chainId}`;
+      setUnit('NFT');
+      setDecimals(18);
+      return [true, errMessage];
+    } else {
+      // set the token info
+      setUnit(tokenInfo);
+      return [false, ''];
+    }
+  }
+};
+
+
+export const fetchERC20Info = async (
+  contractAddress: string,
+  chainId: number
+): Promise<[boolean, ERC20InfoType]> => {
+  try {
+    const rpcURL = getChainRPC(chainId);
+    const provider = new ethers.providers.JsonRpcProvider(rpcURL);
+    const contract:any = new ethers.Contract(
+      contractAddress,
+      TokenContractABI,
+      provider
+    );
+
+    const [symbol, decimals] = await Promise.all([
+      contract.symbol(),
+      contract.decimals(),
+    ]);
+
+    return [false, { symbol: symbol, decimals: decimals }];
+  } catch {
+    return [true, { symbol: "", decimals: 0 }];
+  }
+};
+
+export const fetchERC721nfo = async (
+  contractAddress: string,
+  chainId: number
+): Promise<[boolean, string]> => {
+  try {
+    const rpcURL = getChainRPC(chainId);
+    const provider = new ethers.providers.JsonRpcProvider(rpcURL);
+    
+    const contract:any = new ethers.Contract(
+      contractAddress,
+      NFTContractABI,
+      provider
+    );
+
+    const name = await contract.name();
+    return [false, name];
+  } catch {
+    return [true, ""];
+  }
+};
diff --git a/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts
new file mode 100644
index 000000000..385aa3373
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/helpers/tokenHelpers/index.ts
@@ -0,0 +1,3 @@
+export * from './abi';
+export * from './fetch';
+export * from './chain';
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
index 17d0b6355..a68a86fa4 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
@@ -155,15 +155,15 @@ const Input = styled.input<IThemeProps>`
   color: ${(props) =>
     props.customStyle?.color
       ? props.customStyle.color
-      : props.theme.textColor.searchInputText};
+      : props.theme.textColor?.searchInputText};
   font-weight: ${(props) =>
     props.customStyle?.fontWeight
       ? props.customStyle.fontWeight
-      : props.theme.fontWeight.searchInputText};
+      : props.theme.fontWeight?.searchInputText};
   font-size: ${(props) =>
     props.customStyle?.fontSize
       ? props.customStyle.fontSize
-      : props.theme.fontSize.searchInputText};
+      : props.theme.fontSize?.searchInputText};
   line-height: 24px;
   &:focus {
     outline: none;
@@ -174,15 +174,15 @@ const Input = styled.input<IThemeProps>`
     color: ${(props) =>
       props.customStyle?.placeholderColor
         ? props.customStyle.placeholderColor
-        : props.theme.textColor.searchPlaceholderText};
+        : props.theme.textColor?.searchPlaceholderText};
     font-weight: ${(props) =>
       props.customStyle?.fontWeight
         ? props.customStyle.fontWeight
-        : props.theme.fontWeight.searchInputText};
+        : props.theme.fontWeight?.searchInputText};
     font-size: ${(props) =>
       props.customStyle?.fontSize
         ? props.customStyle.fontSize
-        : props.theme.fontSize.searchInputText};
+        : props.theme.fontSize?.searchInputText};
   }
 `;
 
diff --git a/packages/uiweb/src/lib/components/chat/reusables/DropDown.tsx b/packages/uiweb/src/lib/components/chat/reusables/DropDown.tsx
index 39ebae3bc..b2ad919d8 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/DropDown.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/DropDown.tsx
@@ -194,6 +194,7 @@ const DesktopAddress = styled(SpanAddress)`
 const DropdownItemContainer = styled(Section) <{ hoverBGColor?: string }>`
   justify-content: flex-start;
   flex-wrap: nowrap;
+  white-space: nowrap;
   margin: 1px 0;
 // width:100%;
   padding: 2px 8px;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
index 247510ce9..f5fe385a4 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/DropDownInput.tsx
@@ -13,6 +13,7 @@ export interface IDropDownInputProps {
   selectedValue: number;
   labelName?: string;
   dropdownValues: DropdownValueType[];
+  error?:boolean;
 }
 
 export const DropDownInput = (props: IDropDownInputProps) => {
@@ -20,15 +21,13 @@ export const DropDownInput = (props: IDropDownInputProps) => {
   const [showDropdown, setshowDropdown] = useState<boolean>(false);
   const dropdownRef = useRef<any>(null);
 
-  const { selectedValue, dropdownValues, labelName } = props;
+  const { selectedValue, dropdownValues, labelName ,error} = props;
 
   // useClickAway(dropdownRef, ()=> setshowDropdown(!showDropdown));
 
   const closeDropdown = () => {
     setshowDropdown(!showDropdown);
   };
-  console.log(dropdownValues);
-  console.log(selectedValue);
   return (
     <ThemeProvider theme={theme}>
       <DropdownContainer >
@@ -36,7 +35,7 @@ export const DropDownInput = (props: IDropDownInputProps) => {
           <label>{props.labelName}</label>
         </LabelContainer>
     
-            <DropdownDiv ref={dropdownRef} onClick={closeDropdown}>
+            <DropdownDiv ref={dropdownRef} onClick={closeDropdown} error= {error || false} >
               <Span margin="0 7px 0 0">
                 {dropdownValues[selectedValue].title}{' '}
               </Span>
@@ -78,20 +77,20 @@ const LabelContainer = styled.div`
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const DropdownDiv = styled(Section)<IChatTheme>`
+const DropdownDiv = styled(Section)<IChatTheme & {error:boolean}>`
   padding: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
   font-family: ${(props) => props.theme.fontFamily};
   font-size: 16px;
   span {
-    text-wrap: nowrap;
+    white-space: nowrap;
   }
   font-weight: 500;
 `;
@@ -103,9 +102,9 @@ const ArrowImage = styled(Image)<{ setPosition: boolean }>`
 
 const DropdownListContainer = styled(Section)<IChatTheme>`
   position: absolute;
-  width: 100%;
+  width: 96%;
   top:30%;
-  right:-9px;
+  right:0;
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
   padding: 8px;
   z-index: 100;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/InfoContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/InfoContainer.tsx
new file mode 100644
index 000000000..91d75e582
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/reusables/InfoContainer.tsx
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import { Section, Span } from '../../reusables';
+import { SpamIcon } from '../../../icons/SpamIcon';
+import { ThemeContext } from '../theme/ThemeProvider';
+import React from 'react';
+import styled from 'styled-components';
+
+interface InfoContainerProps {
+  label: string;
+  cta?: string;
+}
+
+export const InfoContainer = ({ label, cta }: InfoContainerProps) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <Section cursor="pointer">
+      <Link href={cta} target={cta ? '_target' : ''}>
+        <SpamIcon />
+        {label && (
+          <Span
+            color={theme.textColor?.modalSubHeadingText}
+            fontSize="15px"
+            cursor="pointer"
+          >
+            {label}
+          </Span>
+        )}
+      </Link>
+    </Section>
+  );
+};
+
+const Link = styled.a`
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx b/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx
index f450ce552..06cfecce2 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx
@@ -13,17 +13,21 @@ import { IChatTheme } from '../theme';
 import { Section, Span, Image } from '../../reusables';
 import { BackIcon } from '../../../icons/Back';
 import CloseIcon from '../../../icons/close.svg';
+import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes';
+import { device } from '../../../config';
 
 interface IModalProps {
   width?: string;
   clickawayClose?: () => void;
   children: any;
   theme?: IChatTheme;
+  modalBackground?: ModalBackgroundType;
+  modalPositionType?: ModalPositionType;
 }
 
 interface IModalHeader {
   handlePrevious?: () => void;
-  handleClose: () => void;
+  handleClose?: () => void;
   title: string;
 }
 
@@ -48,10 +52,10 @@ const ClickawayCloseModal = ({
   );
 };
 
-export const Modal = ({ clickawayClose, children, width }: IModalProps) => {
+export const Modal = ({ clickawayClose, children, width,modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,modalPositionType = MODAL_POSITION_TYPE.GLOBAL }: IModalProps) => {
   const theme = useContext(ThemeContext);
   return (
-    <ModalOverlay theme={theme}>
+    <ModalOverlay theme={theme} modalBackground={modalBackground} modalPositionType={modalPositionType}>
       {clickawayClose ? (
         <ClickawayCloseModal clickawayClose={clickawayClose} width={width}>
           {children}
@@ -86,30 +90,31 @@ export const ModalHeader = ({
       >
         {title}
       </Span>
-      <Image
+      {handleClose && ( <Image
         src={CloseIcon}
         height="24px"
         maxHeight="24px"
         width={'auto'}
         onClick={() => handleClose()}
         cursor="pointer"
-      />{' '}
+      />)}{' '}
     </Section>
   );
 };
 /* styling */
 
 const ModalOverlay = styled.div<IModalProps>`
-  position: fixed;
+  position:${(props) =>  props.modalPositionType === MODAL_POSITION_TYPE.GLOBAL? 'fixed':'absolute'};
   top: 0;
   left: 0;
-  right: 0;
+  right: 0;  
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.4); /* Black with 40% opacity */
+  backdrop-filter:${(props) =>  props.modalBackground === MODAL_BACKGROUND_TYPE.BLUR? 'blur(3px)':'none'};
+  background-color: ${(props) => props.modalBackground === MODAL_BACKGROUND_TYPE.OVERLAY? 'rgba(0, 0, 0, 0.5)':' transparent'}; /* Black with 40% opacity */
   display: flex;
-  color: ${(props) => props.theme.textColor.modalHeadingText ?? '#000'};
+  color: ${(props) => props.theme.textColor!.modalHeadingText ?? '#000'};
   justify-content: center;
   align-items: center;
   z-index: 2000;
@@ -124,15 +129,18 @@ const ModalParent = styled.div<IModalProps>`
   flex-direction: column;
   align-items: center;
   padding: 24px 20px;
-
-  background: ${(props) => props.theme.backgroundColor.modalBackground};
-  border-radius: ${(props) => props.theme.borderRadius.modal};
+  max-height: 75vh;
+  // @media ${device.mobileL} {
+  //   max-height: 70vh;
+  // }
+  background: ${(props) => props.theme.backgroundColor?.modalBackground};
+  border-radius: ${(props) => props.theme.borderRadius?.modal};
 
   width: ${(props) => (props.width ? props.width : 'auto')};
   margin: auto !important;
 
   @media (max-width: 425px) {
     min-width: 300px;
-    max-width: 300px;
+    // max-width: 306px;
   }
 `;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx b/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx
index 2ba96c66d..5556dbbec 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/NewToast.tsx
@@ -72,7 +72,6 @@ const useToast = (
 
   const showLoaderToast: ShowLoaderToastType = ({ loaderMessage }) => {
     isLoaderToastShown = true;
-    console.log("in here")
     return (toastId.current = toast(
       <ThemeProvider theme={theme}>
         <LoaderToast
@@ -101,7 +100,6 @@ const useToast = (
   };
 
   const showMessageToast: ShowMessageToastType = ({ toastTitle, toastMessage, toastType, getToastIcon }) => {
-    console.log('show message toast')
     const toastUI = (
       <Toast>
         <ToastIcon>{getToastIcon ? getToastIcon(30) : ''}</ToastIcon>
diff --git a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
index cdcdc3f53..a0d8d2a42 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
@@ -15,6 +15,7 @@ interface OptionButtonsProps {
   totalWidth?:string;
   selectedValue: string;
   handleClick: (el:string)=>void;
+  error?:boolean;
 }
 
 interface ButtonSectionProps {
@@ -23,6 +24,7 @@ interface ButtonSectionProps {
   borderColor: string;
   totalWidth:string;
   noOfOptions:number;
+  error:boolean;
   // background:string;
 }
 
@@ -46,6 +48,8 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
         color={theme.textColor?.modalSubHeadingText}
         fontWeight="400"
         fontSize="12px"
+        width='132px'
+        lineHeight='130%'
       >
         {subHeading}
       </Span>
@@ -54,7 +58,7 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
 };
 
 
-export const OptionButtons = ({ options,selectedValue,handleClick,  totalWidth = '400px',}: OptionButtonsProps) => {
+ const OptionButtons = ({ options,selectedValue,handleClick,  totalWidth = '400px',error}: OptionButtonsProps) => {
   const theme = useContext(ThemeContext);
 
 const getBorderWidth = (index:number) =>{
@@ -84,6 +88,7 @@ const getBorderRadius = (index:number) =>{
             borderRadius={
               getBorderRadius(index)
             }
+            error={error || false}
             borderColor={theme.border!.modalInnerComponents!}
             borderWidth={getBorderWidth(index)}
             background={selectedValue === option.value ? theme.backgroundColor?.modalHoverBackground : 'none'}
@@ -114,6 +119,8 @@ const ButtonSection = styled(Section)<ButtonSectionProps>`
   }
   padding: 10px;
   border: ${(props) => props.borderColor};
+  border: ${(props) => props.error?'  #ED5858':props.borderColor};
+
   // background: ${(props) => props.background};
   border-width: ${(props) => props.borderWidth};
   border-style: solid;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
index 70bf4843b..dcd434a26 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -15,7 +15,7 @@ type ProfileProps = {
   export const ProfileContainer = ({ theme, member, customStyle }: ProfileProps) => {
    
     return (
-      <Section justifyContent="flex-start" position="relative" zIndex="2">
+      <Section justifyContent="flex-start" >
         <Section
           height={customStyle?.imgHeight ?? '48px'}
           maxWidth="48px"
@@ -23,7 +23,7 @@ type ProfileProps = {
           overflow="hidden"
           margin="0px 12px 0px 0px"
           position="relative"
-          zIndex="2"
+   
         >
           <Image
             height={customStyle?.imgHeight ?? '48px'}
@@ -38,7 +38,7 @@ type ProfileProps = {
           fontWeight={customStyle?.fontWeight ?? '400'}
           color={theme.textColor?.modalSubHeadingText}
           position="relative"
-          zIndex="2"
+ 
         >
           {member.wallet}
         </Span>
diff --git a/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
index 727a933fe..d902f25a6 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/QuantityInput.tsx
@@ -7,6 +7,7 @@ import { DropdownValueType } from './DropDown';
 import { Div, Section, Span } from '../../reusables';
 import { DropDownInput } from './DropDownInput';
 import { device } from '../../../config';
+import { shortenText } from '../../../helpers';
 
 export type InputType = { value: number; range: number };
 export interface IQuantityInputProps {
@@ -16,6 +17,7 @@ export interface IQuantityInputProps {
   unit: string;
   onInputChange: any;
   dropDownValues: DropdownValueType[];
+  error?:boolean;
 }
 
 export const QuantityInput = (props: IQuantityInputProps) => {
@@ -32,7 +34,7 @@ export const QuantityInput = (props: IQuantityInputProps) => {
           <label>{props.labelName}</label>
         </LabelContainer>
         <Section gap="4px" alignItems="center" >
-          <Section  zIndex='500'>
+          <Section  zIndex='500' >
           <DropDownInput
             selectedValue={props.inputValue.range}
             dropdownValues={props.dropDownValues}
@@ -41,6 +43,7 @@ export const QuantityInput = (props: IQuantityInputProps) => {
           <Section alignItems="baseline" width='fit-content'>
             <Input
               type="number"
+              error={props.error ||false}
               theme={theme}
               value={props.inputValue.value}
               onChange={handleChange}
@@ -49,13 +52,14 @@ export const QuantityInput = (props: IQuantityInputProps) => {
             <Unit
               alignSelf='auto'
               background={theme.backgroundColor?.modalHoverBackground}
-              width='fit-content'
+              width='40%'
               height='fit-content'
+              error={props.error ||false}
              
             >
-              <Span>
-              {props.unit}
-              </Span>
+              {/* <Span> */}
+              {shortenText(props.unit,15)}
+              {/* </Span> */}
             </Unit>
           </Section>
         </Section>
@@ -81,13 +85,13 @@ const LabelContainer = styled.div`
   font-size: 16px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
-const Input = styled.input<IChatTheme>`
+const Input = styled.input<IChatTheme &{error:boolean}>`
   padding: 16px;
   margin-top: 8px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 
   background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-width: 1px 0px 1px 1px;
   border-radius: 12px 0 0 12px;
   font-family: ${(props) => props.theme.fontFamily};
@@ -96,22 +100,23 @@ const Input = styled.input<IChatTheme>`
   font-weight: 500;
 `;
 
-const Unit = styled(Section)<IChatTheme>`
-span{
+const Unit = styled(Section)<IChatTheme&{error:boolean}>`
+
   font-size:14px;
-  font-weight:700;
-}
+  font-weight:600;
+  white-space: nowrap;
+
 border-radius:0 12px 12px 0;
 
-padding:17.2px;
-border: ${(props) => props.theme.border.modalInnerComponents};
+padding:18px 17.2px 16.5px 17.2px;
+border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
 @media ${device.mobileL} {
 
-  padding:19.5px 5px;
-  span{
+  padding:21px 17.2px 17.5px 17.2px;
+  
     font-size: 10px;
     font-weight:400
-  }
+  
 }
 
 `;
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
index 96385f883..37373bdee 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
@@ -9,6 +9,7 @@ export interface ITextAreaProps {
     labelName?: string;
     inputValue: string;
     onInputChange: any;
+    error?:boolean;
 
 }
 
@@ -31,7 +32,7 @@ export const TextArea = (props: ITextAreaProps) => {
             <label>{props.labelName}</label>
             <CharCounter theme={theme}>{props.inputValue.length} / {props.charCount}</CharCounter>
         </LabelContainer>
-        <Input  theme={theme} value={props.inputValue} onChange={handleChange} />
+        <Input error={props.error || false} theme={theme} value={props.inputValue} onChange={handleChange} />
         </InputContainer>
     </ThemeProvider>
   )
@@ -55,7 +56,7 @@ const LabelContainer = styled.div`
     color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const Input = styled.textarea<IChatTheme>`
+const Input = styled.textarea<IChatTheme & {error:boolean}>`
     padding: 16px;
     margin-top: 8px;
 
@@ -64,7 +65,7 @@ const Input = styled.textarea<IChatTheme>`
     color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 
     background: ${(props) => props.theme.backgroundColor.modalInputBackground};
-    border: ${(props) => props.theme.border.modalInnerComponents};
+    border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
     border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
     font-family: ${(props) => props.theme.fontFamily};
diff --git a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
index 1d5c54995..8543214f0 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/TextInput.tsx
@@ -12,6 +12,7 @@ export interface ITextInputProps {
   onInputChange?: any;
   disabled?: boolean;
   customStyle?: CustomStyleParamsType;
+  error?:boolean;
 }
 type CustomStyleParamsType = {
   background?: string;
@@ -48,6 +49,7 @@ export const TextInput = (props: ITextInputProps) => {
           customStyle={props.customStyle!}
           disabled={!!props.disabled}
           theme={theme}
+          error={props.error || false}
           value={props.inputValue}
           onChange={handleChange}
           placeholder={props.placeholder}
@@ -75,7 +77,7 @@ const LabelContainer = styled.div`
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
 `;
 
-const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
+const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType,error:boolean}>`
   padding: 16px;
   margin-top: 8px;
   color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
@@ -83,7 +85,7 @@ const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
     props.customStyle?.background
       ? props.customStyle.background
       : props.theme.backgroundColor.modalInputBackground};
-  border: ${(props) => props.theme.border.modalInnerComponents};
+  border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
   border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
 
   font-family: ${(props) => props.theme.fontFamily};
diff --git a/packages/uiweb/src/lib/components/chat/reusables/index.ts b/packages/uiweb/src/lib/components/chat/reusables/index.ts
index e8f20ba6d..0e48c3cc1 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/index.ts
+++ b/packages/uiweb/src/lib/components/chat/reusables/index.ts
@@ -11,4 +11,5 @@ export * from './OptionButtons';
 export * from './Button';
 export * from './QuantityInput';
 export * from './OptionButtons';
-export * from './Checkbox';
\ No newline at end of file
+export * from './Checkbox';
+export * from './InfoContainer';
diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
index de2b3b886..e703dbc29 100644
--- a/packages/uiweb/src/lib/components/chat/theme/index.ts
+++ b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -36,6 +36,7 @@ interface IBackgroundColor {
   toastSuccessBackground?: string;
   toastErrorBackground?: string;
   toastShadowBackground?: string;
+  criteriaLabelBackground?:string;
 }
 
 interface ITextColor {
@@ -138,6 +139,7 @@ export const lightChatTheme: IChatTheme = {
   toastErrorBackground:
     'linear-gradient(90.15deg, #FF2070 -125.65%, #FF2D79 -125.63%, #FFF9FB 42.81%)',
   toastShadowBackground: '#ccc',
+  criteriaLabelBackground: '#657795'
   },
 
   fontSize: {
@@ -226,6 +228,7 @@ export const darkChatTheme: IChatTheme = {
     encryptionMessageBackground: 'rgb(64, 70, 80);',
     buttonBackground: 'rgb(202, 89, 155)',
     modalBackground:'rgb(47, 49, 55)',
+    criteriaLabelBackground: 'rgb(47, 49, 55)',
     modalInputBackground:'transparent',
     modalHoverBackground:'rgb(64, 70, 80)',
     buttonDisableBackground:'#787E99',
diff --git a/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts b/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
index 07344afbf..4a91e8ec4 100644
--- a/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
+++ b/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
@@ -5,6 +5,7 @@ export interface PushData {
   inviterRoles?: string[];
   comparison?:string;
   url?: string;
+  token?:string;
 }
 
 export interface GuildData {
@@ -62,7 +63,7 @@ export interface CriteriaStateType {
   selectedRules: Rule[];
   setSelectedRule: React.Dispatch<React.SetStateAction<Rule[]>>;
   addNewCondtion: () => void;
-  addNewRule: (newRule: Rule) => void;
+  addNewRule: (newRule: Rule) => boolean;
   deleteRule: (idx: number) => void;
   deleteEntryOptionsDataArray: (idx: number) => void;
   selectEntryOptionsDataArrayForUpdate: (idx: number) => void;
@@ -73,3 +74,19 @@ export interface CriteriaStateType {
   setUpdateCriteriaIdx: React.Dispatch<React.SetStateAction<number>>;
   isUpdateCriteriaEnabled: () => boolean;
 }
+
+
+export type CriteriaValidationErrorType = {
+  //guild error
+  guildId?:string,
+  guildComparison?:string;
+  guildRole?:string;
+  groupName?:string;
+  groupDescription?:string;
+
+  //token error
+  tokenError?:string
+  tokenAmount?:string;
+  //custom endpoint errors
+  url?:string;
+}
diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx
index 8ce4dd911..5363d3551 100644
--- a/packages/uiweb/src/lib/components/notification/index.tsx
+++ b/packages/uiweb/src/lib/components/notification/index.tsx
@@ -187,15 +187,15 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   return (
     <Container
       timestamp={timeStamp}
-      theme={theme}
+ 
       offsetWidth={offsetWidth}
       ref={divRef}
       themeObject={themeObject!}
     >
       {/* header that only pops up on small devices */}
-      <MobileHeader theme={theme} themeObject={themeObject!}>
-        <HeaderButton theme={theme} themeObject={themeObject!}>
-          <ImageContainer theme={theme}  offsetWidth={offsetWidth}>
+      <MobileHeader themeObject={themeObject!}>
+        <HeaderButton themeObject={themeObject!}>
+          <ImageContainer  offsetWidth={offsetWidth} theme={theme}>
             <IPFSIcon icon={icon} />
           </ImageContainer>
           <ChannelName onClick={goToURL}>{app}</ChannelName>
@@ -209,14 +209,15 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
       {/* header that only pops up on small devices */}
 
       {/* content of the component */}
-      <ContentSection themeObject={themeObject!}  offsetWidth={offsetWidth} onClick={isCtaURLValid ? gotToCTA : undefined} theme={theme} cta={isCtaURLValid}>
+      <ContentSection themeObject={themeObject!}  offsetWidth={offsetWidth} onClick={isCtaURLValid ? gotToCTA : undefined} cta={isCtaURLValid}>
         {/* section for media content */}
         {notifImage &&
           // if its an image then render this
           (!MediaHelper.isMediaSupportedVideo(notifImage) ? (
             <MobileImage
+            theme={theme}
             offsetWidth={offsetWidth}
-              theme={theme}
+    
               style={{ cursor: 'pointer' }}
               onClick={() => setImageOverlay(notifImage || '')}
             >
@@ -225,7 +226,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           ) : // if its a youtube url, RENDER THIS
           MediaHelper.isMediaYoutube(notifImage) ? (
             <MobileImage 
-            offsetWidth={offsetWidth} theme={theme}>
+            offsetWidth={offsetWidth} >
               <iframe
                 id="ytplayer"
                 width="640"
@@ -237,7 +238,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
             </MobileImage>
           ) : (
             // if its aN MP4 url, RENDER THIS
-            <MobileImage theme={theme}  offsetWidth={offsetWidth}>
+            <MobileImage offsetWidth={offsetWidth}>
               <video width="360" height="100%" controls>
                 <source src={notifImage} type="video/mp4" />
                 Your browser does not support the video tag.
@@ -252,7 +253,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           themeObject={themeObject!}
             cta={isCtaURLValid}
             offsetWidth={offsetWidth}
-            theme={theme}
+       
           >
             <ChannelTitleText themeObject={themeObject!}>
               {notifTitle}
@@ -270,7 +271,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
             }
           </ChannelTitle>
           <ChannelDesc themeObject={themeObject!}>
-            <ChannelDescLabel  themeObject={themeObject!} cta={isCtaURLValid} theme={theme} >
+            <ChannelDescLabel  themeObject={themeObject!} cta={isCtaURLValid} >
               <ParseMarkdownText text={notifBody} />
             </ChannelDescLabel>
           </ChannelDesc>
@@ -312,7 +313,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           ) : null}
 
           {timeStamp ? (
-            <TimestampLabel themeObject={themeObject!} theme={theme}>
+            <TimestampLabel themeObject={themeObject!} >
               {convertTimeStamp(timeStamp)}
             </TimestampLabel>
           ) : null}
@@ -416,7 +417,7 @@ const ChainIconSVG = styled.div<OffsetWidthType>`
  
 `;
 
-const MobileImage = styled.div<OffsetWidthType>`
+const MobileImage = styled.div<OffsetWidthType & {theme?:string}>`
   overflow:hidden;
   img,
   iframe,
@@ -431,11 +432,11 @@ const MobileImage = styled.div<OffsetWidthType>`
 
 
 
-  ${(props: any) =>
+  ${(props: OffsetWidthType & {theme?:string}) =>
     props.offsetWidth>461 &&
     css`
     @media (min-width: ${SM_BREAKPOINT}) {
-      border: 1px solid ${props => props.theme === 'light' ? '#ededed' : '#444'};
+      border: 1px solid ${props => (props.theme as unknown as string)  === 'light' ? '#ededed' : '#444'};
       border-radius: 10px;
       min-width: 220px;
       width: 220px;
@@ -477,7 +478,7 @@ const MobileImage = styled.div<OffsetWidthType>`
   
 `;
 
-const ImageContainer = styled.span<OffsetWidthType>`
+const ImageContainer = styled.span<OffsetWidthType & {theme?:string}>`
   background: ${(props) => (props.theme === "light" ? "#ededed" : "#444")};
   display: inline-block;
   margin-right: 10px;
diff --git a/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts b/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts
index ef2bb99e7..7b6136be3 100644
--- a/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts
+++ b/packages/uiweb/src/lib/components/parsetext/defaultPatterns.ts
@@ -1,233 +1,374 @@
 /**
  * This file contains the default styles for the patters to be used in the application
-*/
-import type {CustomParseShape} from "./customParser.types";
+ */
+import type { CustomParseShape } from './customParser.types';
 
-function renderStyles(matchingString:string) {
-    // matches => ["[@michel:5455345]", "@michel", "5455345"]
-    const pattern = /\[([^:]+):([^\]]+)\]/i;
-    const match = matchingString.match(pattern);
+function renderStyles(matchingString: string) {
+  // matches => ["[@michel:5455345]", "@michel", "5455345"]
+  const pattern = /\[([^:]+):([^\]]+)\]/i;
+  const match = matchingString.match(pattern);
 
-    return `${match?match[2]:""}`;
+  return `${match ? match[2] : ''}`;
+}
+
+function newLinestyles(matchingString: string) {
+  const pattern = /\\n/g;
+  const match = matchingString.match(pattern);
+  if (match?.includes('\\n')) {
+    const replacedString = matchingString.replace('\\n', '<br/>');
+    return `<div>${replacedString}</div>`;
+  } else {
+    return `<div>${matchingString}</div>`;
+  }
+}
+
+function renderTextStyles(matchingString: string) {
+  const pattern =
+    /<PUSHText color=["']?(#[0-9A-Fa-f]{3,6}|[a-zA-Z]+)["']?>(.*?)<\/PUSHText>/i;
+  const match = matchingString.match(pattern);
+
+  if (match) {
+    const colorName = match[1].toLowerCase();
+    let color;
+    switch (colorName) {
+      case 'primary':
+        color = COLORS.PRIMARY;
+        break;
+      case 'secondary':
+        color = COLORS.GRADIENT_SECONDARY;
+        break;
+      case 'white':
+        color = COLORS.WHITE;
+        break;
+      // can add more custom color names if needed, couldn't find the tertiary color
+      default:
+        color = colorName;
+    }
+    let textContent = match[2];
+    if (textContent.includes('\\n')) {
+      textContent = match[2].replace('\\n', '<br/>');
+    }
+    return `<span style="color: ${color}">${textContent}</span>`;
+  }
+
+  return matchingString;
+}
+
+function renderLinkWithColor(matchingString: string) {
+  const pattern =
+    /<PUSHText color=["']?(#[0-9A-Fa-f]{3,6}|[a-zA-Z]+)["']?\s+link=["'](https?:\/\/[^"']+)["']>(.*?)<\/PUSHText>/i;
+    const linkPattern = /\[([^\]]+)]\((https?:\/\/[^)]+)/;
+  const match = matchingString.match(pattern);
+  const markdownLinkPattern = matchingString.match(linkPattern);
+
+  if (match) {
+    const colorName = match[1].toLowerCase();
+    let color;
+    // Map custom color names to specific values
+    switch (colorName) {
+      case 'primary':
+        color = COLORS.PRIMARY;
+        break;
+      case 'secondary':
+        color = COLORS.GRADIENT_SECONDARY;
+        break;
+      case 'tertiary':
+        color = COLORS.GRADIENT_THIRD;
+        break;
+      case 'white':
+        color = COLORS.WHITE;
+        break;
+      // Add more custom color names if needed
+      default:
+        color = colorName;
+    }
+    const link = match[2];
+    let textContent;
+    if (match[3].includes('\\n')) {
+      textContent = match[3].replace('\\n', '<br/>');
+    } else {
+      textContent = match[3];
+    }
+    return `<a href="${link}" target="_blank" style="color: ${color}">${textContent}</a>`;
+  } else if (markdownLinkPattern) {
+    const linkText = markdownLinkPattern[1];
+    const linkUrl = markdownLinkPattern[2];
+    return `<a href="${linkUrl}" target="_blank">${linkText}</a>`;
+  }
+
+  return matchingString;
+}
+
+function convertEpochToHumanReadable(matchingString: string) {
+  const match = matchingString.match(/\[ts: (\d+)\]/);
+  if (match) {
+    const epochTimestamp = parseInt(match[1], 10); // Extracting the epoch timestamp
+    const humanReadableDate = new Date(epochTimestamp * 1000).toLocaleString();
+    return humanReadableDate;
+  }
+  return matchingString;
 }
 
 // -------- Define the required colors
 const COLORS = {
-    PRIMARY: 'rgba(27.0, 150.0, 227.0, 1.0)',
+  PRIMARY: 'rgba(27.0, 150.0, 227.0, 1.0)',
 
-    LINKS: 'rgba(20.0, 126.0, 251.0, 1.0)',
+  LINKS: 'rgba(20.0, 126.0, 251.0, 1.0)',
 
-    GRADIENT_PRIMARY: 'rgba(226.0, 8.0, 128.0, 1.0)',
-    GRADIENT_SECONDARY: 'rgba(53.0, 197.0, 243.0, 1.0)',
-    GRADIENT_THIRD: 'rgba(103.0, 76.0, 159.0, 1.0)',
+  GRADIENT_PRIMARY: 'rgba(226.0, 8.0, 128.0, 1.0)',
+  GRADIENT_SECONDARY: 'rgba(53.0, 197.0, 243.0, 1.0)',
+  GRADIENT_THIRD: 'rgba(103.0, 76.0, 159.0, 1.0)',
 
-    TRANSPARENT: 'transparent',
+  TRANSPARENT: 'transparent',
 
-    WHITE: 'rgba(255.0, 255.0, 255.0, 1.0)',
-    DARK_WHITE: 'rgba(255.0, 255.0, 255.0, 0.75)',
-    MID_WHITE: 'rgba(255.0, 255.0, 255.0, 0.5)',
-    LIGHT_WHITE: 'rgba(255.0, 255.0, 255.0, 0.25)',
+  WHITE: 'rgba(255.0, 255.0, 255.0, 1.0)',
+  DARK_WHITE: 'rgba(255.0, 255.0, 255.0, 0.75)',
+  MID_WHITE: 'rgba(255.0, 255.0, 255.0, 0.5)',
+  LIGHT_WHITE: 'rgba(255.0, 255.0, 255.0, 0.25)',
 
-    SLIGHTER_GRAY: 'rgba(250.0, 250.0, 250.0, 1)',
-    SLIGHT_GRAY: 'rgba(231.0, 231.0, 231.0, 1)',
-    LIGHT_GRAY: 'rgba(225.0, 225.0, 225.0, 1)',
-    MID_GRAY: 'rgba(200.0, 200.0, 200.0, 1)',
-    DARK_GRAY: 'rgba(160.0, 160.0, 160.0, 1)',
-    DARKER_GRAY: 'rgba(100.0, 100.0, 100.0, 1)',
+  SLIGHTER_GRAY: 'rgba(250.0, 250.0, 250.0, 1)',
+  SLIGHT_GRAY: 'rgba(231.0, 231.0, 231.0, 1)',
+  LIGHT_GRAY: 'rgba(225.0, 225.0, 225.0, 1)',
+  MID_GRAY: 'rgba(200.0, 200.0, 200.0, 1)',
+  DARK_GRAY: 'rgba(160.0, 160.0, 160.0, 1)',
+  DARKER_GRAY: 'rgba(100.0, 100.0, 100.0, 1)',
 
-    LIGHT_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.1)',
-    SEMI_MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.25)',
-    MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.5)',
-    DARK_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.75)',
-    BLACK: 'rgba(0.0, 0.0, 0.0, 1.0)',
+  LIGHT_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.1)',
+  SEMI_MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.25)',
+  MID_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.5)',
+  DARK_BLACK_TRANS: 'rgba(0.0, 0.0, 0.0, 0.75)',
+  BLACK: 'rgba(0.0, 0.0, 0.0, 1.0)',
 
-    CONFIRM: 'rgba(34.0, 139.0, 34.0, 1.0)',
-    WARNING: 'rgba(255.0, 153.0, 0.0, 1.0)',
+  CONFIRM: 'rgba(34.0, 139.0, 34.0, 1.0)',
+  WARNING: 'rgba(255.0, 153.0, 0.0, 1.0)',
 
-    SUBLIME_RED: 'rgba(237.0, 59.0, 72.0, 1.0)',
-    BADGE_RED: 'rgba(208.0, 44.0, 30.0, 1.0)',
-    LIGHT_MAROON: 'rgba(159.0, 0.0, 0.0, 1.0)',
-    LIGHTER_MAROON: 'rgba(129.0, 0.0, 0.0, 1.0)',
-}
+  SUBLIME_RED: 'rgba(237.0, 59.0, 72.0, 1.0)',
+  BADGE_RED: 'rgba(208.0, 44.0, 30.0, 1.0)',
+  LIGHT_MAROON: 'rgba(159.0, 0.0, 0.0, 1.0)',
+  LIGHTER_MAROON: 'rgba(129.0, 0.0, 0.0, 1.0)',
+};
 
 // -------- Define the default styles for the framework
 const styles = {
-    // Styling
-      container: {
-      },
-      name: {
-        color: COLORS.SUBLIME_RED
-      },
-      username: {
-        color: COLORS.GRADIENT_SECONDARY
-      },
-      text: {
-        color: COLORS.BLACK
-      },
-      primary: {
-        color: COLORS.GRADIENT_PRIMARY,
-      },
-      secondary: {
-        color: COLORS.GRADIENT_SECONDARY,
-      },
-      third: {
-        color: COLORS.GRADIENT_THIRD,
-      },
-      error: {
-        color: COLORS.SUBLIME_RED,
-      },
-      white: {
-        color: COLORS.WHITE,
-      },
-      midgray: {
-        color: COLORS.MID_GRAY,
-      },
-      darkgray: {
-        color: COLORS.DARK_GRAY,
-      },
-      darkergray: {
-        color: COLORS.DARKER_GRAY,
-      },
-      link: {
-        color: COLORS.GRADIENT_PRIMARY,
-      },
-      underline: {
-        textDecorationLine: 'underline',
-      },
-      bold: {
-        fontWeight: 'bold'
-      },
-      italics: {
-        fontStyle: 'italic'
-      },
-      pointer: {
-        cursor: 'pointer'
-      }
-    }
+  // Styling
+  container: {},
+  name: {
+    color: COLORS.SUBLIME_RED,
+  },
+  username: {
+    color: COLORS.GRADIENT_SECONDARY,
+  },
+  text: {
+    color: COLORS.BLACK,
+  },
+  primary: {
+    color: COLORS.GRADIENT_PRIMARY,
+  },
+  secondary: {
+    color: COLORS.GRADIENT_SECONDARY,
+  },
+  third: {
+    color: COLORS.GRADIENT_THIRD,
+  },
+  error: {
+    color: COLORS.SUBLIME_RED,
+  },
+  white: {
+    color: COLORS.WHITE,
+  },
+  midgray: {
+    color: COLORS.MID_GRAY,
+  },
+  darkgray: {
+    color: COLORS.DARK_GRAY,
+  },
+  darkergray: {
+    color: COLORS.DARKER_GRAY,
+  },
+  link: {
+    color: COLORS.GRADIENT_PRIMARY,
+  },
+  underline: {
+    textDecorationLine: 'underline',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  italics: {
+    fontStyle: 'italic',
+  },
+  pointer: {
+    cursor: 'pointer',
+  },
+};
 
 // -------- Define the default patterns for the framework
-const DEFAULT_PATTERNS:CustomParseShape[] = [
-      {
-        pattern: /\[(u):([^\]]+)\]/i, // url
-        style: {
-            ...styles.primary,
-            ...styles.bold,
-            ...styles.italics, 
-            ...styles.underline,
-            ...styles.pointer
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(ub):([^\]]+)\]/i, // url
-        style: {
-            ...styles.secondary,
-            ...styles.bold,
-            ...styles.italics,
-            ...styles.underline,
-            ...styles.pointer
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(ut):([^\]]+)\]/i, // url
-        style: {
-            ...styles.third,
-            ...styles.bold,
-            ...styles.italics,
-            ...styles.underline,
-            ...styles.pointer
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(up):([^\]]+)\]/i, // url
-        style: {
-            ...styles.primary,
-            ...styles.italics,
-            ...styles.underline,
-            ...styles.pointer
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(d):([^\]]+)\]/i, // default or primary gradient color
-        style: {
-            ...styles.primary,
-            ...styles.bold
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(s):([^\]]+)\]/i, // secondary gradient color
-        style: {
-            ...styles.secondary,
-            ...styles.bold
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(t):([^\]]+)\]/i, // third gradient color
-        style: {
-            ...styles.third,
-            ...styles.bold
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(e):([^\]]+)\]/i, // error
-        style: {
-            ...styles.error,
-            ...styles.bold
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(b):([^\]]+)\]/i, // bold
-        style: styles.bold,
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(i):([^\]]+)\]/i, // italics
-        style: styles.italics,
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(bi):([^\]]+)\]/i, // bolditalics
-        style: {
-            ...styles.bold,
-            ...styles.italics
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(w):([^\]]+)\]/i, // white
-        style: styles.white,
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(wb):([^\]]+)\]/i, // whitebold
-        style: {
-            ...styles.white,
-            ...styles.bold
-        },
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(mg):([^\]]+)\]/i, // midgray
-        style: styles.midgray,
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(dg):([^\]]+)\]/i, // darkgray
-        style: styles.darkgray,
-        renderText: renderStyles
-      },
-      {
-        pattern: /\[(ddg):([^\]]+)\]/i, // darker gray
-        style: styles.darkergray,
-        renderText: renderStyles
-      }
+const DEFAULT_PATTERNS: CustomParseShape[] = [
+  {
+    pattern: /\[([^\]]+)]\((https?:\/\/[^)]+)\)/g,
+    style: {},
+    renderText: renderLinkWithColor,
+  },
+  {
+    pattern: /\[(u):([^\]]+)\]/i, // url
+    style: {
+      ...styles.primary,
+      ...styles.bold,
+      ...styles.italics,
+      ...styles.underline,
+      ...styles.pointer,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(ub):([^\]]+)\]/i, // url
+    style: {
+      ...styles.secondary,
+      ...styles.bold,
+      ...styles.italics,
+      ...styles.underline,
+      ...styles.pointer,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(ut):([^\]]+)\]/i, // url
+    style: {
+      ...styles.third,
+      ...styles.bold,
+      ...styles.italics,
+      ...styles.underline,
+      ...styles.pointer,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern:
+      /<PUSHText color=["']?(#[0-9A-Fa-f]{3,6}|[a-zA-Z]+)["']?>(.*?)<\/PUSHText>/gi,
+    style: {}, // we can add aditional styles here if needed
+    renderText: renderTextStyles,
+  },
+  {
+    pattern:
+      /<PUSHText color=["']?(#[0-9A-Fa-f]{3,6}|[a-zA-Z]+)["']?\s+link=["'](https?:\/\/[^"']+)["']>(.*?)<\/PUSHText>/gi,
+    style: {}, // can Add additional styles here if needed
+    renderText: renderLinkWithColor,
+  },
+  {
+    pattern: /\[(up):([^\]]+)\]/i, // url
+    style: {
+      ...styles.primary,
+      ...styles.italics,
+      ...styles.underline,
+      ...styles.pointer,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(d):([^\]]+)\]/i, // default or primary gradient color
+    style: {
+      ...styles.primary,
+      ...styles.bold,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(s):([^\]]+)\]/i, // secondary gradient color
+    style: {
+      ...styles.secondary,
+      ...styles.bold,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(t):([^\]]+)\]/i, // third gradient color
+    style: {
+      ...styles.third,
+      ...styles.bold,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(e):([^\]]+)\]/i, // error
+    style: {
+      ...styles.error,
+      ...styles.bold,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(b):([^\]]+)\]/i, // bold
+    style: styles.bold,
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\*\*\*(.*?)\*\*\*/g, // bold ***text***
+    style: {
+      ...styles.bold,
+      ...styles.italics,
+    },
+    renderText: (matchingString) =>
+      matchingString.replace(/\*\*\*(.*?)\*\*\*/g, '$1'),
+  },
+  {
+    pattern: /\*\*(.*?)\*\*/g, // bold **text**
+    style: styles.bold,
+    renderText: (matchingString) =>
+      matchingString.replace(/\*\*(.*?)\*\*/g, '$1'),
+  },
+  {
+    pattern: /\\n/g,
+    style: {},
+    renderText: newLinestyles,
+  },
+  {
+    pattern: /\*(.*?)\*/g, // italic *some text*
+    style: {
+      ...styles.italics,
+    },
+    renderText: (matchingString) => matchingString.replace(/\*(.*?)\*/g, '$1'),
+  },
+  {
+    pattern: /\[(bi):([^\]]+)\]/i, // bolditalics
+    style: {
+      ...styles.bold,
+      ...styles.italics,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[ts: (\d+)\]/g, // Match [ts: timestamp_in_epoch]
+    style: {},
+    renderText: convertEpochToHumanReadable,
+  },
+  {
+    pattern: /\[(w):([^\]]+)\]/i, // white
+    style: styles.white,
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(wb):([^\]]+)\]/i, // whitebold
+    style: {
+      ...styles.white,
+      ...styles.bold,
+    },
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(mg):([^\]]+)\]/i, // midgray
+    style: styles.midgray,
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(dg):([^\]]+)\]/i, // darkgray
+    style: styles.darkgray,
+    renderText: renderStyles,
+  },
+  {
+    pattern: /\[(ddg):([^\]]+)\]/i, // darker gray
+    style: styles.darkergray,
+    renderText: renderStyles,
+  },
 ];
 
-export default DEFAULT_PATTERNS;
\ No newline at end of file
+export default DEFAULT_PATTERNS;
diff --git a/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx b/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
index ae5ee621e..a3d51ad31 100644
--- a/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
+++ b/packages/uiweb/src/lib/components/space/SpaceWidget/LiveWidgetContent.tsx
@@ -13,6 +13,7 @@ import { SpaceMembersSectionModal } from './SpaceMembersSectionModal';
 
 import { createBlockie } from '../helpers/blockies';
 import { ThemeContext } from '../theme/ThemeProvider';
+import { Spinner } from '../reusables/Spinner';
 
 import CircularProgressSpinner from '../../loader/loader';
 
@@ -63,11 +64,12 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
     initSpaceObject,
     raisedHandInfo,
   } = useSpaceData();
+  console.log("🚀 ~ file: LiveWidgetContent.tsx:66 ~ spaceObjectData:", spaceObjectData)
   console.log("🚀 ~ file: LiveWidgetContent.tsx:66 ~ raisedHandInfo:", raisedHandInfo)
 
   const isMicOn = spaceObjectData?.connectionData?.local?.audio;
 
-  // const numberOfRequests = spaceObjectData.liveSpaceData.listeners.filter((listener: any) => listener.handRaised).length;
+  const numberOfRequests = spaceObjectData.liveSpaceData.listeners.filter((listener: any) => listener.handRaised).length;
 
   const handleMicState = async () => {
     await spacesObjectRef?.current?.enableAudio?.({ state: !isMicOn });
@@ -89,7 +91,8 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
   }, [isListener, isHost, spaceData]);
 
   useEffect(() => {
-    if (!spaceObjectData?.connectionData?.local?.stream || !isRequestedForMic)
+    // if (!spaceObjectData?.connectionData?.local?.stream || !isRequestedForMic)
+    if (!isRequestedForMic)
       return;
 
     const requestedForMicFromEffect = async () => {
@@ -183,8 +186,8 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
       console.log('isListner', isListener);
       if (
         isListener &&
-        !isHost &&
-        spaceObjectData.connectionData.local.address
+        !isHost
+        // && spaceObjectData.connectionData.local.address
       ) {
         console.log('joining as a listener');
         await spacesObjectRef?.current?.join?.();
@@ -212,7 +215,7 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
   // joining as a speaker
   useEffect(() => {
     if (
-      !spaceObjectData?.connectionData?.local?.stream ||
+      // !spaceObjectData?.connectionData?.local?.stream ||
       !isSpeaker ||
       (spaceObjectData?.connectionData?.incoming?.length ?? 0) > 1
     )
@@ -299,6 +302,22 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                     </div>
                   ))}
 
+              {/* details of peer connected via webRTC if speaker or host */}
+              {(isHost) &&
+                spaceObjectData?.liveSpaceData.speakers.map((profile) => (
+                  <div style={{ position: 'relative' }}>
+                    <LiveSpaceProfileContainer
+                      isHost={false}
+                      isSpeaker={true}
+                      wallet={profile?.address}
+                      mic={profile?.audio}
+                      image={createBlockie?.(profile?.address)
+                        ?.toDataURL()
+                        ?.toString()}
+                    />
+                  </div>
+                ))}
+
               {/* details of host in the space if listener */}
               {isListener && !isHost && (
                 <div style={{ position: 'relative' }}>
@@ -372,14 +391,14 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
             justifyContent={'space-between'}
             padding={'6px 8px'}
           >
-            {livekitToken && (
+            {livekitToken ? (
               <LiveKitRoom
                 serverUrl={LIVEKIT_SERVER_URL}
                 token={livekitToken}
                 room={livekitRoom}
               >
                 <RoomAudioRenderer />
-                <TrackToggleComp source={Track.Source.Microphone} />
+                {/* <TrackToggleComp source={Track.Source.Microphone} /> */}
                 {isHost || isSpeaker
                   ?
                   <TrackToggleComp showIcon={false} source={Track.Source.Microphone} >
@@ -418,7 +437,25 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
                   </Item>
                 }
               </LiveKitRoom>
-            )}
+            )
+              :
+              <Item
+                cursor={'pointer'}
+                display={'flex'}
+                alignItems={'center'}
+                gap={'8px'}
+                padding={'10px'}
+              >
+                <Spinner size="20" />
+                <Text
+                  color={`${theme.btnOutline}`}
+                  fontSize={'14px'}
+                  fontWeight={600}
+                >
+                  Connecting
+                </Text>
+              </Item>
+            }
             {/* <Item
                 cursor={'pointer'}
                 display={'flex'}
@@ -460,13 +497,13 @@ export const LiveWidgetContent: React.FC<LiveWidgetContentProps> = ({
               </Item> */}
             <Item display={'flex'} alignItems={'center'} gap={'16px'}>
               <MembersContainer>
-                {/* {
+                {
                   isHost && numberOfRequests ?
                     <RequestsCount>
                       {numberOfRequests}
                     </RequestsCount>
                     : null
-                } */}
+                }
                 <Image
                   width={'21px'}
                   height={'24px'}
diff --git a/packages/uiweb/src/lib/components/supportChat/Chat.tsx b/packages/uiweb/src/lib/components/supportChat/Chat.tsx
new file mode 100644
index 000000000..b2e2b2a04
--- /dev/null
+++ b/packages/uiweb/src/lib/components/supportChat/Chat.tsx
@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { ChatIcon } from '../../icons/ChatIcon';
+import { Modal } from './Modal';
+import styled from 'styled-components';
+import { handleOnChatIconClick } from '../../helpers';
+import {
+  SupportChatMainStateContext,
+  SupportChatPropsContext,
+} from '../../context';
+import type { IMessageIPFS, ITheme, SignerType } from '../../types';
+import './index.css';
+import type { ENV} from '../../config';
+import { Constants, lightTheme } from '../../config';
+import { useSDKSocket } from '../../hooks/useSDKSocket';
+import { Div } from '../reusables/sharedStyling';
+import { getAddressFromSigner } from '../../helpers';
+export type ChatProps = {
+account?: string;
+  signer: SignerType;
+  supportAddress: string;
+  greetingMsg?: string;
+  modalTitle?: string;
+  theme?: ITheme;
+  apiKey?: string;
+  env?: ENV;
+};
+
+export type ButtonStyleProps = {
+  bgColor: string;
+};
+
+ export const Chat: React.FC<ChatProps> = ({
+ account = null,
+  signer = null,
+  supportAddress,
+  greetingMsg = Constants.DEFAULT_GREETING_MSG,
+  modalTitle = Constants.DEFAULT_TITLE,
+  theme = { ...lightTheme },
+  apiKey = '',
+  env = Constants.ENV.PROD,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [connectedUser, setConnectedUser] = useState<any>(null);
+  const [messageBeingSent, setMessageBeingSent] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>('');
+  const [toastMessage, setToastMessage] = useState<string>('');
+  const [toastType, setToastType] = useState<'error' | 'success'>();
+  const [chats, setChats] = useState<IMessageIPFS[]>([]);
+  const [accountadd, setAccount] = useState<string | null>(account)
+  const setChatsSorted = (chats: IMessageIPFS[]) => {
+    const uniqueChats = [
+      ...new Map(chats.map((item) => [item['timestamp'], item])).values(),
+    ];
+
+    uniqueChats.sort((a, b) => {
+      return a.timestamp! > b.timestamp! ? 1 : -1;
+    });
+    setChats(uniqueChats);
+  };
+  const socketData = useSDKSocket({
+    account: account,
+    env,
+    apiKey,
+  });
+
+  const chatPropsData = {
+    account : accountadd,
+    signer,
+    supportAddress,
+    greetingMsg,
+    modalTitle,
+    theme: { ...lightTheme, ...theme },
+    apiKey,
+    env,
+  };
+
+  useEffect(() => {
+    (async () => {
+      if(signer) {
+        if (!account) {
+          const address = await getAddressFromSigner(signer);
+          setAccount(address);
+        }
+        else{
+          setAccount(account);
+        }
+     
+    }
+    })();
+  },[signer])
+
+  useEffect(() => {
+    setChats([]);
+    setConnectedUser(null);
+  }, [account, supportAddress]);
+
+  const chatMainStateData = {
+    isModalOpen,
+    socketData,
+    setIsModalOpen,
+    connectedUser,
+    setConnectedUser,
+    messageBeingSent,
+    setMessageBeingSent,
+    setToastMessage,
+    setToastType,
+    message,
+    setMessage,
+    chats,
+    setChatsSorted,
+    toastMessage,
+    toastType,
+  };
+
+  return (
+    <Container>
+      <SupportChatPropsContext.Provider value={chatPropsData}>
+        <SupportChatMainStateContext.Provider value={chatMainStateData}>
+          {!isModalOpen && (
+            <Button
+              bgColor={theme.btnColorPrimary!}
+              onClick={() =>
+                handleOnChatIconClick({ isModalOpen, setIsModalOpen })
+              }
+            >
+              <Div cursor='pointer'>
+                <ChatIcon />
+              </Div>
+            </Button>
+          )}
+          {isModalOpen && <Modal />}
+        </SupportChatMainStateContext.Provider>
+      </SupportChatPropsContext.Provider>
+    </Container>
+  );
+};
+
+//styles
+
+const Container = styled.div`
+  font-family: 'Strawford';
+  flex: 1;
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: fit-content;
+  margin: 0 3rem 2rem 0;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Button = styled.button<ButtonStyleProps>`
+  background: ${(props) => props.bgColor};
+  border: none;
+  cursor: pointer;
+  border-radius: 18px;
+  padding: 16.5px 16.5px 13px 18.5px;
+`;
+
+const Image = styled.img``;
diff --git a/packages/uiweb/src/lib/components/supportChat/index.tsx b/packages/uiweb/src/lib/components/supportChat/index.tsx
index 9d50d8c0b..3143bf359 100644
--- a/packages/uiweb/src/lib/components/supportChat/index.tsx
+++ b/packages/uiweb/src/lib/components/supportChat/index.tsx
@@ -1,146 +1,3 @@
-import React, { useEffect, useState } from 'react';
-import { ChatIcon } from '../../icons/ChatIcon';
-import { Modal } from './Modal';
-import styled from 'styled-components';
-import { handleOnChatIconClick } from '../../helpers';
-import {
-  SupportChatMainStateContext,
-  SupportChatPropsContext,
-} from '../../context';
-import type { IMessageIPFS, ITheme, SignerType } from '../../types';
-import './index.css';
-import type { ENV} from '../../config';
-import { Constants, lightTheme } from '../../config';
-import { useSDKSocket } from '../../hooks/useSDKSocket';
-import { Div } from '../reusables/sharedStyling';
+export { Chat } from "./Chat";
 
-export type ChatProps = {
-  account: string;
-  signer: SignerType;
-  supportAddress: string;
-  greetingMsg?: string;
-  modalTitle?: string;
-  theme?: ITheme;
-  apiKey?: string;
-  env?: ENV;
-};
-
-export type ButtonStyleProps = {
-  bgColor: string;
-};
-
-export const Chat: React.FC<ChatProps> = ({
-  account,
-  signer = null,
-  supportAddress,
-  greetingMsg = Constants.DEFAULT_GREETING_MSG,
-  modalTitle = Constants.DEFAULT_TITLE,
-  theme = { ...lightTheme },
-  apiKey = '',
-  env = Constants.ENV.PROD,
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const [connectedUser, setConnectedUser] = useState<any>(null);
-  const [messageBeingSent, setMessageBeingSent] = useState<boolean>(false);
-  const [message, setMessage] = useState<string>('');
-  const [toastMessage, setToastMessage] = useState<string>('');
-  const [toastType, setToastType] = useState<'error' | 'success'>();
-  const [chats, setChats] = useState<IMessageIPFS[]>([]);
-
-  const setChatsSorted = (chats: IMessageIPFS[]) => {
-    const uniqueChats = [
-      ...new Map(chats.map((item) => [item['timestamp'], item])).values(),
-    ];
-
-    uniqueChats.sort((a, b) => {
-      return a.timestamp! > b.timestamp! ? 1 : -1;
-    });
-    setChats(uniqueChats);
-  };
-  const socketData = useSDKSocket({
-    account: account,
-    env,
-    apiKey,
-  });
-
-  const chatPropsData = {
-    account,
-    signer,
-    supportAddress,
-    greetingMsg,
-    modalTitle,
-    theme: { ...lightTheme, ...theme },
-    apiKey,
-    env,
-  };
-
-  useEffect(() => {
-    setChats([]);
-    setConnectedUser(null);
-  }, [account, supportAddress]);
-
-  const chatMainStateData = {
-    isModalOpen,
-    socketData,
-    setIsModalOpen,
-    connectedUser,
-    setConnectedUser,
-    messageBeingSent,
-    setMessageBeingSent,
-    setToastMessage,
-    setToastType,
-    message,
-    setMessage,
-    chats,
-    setChatsSorted,
-    toastMessage,
-    toastType,
-  };
-
-  return (
-    <Container>
-      <SupportChatPropsContext.Provider value={chatPropsData}>
-        <SupportChatMainStateContext.Provider value={chatMainStateData}>
-          {!isModalOpen && (
-            <Button
-              bgColor={theme.btnColorPrimary!}
-              onClick={() =>
-                handleOnChatIconClick({ isModalOpen, setIsModalOpen })
-              }
-            >
-              <Div cursor='pointer'>
-                <ChatIcon />
-              </Div>
-            </Button>
-          )}
-          {isModalOpen && <Modal />}
-        </SupportChatMainStateContext.Provider>
-      </SupportChatPropsContext.Provider>
-    </Container>
-  );
-};
-
-//styles
-
-const Container = styled.div`
-  font-family: 'Strawford';
-  flex: 1;
-  display: flex;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: fit-content;
-  margin: 0 3rem 2rem 0;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Button = styled.button<ButtonStyleProps>`
-  background: ${(props) => props.bgColor};
-  border: none;
-  cursor: pointer;
-  border-radius: 18px;
-  padding: 16.5px 16.5px 13px 18.5px;
-`;
-
-const Image = styled.img``;
+export {Chat as SupportChat} from './Chat'
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
index 6e92322db..b30e87737 100644
--- a/packages/uiweb/src/lib/config/constants.ts
+++ b/packages/uiweb/src/lib/config/constants.ts
@@ -42,12 +42,15 @@ export const CoreContractChainId = {
   local: 5,
 };
 
+
+
 const TESTNET_NETWORK = {
   ETHEREUM: 'eip155:5',
   POLYGON: 'eip155:80001',
   BSC: 'eip155:97',
   OPTIMISM: 'eip155:420',
   POLYGON_ZK_EVM: 'eip155:1442',
+  ARBITRUM:'eip155:421613'
 };
 const MAINET_NETWORK = {
   ETHEREUM: 'eip155:1',
@@ -55,6 +58,7 @@ const MAINET_NETWORK = {
   BSC: 'eip155:56',
   OPTIMISM: 'eip155:10',
   POLYGON_ZK_EVM: 'eip155:1101',
+  ARBITRUM:'eip155:42161'
 };
 
 export const BLOCKCHAIN_NETWORK = {
diff --git a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx
index c18e42e30..a6f969222 100644
--- a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx
+++ b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx
@@ -8,7 +8,9 @@ import { ThemeContext } from '../components/chat/theme/ThemeProvider';
 import useGetChatProfile from '../hooks/useGetChatProfile';
 import { IUser, SignerType } from '@pushprotocol/restapi';
 import { IChatTheme, lightChatTheme } from '../components/chat/theme';
-import { getAddressFromSigner } from '../helpers';
+import { getAddressFromSigner, pCAIP10ToWallet } from '../helpers';
+import useCreateChatProfile from '../hooks/useCreateChatProfile';
+import useDecryptPGPKey from '../hooks/useDecryptPGPKey';
 
 
 export interface IChatUIProviderProps {
@@ -28,7 +30,7 @@ export const ChatUIProvider = ({
   signer = undefined,
   env = Constants.ENV.PROD,
 }: IChatUIProviderProps) => {
-  const [accountVal, setAccountVal] = useState<string | null>(account);
+  const [accountVal, setAccountVal] = useState<string | null>(pCAIP10ToWallet(account!));
   const [pushChatSocket, setPushChatSocket] = useState<any>(null); 
    const [signerVal, setSignerVal] = useState<SignerType| undefined>(signer);
 
@@ -40,6 +42,8 @@ export const ChatUIProvider = ({
 
   const [isPushChatSocketConnected, setIsPushChatSocketConnected] =
   useState<boolean>(false);
+  const {createChatProfile} = useCreateChatProfile();
+  const {decryptPGPKey} = useDecryptPGPKey();
 
   useEffect(() => {
     (async()=>{
@@ -59,9 +63,40 @@ export const ChatUIProvider = ({
       setPgpPrivateKeyVal(pgpPrivateKey);
     })()
     
-  }, [env,account,pgpPrivateKey,signer])
+  }, [env,account,signer,pgpPrivateKey])
 
 
+  useEffect(() => {
+    (async () => {
+      if (accountVal && signerVal) {
+        if (!pgpPrivateKeyVal) await handleUserCreation();
+      }
+    })();
+  }, [accountVal, signerVal]);
+
+
+  const handleUserCreation = async () => {
+    if (!accountVal && !envVal) return;
+    try {
+      let user  = await fetchChatProfile({ profileId: accountVal! ,env:envVal});
+      if (!user) {
+        if (!signerVal) return;
+        user = await createChatProfile({ signer: signerVal ,env:envVal});
+      }
+      if (user?.encryptedPrivateKey && !pgpPrivateKey) {
+        const decryptedPgpKey = await decryptPGPKey({
+          encryptedPrivateKey: user.encryptedPrivateKey,
+          account: accountVal!,
+          signer: signerVal,
+          env: envVal,
+        });
+        if(decryptedPgpKey)
+        setPgpPrivateKeyVal(decryptedPgpKey);
+      }
+    } catch (e: any) {
+      console.log(e);
+    }
+  };
 
 
 
diff --git a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
index 2ac3701f1..2753671d6 100644
--- a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
+++ b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
@@ -19,13 +19,14 @@ export const useCreateGatedGroup = () => {
           isPublic: groupInfoType.isPublic,
           members: [],
           admins: [],
-          account: account || '',
+          account: account || undefined,
           env: env,
-          pgpPrivateKey: pgpPrivateKey,
+          pgpPrivateKey: pgpPrivateKey || undefined,
           rules: rules,
         };
         const response = await PushAPI.chat.createGroup(payload);
         setLoading(false);
+        console.log(response)
         if (!response) {
           return false;
         }
diff --git a/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts b/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
index e677f4251..1a31b8e82 100644
--- a/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
+++ b/packages/uiweb/src/lib/hooks/chat/useCriteriaState.ts
@@ -30,7 +30,40 @@ export const useCriteriaState = (
     useState(-1);
   const [updateCriteriaIdx, setUpdateCriteriaIdx] = useState(-1);
 
+  
+  const isDuplicateRule = (rule:Rule)=>{
+    const newRule = JSON.stringify(rule)
+
+    // check on current conditions
+    for(let i=0; i<selectedRules.length;i++){
+      const selectedRule = JSON.stringify(selectedRules[i])
+      if (newRule === selectedRule){
+        console.log(newRule, " equals ", selectedRule);
+        
+        return true
+      }
+    }
+
+    // check on already selected condtions
+    for (let i = 0; i < entryOptionsDataArray.length; i++) {
+      const _rules = entryOptionsDataArray[i]
+      for (let j = 0;  j < _rules.length; j++) {
+        const selectedRule = JSON.stringify(_rules[j])
+        if (newRule === selectedRule){
+          console.log(newRule, " equals ", selectedRule);
+          return true
+        }
+      }
+    }    
+
+    return false
+  }
+
   const addNewRule = (newRule: Rule) => {
+    if(isDuplicateRule(newRule)){
+      return false
+    }
+
     if (selectedCriteria === -1) {
       setSelectedCriteria(entryOptionTypeArray.length);
     }
@@ -44,6 +77,8 @@ export const useCriteriaState = (
       // add new
       setSelectedRule((prev) => [...prev, newRule]);
     }
+
+    return true
   };
 
   const deleteRule = (idx: number) => {
diff --git a/packages/uiweb/src/lib/hooks/index.ts b/packages/uiweb/src/lib/hooks/index.ts
index 0da0a8f8c..99ac2b8f2 100644
--- a/packages/uiweb/src/lib/hooks/index.ts
+++ b/packages/uiweb/src/lib/hooks/index.ts
@@ -10,4 +10,5 @@ export * from './useDeviceWidthCheck';
 export * from './useGetChatProfile';
 export * from './useMediaQuery';
 export * from './useCreateChatProfile';
-export * from './useDecryptPGPKey';
\ No newline at end of file
+export * from './useDecryptPGPKey';
+export * from './useTokenSymbolLoader';
diff --git a/packages/uiweb/src/lib/hooks/space/usePushSpaceSocket.tsx b/packages/uiweb/src/lib/hooks/space/usePushSpaceSocket.tsx
index e51d30329..eff7c5f63 100644
--- a/packages/uiweb/src/lib/hooks/space/usePushSpaceSocket.tsx
+++ b/packages/uiweb/src/lib/hooks/space/usePushSpaceSocket.tsx
@@ -55,7 +55,7 @@ export const usePushSpaceSocket = ({
 
     pushSpaceSocket?.on('SPACES_MESSAGES', async (message: any) => {
       console.log('SPACES_MESSAGES RECEIVED', message);
-      if (message?.messageCategory === 'Request') {
+      if (message?.messageCategory === 'Request' || message?.messageCategory === 'Approve') {
         /*
           - Will be executed on host's end of a live space
           - When a listener joins this fires a meta message telling everyone the same
diff --git a/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
index fea956c0e..15aa3d4fc 100644
--- a/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
+++ b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
@@ -8,7 +8,7 @@ export interface CreateChatProfileParams {
 }
 
 const useCreateChatProfile = () => {
-  const creteChatProfile = useCallback(
+  const createChatProfile = useCallback(
     async ({
       signer,
       env
@@ -27,7 +27,7 @@ const useCreateChatProfile = () => {
     []
   );
 
-  return { creteChatProfile };
+  return { createChatProfile };
 };
 
 export default useCreateChatProfile;
diff --git a/packages/uiweb/src/lib/hooks/useTokenSymbolLoader.ts b/packages/uiweb/src/lib/hooks/useTokenSymbolLoader.ts
new file mode 100644
index 000000000..497887a4f
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useTokenSymbolLoader.ts
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { ConditionData } from '..';
+import { CATEGORY, PushData } from '../components/chat/types';
+import {
+  fetchERC20Info,
+  fetchERC721nfo,
+} from '../components/chat/helpers/tokenHelpers';
+
+export const useTokenSymbolLoader = (
+  conditionData: ConditionData
+): [string, boolean] => {
+  const isContract = isTokenType(conditionData);
+  const [tokenSymbol, setTokenSymbol] = useState('....');
+  const [isTokenSymbolLoading, setIsTokenSymbolLoading] = useState(true);
+
+  const updateTokenValue = (newVal: string) => {
+    setTokenSymbol(newVal);
+    setIsTokenSymbolLoading(false);
+  };
+
+  useEffect(() => {
+    (async () => {
+        
+      if (isContract) {
+        const data = conditionData.data as PushData;
+        const contract = data.contract;
+        const category = conditionData.category;
+
+        if (category && contract) {
+          if (data.token) {
+            updateTokenValue(data.token);
+            return;
+          }
+
+          const contractFormat = contract.split(':');
+          const [address, chainId] = [
+            contractFormat[2],
+            parseInt(contractFormat[1]),
+          ];
+
+          if (category === CATEGORY.ERC20) {
+            const [isErr, tokenInfo] = await fetchERC20Info(address, chainId);
+            if (!isErr) {
+              updateTokenValue(tokenInfo.symbol);
+            }
+          } else if (category === CATEGORY.ERC721) {
+            const [isErr, tokenInfo] = await fetchERC721nfo(address, chainId);
+            if (!isErr) {
+              updateTokenValue(tokenInfo);
+            }
+          }
+        }
+      }
+    })();
+  }, []);
+
+  return [tokenSymbol, isTokenSymbolLoading];
+};
+
+const isTokenType = (conditionData: ConditionData): boolean => {
+  if (conditionData.type === 'PUSH') {
+    if (
+      conditionData.category === CATEGORY.ERC20 ||
+      conditionData.category === CATEGORY.ERC721
+    ) {
+      if (conditionData.data) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
diff --git a/packages/uiweb/src/lib/icons/Bell.svg b/packages/uiweb/src/lib/icons/Bell.svg
new file mode 100644
index 000000000..b31fabf90
--- /dev/null
+++ b/packages/uiweb/src/lib/icons/Bell.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 329.62 452.94"><defs><style>.h{fill:url(#e);}.i{fill:url(#d);}.j{fill:url(#g);}.k{fill:url(#f);}.l{fill:url(#c);}.m{fill:url(#b);}</style><linearGradient id="b" x1="188.38" y1="180.56" x2="147.63" y2="111.29" gradientTransform="translate(0 438.53) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff94a6"/><stop offset=".32" stop-color="#e03dc1"/><stop offset="1" stop-color="#8247e5"/></linearGradient><linearGradient id="c" x1="207.9" y1="181.3" x2="121.94" y2="303.46" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#b"/><linearGradient id="d" x1="277.12" y1="319.97" x2="68.41" y2="181.43" xlink:href="#b"/><linearGradient id="e" x1="275.17" y1="322.92" x2="66.45" y2="184.38" xlink:href="#b"/><linearGradient id="f" x1="238.15" y1="378.69" x2="29.43" y2="240.15" xlink:href="#b"/><linearGradient id="g" x1="227.9" y1="394.13" x2="19.27" y2="255.65" xlink:href="#b"/></defs><path class="m" d="M154.92,334.91c12.77,0,23.73-7.65,28.6-18.61,1.18-2.67-.79-5.67-3.71-5.67h-49.78c-2.92,0-4.9,3-3.71,5.67,4.87,10.96,15.83,18.61,28.6,18.61Z"/><path class="l" d="M231.3,280.49c-8.1,0-14.66-6.56-14.66-14.66v-53.26c0-28.86-19.81-53.09-46.57-59.85-.98-7.61-7.47-13.5-15.35-13.5s-14.42,5.94-15.36,13.59c-24.02,6.23-42.34,26.56-45.64,51.63-.05,.37-.1,.73-.14,1.1-.06,.5-.11,.99-.15,1.49-.04,.5-.08,1-.11,1.5-.03,.42-.06,.83-.08,1.25-.04,.84-.06,1.69-.06,2.55,0,.08,0,.16,0,.24v53.25c0,8.06-6.5,14.6-14.55,14.66-3.84,.03-7.01,2.99-7.01,6.84v.06c0,3.81,3.09,6.9,6.9,6.9H231.28c3.81,0,6.9-3.09,6.9-6.9,.02-3.8-3.07-6.89-6.88-6.89Z"/><g><path class="i" d="M199.15,142.21c17.18,3.68,30.3,18.47,31.92,35.97,.18,1.94,1.87,3.39,3.85,3.2,.94-.09,1.79-.54,2.4-1.26,.6-.73,.89-1.65,.8-2.59-.95-10.22-5.07-19.67-11.92-27.35-6.8-7.61-15.64-12.76-25.57-14.89-.25-.05-.5-.08-.74-.08-1.63,0-3.11,1.14-3.46,2.8-.41,1.91,.81,3.79,2.72,4.2Z"/><path class="h" d="M203.12,119.43c26.73,5.73,47.16,28.75,49.68,55.97,.18,1.94,1.87,3.38,3.85,3.2,.94-.09,1.79-.54,2.4-1.26,.6-.73,.89-1.65,.8-2.59-1.39-15.05-7.47-28.99-17.57-40.29-10.02-11.22-23.05-18.81-37.67-21.95-.25-.05-.5-.08-.74-.08-1.63,0-3.11,1.14-3.46,2.8-.42,1.91,.8,3.79,2.71,4.2Z"/><path class="k" d="M110.68,142.21c1.91-.41,3.13-2.3,2.72-4.21-.36-1.66-1.83-2.8-3.46-2.8-.24,0-.49,.03-.74,.08-9.93,2.13-18.77,7.28-25.57,14.89-6.85,7.67-10.98,17.13-11.92,27.35-.09,.94,.2,1.86,.8,2.59s1.46,1.18,2.4,1.26c1.99,.18,3.67-1.26,3.85-3.2,1.62-17.48,14.75-32.27,31.92-35.96Z"/><path class="j" d="M106.71,119.43c1.91-.41,3.13-2.3,2.72-4.21-.36-1.66-1.83-2.8-3.46-2.8-.25,0-.49,.03-.74,.08-14.63,3.14-27.65,10.73-37.67,21.95-10.1,11.31-16.17,25.24-17.57,40.29-.09,.94,.2,1.86,.8,2.59s1.46,1.18,2.4,1.26c1.98,.18,3.67-1.26,3.85-3.2,2.52-27.21,22.95-50.22,49.67-55.96Z"/></g></svg>
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/icons/Info.tsx b/packages/uiweb/src/lib/icons/Info.tsx
new file mode 100644
index 000000000..7e3fd9c12
--- /dev/null
+++ b/packages/uiweb/src/lib/icons/Info.tsx
@@ -0,0 +1,9 @@
+export const Info = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M16 15V22" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M15.75 12C16.5784 12 17.25 11.3284 17.25 10.5C17.25 9.67157 16.5784 9 15.75 9C14.9216 9 14.25 9.67157 14.25 10.5C14.25 11.3284 14.9216 12 15.75 12Z" fill="#494D5F" />
+        </svg>
+    )
+}
diff --git a/packages/uiweb/src/lib/icons/MoreDark.tsx b/packages/uiweb/src/lib/icons/MoreDark.tsx
index 68f70fead..e426bd77a 100644
--- a/packages/uiweb/src/lib/icons/MoreDark.tsx
+++ b/packages/uiweb/src/lib/icons/MoreDark.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-export const MoreDarkIcon = ({color}:{color?:string}) => {
+export const MoreDarkIcon = ({color,width,height}:{color?:string,width?:string,height?:string}) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" cursor="pointer">
+    <svg width={width??"32"} height={height??"32"} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" cursor="pointer">
     <path d="M16 10C17.1046 10 18 9.10457 18 8C18 6.89543 17.1046 6 16 6C14.8954 6 14 6.89543 14 8C14 9.10457 14.8954 10 16 10Z" fill={color??"#787E99"}/>
     <path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill={color??"#787E99"}/>
     <path d="M16 26C17.1046 26 18 25.1046 18 24C18 22.8954 17.1046 22 16 22C14.8954 22 14 22.8954 14 24C14 25.1046 14.8954 26 16 26Z" fill={color??"#787E99"}/>
diff --git a/packages/uiweb/src/lib/icons/TokenGatedSvg.tsx b/packages/uiweb/src/lib/icons/TokenGatedSvg.tsx
new file mode 100644
index 000000000..b671e8ad0
--- /dev/null
+++ b/packages/uiweb/src/lib/icons/TokenGatedSvg.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const TokenGatedSvg = ({ color }: { color?: string }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill={'none'}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.75 0.25C7.82164 0.25 5.93657 0.821828 4.33319 1.89317C2.72982 2.96452 1.48013 4.48726 0.742179 6.26884C0.00422448 8.05042 -0.188858 10.0108 0.187348 11.9021C0.563554 13.7934 1.49215 15.5307 2.85571 16.8943C4.21927 18.2579 5.95656 19.1865 7.84787 19.5627C9.73919 19.9389 11.6996 19.7458 13.4812 19.0078C15.2627 18.2699 16.7855 17.0202 17.8568 15.4168C18.9282 13.8134 19.5 11.9284 19.5 10C19.4973 7.41498 18.4692 4.93661 16.6413 3.10872C14.8134 1.28084 12.335 0.25273 9.75 0.25ZM15.7613 12.7319C15.9318 12.8343 16.0547 13.0003 16.1029 13.1934C16.1511 13.3864 16.1206 13.5907 16.0181 13.7612C15.9157 13.9318 15.7497 14.0547 15.5566 14.1029C15.3636 14.1511 15.1593 14.1206 14.9888 14.0181L10.5 11.3247V16.1875C10.5 16.3864 10.421 16.5772 10.2803 16.7178C10.1397 16.8585 9.94892 16.9375 9.75 16.9375C9.55109 16.9375 9.36033 16.8585 9.21967 16.7178C9.07902 16.5772 9 16.3864 9 16.1875V11.3247L4.51125 14.0181C4.34069 14.1206 4.13641 14.1511 3.94337 14.1029C3.75032 14.0547 3.58432 13.9318 3.48188 13.7612C3.37944 13.5907 3.34895 13.3864 3.39713 13.1934C3.4453 13.0003 3.56819 12.8343 3.73875 12.7319L8.29219 10L3.73875 7.26813C3.56819 7.16569 3.4453 6.99968 3.39713 6.80664C3.34895 6.61359 3.37944 6.40932 3.48188 6.23875C3.58432 6.06818 3.75032 5.9453 3.94337 5.89712C4.13641 5.84895 4.34069 5.87944 4.51125 5.98187L9 8.67531V3.8125C9 3.61359 9.07902 3.42282 9.21967 3.28217C9.36033 3.14152 9.55109 3.0625 9.75 3.0625C9.94892 3.0625 10.1397 3.14152 10.2803 3.28217C10.421 3.42282 10.5 3.61359 10.5 3.8125V8.67531L14.9888 5.98187C15.0732 5.93115 15.1668 5.89756 15.2643 5.88302C15.3617 5.86848 15.4611 5.87327 15.5566 5.89712C15.6522 5.92098 15.7422 5.96342 15.8214 6.02204C15.9005 6.08065 15.9674 6.15429 16.0181 6.23875C16.0689 6.32321 16.1024 6.41683 16.117 6.51427C16.1315 6.6117 16.1267 6.71105 16.1029 6.80664C16.079 6.90222 16.0366 6.99218 15.978 7.07136C15.9193 7.15054 15.8457 7.2174 15.7613 7.26813L11.2078 10L15.7613 12.7319Z"
+        fill={color??"#657795"}
+      />
+    </svg>
+  );
+};
diff --git a/packages/uiweb/src/lib/icons/arbitrum.svg b/packages/uiweb/src/lib/icons/arbitrum.svg
new file mode 100644
index 000000000..0fa71d8eb
--- /dev/null
+++ b/packages/uiweb/src/lib/icons/arbitrum.svg
@@ -0,0 +1,16 @@
+<svg
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+  
+    viewBox="0 0 1080 1218.5"
+    xmlSpace="preserve"
+  >
+    <path
+      className="st0"
+      d="M541.8 76.4c2.9 0 5.8.8 8.4 2.3l446.1 259.5c5.2 3 8.4 8.6 8.3 14.5l-1.7 516.1c0 6-3.2 11.5-8.4 14.5l-447.8 256.6c-2.5 1.5-5.5 2.2-8.4 2.2-2.9 0-5.8-.8-8.4-2.3L83.8 880.3c-5.2-3-8.4-8.6-8.3-14.5l1.7-516.1c0-6 3.2-11.5 8.4-14.5L533.4 78.6c2.5-1.5 5.4-2.2 8.4-2.2M542 1c-15.9-.1-31.8 4-46.1 12.2L48.1 269.7c-28.6 16.4-46.2 46.7-46.4 79.7L0 865.5c-.1 32.9 17.4 63.4 45.8 80L491.9 1205c14.2 8.3 30.1 12.4 46.1 12.5 15.9.1 31.8-4 46.1-12.2l447.8-256.6c28.6-16.4 46.2-46.7 46.4-79.7l1.7-516c.1-32.9-17.4-63.4-45.8-80L588.1 13.5C573.8 5.2 557.9 1 542 1z"
+    />
+    <path
+      className="st0"
+      d="M632.4 282.3H567c-4.9 0-9.3 3.1-11 7.7L345.8 866.4c-1.4 3.8 1.4 7.8 5.5 7.8h65.4c4.9 0 9.3-3.1 11-7.7L638 290c1.2-3.7-1.6-7.7-5.6-7.7zm-114.4 0h-65.4c-4.9 0-9.3 3.1-11 7.7L231.4 866.4c-1.4 3.8 1.4 7.8 5.5 7.8h65.4c4.9 0 9.3-3.1 11-7.7L523.6 290c1.3-3.7-1.5-7.7-5.6-7.7zm84.7 223.5c-1.9-5.1-9.1-5.1-11 0l-34 93.2c-.9 2.6-.9 5.4 0 8l94.7 259.6c1.7 4.6 6.1 7.7 11 7.7h65.4c4.1 0 6.9-4 5.5-7.8L602.7 505.8zm245.9 360.6L659.9 349.1c-1.9-5.1-9.1-5.1-11 0l-34 93.2c-.9 2.6-.9 5.4 0 8l151.9 416.3c1.7 4.6 6.1 7.7 11 7.7h65.4c3.9-.1 6.8-4.1 5.4-7.9z"
+    />
+  </svg>
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/icons/info.svg b/packages/uiweb/src/lib/icons/info.svg
deleted file mode 100644
index 4aa6cdd7d..000000000
--- a/packages/uiweb/src/lib/icons/info.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16 15V22" stroke="#494D5F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15.75 12C16.5784 12 17.25 11.3284 17.25 10.5C17.25 9.67157 16.5784 9 15.75 9C14.9216 9 14.25 9.67157 14.25 10.5C14.25 11.3284 14.9216 12 15.75 12Z" fill="#494D5F"/>
-</svg>
diff --git a/packages/uiweb/tsconfig.json b/packages/uiweb/tsconfig.json
index 8205b2d5d..961fa8169 100644
--- a/packages/uiweb/tsconfig.json
+++ b/packages/uiweb/tsconfig.json
@@ -9,7 +9,7 @@
     "strict": true,
     "noImplicitOverride": true,
     // "importsNotUsedAsValues": "error",
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     // "isolatedModules": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
diff --git a/yarn.lock b/yarn.lock
index 14420088a..00afc30c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -64,7 +64,7 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.15.4", "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/helper-annotate-as-pure@^7.15.4", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@@ -156,7 +156,7 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.15.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.15.4", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -1097,7 +1097,7 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.14.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.19.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.14.0", "@babel/traverse@^7.16.0", "@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.19.3", "@babel/traverse@^7.7.2":
   version "7.19.3"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.3.tgz"
   integrity sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==
@@ -1307,27 +1307,22 @@
     md5 "2.3.0"
     webpack-virtual-modules "^0.4.4"
 
-"@emotion/is-prop-valid@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz"
-  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
   dependencies:
-    "@emotion/memoize" "^0.8.0"
-
-"@emotion/memoize@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz"
-  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+    "@emotion/memoize" "^0.8.1"
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@eslint/eslintrc@^1.2.1":
   version "1.3.2"
@@ -3817,6 +3812,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/stylis@^4.0.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3"
+  integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==
+
 "@types/uuid@^8.3.4":
   version "8.3.4"
   resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz"
@@ -4799,17 +4799,6 @@ babel-plugin-replace-ts-export-assignment@^0.0.2:
   resolved "https://registry.npmjs.org/babel-plugin-replace-ts-export-assignment/-/babel-plugin-replace-ts-export-assignment-0.0.2.tgz"
   integrity sha512-BiTEG2Ro+O1spuheL5nB289y37FFmz0ISE6GjpNCG2JuA/WNcuEHSYw01+vN8quGf208sID3FnZFDwVyqX18YQ==
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.0.7"
-  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz"
-  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.0"
-    "@babel/helper-module-imports" "^7.16.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-    picomatch "^2.3.0"
-
 babel-plugin-styled-components@^1.10.7:
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc"
@@ -6125,10 +6114,10 @@ css-select@^4.1.3, css-select@^4.2.1:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
-css-to-react-native@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+css-to-react-native@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
   dependencies:
     camelize "^1.0.0"
     css-color-keywords "^1.0.0"
@@ -6239,6 +6228,11 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 cz-conventional-changelog@3.3.0, cz-conventional-changelog@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz"
@@ -8465,7 +8459,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11336,6 +11330,11 @@ nanoid@^3.3.4:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
@@ -12143,7 +12142,7 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -12515,6 +12514,15 @@ postcss@^8.2.13, postcss@^8.3.5, postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -14321,21 +14329,20 @@ style-to-object@0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^5.3.5:
-  version "5.3.8"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.8.tgz#b92e2d10352dc9ecf3b1bc5d27c7500832dcf870"
-  integrity sha512-6jQrlvaJQ16uWVVO0rBfApaTPItkqaG32l3746enNZzpMDxMvzmHzj8rHUg39bvVtom0Y8o8ZzWuchEXKGjVsg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
+styled-components@^6.0.8:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.0.tgz#228e3ab9c1ee1daa4b0a06aae30df0ed14fda274"
+  integrity sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==
+  dependencies:
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/unitless" "^0.8.0"
+    "@types/stylis" "^4.0.2"
+    css-to-react-native "^3.2.0"
+    csstype "^3.1.2"
+    postcss "^8.4.31"
     shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+    stylis "^4.3.0"
+    tslib "^2.5.0"
 
 stylehacks@^5.1.0:
   version "5.1.0"
@@ -14345,6 +14352,11 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylis@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
 stylus-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/stylus-loader/-/stylus-loader-6.2.0.tgz"
@@ -14402,7 +14414,7 @@ supports-color@8.1.1, supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -14862,6 +14874,11 @@ tslib@^2, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.5.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"