diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js
index 79f85039..e87ab136 100644
--- a/frontend/components/Layout/Layout.js
+++ b/frontend/components/Layout/Layout.js
@@ -35,16 +35,12 @@ type Props = {
   title?: ?React.Element<any>,
   auth: AuthStore,
   ui: UiStore,
-  search: ?boolean,
   notifications?: React.Element<any>,
 };
 
 @observer class Layout extends React.Component {
   props: Props;
-
-  static defaultProps = {
-    search: true,
-  };
+  scrollable: ?HTMLDivElement;
 
   @keydown(['/', 't'])
   goToSearch(ev) {
@@ -81,6 +77,20 @@ type Props = {
     this.props.ui.setActiveModal('collection-edit');
   };
 
+  setScrollableRef = ref => {
+    this.scrollable = ref;
+  };
+
+  scrollToActiveDocument = ref => {
+    const scrollable = this.scrollable;
+    if (!ref || !scrollable) return;
+
+    const container = scrollable.getBoundingClientRect();
+    const bounds = ref.getBoundingClientRect();
+    const scrollTop = bounds.top + container.top;
+    scrollable.scrollTop = scrollTop;
+  };
+
   render() {
     const { auth, documents, ui } = this.props;
     const { user, team } = auth;
@@ -115,7 +125,7 @@ type Props = {
               />
 
               <Flex auto column>
-                <Scrollable>
+                <Scrollable innerRef={this.setScrollableRef}>
                   <LinkSection>
                     <SidebarLink to="/dashboard">
                       <Icon type="Home" /> Home
@@ -132,6 +142,7 @@ type Props = {
                       history={this.props.history}
                       activeDocument={documents.active}
                       onCreateCollection={this.handleCreateCollection}
+                      activeDocumentRef={this.scrollToActiveDocument}
                     />
                   </LinkSection>
                 </Scrollable>
diff --git a/frontend/components/Layout/components/SidebarCollections.js b/frontend/components/Layout/components/SidebarCollections.js
index 3dbec12d..8bd83eb5 100644
--- a/frontend/components/Layout/components/SidebarCollections.js
+++ b/frontend/components/Layout/components/SidebarCollections.js
@@ -20,7 +20,8 @@ type Props = {
   history: Object,
   collections: CollectionsStore,
   activeDocument: ?Document,
-  onCreateCollection: Function,
+  onCreateCollection: () => void,
+  activeDocumentRef: HTMLElement => void,
   ui: UiStore,
 };
 
@@ -28,7 +29,13 @@ type Props = {
   props: Props;
 
   render() {
-    const { history, collections, activeDocument, ui } = this.props;
+    const {
+      history,
+      collections,
+      activeDocument,
+      ui,
+      activeDocumentRef,
+    } = this.props;
 
     return (
       <Flex column>
@@ -39,6 +46,7 @@ type Props = {
             history={history}
             collection={collection}
             activeDocument={activeDocument}
+            activeDocumentRef={activeDocumentRef}
             ui={ui}
           />
         ))}
@@ -62,7 +70,13 @@ type Props = {
   };
 
   render() {
-    const { history, collection, activeDocument, ui } = this.props;
+    const {
+      history,
+      collection,
+      activeDocument,
+      ui,
+      activeDocumentRef,
+    } = this.props;
 
     return (
       <StyledDropToImport
@@ -94,6 +108,7 @@ type Props = {
               {collection.documents.map(document => (
                 <DocumentLink
                   key={document.id}
+                  activeDocumentRef={activeDocumentRef}
                   history={history}
                   document={document}
                   activeDocument={activeDocument}
@@ -111,51 +126,63 @@ type DocumentLinkProps = {
   document: NavigationNode,
   history: Object,
   activeDocument: ?Document,
+  activeDocumentRef: HTMLElement => void,
   depth: number,
 };
 
-const DocumentLink = observer((props: DocumentLinkProps) => {
-  const { document, activeDocument, depth } = props;
+const DocumentLink = observer(
+  ({
+    document,
+    activeDocument,
+    activeDocumentRef,
+    depth,
+  }: DocumentLinkProps) => {
+    const isActiveDocument =
+      activeDocument && activeDocument.id === document.id;
+    const showChildren =
+      activeDocument &&
+      (activeDocument.pathToDocument
+        .map(entry => entry.id)
+        .includes(document.id) ||
+        isActiveDocument);
 
-  const showChildren =
-    activeDocument &&
-    (activeDocument.pathToDocument
-      .map(entry => entry.id)
-      .includes(document.id) ||
-      activeDocument.id === document.id);
-
-  return (
-    <Flex column key={document.id}>
-      <DropToImport
-        history={history}
-        documentId={document.id}
-        activeStyle="activeDropZone"
+    return (
+      <Flex
+        column
+        key={document.id}
+        innerRef={isActiveDocument ? activeDocumentRef : undefined}
       >
-        <SidebarLink
-          to={document.url}
-          hasChildren={document.children.length > 0}
-          expanded={showChildren}
+        <DropToImport
+          history={history}
+          documentId={document.id}
+          activeStyle="activeDropZone"
         >
-          {document.title}
-        </SidebarLink>
-      </DropToImport>
+          <SidebarLink
+            to={document.url}
+            hasChildren={document.children.length > 0}
+            expanded={showChildren}
+          >
+            {document.title}
+          </SidebarLink>
+        </DropToImport>
 
-      {showChildren &&
-        <Children column>
-          {document.children &&
-            document.children.map(childDocument => (
-              <DocumentLink
-                key={childDocument.id}
-                history={history}
-                document={childDocument}
-                activeDocument={activeDocument}
-                depth={depth + 1}
-              />
-            ))}
-        </Children>}
-    </Flex>
-  );
-});
+        {showChildren &&
+          <Children column>
+            {document.children &&
+              document.children.map(childDocument => (
+                <DocumentLink
+                  key={childDocument.id}
+                  history={history}
+                  document={childDocument}
+                  activeDocument={activeDocument}
+                  depth={depth + 1}
+                />
+              ))}
+          </Children>}
+      </Flex>
+    );
+  }
+);
 
 const CollectionAction = styled.a`
   color: ${color.slate};
diff --git a/frontend/components/Layout/components/SidebarLink.js b/frontend/components/Layout/components/SidebarLink.js
index 95d7fe57..08b7f0fc 100644
--- a/frontend/components/Layout/components/SidebarLink.js
+++ b/frontend/components/Layout/components/SidebarLink.js
@@ -20,7 +20,7 @@ const styleComponent = component => styled(component)`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 5px 0;
+  padding: 5px 0;
   margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
   color: ${color.slateDark};
   font-size: 15px;
diff --git a/frontend/components/Scrollable/Scrollable.js b/frontend/components/Scrollable/Scrollable.js
index 526cc29e..536c2a24 100644
--- a/frontend/components/Scrollable/Scrollable.js
+++ b/frontend/components/Scrollable/Scrollable.js
@@ -1,18 +1,11 @@
 // @flow
-import React, { Component } from 'react';
 import styled from 'styled-components';
 
-const Scroll = styled.div`
+const Scrollable = styled.div`
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 `;
 
-class Scrollable extends Component {
-  render() {
-    return <Scroll {...this.props} />;
-  }
-}
-
 export default Scrollable;