diff --git a/app/index.html b/app/index.html
index 9e1ca6e..dc5cc0d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,6 +14,19 @@
             50%  {background-color: #3f51b5;}
             100% {background-color: inherit;}
           }
+
+          ::-webkit-scrollbar {
+              width: 8px;
+          }
+
+          ::-webkit-scrollbar-track {
+              -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
+          }
+
+          ::-webkit-scrollbar-thumb {
+              background-color: rgba(140,140,140,0.8);
+              #-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
+          }
         </style>
         <script src="http://localhost:35729/livereload.js"></script>
     </head>
diff --git a/app/src/components/Sidebar/ValueRenderer.tsx b/app/src/components/Sidebar/ValueRenderer.tsx
index 402bb40..22e5470 100644
--- a/app/src/components/Sidebar/ValueRenderer.tsx
+++ b/app/src/components/Sidebar/ValueRenderer.tsx
@@ -51,11 +51,13 @@ class ValueRenderer extends React.Component<Props, {}> {
       backgroundColor: 'rgba(80, 80, 80, 0.6)',
       wordBreak: 'break-all',
       width: '100%',
-      overflow: 'scroll',
+      overflowX: 'scroll',
+      overflowY: 'clip',
       display: 'block',
       lineHeight: '1.2em',
       padding: '12px 5px 12px 5px',
-      color: this.props.theme.palette.text.primary
+      maxWidth: '40vw',
+      color: this.props.theme.palette.text.primary,
     }
 
     return <pre style={style}><code>{value}</code></pre>