diff --git a/example-project/src-client/views/pages/sign-in/sign-in-page.js b/example-project/src-client/views/pages/sign-in/sign-in-page.js
index 3eebea55..97e307fe 100644
--- a/example-project/src-client/views/pages/sign-in/sign-in-page.js
+++ b/example-project/src-client/views/pages/sign-in/sign-in-page.js
@@ -7,17 +7,19 @@ import Button from '../../../views/components/button';
 
 import './sign-in-page.css';
 
+// test for bug in react syntax highlighting
+const WrapperComponent = ({children}) => <div className="g-row sign-in">{children}</div>
 
 const SignInPage = ({signInWithGithub, signInWithGoogle, signInWithTwitter}) => {
   return (
-    <div className="g-row sign-in">
+    <WrapperComponent>
       <div className="g-col">
         <h1 className="sign-in__heading">Sign in</h1>
         <Button className="sign-in__button" onClick={signInWithGithub}>GitHub</Button>
         <Button className="sign-in__button" onClick={signInWithGoogle}>Google</Button>
         <Button className="sign-in__button" onClick={signInWithTwitter}>Twitter</Button>
       </div>
-    </div>
+    </WrapperComponent>
   );
 };
 
diff --git a/package.json b/package.json
index a9cbfba1..1249078b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^5.0.7",
-    "react-syntax-highlighter": "8.0.1",
+    "react-syntax-highlighter": "^10.3.0",
     "redux": "^4.0.0",
     "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.0",
diff --git a/src/public/js/App.scss b/src/public/js/App.scss
index 08b41634..7f45e255 100644
--- a/src/public/js/App.scss
+++ b/src/public/js/App.scss
@@ -15,7 +15,11 @@
   }
 
   > .header {
-    position: relative;
+    position: fixed;
+    z-index: 1;
+    background: #fff;
+    width: 100%;
+    padding-right: 15px;
     border-bottom: 1px solid #F5F5F5;
   }
 
diff --git a/src/public/js/components/sideBar/component/Code/index.js b/src/public/js/components/sideBar/component/Code/index.js
index 9103a369..bbdf572a 100644
--- a/src/public/js/components/sideBar/component/Code/index.js
+++ b/src/public/js/components/sideBar/component/Code/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneLight } from 'react-syntax-highlighter/styles/hljs';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import './index.scss';
 
