diff --git a/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx b/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx
index 24a7205e0..627a4b56b 100644
--- a/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx
+++ b/packages/uiweb/src/lib/components/chatAndNotification/MinimisedModalHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { MaximizeIcon } from '../../icons/Maximize';
 import { NewChatIcon } from '../../icons/NewChat';
@@ -13,12 +13,13 @@ import {
 } from '../../context';
 import type { PushSubTabs, PushTabs } from '../../types';
 import { PUSH_SUB_TABS, PUSH_TABS } from '../../types';
-import { pCAIP10ToWallet, resolveWeb3Name, shortenText } from '../../helpers';
+import { pCAIP10ToWallet, shortenText } from '../../helpers';
 import { PushSubTabTitle } from '../../config';
 import { Tooltip } from '../reusables';
 import type { ChatAndNotificationMainContextType } from '../../context/chatAndNotification/chatAndNotificationMainContext';
 import type { ChatMainStateContextType } from '../../context/chatAndNotification/chat/chatMainStateContext';
 import { ChatSnap } from './modal/sidebar/chatSidebar/ChatSnap';
+import { useDomianName } from '../../hooks';
 
 type MinimisedModalHeaderPropType = {
   onMaximizeMinimizeToggle: () => void;
@@ -49,7 +50,6 @@ export const UnreadChats = ({
 };
 
 export const MessageBoxHeader = () => {
-  const [web3Name, setWeb3Name] = useState<string | null>(null);
   const { activeTab, setActiveTab, setActiveSubTab, activeSubTab } =
     useContext<ChatAndNotificationMainContextType>(ChatAndNotificationMainContext);
   const { selectedChatId, chatsFeed, requestsFeed, searchedChats, setSearchedChats, setSelectedChatId } =
@@ -60,6 +60,7 @@ export const MessageBoxHeader = () => {
     chatsFeed[selectedChatId as string] ||
     requestsFeed[selectedChatId as string] ||
     (Object.keys(searchedChats || {}).length ? searchedChats![selectedChatId as string] : null);
+  const web3Name = useDomianName(selectedChat?.did, env);
 
   const handleBack = () => {
     if (
@@ -78,16 +79,6 @@ export const MessageBoxHeader = () => {
     }
   };
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const result = await resolveWeb3Name(selectedChat?.did, env);
-        if (result) setWeb3Name(result);
-      } catch (e) {
-        //console.debug(e);
-      }
-    })();
-  });
   return selectedChat ? (
     <Section
       gap="12px"
diff --git a/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx b/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx
index 12f1d0b02..9b7a115bd 100644
--- a/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx
+++ b/packages/uiweb/src/lib/components/chatAndNotification/modal/sidebar/chatSidebar/ChatSnap.tsx
@@ -1,13 +1,13 @@
 import type { IFeeds } from '@pushprotocol/restapi';
 import { ChatMainStateContext, ChatAndNotificationPropsContext } from '../../../../../context';
-import { checkIfUnread, dateToFromNowDaily, resolveWeb3Name, setData, shortenText } from '../../../../../helpers';
-import React, { useContext, useEffect, useState } from 'react';
+import { checkIfUnread, dateToFromNowDaily, setData, shortenText } from '../../../../../helpers';
+import React, { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { Section, Span, Image } from '../../../../reusables/sharedStyling';
 import { UnreadChats } from '../../../MinimisedModalHeader';
 import { device } from '../../../../../config';
 import type { ChatMainStateContextType } from '../../../../../context/chatAndNotification/chat/chatMainStateContext';
-import { useDeviceWidthCheck } from '../../../../../hooks';
+import { useDeviceWidthCheck, useDomianName } from '../../../../../hooks';
 
 type ChatSnapPropType = {
   chat: IFeeds;
@@ -75,10 +75,9 @@ const Message = ({ messageContent, messageType }: { messageContent: string; mess
 };
 
 export const ChatSnap: React.FC<ChatSnapPropType> = ({ chat, id, modalOpen }) => {
-  const [web3Name, setWeb3Name] = useState<string | null>(null);
   const { setSelectedChatId } = useContext<ChatMainStateContextType>(ChatMainStateContext);
   const { env } = useContext<any>(ChatAndNotificationPropsContext);
-
+  const web3Name = useDomianName(chat?.did, env);
   const isMobile = useDeviceWidthCheck(425);
   const digitsToDisplay = chat?.name ? (isMobile ? 15 : 30) : isMobile ? 6 : 8;
 
@@ -88,17 +87,6 @@ export const ChatSnap: React.FC<ChatSnapPropType> = ({ chat, id, modalOpen }) =>
   };
   const open = modalOpen === undefined ? true : modalOpen;
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const result = await resolveWeb3Name(chat?.did, env);
-        if (result) setWeb3Name(result);
-      } catch (e) {
-        //console.debug(e);
-      }
-    })();
-  });
-
   return (
     <Container
       justifyContent="flex-start"
diff --git a/packages/uiweb/src/lib/hooks/index.ts b/packages/uiweb/src/lib/hooks/index.ts
index 813ce000e..52f9c2688 100644
--- a/packages/uiweb/src/lib/hooks/index.ts
+++ b/packages/uiweb/src/lib/hooks/index.ts
@@ -13,3 +13,4 @@ export * from './usePushUser';
 export * from './useSupportChatStream';
 export * from './useTokenSymbolLoader';
 export * from './widget';
+export * from './useDomainName';
diff --git a/packages/uiweb/src/lib/hooks/useDomainName.ts b/packages/uiweb/src/lib/hooks/useDomainName.ts
new file mode 100644
index 000000000..4f293ebd8
--- /dev/null
+++ b/packages/uiweb/src/lib/hooks/useDomainName.ts
@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useState } from 'react';
+import { resolveWeb3Name } from '../helpers';
+import { ENV } from '../config';
+
+export const useDomianName = (address: string, env: ENV) => {
+  const [name, setName] = useState<string | null>(null);
+
+  const getName = useCallback(async () => {
+    const result = await resolveWeb3Name(address, env);
+    if (result) setName(result);
+  }, [address, env]);
+
+  useEffect(() => {
+    (async () => {
+      await getName();
+    })();
+  }, [address, env]);
+
+  return name;
+};