diff --git a/packages/restapi/src/lib/channels/subscribe.ts b/packages/restapi/src/lib/channels/subscribe.ts
index a99723472..00b6216f9 100644
--- a/packages/restapi/src/lib/channels/subscribe.ts
+++ b/packages/restapi/src/lib/channels/subscribe.ts
@@ -4,14 +4,15 @@ import {
   getDomainInformation,
   getSubscriptionMessage,
 } from './signature.helpers';
-import Constants, {ENV} from '../constants';
-import { SignerType } from "../types";
-import { axiosPost } from "../utils/axiosUtil";
+import Constants, { ENV } from '../constants';
+import { SignerType } from '../types';
+import { axiosPost } from '../utils/axiosUtil';
 export type SubscribeOptionsType = {
   signer: SignerType;
   channelAddress: string;
   userAddress: string;
   verifyingContractAddress?: string;
+  origin?: string;
   env?: ENV;
   onSuccess?: () => void;
   onError?: (err: Error) => void;
@@ -23,6 +24,7 @@ export const subscribe = async (options: SubscribeOptionsType) => {
     channelAddress,
     userAddress,
     verifyingContractAddress,
+    origin,
     env = Constants.ENV.PROD,
     onSuccess,
     onError,
@@ -86,6 +88,7 @@ export const subscribe = async (options: SubscribeOptionsType) => {
         channel: _channelAddress,
         subscriber: _userAddress,
       },
+      origin: origin
     };
 
     await axiosPost(requestUrl, body);
diff --git a/packages/restapi/src/lib/channels/subscribeV2.ts b/packages/restapi/src/lib/channels/subscribeV2.ts
index e37188c10..c38fdc456 100644
--- a/packages/restapi/src/lib/channels/subscribeV2.ts
+++ b/packages/restapi/src/lib/channels/subscribeV2.ts
@@ -15,6 +15,7 @@ export type SubscribeOptionsV2Type = {
   settings?: string | null;
   verifyingContractAddress?: string;
   env?: ENV;
+  origin?: string;
   onSuccess?: () => void;
   onError?: (err: Error) => void;
 };
@@ -27,6 +28,7 @@ export const subscribeV2 = async (options: SubscribeOptionsV2Type) => {
     settings = undefined,
     verifyingContractAddress,
     env = Constants.ENV.PROD,
+    origin,
     onSuccess,
     onError,
   } = options || {};
@@ -85,6 +87,7 @@ export const subscribeV2 = async (options: SubscribeOptionsV2Type) => {
     const body = {
       verificationProof: `eip712v2:${verificationProof}`,
       message: messageInformation.data,
+      origin: origin
     };
 
     const res = await axiosPost(requestUrl, body);
diff --git a/packages/restapi/src/lib/pushapi/PushAPI.ts b/packages/restapi/src/lib/pushapi/PushAPI.ts
index e0bd220c7..a071234f1 100644
--- a/packages/restapi/src/lib/pushapi/PushAPI.ts
+++ b/packages/restapi/src/lib/pushapi/PushAPI.ts
@@ -28,6 +28,7 @@ export class PushAPI {
   private readMode: boolean;
   private alpha: { feature: string[] };
   public account: string;
+  public chainWiseAccount: string;
   public decryptedPgpPvtKey?: string;
   public pgpPublicKey?: string;
   public env: ENV;
@@ -65,6 +66,7 @@ export class PushAPI {
     this.alpha = alpha;
     this.env = env;
     this.account = account;
+    this.chainWiseAccount = walletToPCAIP10(account);
     this.decryptedPgpPvtKey = decryptedPgpPvtKey;
     this.pgpPublicKey = pgpPublicKey;
     this.progressHook = progressHook;
@@ -274,7 +276,6 @@ export class PushAPI {
           readMode = true;
         }
       }
-      derivedAccount = walletToPCAIP10(derivedAccount);
       // Initialize PushAPI instance
       const api = new PushAPI(
         settings.env as ENV,
diff --git a/packages/restapi/tests/lib/channel/subscribeV2.test.ts b/packages/restapi/tests/lib/channel/subscribeV2.test.ts
index ba5453c85..ef2c9cb03 100644
--- a/packages/restapi/tests/lib/channel/subscribeV2.test.ts
+++ b/packages/restapi/tests/lib/channel/subscribeV2.test.ts
@@ -30,6 +30,7 @@ describe('PUSH_CHANNEL.subscribeV2 functionality', () => {
       channelAddress: 'eip155:11155111:0xD8634C39BBFd4033c0d3289C4515275102423681',
       userAddress: `eip155:11155111:${account1}`,
       env: _env,
+      origin: 'test'
     });
     expect(res.status).to.be.equal(204);
   });
diff --git a/packages/uiweb/package-lock.json b/packages/uiweb/package-lock.json
index 898a92ce8..29a653a4a 100644
--- a/packages/uiweb/package-lock.json
+++ b/packages/uiweb/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@pushprotocol/uiweb",
-  "version": "0.0.1-alpha.0",
+  "version": "1.4.0-alpha.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@pushprotocol/uiweb",
-      "version": "0.0.1-alpha.0",
+      "version": "1.4.0-alpha.4",
       "dependencies": {
         "@livepeer/react": "^2.6.0",
         "@pushprotocol/socket": "^0.5.0",
diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
index 5c03cdd7a..86bd7905c 100644
--- a/packages/uiweb/package.json
+++ b/packages/uiweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pushprotocol/uiweb",
-  "version": "0.0.1-alpha.46",
+  "version": "1.4.0-alpha.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx
index 565347d2f..1f0e6767b 100644
--- a/packages/uiweb/src/lib/components/notification/index.tsx
+++ b/packages/uiweb/src/lib/components/notification/index.tsx
@@ -2,11 +2,7 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 
-import {
-  MediaHelper,
-  convertTimeStamp,
-  extractTimeStamp,
-} from '../../utilities';
+import { MediaHelper, convertTimeStamp, extractTimeStamp } from '../../utilities';
 import IPFSIcon from '../ipfsicon';
 import Loader from '../loader/loader';
 import ImageOverlayComponent from '../overlay';
@@ -15,12 +11,17 @@ import chainDetails from './chainDetails';
 import { DecryptButton, useDecrypt } from './decrypt';
 import ActionButton from './styled/ActionButton';
 
-import { useDivOffsetWidth } from "../../hooks";
-import { LinkIcon } from "../../icons/Link";
+import { useDivOffsetWidth } from '../../hooks';
+import { LinkIcon } from '../../icons/Link';
 
 import type { INotificationItemTheme } from './theme';
 import { getCustomTheme } from './theme';
-export { baseTheme as notificationBaseTheme, darkTheme as notificationDarkTheme, lightTheme as notificationLightTheme, type INotificationItemTheme } from './theme';
+export {
+  baseTheme as notificationBaseTheme,
+  darkTheme as notificationDarkTheme,
+  lightTheme as notificationLightTheme,
+  type INotificationItemTheme,
+} from './theme';
 
 // ================= Define types
 export type chainNameType =
@@ -67,7 +68,7 @@ export type NotificationItemProps = {
 
 type ContainerDataType = {
   timestamp?: string;
-}& OffsetWidthType;
+} & OffsetWidthType;
 type OffsetWidthType = {
   offsetWidth: number;
 };
@@ -103,20 +104,13 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   isSecret,
   decryptFn,
 }) => {
-  const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(
-    notificationBody || ''
-  );
-  const themeObject = getCustomTheme(theme,customTheme!);
-
+  const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(notificationBody || '');
+  const themeObject = getCustomTheme(theme, customTheme!);
 
-  const {
-    notifTitle,
-    notifBody,
-    notifCta,
-    notifImage,
-    setDecryptedValues,
-    isSecretRevealed,
-  } = useDecrypt({ notificationTitle, parsedBody, cta, image }, isSecret);
+  const { notifTitle, notifBody, notifCta, notifImage, setDecryptedValues, isSecretRevealed } = useDecrypt(
+    { notificationTitle, parsedBody, cta, image },
+    isSecret
+  );
 
   const isCtaURLValid = MediaHelper.validURL(notifCta);
   const isChannelURLValid = MediaHelper.validURL(url);
@@ -126,7 +120,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   const [subscribeLoading, setSubscribeLoading] = React.useState(false);
   const [isSubscribed, setIsSubscribed] = React.useState(true); //use this to confirm if this is s
   const [divRef, offsetWidth] = useDivOffsetWidth();
-  
+
   const showMetaInfo = isSecret || timeStamp;
   // console.log({
   //   chainName,
@@ -190,7 +184,6 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   return (
     <Container
       timestamp={timeStamp}
- 
       offsetWidth={offsetWidth}
       ref={divRef}
       themeObject={themeObject!}
@@ -198,38 +191,52 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
       {/* header that only pops up on small devices */}
       <MobileHeader themeObject={themeObject!}>
         <HeaderButton themeObject={themeObject!}>
-          <ImageContainer  offsetWidth={offsetWidth} theme={theme}>
-            <IPFSIcon icon={icon} />
+          <ImageContainer
+            offsetWidth={offsetWidth}
+            theme={theme}
+          >
+            <img
+              style={{ width: '100%', borderRadius: '8px' }}
+              src={icon}
+              title={`Channel icon for ${app}`}
+              alt=""
+            />
           </ImageContainer>
           <ChannelName onClick={goToURL}>{app}</ChannelName>
         </HeaderButton>
         {chainName && chainDetails[chainName] ? (
           <BlockchainContainer>
-            <ChainIconSVG  offsetWidth={offsetWidth}>{chainDetails[chainName].icon}</ChainIconSVG>
+            <ChainIconSVG offsetWidth={offsetWidth}>{chainDetails[chainName].icon}</ChainIconSVG>
           </BlockchainContainer>
         ) : null}
       </MobileHeader>
       {/* header that only pops up on small devices */}
 
       {/* content of the component */}
-      <ContentSection themeObject={themeObject!}  offsetWidth={offsetWidth} onClick={isCtaURLValid ? gotToCTA : undefined} cta={isCtaURLValid}>
+      <ContentSection
+        themeObject={themeObject!}
+        offsetWidth={offsetWidth}
+        onClick={isCtaURLValid ? gotToCTA : undefined}
+        cta={isCtaURLValid}
+      >
         {/* section for media content */}
         {notifImage &&
           // if its an image then render this
           (!MediaHelper.isMediaSupportedVideo(notifImage) ? (
             <MobileImage
-            theme={theme}
-            offsetWidth={offsetWidth}
-    
+              theme={theme}
+              offsetWidth={offsetWidth}
               style={{ cursor: 'pointer' }}
               onClick={() => setImageOverlay(notifImage || '')}
             >
-              <img src={notifImage} alt="" />
+              <img
+                src={notifImage}
+                alt=""
+              />
             </MobileImage>
           ) : // if its a youtube url, RENDER THIS
           MediaHelper.isMediaYoutube(notifImage) ? (
-            <MobileImage 
-            offsetWidth={offsetWidth} >
+            <MobileImage offsetWidth={offsetWidth}>
               <iframe
                 id="ytplayer"
                 width="640"
@@ -242,8 +249,15 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           ) : (
             // if its aN MP4 url, RENDER THIS
             <MobileImage offsetWidth={offsetWidth}>
-              <video width="360" height="100%" controls>
-                <source src={notifImage} type="video/mp4" />
+              <video
+                width="360"
+                height="100%"
+                controls
+              >
+                <source
+                  src={notifImage}
+                  type="video/mp4"
+                />
                 Your browser does not support the video tag.
               </video>
             </MobileImage>
@@ -252,29 +266,26 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
 
         {/* section for text content */}
         <ChannelDetailsWrapper>
-          <ChannelTitle 
-          themeObject={themeObject!}
+          <ChannelTitle
+            themeObject={themeObject!}
             cta={isCtaURLValid}
             offsetWidth={offsetWidth}
-       
           >
-            <ChannelTitleText themeObject={themeObject!}>
-              {notifTitle}
-            </ChannelTitleText>
+            <ChannelTitleText themeObject={themeObject!}>{notifTitle}</ChannelTitleText>
             {/* display link svg if notification has a valid cta url */}
-            {
-              isCtaURLValid
-              ?
-              <span style={{height: "20px", marginLeft: "7px"}} >
+            {isCtaURLValid ? (
+              <span style={{ height: '20px', marginLeft: '7px' }}>
                 <LinkIcon />
-                </span>
-                  
-              :
-                ""
-            }
+              </span>
+            ) : (
+              ''
+            )}
           </ChannelTitle>
           <ChannelDesc themeObject={themeObject!}>
-            <ChannelDescLabel  themeObject={themeObject!} cta={isCtaURLValid} >
+            <ChannelDescLabel
+              themeObject={themeObject!}
+              cta={isCtaURLValid}
+            >
               <ParseMarkdownText text={notifBody} />
             </ChannelDescLabel>
           </ChannelDesc>
@@ -284,11 +295,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
         <ButtonGroupContainer>
           <ButtonGroup>
             {/* include a channel opt into */}
-            {isSpam && (
-              <ActionButton onClick={onSubscribe}>
-                {subscribeLoading ? <Loader /> : 'opt-in'}
-              </ActionButton>
-            )}
+            {isSpam && <ActionButton onClick={onSubscribe}>{subscribeLoading ? <Loader /> : 'opt-in'}</ActionButton>}
             {/* include a channel opt into */}
 
             {isSecret ? (
@@ -303,7 +310,10 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
       {/* content of the component */}
 
       {/* Meta Data section */}
-      <ChannelMetaInfo hidden={!showMetaInfo} hasLeft={false}>
+      <ChannelMetaInfo
+        hidden={!showMetaInfo}
+        hasLeft={false}
+      >
         {/* For left aligned items use ChannelMetaInfoLeft as parent */}
         <ChannelMetaInfoLeft hidden></ChannelMetaInfoLeft>
 
@@ -315,11 +325,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
             </SecretIconContainer>
           ) : null}
 
-          {timeStamp ? (
-            <TimestampLabel themeObject={themeObject!} >
-              {convertTimeStamp(timeStamp)}
-            </TimestampLabel>
-          ) : null}
+          {timeStamp ? <TimestampLabel themeObject={themeObject!}>{convertTimeStamp(timeStamp)}</TimestampLabel> : null}
         </ChannelMetaInfoRight>
       </ChannelMetaInfo>
 
@@ -345,7 +351,7 @@ NotificationItem.propTypes = {
   subscribeFn: PropTypes.func,
   isSubscribedFn: PropTypes.func,
   theme: PropTypes.string,
-  customTheme:PropTypes.object
+  customTheme: PropTypes.object,
 };
 
 NotificationItem.defaultProps = {
@@ -371,28 +377,26 @@ const ContentSection = styled.div<CTADataType & CustomThemeProps & OffsetWidthTy
   cursor: ${(props) => (props.cta ? 'pointer' : 'default')};
 
   &:hover {
-    background: ${(props) =>
-      props.cta ? (props?.themeObject?.color?.contentHoverBackground) : 'none'};
+    background: ${(props) => (props.cta ? props?.themeObject?.color?.contentHoverBackground : 'none')};
   }
   ${(props: any) =>
-    props.offsetWidth>461 &&
+    props.offsetWidth > 461 &&
     css`
-    @media (min-width: ${SM_BREAKPOINT}) {
-      align-items: flex-start;
-      flex-direction: row;
-      gap: 20px;
-      justify-content: space-between;
-    }
-    @media (max-width: ${SM_BREAKPOINT}) {
-      flex-direction: column;
-    }
+      @media (min-width: ${SM_BREAKPOINT}) {
+        align-items: flex-start;
+        flex-direction: row;
+        gap: 20px;
+        justify-content: space-between;
+      }
+      @media (max-width: ${SM_BREAKPOINT}) {
+        flex-direction: column;
+      }
     `};
-  
+
   ${(props: any) =>
-    props.offsetWidth<=461 &&
+    props.offsetWidth <= 461 &&
     css`
-    flex-direction: column;
-  
+      flex-direction: column;
     `};
 `;
 
@@ -417,11 +421,10 @@ const ChainIconSVG = styled.div<OffsetWidthType>`
     width: 18px;
     height: 18px;
   }
- 
 `;
 
-const MobileImage = styled.div<OffsetWidthType & {theme?:string}>`
-  overflow:hidden;
+const MobileImage = styled.div<OffsetWidthType & { theme?: string }>`
+  overflow: hidden;
   img,
   iframe,
   video {
@@ -433,56 +436,52 @@ const MobileImage = styled.div<OffsetWidthType & {theme?:string}>`
     border: 0;
   }
 
-
-
-  ${(props: OffsetWidthType & {theme?:string}) =>
-    props.offsetWidth>461 &&
+  ${(props: OffsetWidthType & { theme?: string }) =>
+    props.offsetWidth > 461 &&
     css`
-    @media (min-width: ${SM_BREAKPOINT}) {
-      border: 1px solid ${props => (props.theme as unknown as string)  === 'light' ? '#ededed' : '#444'};
-      border-radius: 10px;
-      min-width: 220px;
-      width: 220px;
-      height: 200px;
-    }
-    @media (max-width: ${SM_BREAKPOINT}) {
-      display: block;
-      width: 100%;
-      max-height: 200px;
-      margin-bottom: 12px;
-      border: 0;
-  
-      img,
-      iframe,
-      video {
+      @media (min-width: ${SM_BREAKPOINT}) {
+        border: 1px solid ${(props) => ((props.theme as unknown as string) === 'light' ? '#ededed' : '#444')};
+        border-radius: 10px;
+        min-width: 220px;
+        width: 220px;
+        height: 200px;
+      }
+      @media (max-width: ${SM_BREAKPOINT}) {
+        display: block;
+        width: 100%;
+        max-height: 200px;
+        margin-bottom: 12px;
         border: 0;
-        border-radius: 0;
+
+        img,
+        iframe,
+        video {
+          border: 0;
+          border-radius: 0;
+        }
       }
-    }
     `};
-  
+
   ${(props: any) =>
-    props.offsetWidth<=461 &&
+    props.offsetWidth <= 461 &&
     css`
-    display: block;
+      display: block;
       width: 100%;
       max-height: 200px;
       margin-bottom: 12px;
       border: 0;
-  
+
       img,
       iframe,
       video {
         border: 0;
         border-radius: 0;
       }
-  
     `};
-  
 `;
 
-const ImageContainer = styled.span<OffsetWidthType & {theme?:string}>`
-  background: ${(props) => (props.theme === "light" ? "#ededed" : "#444")};
+const ImageContainer = styled.span<OffsetWidthType & { theme?: string }>`
+  background: ${(props) => (props.theme === 'light' ? '#ededed' : '#444')};
   display: inline-block;
   margin-right: 10px;
   border-radius: 5px;
@@ -564,36 +563,31 @@ const ChannelTitle = styled.div<CTADataType & OffsetWidthType & CustomThemeProps
   }
 
   ${(props: any) =>
-    props.offsetWidth>461 &&
+    props.offsetWidth > 461 &&
     css`
-    @media (max-width: ${SM_BREAKPOINT}) {
-      margin-bottom: 6px;
-    }
+      @media (max-width: ${SM_BREAKPOINT}) {
+        margin-bottom: 6px;
+      }
     `};
-  
+
   ${(props: any) =>
-    props.offsetWidth<=461 &&
+    props.offsetWidth <= 461 &&
     css`
-    margin-bottom: 6px;
-  
+      margin-bottom: 6px;
     `};
-  
 `;
 
 const ChannelTitleText = styled.div<CustomThemeProps>`
   font-size: ${(props) => props?.themeObject?.fontSize?.notificationTitleText};
-  font-weight: ${(props) =>
-    props?.themeObject?.fontWeight?.notificationTitleText};
+  font-weight: ${(props) => props?.themeObject?.fontWeight?.notificationTitleText};
 `;
 const ChannelDesc = styled.div<CustomThemeProps>`
   line-height: 20px;
   flex: 1;
   display: flex;
-  font-size: ${(props) =>
-    props?.themeObject?.fontSize?.notificationContentText};
+  font-size: ${(props) => props?.themeObject?.fontSize?.notificationContentText};
   color: ${(props) => props?.themeObject?.color?.notificationContentText};
-  font-weight: ${(props) =>
-    props?.themeObject?.fontWeight?.notificationContentText};
+  font-weight: ${(props) => props?.themeObject?.fontWeight?.notificationContentText};
   flex-direction: column;
 `;
 
@@ -647,12 +641,7 @@ const SecretIcon = styled.div`
   height: 12px;
 
   border-radius: 50%;
-  background: linear-gradient(
-    135deg,
-    #e20880 12.5%,
-    #674c9f 49.89%,
-    #35c5f3 87.5%
-  );
+  background: linear-gradient(135deg, #e20880 12.5%, #674c9f 49.89%, #35c5f3 87.5%);
 `;
 
 const ButtonGroupContainer = styled.div`