diff --git a/packages/restapi/src/lib/pushNotification/notification.ts b/packages/restapi/src/lib/pushNotification/notification.ts
index c1e5a1438..6e7b245c5 100644
--- a/packages/restapi/src/lib/pushNotification/notification.ts
+++ b/packages/restapi/src/lib/pushNotification/notification.ts
@@ -14,6 +14,7 @@ import {
   getCAIPWithChainId,
   validateCAIP,
   getFallbackETHCAIPAddress,
+  pCAIP10ToWallet,
 } from '../helpers';
 
 import { PushNotificationBaseClass } from './pushNotificationBase';
@@ -50,11 +51,16 @@ export class Notification extends PushNotificationBaseClass {
       raw = false,
     } = options || {};
     try {
-      const account = options?.account
-        ? options.account
-        : this.account
-        ? getFallbackETHCAIPAddress(this.env!, this.account!)
-        : null;
+      let account: string | null;
+      if (options?.account) {
+        if (this.isValidPCaip(options.account)) {
+          account = pCAIP10ToWallet(options.account);
+        } else {
+          account = options.account;
+        }
+      } else if(this.account){
+        account = getFallbackETHCAIPAddress(this.env!, this.account!)
+      }
       // guest mode and valid address check
       this.checkUserAddressExists(account!);
       const nonCaipAccount = this.getAddressFromCaip(account!);
@@ -99,11 +105,16 @@ export class Notification extends PushNotificationBaseClass {
         channel = null,
         raw,
       } = options || {};
-      const account = options?.account
-        ? options.account
-        : this.account
-        ? getFallbackETHCAIPAddress(this.env!, this.account!)
-        : null;
+      let account: string | null;
+      if (options?.account) {
+        if (this.isValidPCaip(options.account)) {
+          account = pCAIP10ToWallet(options.account);
+        } else {
+          account = options.account;
+        }
+      } else if(this.account){
+        account = getFallbackETHCAIPAddress(this.env!, this.account!)
+      }
       this.checkUserAddressExists(account!);
       return await PUSH_USER.getSubscriptions({
         user: account!,
diff --git a/packages/restapi/src/lib/pushNotification/pushNotificationBase.ts b/packages/restapi/src/lib/pushNotification/pushNotificationBase.ts
index 7fe081696..1e8f1bbde 100644
--- a/packages/restapi/src/lib/pushNotification/pushNotificationBase.ts
+++ b/packages/restapi/src/lib/pushNotification/pushNotificationBase.ts
@@ -33,6 +33,8 @@ import {
 import { axiosGet, axiosPost } from '../utils/axiosUtil';
 import { PushAPI } from '../pushapi/PushAPI';
 import { channel } from 'diagnostics_channel';
+import * as viem from 'viem';
+
 
 // ERROR CONSTANTS
 const ERROR_ACCOUNT_NEEDED = 'Account is required';
@@ -843,7 +845,7 @@ export class PushNotificationBaseClass {
         throw new Error('Signer is not provided');
       }
       const pushSigner = new Signer(this.signer);
-      let addAliasRes
+      let addAliasRes;
       if (!pushSigner.isViemSigner(this.signer)) {
         if (!this.signer.provider) {
           throw new Error('ethers provider is not provided');
@@ -875,12 +877,13 @@ export class PushNotificationBaseClass {
         throw new Error('Signer is not provided');
       }
       const pushSigner = new Signer(this.signer);
-      let verifyAliasRes
+      let verifyAliasRes;
       if (!pushSigner.isViemSigner(this.signer)) {
         if (!this.signer.provider) {
           throw new Error('ethers provider is not provided');
         }
-        const addAliasTrxPromise = contract!['verifyChannelAlias'](channelAddress);
+        const addAliasTrxPromise =
+          contract!['verifyChannelAlias'](channelAddress);
         const addAliasTrx = await addAliasTrxPromise;
         await this.signer?.provider?.waitForTransaction(addAliasTrx.hash);
         verifyAliasRes = addAliasTrx.hash;
@@ -926,4 +929,13 @@ export class PushNotificationBaseClass {
   protected getAddressFromCaip(caipAddress: string): string {
     return caipAddress?.split(':')[caipAddress?.split(':').length - 1];
   }
+
+  protected isValidPCaip(address: string): boolean {
+    const addressComponents = address.split(':');
+    return (
+      addressComponents.length == 2 &&
+      addressComponents[0] == 'eip155' &&
+      viem.isAddress(addressComponents[1])
+    );
+  }
 }
diff --git a/packages/restapi/tests/lib/notification/notification.test.ts b/packages/restapi/tests/lib/notification/notification.test.ts
index 9e98fb390..36a6f7b0b 100644
--- a/packages/restapi/tests/lib/notification/notification.test.ts
+++ b/packages/restapi/tests/lib/notification/notification.test.ts
@@ -89,6 +89,15 @@ describe('PushAPI.notification functionality', () => {
       expect(response).not.null;
     });
 
+
+    it('Should return feeds when signer with provider is used', async () => {
+      const response = await userKate.notification.list('SPAM', {
+        account: 'eip155:0xD8634C39BBFd4033c0d3289C4515275102423681',
+      });
+      // console.log(response)
+      expect(response).not.null;
+    });
+
     it('Should return feeds when viem is used', async () => {
       const response = await userViem.notification.list('SPAM');
       // console.log(response);
@@ -267,11 +276,18 @@ describe('PushAPI.notification functionality', () => {
       expect(response.length).not.equal(0);
     });
 
+    it('Signer with account: Should return response', async () => {
+      const response = await userKate.notification.subscriptions({
+        account: 'eip155:0xD8634C39BBFd4033c0d3289C4515275102423681',
+      });
+      expect(response).not.null;
+      expect(response.length).not.equal(0);
+    });
+
     it('Signer with account: Should return response', async () => {
       const response = await userKate.notification.subscriptions({
         account: '0xD8634C39BBFd4033c0d3289C4515275102423681',
       });
-      // console.log(JSON.stringify(response));
       expect(response).not.null;
       expect(response.length).not.equal(0);
     });
@@ -282,7 +298,6 @@ describe('PushAPI.notification functionality', () => {
         raw: false,
         channel: '0xD8634C39BBFd4033c0d3289C4515275102423681',
       });
-      console.log(JSON.stringify(response));
       expect(response).not.null;
     });
   });
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
index 49a4afe39..ab9cbb9f2 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
@@ -1,20 +1,34 @@
-import { ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
+import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
 
 import moment from 'moment';
+import { MdDownload } from 'react-icons/md';
 import { TwitterTweetEmbed } from 'react-twitter-embed';
 import styled from 'styled-components';
-import { MdDownload } from 'react-icons/md';
 
 import { ChatDataContext } from '../../../context';
 import { useChatData } from '../../../hooks';
-import { Image, Section, Span } from '../../reusables';
+import { Div, Image, Section, Span } from '../../reusables';
 import { checkTwitterUrl } from '../helpers/twitter';
 import { ThemeContext } from '../theme/ThemeProvider';
 
-import { FILE_ICON } from '../../../config';
-import { formatFileSize, getPfp, pCAIP10ToWallet, shortenText } from '../../../helpers';
-import { FileMessageContent } from '../../../types';
+import { useConnectWallet, useSetChain } from '@web3-onboard/react';
+import { ethers } from 'ethers';
+import { BsLightning } from 'react-icons/bs';
+import { FaBell, FaLink, FaRegThumbsUp } from 'react-icons/fa';
+import { MdError, MdOpenInNew } from 'react-icons/md';
+import { FILE_ICON, allowedNetworks, device } from '../../../config';
+import { formatFileSize, getPfp, pCAIP10ToWallet, shortenText, sign, toSerialisedHexString } from '../../../helpers';
+import { createBlockie } from '../../../helpers/blockies';
+import { FileMessageContent, FrameDetails, IFrame, IFrameButton } from '../../../types';
+import { extractWebLink, getFormattedMetadata, hasWebLink } from '../../../utilities';
 import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
+import { Button, TextInput } from '../reusables';
+
+import { FileCard } from './cards/file/FileCard';
+import { GIFCard } from './cards/gif/GIFCard';
+import { ImageCard } from './cards/image/ImageCard';
+import { MessageCard } from './cards/message/MessageCard';
+import { TwitterCard } from './cards/twitter/TwitterCard';
 
 const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
   const { user } = useContext(ChatDataContext);
@@ -36,17 +50,53 @@ const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
 
 const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
   const { user } = useContext(ChatDataContext);
-  const [pfp, setPfp] = useState<string>('');
-  const getUserPfp = async () => {
-    const pfp = await getPfp({
-      user: user,
-      recipient: chat.fromCAIP10?.split(':')[1],
-    });
-    if (pfp) {
-      setPfp(pfp);
+  const [chatPic, setChatPic] = useState({
+    pfpsrc: null as string | null,
+    blockie: null as string | null,
+  });
+
+  // For blockie if icon is missing
+  const blockieContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (blockieContainerRef.current && chatPic.blockie && chatPic.pfpsrc === null) {
+      const blockie = createBlockie(chatPic.blockie || '', { size: 8, scale: 5 });
+      blockieContainerRef.current.innerHTML = ''; // Clear the container to avoid duplicating the canvas
+      blockieContainerRef.current.appendChild(blockie);
     }
-  };
+  }, [chatPic.blockie]);
+
   useEffect(() => {
+    const getUserPfp = async () => {
+      try {
+        const pfp = await getPfp({
+          user: user,
+          recipient: chat.fromCAIP10?.split(':')[1],
+        });
+
+        if (pfp) {
+          setChatPic({
+            pfpsrc: pfp,
+            blockie: null,
+          });
+        } else {
+          setChatPic({
+            pfpsrc: null,
+            blockie: chat.fromCAIP10?.split(':')[1],
+          });
+        }
+      } catch (error) {
+        console.error('UIWeb::components::chat::ChatViewBubble::SenderMessageProfilePicture::getUserPfp error', error);
+
+        // fallback to blockie
+        setChatPic({
+          pfpsrc: null,
+          blockie: chat.fromCAIP10?.split(':')[1],
+        });
+      }
+    };
+
+    // resolve user pfp
     getUserPfp();
   }, [chat.fromCAIP10]);
 
@@ -55,17 +105,30 @@ const SenderMessageProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
       justifyContent="start"
       alignItems="start"
     >
-      {chat.fromCAIP10 !== user?.account && (
-        <Section alignItems="start">
-          {pfp && (
+      {chat.fromCAIP10?.split(':')[1] !== user?.account && (
+        <Section
+          alignItems="flex-start"
+          alignSelf="flex-start"
+        >
+          {chatPic.pfpsrc && (
             <Image
-              src={pfp}
+              src={chatPic.pfpsrc}
               alt="profile picture"
               width="40px"
               height="40px"
               borderRadius="50%"
             />
           )}
+
+          {!chatPic.pfpsrc && chatPic.blockie && (
+            <Div
+              ref={blockieContainerRef}
+              height={'40px'}
+              width={'40px'}
+              borderRadius="50%"
+              overflow="hidden"
+            ></Div>
+          )}
         </Section>
       )}
     </Section>
@@ -76,23 +139,20 @@ const MessageWrapper = ({
   chat,
   children,
   isGroup,
-  maxWidth,
 }: {
   chat: IMessagePayload;
   children: ReactNode;
   isGroup: boolean;
-  maxWidth?: string;
 }) => {
   const { user } = useChatData();
   const theme = useContext(ThemeContext);
   return (
-    <Section
+    <MessageSection
       theme={theme}
       flexDirection="row"
       justifyContent="start"
       gap="6px"
-      width="fit-content"
-      maxWidth={maxWidth || 'auto'}
+      width="auto"
     >
       {isGroup && chat?.fromCAIP10 !== user?.account && <SenderMessageProfilePicture chat={chat} />}
       <Section
@@ -102,224 +162,16 @@ const MessageWrapper = ({
         {isGroup && chat?.fromCAIP10 !== user?.account && <SenderMessageAddress chat={chat} />}
         {children}
       </Section>
-    </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%"
-    >
-      <MessageSection
-        gap="5px"
-        background={
-          position
-            ? `${theme.backgroundColor?.chatSentBubbleBackground}`
-            : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
-        }
-        border={position ? `${theme.border?.chatSentBubble}` : `${theme.border?.chatReceivedBubble}`}
-        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.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>
-      </MessageSection>
-    </MessageWrapper>
-  );
-};
-
-const FileCard = ({ chat, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => {
-  const fileContent: FileMessageContent = JSON.parse(chat?.messageContent);
-  const name = fileContent.name;
-
-  const content = fileContent.content as string;
-  const size = fileContent.size;
-
-  return (
-    <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
-        >
-          <MdDownload color="#575757" />
-        </FileDownloadIconAnchor>
-      </Section>
-    </MessageWrapper>
-  );
-};
-
-const ImageCard = ({ chat, position, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => {
-  return (
-    <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>
-    </MessageWrapper>
-  );
-};
-
-const GIFCard = ({ chat, position, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => {
-  return (
-    <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>
-    </MessageWrapper>
-  );
-};
-
-const TwitterCard = ({
-  chat,
-  tweetId,
-  isGroup,
-  position,
-}: {
-  chat: IMessagePayload;
-  tweetId: string;
-  isGroup: boolean;
-  position: number;
-}) => {
-  return (
-    <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>
-    </MessageWrapper>
+    </MessageSection>
   );
 };
 
 export const ChatViewBubble = ({
   decryptedMessagePayload,
-  isGroup = false,
+  isGroup,
 }: {
   decryptedMessagePayload: IMessagePayload;
-  isGroup?: boolean;
+  isGroup: boolean;
 }) => {
   const { user } = useChatData();
   const position =
@@ -333,55 +185,79 @@ export const ChatViewBubble = ({
     decryptedMessagePayload.messageType = 'TwitterFeedLink';
   }
 
-  if (decryptedMessagePayload.messageType === 'GIF') {
-    return (
-      <GIFCard
-        isGroup={isGroup}
-        chat={decryptedMessagePayload}
-        position={position}
-      />
-    );
-  }
-  if (decryptedMessagePayload.messageType === 'Image') {
-    return (
-      <ImageCard
-        isGroup={isGroup}
-        chat={decryptedMessagePayload}
-        position={position}
-      />
-    );
-  }
-  if (decryptedMessagePayload.messageType === 'File') {
-    return (
-      <FileCard
-        isGroup={isGroup}
-        chat={decryptedMessagePayload}
-        position={position}
-      />
-    );
-  }
-  if (decryptedMessagePayload.messageType === 'TwitterFeedLink') {
-    return (
-      <TwitterCard
-        tweetId={tweetId}
-        isGroup={isGroup}
-        chat={decryptedMessagePayload}
-        position={position}
-      />
-    );
-  }
   return (
-    <MessageCard
-      isGroup={isGroup}
+    <MessageWrapper
       chat={decryptedMessagePayload}
-      position={position}
-    />
+      isGroup={isGroup}
+    >
+      {/* Message Card */}
+      {decryptedMessagePayload.messageType === 'Text' && (
+        <MessageCard
+          isGroup={isGroup}
+          chat={decryptedMessagePayload}
+          position={position}
+          account={user?.account ?? ''}
+        />
+      )}
+
+      {/* Image Card */}
+      {decryptedMessagePayload.messageType === 'Image' && (
+        <ImageCard
+          isGroup={isGroup}
+          chat={decryptedMessagePayload}
+          position={position}
+        />
+      )}
+
+      {/* File Card */}
+      {decryptedMessagePayload.messageType === 'File' && (
+        <FileCard
+          isGroup={isGroup}
+          chat={decryptedMessagePayload}
+          position={position}
+        />
+      )}
+
+      {/* Gif Card */}
+      {decryptedMessagePayload.messageType === 'GIF' && (
+        <GIFCard
+          isGroup={isGroup}
+          chat={decryptedMessagePayload}
+          position={position}
+        />
+      )}
+
+      {/* Twitter Card */}
+      {decryptedMessagePayload.messageType === 'TwitterFeedLink' && (
+        <TwitterCard
+          tweetId={tweetId}
+          isGroup={isGroup}
+          chat={decryptedMessagePayload}
+          position={position}
+        />
+      )}
+
+      {/* Default Message Card */}
+      {decryptedMessagePayload.messageType !== 'Text' &&
+        decryptedMessagePayload.messageType !== 'Image' &&
+        decryptedMessagePayload.messageType !== 'File' &&
+        decryptedMessagePayload.messageType !== 'GIF' &&
+        decryptedMessagePayload.messageType !== 'TwitterFeedLink' && (
+          <MessageCard
+            isGroup={isGroup}
+            chat={decryptedMessagePayload}
+            position={position}
+            account={user?.account ?? ''}
+          />
+        )}
+    </MessageWrapper>
   );
 };
 
-const FileDownloadIconAnchor = styled.a`
-  font-size: 20px;
-`;
-const MessageSection = styled(Section)<{ border: string }>`
-  border: ${(props) => props.border};
+const MessageSection = styled(Section)`
+  max-width: 70%;
+
+  @media ${device.tablet} {
+    max-width: 90%;
+  }
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx
new file mode 100644
index 000000000..4a452cb80
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx
@@ -0,0 +1,88 @@
+// React + Web3 Essentials
+
+// External Packages
+import styled from 'styled-components';
+
+// Internal Compoonents
+import {
+  formatFileSize,
+  getPfp,
+  pCAIP10ToWallet,
+  shortenText,
+  sign,
+  toSerialisedHexString,
+} from '../../../../../helpers';
+import { Image, Section, Span } from '../../../../reusables';
+
+// Internal Configs
+import { FILE_ICON, allowedNetworks } from '../../../../../config';
+
+// Assets
+import { MdDownload } from 'react-icons/md';
+
+// Interfaces & Types
+import { FileMessageContent, FrameDetails, IFrame, IFrameButton } from '../../../../../types';
+import { IMessagePayload } from '../../../exportedTypes';
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+export const FileCard = ({ chat, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => {
+  const fileContent: FileMessageContent = JSON.parse(chat?.messageContent);
+  const name = fileContent.name;
+
+  const content = fileContent.content as string;
+  const size = fileContent.size;
+
+  return (
+    <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
+      >
+        <MdDownload color="#575757" />
+      </FileDownloadIconAnchor>
+    </Section>
+  );
+};
+
+const FileDownloadIconAnchor = styled.a`
+  font-size: 20px;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/gif/GIFCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/gif/GIFCard.tsx
new file mode 100644
index 000000000..ba671b577
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/gif/GIFCard.tsx
@@ -0,0 +1,36 @@
+// React + Web3 Essentials
+
+// External Packages
+
+// Internal Compoonents
+import { Image, Section, Span } from '../../../../reusables';
+
+// Internal Configs
+
+// Assets
+
+// Interfaces & Types
+import { IMessagePayload } from '../../../exportedTypes';
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+export const GIFCard = ({ chat, position, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => {
+  return (
+    <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>
+  );
+};
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx
new file mode 100644
index 000000000..12068eead
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx
@@ -0,0 +1,45 @@
+// React + Web3 Essentials
+
+// External Packages
+
+// Internal Compoonents
+import { Image, Section } from '../../../../reusables';
+
+// Internal Configs
+
+// Assets
+
+// Interfaces & Types
+import { IMessagePayload } from '../../../exportedTypes';
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+
+export const ImageCard = ({
+  chat,
+  position,
+  isGroup,
+}: {
+  chat: IMessagePayload;
+  position: number;
+  isGroup: boolean;
+}) => {
+  return (
+    <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>
+  );
+};
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
new file mode 100644
index 000000000..a73d28ee3
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
@@ -0,0 +1,526 @@
+// React + Web3 Essentials
+import { useContext, useState } from 'react';
+
+// External Packages
+import { useConnectWallet, useSetChain } from '@web3-onboard/react';
+import { ethers } from 'ethers';
+import styled from 'styled-components';
+
+// Internal Compoonents
+import { FILE_ICON, allowedNetworks } from '../../../../../config';
+import {
+  formatFileSize,
+  getPfp,
+  pCAIP10ToWallet,
+  shortenText,
+  sign,
+  toSerialisedHexString,
+} from '../../../../../helpers';
+import { useChatData } from '../../../../../hooks';
+import { extractWebLink, getFormattedMetadata, hasWebLink } from '../../../../../utilities';
+import { Anchor, Button, Image, Section, Span } from '../../../../reusables';
+import { TextInput } from '../../../reusables';
+import useToast from '../../../reusables/NewToast';
+import { ThemeContext } from '../../../theme/ThemeProvider';
+
+// Internal Configs
+
+// Assets
+import { BsLightning } from 'react-icons/bs';
+import { FaBell, FaLink, FaRegThumbsUp } from 'react-icons/fa';
+import { MdError, MdOpenInNew } from 'react-icons/md';
+
+// Interfaces & Types
+import { IFrame, IFrameButton } from '../../../../../types';
+import { IChatTheme } from '../../../exportedTypes';
+import { getAddress, toHex } from 'viem';
+
+interface FrameInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  theme: IChatTheme;
+}
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+export const FrameRenderer = ({
+  url,
+  account,
+  messageId,
+  frameData,
+  proxyServer,
+}: {
+  url: string;
+  account: string;
+  messageId: string;
+  frameData: IFrame;
+  proxyServer: string;
+}) => {
+  const { env, user, pgpPrivateKey } = useChatData();
+
+  const [{ wallet }] = useConnectWallet();
+  const [{ connectedChain }, setChain] = useSetChain();
+
+  const frameRenderer = useToast();
+  const [FrameData, setFrameData] = useState<IFrame>(frameData as IFrame);
+  const [inputText, setInputText] = useState<string>('');
+  const [imageLoadingError, setImageLoadingError] = useState<boolean>(false);
+
+  // get theme
+  const theme = useContext(ThemeContext);
+
+  const getButtonIconContent = (button: IFrameButton) => {
+    switch (button.action) {
+      case 'link':
+        return (
+          <FrameSpan>
+            <FaLink /> {button.content}
+          </FrameSpan>
+        );
+
+      case 'post_redirect':
+        return (
+          <FrameSpan>
+            <MdOpenInNew /> {button.content}
+          </FrameSpan>
+        );
+      case 'tx':
+        return (
+          <FrameSpan>
+            <BsLightning /> {button.content}
+          </FrameSpan>
+        );
+
+      case button?.action?.includes('subscribe') && 'subscribe':
+        return (
+          <FrameSpan>
+            <FaBell /> {button.content}
+          </FrameSpan>
+        );
+      default:
+        return <FrameSpan style={{}}>{button.content}</FrameSpan>;
+    }
+  };
+
+  const handleChainChange = async (desiredChainId: string) => {
+    const desiredChainIdNumber = Number(desiredChainId.split(':')[1]);
+
+    if (connectedChain?.id !== toHex(desiredChainIdNumber)) {
+      if (allowedNetworks[env].some((chain) => chain === desiredChainIdNumber)) {
+        await setChain({
+          chainId: toHex(desiredChainIdNumber),
+        });
+      } else {
+        frameRenderer.showMessageToast({
+          toastTitle: 'Error',
+          toastMessage: 'Chain not supported',
+          toastType: 'ERROR',
+          getToastIcon: (size: any) => (
+            <MdError
+              size={size}
+              color="red"
+            />
+          ),
+        });
+        return { status: 'failure', message: 'Chain not supported' };
+      }
+    }
+    return { status: 'success', message: 'Chain switch not required' };
+  };
+
+  // Function to subscribe to a channel
+  const subscribeToChannel = async (button: IFrameButton) => {
+    if (!user) {
+      console.log('User not initialized');
+      return { status: 'failure', message: 'User not initialized' };
+    }
+    const { status, message } = await handleChainChange(button.action!);
+    if (status === 'failure') {
+      console.log('Chain switch failed');
+      return { status: 'failure', message };
+    }
+    try {
+      const addressChecksummed = getAddress(button.target!);
+      const chainId = button.action?.split(':')[1];
+      const response = await user.notification.subscribe(`eip155:${chainId}:${addressChecksummed}`);
+      if (response.status === 204) {
+        frameRenderer.showMessageToast({
+          toastTitle: 'Success',
+          toastMessage: 'Subscribed Successfully',
+          toastType: 'SUCCESS',
+          getToastIcon: (size: any) => (
+            <FaRegThumbsUp
+              size={size}
+              color="green"
+            />
+          ),
+        });
+        return { status: 'success', message: 'Subscribed' };
+      } else {
+        frameRenderer.showMessageToast({
+          toastTitle: 'Error',
+          toastMessage: JSON.stringify(response.message) ?? 'Subscription failed',
+          toastType: 'ERROR',
+          getToastIcon: (size: any) => (
+            <MdError
+              size={size}
+              color="red"
+            />
+          ),
+        });
+        return {
+          status: 'failure',
+          message: JSON.stringify(response.message) ?? 'Subscription failed',
+        };
+      }
+    } catch (error) {
+      frameRenderer.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: 'Something went wrong',
+        toastType: 'ERROR',
+        getToastIcon: (size: any) => (
+          <MdError
+            size={size}
+            color="red"
+          />
+        ),
+      });
+      return { status: 'failure', message: 'Something went wrong' };
+    }
+  };
+
+  // Function to trigger a transaction
+  const TriggerTx = async (data: any) => {
+    if (!data || !data.params || !data.chainId) return { status: 'failure', message: 'Invalid data' };
+    const { status, message } = await handleChainChange(data.chainId);
+    if (status === 'failure') {
+      console.log('Chain switch failed');
+      return { status: 'failure', message };
+    }
+    if (!wallet) {
+      console.log('wallet not connected');
+      return { status: 'failure', message: 'Wallet not connected' };
+    }
+    let hash = undefined;
+    try {
+      const provider = new ethers.providers.Web3Provider(wallet.provider, 'any');
+
+      const signer = provider.getSigner();
+      const tx = await signer.sendTransaction({
+        from: account,
+        to: data.params.to,
+        value: data.params.value,
+        data: data.params.data,
+        chainId: Number(data.chainId.slice(7)),
+      });
+      hash = tx.hash;
+      return { hash, status: 'success', message: 'Transaction sent' };
+    } catch (error: any) {
+      frameRenderer.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: error?.data?.message ?? error?.message ?? 'Failed',
+        toastType: 'ERROR',
+        getToastIcon: (size: any) => (
+          <MdError
+            size={size}
+            color="red"
+          />
+        ),
+      });
+      return {
+        hash: 'Failed',
+        status: 'failure',
+        message: error?.data?.message ?? error?.message ?? 'Failed',
+      };
+    }
+  };
+
+  // Function to handle button click on a frame button
+  const onButtonClick = async (button: IFrameButton) => {
+    if (!FrameData.isValidFrame) return;
+
+    if (button.action === 'mint') {
+      frameRenderer.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: 'Mint Action is not supported',
+        toastType: 'ERROR',
+        getToastIcon: (size: any) => (
+          <MdError
+            size={size}
+            color="red"
+          />
+        ),
+      });
+      return;
+    }
+    let hash;
+
+    const serializedProtoMessage = await toSerialisedHexString({
+      url: url,
+      unixTimestamp: Date.now().toString(),
+      buttonIndex: Number(button.index),
+      inputText: FrameData.frameDetails?.inputText ? inputText : 'undefined',
+      state: FrameData.frameDetails?.state ?? '',
+      transactionId: hash ?? '',
+      address: account,
+      messageId: messageId,
+      chatId: window.location.href.split('/').pop() ?? 'null',
+      clientProtocol: 'push',
+      env: env,
+    });
+    const signedMessage = await sign({
+      message: serializedProtoMessage,
+      signingKey: user?.decryptedPgpPvtKey ?? pgpPrivateKey!,
+    });
+
+    // If the button action is post_redirect or link, opens the link in a new tab
+    if (button.action === 'post_redirect' || button.action === 'link') {
+      window.open(button.target!, '_blank');
+      return;
+    }
+
+    // If the button action is subscribe, subscribes to the channel and then makes a POST call to the Frame server
+    if (button.action?.includes('subscribe')) {
+      const response = await subscribeToChannel(button);
+      if (response.status === 'failure') {
+        return;
+      }
+    }
+
+    // If the button action is tx, triggers a transaction and then makes a POST call to the Frame server
+    if (button.action === 'tx' && button.target) {
+      const response = await fetch(`${proxyServer}/${button.target}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Origin: window.location.origin,
+        },
+        body: JSON.stringify({
+          clientProtocol: 'push',
+          untrustedData: {
+            url: url,
+            unixTimestamp: Date.now().toString(),
+            buttonIndex: Number(button.index),
+            inputText: FrameData.frameDetails?.inputText ? inputText : 'undefined',
+            state: FrameData.frameDetails?.state ?? '',
+            transactionId: hash ?? '',
+            address: account,
+            messageId: messageId,
+            chatId: window.location.href.split('/').pop() ?? 'null',
+            clientProtocol: 'push',
+            env: env,
+          },
+          trustedData: {
+            messageBytes: serializedProtoMessage,
+            pgpSignature: signedMessage,
+          },
+        }),
+      });
+
+      if (!response.ok) return;
+
+      const data = await response.json();
+      const { hash: txid, status } = await TriggerTx(data);
+      hash = txid;
+
+      if (!txid || status === 'failure') return;
+    }
+
+    // Makes a POST call to the Frame server after the action has been performed
+
+    let post_url = button.post_url ?? FrameData.frameDetails?.postURL ?? url;
+
+    if (button.action === 'post') {
+      post_url = button.target ?? button.post_url ?? FrameData.frameDetails?.postURL ?? url;
+    }
+    if (!post_url) return;
+    const response = await fetch(`${proxyServer}/${post_url}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Origin: window.location.origin,
+      },
+      body: JSON.stringify({
+        clientProtocol: 'push',
+        untrustedData: {
+          url: url,
+          unixTimestamp: Date.now().toString(),
+          buttonIndex: Number(button.index),
+          inputText: FrameData.frameDetails?.inputText ? inputText : 'undefined',
+          state: FrameData.frameDetails?.state ?? '',
+          transactionId: hash ?? '',
+          address: account,
+          messageId: messageId,
+          chatId: window.location.href.split('/').pop() ?? 'null',
+          clientProtocol: 'push',
+          env: env,
+        },
+        trustedData: {
+          messageBytes: serializedProtoMessage,
+          pgpSignature: signedMessage,
+        },
+      }),
+    });
+
+    const data = await response.text();
+
+    const frameDetails: IFrame = getFormattedMetadata(url, data);
+    setInputText('');
+
+    setFrameData(frameDetails);
+  };
+
+  return (
+    <Section
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      width="100%"
+      minWidth="inherit"
+      maxWidth="inherit"
+      background={theme.backgroundColor?.chatFrameBackground}
+    >
+      {FrameData.isValidFrame && (
+        <>
+          <Section padding="0px 0px 8px 0px">
+            <Anchor
+              href={url}
+              target="blank"
+            >
+              {!imageLoadingError && (
+                <Image
+                  src={FrameData.frameDetails?.image ?? FrameData.frameDetails?.ogImage ?? ''}
+                  alt="Frame Fallback"
+                  style={{
+                    width: '100%',
+                  }}
+                  onError={() => {
+                    setImageLoadingError(true);
+                  }}
+                />
+              )}
+              {imageLoadingError && (
+                <Section
+                  width="100%"
+                  padding="16px"
+                  background={theme.backgroundColor?.chatFrameBackground}
+                  color={theme.textColor?.chatReceivedBubbleText}
+                >
+                  Image cannot be loaded
+                </Section>
+              )}
+            </Anchor>
+          </Section>
+
+          {/* Render input field */}
+          {FrameData.frameDetails?.inputText && (
+            <Section padding="8px 12px">
+              <FrameInput
+                theme={theme}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputText(e.target.value)}
+                value={inputText}
+                placeholder={FrameData.frameDetails?.inputText}
+              />
+            </Section>
+          )}
+
+          {/* Render buttons */}
+          {FrameData.frameDetails && FrameData.frameDetails.buttons.length > 0 && (
+            <FrameButtonSection
+              padding="8px 12px"
+              gap="8px"
+              justifyContent="space-between"
+            >
+              {FrameData.frameDetails.buttons.map((button) => (
+                <FrameButton
+                  theme={theme}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onButtonClick(button);
+                  }}
+                >
+                  {getButtonIconContent(button)}
+                </FrameButton>
+              ))}
+            </FrameButtonSection>
+          )}
+
+          {/* Render Preview */}
+          <Section
+            padding="8px 12px"
+            justifyContent="flex-end"
+          >
+            <PreviewAnchor
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+              color={theme.textColor?.chatFrameURLText}
+            >
+              {new URL(url).hostname}
+            </PreviewAnchor>
+          </Section>
+        </>
+      )}
+    </Section>
+  );
+};
+
+const FrameButtonSection = styled(Section)`
+  flex-wrap: wrap;
+`;
+
+const FrameButton = styled(Button)`
+  flex: 1;
+  flex-wrap: wrap;
+  padding: 12px 8px;
+  background: ${(props) =>
+    props.theme.backgroundColor.buttonHotBackground ? props.theme.backgroundColor.buttonHotBackground : 'initial'};
+  color: ${(props) => (props.theme.textColor.buttonText ? props.theme.textColor.buttonText : 'initial')};
+  border-radius: ${(props) =>
+    props.theme?.borderRadius.modalInnerComponents ? props.theme?.borderRadius.modalInnerComponents : '0'};
+  border: ${(props) => (props.theme.border.modal ? props.theme.border.modal : 'initial')};
+  min-width: 120px;
+  cursor: pointer;
+`;
+
+const FrameSpan = styled(Span)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+`;
+
+const FrameInput = styled.input<FrameInputProps>`
+  width: 100%;
+  padding: 16px;
+  margin-top: 8px;
+  color: ${(props) => props.theme.textColor?.chatReceivedBubbleText ?? 'inherit'};
+  background: ${(props) => props.theme.backgroundColor?.inputBackground ?? 'inherit'};
+  border: 1px solid transparent;
+  border-radius: ${(props) => props.theme.borderRadius?.chatViewComponent ?? 'inherit'};
+
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: 16px;
+
+  font-weight: 500;
+  [readonly='readonly'] {
+    pointer-events: none;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    background-image: ${(props) => props.theme.backgroundColor?.inputHoverBackground ?? 'initial'};
+    background-clip: padding-box, border-box;
+    border: 1px solid transparent !important;
+  }
+`;
+
+const PreviewAnchor = styled(Anchor)`
+  text-decoration: none;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
new file mode 100644
index 000000000..d76ee44a8
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
@@ -0,0 +1,208 @@
+// React + Web3 Essentials
+import { Fragment, ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
+
+// External Packages
+import moment from 'moment';
+import styled, { keyframes } from 'styled-components';
+
+// Internal Compoonents
+import { extractWebLink, getFormattedMetadata, hasWebLink } from '../../../../../utilities';
+import { Anchor, Image, Section, Span } from '../../../../reusables';
+import { ThemeContext } from '../../../theme/ThemeProvider';
+
+import { IPreviewCallback, PreviewRenderer } from './PreviewRenderer';
+
+// Internal Configs
+
+// Assets
+
+// Interfaces & Types
+import { IMessagePayload, TwitterFeedReturnType } from '../../../exportedTypes';
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+export const MessageCard = ({
+  chat,
+  position,
+  isGroup,
+  account,
+}: {
+  chat: IMessagePayload;
+  position: number;
+  isGroup: boolean;
+  account: string;
+}) => {
+  // get theme
+  const theme = useContext(ThemeContext);
+
+  // get time
+  const time = moment(chat.timestamp).format('hh:mm a');
+
+  // derive message
+  const message =
+    typeof chat.messageObj === 'object' ? (chat.messageObj?.content as string) ?? '' : (chat.messageObj as string);
+
+  // define state
+  const [initialized, setInitialized] = useState({
+    loading: true,
+    additionalClasses: '',
+  });
+
+  // setup callback
+  const previewCallback = (callback: IPreviewCallback) => {
+    // reset initialization
+    setInitialized({
+      ...initialized,
+      loading: callback.loading,
+      additionalClasses: !callback.error ? callback.urlType : '',
+    });
+  };
+
+  return (
+    <MessageCardSection className={initialized.additionalClasses}>
+      {/* Preview Renderer - Start with assuming preview is there, callback handles no preview */}
+      <MessagePreviewSection
+        alignSelf={position ? 'end' : 'start'}
+        borderRadius={position ? '12px 0px 0px 0px' : '0px 12px 0px 0px'}
+        width="100%"
+        minWidth="inherit"
+        maxWidth="inherit"
+        margin="10px 0 0 0"
+      >
+        <PreviewRenderer
+          message={message}
+          account={account}
+          messageId={chat.link ?? 'null'}
+          previewCallback={previewCallback}
+        />
+      </MessagePreviewSection>
+
+      {/* Message Rendering - Always happens */}
+      <MessageSection
+        gap="5px"
+        background={
+          position
+            ? `${theme.backgroundColor?.chatSentBubbleBackground}`
+            : `${theme.backgroundColor?.chatReceivedBubbleBackground}`
+        }
+        border={position ? `${theme.border?.chatSentBubble}` : `${theme.border?.chatReceivedBubble}`}
+        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"
+        >
+          {message.split('\n').map((line: string, lineIndex: number) => (
+            <Span
+              key={lineIndex}
+              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}`}
+            >
+              {line.split(' ').map((word: string, wordIndex: number) =>
+                hasWebLink(word) ? (
+                  <>
+                    <MessageAnchor
+                      key={`anchor-${wordIndex}`}
+                      href={extractWebLink(word) ?? ''}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={initialized.loading ? 'loading' : ''}
+                    >
+                      {word}
+                    </MessageAnchor>
+                    <Fragment key={wordIndex}> </Fragment>
+                  </>
+                ) : (
+                  <Fragment key={wordIndex}>{word} </Fragment>
+                )
+              )}
+            </Span>
+          ))}
+        </Section>
+
+        {/* Timestamp rendering */}
+        <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>
+      </MessageSection>
+    </MessageCardSection>
+  );
+};
+
+const fader = keyframes`
+  0% { opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { opacity: 0.5; }
+`;
+
+const MessagePreviewSection = styled(Section)`
+  overflow: hidden;
+`;
+
+const MessageSection = styled(Section)`
+  box-sizing: border-box;
+`;
+
+const MessageCardSection = styled(Section)`
+  flex-direction: column;
+
+  &.video,
+  &.frame {
+    max-width: 512px;
+    min-width: 240px;
+
+    & > ${MessageSection} {
+      width: 100%;
+
+      box-sizing: border-box;
+      margin-top: 0px;
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  &.video {
+  }
+
+  &.frame {
+  }
+`;
+
+const MessageAnchor = styled(Anchor)`
+  &:first-child.loading {
+    animation: ${fader} 1.5s ease-in infinite;
+  }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/PreviewRenderer.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/PreviewRenderer.tsx
new file mode 100644
index 000000000..5a0380774
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/PreviewRenderer.tsx
@@ -0,0 +1,134 @@
+// React + Web3 Essentials
+import { useEffect, useState } from 'react';
+
+// External Packages
+
+// Internal Compoonents
+import { IFrame } from '../../../../../types';
+import { extractWebLink, getFormattedMetadata, hasWebLink, isSupportedVideoLink } from '../../../../../utilities';
+
+import { FrameRenderer } from './FrameRenderer';
+import { VideoRenderer } from './VideoRenderer';
+
+// Internal Configs
+
+// Assets
+
+// Interfaces & Types
+
+// Constants
+const PROXY_SERVER = 'https://proxy.push.org';
+
+// Exported Interfaces & Types
+export interface IPreviewCallback {
+  loading: boolean;
+  urlType: 'video' | 'frame' | 'other';
+  error: unknown | null;
+}
+
+// Exported Functions
+export const PreviewRenderer = ({
+  message,
+  account,
+  messageId,
+  previewCallback,
+}: {
+  message: string | undefined;
+  account: string;
+  messageId: string;
+  previewCallback?: (callback: IPreviewCallback) => void;
+}) => {
+  // setup frame data
+  const [initialized, setInitialized] = useState({
+    loading: true,
+    frameData: {} as IFrame,
+    url: null as string | null,
+    urlType: 'other' as 'video' | 'frame' | 'other',
+    error: null as unknown | null,
+  });
+
+  // Start by fetching meta tags for the URL
+  useEffect(() => {
+    const fetchMetaTags = async (url: string) => {
+      try {
+        const response = await fetch(`${PROXY_SERVER}/${url}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Origin: window.location.origin,
+          },
+        });
+
+        const htmlText = await response.text();
+
+        // Load frame details
+        const frameDetails: IFrame = getFormattedMetadata(url, htmlText);
+
+        // Check validity
+        if (!frameDetails.isValidFrame) {
+          throw new Error('Invalid frame');
+        }
+
+        // Determine if it's a video
+        const supportedVideo = isSupportedVideoLink(url);
+
+        // define initialized and callback
+        setInitialized((prevState) => ({
+          error: null,
+          loading: false,
+          frameData: frameDetails,
+          url: url,
+          urlType: supportedVideo ? 'video' : 'frame',
+        }));
+      } catch (err) {
+        setInitialized((prevState) => ({
+          ...prevState,
+          loading: false,
+          error: err, // Set the error object here
+          urlType: 'other',
+        }));
+      }
+    };
+
+    if (message && hasWebLink(message)) {
+      const url = extractWebLink(message);
+      fetchMetaTags(url ?? '');
+    } else {
+      // Initiate the callback
+      setInitialized((prevState) => ({
+        ...prevState,
+        loading: false,
+        error: null,
+        urlType: 'other',
+      }));
+    }
+  }, [message]);
+
+  // handle callback on initialization changes
+  useEffect(() => {
+    // callback
+    if (!initialized.loading && previewCallback) {
+      previewCallback({
+        loading: initialized.loading,
+        error: initialized.error,
+        urlType: initialized.urlType,
+      });
+    }
+  }, [initialized]);
+
+  // Render
+  return !initialized.loading && !initialized.error && initialized.url && initialized.urlType === 'frame' ? (
+    <FrameRenderer
+      url={initialized.url}
+      account={account}
+      messageId={messageId}
+      frameData={initialized.frameData}
+      proxyServer={PROXY_SERVER}
+    />
+  ) : !initialized.loading && !initialized.error && initialized.url && initialized.urlType === 'video' ? (
+    <VideoRenderer
+      url={initialized.url}
+      frameData={initialized.frameData}
+    />
+  ) : null;
+};
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/VideoRenderer.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/VideoRenderer.tsx
new file mode 100644
index 000000000..bbb6f14b3
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/VideoRenderer.tsx
@@ -0,0 +1,155 @@
+// React + Web3 Essentials
+import { useContext, useState } from 'react';
+
+// External Packages
+import { useConnectWallet, useSetChain } from '@web3-onboard/react';
+import ReactPlayer from 'react-player/lazy';
+import styled, { keyframes } from 'styled-components';
+
+// Internal Compoonents
+import { IFrame } from '../../../../../types';
+import { Anchor, Button, Image, Section, Span } from '../../../../reusables';
+import useToast from '../../../reusables/NewToast';
+import { ThemeContext } from '../../../theme/ThemeProvider';
+
+// Internal Configs
+
+// Assets
+import { FaPlay } from 'react-icons/fa';
+
+// Interfaces & Types
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+export const VideoRenderer = ({ url, frameData }: { url: string; frameData: IFrame }) => {
+  // -1 is user not interacted, 0 is loading, 1 is loaded
+  const [videoLoaded, setVideoLoaded] = useState<number>(-1);
+
+  // get theme
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Section
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      width="100%"
+      minWidth="inherit"
+      maxWidth="inherit"
+      background={theme.backgroundColor?.chatFrameBackground}
+    >
+      {frameData.isValidFrame && (
+        <>
+          <Section padding="0px 0px 8px 0px">
+            <ReactPlayerSection>
+              {/* remove preview when video is ready */}
+              {videoLoaded !== 1 && (
+                <ReactPlayerImage
+                  src={frameData.frameDetails?.image ?? frameData.frameDetails?.ogImage ?? ''}
+                  className={videoLoaded === 0 ? 'loading' : ''}
+                  alt="React Player Fallback"
+                />
+              )}
+
+              <ReactPlayer
+                url={url}
+                light={frameData.frameDetails?.image ?? frameData.frameDetails?.ogImage ?? ''}
+                playing={true}
+                style={{ position: 'absolute', top: 0, left: 0 }}
+                width="100%"
+                height="100%"
+                onClickPreview={() => {
+                  setVideoLoaded(0);
+                }}
+                onReady={() => setVideoLoaded(1)}
+              />
+            </ReactPlayerSection>
+          </Section>
+
+          {/* Render Preview */}
+          <Section
+            padding="8px 12px"
+            justifyContent="flex-end"
+            flexDirection="column"
+            gap="4px"
+          >
+            {frameData.frameDetails?.ogTitle && (
+              <FrameTitleSpan
+                fontSize={theme.fontSize?.chatFrameTitleText}
+                fontWeight={theme.fontWeight?.chatFrameTitleText}
+                color={theme.textColor?.chatFrameTitleText}
+              >
+                {frameData.frameDetails.ogTitle}
+              </FrameTitleSpan>
+            )}
+
+            {frameData.frameDetails?.ogDescription && (
+              <FrameDescriptionSpan
+                fontSize={theme.fontSize?.chatFrameDescriptionText}
+                color={theme.textColor?.chatFrameDescriptionText}
+              >
+                {frameData.frameDetails.ogDescription}
+              </FrameDescriptionSpan>
+            )}
+
+            <PreviewAnchor
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+              color={theme.textColor?.chatFrameURLText}
+            >
+              {new URL(url).hostname}
+            </PreviewAnchor>
+          </Section>
+        </>
+      )}
+    </Section>
+  );
+};
+
+const ReactPlayerSection = styled(Section)`
+  padding-top: 56.25%;
+  width: 100%;
+  overflow: hidden;
+`;
+
+const fader = keyframes`
+  0% { opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { opacity: 0.5; }
+`;
+
+const ReactPlayerImage = styled(Image)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+
+  z-index: -1;
+  &.loading {
+    animation: ${fader} 1.5s ease-in infinite;
+  }
+`;
+
+const FrameTitleSpan = styled(Span)`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  text-align: start;
+`;
+
+const FrameDescriptionSpan = styled(Span)`
+  text-align: start;
+  width: 100%;
+`;
+
+const PreviewAnchor = styled(Anchor)`
+  align-self: flex-end;
+  text-decoration: none;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/twitter/TwitterCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/twitter/TwitterCard.tsx
new file mode 100644
index 000000000..38702d238
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/twitter/TwitterCard.tsx
@@ -0,0 +1,43 @@
+// React + Web3 Essentials
+
+// External Packages
+import { TwitterTweetEmbed } from 'react-twitter-embed';
+
+// Internal Compoonents
+import { Image, Section, Span } from '../../../../reusables';
+
+// Internal Configs
+
+// Assets
+
+// Interfaces & Types
+import { IMessagePayload } from '../../../exportedTypes';
+
+// Constants
+
+// Exported Interfaces & Types
+
+// Exported Functions
+
+export const TwitterCard = ({
+  chat,
+  tweetId,
+  isGroup,
+  position,
+}: {
+  chat: IMessagePayload;
+  tweetId: string;
+  isGroup: boolean;
+  position: number;
+}) => {
+  return (
+    <Section
+      alignSelf={position ? 'end' : 'start'}
+      maxWidth="100%"
+      width="fit-content"
+      margin="5px 0"
+    >
+      <TwitterTweetEmbed tweetId={tweetId} />
+    </Section>
+  );
+};
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
index 48f270bb7..a97c0d512 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -383,7 +383,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (options: IChatViewLis
               flexDirection="column"
               justifyContent="start"
               width="100%"
-              blur={initialized.isHidden}
+              blur={false}
             >
               {messages &&
                 messages?.map((chat: IMessageIPFS, index: number) => {
diff --git a/packages/uiweb/src/lib/components/chat/reusables/Button.tsx b/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
index 6bcd34ef9..b5b3feb0b 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
@@ -16,7 +16,6 @@ import styled, { ThemeProvider } from 'styled-components';
 import { IChatTheme } from '../theme';
 import { ThemeContext } from '../theme/ThemeProvider';
 
-
 export interface IButtonProps {
   width?: string;
   height?: string;
@@ -31,8 +30,13 @@ type CustomStyleParamsType = {
   fontSize?: string;
   fontWeight?: string;
   padding?: string;
-  border?:string;
-  borderRadius?:string;
+  border?: string;
+  borderRadius?: string;
+  height?: string;
+  maxHeight?: string;
+  whiteSpace?: string;
+  overflow?: string;
+  textOverflow?: string;
 };
 
 /**
@@ -48,15 +52,15 @@ export const Button: React.FC<IButtonProps> = (props) => {
 
   return (
     <ThemeProvider theme={theme}>
-    <ChatButton
-      onClick={onClick}
-      width={width}
-      height={height}
-      theme={theme}
-      customStyle={customStyle}
-    >
-      {props.children}
-    </ChatButton>
+      <ChatButton
+        onClick={onClick}
+        width={width}
+        height={height}
+        theme={theme}
+        customStyle={customStyle}
+      >
+        {props.children}
+      </ChatButton>
     </ThemeProvider>
   );
 };
@@ -66,7 +70,7 @@ const ChatButton = styled.button<IButtonProps>`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap:'2px' ;
+  gap: '2px';
   padding: ${(props) =>
     props.customStyle?.padding ? props.customStyle.padding : '16px'};
   margin-top: 12px;
@@ -83,7 +87,9 @@ const ChatButton = styled.button<IButtonProps>`
       ? props.customStyle.borderRadius
       : props.theme.borderRadius.modalInnerComponents};
   border: ${(props) =>
-    props.customStyle?.border ? props.customStyle.border : props.theme.border.modal};
+    props.customStyle?.border
+      ? props.customStyle.border
+      : props.theme.border.modal};
   font-size: 16px;
   font-weight: ${(props) =>
     props.customStyle?.fontWeight ? props.customStyle.fontWeight : '500'};
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
index b4793de23..377d96874 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -98,26 +98,17 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
         cursor="pointer"
       >
         <>
-          {member?.name ||
-            member?.web3Name ||
-            (loading && (
-              <Section
-                justifyContent="flex-start"
-                minWidth="120px"
-                className={loading ? 'skeleton' : ''}
-              >
-                <Span
-                  fontSize={customStyle?.fontSize ?? '18px'}
-                  fontWeight={customStyle?.fontWeight ?? '400'}
-                  color={customStyle?.textColor ?? theme.textColor?.modalSubHeadingText}
-                  position="relative"
-                  cursor="pointer"
-                >
-                  {/* If name and web3 name then show push user name else show web3 name */}
-                  {member.name && member.web3Name ? member.name : member.name ? member.name : member.web3Name}
-                </Span>
-              </Section>
-            ))}
+          {member?.name || member?.web3Name ? (
+            <Span
+              fontSize={customStyle?.fontSize ?? '18px'}
+              fontWeight={customStyle?.fontWeight ?? '400'}
+              color={customStyle?.textColor ?? theme.textColor?.modalSubHeadingText}
+              position="relative"
+              cursor="pointer"
+            >
+              {member.name && member.web3Name ? member.name : member.name || member.web3Name}
+            </Span>
+          ) : null}
 
           <Tooltip content={copyText}>
             <Section
diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts
index 216a56a73..0149d7cdd 100644
--- a/packages/uiweb/src/lib/components/chat/theme/index.ts
+++ b/packages/uiweb/src/lib/components/chat/theme/index.ts
@@ -37,13 +37,17 @@ interface IBorderRadius {
   chatWidget?: string;
 }
 interface IBackgroundColor {
+  inputBackground?: string;
+  inputHoverBackground?: string;
   chatViewComponentBackground?: string;
   chatProfileBackground?: string;
   messageInputBackground?: string;
   chatSentBubbleBackground?: string;
   chatReceivedBubbleBackground?: string;
+  chatFrameBackground?: string;
   encryptionMessageBackground?: string;
   buttonBackground?: string;
+  buttonHotBackground?: string;
   buttonDisableBackground?: string;
   searchInputBackground?: string;
   modalBackground?: string;
@@ -67,6 +71,9 @@ interface ITextColor {
   messageInputText?: string;
   chatSentBubbleText?: string;
   chatReceivedBubbleText?: string;
+  chatFrameTitleText?: string;
+  chatFrameDescriptionText?: string;
+  chatFrameURLText?: string;
   timestamp?: string;
   encryptionMessageText?: string;
   buttonText?: string;
@@ -102,6 +109,8 @@ interface IFont {
   chatPreviewDateText?: string;
   chatPreviewBadgeText?: string;
   userProfileText?: string;
+  chatFrameTitleText?: string;
+  chatFrameDescriptionText?: string;
 }
 interface IFontWeight {
   chatProfileText?: string;
@@ -120,6 +129,7 @@ interface IFontWeight {
   chatPreviewDateText?: string;
   chatPreviewBadgeText?: string;
   userProfileText?: string;
+  chatFrameTitleText?: string;
 }
 interface IIconColor {
   emoji?: string;
@@ -168,13 +178,18 @@ export const lightChatTheme: IChatTheme = {
   },
 
   backgroundColor: {
+    inputBackground: '#fff',
+    inputHoverBackground:
+      'linear-gradient(rgb(244, 245, 250), rgb(244, 245, 250)), linear-gradient(to right, rgb(182, 160, 245), rgb(244, 110, 246), rgb(255, 222, 211), rgba(161 159 161, 1))',
     chatViewComponentBackground: 'linear-gradient(179.97deg, #EEF5FF 0.02%, #ECE9FA 123.25%)',
     chatProfileBackground: '#fff',
     messageInputBackground: '#fff',
     chatSentBubbleBackground: 'rgb(202, 89, 155)',
     chatReceivedBubbleBackground: '#fff',
+    chatFrameBackground: '#f5f5f5',
     encryptionMessageBackground: '#fff',
     buttonBackground: 'rgb(202, 89, 155)',
+    buttonHotBackground: '#D53A94',
     searchInputBackground: 'rgb(244, 245, 250)',
     modalBackground: '#fff',
     modalInputBackground: 'transparent',
@@ -211,6 +226,8 @@ export const lightChatTheme: IChatTheme = {
     chatPreviewDateText: '12px',
     chatPreviewBadgeText: '12px',
     userProfileText: '18px',
+    chatFrameTitleText: '16px',
+    chatFrameDescriptionText: '14px',
   },
 
   fontWeight: {
@@ -230,6 +247,7 @@ export const lightChatTheme: IChatTheme = {
     chatPreviewDateText: '400',
     chatPreviewBadgeText: '600',
     userProfileText: '500',
+    chatFrameTitleText: '500',
   },
 
   fontFamily: 'inherit',
@@ -265,6 +283,9 @@ export const lightChatTheme: IChatTheme = {
     messageInputText: '#000',
     chatSentBubbleText: '#fff',
     chatReceivedBubbleText: '#000',
+    chatFrameTitleText: '#000',
+    chatFrameDescriptionText: 'rgba(0, 0, 0, 0.5)',
+    chatFrameURLText: '#000',
     timestamp: '400',
     encryptionMessageText: '#000',
     buttonText: '#fff',
@@ -302,13 +323,19 @@ export const darkChatTheme: IChatTheme = {
   },
 
   backgroundColor: {
+    inputBackground: 'rgb(64, 70, 80)',
+    inputHoverBackground:
+      'linear-gradient(#404650, #404650), linear-gradient(to right, rgba(182, 160, 245, 1), rgba(244, 110, 246, 1), rgba(255, 222, 211, 1), rgba(161 159 161, 1))',
     chatViewComponentBackground: 'rgb(40, 42, 46)',
     chatProfileBackground: 'rgb(64, 70, 80)',
     messageInputBackground: 'rgb(64, 70, 80)',
     chatSentBubbleBackground: 'rgb(202, 89, 155)',
     chatReceivedBubbleBackground: 'rgb(64, 70, 80)',
+    chatFrameBackground: '#343536',
     encryptionMessageBackground: 'rgb(64, 70, 80)',
     buttonBackground: 'rgb(202, 89, 155)',
+    buttonHotBackground: '#D53A94',
+    searchInputBackground: 'rgb(64,70,80)',
     modalBackground: 'rgb(47, 49, 55)',
     criteriaLabelBackground: 'rgb(47, 49, 55)',
     modalInputBackground: 'transparent',
@@ -344,6 +371,8 @@ export const darkChatTheme: IChatTheme = {
     chatPreviewDateText: '12px',
     chatPreviewBadgeText: '12px',
     userProfileText: '18px',
+    chatFrameTitleText: '16px',
+    chatFrameDescriptionText: '14px',
   },
 
   fontWeight: {
@@ -363,6 +392,7 @@ export const darkChatTheme: IChatTheme = {
     chatPreviewDateText: '400',
     chatPreviewBadgeText: '600',
     userProfileText: '500',
+    chatFrameTitleText: '500',
   },
 
   fontFamily: 'inherit',
@@ -397,6 +427,9 @@ export const darkChatTheme: IChatTheme = {
     messageInputText: 'rgb(182, 188, 214)',
     chatSentBubbleText: '#fff',
     chatReceivedBubbleText: 'rgb(182, 188, 214)',
+    chatFrameTitleText: 'rgb(182, 188, 214)',
+    chatFrameDescriptionText: 'rgba(182, 188, 214, 0.5)',
+    chatFrameURLText: 'rgb(182, 188, 214)',
     timestamp: 'rgb(182, 188, 214)',
     encryptionMessageText: 'rgb(182, 188, 214)',
     buttonText: '#fff',
diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
index fdea8c739..3efd64a4d 100644
--- a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
+++ b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
@@ -34,6 +34,7 @@ type SectionStyleProps = {
   bottom?: string;
   top?: string;
   left?: string;
+  border?: string;
   borderColor?: string;
   borderStyle?: string;
   borderWidth?: string;
@@ -77,6 +78,7 @@ export const Section = styled.div<SectionStyleProps>`
   border-style: ${(props) => props.borderStyle || 'initial'};
   z-index: ${(props) => props.zIndex || '0'};
   white-space: ${(props) => props.whiteSpace || 'normal'};
+  border: ${(props) => props.border || 'initial'};
 
   &.skeleton {
     > * {
@@ -104,6 +106,8 @@ type DivStyleProps = {
   cursor?: string;
   alignSelf?: string;
   margin?: string;
+  overflow?: string;
+  borderRadius?: string;
   textAlign?: string;
   visibility?: string;
 };
@@ -113,6 +117,8 @@ export const Div = styled.div<DivStyleProps>`
   margin: ${(props) => props.margin || '0px'};
   cursor: ${(props) => props.cursor || 'default'};
   line-height: ${(props) => props.lineHeight || 'initial'};
+  overflow: ${(props) => props.overflow || 'default'};
+  border-radius: ${(props) => props.borderRadius || '0px'};
   align-self: ${(props) => props.alignSelf || 'center'};
   text-align: ${(props) => props.textAlign || 'default'};
 
@@ -277,6 +283,7 @@ type ImageStyleProps = {
   objectFit?: string;
   margin?: string;
 };
+
 export const Image = styled.img<ImageStyleProps>`
   display: ${(props) => props.display || 'flex'};
   height: ${(props) => props.height || 'auto'};
diff --git a/packages/uiweb/src/lib/helpers/address.ts b/packages/uiweb/src/lib/helpers/address.ts
index 3504c4208..86554855f 100644
--- a/packages/uiweb/src/lib/helpers/address.ts
+++ b/packages/uiweb/src/lib/helpers/address.ts
@@ -38,7 +38,11 @@ export const walletToPCAIP10 = (account: string): string => {
 };
 
 export const pCAIP10ToWallet = (wallet: string): string => {
-  if (wallet) wallet = wallet.replace('eip155:', '');
+  // only return the last part of the wallet after :
+  if (wallet) {
+    wallet = wallet.split(':').pop() ?? '';
+  }
+
   return wallet;
 };
 
diff --git a/packages/uiweb/src/lib/helpers/chat/index.ts b/packages/uiweb/src/lib/helpers/chat/index.ts
index 48d7007d6..b5615d704 100644
--- a/packages/uiweb/src/lib/helpers/chat/index.ts
+++ b/packages/uiweb/src/lib/helpers/chat/index.ts
@@ -3,4 +3,5 @@ export * from './search';
 export * from './time';
 export * from './user';
 export * from './utility';
-export * from './localStorage';
\ No newline at end of file
+export * from './localStorage';
+export * from './pgp';
diff --git a/packages/uiweb/src/lib/helpers/chat/pgp.ts b/packages/uiweb/src/lib/helpers/chat/pgp.ts
new file mode 100644
index 000000000..35ebd7e51
--- /dev/null
+++ b/packages/uiweb/src/lib/helpers/chat/pgp.ts
@@ -0,0 +1,52 @@
+import * as openpgp from 'openpgp';
+import * as protobuf from 'protobufjs';
+export const toSerialisedHexString = async (data: {
+  url: string;
+  unixTimestamp: string;
+  buttonIndex: number;
+  inputText: string;
+  state: string;
+  transactionId: string;
+  address: string;
+  messageId: string;
+  chatId: string;
+  clientProtocol: string;
+  env: string;
+}) => {
+  const protoDefinition = `
+            syntax = "proto3";
+
+            message ChatMessage {
+              string url = 1;
+              string unixTimestamp = 2;
+              int32 buttonIndex = 3;
+              string inputText = 4;
+              string state = 5;
+              string transactionId = 6;
+              string address = 7;
+              string messageId = 8;
+              string chatId = 9;
+              string clientProtocol = 10;
+              string env = 11;
+            }
+        `;
+
+  // Load the message
+  const root = protobuf.parse(protoDefinition);
+  const ChatMessage = root.root.lookupType('ChatMessage');
+  const chatMessage = ChatMessage.create(data);
+  const binaryData = ChatMessage.encode(chatMessage).finish();
+  const hexString = Buffer.from(binaryData).toString('hex');
+
+  return hexString;
+};
+export const sign = async ({ message, signingKey }: { message: string; signingKey: string }): Promise<any> => {
+  const messageObject = await openpgp.createMessage({ text: message });
+  const privateKey = await openpgp.readPrivateKey({ armoredKey: signingKey });
+  const signature = await openpgp.sign({
+    message: messageObject,
+    signingKeys: privateKey,
+    detached: true,
+  });
+  return signature;
+};
diff --git a/packages/uiweb/src/lib/types/index.ts b/packages/uiweb/src/lib/types/index.ts
index 7e0cbf1f9..d46024476 100644
--- a/packages/uiweb/src/lib/types/index.ts
+++ b/packages/uiweb/src/lib/types/index.ts
@@ -1,17 +1,17 @@
+import type { IFeeds, ParsedResponseType, PushAPI, Rules } from '@pushprotocol/restapi';
+import { Bytes, TypedDataDomain, TypedDataField, providers } from 'ethers';
 import type { ReactElement } from 'react';
 import type { ENV } from '../config';
-import type { ParsedResponseType, IFeeds, Rules, PushAPI, } from '@pushprotocol/restapi';
-import { Bytes, TypedDataDomain, TypedDataField, providers } from 'ethers';
 
 export interface IMessageIPFS {
-  cid? : string;
-  chatId? :string;
-  event? :string;
-  from?:string;
+  cid?: string;
+  chatId?: string;
+  event?: string;
+  from?: string;
   message?: IMessage;
   meta?: any;
-  origin?:string;
-  reference? :string;
+  origin?: string;
+  reference?: string;
   to?: string[];
   fromCAIP10: string;
   toCAIP10: string;
@@ -84,40 +84,36 @@ export type viemSignerType = {
     message: any;
   }) => Promise<`0x${string}`>;
   getChainId: () => Promise<number>;
-  signMessage: (args: {
-    message: any;
-    account: any;
-    [key: string]: any;
-  }) => Promise<`0x${string}`>;
+  signMessage: (args: { message: any; account: any; [key: string]: any }) => Promise<`0x${string}`>;
   account: { [key: string]: any };
   privateKey?: string;
   provider?: any;
 };
 
-export type SignerType =  ethersV5SignerType| ethersV6SignerType| viemSignerType;;
+export type SignerType = ethersV5SignerType | ethersV6SignerType | viemSignerType;
 
 export type ParsedNotificationType = ParsedResponseType & {
-  channel:string;
+  channel: string;
 };
 
-export type NotificationFeedsType = { [key: string]:ParsedNotificationType};
-export type ChatFeedsType = { [key: string]:IFeeds};
+export type NotificationFeedsType = { [key: string]: ParsedNotificationType };
+export type ChatFeedsType = { [key: string]: IFeeds };
 export interface Web3NameListType {
   [key: string]: string;
 }
 export const PUSH_TABS = {
   CHATS: 'CHATS',
-  APP_NOTIFICATIONS: 'APP_NOTIFICATIONS'
+  APP_NOTIFICATIONS: 'APP_NOTIFICATIONS',
 } as const;
 
 export const SOCKET_TYPE = {
   CHAT: 'chat',
-  NOTIFICATION: 'notification'
+  NOTIFICATION: 'notification',
 } as const;
 
 export const PUSH_SUB_TABS = {
   REQUESTS: 'REQUESTS',
-  SPAM:'SPAM'
+  SPAM: 'SPAM',
 } as const;
 
 export const LOCAL_STORAGE_KEYS = {
@@ -128,55 +124,94 @@ export const SIDEBAR_PLACEHOLDER_KEYS = {
   CHAT: 'CHAT',
   SEARCH: 'SEARCH',
   NOTIFICATION: 'NOTIFICATION',
-  NEW_CHAT: 'NEW_CHAT'
+  NEW_CHAT: 'NEW_CHAT',
 } as const;
 
-export type SidebarPlaceholderKeys = (typeof SIDEBAR_PLACEHOLDER_KEYS)[keyof typeof SIDEBAR_PLACEHOLDER_KEYS];
+export type SidebarPlaceholderKeys = typeof SIDEBAR_PLACEHOLDER_KEYS[keyof typeof SIDEBAR_PLACEHOLDER_KEYS];
 
-export type LocalStorageKeys = (typeof LOCAL_STORAGE_KEYS)[keyof typeof LOCAL_STORAGE_KEYS];
-export type PushTabs = (typeof PUSH_TABS)[keyof typeof PUSH_TABS];
-export type PushSubTabs = (typeof PUSH_SUB_TABS)[keyof typeof PUSH_SUB_TABS];
-export type SocketType = (typeof SOCKET_TYPE)[keyof typeof SOCKET_TYPE];
+export type LocalStorageKeys = typeof LOCAL_STORAGE_KEYS[keyof typeof LOCAL_STORAGE_KEYS];
+export type PushTabs = typeof PUSH_TABS[keyof typeof PUSH_TABS];
+export type PushSubTabs = typeof PUSH_SUB_TABS[keyof typeof PUSH_SUB_TABS];
+export type SocketType = typeof SOCKET_TYPE[keyof typeof SOCKET_TYPE];
 
 export interface FileMessageContent {
-  content: string
-  name: string
-  type: string
-  size: number
+  content: string;
+  name: string;
+  type: string;
+  size: number;
 }
-// export type Messagetype = { messages: IMessageIPFS[]; lastThreadHash: string | null };
+export type Messagetype = {
+  messages: IMessageIPFS[];
+  lastThreadHash: string | null;
+};
 
 export interface IGroup {
-  members: { wallet: string, publicKey: string, isAdmin: boolean, image: string }[],
-  pendingMembers: { wallet: string, publicKey: string, isAdmin: boolean, image: string }[],
-  contractAddressERC20: string | null,
-  numberOfERC20: number,
-  contractAddressNFT: string | null,
-  numberOfNFTTokens: number,
-  verificationProof: string,
-  groupImage: string | null,
-  groupName: string,
-  isPublic: boolean,
-  groupDescription: string | null,
-  groupCreator: string,
-  chatId: string,
-  groupType?:string | undefined,
-  rules?: Rules | null,
+  members: {
+    wallet: string;
+    publicKey: string;
+    isAdmin: boolean;
+    image: string;
+  }[];
+  pendingMembers: {
+    wallet: string;
+    publicKey: string;
+    isAdmin: boolean;
+    image: string;
+  }[];
+  contractAddressERC20: string | null;
+  numberOfERC20: number;
+  contractAddressNFT: string | null;
+  numberOfNFTTokens: number;
+  verificationProof: string;
+  groupImage: string | null;
+  groupName: string;
+  isPublic: boolean;
+  groupDescription: string | null;
+  groupCreator: string;
+  chatId: string;
+  groupType?: string | undefined;
+  rules?: Rules | null;
 }
 
-
 export const MODAL_BACKGROUND_TYPE = {
-  OVERLAY:'OVERLAY',
+  OVERLAY: 'OVERLAY',
   BLUR: 'BLUR',
   TRANSPARENT: 'TRANSPARENT',
+} as const;
+
+export type ModalBackgroundType = keyof typeof MODAL_BACKGROUND_TYPE;
 
-  } as const;
-  
-  export type ModalBackgroundType = keyof typeof MODAL_BACKGROUND_TYPE;
+export const MODAL_POSITION_TYPE = {
+  RELATIVE: 'RELATIVE',
+  GLOBAL: 'GLOBAL',
+} as const;
 
-  export const MODAL_POSITION_TYPE = {
-    RELATIVE:'RELATIVE',
-    GLOBAL: 'GLOBAL',
-    } as const;
-    
-  export type ModalPositionType = keyof typeof MODAL_POSITION_TYPE;
\ No newline at end of file
+export type ModalPositionType = keyof typeof MODAL_POSITION_TYPE;
+export interface IFrameButton {
+  index: string;
+  content: string;
+  action?: string;
+  target?: string;
+  post_url?: string;
+}
+export interface FrameDetails {
+  version: string | null;
+  image: string | null;
+  ogTitle: string | null;
+  ogDescription: string | null;
+  ogType: string | null;
+  ogImage: string | null;
+  siteURL: string | null;
+  postURL: string | null;
+  buttons: IFrameButton[];
+  inputText?: string | null;
+  state?: string | null;
+  ofProtocolIdentifier?: string | null;
+}
+
+export interface IFrame {
+  isValidFrame: boolean;
+  frameType: string;
+  frameDetails?: FrameDetails;
+  message?: string;
+}
diff --git a/packages/uiweb/src/lib/utilities/extractWebLink.ts b/packages/uiweb/src/lib/utilities/extractWebLink.ts
new file mode 100644
index 000000000..547404981
--- /dev/null
+++ b/packages/uiweb/src/lib/utilities/extractWebLink.ts
@@ -0,0 +1,5 @@
+export function extractWebLink(message: string): string | null {
+  const webLinkRegex = /(https?:\/\/[^\s]+)/;
+  const match = message.match(webLinkRegex);
+  return match ? match[0] : null;
+}
diff --git a/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts b/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts
new file mode 100644
index 000000000..6300eb549
--- /dev/null
+++ b/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts
@@ -0,0 +1,219 @@
+import { FrameDetails } from '../types';
+
+export function getFormattedMetadata(URL: string, data: any) {
+  let frameType: string;
+  const frameDetails: FrameDetails = {
+    version: null,
+    image: null,
+    ogTitle: null,
+    ogDescription: null,
+    ogType: null,
+    siteURL: URL,
+    postURL: null,
+    buttons: [],
+    inputText: null,
+    ogImage: null,
+    state: null,
+    ofProtocolIdentifier: null,
+  };
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(data, 'text/html');
+
+  const metaElements: NodeListOf<HTMLMetaElement> = doc.head.querySelectorAll('meta');
+  const fcTags: string[] = [];
+  const ofTags: string[] = [];
+  const ogTags: string[] = [];
+
+  metaElements.forEach((element) => {
+    const name = element.getAttribute('name') ?? element.getAttribute('property');
+    switch (name) {
+      case 'fc:frame':
+      case 'fc:frame:image':
+        fcTags.push(name);
+        break;
+      case 'of:version':
+      case 'of:accepts:push':
+      case 'of:image':
+        ofTags.push(name);
+        break;
+      case 'og:image':
+        ogTags.push(name);
+        if (!ofTags.some((tag) => tag === 'og:image')) {
+          ofTags.push(name);
+        }
+        if (!fcTags.some((tag) => tag === 'og:image')) {
+          fcTags.push(name);
+        }
+        break;
+      case 'og:title':
+      case 'og:description':
+        ogTags.push(name);
+        break;
+      default:
+        break;
+    }
+  });
+
+  if (ofTags.includes('of:version') && ofTags.includes('of:image') && ofTags.includes('of:accepts:push')) {
+    frameType = 'of';
+    metaElements.forEach((element) => {
+      const name = element.getAttribute('name') || element.getAttribute('property');
+      const content = element.getAttribute('content');
+      if (name === 'og:image') {
+        frameDetails.ogImage = content as string;
+      }
+      if (name && content && name.startsWith('of:')) {
+        const index = name.split(':')[2];
+        switch (name) {
+          case 'og:title':
+            frameDetails.ogTitle = content;
+            break;
+          case 'og:description':
+            frameDetails.ogDescription = content;
+            break;
+          case 'og:type':
+            frameDetails.ogType = content;
+            break;
+          case 'of:version':
+            frameDetails.version = content;
+            break;
+          case 'of:image':
+            frameDetails.image = content;
+            break;
+          case 'of:post_url':
+            frameDetails.postURL = content;
+            break;
+          case 'of:input:text':
+            frameDetails.inputText = content;
+            break;
+          case 'of:state':
+            frameDetails.state = content;
+            break;
+          case `of:button:${index}`:
+          case `of:button:${index}:action`:
+          case `of:button:${index}:target`: {
+            let type: 'action' | 'target' | 'content' = name.split(':').pop() as 'action' | 'target' | 'content';
+
+            const buttonIndex = frameDetails.buttons.findIndex((button) => button.index === index);
+            if (buttonIndex !== -1) {
+              if (type === index) type = 'content';
+              frameDetails.buttons[buttonIndex][type] = content;
+            } else {
+              frameDetails.buttons.push({
+                index,
+                content: '',
+                action: '',
+                target: undefined,
+              });
+              if (type === index) type = 'content';
+              frameDetails.buttons[frameDetails.buttons.length - 1][type] = content;
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+    });
+  } else if (fcTags.includes('fc:frame') && fcTags.includes('fc:frame:image')) {
+    frameType = 'fc';
+
+    metaElements.forEach((element) => {
+      const name = element.getAttribute('name') || element.getAttribute('property');
+
+      const content = element.getAttribute('content');
+      if (name === 'og:image') {
+        frameDetails.ogImage = content as string;
+      }
+      if (name && content && name.startsWith('fc:frame')) {
+        const index = name.split(':')[3];
+
+        switch (name) {
+          case 'og:title':
+            frameDetails.ogTitle = content;
+            break;
+          case 'og:description':
+            frameDetails.ogDescription = content;
+            break;
+          case 'og:type':
+            frameDetails.ogType = content;
+            break;
+          case 'fc:frame':
+            frameDetails.version = content;
+            break;
+          case 'fc:frame:image':
+            frameDetails.image = content;
+            break;
+          case 'fc:frame:post_url':
+            frameDetails.postURL = content;
+            break;
+          case 'fc:frame:input:text':
+            frameDetails.inputText = content;
+            break;
+          case 'fc:frame:state':
+            frameDetails.state = content;
+            break;
+          case `fc:frame:button:${index}`:
+          case `fc:frame:button:${index}:action`:
+          case `fc:frame:button:${index}:target`:
+          case `fc:frame:button:${index}:post_url`: {
+            let type: 'action' | 'target' | 'content' | 'post_url' = name.split(':').pop() as
+              | 'action'
+              | 'target'
+              | 'content';
+            const buttonIndex = frameDetails.buttons.findIndex((button) => button.index === index);
+            if (buttonIndex !== -1) {
+              if (type === index) type = 'content';
+              frameDetails.buttons[buttonIndex][type] = content;
+            } else {
+              frameDetails.buttons.push({
+                index,
+                content: '',
+                action: '',
+                target: undefined,
+                post_url: undefined,
+              });
+
+              if (type === index) type = 'content';
+              frameDetails.buttons[frameDetails.buttons.length - 1][type] = content;
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+    });
+  } else if (ogTags.includes('og:image')) {
+    frameType = 'og';
+    metaElements.forEach((element) => {
+      const name = element.getAttribute('name') || element.getAttribute('property');
+      const content = element.getAttribute('content');
+
+      if (name && content && name.startsWith('og:')) {
+        switch (name) {
+          case 'og:image':
+            frameDetails.ogImage = content as string;
+            break;
+          case 'og:title':
+            frameDetails.ogTitle = content;
+            break;
+          case 'og:description':
+            frameDetails.ogDescription = content;
+            break;
+          case 'og:type':
+            frameDetails.ogType = content;
+            break;
+        }
+      }
+    });
+  } else {
+    frameType = 'unsupported';
+
+    return { isValidFrame: false, frameType, message: 'Not a valid Frame' };
+  }
+  frameDetails.buttons.sort((a, b) => parseInt(a.index) - parseInt(b.index));
+
+  return { isValidFrame: true, frameType, frameDetails };
+}
diff --git a/packages/uiweb/src/lib/utilities/hasWebLink.ts b/packages/uiweb/src/lib/utilities/hasWebLink.ts
new file mode 100644
index 000000000..08dbba389
--- /dev/null
+++ b/packages/uiweb/src/lib/utilities/hasWebLink.ts
@@ -0,0 +1,5 @@
+export function hasWebLink(message: string): boolean {
+  const webLinkRegex = /(https?:\/\/[^\s]+)/;
+  const match = message.match(webLinkRegex);
+  return !!match;
+}
diff --git a/packages/uiweb/src/lib/utilities/index.ts b/packages/uiweb/src/lib/utilities/index.ts
index d1269e57b..ed858b0f8 100644
--- a/packages/uiweb/src/lib/utilities/index.ts
+++ b/packages/uiweb/src/lib/utilities/index.ts
@@ -1,6 +1,10 @@
+export * from './extractWebLink';
+export * from './formatType';
+export * from './formatbody';
+export * from './getFormattedMetadata';
+export * from './hasWebLink';
 export * from './http';
+export * from './ipfs';
+export * from './isSupportedVideoLink';
 export * from './media';
-export * from './formatbody';
 export * from './time';
-export * from './ipfs';
-export * from './formatType';
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/utilities/isSupportedVideoLink.ts b/packages/uiweb/src/lib/utilities/isSupportedVideoLink.ts
new file mode 100644
index 000000000..1518e17e5
--- /dev/null
+++ b/packages/uiweb/src/lib/utilities/isSupportedVideoLink.ts
@@ -0,0 +1,15 @@
+export function isSupportedVideoLink(link: string): boolean {
+  const supportedVideoLinks = [
+    'youtube.com',
+    'youtu.be',
+    'vimeo.com',
+    'facebook.com',
+    'soundcloud.com',
+    'mux.com',
+    'wistia.com',
+    'mixcloud.com',
+    'dailymotion.com',
+  ];
+
+  return supportedVideoLinks.some((domain) => link.includes(domain));
+}
diff --git a/packages/uiweb/yarn.lock b/packages/uiweb/yarn.lock
index 3642d95cc..0af02994f 100644
--- a/packages/uiweb/yarn.lock
+++ b/packages/uiweb/yarn.lock
@@ -1667,6 +1667,79 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@protobufjs/aspromise@npm:^1.1.1, @protobufjs/aspromise@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@protobufjs/aspromise@npm:1.1.2"
+  checksum: 10c0/a83343a468ff5b5ec6bff36fd788a64c839e48a07ff9f4f813564f58caf44d011cd6504ed2147bf34835bd7a7dd2107052af755961c6b098fd8902b4f6500d0f
+  languageName: node
+  linkType: hard
+
+"@protobufjs/base64@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@protobufjs/base64@npm:1.1.2"
+  checksum: 10c0/eec925e681081af190b8ee231f9bad3101e189abbc182ff279da6b531e7dbd2a56f1f306f37a80b1be9e00aa2d271690d08dcc5f326f71c9eed8546675c8caf6
+  languageName: node
+  linkType: hard
+
+"@protobufjs/codegen@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "@protobufjs/codegen@npm:2.0.4"
+  checksum: 10c0/26ae337c5659e41f091606d16465bbcc1df1f37cc1ed462438b1f67be0c1e28dfb2ca9f294f39100c52161aef82edf758c95d6d75650a1ddf31f7ddee1440b43
+  languageName: node
+  linkType: hard
+
+"@protobufjs/eventemitter@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@protobufjs/eventemitter@npm:1.1.0"
+  checksum: 10c0/1eb0a75180e5206d1033e4138212a8c7089a3d418c6dfa5a6ce42e593a4ae2e5892c4ef7421f38092badba4040ea6a45f0928869989411001d8c1018ea9a6e70
+  languageName: node
+  linkType: hard
+
+"@protobufjs/fetch@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@protobufjs/fetch@npm:1.1.0"
+  dependencies:
+    "@protobufjs/aspromise": "npm:^1.1.1"
+    "@protobufjs/inquire": "npm:^1.1.0"
+  checksum: 10c0/cda6a3dc2d50a182c5865b160f72077aac197046600091dbb005dd0a66db9cce3c5eaed6d470ac8ed49d7bcbeef6ee5f0bc288db5ff9a70cbd003e5909065233
+  languageName: node
+  linkType: hard
+
+"@protobufjs/float@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@protobufjs/float@npm:1.0.2"
+  checksum: 10c0/18f2bdede76ffcf0170708af15c9c9db6259b771e6b84c51b06df34a9c339dbbeec267d14ce0bddd20acc142b1d980d983d31434398df7f98eb0c94a0eb79069
+  languageName: node
+  linkType: hard
+
+"@protobufjs/inquire@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@protobufjs/inquire@npm:1.1.0"
+  checksum: 10c0/64372482efcba1fb4d166a2664a6395fa978b557803857c9c03500e0ac1013eb4b1aacc9ed851dd5fc22f81583670b4f4431bae186f3373fedcfde863ef5921a
+  languageName: node
+  linkType: hard
+
+"@protobufjs/path@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@protobufjs/path@npm:1.1.2"
+  checksum: 10c0/cece0a938e7f5dfd2fa03f8c14f2f1cf8b0d6e13ac7326ff4c96ea311effd5fb7ae0bba754fbf505312af2e38500250c90e68506b97c02360a43793d88a0d8b4
+  languageName: node
+  linkType: hard
+
+"@protobufjs/pool@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@protobufjs/pool@npm:1.1.0"
+  checksum: 10c0/eda2718b7f222ac6e6ad36f758a92ef90d26526026a19f4f17f668f45e0306a5bd734def3f48f51f8134ae0978b6262a5c517c08b115a551756d1a3aadfcf038
+  languageName: node
+  linkType: hard
+
+"@protobufjs/utf8@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@protobufjs/utf8@npm:1.1.0"
+  checksum: 10c0/a3fe31fe3fa29aa3349e2e04ee13dc170cc6af7c23d92ad49e3eeaf79b9766264544d3da824dba93b7855bd6a2982fb40032ef40693da98a136d835752beb487
+  languageName: node
+  linkType: hard
+
 "@pushprotocol/socket@npm:^0.5.0":
   version: 0.5.3
   resolution: "@pushprotocol/socket@npm:0.5.3"
@@ -1703,15 +1776,18 @@ __metadata:
     html-react-parser: "npm:^1.4.13"
     livekit-client: "npm:^1.13.3"
     moment: "npm:^2.29.4"
+    openpgp: "npm:^5.11.1"
+    protobufjs: "npm:^7.2.6"
     raf: "npm:^3.4.0"
     react-easy-crop: "npm:^4.1.4"
     react-icons: "npm:^4.10.1"
     react-image-file-resizer: "npm:^0.4.7"
+    react-player: "npm:^2.16.0"
     react-toastify: "npm:^9.1.3"
     react-twitter-embed: "npm:^4.0.4"
     uuid: "npm:^9.0.1"
   peerDependencies:
-    "@pushprotocol/restapi": 1.7.13
+    "@pushprotocol/restapi": 0.0.1-alpha.80
     "@pushprotocol/socket": ^0.5.0
     react: ">=16.8.0"
     styled-components: ^6.0.8
@@ -2671,6 +2747,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:>=13.7.0":
+  version: 20.12.10
+  resolution: "@types/node@npm:20.12.10"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10c0/2cc3b6ea09894ed1a3cf39f6491ec539281580f4ff83216e7d26ce85c83237fe0543c0ca49e25b2515ccdb6c8814b488d17a64a05f536dcaea94f9d32a60c7d7
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:^2.0.2":
   version: 2.0.7
   resolution: "@types/trusted-types@npm:2.0.7"
@@ -3210,6 +3295,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asn1.js@npm:^5.0.0":
+  version: 5.4.1
+  resolution: "asn1.js@npm:5.4.1"
+  dependencies:
+    bn.js: "npm:^4.0.0"
+    inherits: "npm:^2.0.1"
+    minimalistic-assert: "npm:^1.0.0"
+    safer-buffer: "npm:^2.1.0"
+  checksum: 10c0/b577232fa6069cc52bb128e564002c62b2b1fe47f7137bdcd709c0b8495aa79cee0f8cc458a831b2d8675900eea0d05781b006be5e1aa4f0ae3577a73ec20324
+  languageName: node
+  linkType: hard
+
 "async-mutex@npm:^0.2.6":
   version: 0.2.6
   resolution: "async-mutex@npm:0.2.6"
@@ -3261,7 +3358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bn.js@npm:^4.11.9, bn.js@npm:^4.4.0":
+"bn.js@npm:^4.0.0, bn.js@npm:^4.11.9, bn.js@npm:^4.4.0":
   version: 4.12.0
   resolution: "bn.js@npm:4.12.0"
   checksum: 10c0/9736aaa317421b6b3ed038ff3d4491935a01419ac2d83ddcfebc5717385295fcfcf0c57311d90fe49926d0abbd7a9dbefdd8861e6129939177f7e67ebc645b21
@@ -3631,7 +3728,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2":
+"deepmerge@npm:^4.0.0, deepmerge@npm:^4.2.2":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
@@ -4974,6 +5071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"load-script@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "load-script@npm:1.0.0"
+  checksum: 10c0/9919c777fe83f8a3a917f65c9c3ab186ad8b194248c57f413ef6e610194abc8484d123a6838d77ab33e5fa1a05a676b5dfe779c38cfe602bdd27c239423d0acd
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -5098,7 +5202,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0":
+"long@npm:^5.0.0":
+  version: 5.2.3
+  resolution: "long@npm:5.2.3"
+  checksum: 10c0/6a0da658f5ef683b90330b1af76f06790c623e148222da9d75b60e266bbf88f803232dd21464575681638894a84091616e7f89557aa087fd14116c0f4e0e43d9
+  languageName: node
+  linkType: hard
+
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -5154,6 +5265,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^5.1.1":
+  version: 5.2.1
+  resolution: "memoize-one@npm:5.2.1"
+  checksum: 10c0/fd22dbe9a978a2b4f30d6a491fc02fb90792432ad0dab840dc96c1734d2bd7c9cdeb6a26130ec60507eb43230559523615873168bcbe8fafab221c30b11d54c1
+  languageName: node
+  linkType: hard
+
 "memoizee@npm:^0.4.15":
   version: 0.4.15
   resolution: "memoizee@npm:0.4.15"
@@ -5537,6 +5655,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-assign@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "object-assign@npm:4.1.1"
+  checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
+  languageName: node
+  linkType: hard
+
 "ofetch@npm:^1.3.3":
   version: 1.3.4
   resolution: "ofetch@npm:1.3.4"
@@ -5580,6 +5705,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openpgp@npm:^5.11.1":
+  version: 5.11.1
+  resolution: "openpgp@npm:5.11.1"
+  dependencies:
+    asn1.js: "npm:^5.0.0"
+  checksum: 10c0/6599c41c9ecb5f6b7d7b46003c2c9cfe56f47da0d3c3d3f06aaad1186a38a6b7a9f9d25b1a730c25d1424836a978b4b81b095fa8bac7f6f7f549c58a9f88a60a
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^2.2.0":
   version: 2.3.0
   resolution: "p-limit@npm:2.3.0"
@@ -5781,6 +5915,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prop-types@npm:^15.7.2":
+  version: 15.8.1
+  resolution: "prop-types@npm:15.8.1"
+  dependencies:
+    loose-envify: "npm:^1.4.0"
+    object-assign: "npm:^4.1.1"
+    react-is: "npm:^16.13.1"
+  checksum: 10c0/59ece7ca2fb9838031d73a48d4becb9a7cc1ed10e610517c7d8f19a1e02fa47f7c27d557d8a5702bec3cfeccddc853579832b43f449e54635803f277b1c78077
+  languageName: node
+  linkType: hard
+
 "proper-lockfile@npm:^4.1.2":
   version: 4.1.2
   resolution: "proper-lockfile@npm:4.1.2"
@@ -5792,6 +5937,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"protobufjs@npm:^7.2.6":
+  version: 7.2.6
+  resolution: "protobufjs@npm:7.2.6"
+  dependencies:
+    "@protobufjs/aspromise": "npm:^1.1.2"
+    "@protobufjs/base64": "npm:^1.1.2"
+    "@protobufjs/codegen": "npm:^2.0.4"
+    "@protobufjs/eventemitter": "npm:^1.1.0"
+    "@protobufjs/fetch": "npm:^1.1.0"
+    "@protobufjs/float": "npm:^1.0.2"
+    "@protobufjs/inquire": "npm:^1.1.0"
+    "@protobufjs/path": "npm:^1.1.2"
+    "@protobufjs/pool": "npm:^1.1.0"
+    "@protobufjs/utf8": "npm:^1.1.0"
+    "@types/node": "npm:>=13.7.0"
+    long: "npm:^5.0.0"
+  checksum: 10c0/e164855536a43aa7941c7d95a2342e466f599d2e033ed89c5f5582fb0e3affeec702810091b850f3b700bfd646260b07bb4d8bb94c107cddcecd92de4d1d62fd
+  languageName: node
+  linkType: hard
+
 "proxy-compare@npm:2.5.1":
   version: 2.5.1
   resolution: "proxy-compare@npm:2.5.1"
@@ -5868,6 +6033,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.0.1":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
+  languageName: node
+  linkType: hard
+
 "react-icons@npm:^4.10.1":
   version: 4.12.0
   resolution: "react-icons@npm:4.12.0"
@@ -5884,6 +6056,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^16.13.1":
+  version: 16.13.1
+  resolution: "react-is@npm:16.13.1"
+  checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
+  languageName: node
+  linkType: hard
+
+"react-player@npm:^2.16.0":
+  version: 2.16.0
+  resolution: "react-player@npm:2.16.0"
+  dependencies:
+    deepmerge: "npm:^4.0.0"
+    load-script: "npm:^1.0.0"
+    memoize-one: "npm:^5.1.1"
+    prop-types: "npm:^15.7.2"
+    react-fast-compare: "npm:^3.0.1"
+  peerDependencies:
+    react: ">=16.6.0"
+  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
+  languageName: node
+  linkType: hard
+
 "react-property@npm:2.0.0":
   version: 2.0.0
   resolution: "react-property@npm:2.0.0"
@@ -6070,7 +6264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safer-buffer@npm:>= 2.1.2 < 3.0.0":
+"safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.1.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"
   checksum: 10c0/7e3c8b2e88a1841c9671094bbaeebd94448111dd90a81a1f606f3f67708a6ec57763b3b47f06da09fc6054193e0e6709e77325415dc8422b04497a8070fa02d4
@@ -6551,6 +6745,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: 10c0/bb673d7876c2d411b6eb6c560e0c571eef4a01c1c19925175d16e3a30c4c428181fb8d7ae802a261f283e4166a0ac435e2f505743aa9e45d893f9a3df017b501
+  languageName: node
+  linkType: hard
+
 "unenv@npm:^1.9.0":
   version: 1.9.0
   resolution: "unenv@npm:1.9.0"