diff --git a/Composer/packages/client/src/components/Page.tsx b/Composer/packages/client/src/components/Page.tsx
index 9e0d6ed04b..3bc24a1c6e 100644
--- a/Composer/packages/client/src/components/Page.tsx
+++ b/Composer/packages/client/src/components/Page.tsx
@@ -62,9 +62,10 @@ export const headerContent = css`
   label: PageHeaderContent;
 `;
 
+// TODO: https://github.com/microsoft/BotFramework-Composer/issues/6873. Investigate static numbers
 export const main = (hasRenderHeaderContent) => css`
   margin-left: 2px;
-  height: ${hasRenderHeaderContent ? 'calc(100vh - 181px)' : 'calc(100vh - 165px)'};
+  max-height: ${hasRenderHeaderContent ? 'calc(100vh - 181px)' : 'calc(100vh - 165px)'};
   display: flex;
   flex-grow: 1;
   border-top: 1px solid #dddddd;
@@ -220,10 +221,10 @@ const Page: React.FC<IPageProps> = (props) => {
               role="region"
             >
               <div css={contentStyle}>{children}</div>
-              {useDebugPane ? <DebugPanel /> : null}
             </div>
           </Split>
         </div>
+        {useDebugPane ? <DebugPanel /> : null}
       </div>
     </div>
   );
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx b/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
index cb280efbb2..5f257ca99e 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
@@ -23,6 +23,11 @@ import {
   debugPaneHeaderStyle,
   debugPaneContentStyle,
   debugPaneFooterStyle,
+  expandedPanelHeaderHeight,
+  collapsedPaneHeaderHeight,
+  debugPanelDefaultHeight,
+  debugPanelMaxExpandedHeight,
+  debugPanelMinHeight,
 } from './styles';
 import debugExtensions from './TabExtensions';
 import { DebugDrawerKeys, DebugPanelTabHeaderProps } from './TabExtensions/types';
@@ -67,7 +72,7 @@ export const DebugPanel: React.FC = () => {
     return { key: tabKey, element };
   };
 
-  const computedPivotHeight = isPanelExpanded ? 36 : 24;
+  const computedPivotHeight = isPanelExpanded ? expandedPanelHeaderHeight : collapsedPaneHeaderHeight;
 
   const headerPivot = useMemo(() => {
     const tabTitles = debugExtensions
@@ -124,67 +129,69 @@ export const DebugPanel: React.FC = () => {
   }, [isPanelExpanded, activeTab]);
 
   return (
-    <Resizable
-      css={css`
-        ${debugPaneContainerStyle}
-      `}
-      data-testid="debug-panel"
-      defaultSize={{
-        width: '100%',
-        height: isPanelExpanded ? 300 : computedPivotHeight,
-      }}
-      enable={{
-        top: isPanelExpanded,
-        right: false,
-        bottom: false,
-        left: false,
-        topRight: false,
-        bottomRight: false,
-        bottomLeft: false,
-        topLeft: false,
-      }}
-      maxHeight={isPanelExpanded ? 600 : computedPivotHeight}
-      minHeight={isPanelExpanded ? 200 : computedPivotHeight}
-    >
-      <div
+    <div>
+      <Resizable
         css={css`
