diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js
index 5f2dbf43e..3a7adbd2d 100644
--- a/packages/react/src/views/ChatHeader/ChatHeader.js
+++ b/packages/react/src/views/ChatHeader/ChatHeader.js
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useContext,
+} from 'react';
 import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import {
@@ -11,7 +17,7 @@ import {
   useTheme,
   Avatar,
 } from '@embeddedchat/ui-elements';
-import { useRCContext } from '../../context/RCInstance';
+import RCContext from '../../context/RCInstance';
 import {
   useUserStore,
   useMessageStore,
@@ -78,7 +84,7 @@ const ChatHeader = ({
   );
   const workspaceLevelRoles = useUserStore((state) => state.roles);
 
-  const { RCInstance, ECOptions } = useRCContext();
+  const { RCInstance, ECOptions } = useContext(RCContext);
   const { channelName, anonymousMode, showRoles } = ECOptions ?? {};
 
   const isUserAuthenticated = useUserStore(
@@ -117,10 +123,20 @@ const ChatHeader = ({
   );
   const setShowAllFiles = useFileStore((state) => state.setShowAllFiles);
   const setShowMentions = useMentionsStore((state) => state.setShowMentions);
-  const getChannelAvatarURL = (channelname) => {
+
+  const getChannelAvatarURL = (RoomId) => {
     const host = RCInstance.getHost();
-    return `${host}/avatar/${channelname}`;
+    const etag =
+      channelInfo && channelInfo.avatarETag
+        ? `?etag=${channelInfo.avatarETag}`
+        : '';
+    const res = RCInstance.channelInfo();
+    const channelAvatarUrl = `${host}/avatar/room/${encodeURIComponent(
+      RoomId
+    )}${etag}`;
+    return channelAvatarUrl;
   };
+
   const handleGoBack = async () => {
     if (isUserAuthenticated) {
       getMessagesAndRoles();
@@ -369,7 +385,7 @@ const ChatHeader = ({
                   <Avatar
                     size="36px"
                     style={{ marginRight: '6px' }}
-                    url={getChannelAvatarURL(channelInfo.name)}
+                    url={getChannelAvatarURL(RCInstance.rid)}
                   />
                   <Box>
                     <Box
diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
index ea1d5c731..aa181386e 100644
--- a/packages/react/src/views/RoomInformation/RoomInformation.js
+++ b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { css } from '@emotion/react';
 import {
   Box,
@@ -21,9 +21,16 @@ const Roominfo = () => {
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
   const setExclusiveState = useSetExclusiveState();
-  const getChannelAvatarURL = (channelname) => {
+  const getChannelAvatarURL = (RoomId) => {
     const host = RCInstance.getHost();
-    return `${host}/avatar/${channelname}`;
+    const etag =
+      channelInfo && channelInfo.avatarETag
+        ? `?etag=${channelInfo.avatarETag}`
+        : '';
+    const channelAvatarUrl = `${host}/avatar/room/${encodeURIComponent(
+      RoomId
+    )}${etag}`;
+    return channelAvatarUrl;
   };
 
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
@@ -54,7 +61,7 @@ const Roominfo = () => {
             justify-content: center;
           `}
         >
-          <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />
+          <Avatar size="100%" url={getChannelAvatarURL(RCInstance.rid)} />
         </Box>
         <Box css={styles.infoContainer}>
           <Box css={styles.infoHeader}>