diff --git a/packages/roomkit-react/src/Prebuilt/common/utils.js b/packages/roomkit-react/src/Prebuilt/common/utils.js
index 4b605a195f..dde0f4a440 100644
--- a/packages/roomkit-react/src/Prebuilt/common/utils.js
+++ b/packages/roomkit-react/src/Prebuilt/common/utils.js
@@ -88,3 +88,10 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
+
+export const getAttributeBoxSize = (width, height) => {
+  if (!width || !height) {
+    return '';
+  }
+  return width < 180 || height < 180 ? 'small' : 'medium';
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx
index bca4f0e0a9..5725f59228 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.jsx
@@ -20,7 +20,7 @@ export const MwebLandscapePrompt = () => {
       setShowMwebLandscapePrompt(window.screen.orientation.type.includes('landscape') && isMobile);
       window.screen.orientation.addEventListener('change', handleOrientationChange);
     }
-    return () => window.screen.orientation.removeEventListener(handleOrientationChange);
+    return () => window.screen.orientation.removeEventListener('change', handleOrientationChange);
   }, []);
 
   return (
diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
index 4a9b3d014c..422898f67d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
@@ -230,6 +230,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
             trackId={localPeer.videoTrack}
             data-testid="preview_tile"
           />
+
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={name} data-testid="preview_avatar_tile" />
@@ -239,8 +240,9 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : !error ? (
         <FullPageProgress />
       ) : null}
+
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <StyledVideoTile.AudioIndicator>
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
index 225f41474f..482c8ce407 100644
--- a/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/VideoTile.jsx
@@ -25,6 +25,7 @@ import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { getAttributeBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -133,7 +134,7 @@ const Tile = ({
             isAudioMuted ? (
               <StyledVideoTile.AudioIndicator
                 data-testid="participant_audio_mute_icon"
-                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+                size={getAttributeBoxSize(width, height)}
               >
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
@@ -150,7 +151,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={height} width={width} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -167,8 +168,6 @@ const Tile = ({
   );
 };
 
-const metaStyles = { top: '$4', left: '$4', width: '$13', height: '$13' };
-
 const heightAnimation = value =>
   keyframes({
     '50%': {
@@ -218,7 +217,7 @@ export const AudioLevel = ({ trackId }) => {
   );
 };
 
-const PeerMetadata = ({ peerId }) => {
+const PeerMetadata = ({ peerId, height, width }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -226,12 +225,12 @@ const PeerMetadata = ({ peerId }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
           <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
+        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
           <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}
diff --git a/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx b/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
index d7f8c8c822..6f1bf8bc1c 100644
--- a/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
+++ b/packages/roomkit-react/src/VideoTile/StyledVideoTile.tsx
@@ -56,19 +56,8 @@ const Info = styled('div', {
 });
 
 const AttributeBox = styled('div', {
-  position: 'absolute',
-  color: '$on_primary_high',
-  w: '$12',
-  h: '$12',
-  bg: '$secondary_dim',
-  r: '$round',
-  ...flexCenter,
-});
-
-const AudioIndicator = styled('div', {
   position: 'absolute',
   top: '$4',
-  right: '$4',
   color: '$on_primary_high',
   bg: '$secondary_dim',
   borderRadius: '$round',
@@ -91,12 +80,19 @@ const AudioIndicator = styled('div', {
         height: '$13',
       },
     },
+    position: {
+      left: { left: '$4' },
+      right: { right: '$4' },
+    },
   },
   defaultVariants: {
     size: 'medium',
+    position: 'left',
   },
 });
 
+const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
+
 const FullScreenButton = styled('button', {
   width: '2.25rem',
   height: '2.25rem',
@@ -136,9 +132,9 @@ interface VideoTileType {
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
-  AudioIndicator: typeof AudioIndicator;
   AvatarContainer: typeof AvatarContainer;
   AttributeBox: typeof AttributeBox;
+  AudioIndicator: typeof AudioIndicator;
   FullScreenButton: typeof FullScreenButton;
 }
 
@@ -147,8 +143,8 @@ export const StyledVideoTile: VideoTileType = {
   Container,
   Overlay,
   Info,
-  AudioIndicator,
   AvatarContainer,
   AttributeBox,
+  AudioIndicator,
   FullScreenButton,
 };