@@ -49,13 +49,9 @@ export default class extends React.Component {
       <div className={classNames('Code', { limitedHeight })} ref={el => (this.codeRef = el)}>
         <SyntaxHighlighter
           language={language}
-          style={atomOneLight}
+          style={vs}
           showLineNumbers={true}
           wrapLines={true}
-          customStyle={{
-            fontSize: `${fontSize || FONT_SIZE}px`,
-            padding: `${PADDING_TOP}px 0px 5px 5px`
-          }}
           lineProps={lineNumber => {
             if (isMatchLineNumber(crumbedLines, lineNumber)) {
               return { className: 'crumbedLine' };
diff --git a/src/public/js/components/sideBar/component/SideBar.js b/src/public/js/components/sideBar/component/SideBar.js
index e05e5e17..808cd0b3 100644
--- a/src/public/js/components/sideBar/component/SideBar.js
+++ b/src/public/js/components/sideBar/component/SideBar.js
@@ -55,7 +55,12 @@ export default ({
           {standaloneNoCode ? (
             <Skeleton />
           ) : (
-            <Code namespace={namespace} language={language} code={file.fileCode} />
+            <Code
+              crumbedLines={codeCrumbsDiagramOn ? file.children.map(({ crumbNodeLines }) => crumbNodeLines) : []}
+              namespace={namespace}
+              language={language}
+              code={file.fileCode}
+            />
           )}
         </Suspense>
       </TabPane>
diff --git a/src/public/js/components/sideBar/component/SideBar.scss b/src/public/js/components/sideBar/component/SideBar.scss
index 14aa2bf3..9d653a45 100644
--- a/src/public/js/components/sideBar/component/SideBar.scss
+++ b/src/public/js/components/sideBar/component/SideBar.scss
@@ -1,13 +1,14 @@
 .SideBar {
-  position: absolute;
+  position: fixed;
   right: 0;
-  top: 0;
+  top: 42px;
   height: 100%;
   overflow: hidden;
   width: 650px;
   max-width: 100%;
   z-index: 4;
   background-color: white;
+  border-top: 1px solid #ebedf0;
   border-left: 1px solid #ebedf0;
   padding: 8px 16px;
 
diff --git a/src/public/js/components/treeDiagram/TreeDiagramsContainer.js b/src/public/js/components/treeDiagram/TreeDiagramsContainer.js
index 2aa1fe96..d836f7f1 100644
--- a/src/public/js/components/treeDiagram/TreeDiagramsContainer.js
+++ b/src/public/js/components/treeDiagram/TreeDiagramsContainer.js
@@ -5,12 +5,13 @@ import { Spin } from 'antd';
 import StandalonePlaceholder from './component/StandalonePlaceholder';
 
 import { getNamespacesList } from 'core/dataBus/selectors';
+import { getCheckedState } from 'core/controlsBus/selectors';
 import { getActiveNamespace } from 'core/namespaceIntegration/selectors';
 import TreeDiagram from './component/TreeDiagram';
 
 import './TreeDiagamsContainer.scss';
 
-const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => {
+const TreeDiagramsContainer = ({ namespacesList, activeNamespace, sideBar }) => {
   if (!namespacesList.length) {
     return process.env.STANDALONE ? (
       <StandalonePlaceholder />
@@ -24,7 +25,7 @@ const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => {
   }
 
   return (
-    <div className={'TreeDiagramsContainer'}>
+    <div className={'TreeDiagramsContainer'} style={sideBar ? { width: 'calc(100% - 650px)' } : {}}>
       {namespacesList.map(namespace => (
         <TreeDiagram
           key={namespace}
@@ -39,7 +40,8 @@ const TreeDiagramsContainer = ({ namespacesList, activeNamespace }) => {
 
 const mapStateToProps = state => ({
   activeNamespace: getActiveNamespace(state),
-  namespacesList: getNamespacesList(state)
+  namespacesList: getNamespacesList(state),
+  sideBar: getCheckedState(state).sideBar
 });
 
 export default connect(mapStateToProps)(TreeDiagramsContainer);
diff --git a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js
index fe9c8bec..d3b35f67 100644
--- a/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js
+++ b/src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js
@@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch, props) => {
   const { namespace } = props;
   return {
     onCodeCrumbSelect: (event, options) => {
-      return event.metaKey
+      return event.metaKey || event.altKey
         ? dispatch(
             selectNodeToOpenInEditor(
               { path: options.fileNode.path, line: options.codeCrumb.crumbNodeLines[0] },
diff --git a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
index 769d975e..3f7544d7 100644
--- a/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
+++ b/src/public/js/components/treeDiagram/component/Tree/Source/Tree.js
@@ -133,14 +133,13 @@ const SourceTree = props => {
       {(sourceDiagramOn && sourceEdges) || null}
       {(sourceDiagramOn && selectedSourceEdges) || null}
 
-      {dependenciesDiagramOn &&
-        selectedNode.dependencies && (
-          <DependenciesTree
-            namespace={namespace}
-            language={language}
-            shiftToCenterPoint={shiftToCenterPoint}
-          />
-        )}
+      {dependenciesDiagramOn && selectedNode.dependencies && (
+        <DependenciesTree
+          namespace={namespace}
+          language={language}
+          shiftToCenterPoint={shiftToCenterPoint}
+        />
+      )}
 
       {(sourceDiagramOn && sourceNodes) || null}
       {(sourceDiagramOn && sourceDotes) || null}