diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index c5dccb4d0..37989f177 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -28,6 +28,20 @@ body {
     padding: $gutter;
     font-family: 'Optimo-Plain';
     font-size: $font-size-normal;
+    overflow-y: hidden;
+    animation: display-transition 1s ease-out;
+}
+
+@keyframes display-transition {
+    0% {
+        opacity: 0;
+    }
+    99%{
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 main {
@@ -35,31 +49,28 @@ main {
     background-color: var(--body-background-color);
 }
 
-main.withHeaderFooter {
-    padding-top: 64px;
+main {
     display: flex;
-    min-height: 100vh;
-    overflow: hidden;
+    height: calc(100lvh - $header-height);
 }
 
-
-
 * {
     box-sizing: border-box;
 }
 
-strong, b {
-  font-weight: bold;
+strong,
+b {
+    font-weight: bold;
 }
 
 .anchor {
-  display: block;
-  padding-top: 80px;   /* height of sticky header */
-  margin-top: -80px;
+    display: block;
+    padding-top: 80px; /* height of sticky header */
+    margin-top: -80px;
 }
 
 .anchor-link {
-  scroll-margin: 120px;
+    scroll-margin: 120px;
 }
 
 a {
@@ -103,9 +114,45 @@ a {
 
 /*end visited class*/
 
+.headerPlaceholder {
+    height: $header-height;
+}
+
 .introWrapper {
     display: flex;
 }
+
+.documentWrapperContainer {
+    height: calc(100lvh - $document-padding);
+    width: calc(100%);
+    overflow-y: auto;
+
+    &:not(:last-child) {
+        margin-right: 4rem;
+    }
+}
+
+.documentWrapperContainer::-webkit-scrollbar {
+    display: none;
+}
+
+.docmapWrapper {
+    height: calc(100lvh - $document-padding);
+    padding: 10px $padding-md 80px $padding-md;
+    width: 25%;
+    overflow-y: auto;
+}
+
+.docmapWrapper::-webkit-scrollbar {
+    display: none;
+}
+
+.playgroundWrapper {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
 .pb-10 {
     padding-bottom: 10px;
 }
@@ -113,7 +160,7 @@ a {
 // TODO : improve all this to use flex
 .restApiWrapper {
     width: 100%;
-    height: 100vh;
+    height: 100lvh;
     overflow: hidden;
 
     iframe {
@@ -125,7 +172,7 @@ a {
 
 // in case header is loaded
 .withHeaderFooter .restApiWrapper {
-  height: calc(100vh - 65px);
+    height: 100%;
 }
 
 button {
@@ -241,7 +288,6 @@ button {
     align-items: center;
 }
 
-
 .earlyAccess {
     border-radius: $beta-border-radius;
     display: inline-flex;
@@ -258,7 +304,6 @@ button {
     align-items: center;
 }
 
-
 .blueBackground {
     background-color: $note-color;
 }
@@ -633,12 +678,32 @@ a.anchor {
     border-radius: 4px;
 }
 
-/* Scrollbar styling end*/
-@media screen and (min-width: 767px) and (max-width: 1024px) {
-    .documentBody {
-        width: calc(100% - 260px);
+.documentBody {
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1300px) {
+    .docmapWrapper {
+        width: 35%;
+    }
+}
+
+@media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) {
+    .docmapWrapper {
+        display: none;
+    }
+}
+
+@media screen and (max-width: $tablet-resolution-max) {
+    .docmapWrapper {
+        display: none;
     }
+}
 
+/* Scrollbar styling end*/
+@media screen and (min-width: 767px) and (max-width: 1024px) {
     .homeBanner {
         display: none;
     }
@@ -648,8 +713,12 @@ a.anchor {
         max-width: 100%;
     }
 
-    .documentWrapper {
+    .documentWrapperContainer {
         width: 100%;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
     }
     .homeHeaderText {
         width: 100%;
@@ -667,8 +736,38 @@ a.anchor {
     }
 }
 
+@media screen and (max-width: $tablet-resolution-min) {
+    .documentWrapperContainer {
+        width: 100%;
+        overflow-x: auto;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
+
+        pre {
+            overflow-x: auto;
+        }
+    }
+}
+
+@media screen and (max-width: $mobile-resolution-max) {
+    .documentWrapperContainer {
+        width: 100%;
+        overflow-x: auto;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
+
+        pre {
+            overflow-x: auto;
+        }
+    }
+}
+
 .leftNavContainer {
-    margin-top: 0;
+    height: -webkit-fill-available;
 }
 
 @media screen and (max-width: $mobile-resolution-max) {
@@ -690,8 +789,8 @@ a.anchor {
     }
 
     .documentBody {
-        width: 100%;
         padding-left: 0;
+        padding-right: 0;
     }
 
     .homeHeaderText {
@@ -723,10 +822,14 @@ a.anchor {
     .tableContainer {
         overflow: scroll;
     }
+    .leftNavContainer {
+        margin-top: 0px;
+        height: auto;
+    }
 }
 
 @media screen and (max-width: $mobile-resolution-max) {
-    main.withHeaderFooter {
+    main {
         flex-direction: column;
     }
 }
@@ -894,7 +997,6 @@ a.anchor {
     }
 }
 
-
 .document-body-wrapper {
     padding: 30px;
 }
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 2f856750e..4b286002f 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -251,3 +251,5 @@ $tag-color-light: $lightgrey;
     --box-shadow-hover: 0 16px 20px 0 rgb(255 255 255 / 6%),
         0 16px 20px 0 rgb(255 255 255 / 6%);
 }
+
+$header-height: 65px;
diff --git a/src/components/DevDocTemplate/askDocs.tsx b/src/components/DevDocTemplate/askDocs.tsx
index c6d9e3882..b7bcc7302 100644
--- a/src/components/DevDocTemplate/askDocs.tsx
+++ b/src/components/DevDocTemplate/askDocs.tsx
@@ -3,10 +3,11 @@ import React from 'react';
 export const AskDocs = () => {
     return (
         <iframe
-            style={{ flex: '1 1 0', height: '100vh' }}
+            style={{ flex: '1 1 0', height: '100lvh' }}
             src="https://tse-app-builder.vercel.app/complete?embed=true"
             frameBorder="0"
             id="iframe"
+            width="100%"
         />
     );
 };
diff --git a/src/components/DevDocTemplate/index.tsx b/src/components/DevDocTemplate/index.tsx
index b74626fe5..be6ea8441 100644
--- a/src/components/DevDocTemplate/index.tsx
+++ b/src/components/DevDocTemplate/index.tsx
@@ -93,14 +93,12 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
         fetchChild(initialNavContentData) || [],
     );
     const [showSearch, setShowSearch] = useState(false);
-    const [leftNavWidth, setLeftNavWidth] = useState(
-        width > MAX_TABLET_RESOLUTION
-            ? LEFT_NAV_WIDTH_DESKTOP
-            : LEFT_NAV_WIDTH_TABLET,
-    );
     const [leftNavOpen, setLeftNavOpen] = useState(false);
     const [keyword, updateKeyword] = useState('');
-    const [isPublicSiteOpen, setIsPublicSiteOpen] = useState(false);
+    const [isPublicSiteOpen, setIsPublicSiteOpen] = useState(() => {
+        if (typeof window !== 'undefined') return isPublicSite(location.search);
+        return true;
+    });
     const checkout =
         typeof window !== 'undefined'
             ? localStorage.getItem('theme') === 'dark'
@@ -327,16 +325,6 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
         });
     }
 
-    const calculateDocumentBodyWidth = () => {
-        if (isMaxMobileResolution && !isCustomPage) {
-            if (width > MAX_CONTENT_WIDTH_DESKTOP) {
-                if (isHomePage) return width - leftNavWidth;
-                return `${MAX_CONTENT_WIDTH_DESKTOP - 300}px`;
-            }
-            return `${width - 300}px`;
-        }
-        return '100%';
-    };
     const shouldShowRightNav = params[TS_PAGE_ID_PARAM] !== HOME_PAGE_ID;
     Modal.setAppElement('#___gatsby');
     const renderSearch = () => {
@@ -385,7 +373,6 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                         setDarkMode={setDarkMode}
                         isDarkMode={isDarkMode}
                         isPublicSiteOpen={isPublicSiteOpen}
-                        leftNavWidth={leftNavWidth}
                     />
                 </div>
             </Modal>
@@ -406,7 +393,6 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                     navTitle={navTitle}
                     navContent={navContent}
                     docWidth={width}
-                    handleLeftNavChange={setLeftNavWidth}
                     location={location}
                     setLeftNavOpen={setLeftNavOpen}
                     leftNavOpen={leftNavOpen}
@@ -422,16 +408,7 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                 />
             </div>
             {isAskDocsPage ? (
-                <div
-                    className="documentBody"
-                    style={{
-                        width: calculateDocumentBodyWidth(),
-                        display: 'flex',
-                        marginLeft: isMaxMobileResolution
-                            ? `${leftNavWidth}px`
-                            : '0px',
-                    }}
-                >
+                <div className="documentBody">
                     <AskDocs />
                 </div>
             ) : (
@@ -439,24 +416,20 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                     className={`documentBody ${
                         isHomePage ? 'doc-home' : 'doc-wrapper-detail'
                     }`}
-                    style={{
-                        width: calculateDocumentBodyWidth(),
-                        marginLeft: isMaxMobileResolution
-                            ? `${leftNavWidth}px`
-                            : '0px',
-                    }}
                 >
                     <div className="introWrapper">
-                        <Document
-                            shouldShowRightNav={shouldShowRightNav}
-                            pageid={params[TS_PAGE_ID_PARAM]}
-                            docTitle={docTitle}
-                            docContent={docContent}
-                            breadcrumsData={breadcrumsData}
-                            isPublicSiteOpen={isPublicSiteOpen}
-                        />
+                        <div className="documentWrapperContainer">
+                            <Document
+                                shouldShowRightNav={shouldShowRightNav}
+                                pageid={params[TS_PAGE_ID_PARAM]}
+                                docTitle={docTitle}
+                                docContent={docContent}
+                                breadcrumsData={breadcrumsData}
+                                isPublicSiteOpen={isPublicSiteOpen}
+                            />
+                        </div>
                         {shouldShowRightNav && (
-                            <div>
+                            <div className="docmapWrapper">
                                 <Docmap
                                     docContent={docContent}
                                     location={location}
@@ -522,7 +495,6 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                 id="wrapper"
                 data-theme={isDarkMode ? 'dark' : 'light'}
                 key={key}
-                style={{ height: '100vh', overflow: 'hidden' }}
             >
                 {isPublicSiteOpen && (
                     <Header
@@ -531,17 +503,30 @@ const DevDocTemplate: FC<DevDocTemplateProps> = (props) => {
                         isDarkMode={isDarkMode}
                     />
                 )}
+                <div
+                    className="headerPlaceholder"
+                    style={
+                        isPublicSiteOpen
+                            ? { height: '65px' }
+                            : { height: '0px' }
+                    }
+                ></div>
                 <main
-                    ref={ref as React.RefObject<HTMLDivElement>}
                     className={getClassName()}
-                    style={{
-                        height: !docContent
-                            ? MAIN_HEIGHT_WITHOUT_DOC_CONTENT
-                            : 'calc(100vh - 60px)',
-                        overflow: 'auto',
-                    }}
+                    ref={ref as React.RefObject<HTMLDivElement>}
+                    style={
+                        !isPublicSiteOpen
+                            ? { height: '100lvh' }
+                            : { height: 'calc(100lvh -  65px)' }
+                    }
                 >
-                    {isPlayGround ? renderPlayGround() : renderDocTemplate()}
+                    {isPlayGround ? (
+                        <div className="playgroundWrapper">
+                            {renderPlayGround()}
+                        </div>
+                    ) : (
+                        renderDocTemplate()
+                    )}
                 </main>
             </div>
         </>
diff --git a/src/components/Docmap/index.scss b/src/components/Docmap/index.scss
index a9bf5bf11..18282a2d4 100644
--- a/src/components/Docmap/index.scss
+++ b/src/components/Docmap/index.scss
@@ -1,13 +1,9 @@
 @import '../../assets/styles/variables.scss';
 
 .docmapLinks {
-    width: 16%;
-    padding: 10px $padding-md 80px $padding-md;
-    position: fixed;
-    right: 0;
+    width: -webkit-fill-available;
     font-size: 14px;
-    height: 100vh;
-    overflow-y: auto;
+    height: 100lvh;
 
     .tocTitle {
         margin: 0;
diff --git a/src/components/Docmap/index.tsx b/src/components/Docmap/index.tsx
index 0a4150dde..44325f3da 100644
--- a/src/components/Docmap/index.tsx
+++ b/src/components/Docmap/index.tsx
@@ -18,15 +18,18 @@ const Docmap = (props: {
         const tocEl = doc.querySelector('#toc');
         if (tocEl) {
             const { hash } = props.location;
+            setToc(tocEl.innerHTML);
             if (hash) {
                 const ele = document.querySelector(hash);
                 if (ele) {
-                    document.documentElement.scrollTop =
-                        (ele as HTMLElement).offsetTop -
-                        INTRO_WRAPPER_MARGIN_TOP;
+                    ele.scrollIntoView({
+                        block: 'start',
+                    });
+
+                    // Apply offset to keep header visible
+                    window.scrollBy(0, -55);
                 }
             }
-            setToc(tocEl.innerHTML);
         } else {
             setToc('');
         }
@@ -50,7 +53,10 @@ const Docmap = (props: {
         toc !== '' && (
             <div className="docmapLinks">
                 <p className="tocTitle">{t('RIGHT_NAV_SIDERBAR_TITLE')}</p>
-                <div data-testid="toc" dangerouslySetInnerHTML={{ __html: toc }} />
+                <div
+                    data-testid="toc"
+                    dangerouslySetInnerHTML={{ __html: toc }}
+                />
             </div>
         )
     );
diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss
index 7adb26298..957f0871e 100644
--- a/src/components/Document/index.scss
+++ b/src/components/Document/index.scss
@@ -4,7 +4,7 @@
 @import '../../assets/styles/grid.scss';
 
 .documentWrapper {
-    width: calc(100% - #{$docmap-width-desktop});
+    width: calc(100%);
     color: var(--primary-color);
 
     .documentView {
@@ -24,16 +24,6 @@
       visibility: hidden;
     }
 
-   /* Optional: apply scroll-margin to headings */
-    h1[id],
-    h2[id],
-    h3[id],
-    h4[id],
-    h5[id],
-    h6[id] {
-      scroll-margin-top: 70px;
-    }
-
    .scroll-container {
       scroll-behavior: smooth;
       scroll-padding-top: 65px;
@@ -330,7 +320,7 @@ pre {
 
 @media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) {
     .documentWrapper {
-        width: calc(100% - #{$docmap-width-tablet});
+        width: -webkit-fill-available;
     }
 }
 
diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss
index 85ad2f782..f0bc8632e 100644
--- a/src/components/Header/index.scss
+++ b/src/components/Header/index.scss
@@ -2,9 +2,11 @@
 
 header {
     background: var(--header-color);
-    position: fixed;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 65px;
+    height: $header-height;
     border-bottom: var(--header-border-color);
     z-index: $header-zIndex;
 
diff --git a/src/components/LeftSidebar/NavContent.tsx b/src/components/LeftSidebar/NavContent.tsx
index 52ce03f79..7629d9022 100644
--- a/src/components/LeftSidebar/NavContent.tsx
+++ b/src/components/LeftSidebar/NavContent.tsx
@@ -19,7 +19,8 @@ const NavContent = (props: {
     return (
         <aside
             ref={props.refObj}
-            className={props.leftNavOpen ? 'asideDisplay' : ''}
+            className={props.leftNavOpen ? 'aside asideDisplay' : 'aside'}
+            key={'aside'}
         >
             {props.backLink && (
                 <BackButton
diff --git a/src/components/LeftSidebar/index.scss b/src/components/LeftSidebar/index.scss
index 002ce7962..32d2cc3f0 100644
--- a/src/components/LeftSidebar/index.scss
+++ b/src/components/LeftSidebar/index.scss
@@ -75,12 +75,12 @@
     }
 }
 
-aside {
+.aside {
     padding: 0 0 0 10px;
     width: 100%;
     border-right: 0.5px var(--border-color) solid;
     left: $gutter;
-    height: 100vh;
+    height: 100%;
     overflow-y: auto;
     background: var(--nav-bar-color);
 
@@ -244,20 +244,27 @@ aside {
     cursor: col-resize;
 }
 
-.resizable {
-    position: fixed;
+.resizable-container {
+    position: relative;
+    height: 100%;
+}
+
+.resizable{
+    height: 100%;
 }
+
 .searchInputSelector {
     margin-top: 30px;
     padding-right: 30px;
 }
 
 @media screen and (max-width: $mobile-resolution-max) {
-    aside {
-        height: 100%;
+    .aside {
+        height: calc(100lvh - $header-height);
         display: none;
         padding-top: 0;
         padding-bottom: 0;
+        overflow-y: scroll;
 
         .navWrapper,
         .navWrapper.withHeaderFooter {
@@ -265,6 +272,10 @@ aside {
         }
     }
 
+    .asideDisplay {
+        display: block;
+    }
+
     .menuContainer {
         padding: 8px;
         svg {
diff --git a/src/components/LeftSidebar/index.tsx b/src/components/LeftSidebar/index.tsx
index 8bbcce42c..54e0ac5e1 100644
--- a/src/components/LeftSidebar/index.tsx
+++ b/src/components/LeftSidebar/index.tsx
@@ -34,7 +34,6 @@ const LeftSideBar = (props: {
     leftNavOpen: boolean;
     isMaxMobileResolution: boolean;
     isDarkMode: boolean;
-    handleLeftNavChange: (width: number) => void;
     location: Location;
     setLeftNavOpen: Function;
     isPublicSiteOpen: boolean;
@@ -70,10 +69,6 @@ const LeftSideBar = (props: {
         setNavContent(updatedHTML);
     }, [params[NAV_PREFIX], params[TS_PAGE_ID_PARAM], props.navContent]);
 
-    useEffect(() => {
-        props.handleLeftNavChange(ref?.current?.offsetWidth);
-    }, [width]);
-
     const toggleExpandOnTab = (text: string) => {
         const allTabsRef = { ...expandedTabsRef.current };
         if (allTabsRef[text] !== undefined) {
@@ -99,39 +94,40 @@ const LeftSideBar = (props: {
 
     const renderLeftNav = () => {
         return isMaxMobileResolution ? (
-            <ResizableBox
-                width={
-                    isMaxTabletResolution
-                        ? LEFT_NAV_WIDTH_DESKTOP
-                        : LEFT_NAV_WIDTH_TABLET
-                }
-                minConstraints={[
-                    isMaxTabletResolution
-                        ? MIN_LEFT_NAV_WIDTH_DESKTOP
-                        : MIN_LEFT_NAV_WIDTH_TABLET,
-                ]}
-                maxConstraints={[
-                    isMaxTabletResolution
-                        ? MAX_LEFT_NAV_WIDTH_DESKTOP
-                        : MAX_LEFT_NAV_WIDTH_TABLET,
-                ]}
-                axis="x"
-                className="resizable"
-                height={height || 0} // Height is set to 0 when element is not rendered
-            >
-                <NavContent
-                    backLink={props.backLink}
-                    navContent={navContent}
-                    navTitle={props.navTitle}
-                    refObj={ref as React.RefObject<HTMLDivElement>}
-                    leftNavOpen={props.leftNavOpen}
-                    isPublicSiteOpen={props.isPublicSiteOpen}
-                    isMaxMobileResolution={isMaxMobileResolution}
-                    setDarkMode={props.setDarkMode}
-                    isDarkMode={props.isDarkMode}
-                    searchClickHandler={props.searchClickHandler}
-                />
-            </ResizableBox>
+            <div className="resizable-container">
+                <ResizableBox
+                    width={
+                        isMaxTabletResolution
+                            ? LEFT_NAV_WIDTH_DESKTOP
+                            : LEFT_NAV_WIDTH_TABLET
+                    }
+                    minConstraints={[
+                        isMaxTabletResolution
+                            ? MIN_LEFT_NAV_WIDTH_DESKTOP
+                            : MIN_LEFT_NAV_WIDTH_TABLET,
+                    ]}
+                    maxConstraints={[
+                        isMaxTabletResolution
+                            ? MAX_LEFT_NAV_WIDTH_DESKTOP
+                            : MAX_LEFT_NAV_WIDTH_TABLET,
+                    ]}
+                    axis="x"
+                    className="resizable"
+                >
+                    <NavContent
+                        backLink={props.backLink}
+                        navContent={navContent}
+                        navTitle={props.navTitle}
+                        refObj={ref as React.RefObject<HTMLDivElement>}
+                        leftNavOpen={props.leftNavOpen}
+                        isPublicSiteOpen={props.isPublicSiteOpen}
+                        isMaxMobileResolution={isMaxMobileResolution}
+                        setDarkMode={props.setDarkMode}
+                        isDarkMode={props.isDarkMode}
+                        searchClickHandler={props.searchClickHandler}
+                    />
+                </ResizableBox>
+            </div>
         ) : (
             <div className="menuMain">
                 <div className="menuContainer">
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index ef2b55284..5167dea15 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -26,7 +26,6 @@ type SearchProps = {
     updateKeyword: Function;
     setDarkMode: Function;
     isPublicSiteOpen: boolean;
-    leftNavWidth: number;
 };
 
 const Search: React.FC<SearchProps> = (props) => {
diff --git a/src/components/VersionIframe/index.scss b/src/components/VersionIframe/index.scss
index 1323a1232..efa561e44 100644
--- a/src/components/VersionIframe/index.scss
+++ b/src/components/VersionIframe/index.scss
@@ -1,6 +1,7 @@
 .version-iframe-container {
     position: relative;
     width: 100%;
+    height: 100%;
     flex: 1;
 }
 
diff --git a/src/constants/uiConstants.ts b/src/constants/uiConstants.ts
index c2d5889b4..863afad81 100644
--- a/src/constants/uiConstants.ts
+++ b/src/constants/uiConstants.ts
@@ -8,6 +8,6 @@ export const MAX_LEFT_NAV_WIDTH_DESKTOP = 400;
 export const MIN_LEFT_NAV_WIDTH_TABLET = 150;
 export const MAX_LEFT_NAV_WIDTH_TABLET = 400;
 export const INTRO_WRAPPER_MARGIN_TOP = 150;
-export const MAIN_HEIGHT_WITHOUT_DOC_CONTENT = '100vh';
+export const MAIN_HEIGHT_WITHOUT_DOC_CONTENT = '100lvh';
 export const DOC_VERSION_PROD = '';
 export const DOC_VERSION_DEV = '-dev';