diff --git a/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
index b77ecc674..d83bac3a6 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
@@ -1,8 +1,9 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { ChatAndNotificationWidget, PUSH_TABS } from '@pushprotocol/uiweb';
+import { ChatAndNotificationWidget, IMessageIPFS, PUSH_TABS } from '@pushprotocol/uiweb';
 import { EnvContext, Web3Context } from './context';
 import * as PushAPI from '@pushprotocol/restapi';
 import { IUser } from '@pushprotocol/restapi';
+import { MessageBubble } from '@pushprotocol/uiweb';
 
 export const ChatWidgetTest = () => {
   const { account, library } = useContext<any>(Web3Context);
@@ -30,14 +31,37 @@ export const ChatWidgetTest = () => {
     console.log('in here widget');
   };
 
+  const ImsgObject: IMessageIPFS = {
+    "fromCAIP10": "eip155:0x45F5EDf14EF0C42FC99164c236afc571a6dcB81C",
+    "toCAIP10": "eip155:0x83d4c16b15F7BBA501Ca1057364a1F502d1c34D5",
+    "fromDID": "eip155:0x45F5EDf14EF0C42FC99164c236afc571a6dcB81C",
+    "toDID": "eip155:0x83d4c16b15F7BBA501Ca1057364a1F502d1c34D5",
+    // "messageObj": "U2FsdGVkX1/JsBNKCHHStEj2Z2EsUD8ApyQipFcWsqDnaivZg0gEepbc2Bvf6eXT",
+    "messageContent": "Hi",
+    "messageType": "Text",
+    "timestamp": 1690871453962,
+    "encType": "pgp",
+    "encryptedSecret": "-----BEGIN PGP MESSAGE-----\n\nwcBMA6Um75H3iYJmAQgAsUtS5Fisa9zxw0zZRKGrMplktDjmbai7NSqn/S4c\nqHHkfVmfhkhskyG8SF1aaRSObBEr1H5WnnJyhhrKCAO6TKLiyXnpF/V3xmVT\n0XyR4wFffldFVC2KD5mpQR3XkDWA1a49VP/B4wIal5IZGKlpU/OswNF67cEl\nLwffkY18PfhIfUETwt+jU9gOFRYc9mWAClJA60R699q5bx6huDSfRe2YRNgI\n/cCNzJ3QZpup43P9Y8SlV17NIH/rzntiqKQRHQ8HbHL5FHe5QJw6/AhcBwcl\np+tQTIwL8hW8dEkFb2+eP3ceTXv79eL33LZkPxjQojGOVO7uZpD67cnrso7A\nK8HATAMj6lYp8T/mrAEH/1mF+egNBDhA5tZRGmMvFeX+Tj/uKT1+7OZbsn+H\nup44q228P4hLXawcH2F42CxJcdyJVmJe4wp2QrwB1mnR4zAGd64PKbLPKhep\nMZZ9xI6Fs2jKi5jslt6zCr9BzOjc4mnkP539HQCfOdMmwPBecVS71LHtwtVC\nGeAzf5srltY8RDubbD3Zb3CdryyE4U6BJX2GqYuZ4rBwkQa4avR1LSVg5Mv1\nQaH3Eo04XHRf59gFZsWlB7G2F+tNPchysOtbkTPmqKuuAivd4MCSuvSeILm6\nAqcEp8EqiBWqjw9Pvm+zQBU7eY9gjlqqv+zL2vGNRgSzDOshfCC2QKazfVaM\nJdLSQAH2/4IEf/7XChh9OCjAhXezjEGmFYngIiPA/DWlJ3CQO7BTul9Sj9wc\nxICHBhS32jnUwBeDspqnh71GqvVd6lo=\n=WPiI\n-----END PGP MESSAGE-----\n",
+    "signature": "-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBYJkyKadCZD5DxzgQvFbyxYhBEEVOIDXLai5btMJhPkPHOBC\n8VvLAADZFgf/ekgyH2801dig0ksmHk8CDaF8Q4zXlRe1+nOpHLulzAH5TNox\n6bHE59oBkLgLjOs60CTV4cxr4NYcpBDXdLzK66NyYx/GfrKu5YEOYipNEztx\nwGUgpPkilyeXIFosbkaawfslILmHlMnxv776M09DVQuoxTPMvo5irMl9kLWR\nKZHmLu1EPoVZ92NWj0XRkgGZLsZckMdEyk0sSrpCLq20K8ohgsMAk3sFNsAY\nPz4iwitW3GEWGm01NDMzldCit3c09FqippW7q6E+KniYcDcEJKHfBLYHHzIJ\n/nBXcXSKzecBy1YUhBG32Uwyi/sErhE7z/ITGyN7UB3mIb/w5gWX2Q==\n=O88Q\n-----END PGP SIGNATURE-----\n",
+    "sigType": "pgpv2",
+    // "verificationProof": "pgpv2:-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBYJkyKaeCZD5DxzgQvFbyxYhBEEVOIDXLai5btMJhPkPHOBC\n8VvLAABKHQf+JZan3VndkpYz2ED4GRVdxQYa5IonQjKsm9n0jirsqFaD1i/j\nLF+RGNKGbkejnqTRofL48UZcvBvhaqPERAdF6tCEHkxMp64C5NeUvkHAeWCN\n8O/aOj17BvhknisXiJ+lX9vL1GdZkQeec/FcKAccBG9EvUSzgw7IrGnBnxq3\n9End64mxqjRZAUzYPIB5jyfFT91loHfhmpYh/HKEfoisW5/4OnXb22GqHgjj\nKWK74Q37a/yf+dRjjXNUzCOqVP504K3lQNVkkb4DaAdwyNpUoc+3THImsJG4\ncrc6MUrUPMuiFrpTwCfMmnpY95FInSA2eYoT8Cl5Q9K0gsJ55Yp6Cw==\n=dL8p\n-----END PGP SIGNATURE-----\n",
+    "link": "bafyreigdupvljqldbpbfqs32qz446wa3vynea74zr7dvigpcg4x4ylac5u",
+    // "cid": "bafyreiakghfmhcymarfmvwvnsxaqtc5scyl64cwyydhnbcew4to7zzuaj4"
+  }
+
   return (
-    <ChatAndNotificationWidget
-      account={account}
-      env={env}
-      decryptedPgpPvtKey={pvtKey}
-      signer={librarySigner}
-      // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
-      // activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
-    />
+
+    <>
+      <MessageBubble account={account} chat={ImsgObject} />
+      <ChatAndNotificationWidget
+        account={account}
+        env={env}
+        decryptedPgpPvtKey={pvtKey}
+        signer={librarySigner}
+        // activeTab={PUSH_TABS.APP_NOTIFICATIONS}
+        activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
+      />
+    </>
+
   );
 };
