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/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
index a6e660efe1..79df6cdf60 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -353,12 +353,17 @@ const HLSView = () => {
       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',
       }}
     >
+      {hlsViewRef.current && (isMobile || isLandscape) && (
+        <Box css={{ position: 'fixed', left: '$4', top: '$4', zindex: 11 }}>
+          <LeaveRoom screenType={screenType} container={hlsViewRef.current} />
+        </Box>
+      )}
+
       {hlsUrl && !streamEnded ? (
         <>
           <HMSPlayerContext.Provider value={{ hlsPlayer }}>
@@ -372,6 +377,9 @@ const HLSView = () => {
               css={{
                 size: '100%',
                 margin: '0 auto',
+                '@md': {
+                  height: 'auto',
+                },
               }}
             >
               {!(isMobile || isLandscape) && (
@@ -464,9 +472,6 @@ const HLSView = () => {
                             p: '$4 $8',
                           }}
                         >
-                          <HMSVideoPlayer.Controls.Left>
-                            {hlsViewRef.current && <LeaveRoom screenType={screenType} container={hlsViewRef.current} />}
-                          </HMSVideoPlayer.Controls.Left>
                           <HMSVideoPlayer.Controls.Right>
                             {isLandscape && <ChatToggle />}
                             {hasCaptions && !isHlsAutoplayBlocked && (
@@ -489,120 +494,123 @@ const HLSView = () => {
                       </Flex>
                     </>
                   ) : null}
-                  <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',
-                      visibility: controlsVisible ? `` : `hidden`,
-                      opacity: controlsVisible ? `1` : '0',
-                    }}
-                  >
-                    {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? <HMSVideoPlayer.Progress /> : null}
-                    <HMSVideoPlayer.Controls.Root
+                  {controlsVisible && (
+                    <Flex
+                      ref={controlsRef}
+                      direction={isMobile ? 'columnReverse' : 'column'}
+                      justify="end"
+                      align="start"
                       css={{
-                        p: '$4 $8',
+                        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',
                       }}
                     >
-                      <HMSVideoPlayer.Controls.Left>
-                        {!(isMobile || isLandscape) && (
-                          <>
-                            {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
-                              <>
-                                <HMSVideoPlayer.Seeker
-                                  onClick={() => {
-                                    onSeekTo(-10);
+                      {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                        <HMSVideoPlayer.Progress />
+                      ) : 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',
                                   }}
-                                  title="backward"
-                                >
-                                  <BackwardArrowIcon width={20} height={20} />
-                                </HMSVideoPlayer.Seeker>
-                                <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                                <HMSVideoPlayer.Seeker
-                                  onClick={() => {
-                                    onSeekTo(10);
+                                />
+                                <Text
+                                  variant="$body1"
+                                  css={{
+                                    c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
+                                    fontWeight: '$semiBold',
                                   }}
-                                  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>
+                                  {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) ? (
-                          <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.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>
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
index b17a03a68a..4b308d0710 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -140,6 +140,47 @@ const SidePane = ({
     mobileStream: isMobileHLSStream,
   };
 
+  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
+          hideControls={hideControls}
+          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"
@@ -166,43 +207,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>
   );
 };