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 5b26347a3..d8a4862f3 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -14,7 +14,7 @@ const ChatViewComponentTest = () => {
     <div>
       <h2>Chat UI Test page</h2>
       <ChatViewComponentCard>
-        <ChatViewComponent onClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} isConnected={true} />
+        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} isConnected={true} />
       </ChatViewComponentCard>
     </div>
   );
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
index f527c883b..cbfd7ee7e 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
@@ -1,8 +1,23 @@
-import { useContext, useEffect, useState } from 'react';
-import { Section, Span, Image } from '../../reusables';
+import {
+  ReactElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
 import moment from 'moment';
 import styled from 'styled-components';
+import { TwitterTweetEmbed } from 'react-twitter-embed';
+
+import { Section, Span, Image } from '../../reusables';
+import { checkTwitterUrl } from '../helpers/twitter';
+import { ChatDataContext } from '../../../context';
+import { useChatData } from '../../../hooks';
+import { ThemeContext } from '../theme/ThemeProvider';
+
 import { FileMessageContent } from '../../../types';
+import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
 import { FILE_ICON } from '../../../config';
 import {
   formatFileSize,
@@ -10,12 +25,6 @@ import {
   pCAIP10ToWallet,
   shortenText,
 } from '../../../helpers';
-import { checkTwitterUrl } from '../helpers/twitter';
-import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
-import { TwitterTweetEmbed } from 'react-twitter-embed';
-import { ChatDataContext } from '../../../context';
-import { useChatData } from '../../../hooks';
-import { ThemeContext } from '../theme/ThemeProvider';
 
 const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
   const { account } = useContext(ChatDataContext);
@@ -73,19 +82,18 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   );
 };
 