-          ${debugPaneBarStyle}
-          ${isPanelExpanded ? debugPaneHeaderStyle : debugPaneFooterStyle}
+          ${debugPaneContainerStyle}
         `}
-        data-testid={isPanelExpanded ? 'debug-panel__header' : 'debug-panel__footer'}
+        data-testid="debug-panel"
+        defaultSize={{
+          width: '100%',
+          height: isPanelExpanded ? debugPanelDefaultHeight : computedPivotHeight,
+        }}
+        enable={{
+          top: isPanelExpanded,
+          right: false,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        }}
+        maxHeight={isPanelExpanded ? debugPanelMaxExpandedHeight : computedPivotHeight}
+        minHeight={isPanelExpanded ? debugPanelMinHeight : computedPivotHeight}
       >
-        <div css={leftBarStyle} data-testid="header__left">
-          {headerPivot}
-        </div>
         <div
-          css={{ flexGrow: 1, cursor: 'pointer', outline: 'none' }}
-          data-testid="header__blank"
-          role="button"
-          tabIndex={0}
-          onClick={onDebugPaneClick}
-          onKeyPress={onDebugPaneClick}
-        ></div>
-        <div css={rightBarStyle} data-testid="header__right">
-          <IconButton
-            iconProps={{ iconName: isPanelExpanded ? 'ChevronDown' : 'ChevronUp' }}
-            styles={{ root: { height: '100%' } }}
-            title={formatMessage('Collapse debug panel')}
-            onClick={() => {
-              if (isPanelExpanded) {
-                onCollapsePanel();
-              } else {
-                onExpandPanel('Diagnostics');
-              }
-            }}
+          css={css`
+            ${debugPaneBarStyle}
+            ${isPanelExpanded ? debugPaneHeaderStyle : debugPaneFooterStyle}
+          `}
+          data-testid={isPanelExpanded ? 'debug-panel__header' : 'debug-panel__footer'}
+        >
+          <div css={leftBarStyle} data-testid="header__left">
+            {headerPivot}
+          </div>
+          <div
+            css={{ flexGrow: 1, cursor: 'pointer', outline: 'none' }}
+            data-testid="header__blank"
+            role="button"
+            tabIndex={0}
+            onClick={onDebugPaneClick}
+            onKeyPress={onDebugPaneClick}
           />
+          <div css={rightBarStyle} data-testid="header__right">
+            <IconButton
+              iconProps={{ iconName: isPanelExpanded ? 'ChevronDown' : 'ChevronUp' }}
+              styles={{ root: { height: '100%' } }}
+              title={isPanelExpanded ? formatMessage('Collapse Debug Panel') : formatMessage('Expand Debug Panel')}
+              onClick={() => {
+                if (isPanelExpanded) {
+                  onCollapsePanel();
+                } else {
+                  onExpandPanel('Diagnostics');
+                }
+              }}
+            />
+          </div>
+        </div>
+        <div css={debugPaneContentStyle} data-testid="debug-panel__content">
+          {debugExtensions.map((debugTabs) => {
+            const { ContentWidget } = debugTabs;
+            return <ContentWidget key={`tabContent-${debugTabs.key}`} isActive={activeTab === debugTabs.key} />;
+          })}
         </div>
-      </div>
-      <div css={debugPaneContentStyle} data-testid="debug-panel__content">
-        {debugExtensions.map((debugTabs) => {
-          const { ContentWidget } = debugTabs;
-          return <ContentWidget key={`tabContent-${debugTabs.key}`} isActive={activeTab === debugTabs.key} />;
-        })}
-      </div>
-    </Resizable>
+      </Resizable>
+    </div>
   );
 };
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/styles.ts b/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
index db41a0fca7..ac2b86445a 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
@@ -3,9 +3,11 @@
 
 import { css } from '@emotion/core';
 
-export const DebugPaneHeaderHeight = 36;
-
-export const DebugPaneFooterHeight = 24;
+export const expandedPanelHeaderHeight = 36;
+export const collapsedPaneHeaderHeight = 32;
+export const debugPanelMaxExpandedHeight = 500;
+export const debugPanelDefaultHeight = 300;
+export const debugPanelMinHeight = 200;
 
 export const debugPaneContainerStyle = css`
   display: flex;
@@ -14,18 +16,17 @@ export const debugPaneContainerStyle = css`
 `;
 
 export const debugPaneHeaderStyle = css`
-  height: ${DebugPaneHeaderHeight}px;
   border-top: 1px solid #dfdfdf;
 `;
 
 export const debugPaneContentStyle = css`
-  height: calc(100% - ${DebugPaneHeaderHeight}px);
+  height: calc(100% - ${expandedPanelHeaderHeight}px);
   overflow-y: hidden;
   overflow-x: auto;
 `;
 
 export const debugPaneFooterStyle = css`
-  height: ${DebugPaneFooterHeight}px;
+  height: ${collapsedPaneHeaderHeight}px;
   border-top: 1px solid #dfdfdf;
 `;
 