diff --git a/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx b/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
new file mode 100644
index 000000000..3bab0d7f1
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
@@ -0,0 +1,180 @@
+import React, { useContext } from "react";
+import { Section, Span, Image } from "../../reusables";
+import moment from "moment";
+import styled from "styled-components";
+import { chat, type IMessageIPFS } from "@pushprotocol/restapi";
+import { FileMessageContent } from "../../../types";
+import { FILE_ICON } from "../../../config";
+import { formatFileSize, pCAIP10ToWallet, shortenText } from "../../../helpers";
+
+
+const MessageCard = ({
+    chat,
+    position,
+}: {
+    chat: IMessageIPFS;
+    position: number;
+}) => {
+    const time = moment(chat.timestamp).format('hh:mm a');
+    return (
+        <Section
+            gap="5px"
+            background={position ? '#0D67FE' : '#EDEDEE'}
+            padding="8px 12px"
+            borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
+            margin="5px 0"
+            alignSelf={position ? 'end' : 'start'}
+            justifyContent="start"
+            maxWidth="80%"
+            minWidth="71px"
+            position="relative"
+            width="fit-content"
+        >
+            {' '}
+            <Section flexDirection="column" padding="5px 0 15px 0">
+                {chat.messageContent.split('\n').map((str) => (
+                    <Span
+                        key={Math.random().toString()}
+                        alignSelf="start"
+                        textAlign="left"
+                        fontSize="16px"
+                        fontWeight="400"
+                        color={position ? '#fff' : '#000'}
+                    >
+                        {str}
+                    </Span>
+                ))}
+            </Section>
+            <Span
+                position="absolute"
+                fontSize="12px"
+                fontWeight="400"
+                color={position ? '#A9C8FF' : '#62626A'}
+                bottom="6px"
+                right="10px"
+            >
+                {time}
+            </Span>
+        </Section>
+    );
+};
+
+const FileCard = ({
+    chat,
+    position,
+}: {
+    chat: IMessageIPFS;
+    position: number;
+}) => {
+    const fileContent: FileMessageContent = JSON.parse(chat.messageContent);
+    const name = fileContent.name;
+
+    const content = fileContent.content as string;
+    const size = fileContent.size;
+
+    return (
+        <Section
+            alignSelf={position ? 'end' : 'start'}
+            maxWidth="80%"
+            margin="5px 0"
+            background="#343536"
+            borderRadius="8px"
+            justifyContent="space-around"
+            padding="10px 13px"
+            gap="15px"
+        >
+            <Image
+                src={FILE_ICON(name.split('.').slice(-1)[0])}
+                alt="extension icon"
+                width="20px"
+                height="20px"
+            />
+            <Section flexDirection="column" gap="5px">
+                <Span color="#fff" fontSize="15px">
+                    {shortenText(name, 11)}
+                </Span>
+                <Span color="#fff" fontSize="12px">
+                    {formatFileSize(size)}
+                </Span>
+            </Section>
+            <FileDownloadIconAnchor
+                href={content}
+                target="_blank"
+                rel="noopener noreferrer"
+                download
+            >
+                <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
+            </FileDownloadIconAnchor>
+        </Section>
+    );
+};
+
+const ImageCard = ({
+    chat,
+    position,
+}: {
+    chat: IMessageIPFS;
+    position: number;
+}) => {
+    return (
+        <Section
+            alignSelf={position ? 'end' : 'start'}
+            maxWidth="65%"
+            margin="5px 0"
+        >
+            <Image
+                src={JSON.parse(chat.messageContent).content}
+                alt=""
+                width="100%"
+                borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
+            />
+        </Section>
+    );
+};
+
+const GIFCard = ({
+    chat,
+    position,
+}: {
+    chat: IMessageIPFS;
+    position: number;
+}) => {
+    return (
+        <Section
+            alignSelf={position ? 'end' : 'start'}
+            maxWidth="65%"
+            margin="5px 0"
+        >
+            <Image
+                src={chat.messageContent}
+                alt=""
+                width="100%"
+                borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
+            />
+        </Section>
+    );
+};
+
+export const MessageBubble = ({ chat, account }: { chat: IMessageIPFS, account: any }) => {
+    const position = pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account.toLowerCase() ? 0 : 1;
+
+    if (chat.messageType === 'GIF') {
+        return <GIFCard chat={chat} position={position} />;
+    }
+    if (chat.messageType === 'IMAGE') {
+        return <ImageCard chat={chat} position={position} />;
+    }
+    if (chat.messageType === 'FILE') {
+        return <FileCard chat={chat} position={position} />;
+    }
+    return <MessageCard chat={chat} position={position} />;
+}
+
+
+const FileDownloadIcon = styled.i`
+  color: #575757;
+`;
+
+const FileDownloadIconAnchor = styled.a`
+  font-size: 20px;
+`;
\ No newline at end of file
diff --git a/packages/uiweb/src/lib/components/chat/MessageBubble/index.ts b/packages/uiweb/src/lib/components/chat/MessageBubble/index.ts
new file mode 100644
index 000000000..fd86462dc
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/MessageBubble/index.ts
@@ -0,0 +1 @@
+export { MessageBubble } from './MessageBubble';
diff --git a/packages/uiweb/src/lib/components/chat/index.ts b/packages/uiweb/src/lib/components/chat/index.ts
new file mode 100644
index 000000000..fd86462dc
--- /dev/null
+++ b/packages/uiweb/src/lib/components/chat/index.ts
@@ -0,0 +1 @@
+export { MessageBubble } from './MessageBubble';
diff --git a/packages/uiweb/src/lib/components/index.ts b/packages/uiweb/src/lib/components/index.ts
index a91afffe8..f73274b34 100644
--- a/packages/uiweb/src/lib/components/index.ts
+++ b/packages/uiweb/src/lib/components/index.ts
@@ -4,3 +4,4 @@ export * from './subscribemodal';
 export * from './space';
 export * from './supportChat';
 export * from './chatAndNotification';
+export * from './chat';
\ No newline at end of file