diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
index 0d0973cbb..339aff8a5 100644
--- a/packages/docz-theme-default/src/components/ui/Pre.tsx
+++ b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -39,6 +39,7 @@ const getChildren = (children: any) =>
 const Wrapper = styled('div')`
   margin: 30px 0;
   position: relative;
+  overflow-y: auto;
 `
 
 const Editor = styled(Codemirror)`
@@ -74,7 +75,6 @@ const Editor = styled(Codemirror)`
 
   .CodeMirror-linenumber {
     padding: 0 7px 0 5px;
-    opacity: 0.7;
   }
 `
 
diff --git a/packages/docz-theme-default/src/components/ui/Render/index.tsx b/packages/docz-theme-default/src/components/ui/Render/index.tsx
index 3835465e3..609a9ed3b 100644
--- a/packages/docz-theme-default/src/components/ui/Render/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/Render/index.tsx
@@ -29,7 +29,7 @@ const whenFullscreen = (on: any, off: any) => (p: OverlayProps) =>
 
 const Overlay = styled('div')`
   z-index: ${whenFullscreen(9999, 0)};
-  position: ${whenFullscreen('fixed', 'initial')};
+  position: ${whenFullscreen('fixed', 'relative')};
   top: 0;
   left: 0;
   width: ${whenFullscreen('100vw', 'auto')};
@@ -49,12 +49,13 @@ const Wrapper = styled('div')`
 `
 
 const PlaygroundWrapper = styled('div')`
+  overflow-y: auto;
   position: relative;
   flex: 1;
-  overflow-y: hidden;
   border-radius: 4px 4px 0 0;
   border: 1px solid ${p => p.theme.docz.colors.border};
   background: ${p => p.theme.docz.colors.background};
+  min-height: 198px;
   ${p => p.theme.docz.mq(p.theme.docz.styles.playground)};
 `
 
@@ -272,7 +273,7 @@ export class Render extends Component<RenderComponentProps, RenderState> {
         mountStylesheet={false}
       >
         <Overlay full={fullscreen}>
-          {fullscreen && <ResizeBar onChangeSize={this.handleSetSize} />}
+          {fullscreen ? <ResizeBar onChangeSize={this.handleSetSize} /> : null}
           <Resizable {...this.resizableProps}>
             <Wrapper full={fullscreen}>
               <LiveConsumer>
diff --git a/packages/docz-theme-default/src/styles/codemirror/dark.ts b/packages/docz-theme-default/src/styles/codemirror/dark.ts
index 3109ec4bc..390651ba3 100644
--- a/packages/docz-theme-default/src/styles/codemirror/dark.ts
+++ b/packages/docz-theme-default/src/styles/codemirror/dark.ts
@@ -16,7 +16,7 @@ export const theme = () => css`
   .cm-s-docz-dark .CodeMirror-linenumber,
   .cm-s-docz-dark .CodeMirror-linenumbers {
     color: rgba(216, 222, 233, 0.4) !important;
-    background-color: transparent;
+    background-color: #2e3440;
   }
   .cm-s-docz-dark .CodeMirror-lines {
     color: #d8dee9 !important;
diff --git a/packages/docz-theme-default/src/styles/codemirror/light.ts b/packages/docz-theme-default/src/styles/codemirror/light.ts
index a4cd2eac9..580ac3332 100644
--- a/packages/docz-theme-default/src/styles/codemirror/light.ts
+++ b/packages/docz-theme-default/src/styles/codemirror/light.ts
@@ -21,6 +21,7 @@ export const theme = () => css`
 
   .cm-s-docz-light .CodeMirror-linenumber {
     color: #959da5;
+    background: #fbfcfd;
   }
 
   .cm-s-docz-light .CodeMirror-cursor {