-
-//can create a wrapper for till the senderMessageAddress and use it for all cards(types of messages)
-const MessageCard = ({
+const MessageWrapper = ({
   chat,
-  position,
+  children,
   isGroup,
+  maxWidth,
 }: {
   chat: IMessagePayload;
-  position: number;
+  children: ReactNode;
   isGroup: boolean;
+  maxWidth?: string;
 }) => {
   const theme = useContext(ThemeContext);
-  const time = moment(chat.timestamp).format('hh:mm a');
   return (
     <Section
       theme={theme}
@@ -93,84 +101,102 @@ const MessageCard = ({
       justifyContent="start"
       gap="6px"
       width="fit-content"
-      maxWidth="70%"
+      maxWidth={maxWidth || 'auto'}
     >
       {isGroup && <SenderMessageProfilePicture chat={chat} />}
       <Section justifyContent="start" flexDirection="column">
         {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          gap="5px"
-          background={
+      </Section>
+      {children}
+    </Section>
+  );
+};
+
+const MessageCard = ({
+  chat,
+  position,
+  isGroup,
+}: {
+  chat: IMessagePayload;
+  position: number;
+  isGroup: boolean;
+}) => {
+  const theme = useContext(ThemeContext);
+  const time = moment(chat.timestamp).format('hh:mm a');
+  return (
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="70%">
+      <Section
+        gap="5px"
+        background={
+          position
+            ? `${theme.backgroundColor?.chatSentBubbleBackground}`
+            : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
+        }
+        padding="8px 12px"
+        borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        margin="5px 0"
+        alignSelf={position ? 'end' : 'start'}
+        justifyContent="start"
+        minWidth="71px"
+        position="relative"
+        width="fit-content"
+        color={
+          position
+            ? `${theme.textColor?.chatSentBubbleText}`
+            : `${theme.textColor?.chatReceivedBubbleText}`
+        }
+      >
+        {' '}
+        <Section flexDirection="column" padding="5px 0 15px 0">
+          {chat.messageContent.split('\n').map((str) => (
+            <Span
+              key={Math.random().toString()}
+              alignSelf="start"
+              textAlign="left"
+              fontSize={
+                position
+                  ? `${theme.fontSize?.chatSentBubbleText}`
+                  : `${theme.fontSize?.chatReceivedBubbleText}`
+              }
+              fontWeight={
+                position
+                  ? `${theme.fontWeight?.chatSentBubbleText}`
+                  : `${theme.fontWeight?.chatReceivedBubbleText}`
+              }
+              color={
+                position
+                  ? `${theme.textColor?.chatSentBubbleText}`
+                  : `${theme.textColor?.chatReceivedBubbleText}`
+              }
+            >
+              {str}
+            </Span>
+          ))}
+        </Section>
+        <Span
+          position="absolute"
+          fontSize={
             position
-              ? `${theme.backgroundColor?.chatSentBubbleBackground}`
-              : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
+              ? `${theme.fontSize?.chatSentBubbleTimestampText}`
+              : `${theme.fontSize?.chatReceivedBubbleTimestampText}`
+          }
+          fontWeight={
+            position
+              ? `${theme.fontWeight?.chatSentBubbleTimestampText}`
+              : `${theme.fontWeight?.chatReceivedBubbleTimestampText}`
           }
-          padding="8px 12px"
-          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
-          margin="5px 0"
-          alignSelf={position ? 'end' : 'start'}
-          justifyContent="start"
-          minWidth="71px"
-          position="relative"
-          width="fit-content"
           color={
             position
               ? `${theme.textColor?.chatSentBubbleText}`
               : `${theme.textColor?.chatReceivedBubbleText}`
           }
+          bottom="6px"
+          right="10px"
         >
-          {' '}
-          <Section flexDirection="column" padding="5px 0 15px 0">
-            {chat.messageContent.split('\n').map((str) => (
-              <Span
-                key={Math.random().toString()}
-                alignSelf="start"
-                textAlign="left"
-                fontSize={
-                  position
-                    ? `${theme.fontSize?.chatSentBubbleText}`
-                    : `${theme.fontSize?.chatReceivedBubbleText}`
-                }
-                fontWeight={
-                  position
-                    ? `${theme.fontWeight?.chatSentBubbleText}`
-                    : `${theme.fontWeight?.chatReceivedBubbleText}`
-                }
-                color={
-                  position
-                    ? `${theme.textColor?.chatSentBubbleText}`
-                    : `${theme.textColor?.chatReceivedBubbleText}`
-                }
-              >
-                {str}
-              </Span>
-            ))}
-          </Section>
-          <Span
-            position="absolute"
-            fontSize={
-              position
-                ? `${theme.fontSize?.chatSentBubbleTimestampText}`
-                : `${theme.fontSize?.chatReceivedBubbleTimestampText}`
-            }
-            fontWeight={
-              position
-                ? `${theme.fontWeight?.chatSentBubbleTimestampText}`
-                : `${theme.fontWeight?.chatReceivedBubbleTimestampText}`
-            }
-            color={
-              position
-                ? `${theme.textColor?.chatSentBubbleText}`
-                : `${theme.textColor?.chatReceivedBubbleText}`
-            }
-            bottom="6px"
-            right="10px"
-          >
-            {time}
-          </Span>
-        </Section>
+          {time}
+        </Span>
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -189,51 +215,42 @@ const FileCard = ({
   const size = fileContent.size;
 
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf="start"
-          maxWidth="100%"
-          margin="5px 0"
-          background="#343536"
-          borderRadius="8px"
-          justifyContent="space-around"
-          padding="10px 13px"
-          gap="15px"
-          width="fit-content"
-        >
-          <Image
-            src={FILE_ICON(name.split('.').slice(-1)[0])}
-            alt="extension icon"
-            width="20px"
-            height="20px"
-          />
-          <Section flexDirection="column" gap="5px">
-            <Span color="#fff" fontSize="15px">
-              {shortenText(name, 11)}
-            </Span>
-            <Span color="#fff" fontSize="12px">
-              {formatFileSize(size)}
-            </Span>
-          </Section>
-          <FileDownloadIconAnchor
-            href={content}
-            target="_blank"
-            rel="noopener noreferrer"
-            download
-          >
-            <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
-          </FileDownloadIconAnchor>
+    <MessageWrapper maxWidth="fit-content" chat={chat} isGroup={isGroup}>
+      <Section
+        alignSelf="start"
+        maxWidth="100%"
+        margin="5px 0"
+        background="#343536"
+        borderRadius="8px"
+        justifyContent="space-around"
+        padding="10px 13px"
+        gap="15px"
+        width="fit-content"
+      >
+        <Image
+          src={FILE_ICON(name.split('.').slice(-1)[0])}
+          alt="extension icon"
+          width="20px"
+          height="20px"
+        />
+        <Section flexDirection="column" gap="5px">
+          <Span color="#fff" fontSize="15px">
+            {shortenText(name, 11)}
+          </Span>
+          <Span color="#fff" fontSize="12px">
+            {formatFileSize(size)}
+          </Span>
         </Section>
+        <FileDownloadIconAnchor
+          href={content}
+          target="_blank"
+          rel="noopener noreferrer"
+          download
+        >
+          <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
+        </FileDownloadIconAnchor>
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -247,27 +264,21 @@ const ImageCard = ({
   isGroup: boolean;
 }) => {
   return (
-    <Section flexDirection="row" justifyContent="start" gap="6px">
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="65%"
-          width="fit-content"
-          margin="5px 0"
-        >
-          <Image
-            src={JSON.parse(chat.messageContent).content}
-            alt=""
-            width="100%"
-            borderRadius={
-              position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'
-            }
-          />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup}>
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="65%"
+        width="fit-content"
+        margin="5px 0"
+      >
+        <Image
+          src={JSON.parse(chat.messageContent).content}
+          alt=""
+          width="100%"
+          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -281,32 +292,21 @@ const GIFCard = ({
   isGroup: boolean;
 }) => {
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="65%"
-          margin="5px 0"
-          width="fit-content"
-        >
-          <Image
-            src={chat.messageContent}
-            alt=""
-            width="100%"
-            borderRadius={
-              position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'
-            }
-          />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="fit-content">
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="65%"
+        margin="5px 0"
+        width="fit-content"
+      >
+        <Image
+          src={chat.messageContent}
+          alt=""
+          width="100%"
+          borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
+        />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
@@ -322,31 +322,21 @@ const TwitterCard = ({
   position: number;
 }) => {
   return (
-    <Section
-      flexDirection="row"
-      justifyContent="start"
-      gap="6px"
-      width="fit-content"
-    >
-      {isGroup && <SenderMessageProfilePicture chat={chat} />}
-      <Section justifyContent="start" flexDirection="column">
-        {isGroup && <SenderMessageAddress chat={chat} />}
-        <Section
-          alignSelf={position ? 'end' : 'start'}
-          maxWidth="100%"
-          width="fit-content"
-          margin="5px 0"
-        >
-          <TwitterTweetEmbed tweetId={tweetId} />
-        </Section>
+    <MessageWrapper chat={chat} isGroup={isGroup} maxWidth="fit-content">
+      <Section
+        alignSelf={position ? 'end' : 'start'}
+        maxWidth="100%"
+        width="fit-content"
+        margin="5px 0"
+      >
+        <TwitterTweetEmbed tweetId={tweetId} />
       </Section>
-    </Section>
+    </MessageWrapper>
   );
 };
 
 export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
-  const { account} =
-    useChatData();
+  const { account } = useChatData();
   const position =
     pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account?.toLowerCase()
       ? 0
@@ -367,8 +357,6 @@ export const ChatViewBubble = ({ chat }: { chat: IMessagePayload }) => {
     }
   }, [chat.toDID, isGroup]);
 
-
-
   if (messageType === 'TwitterFeedLink') {
     chat.messageType = 'TwitterFeedLink';
   }
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
index 73db94254..a4a2fca4b 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
@@ -34,7 +34,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     file = true,
     gif = true,
     isConnected = true,
-    onClick,
+    onGetTokenClick,
   } = options || {};
 
   const { env, signer, account, pgpPrivateKey } = useChatData();
@@ -86,7 +86,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
         <Section flex="0 1 auto">
           <MessageInput
-            onClick={onClick}
+            onGetTokenClick={onGetTokenClick}
             chatId={chatId}
             File={file}
             Emoji={emoji}
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
index 31ce9e698..ec6f06e95 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -76,7 +76,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
     setChatStatusText('');
   }, [chatId, account, env]);
 
-  //need to do something about fetching connectedUser in every component
   useEffect(() => {
     (async () => {
       if (!connectedProfile && account) {
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
index 3ec0c663f..c83175e42 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx
@@ -1,13 +1,17 @@
-import styled from 'styled-components';
-import { IChatTheme } from '../theme';
-import { useAccount, useChatData } from '../../../hooks';
-import * as PushAPI from '@pushprotocol/restapi';
 import { useContext, useEffect, useState } from 'react';
+
+import styled from 'styled-components';
 import { Signer, ethers } from 'ethers';
 
+import { useAccount, useChatData } from '../../../hooks';
 import { ThemeContext } from '../theme/ThemeProvider';
-import { device } from '../../../config';
+import useGetChatProfile from '../../../hooks/useGetChatProfile';
+import useCreateChatProfile from '../../../hooks/useCreateChatProfile';
+import useDecryptPGPKey from '../../../hooks/useDecryptPGPKey';
+
 import { getAddressFromSigner } from '../../../helpers';
+import { IChatTheme } from '../theme';
+import { device } from '../../../config';
 
 /**
  * @interface IThemeProps
@@ -30,15 +34,17 @@ export const ConnectButtonSub = () => {
     setSigner,
   } = useChatData();
   const theme = useContext(ThemeContext);
+  const {fetchChatProfile} = useGetChatProfile();
+  const {creteChatProfile} = useCreateChatProfile();
+  const {decryptPGPKey} = useDecryptPGPKey();
 
-  const newFunc = () => {
+
+  const setUserData = () => {
     if (wallet) {
       (async () => {
-
         const ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
         const signer = ethersProvider.getSigner()
         const newAdd = await getAddressFromSigner(signer)
-        console.log(newAdd)
         setSigner(signer)
         setAccount(newAdd);
       })()
@@ -48,12 +54,10 @@ export const ConnectButtonSub = () => {
       setPgpPrivateKey(null)
     }
   }
-console.log(wallet)
   useEffect(() => {
-    newFunc()
+    setUserData()
   }, [wallet])
 
-console.log(account)
   useEffect(() => {
     (async () => {
       if (account && signer) {
@@ -63,25 +67,22 @@ console.log(account)
   }, [account, signer]);
 
 
-  //move user creation to a hook
   const handleUserCreation = async () => {
     if (!account && !env) return;
     try {
-      let user = await PushAPI.user.get({ account: account!, env: env });
+      let user  = await fetchChatProfile({ profileId: account! ,env});
       if (!user) {
         if (!signer) return;
-        user = await PushAPI.user.create({
-          signer: signer,
-          env: env,
-        });
+        user = await creteChatProfile({ signer: signer ,env});
       }
       if (user?.encryptedPrivateKey && !pgpPrivateKey) {
-        const decryptPgpKey = await PushAPI.chat.decryptPGPKey({
-          encryptedPGPPrivateKey: user.encryptedPrivateKey,
+        const decryptPgpKey = await decryptPGPKey({
+          encryptedPrivateKey: user.encryptedPrivateKey,
           account: account!,
           signer: signer,
           env: env,
         });
+        if(decryptPgpKey)
         setPgpPrivateKey(decryptPgpKey);
       }
     } catch (e: any) {
@@ -103,8 +104,7 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
  
   button{
     background: ${(props) => `${props.theme.backgroundColor.buttonBackground}!important`};
-    // color: ${(props) => `${props.theme.backgroundColor.buttonText}!important`};
-    color: #fff;
+    color: ${(props) => `${props.theme.textColor.buttonText}!important`};
     text-align:center;
     font-size: 1em;
     cursor:pointer;
@@ -123,4 +123,7 @@ const ConnectButtonDiv = styled.div<IThemeProps>`
   @media ${device.mobileL} {
     font-size: 12px;
   }
+  body.modal-open {
+    overflow-y: hidden;
+  }
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
index c0130adb9..e626a4465 100644
--- a/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
+++ b/packages/uiweb/src/lib/components/chat/ConnectButton/index.tsx
@@ -1,30 +1,23 @@
 import { IChatTheme } from '../theme';
 
 import { ConnectButtonSub } from './ConnectButton';
-import { InfuraAPIKey } from '../../../config';
+import { BLOCKNATIVE_PROJECT_ID, InfuraAPIKey } from '../../../config';
 import { Web3OnboardProvider } from '@web3-onboard/react';
 import injectedModule from '@web3-onboard/injected-wallets';
 import walletConnectModule from '@web3-onboard/walletconnect'
 import init from '@web3-onboard/core';
-import { ethers } from 'ethers';
 
+const APP_META_DATA = {
+  name: 'Push Protocol',
+  icon: 'https://files.slack.com/files-pri/T011WQBLH39-F05QWQA0MSR/pushlogoblocknative.png',
+  description: 'Example showcasing how to connect a wallet.',
 
-/**
- * @interface IThemeProps
- * this interface is used for defining the props for styled components
- */
-interface IThemeProps {
-  theme?: IChatTheme;
-}
-
-const wcv2InitOptions = {
-  projectId: '64a44a0fb537407bfe97d24330e4109c',
-  requiredChains: [1, 56]
+  recommendedInjectedWallets: [
+    { name: 'MetaMask', url: 'https://metamask.io' },
+  ]
 }
 
-const walletConnect = walletConnectModule(wcv2InitOptions)
-//move to config
-const chains = [
+const CHAINS = [
   {
     id: '0x1',
     token: 'ETH',
@@ -62,23 +55,23 @@ const chains = [
     rpcUrl: 'https://rpc.ankr.com/arbitrum'
   }
 ]
-const wallets = [injectedModule(), walletConnect]
 
-//move to config
-const appMetadata = {
-  name: 'Push Protocol',
-  icon: 'https://files.slack.com/files-pri/T011WQBLH39-F05QWQA0MSR/pushlogoblocknative.png',
-  description: 'Example showcasing how to connect a wallet.',
 
-  recommendedInjectedWallets: [
-    { name: 'MetaMask', url: 'https://metamask.io' },
-  ]
+const wcv2InitOptions = {
+  projectId: BLOCKNATIVE_PROJECT_ID,
+  requiredChains: [1, 56]
 }
 
+const walletConnect = walletConnectModule(wcv2InitOptions)
+
+const wallets = [injectedModule(), walletConnect]
+
+
+
 const web3OnBoard = init({
   wallets,
-  chains,
-  appMetadata,
+  chains:CHAINS,
+  appMetadata:APP_META_DATA,
   accountCenter: {
     desktop: {
       enabled: false
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
index d5a219a3e..a9fd41ade 100644
--- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -25,7 +25,6 @@ import {
   getDefaultFeedObject,
   getNewChatUser,
   setAccessControl,
-  walletToPCAIP10,
 } from '../../../helpers';
 import useFetchChat from '../../../hooks/chat/useFetchChat';
 import useGetChatProfile from '../../../hooks/useGetChatProfile';
@@ -33,7 +32,6 @@ import useGetGroup from '../../../hooks/chat/useGetGroup';
 import useApproveChatRequest from '../../../hooks/chat/useApproveChatRequest';
 import useToast from '../helpers/NewToast';
 
-
 import {
   useChatData,
   useClickAway,
@@ -53,13 +51,204 @@ interface IThemeProps {
   theme?: IChatTheme;
 }
 
+export interface JoinVerificationGroupSectionProps {
+  isRules: boolean;
+  isMember: boolean;
+  onGetTokenClick?: () => void;
+  handleJoinGroup: () => void;
+  checkVerification: () => void;
+}
+
+const JoinVerificationGroupSection: React.FC<
+  JoinVerificationGroupSectionProps
+> = ({ isRules, isMember, onGetTokenClick, handleJoinGroup, checkVerification }) => {
+  const theme = useContext(ThemeContext);
+  const { loading: approveLoading } = useApproveChatRequest();
+  const {
+    verificationSuccessfull,
+    setVerificationSuccessfull,
+    verified,
+    loading: accessLoading,
+  } = useVerifyAccessControl();
+  const { pgpPrivateKey } = useChatData();
+
+  const isJoinGroup = () =>{
+    return pgpPrivateKey && !isMember;
+  }
+
+  const isNotVerified = () =>{
+    return pgpPrivateKey && !verified && isMember && isRules;
+  }
+  return (
+    <>
+      {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={() =>
+                  isJoinGroup()
+                    ? handleJoinGroup()
+                    : 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">
+          <Section
+            padding="10px"
+            theme={theme}
+            gap="32px"
+            flexDirection="column"
+          >
+            <Span
+              fontWeight="500"
+              fontSize="24px"
+              color={theme.textColor?.encryptionMessageText}
+            >
+              Verification Failed
+            </Span>
+            <Span
+              color={theme.textColor?.encryptionMessageText}
+              fontSize="16px"
+            >
+              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}>
+                    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);
+                }}
+              >
+                <TokenGet>
+                  Get Free Tokens
+                  <OpenLink height="12" width="12" />
+                </TokenGet>
+              </TokenWrapper>
+              <ConnectWrapperClose
+                onClick={() => {
+                  setVerificationSuccessfull(true);
+                }}
+              >
+                <ConnectClose>Close</ConnectClose>
+              </ConnectWrapperClose>
+            </Section>
+          </Section>
+        </Modal>
+      )}
+    </>
+  );
+};
+const ConnectButtonSection: React.FC = () => {
+  const { signer } = useChatData();
+  return (
+    <Section
+      width="100%"
+      justifyContent="space-between"
+      alignItems="center"
+      padding="8px"
+    >
+      {!signer && (
+        <Span
+          padding="8px 8px 8px 16px"
+          color="#B6BCD6"
+          fontSize="15px"
+          fontWeight="400"
+          textAlign="start"
+        >
+          You need to connect your wallet to get started
+        </Span>
+      )}
+      <ConnectButtonComp />
+    </Section>
+  );
+};
+
 export const MessageInput: React.FC<MessageInputProps> = ({
   chatId,
   Emoji = true,
   GIF = true,
   File = true,
   isConnected,
-  onClick,
+  onGetTokenClick,
 }) => {
   const [typedMessage, setTypedMessage] = useState<string>('');
   const [showEmojis, setShowEmojis] = useState<boolean>(false);
@@ -81,7 +270,6 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   const isMobile = useDeviceWidthCheck(425);
   const { sendMessage, loading } = usePushSendMessage();
   const {
-    verificationSuccessfull,
     verifyAccessControl,
     setVerificationSuccessfull,
     verified,
@@ -202,11 +390,10 @@ export const MessageInput: React.FC<MessageInputProps> = ({
 
   useEffect(() => {
     if (!account && !env && !chatId) return;
-    if (account && env && chatId && chatFeed && chatFeed?.groupInformation)
-     {
-      setIsMember(checkIfMember(chatFeed,account));
+    if (account && env && chatId && chatFeed && chatFeed?.groupInformation) {
+      setIsMember(checkIfMember(chatFeed, account));
       setIsRules(checkIfAccessVerifiedGroup(chatFeed));
-     }
+    }
   }, [chatId, chatFeed, account, env]);
 
   const addEmoji = (emojiData: EmojiClickData, event: MouseEvent): void => {
@@ -340,12 +527,12 @@ export const MessageInput: React.FC<MessageInputProps> = ({
     }
   };
 
-  //break into different components(connect button, join group and verification, typebar input)
   return !Object.keys(chatFeed || {}).length ? (
     <>
       {!pgpPrivateKey && (isConnected || !!signer) && (
         <TypebarSection
           width="100%"
+          overflow="hidden"
           borderRadius="13px"
           position="static"
           padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
@@ -353,316 +540,154 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Section
-            width="100%"
-            justifyContent="space-between"
-            alignItems="center"
-            padding="8px"
-          >
-            {!signer && (
-              <Span
-                padding="8px 8px 8px 16px"
-                color="#B6BCD6"
-                fontSize="15px"
-                fontWeight="400"
-                textAlign="start"
-              >
-                You need to connect your wallet to get started
-              </Span>
-            )}
-            <ConnectButtonComp />
-          </Section>
+          <ConnectButtonSection />
         </TypebarSection>
       )}
     </>
   ) : !checkIfIntent({ chat: chatFeed, account: account! }) &&
     Object.keys(chatFeed || {}).length ? (
-    <Container theme={theme}>
-      <TypebarSection
-        borderRadius="13px"
-        position="static"
-        padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
-        background={`${theme.backgroundColor?.messageInputBackground}`}
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? (
+    <TypebarSection
+      width="100%"
+      overflow="hidden"
+      borderRadius={theme.borderRadius?.messageInput}
+      position="static"
+      border={theme.border?.messageInput}
+      padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
+      background={`${theme.backgroundColor?.messageInputBackground}`}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      {Object.keys(chatFeed || {}).length && chatFeed?.groupInformation ? (
+        <JoinVerificationGroupSection
+          isMember={isMember}
+          isRules={isRules}
+          onGetTokenClick={onGetTokenClick}
+          handleJoinGroup={handleJoinGroup}
+          checkVerification={checkVerification}
+        />
+      ) : null}
+      {pgpPrivateKey &&
+        (((isRules ? verified : true) && isMember) ||
+          (chatFeed && !chatFeed?.groupInformation)) && (
           <>
-            {pgpPrivateKey && !isMember && (
-              <Section
-                width="100%"
-                justifyContent="space-between"
-                alignItems="center"
-              >
-                <Span
-                  padding="8px 8px 8px 16px"
-                  color={theme.textColor?.chatReceivedBubbleText}
-                  fontSize="15px"
-                  fontWeight="500"
-                  textAlign="start"
+            <Section gap="8px" flex="1" position="static">
+              {Emoji && (
+                <Div
+                  width="25px"
+                  cursor="pointer"
+                  height="25px"
+                  alignSelf="end"
+                  onClick={() => setShowEmojis(!showEmojis)}
                 >
-                  Click on the button to join the group
-                </Span>
-                <ConnectWrapper>
-                  <Connect onClick={() => handleJoinGroup()}>
-                    {approveLoading ? (
-                      <Spinner color="#fff" size="24" />
-                    ) : (
-                      ' Join Group '
-                    )}
-                  </Connect>
-                </ConnectWrapper>
-              </Section>
-            )}
-            {pgpPrivateKey && !verified && isMember && isRules && (
-              <Section
-                width="100%"
-                justifyContent="space-between"
-                alignItems="center"
-              >
-                <Span
-                  padding="8px 8px 8px 16px"
-                  color={theme.textColor?.chatReceivedBubbleText}
-                  fontSize="15px"
-                  fontWeight="500"
-                  textAlign="start"
+                  <EmojiIcon color={theme.iconColor?.emoji} />
+                </Div>
+              )}
+              {showEmojis && (
+                <Section
+                  ref={modalRef}
+                  position="absolute"
+                  bottom="2.5rem"
+                  left="2.5rem"
+                  zIndex="700"
                 >
-                  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={() => checkVerification()}>
-                    {accessLoading ? (
-                      <Spinner color="#fff" size="24" />
-                    ) : (
-                      'Verify Access'
-                    )}
-                  </Connect>
-                </ConnectWrapper>
-              </Section>
-            )}
-            {pgpPrivateKey && !verificationSuccessfull && (
-              <Modal width="439px">
+                  <EmojiPicker
+                    width={isMobile ? 260 : 320}
+                    height={370}
+                    onEmojiClick={addEmoji}
+                  />
+                </Section>
+              )}
+              <MultiLineInput
+                disabled={loading ? true : false}
+                theme={theme}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault();
+                    sendTextMsg();
+                  }
+                }}
+                placeholder="Type your message..."
+                onChange={(e) => onChangeTypedMessage(e.target.value)}
+                value={typedMessage}
+                ref={textAreaRef}
+                rows={1}
+              />
+            </Section>
+            <SendSection position="static">
+              {GIF && (
                 <Section
-                  padding="10px"
-                  theme={theme}
-                  gap="32px"
-                  flexDirection="column"
+                  width="34px"
+                  height="24px"
+                  cursor="pointer"
+                  alignSelf="end"
+                  onClick={() => setGifOpen(!gifOpen)}
                 >
-                  <Span
-                    fontWeight="500"
-                    fontSize="24px"
-                    color={theme.textColor?.encryptionMessageText}
-                  >
-                    Verification Failed
-                  </Span>
-                  <Span
-                    color={theme.textColor?.encryptionMessageText}
-                    fontSize="16px"
-                  >
-                    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">
-                      {' '}
-                      {/* Added marginLeft */}
-                      <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
-                          }
-                        >
-                          1 PUSH Token
-                        </Span>{' '}
-                        in your wallet to be able to send messages.
-                      </Span>
-                    </Section>
-                  </Section>
-                  <Section gap="8px">
-                    <TokenWrapper
-                      onClick={() => {
-                        if (onClick) {
-                          onClick();
-                        }
-                        setVerificationSuccessfull(true);
-                      }}
-                    >
-                      <TokenGet>
-                        Get Free Tokens
-                        <OpenLink height="12" width="12" />
-                      </TokenGet>
-                    </TokenWrapper>
-                    <ConnectWrapperClose
-                      onClick={() => {
-                        setVerificationSuccessfull(true);
-                      }}
-                    >
-                      <ConnectClose>Close</ConnectClose>
-                    </ConnectWrapperClose>
-                  </Section>
+                  <GifIcon />
                 </Section>
-              </Modal>
-            )}
-          </>
-        ) : null}
-        {pgpPrivateKey &&
-          (((isRules ? verified : true) && isMember) ||
-            (chatFeed && !chatFeed?.groupInformation)) && (
-            <>
-              <Section gap="8px" flex="1" position="static">
-                {Emoji && (
-                  <Div
-                    width="25px"
-                    cursor="pointer"
-                    height="25px"
-                    alignSelf="end"
-                    onClick={() => setShowEmojis(!showEmojis)}
-                  >
-                    <EmojiIcon color={theme.iconColor?.emoji} />
-                  </Div>
-                )}
-                {showEmojis && (
-                  <Section
-                    ref={modalRef}
-                    position="absolute"
-                    bottom="2.5rem"
-                    left="2.5rem"
-                    zIndex="700"
-                  >
-                    <EmojiPicker
-                      width={isMobile ? 260 : 320}
-                      height={370}
-                      onEmojiClick={addEmoji}
+              )}
+              {gifOpen && (
+                <Section
+                  position="absolute"
+                  bottom="2.5rem"
+                  zIndex="1"
+                  right={isMobile ? '7rem' : '8rem'}
+                  ref={modalRef}
+                >
+                  <GifPicker
+                    onGifClick={sendGIF}
+                    width={isMobile ? 260 : 320}
+                    height={370}
+                    tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
+                  />
+                </Section>
+              )}
+              <Section onClick={handleUploadFile}>
+                {!fileUploading && File && (
+                  <>
+                    <Section
+                      width="17"
+                      height="24px"
+                      cursor="pointer"
+                      alignSelf="end"
+                    >
+                      <AttachmentIcon color={theme.iconColor?.attachment} />
+                    </Section>
+                    <FileInput
+                      type="file"
+                      ref={fileUploadInputRef}
+                      onChange={(e) => uploadFile(e)}
                     />
-                  </Section>
+                  </>
                 )}
-                <MultiLineInput
-                  disabled={loading ? true : false}
-                  theme={theme}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter' && !event.shiftKey) {
-                      event.preventDefault();
-                      sendTextMsg();
-                    }
-                  }}
-                  placeholder="Type your message..."
-                  onChange={(e) => onChangeTypedMessage(e.target.value)}
-                  value={typedMessage}
-                  ref={textAreaRef}
-                  rows={1}
-                />
               </Section>
-              <SendSection position="static">
-                {GIF && (
-                  <Section
-                    width="34px"
-                    height="24px"
-                    cursor="pointer"
-                    alignSelf="end"
-                    onClick={() => setGifOpen(!gifOpen)}
-                  >
-                    <GifIcon />
-                  </Section>
-                )}
-                {gifOpen && (
-                  <Section
-                    position="absolute"
-                    bottom="2.5rem"
-                    zIndex="1"
-                    right={isMobile ? '7rem' : '8rem'}
-                    ref={modalRef}
-                  >
-                    <GifPicker
-                      onGifClick={sendGIF}
-                      width={isMobile ? 260 : 320}
-                      height={370}
-                      tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
-                    />
-                  </Section>
-                )}
-                <Section onClick={handleUploadFile}>
-                  {!fileUploading && File && (
-                    <>
-                      <Section
-                        width="17"
-                        height="24px"
-                        cursor="pointer"
-                        alignSelf="end"
-                      >
-                        <AttachmentIcon color={theme.iconColor?.attachment} />
-                      </Section>
-                      <FileInput
-                        type="file"
-                        ref={fileUploadInputRef}
-                        onChange={(e) => uploadFile(e)}
-                      />
-                    </>
-                  )}
+              {!(loading || fileUploading) && (
+                <Section
+                  cursor="pointer"
+                  alignSelf="end"
+                  height="24px"
+                  onClick={() => sendTextMsg()}
+                >
+                  <SendCompIcon color={theme.iconColor?.sendButton} />
                 </Section>
-                {!(loading || fileUploading) && (
-                  <Section
-                    cursor="pointer"
-                    alignSelf="end"
-                    height="24px"
-                    onClick={() => sendTextMsg()}
-                  >
-                    <SendCompIcon color={theme.iconColor?.sendButton} />
-                  </Section>
-                )}
+              )}
 
-                {(loading || fileUploading) && (
-                  <Section alignSelf="end" height="24px">
-                    <Spinner color={theme.spinnerColor} size="22" />
-                  </Section>
-                )}
-              </SendSection>
-            </>
-          )}
-      </TypebarSection>
-    </Container>
+              {(loading || fileUploading) && (
+                <Section alignSelf="end" height="24px">
+                  <Spinner color={theme.spinnerColor} size="22" />
+                </Section>
+              )}
+            </SendSection>
+          </>
+        )}
+    </TypebarSection>
   ) : (
     <></>
   );
 };
 
-const Container = styled.div<IThemeProps>`
-  width: 100%;
-  overflow: hidden;
-  border: ${(props) => props.theme.border?.messageInput};
-  border-radius: ${(props) => props.theme.borderRadius?.messageInput};
-`;
-const TypebarSection = styled(Section)`
+const TypebarSection = styled(Section)<{ border?: string }>`
   gap: 10px;
+  border: ${(props) => props.border || 'none'};
   @media ${device.mobileL} {
     gap: 0px;
   }
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx
deleted file mode 100644
index 98f5c3dcc..000000000
--- a/packages/uiweb/src/lib/components/chat/MessageInput/VerificationFailed.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useContext } from 'react'
-import { Modal } from '../helpers/Modal'
-import { Image, Section, Span } from '../../reusables'
-import { ThemeContext } from '../theme/ThemeProvider';
-import TokenGatedIcon from "../../../icons/Token-Gated.svg"
-import OpenLink from "../../../icons/OpenLink";
-import styled from 'styled-components';
-import useVerifyAccessControl from '../../../hooks/chat/useVerifyAccessControl';
-
-
-const VerificationFailed = () => {
-    const theme = useContext(ThemeContext);
-    const { setVerificationSuccessfull, verificationSuccessfull } = useVerifyAccessControl();
-    return (
-        <Modal width='439px'>
-            <Section theme={theme} gap='32px' flexDirection='column'>
-                <Span fontWeight='500' fontSize='24px'>Verification Failed</Span>
-                <Span color={theme.textColor?.encryptionMessageText} fontSize='16px'>Please ensure the following conditions are met to participate and send messages.</Span>
-                <Section gap='8px' alignItems='start'>
-                    <Image verticalAlign='start' height='32' width='32' src={TokenGatedIcon} alt='token-gated' />
-                    <Section flexDirection='column'> {/* Added marginLeft */}
-                        <Span textAlign='start' alignSelf='start'>Token Gated</Span>
-                        <Span textAlign='start'>You need to have 1 PUSH Token in your wallet to be able to send messages.</Span>
-                    </Section>
-                </Section>
-                <Section gap='8px'>
-                    <ConnectWrapper>
-                        <Connect>
-                            Get Tokens
-                            <OpenLink height='12' width='12' />
-                        </Connect>
-                    </ConnectWrapper>
-                    <ConnectWrapperClose onClick={() => {
-                         setVerificationSuccessfull(false)
-                         console.log(verificationSuccessfull) 
-                    }}>
-                        <ConnectClose>
-                            Close
-                        </ConnectClose>
-                    </ConnectWrapperClose>
-                </Section>
-            </Section>
-        </Modal>
-    )
-}
-
-export default VerificationFailed
-
-
-const ConnectWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  `;
-
-const ConnectWrapperClose = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
-
-
-const StyledButton = styled.button`
-    border: 0px;
-    outline: 0px;
-    padding: 22px 9px;
-    font-weight: 500;
-    border-radius: 12px;
-    font-size: 17px;
-    cursor: pointer;
-    width: 147px;
-    height: 44px;
-    text-align: start;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  `;
-
-const StyledButtonClose = styled.button`
-  border: 0px;
-  outline: 0px;
-  padding: 24px 9px;
-  font-weight: 500;
-  border-radius: 12px;
-  font-size: 17px;
-  cursor: pointer;
-  width: 147px;
-  height: 44px;
-  text-align: start;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-`;
-
-
-const Connect = styled(StyledButton)`
-    color: #D53A94;
-    border: 2px solid #D53A94;
-    background: none;
-    gap: 8px;
-  `;
-
-const ConnectClose = styled(StyledButtonClose)`
-    color: rgb(255, 255, 255);
-    background: #D53A94;
-    gap: 8px;
-  `;
diff --git a/packages/uiweb/src/lib/components/chat/ProfileHeader/AddWalletContent.tsx b/packages/uiweb/src/lib/components/chat/ProfileHeader/AddWalletContent.tsx
deleted file mode 100644
index f370e5278..000000000
--- a/packages/uiweb/src/lib/components/chat/ProfileHeader/AddWalletContent.tsx
+++ /dev/null
@@ -1,354 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import styled from "styled-components";
-import { ThemeContext } from "../theme/ThemeProvider";
-import { useChatData } from "../../../hooks";
-import { displayDefaultUser, getAddress, walletToPCAIP10 } from "../../../helpers";
-import { IToast, ModalButtonProps, User } from "../exportedTypes";
-import * as PushAPI from '@pushprotocol/restapi';
-import { ethers } from "ethers";
-import { addWalletValidation } from "../helpers/helper";
-// import ArrowLeftIcon from '../../../icons/ArrowLeft.svg';
-import CloseIcon from '../../../icons/close.svg';
-import { Spinner } from "../../supportChat/spinner/Spinner";
-import { MoreLightIcon }  from '../../../icons/MoreLight';
-import { MoreDarkIcon } from '../../../icons/MoreDark';
-import { SearchIcon } from '../../../icons/SearchIcon';
-import { Section, Span, Image } from "../../reusables/sharedStyling";
-import { AddUserDarkIcon } from '../../../icons/Adddark';
-import { device } from "../../../config";
-import { MemberListContainer } from "./MemberListContainer";
-import useMediaQuery from "../../../hooks/useMediaQuery";
-
-export const AddWalletContent = ({ onSubmit, handlePrevious, onClose, memberList, handleMemberList, title, groupMembers, isLoading, setToastInfo }: { onSubmit: () => void, onClose: () => void, handlePrevious: () => void, memberList: any, handleMemberList: any, title: string, groupMembers: any, isLoading?: boolean, setToastInfo: React.Dispatch<React.SetStateAction<IToast>> }) => {
-  const theme = useContext(ThemeContext);
-
-  const [searchedUser, setSearchedUser] = useState<string>('');
-  const [filteredUserData, setFilteredUserData] = useState<any>(null);
-  const [isInValidAddress, setIsInvalidAddress] = useState<boolean>(false);
-  const [isLoadingSearch, setIsLoadingSearch] = useState<boolean>(false);
-  const { account, env } = useChatData();
-  const isMobile = useMediaQuery(device.mobileL);
-
-
-
-  useEffect(() => {
-    if (isInValidAddress) {
-      setToastInfo({
-        message: 'Invalid Address',
-        status: 'error'
-      })
-    }
-  }, [isInValidAddress]);
-
-  const onChangeSearchBox = (e: any) => {
-    setSearchedUser(e.target.value);
-  };
-
-  const handleUserSearch = async (userSearchData: string): Promise<void> => {
-    try {
-      const caip10 = walletToPCAIP10(userSearchData);
-      let filteredData: User;
-
-      if (userSearchData.length) {
-        filteredData = await PushAPI.user.get({
-          account: caip10,
-          env: env
-        });
-
-        if (filteredData !== null) {
-          setFilteredUserData(filteredData);
-        }
-        // User is not in the protocol. Create new user
-        else {
-          if (ethers.utils.isAddress(userSearchData)) {
-            const displayUser = displayDefaultUser({ caip10 });
-            setFilteredUserData(displayUser);
-          } else {
-            setIsInvalidAddress(true);
-            setFilteredUserData(null);
-          }
-        }
-      } else {
-        setFilteredUserData(null);
-      }
-      setIsLoadingSearch(false);
-    }
-    catch (error) {
-      setToastInfo({
-        message: 'Unsuccessful search, Try again',
-        status: 'error'
-      })
-    }
-  };
-
-  const handleSearch = async (e: any): Promise<void> => {
-    setIsLoadingSearch(true);
-    setIsInvalidAddress(false);
-    e.preventDefault();
-    if (!ethers.utils.isAddress(searchedUser)) {
-      let address: string;
-      try {
-        address = await getAddress(searchedUser, env) as string;
-        // if (!address) {
-        //   address = await library.resolveName(searchedUser);
-        // }
-        // this ensures address are checksummed
-        address = ethers.utils.getAddress(address?.toLowerCase());
-        if (address) {
-          handleUserSearch(address);
-        } else {
-          setIsInvalidAddress(true);
-          setFilteredUserData(null);
-        }
-      } catch (err) {
-        setIsInvalidAddress(true);
-        setFilteredUserData(null);
-      } finally {
-        setIsLoadingSearch(false);
-      }
-    } else {
-      handleUserSearch(searchedUser);
-    }
-  };
-
-  const clearInput = () => {
-    setSearchedUser('');
-    setFilteredUserData(null);
-    setIsLoadingSearch(false);
-  };
-
-  const addMemberToList = (member: User) => {
-    let errorMessage = '';
-
-    errorMessage = addWalletValidation(member, memberList, groupMembers, account);
-
-    if (errorMessage) {
-      setToastInfo({
-        message: `Error`,
-        status: 'error'
-      })
-    } else {
-      handleMemberList((prev: any) => [...prev, { ...member, isAdmin: false }]);
-    }
-
-    setFilteredUserData('');
-    clearInput();
-  };
-
-  const removeMemberFromList = (member: User) => {
-    const filteredMembers = memberList?.filter((user: any) => user.wallets !== member.wallets);
-    handleMemberList(filteredMembers);
-  };
-
-  return (
-    <Section width={isMobile ? '100%' : '410px'} flexDirection='column' padding={isMobile ? '0px auto' : '0px 10px'}>
-      <Section flex='1' flexDirection='row' justifyContent='space-between'>
-
-        {/* <Image src={ArrowLeftIcon} height="24px" maxHeight="24px" width={'auto'} onClick={()=>handlePrevious()} cursor='pointer' /> */}
-
-        <Span textAlign='center' fontSize='20px'>Add Wallets</Span>
-
-        <Image src={CloseIcon} height="24px" maxHeight="24px" width={'auto'} onClick={() => onClose()} cursor='pointer' />
-      </Section>
-
-      <Section margin='50px 0 10px 0' flex='1' flexDirection='row' justifyContent='space-between'>
-        <Span fontSize='18px'>Add Wallets</Span>
-
-        <Span fontSize='14px'>
-          {groupMembers
-            ? `0${memberList?.length + groupMembers?.length} / 09 Members`
-            : `0${memberList?.length} / 09 Members`}
-        </Span>
-      </Section>
-
-      <Section flex='1'>
-        <SearchBarContent onSubmit={handleSearch}>
-          <Input
-            type="text"
-            value={searchedUser}
-            onChange={onChangeSearchBox}
-            placeholder="Search Web3 domain or 0x123..."
-            color={theme.modalPrimaryTextColor}
-            theme={theme}
-          />
-          <Section
-            position="absolute"
-            alignItems="flex-end"
-            width="40px"
-            height="24px"
-            top="22px"
-            right="16px"
-          >
-            {searchedUser.length > 0 && (
-              <Image src={CloseIcon} height="20px" maxHeight="20px" width={'auto'} onClick={() => clearInput()} cursor='pointer' />
-            )}
-            {searchedUser.length == 0 && !filteredUserData && 
-              <div style={{ cursor: 'pointer' }}>
-                <SearchIcon />
-              </div>
-            }
-          </Section>
-        </SearchBarContent>
-      </Section>
-
-      {filteredUserData ? (
-        <MemberList>
-          <MemberListContainer
-            memberData={filteredUserData}
-            handleMemberList={addMemberToList}
-            lightIcon={<AddUserDarkIcon />}
-            darkIcon={<AddUserDarkIcon />}
-          />
-        </MemberList>
-      ) : isLoadingSearch ? (
-        <Section margin="10px 0px 34px 0px">
-          <Spinner size={'35'} color='#cf1c84' />
-        </Section>
-      ) : null}
-
-<MultipleMemberList>
-            {memberList?.map((member: any, index: any) => (
-                <MemberListContainer
-                key={index}
-                memberList={memberList}
-                memberData={member}
-                handleMembers={handleMemberList}
-                handleMemberList={removeMemberFromList}
-                lightIcon={<MoreLightIcon />}
-                darkIcon={<MoreDarkIcon />}
-                />
-            ))}
-            </MultipleMemberList>
-
-            <Section flex='1'>
-                <ModalConfirmButton
-                    onClick={() => onSubmit()}
-                    isLoading={isLoading}
-                    // loaderTitle={groupMembers ? 'Adding Members' : 'Creating group'}
-                    memberListCount={memberList?.length > 0}
-                    theme={theme}
-                >
-                  {groupMembers ? 'Add To Group' : 'Create Group'}
-                  {isLoading && <Spinner size='30' color='#fff' /> }
-                </ ModalConfirmButton>
-            </Section>
-            
-    </Section>
-  )
-}
-
-const SearchBarContent = styled.form`
-  position: relative;
-  display: flex;
-  flex: 1;
-`;
-
-const Input = styled.input`
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-//   min-width: 445px;
-  height: 48px;
-  padding: 0px 50px 0px 16px;
-  margin: 10px 0px 0px;
-  border-radius: 99px;
-  border: 1px solid;
-  border-color: ${(props) => props.theme.modalSearchBarBorderColor};
-  background: ${(props) => props.theme.modalSearchBarBackground};
-  color: ${(props) => props.color || '#000'};
-  &:focus {
-    outline: none;
-    background-image: linear-gradient(
-        ${(props) => props.theme.snapFocusBg},
-        ${(props) => props.theme.snapFocusBg}
-      ),
-      linear-gradient(
-        to right,
-        rgba(182, 160, 245, 1),
-        rgba(244, 110, 246, 1),
-        rgba(255, 222, 211, 1),
-        rgba(255, 207, 197, 1)
-      );
-    background-origin: border;
-    border: 1px solid transparent !important;
-    background-clip: padding-box, border-box;
-  }
-  &::placeholder {
-    color: #657795;
-  }
-  @media ${device.mobileL} {
-    min-width: 100%;
-  }
-`;
-
-const MemberList = styled.div`
-    // justify-content: flex-start;
-    // padding: 0px 2px;
-    // margin: 0 0 34px 0;
-    flex: 1;
-    // background: red;
-    width: 100%;
-`;
-
-const MultipleMemberList = styled.div`
-  overflow-y: auto;
-  height: fit-content;
-  max-height: 216px;
-  padding: 0px 2px;
-  overflow-x: hidden;
-  width: 100%;
-
-  &::-webkit-scrollbar-track {
-    background-color: ${(props) => props.theme.scrollBg};
-  }
-
-  &::-webkit-scrollbar {
-    background-color: ${(props) => props.theme.scrollBg};
-    width: 6px;
-  }
-
-  @media (max-width: 768px) {
-    padding: 0px 0px 0px 0px;
-    max-height: 35vh;
-
-    &::-webkit-scrollbar-track {
-      background-color: none;
-      border-radius: 9px;
-    }
-
-    &::-webkit-scrollbar {
-      background-color: none;
-      width: 4px;
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-image: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0.44, #cf1c84),
-      color-stop(0.72, #cf1c84),
-      color-stop(0.86, #cf1c84)
-    );
-  }
-`;
-
-const ModalConfirmButton = styled.button<ModalButtonProps>`
-    margin: 60px 0 0 0;
-    background: ${(props) => props.memberListCount ? '#CF1C84' : props.theme.groupButtonBackgroundColor};
-    color: ${(props) => props.memberListCount ? '#fff' : props.theme.groupButtonTextColor};
-    border: ${(props) => props.memberListCount ? 'none' : props.theme.modalConfirmButtonBorder};
-    min-width: 50%;
-    box-sizing: border-box;
-    cursor: pointer;
-    border-radius: 15px;
-    padding: 16px;
-    font-size: 1.125rem;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    justify-content: ${(props) => props.isLoading ? 'space-between' : 'center'};
-    box-shadow: none;
-`;
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/exportedTypes.ts b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
index b42fc9590..aa15dfda0 100644
--- a/packages/uiweb/src/lib/components/chat/exportedTypes.ts
+++ b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
@@ -19,7 +19,7 @@ export interface IChatViewComponentProps {
   gif?: boolean;
   file?: boolean;
   isConnected?: boolean;
-  onClick?: () => void;
+  onGetTokenClick?: () => void;
 }
 
 export interface IChatProfile {
@@ -66,7 +66,7 @@ export interface MessageInputProps {
   File?: boolean;
   Image?: boolean;
   isConnected?: boolean;
-  onClick?: () => void;
+  onGetTokenClick?: () => void;
 }
 
 export type UpdateGroupType = {
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
index 1590bfaab..57d237a82 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ChatSearchInput.tsx
@@ -51,7 +51,7 @@ export const ChatSearchInput: React.FC<ChatSearchInputPropType> = ({
       clearInput();
     }
   };
-console.log(theme.border?.searchInput)
+  
   return (
     <Container
       justifyContent="space-between"
diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
index 068ca243b..5761f3742 100644
--- a/packages/uiweb/src/lib/config/constants.ts
+++ b/packages/uiweb/src/lib/config/constants.ts
@@ -18,8 +18,6 @@ export const Constants = {
 };
 
 export const ALCHEMY_API_KEY = 'rtkd-a4JWpnViQBZdNCiFBGTJdp5e0R2';
-export const RAINBOW_PROJECT_ID = 'e22146926e005c4e513b24024521ef51';
-export const RAINBOW_APP_NAME = 'Push-sdk';
 export const NETWORK_DETAILS = {
   5: {
     network: "goerli",
@@ -73,7 +71,7 @@ export const allowedNetworks = {
   ]
 }
 
-export const blockNativeApikey = 'f55f3a76-8510-4af8-9833-b7f85255de83'
+export const BLOCKNATIVE_PROJECT_ID = '64a44a0fb537407bfe97d24330e4109c'
 
 export const InfuraAPIKey = '150f25623ae64d08ab7ec7dd0c6b6ee9';
 
diff --git a/packages/uiweb/src/lib/hooks/index.ts b/packages/uiweb/src/lib/hooks/index.ts
index 7b432b467..0da0a8f8c 100644
--- a/packages/uiweb/src/lib/hooks/index.ts
+++ b/packages/uiweb/src/lib/hooks/index.ts
@@ -8,4 +8,6 @@ export * from './chatAndNotification';
 export * from './useDivOffsetWidth';
 export * from './useDeviceWidthCheck';
 export * from './useGetChatProfile';
-export * from './useMediaQuery';
\ No newline at end of file
+export * from './useMediaQuery';
+export * from './useCreateChatProfile';
+export * from './useDecryptPGPKey';
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
new file mode 100644
index 000000000..fea956c0e
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useCreateChatProfile.ts
@@ -0,0 +1,33 @@
+import * as PushAPI from '@pushprotocol/restapi';
+import { useCallback, useContext } from 'react';
+import { SignerType } from '@pushprotocol/restapi';
+
+export interface CreateChatProfileParams {
+  signer: SignerType | undefined;
+  env:PushAPI.Env
+}
+
+const useCreateChatProfile = () => {
+  const creteChatProfile = useCallback(
+    async ({
+      signer,
+      env
+    }: CreateChatProfileParams): Promise<PushAPI.IUser | undefined> => {
+      try {
+        const profile = await PushAPI.user.create({
+          env: env,
+          signer: signer,
+        });
+        return profile;
+      } catch (error) {
+        console.log(error);
+        return;
+      }
+    },
+    []
+  );
+
+  return { creteChatProfile };
+};
+
+export default useCreateChatProfile;
diff --git a/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts b/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts
new file mode 100644
index 000000000..b5fe1ff37
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useDecryptPGPKey.ts
@@ -0,0 +1,39 @@
+import * as PushAPI from '@pushprotocol/restapi';
+import { useCallback, useContext } from 'react';
+import { SignerType } from '@pushprotocol/restapi';
+
+export interface DecryptPGPKeyParams {
+  account: string;
+  signer: SignerType | undefined;
+  encryptedPrivateKey: string;
+  env:PushAPI.Env
+}
+
+const useDecryptPGPKey = () => {
+  const decryptPGPKey = useCallback(
+    async ({
+      account,
+      encryptedPrivateKey,
+      signer,
+      env
+    }: DecryptPGPKeyParams): Promise<string |  undefined> => {
+      try {
+        const decryptPgpKey = await PushAPI.chat.decryptPGPKey({
+            encryptedPGPPrivateKey: encryptedPrivateKey,
+            account: account!,
+            signer: signer,
+            env: env,
+          });
+        return decryptPgpKey;
+      } catch (error) {
+        console.log(error);
+        return;
+      }
+    },
+    []
+  );
+
+  return { decryptPGPKey };
+};
+
+export default useDecryptPGPKey;