diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
index f586485ab7..d3f1863b08 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.tsx
@@ -86,7 +86,7 @@ export const Chat = () => {
                   isLandscapeStream: false,
                   isChatEnabled: true,
                 },
-                () => ({ bottom: '$19', right: '$8' }),
+                () => ({ bottom: '$20', right: '$8' }),
               )
               .otherwise(() => ({})),
           }}
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
index 06d608359e..3df03a0f5e 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx
@@ -152,7 +152,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
-          <Flex align="center" justify="end" css={{ mb: '$4' }}>
+          <Flex align="center" justify="end" css={{ mb: '$4' }} onClick={e => e.stopPropagation()}>
             <Popover.Root>
               <Popover.Trigger asChild>
                 <IconButton css={{ border: '1px solid $border_bright' }}>
diff --git a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx
index 9cd6e2fea6..2ff63fdef8 100644
--- a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx
@@ -22,6 +22,8 @@ import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
+import { EmojiReaction } from './EmojiReaction';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
@@ -195,12 +197,22 @@ export const ConferenceScreen = () => {
               alignItems: 'center',
               pr: '$4',
               pb: '$4',
+              position: 'relative',
             }}
             justify="end"
             gap="1"
           >
             {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Box
+              css={{
+                position: 'absolute',
+                bottom: '100%',
+                mb: '$4',
+              }}
+            >
+              <EmojiReaction />
+            </Box>
           </Flex>
         )}
         <RoleChangeRequestModal />
diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
index 57ecfa0d68..7de2809605 100644
--- a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
@@ -23,7 +23,7 @@ import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
-export const EmojiReaction = () => {
+export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
@@ -68,7 +68,7 @@ export const EmojiReaction = () => {
     return null;
   }
 
-  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+  if (showCard) {
     return <EmojiCard sendReaction={sendReaction} />;
   }
   return (
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx
index 57139cb9ad..7d2314d1d0 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx
@@ -38,9 +38,6 @@ const DropdownWrapper = ({ children }: { children: React.ReactNode }) => {
   if (React.Children.toArray(children).length === 0) {
     return null;
   }
-  React.Children.map(children, child => {
-    console.log({ child });
-  });
   return (
     <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
       <Dropdown.Trigger
diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
index 8674fbf545..ec8f619fa1 100644
--- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -1,17 +1,20 @@
 import React, { forwardRef } from 'react';
-import { useMedia } from 'react-use';
-import { config, Flex } from '../../../';
-import { useIsLandscape } from '../../common/hooks';
+import { Flex } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
   return (
     <Flex
       data-testid="hms-video"
       css={{
         size: '100%',
         position: 'relative',
+        justifyContent: 'center',
+        '@md': {
+          height: 'auto',
+          '& video': {
+            height: '$60 !important',
+          },
+        },
         '& video::cue': {
           color: 'white',
           whiteSpace: 'pre-line',
@@ -34,13 +37,12 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     >
       <video
         style={{
-          flex: '1 1 0',
           margin: '0 auto',
-          minHeight: '0',
           objectFit: 'contain',
-          width: 'inherit',
-          height: isLandscape || isMobile ? '100%' : '',
-          position: isLandscape || isMobile ? 'absolute' : '',
+          width: 'auto',
+          height: 'auto',
+          maxWidth: '100%',
+          maxHeight: '100%',
         }}
         ref={videoRef}
         playsInline
diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
index 7d4ebca867..aefd7b5a0b 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
@@ -343,7 +343,7 @@ export const MwebOptions = ({
             mx: '$4',
           }}
         >
-          <EmojiReaction />
+          <EmojiReaction showCard />
         </Box>
       )}
       {showRecordingOn && (
diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx
index e49c779a94..b3ce28e14a 100644
--- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
@@ -22,21 +23,26 @@ export const MwebLandscapePrompt = () => {
     }
 
     if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape);
+      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
       return;
     }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
       const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
+      setShowMwebLandscapePrompt(
+        match({ angle, isLandscapeHLSStream, isLandscape, type })
+          .with({ isLandscapeHLSStream }, () => false)
+          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
+          .otherwise(() => isLandscape),
+      );
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, [isLandscape]);
+  }, [isLandscape, isLandscapeHLSStream]);
 
   if (isLandscapeHLSStream) {
     return null;
diff --git a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx
index 57e9e47cc8..74444c1afd 100644
--- a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx
@@ -41,9 +41,8 @@ const ParticipantCount = ({ count }: { count: number }) => {
 
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
-  hideControls?: boolean;
   hideTab?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
@@ -85,7 +84,6 @@ export const SidePaneTabs = React.memo<{
         css={{
           color: '$on_primary_high',
           h: '100%',
-          marginTop: hideControls && isOverlayChat ? '$17' : '0',
           transition: 'margin 0.3s ease-in-out',
           position: 'relative',
         }}
@@ -103,7 +101,6 @@ export const SidePaneTabs = React.memo<{
       css={{
         color: '$on_primary_high',
         h: '100%',
-        marginTop: hideControls && isOverlayChat ? '$17' : '0',
         transition: 'margin 0.3s ease-in-out',
       }}
     >
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
index 18e7f1afcd..234b8e0098 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -350,249 +350,160 @@ const HLSView = () => {
     [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress],
   );
 
+  if (!hlsUrl || streamEnded) {
+    return (
+      <Flex
+        key="hls-viewer"
+        id={`hls-viewer-${themeType}`}
+        ref={hlsViewRef}
+        direction={isMobile || isLandscape ? 'column' : 'row'}
+        justify="center"
+        css={{
+          flex: isLandscape ? '2 1 0' : '1 1 0',
+        }}
+      >
+        <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
+          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
+            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
+          </Flex>
+          <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
+            {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
+          </Text>
+          <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
+            {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  }
   return (
     <Flex
       key="hls-viewer"
       id={`hls-viewer-${themeType}`}
       ref={hlsViewRef}
       direction={isMobile || isLandscape ? 'column' : 'row'}
+      justify="center"
       css={{
-        w: sidepane !== '' && isLandscape ? '' : '100%',
-        h: sidepane !== '' && isMobile ? '36%' : '100%',
-        flex: '1 1 0',
+        flex: isLandscape ? '2 1 0' : '1 1 0',
       }}
     >
-      {hlsUrl && !streamEnded ? (
-        <>
-          <HMSPlayerContext.Provider value={{ hlsPlayer }}>
-            {hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? (
-              <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
-            ) : null}
+      {hlsViewRef.current && (isMobile || isLandscape) && (
+        <Box css={{ position: 'fixed', left: '$4', top: '$4', zIndex: 11 }}>
+          <LeaveRoom screenType={screenType} container={hlsViewRef.current} />
+        </Box>
+      )}
+
+      <HMSPlayerContext.Provider value={{ hlsPlayer }}>
+        {hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? (
+          <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
+        ) : null}
+        <Flex
+          id="hls-player-container"
+          align="center"
+          justify="center"
+          css={{
+            size: '100%',
+            margin: '0 auto',
+            '@md': {
+              height: 'auto',
+            },
+          }}
+        >
+          {!(isMobile || isLandscape) && (
+            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+          )}
+          {showLoader && (
             <Flex
-              id="hls-player-container"
               align="center"
               justify="center"
               css={{
-                size: '100%',
-                margin: '0 auto',
+                position: 'absolute',
               }}
             >
-              {!(isMobile || isLandscape) && (
-                <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
-              )}
-              {showLoader && (
-                <Flex
-                  align="center"
-                  justify="center"
-                  css={{
-                    position: 'absolute',
-                  }}
-                >
-                  <Loading width={72} height={72} />
-                </Flex>
-              )}
-              <HMSVideoPlayer.Root
-                ref={videoRef}
-                onMouseEnter={onHoverHandler}
-                onMouseMove={onHoverHandler}
-                onMouseLeave={onHoverHandler}
-                onClick={onClickHandler}
-                onDoubleClick={e => {
-                  onDoubleClickHandler(e);
-                }}
-              >
+              <Loading width={72} height={72} />
+            </Flex>
+          )}
+          <HMSVideoPlayer.Root
+            ref={videoRef}
+            onMouseEnter={onHoverHandler}
+            onMouseMove={onHoverHandler}
+            onMouseLeave={onHoverHandler}
+            onClick={onClickHandler}
+            onDoubleClick={e => {
+              onDoubleClickHandler(e);
+            }}
+          >
+            <>
+              {isMobile || isLandscape ? (
                 <>
-                  {isMobile || isLandscape ? (
-                    <>
-                      {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
-                        <Flex
-                          align="center"
-                          justify="center"
-                          css={{
-                            bg: '#00000066',
-                            display: 'inline-flex',
-                            gap: '$2',
-                            zIndex: 1,
-                            size: '100%',
-                            visibility: controlsVisible ? `` : `hidden`,
-                            opacity: controlsVisible ? `1` : '0',
-                          }}
-                        >
-                          <HMSVideoPlayer.Seeker
-                            title="backward"
-                            css={{
-                              visibility: isSeekEnabled ? `` : `hidden`,
-                              opacity: isSeekEnabled ? `1` : '0',
-                            }}
-                          >
-                            <BackwardArrowIcon width={32} height={32} />
-                          </HMSVideoPlayer.Seeker>
-                          <Box
-                            css={{
-                              bg: 'rgba(0, 0, 0, 0.6)',
-                              r: '$round',
-                            }}
-                          >
-                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
-                          </Box>
-                          <HMSVideoPlayer.Seeker
-                            title="forward"
-                            css={{
-                              visibility: isSeekEnabled ? `` : `hidden`,
-                              opacity: isSeekEnabled ? `1` : '0',
-                            }}
-                          >
-                            <ForwardArrowIcon width={32} height={32} />
-                          </HMSVideoPlayer.Seeker>
-                        </Flex>
-                      )}
-                      <Flex
-                        ref={controlsRef}
-                        direction="column"
-                        justify="start"
-                        align="start"
+                  {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
+                    <Flex
+                      align="center"
+                      justify="center"
+                      css={{
+                        position: 'absolute',
+                        bg: '#00000066',
+                        display: 'inline-flex',
+                        gap: '$2',
+                        zIndex: 1,
+                        size: '100%',
+                        visibility: controlsVisible ? `` : `hidden`,
+                        opacity: controlsVisible ? `1` : '0',
+                      }}
+                    >
+                      <HMSVideoPlayer.Seeker
+                        title="backward"
                         css={{
-                          position: 'absolute',
-                          top: '0',
-                          left: '0',
-                          width: '100%',
-                          flexShrink: 0,
-                          zIndex: 1,
-                          visibility: controlsVisible ? `` : `hidden`,
-                          opacity: controlsVisible ? `1` : '0',
+                          visibility: isSeekEnabled ? `` : `hidden`,
+                          opacity: isSeekEnabled ? `1` : '0',
                         }}
                       >
-                        <HMSVideoPlayer.Controls.Root
-                          css={{
-                            p: '$4 $8',
-                          }}
-                        >
-                          <HMSVideoPlayer.Controls.Left>
-                            {hlsViewRef.current && <LeaveRoom screenType={screenType} container={hlsViewRef.current} />}
-                          </HMSVideoPlayer.Controls.Left>
-                          <HMSVideoPlayer.Controls.Right>
-                            {isLandscape && <ChatToggle />}
-                            {hasCaptions && !isHlsAutoplayBlocked && (
-                              <HLSCaptionSelector isEnabled={isCaptionEnabled} />
-                            )}
-                            {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
-                              <HLSQualitySelector
-                                layers={availableLayers}
-                                onOpenChange={setQualityDropDownOpen}
-                                open={qualityDropDownOpen}
-                                selection={currentSelectedQuality}
-                                onQualityChange={handleQuality}
-                                isAuto={isUserSelectedAuto}
-                                containerRef={hlsViewRef.current}
-                              />
-                            ) : null}
-                            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
-                          </HMSVideoPlayer.Controls.Right>
-                        </HMSVideoPlayer.Controls.Root>
-                      </Flex>
-                    </>
-                  ) : null}
+                        <BackwardArrowIcon width={32} height={32} />
+                      </HMSVideoPlayer.Seeker>
+                      <Box
+                        css={{
+                          bg: 'rgba(0, 0, 0, 0.6)',
+                          r: '$round',
+                        }}
+                      >
+                        <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
+                      </Box>
+                      <HMSVideoPlayer.Seeker
+                        title="forward"
+                        css={{
+                          visibility: isSeekEnabled ? `` : `hidden`,
+                          opacity: isSeekEnabled ? `1` : '0',
+                        }}
+                      >
+                        <ForwardArrowIcon width={32} height={32} />
+                      </HMSVideoPlayer.Seeker>
+                    </Flex>
+                  )}
                   <Flex
                     ref={controlsRef}
-                    direction={isMobile ? 'columnReverse' : 'column'}
-                    justify="end"
+                    direction="column"
+                    justify="start"
                     align="start"
                     css={{
                       position: 'absolute',
-                      bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
+                      top: '0',
                       left: '0',
-                      zIndex: 1,
-                      background:
-                        isMobile || isLandscape
-                          ? ''
-                          : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
                       width: '100%',
-                      pt: '$8',
                       flexShrink: 0,
-                      transition: 'visibility 0s 0.5s, opacity 0.5s linear',
+                      zIndex: 1,
                       visibility: controlsVisible ? `` : `hidden`,
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
-                      <HMSVideoPlayer.Progress seekProgress={seekProgress} setSeekProgress={setSeekProgress} />
-                    ) : null}
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
                       }}
                     >
-                      <HMSVideoPlayer.Controls.Left>
-                        {!(isMobile || isLandscape) && (
-                          <>
-                            {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
-                              <>
-                                <HMSVideoPlayer.Seeker
-                                  onClick={() => {
-                                    onSeekTo(-10);
-                                  }}
-                                  title="backward"
-                                >
-                                  <BackwardArrowIcon width={20} height={20} />
-                                </HMSVideoPlayer.Seeker>
-                                <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                                <HMSVideoPlayer.Seeker
-                                  onClick={() => {
-                                    onSeekTo(10);
-                                  }}
-                                  title="forward"
-                                >
-                                  <ForwardArrowIcon width={20} height={20} />
-                                </HMSVideoPlayer.Seeker>
-                                {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
-                              </>
-                            ) : null}
-                            <HMSVideoPlayer.Volume />
-                          </>
-                        )}
-                        <IconButton
-                          css={{ px: '$2' }}
-                          onClick={async () => {
-                            await hlsPlayer?.seekToLivePosition();
-                            setIsVideoLive(true);
-                          }}
-                          key="jump-to-live_btn"
-                          data-testid="jump-to-live_btn"
-                        >
-                          <Tooltip title={isVideoLive ? 'Live' : 'Go to Live'} side="top">
-                            <Flex justify="center" gap={2} align="center">
-                              <Box
-                                css={{
-                                  height: '$4',
-                                  width: '$4',
-                                  background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
-                                  r: '$1',
-                                }}
-                              />
-                              <Text
-                                variant="$body1"
-                                css={{
-                                  c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
-                                  fontWeight: '$semiBold',
-                                }}
-                              >
-                                {isVideoLive ? 'LIVE' : 'GO LIVE'}
-                              </Text>
-                            </Flex>
-                          </Tooltip>
-                        </IconButton>
-                        {(isMobile || isLandscape) &&
-                        !isVideoLive &&
-                        hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
-                          <HMSVideoPlayer.Duration />
-                        ) : null}
-                      </HMSVideoPlayer.Controls.Left>
-
                       <HMSVideoPlayer.Controls.Right>
-                        {hasCaptions && !(isMobile || isLandscape) && (
-                          <HLSCaptionSelector isEnabled={isCaptionEnabled} />
-                        )}
-                        {availableLayers.length > 0 && !(isMobile || isLandscape) ? (
+                        {isLandscape && <ChatToggle />}
+                        {hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
+                        {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                           <HLSQualitySelector
                             layers={availableLayers}
                             onOpenChange={setQualityDropDownOpen}
@@ -600,37 +511,135 @@ const HLSView = () => {
                             selection={currentSelectedQuality}
                             onQualityChange={handleQuality}
                             isAuto={isUserSelectedAuto}
+                            containerRef={hlsViewRef.current}
                           />
                         ) : null}
-                        {isFullScreenSupported ? (
-                          <FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
-                        ) : null}
+                        <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
                       </HMSVideoPlayer.Controls.Right>
                     </HMSVideoPlayer.Controls.Root>
                   </Flex>
                 </>
-              </HMSVideoPlayer.Root>
-            </Flex>
-          </HMSPlayerContext.Provider>
+              ) : null}
+              {controlsVisible && (
+                <Flex
+                  ref={controlsRef}
+                  direction={isMobile ? 'columnReverse' : 'column'}
+                  justify="end"
+                  align="start"
+                  css={{
+                    position: 'absolute',
+                    bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
+                    left: '0',
+                    zIndex: 1,
+                    background:
+                      isMobile || isLandscape
+                        ? ''
+                        : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
+                    width: '100%',
+                    pt: '$8',
+                    flexShrink: 0,
+                    transition: 'visibility 0s 0.5s, opacity 0.5s linear',
+                  }}
+                >
+                  {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                    <HMSVideoPlayer.Progress seekProgress={seekProgress} setSeekProgress={setSeekProgress} />
+                  ) : null}
+                  <HMSVideoPlayer.Controls.Root
+                    css={{
+                      p: '$4 $8',
+                    }}
+                  >
+                    <HMSVideoPlayer.Controls.Left>
+                      {!(isMobile || isLandscape) && (
+                        <>
+                          {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                            <>
+                              <HMSVideoPlayer.Seeker
+                                onClick={() => {
+                                  onSeekTo(-10);
+                                }}
+                                title="backward"
+                              >
+                                <BackwardArrowIcon width={20} height={20} />
+                              </HMSVideoPlayer.Seeker>
+                              <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
+                              <HMSVideoPlayer.Seeker
+                                onClick={() => {
+                                  onSeekTo(10);
+                                }}
+                                title="forward"
+                              >
+                                <ForwardArrowIcon width={20} height={20} />
+                              </HMSVideoPlayer.Seeker>
+                              {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                            </>
+                          ) : null}
+                          <HMSVideoPlayer.Volume />
+                        </>
+                      )}
+                      <IconButton
+                        css={{ px: '$2' }}
+                        onClick={async () => {
+                          await hlsPlayer?.seekToLivePosition();
+                          setIsVideoLive(true);
+                        }}
+                        key="jump-to-live_btn"
+                        data-testid="jump-to-live_btn"
+                      >
+                        <Tooltip title={isVideoLive ? 'Live' : 'Go to Live'} side="top">
+                          <Flex justify="center" gap={2} align="center">
+                            <Box
+                              css={{
+                                height: '$4',
+                                width: '$4',
+                                background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
+                                r: '$1',
+                              }}
+                            />
+                            <Text
+                              variant="$body1"
+                              css={{
+                                c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
+                                fontWeight: '$semiBold',
+                              }}
+                            >
+                              {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                            </Text>
+                          </Flex>
+                        </Tooltip>
+                      </IconButton>
+                      {(isMobile || isLandscape) &&
+                      !isVideoLive &&
+                      hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                        <HMSVideoPlayer.Duration />
+                      ) : null}
+                    </HMSVideoPlayer.Controls.Left>
 
-          {isMobile && !isFullScreen && <HLSViewTitle />}
-        </>
-      ) : (
-        <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
-          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
-            {isMobile || isLandscape ? <LeaveRoom screenType={screenType} /> : null}
-          </Flex>
-          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
-            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
-          </Flex>
-          <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
-            {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
-          </Text>
-          <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
-            {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
-          </Text>
+                    <HMSVideoPlayer.Controls.Right>
+                      {hasCaptions && !(isMobile || isLandscape) && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
+                      {availableLayers.length > 0 && !(isMobile || isLandscape) ? (
+                        <HLSQualitySelector
+                          layers={availableLayers}
+                          onOpenChange={setQualityDropDownOpen}
+                          open={qualityDropDownOpen}
+                          selection={currentSelectedQuality}
+                          onQualityChange={handleQuality}
+                          isAuto={isUserSelectedAuto}
+                        />
+                      ) : null}
+                      {isFullScreenSupported ? (
+                        <FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
+                      ) : null}
+                    </HMSVideoPlayer.Controls.Right>
+                  </HMSVideoPlayer.Controls.Root>
+                </Flex>
+              )}
+            </>
+          </HMSVideoPlayer.Root>
         </Flex>
-      )}
+      </HMSPlayerContext.Provider>
+
+      {isMobile && !isFullScreen && <HLSViewTitle />}
     </Flex>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
index b17a03a68a..47f8344509 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -43,16 +43,13 @@ const Wrapper = styled('div', {
   },
   '@md': {
     p: '$6 $8',
-    pb: '$12',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
     animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
   },
   variants: {
     landscapeStream: {
       true: {
         '@lg': {
-          position: 'unset !important',
+          position: 'unset',
           minHeight: '100%',
         },
       },
@@ -66,14 +63,18 @@ const Wrapper = styled('div', {
     },
     overlayChat: {
       true: {
-        height: 'unset',
-        maxHeight: 300,
-        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)',
-        '@md': {
-          pb: '$20',
+        '@lg': {
+          maxHeight: '300px',
+          background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)',
+          position: 'fixed',
+          zIndex: 12,
+          bottom: 0,
         },
       },
     },
+    hideControls: {
+      true: {},
+    },
   },
   compoundVariants: [
     {
@@ -83,6 +84,9 @@ const Wrapper = styled('div', {
         position: 'unset',
         height: '100%',
         maxHeight: 'unset',
+        '@md': {
+          pb: 0,
+        },
       },
     },
     {
@@ -94,6 +98,13 @@ const Wrapper = styled('div', {
         maxHeight: 'unset',
       },
     },
+    {
+      hideControls: false,
+      overlayChat: true,
+      css: {
+        pb: '$17',
+      },
+    },
   ],
 });
 
@@ -138,21 +149,64 @@ const SidePane = ({
   const commonProps = {
     landscapeStream: isLandscapeHLSStream,
     mobileStream: isMobileHLSStream,
+    hideControls,
+    overlayChat: !!elements?.chat?.is_overlay,
   };
 
+  const SidepaneComponent = match(sidepane)
+    .with(SIDE_PANE_OPTIONS.POLLS, () => (
+      <Wrapper
+        css={{
+          '@md': {
+            borderTopLeftRadius: '$2',
+            borderTopRightRadius: '$2',
+          },
+        }}
+        {...commonProps}
+      >
+        <Polls />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.VB, () => (
+      <Wrapper css={{ p: '$10 $6 $10 $10' }} {...commonProps}>
+        <VBPicker backgroundMedia={backgroundMedia} />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => (
+      <Wrapper {...commonProps} overlayChat={mwebStreamingChat}>
+        <SidePaneTabs active={sidepane} hideTab={isMobileHLSStream || isLandscapeHLSStream} />
+      </Wrapper>
+    ))
+    .with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => (
+      <Wrapper {...commonProps}>
+        <RoomDetailsPane />
+      </Wrapper>
+    ))
+    .otherwise(() => {
+      return null;
+    });
+
+  if (!trackId && !SidepaneComponent) {
+    return null;
+  }
+
   return (
     <Flex
       direction="column"
       justify="center"
       css={{
-        w: '$100',
+        w: match({ isMobileHLSStream, isLandscapeHLSStream })
+          .with({ isLandscapeHLSStream: true }, () => '340px')
+          .with({ isMobileHLSStream: true }, () => '100%')
+          .otherwise(() => '$100'),
         h: '100%',
         flexShrink: 0,
         gap: '$4',
         position: 'relative',
         '&:empty': { display: 'none' },
-        '@ls': {
-          w: isMobileHLSStream || isLandscapeHLSStream ? '340px' : '$100',
+        '@md': {
+          position: 'absolute',
+          zIndex: 12,
         },
       }}
     >
@@ -166,43 +220,7 @@ const SidePane = ({
           {...tileLayout}
         />
       )}
-
-      {match(sidepane)
-        .with(SIDE_PANE_OPTIONS.POLLS, () => (
-          <Wrapper
-            css={{
-              '@md': {
-                borderTopLeftRadius: '$2',
-                borderTopRightRadius: '$2',
-              },
-            }}
-            {...commonProps}
-          >
-            <Polls />
-          </Wrapper>
-        ))
-        .with(SIDE_PANE_OPTIONS.VB, () => (
-          <Wrapper css={{ p: '$10 $6 $10 $10' }} {...commonProps}>
-            <VBPicker backgroundMedia={backgroundMedia} />
-          </Wrapper>
-        ))
-        .with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => (
-          <Wrapper {...commonProps} overlayChat={mwebStreamingChat}>
-            <SidePaneTabs
-              hideControls={hideControls}
-              active={sidepane}
-              hideTab={isMobileHLSStream || isLandscapeHLSStream}
-            />
-          </Wrapper>
-        ))
-        .with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => (
-          <Wrapper {...commonProps}>
-            <RoomDetailsPane />
-          </Wrapper>
-        ))
-        .otherwise(() => {
-          return null;
-        })}
+      {SidepaneComponent}
     </Flex>
   );
 };
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
index b1deebd310..d19c00f368 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -4,6 +4,7 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectLocalPeerRoleName,
@@ -107,12 +108,19 @@ export const VideoStreamingSection = ({
           position: 'relative',
           gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
         }}
-        direction={isMobileHLSStream ? 'column' : 'row'}
+        direction={match<Record<string, boolean>, 'row' | 'column'>({ isLandscapeHLSStream, isMobileHLSStream })
+          .with({ isLandscapeHLSStream: true }, () => 'row')
+          .with({ isMobileHLSStream: true }, () => 'column')
+          .otherwise(() => 'row')}
       >
         {ViewComponent}
         <Box
           css={{
-            flex: isMobileHLSStream ? '1 1 0' : undefined,
+            flex: match({ isLandscapeHLSStream, isMobileHLSStream })
+              .with({ isLandscapeHLSStream: true }, () => '1  1 0')
+              .with({ isMobileHLSStream: true }, () => '2 1 0')
+              .otherwise(() => undefined),
+            position: 'relative',
             height: !isMobileHLSStream ? '100%' : undefined,
             maxHeight: '100%',
             '&:empty': { display: 'none' },