@@ -35,7 +36,9 @@ export const debugPaneBarStyle = css`
   background: #faf9f8;
 `;
 
-export const leftBarStyle = css``;
+export const leftBarStyle = css`
+  padding: 0 16px;
+`;
 
 export const rightBarStyle = css`
   display: flex;
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index dac1a406c0..56c8412188 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { RouteComponentProps } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 import { Split, SplitMeasuredSizes } from '@geoffcox/react-splitter';
@@ -16,10 +16,26 @@ import CommandBar from './CommandBar';
 import VisualPanel from './VisualPanel';
 import PropertyPanel from './PropertyPanel';
 import useEmptyPropsHandler from './useEmptyPropsHandler';
-import { contentWrapper, editorContainer, editorWrapper, pageRoot } from './styles';
+import { contentWrapper, editorContainer, editorWrapper } from './styles';
 import Modals from './Modals';
 import { DebugPanel } from './DebugPanel/DebugPanel';
 
+export const root = css`
+  height: calc(100vh - 50px);
+  display: flex;
+  flex-direction: row;
+
+  label: Page;
+`;
+
+export const pageWrapper = css`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  label: PageWrapper;
+`;
+
 const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
   props
 ) => {
@@ -35,37 +51,39 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const activeBot = skillId ?? projectId;
 
   return (
-    <div css={pageRoot}>
-      <Split
-        resetOnDoubleClick
-        initialPrimarySize="20%"
-        minPrimarySize="200px"
-        minSecondarySize="800px"
-        renderSplitter={renderThinSplitter}
-        splitterSize="5px"
-        onMeasuredSizesChanged={onMeasuredSizesChanged}
-      >
-        <SideBar projectId={activeBot} />
-        <div css={contentWrapper} role="main">
-          <CommandBar projectId={activeBot} />
-          <Conversation css={editorContainer}>
-            <div css={editorWrapper}>
-              <Split
-                resetOnDoubleClick
-                initialPrimarySize="65%"
-                minPrimarySize="500px"
-                minSecondarySize="350px"
-                renderSplitter={renderThinSplitter}
-              >
-                <VisualPanel projectId={activeBot} />
-                <PropertyPanel isSkill={activeBot !== projectId} projectId={activeBot} />
-              </Split>
-            </div>
-          </Conversation>
-          <DebugPanel />
-        </div>
-      </Split>
-      <Modals projectId={activeBot} />
+    <div css={root} data-testid="DesignPage">
+      <div css={pageWrapper}>
+        <Split
+          resetOnDoubleClick
+          initialPrimarySize="20%"
+          minPrimarySize="200px"
+          minSecondarySize="800px"
+          renderSplitter={renderThinSplitter}
+          splitterSize="5px"
+          onMeasuredSizesChanged={onMeasuredSizesChanged}
+        >
+          <SideBar projectId={activeBot} />
+          <div css={contentWrapper} role="main">
+            <CommandBar projectId={activeBot} />
+            <Conversation css={editorContainer}>
+              <div css={editorWrapper}>
+                <Split
+                  resetOnDoubleClick
+                  initialPrimarySize="65%"
+                  minPrimarySize="500px"
+                  minSecondarySize="350px"
+                  renderSplitter={renderThinSplitter}
+                >
+                  <VisualPanel projectId={activeBot} />
+                  <PropertyPanel isSkill={activeBot !== projectId} projectId={activeBot} />
+                </Split>
+              </div>
+            </Conversation>
+          </div>
+        </Split>
+        <Modals projectId={activeBot} />
+        <DebugPanel />
+      </div>
     </div>
   );
 };