diff --git a/src/browser/components/Directives.tsx b/src/browser/components/Directives.tsx
index 41e0651ae69..e4d714ff2f8 100644
--- a/src/browser/components/Directives.tsx
+++ b/src/browser/components/Directives.tsx
@@ -28,6 +28,20 @@ import * as editor from 'shared/modules/editor/editorDuck'
 import { addClass, prependIcon } from 'shared/services/dom-helpers'
 
 const directives = [
+  {
+    selector: '[data-exec]',
+    valueExtractor: (elem: any) => {
+      return `${elem.getAttribute('data-exec')}`
+    },
+    autoExec: true
+  },
+  {
+    selector: '[data-populate]',
+    valueExtractor: (elem: any) => {
+      return `${elem.getAttribute('data-populate')}`
+    },
+    autoExec: false
+  },
   {
     selector: '[exec-topic]',
     valueExtractor: (elem: any) => {
@@ -99,15 +113,20 @@ const bindDynamicInputToDom = (element: any) => {
 }
 
 export const Directives = (props: any) => {
-  const callback = (elem: any) => {
+  const callback = (elem: HTMLDivElement | null) => {
     if (elem) {
       directives.forEach(directive => {
         const elems = elem.querySelectorAll(directive.selector)
-        Array.from(elems).forEach((e: any) => {
-          if (e.firstChild.nodeName !== 'I') {
+        Array.from(elems).forEach(e => {
+          if (
+            e.firstChild?.nodeName !== 'I' &&
+            !e.classList.contains('remove-play-icon')
+          ) {
             prependPlayIcon(e)
           }
 
+          // If we use add event listener we need to remove it afterwards
+          // @ts-expect-error
           e.onclick = () => {
             addClass(e, 'clicked')
             return props.onItemClick(
diff --git a/src/browser/components/ManualLink.test.tsx b/src/browser/components/ManualLink.test.tsx
index 7cf16e2b66b..2a10a8c6982 100644
--- a/src/browser/components/ManualLink.test.tsx
+++ b/src/browser/components/ManualLink.test.tsx
@@ -20,8 +20,7 @@
 
 import React from 'react'
 import { render } from '@testing-library/react'
-
-import { ManualLink } from './ManualLink'
+import { ManualLink } from 'browser-components/ManualLink'
 
 const tests: [Record<string, string | null>, string][] = [
   [
diff --git a/src/browser/components/ManualLink.tsx b/src/browser/components/ManualLink.tsx
index e15ce89ba31..40cfd4e0daf 100644
--- a/src/browser/components/ManualLink.tsx
+++ b/src/browser/components/ManualLink.tsx
@@ -24,6 +24,7 @@ import semver from 'semver'
 
 import { getVersion } from 'shared/modules/dbMeta/dbMetaDuck'
 import { formatDocVersion } from 'browser/modules/Sidebar/Documents'
+import { DrawerExternalLink } from './drawer/drawer-styled'
 
 const movedPages: { [key: string]: { oldPage: string; oldContent: string } } = {
   '/administration/indexes-for-search-performance/': {
@@ -52,7 +53,7 @@ export function ManualLink({
   children,
   neo4jVersion,
   minVersion
-}: any) {
+}: any): JSX.Element {
   let cleanPage = page.replace(/^\//, '')
   let content = children
   if (isPageMoved(chapter, page, neo4jVersion)) {
@@ -70,15 +71,11 @@ export function ManualLink({
 
   const url = `https://neo4j.com/docs/${chapter}/${version}/${cleanPage}`
 
-  return (
-    <a href={url} target="_blank" rel="noreferrer">
-      {content}
-    </a>
-  )
+  return <DrawerExternalLink href={url}>{content}</DrawerExternalLink>
 }
 
 const mapStateToProps = (state: any) => ({
   neo4jVersion: getVersion(state)
 })
 
-export default connect<any, any, any, any>(mapStateToProps, null)(ManualLink)
+export default connect(mapStateToProps)(ManualLink)
diff --git a/src/browser/components/SavedScripts/SavedScriptsFolder.tsx b/src/browser/components/SavedScripts/SavedScriptsFolder.tsx
index 4fd7930f9c5..46bea3267c7 100644
--- a/src/browser/components/SavedScripts/SavedScriptsFolder.tsx
+++ b/src/browser/components/SavedScripts/SavedScriptsFolder.tsx
@@ -51,7 +51,7 @@ interface SavedScriptsFolderProps {
   forceEdit: boolean
   onDoneEditing: () => void
   selectedScriptIds: string[]
-  children: JSX.Element[]
+  children: React.ReactNode
 }
 
 function SavedScriptsFolder({
diff --git a/src/browser/components/TabNavigation/Navigation.tsx b/src/browser/components/TabNavigation/Navigation.tsx
index f330a12a28f..4443cc09809 100644
--- a/src/browser/components/TabNavigation/Navigation.tsx
+++ b/src/browser/components/TabNavigation/Navigation.tsx
@@ -32,11 +32,14 @@ import {
   StyledTopNav,
   StyledBottomNav
 } from './styled'
+import { GUIDE_DRAWER_ID } from 'shared/modules/sidebar/sidebarDuck'
 
 const Closing = 'CLOSING'
 const Closed = 'CLOSED'
 const Open = 'OPEN'
 const Opening = 'OPENING'
+export const LARGE_DRAWER_WIDTH = 500
+export const STANDARD_DRAWER_WIDTH = 300
 
 export interface NavItem {
   name: string
@@ -169,6 +172,14 @@ class Navigation extends Component<NavigationProps, NavigationState> {
       this.state.drawerContent
     )
 
+    const drawerWidth =
+      this.props.openDrawer === GUIDE_DRAWER_ID
+        ? LARGE_DRAWER_WIDTH
+        : STANDARD_DRAWER_WIDTH
+    const useFullWidth =
+      this.state.transitionState === Open ||
+      this.state.transitionState === Opening
+    const width = useFullWidth ? drawerWidth : 0
     return (
       <StyledSidebar>
         <StyledTabsWrapper>
@@ -176,10 +187,7 @@ class Navigation extends Component<NavigationProps, NavigationState> {
           <StyledBottomNav>{bottomNavItemsList}</StyledBottomNav>
         </StyledTabsWrapper>
         <StyledDrawer
-          open={
-            this.state.transitionState === Open ||
-            this.state.transitionState === Opening
-          }
+          width={width}
           ref={(ref: any) => {
             if (ref) {
               // Remove old listeners so we don't get multiple callbacks.
diff --git a/src/browser/components/TabNavigation/styled.tsx b/src/browser/components/TabNavigation/styled.tsx
index 3b82cd6b3de..915b1876adf 100644
--- a/src/browser/components/TabNavigation/styled.tsx
+++ b/src/browser/components/TabNavigation/styled.tsx
@@ -28,12 +28,12 @@ export const StyledSidebar = styled.div`
   color: #fff;
 `
 
-export const StyledDrawer: any = styled.div`
+export const StyledDrawer = styled.div<{ width: number }>`
   flex: 0 0 auto;
   background-color: #31333b;
   overflow-x: hidden;
   overflow-y: auto;
-  width: ${(props: any) => (props.open ? '300px' : '0px')};
+  width: ${props => props.width}px;
   transition: 0.2s ease-out;
   z-index: 1;
 `
diff --git a/src/browser/components/drawer/Drawer.tsx b/src/browser/components/drawer/drawer-styled.tsx
similarity index 72%
rename from src/browser/components/drawer/Drawer.tsx
rename to src/browser/components/drawer/drawer-styled.tsx
index 2cb306ffc62..b838b932add 100644
--- a/src/browser/components/drawer/Drawer.tsx
+++ b/src/browser/components/drawer/drawer-styled.tsx
@@ -19,6 +19,7 @@
  */
 
 import styled from 'styled-components'
+import linkIcon from 'icons/external-link.svg'
 
 export const Drawer = styled.div`
   width: 290px;
@@ -43,6 +44,9 @@ export const DrawerHeader = styled.h4`
 export const DrawerToppedHeader = styled(DrawerHeader)`
   padding-top: 8px;
 `
+export const DrawerSeparator = styled.div`
+  border-bottom: 1px solid #424650;
+`
 
 export const DrawerSubHeader = styled.h5`
   color: ${props => props.theme.primaryHeaderText};
@@ -76,3 +80,41 @@ export const DrawerFooter = styled.div`
   margin-bottom: 20px;
   text-align: center;
 `
+
+export const DrawerExternalLink = styled.a.attrs({
+  target: '_blank',
+  rel: 'noreferrer'
+})`
+  cursor: pointer;
+  text-decoration: none;
+  color: #68bdf4;
+
+  &:active {
+    text-decoration: none;
+  }
+
+  &:before {
+    display: inline-block;
+    content: ' ';
+    background-image: url("data:image/svg+xml;utf8,${linkIcon}");
+    height: 12px;
+    width: 12px;
+    margin-right: 7px;
+  }
+`
+
+export const DrawerBrowserCommand = styled.span.attrs({
+  className: 'remove-play-icon'
+})`
+  background-color: #2a2c33;
+  border-radius: 2px;
+  padding: 3px;
+
+  color: #e36962;
+  font-family: Fira Code;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+`
diff --git a/src/browser/components/icons/Icons.tsx b/src/browser/components/icons/Icons.tsx
index a10b32b4b52..25ee3f1c588 100644
--- a/src/browser/components/icons/Icons.tsx
+++ b/src/browser/components/icons/Icons.tsx
@@ -26,6 +26,7 @@ import addCircle from 'icons/add-circle.svg'
 import appWindowCode from 'icons/app-window-code.svg'
 import arrowLeft from 'icons/arrow-left.svg'
 import arrowRight from 'icons/arrow-right.svg'
+import backArrow from 'icons/back-arrow.svg'
 import buttonRefreshArrow from 'icons/button-refresh-arrow.svg'
 import cannyFeedback from 'icons/canny-feedback.svg'
 import cannyNotifications from 'icons/canny-notifications.svg'
@@ -39,6 +40,7 @@ import expand from 'icons/expand.svg'
 import file from 'icons/file.svg'
 import folderEmpty from 'icons/folder-empty.svg'
 import help from 'icons/help.svg'
+import monitorPlay from 'icons/monitor-play.svg'
 import navigationMenuVertical from 'icons/navigation-menu-vertical.svg'
 import neo4j from 'icons/neo-world.svg'
 import newFolder from 'icons/folder-add.svg'
@@ -135,6 +137,17 @@ export const DatabaseIcon = (props: {
   )
 }
 
+export const GuidesDrawerIcon = (props: { isOpen: boolean }): JSX.Element => (
+  <IconContainer
+    activeStyle={white}
+    inactiveStyle={inactive}
+    width={28}
+    isOpen={props.isOpen}
+    icon={monitorPlay}
+    title="Guides"
+  />
+)
+
 interface SidebarIconProps {
   isOpen: boolean
   title: string
@@ -339,6 +352,7 @@ export const MinusIcon = (): JSX.Element => (
     className="sl-minus-circle"
   />
 )
+
 export const RightArrowIcon = (): JSX.Element => (
   <IconContainer
     activeStyle={blue}
@@ -455,3 +469,7 @@ export const CannyFeedbackIcon = (): JSX.Element => (
 export const CannyNotificationsIcon = (): JSX.Element => (
   <IconContainer icon={cannyNotifications} />
 )
+
+export const BackIcon = ({ width }: { width: number }): JSX.Element => (
+  <IconContainer width={width} icon={backArrow} />
+)
diff --git a/src/browser/documentation/index.ts b/src/browser/documentation/index.ts
index 421f334de28..8e258f9b770 100644
--- a/src/browser/documentation/index.ts
+++ b/src/browser/documentation/index.ts
@@ -88,42 +88,192 @@ import helpCypher from './dynamic/cypher'
 import helpHelp from './dynamic/help'
 import helpPlay from './dynamic/play'
 
-// Carousels
-import guideConcepts from './guides/concepts'
-import guideCypher from './guides/cypher'
-import guideIntro from './guides/intro'
-import guideLearn from './guides/learn'
-import guideMovieGraph from './guides/movie-graph'
-import guideNorthwindGraph from './guides/northwind-graph'
-
-// Pages
-import guideIconography from './guides/iconography'
-import guideStart from './guides/start'
-import guideTypography from './guides/typography'
-import guideUnfound from './guides/unfound'
-import guideWritecode from './guides/write-code'
-
-export default {
+// Play guides
+import playConcepts from './play-guides/concepts'
+import playCypher from './play-guides/cypher'
+import playIntro from './play-guides/intro'
+import playLearn from './play-guides/learn'
+import playMovieGraph from './play-guides/movie-graph'
+import playNorthwindGraph from './play-guides/northwind-graph'
+import playIconography from './play-guides/iconography'
+import playStart from './play-guides/start'
+import playTypography from './play-guides/typography'
+import playUnfound from './play-guides/unfound'
+import playWritecode from './play-guides/write-code'
+
+// Migrated sidebar guides
+import guideConcepts from './sidebar-guides/concepts'
+import guideCypher from './sidebar-guides/cypher'
+import guideIndex from './sidebar-guides/guideIndex'
+import guideIntro from './sidebar-guides/intro'
+import guideMovieGraph from './sidebar-guides/movie-graph'
+import guideNorthwindGraph from './sidebar-guides/northwind-graph'
+import guideUnfound from './sidebar-guides/unfound'
+
+type AllDocumentation = {
+  help: HelpDocs
+  cypher: CypherDocs
+  bolt: BoltDocs
+  play: PlayDocs
+  guide: GuideDocs
+}
+type DocItem = {
+  title: string
+  subtitle?: string
+  category?: string
+  content?: JSX.Element | null
+  footer?: JSX.Element
+  slides?: JSX.Element[]
+}
+
+type GuideItem = {
+  title: string
+  slides: JSX.Element[]
+}
+
+type GuideDocs = {
+  title: 'Built-in Browser guides'
+  chapters: Record<GuideChapter, GuideItem>
+}
+
+type GuideChapter =
+  | 'concepts'
+  | 'cypher'
+  | 'index'
+  | 'intro'
+  | 'movie-graph'
+  | 'movieGraph'
+  | 'movies'
+  | 'northwind'
+  | 'northwind-graph'
+  | 'northwindGraph'
+  | 'unfound'
+
+// TypeGuard function to ts to understand that a string is a valid key
+export function isGuideChapter(name: string): name is GuideChapter {
+  return name in docs.guide.chapters
+}
+
+type PlayDocs = {
+  title: 'Guides & Examples'
+  chapters: Record<PlayChapter, DocItem>
+}
+
+export type PlayChapter =
+  | 'concepts'
+  | 'cypher'
+  | 'iconography'
+  | 'intro'
+  | 'learn'
+  | 'movie-graph'
+  | 'movieGraph'
+  | 'movies'
+  | 'northwind'
+  | 'northwind-graph'
+  | 'northwindGraph'
+  | 'start'
+  | 'typography'
+  | 'unfound'
+  | 'writeCode'
+
+export function isPlayChapter(name: string): name is PlayChapter {
+  return name in docs.play.chapters
+}
+
+type BoltDocs = { title: 'Bolt'; chapters: Record<BoltChapter, DocItem> }
+type BoltChapter = 'boltEncryption' | 'boltRouting'
+type CypherDocs = { title: 'Cypher'; chapters: Record<CypherChapter, DocItem> }
+type CypherChapter =
+  | 'alterUser'
+  | 'contains'
+  | 'create'
+  | 'createConstraintOn'
+  | 'createDatabase'
+  | 'createIndexOn'
+  | 'createRole'
+  | 'createUser'
+  | 'delete'
+  | 'deny'
+  | 'detachDelete'
+  | 'dropConstraintOn'
+  | 'dropDatabase'
+  | 'dropIndexOn'
+  | 'dropRole'
+  | 'dropUser'
+  | 'endsWith'
+  | 'explain'
+  | 'foreach'
+  | 'grant'
+  | 'grantRole'
+  | 'loadCsv'
+  | 'match'
+  | 'merge'
+  | 'param'
+  | 'params'
+  | 'profile'
+  | 'queryPlan'
+  | 'remove'
+  | 'rest'
+  | 'restDelete'
+  | 'restGet'
+  | 'restPost'
+  | 'restPut'
+  | 'return'
+  | 'revoke'
+  | 'revokeRole'
+  | 'schema'
+  | 'set'
+  | 'showDatabases'
+  | 'showPrivileges'
+  | 'showRoles'
+  | 'showUsers'
+  | 'startsWith'
+  | 'template'
+  | 'unwind'
+  | 'where'
+  | 'with'
+
+type HelpDocs = { title: 'Commands'; chapters: Record<HelpChapter, DocItem> }
+type HelpChapter =
+  | 'auto'
+  | 'bolt'
+  | 'clear'
+  | 'commands'
+  | 'cypher'
+  | 'guides'
+  | 'help'
+  | 'history'
+  | 'historyClear'
+  | 'keys'
+  | 'play'
+  | 'queries'
+  | 'server'
+  | 'serverUser'
+  | 'style'
+  | 'unfound'
+  | 'unknown'
+
+const docs: AllDocumentation = {
   help: {
     title: 'Commands',
     chapters: {
       auto: helpAuto,
-      clear: helpClear,
-      cypher: helpCypher,
       bolt: helpBolt,
+      clear: helpClear,
       commands: helpCommands,
+      cypher: helpCypher,
       guides: helpPlay,
       help: helpHelp,
       history: helpHistory,
       historyClear: helpHistoryClear,
       keys: helpKeys,
       play: helpPlay,
+      queries: helpQueries,
       server: helpServer,
       serverUser: helpServerUser,
       style: helpStyle,
       unfound: helpUnfound,
-      unknown: helpUnknown,
-      queries: helpQueries
+      unknown: helpUnknown
     }
   },
   cypher: {
@@ -131,12 +281,12 @@ export default {
     chapters: {
       alterUser: helpAlterUser,
       contains: helpContains,
+      create: helpCreate,
       createConstraintOn: helpCreateConstraintOn,
       createDatabase: helpCreateDatabase,
       createIndexOn: helpCreateIndexOn,
       createRole: helpCreateRole,
       createUser: helpCreateUser,
-      create: helpCreate,
       delete: helpDelete,
       deny: helpDeny,
       detachDelete: helpDetachDelete,
@@ -188,25 +338,41 @@ export default {
   },
   play: {
     title: 'Guides & Examples',
+    chapters: {
+      concepts: playConcepts,
+      cypher: playCypher,
+      iconography: playIconography,
+      intro: playIntro,
+      learn: playLearn,
+      movieGraph: playMovieGraph,
+      'movie-graph': playMovieGraph,
+      movies: playMovieGraph,
+      northwind: playNorthwindGraph,
+      'northwind-graph': playNorthwindGraph,
+      northwindGraph: playNorthwindGraph,
+      start: playStart,
+      typography: playTypography,
+      unfound: playUnfound,
+      writeCode: playWritecode
+    }
+  },
+  // Guides are play-guides but migrated to be viewable in the sidebar
+  guide: {
+    title: 'Built-in Browser guides',
     chapters: {
       concepts: guideConcepts,
       cypher: guideCypher,
+      index: guideIndex,
       intro: guideIntro,
-      learn: guideLearn,
-      movieGraph: guideMovieGraph,
       movies: guideMovieGraph,
-      northwindGraph: guideNorthwindGraph,
+      movieGraph: guideMovieGraph,
+      'movie-graph': guideMovieGraph,
       northwind: guideNorthwindGraph,
-      iconography: guideIconography,
-      start: guideStart,
-      typography: guideTypography,
-      unfound: guideUnfound,
-      writeCode: guideWritecode,
-      // Commands only
-      'query-template': {
-        title: 'Query Templates',
-        category: 'guides'
-      }
-    } as any
+      northwindGraph: guideNorthwindGraph,
+      'northwind-graph': guideNorthwindGraph,
+      unfound: guideUnfound
+    }
   }
 }
+
+export default docs
diff --git a/src/browser/documentation/guides/concepts.tsx b/src/browser/documentation/play-guides/concepts.tsx
similarity index 100%
rename from src/browser/documentation/guides/concepts.tsx
rename to src/browser/documentation/play-guides/concepts.tsx
diff --git a/src/browser/documentation/guides/cypher.tsx b/src/browser/documentation/play-guides/cypher.tsx
similarity index 100%
rename from src/browser/documentation/guides/cypher.tsx
rename to src/browser/documentation/play-guides/cypher.tsx
diff --git a/src/browser/documentation/guides/iconography.tsx b/src/browser/documentation/play-guides/iconography.tsx
similarity index 100%
rename from src/browser/documentation/guides/iconography.tsx
rename to src/browser/documentation/play-guides/iconography.tsx
diff --git a/src/browser/documentation/guides/intro.tsx b/src/browser/documentation/play-guides/intro.tsx
similarity index 98%
rename from src/browser/documentation/guides/intro.tsx
rename to src/browser/documentation/play-guides/intro.tsx
index d4bf88dd456..ab0d0cc839d 100644
--- a/src/browser/documentation/guides/intro.tsx
+++ b/src/browser/documentation/play-guides/intro.tsx
@@ -20,12 +20,7 @@
 
 import React from 'react'
 import Slide from '../../modules/Carousel/Slide'
-import {
-  FULLSCREEN_SHORTCUT,
-  FOCUS_SHORTCUT,
-  printShortcut,
-  isMac
-} from 'browser/modules/App/keyboardShortcuts'
+import { isMac } from 'browser/modules/App/keyboardShortcuts'
 
 const title = 'Intro'
 const slides = [
diff --git a/src/browser/documentation/guides/learn.tsx b/src/browser/documentation/play-guides/learn.tsx
similarity index 100%
rename from src/browser/documentation/guides/learn.tsx
rename to src/browser/documentation/play-guides/learn.tsx
diff --git a/src/browser/documentation/guides/movie-graph.tsx b/src/browser/documentation/play-guides/movie-graph.tsx
similarity index 99%
rename from src/browser/documentation/guides/movie-graph.tsx
rename to src/browser/documentation/play-guides/movie-graph.tsx
index 4317ad4bc23..545a22c091a 100644
--- a/src/browser/documentation/guides/movie-graph.tsx
+++ b/src/browser/documentation/play-guides/movie-graph.tsx
@@ -21,7 +21,6 @@
 import React from 'react'
 import ManualLink from 'browser-components/ManualLink'
 import Slide from '../../modules/Carousel/Slide'
-import TextCommand from 'browser/modules/DecoratedText/TextCommand'
 
 const title = 'Movie Graph'
 const category = 'graphExamples'
@@ -799,10 +798,6 @@ RETURN tom, m, coActors, m2, cruise`}
         <pre className="pre-scrollable code runnable">
           MATCH (n) DETACH DELETE n
         </pre>
-        <aside className="warn">
-          Note you only need to compare property values like this when first
-          creating relationships
-        </aside>
       </figure>
       <p className="lead">Prove that the Movie Graph is gone</p>
       <figure>
diff --git a/src/browser/documentation/guides/northwind-graph.tsx b/src/browser/documentation/play-guides/northwind-graph.tsx
similarity index 100%
rename from src/browser/documentation/guides/northwind-graph.tsx
rename to src/browser/documentation/play-guides/northwind-graph.tsx
diff --git a/src/browser/documentation/guides/start.tsx b/src/browser/documentation/play-guides/start.tsx
similarity index 100%
rename from src/browser/documentation/guides/start.tsx
rename to src/browser/documentation/play-guides/start.tsx
diff --git a/src/browser/documentation/guides/typography.tsx b/src/browser/documentation/play-guides/typography.tsx
similarity index 100%
rename from src/browser/documentation/guides/typography.tsx
rename to src/browser/documentation/play-guides/typography.tsx
diff --git a/src/browser/documentation/guides/unfound.tsx b/src/browser/documentation/play-guides/unfound.tsx
similarity index 100%
rename from src/browser/documentation/guides/unfound.tsx
rename to src/browser/documentation/play-guides/unfound.tsx
diff --git a/src/browser/documentation/guides/write-code.tsx b/src/browser/documentation/play-guides/write-code.tsx
similarity index 100%
rename from src/browser/documentation/guides/write-code.tsx
rename to src/browser/documentation/play-guides/write-code.tsx
diff --git a/src/browser/documentation/sidebar-guides/concepts.tsx b/src/browser/documentation/sidebar-guides/concepts.tsx
new file mode 100644
index 00000000000..556d6f1853c
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/concepts.tsx
@@ -0,0 +1,168 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ManualLink from 'browser-components/ManualLink'
+import { SidebarSlide } from '../../modules/Carousel/Slide'
+
+const title = 'Concepts'
+const category = 'guides'
+const slides = [
+  <SidebarSlide key="first">
+    <h3>Graph Fundamentals</h3>
+    <p className="lead">Basic concepts to get you going.</p>
+    <p>
+      A graph database can store any kind of data using a few simple concepts:
+    </p>
+    <ol className="big">
+      <li>Nodes - graph data records</li>
+      <li>Relationships - connect nodes</li>
+      <li>Properties - named data values</li>
+    </ol>
+  </SidebarSlide>,
+  <SidebarSlide key="second">
+    <h3>
+      A&nbsp;
+      <em>Graph</em> Database
+    </h3>
+    <p className="lead">
+      Neo4j stores data in a Graph, with records called Nodes.
+    </p>
+    <p>
+      The simplest graph has just a single node with some named values called
+      Properties. Let's draw a social graph of our friends on the Neo4j team:
+    </p>
+    <ol>
+      <li>Start by drawing a circle for the node</li>
+      <li>Add the name Emil</li>
+      <li>Note that he is from Sweden</li>
+    </ol>
+    <ul>
+      <li>Nodes are the name for data records in a graph</li>
+      <li>Data is stored as Properties</li>
+      <li>Properties are simple name/value pairs</li>
+    </ul>
+    <img src="./assets/images/one_node.png" className="img-responsive" />
+  </SidebarSlide>,
+  <SidebarSlide key="third">
+    <h3>Labels</h3>
+    <p className="lead">Associate a set of nodes.</p>
+    <p>
+      Nodes can be grouped together by applying a Label to each member. In our
+      social graph, we'll label each node that represents a Person.
+    </p>
+    <ol>
+      <li>Apply the label "Person" to the node we created for Emil</li>
+      <li>Color "Person" nodes red</li>
+    </ol>
+    <ul>
+      <li>A node can have zero or more labels</li>
+      <li>Labels do not have any properties</li>
+    </ul>
+    <img src="./assets/images/labeled_node.png" className="img-responsive" />
+  </SidebarSlide>,
+  <SidebarSlide key="forth">
+    <h3>More Nodes</h3>
+    <p className="lead">
+      Schema-free, nodes can have a mix of common and unique properties.
+    </p>
+    <p>
+      Like any database, storing data in Neo4j can be as simple as adding more
+      records. We'll add a few more nodes:
+    </p>
+    <ol>
+      <li>Emil has a klout score of 99</li>
+      <li>Johan, from Sweden, who is learning to surf</li>
+      <li>Ian, from England, who is an author</li>
+      <li>Rik, from Belgium, has a cat named Orval</li>
+      <li>Allison, from California, who surfs</li>
+    </ol>
+    <ul>
+      <li>Similar nodes can have different properties</li>
+      <li>Properties can be strings, numbers, or booleans</li>
+      <li>Neo4j can store billions of nodes</li>
+    </ul>
+    <img src="./assets/images/more_nodes.png" className="img-responsive" />
+  </SidebarSlide>,
+  <SidebarSlide key="fifth">
+    <h3>Consider Relationships</h3>
+    <p className="lead">Connect nodes in the graph</p>
+    <p className="summary">
+      The real power of Neo4j is in connected data. To associate any two nodes,
+      add a Relationship which describes how the records are related.
+    </p>
+    <p>In our social graph, we simply say who KNOWS whom:</p>
+    <ol>
+      <li>Emil KNOWS Johan and Ian</li>
+      <li>Johan KNOWS Ian and Rik</li>
+      <li>Rik and Ian KNOWS Allison</li>
+    </ol>
+    <ul>
+      <li>Relationships always have direction</li>
+      <li>Relationships always have a type</li>
+      <li>Relationships form patterns of data</li>
+    </ul>
+    <img src="./assets/images/relationships.png" className="img-responsive" />
+  </SidebarSlide>,
+  <SidebarSlide key="sixth">
+    <h3>Relationship properties</h3>
+    <p className="lead">Store information shared by two nodes.</p>
+    <p className="summary">
+      In a property graph, relationships are data records that can also contain
+      properties. Looking more closely at Emil's relationships, note that:
+    </p>
+    <ul>
+      <li>Emil has known Johan since 2001</li>
+      <li>Emil rates Ian 5 (out of 5)</li>
+      <li>Everyone else can have similar relationship properties</li>
+    </ul>
+    <img src="./assets/images/rel-props.png" className="img-responsive" />
+  </SidebarSlide>,
+  <SidebarSlide key="seventh">
+    <h3>Next steps</h3>
+    <p>
+      A property graph contains nodes and relationships, with properties on
+      both.
+    </p>
+    <h3>Keep getting started</h3>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":guide intro">Intro</a> - a guided tour
+      </li>
+      <li>
+        <a data-exec=":guide cypher">Cypher</a> - query language
+      </li>
+      <li>
+        <ManualLink chapter="cypher-manual" page="/">
+          Neo4j Cypher Manual
+        </ManualLink>
+      </li>
+    </ul>
+    <br />
+    <h3>Jump into code</h3>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":guide movie-graph">The Movie Graph</a>
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, category, slides }
diff --git a/src/browser/documentation/sidebar-guides/cypher.tsx b/src/browser/documentation/sidebar-guides/cypher.tsx
new file mode 100644
index 00000000000..e8387bcf67d
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/cypher.tsx
@@ -0,0 +1,222 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ManualLink from 'browser-components/ManualLink'
+import { SidebarSlide } from '../../modules/Carousel/Slide'
+
+const title = 'Cypher'
+const slides = [
+  <SidebarSlide key="first">
+    <p className="lead">Neo4j's graph query language</p>
+    <p>Neo4j's Cypher language is purpose built for working with graph data.</p>
+    <ul className="big">
+      <li>uses patterns to describe graph data</li>
+      <li>familiar SQL-like clauses</li>
+      <li>declarative, describing what to find, not how to find it</li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="second">
+    <h3>CREATE</h3>
+    <p className="lead">Create a node</p>
+    <p>Let's use Cypher to generate a small social graph.</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {'CREATE (ee:Person { name: "Emil", from: "Sweden", klout: 99 })'}
+      </pre>
+    </figure>
+    <ul>
+      <li>
+        <code>CREATE</code> clause to create data
+      </li>
+      <li>
+        <code>()</code> parenthesis to indicate a node
+      </li>
+      <li>
+        <code>ee:Person</code> a variable 'ee' and label 'Person' for the new
+        node
+      </li>
+      <li>
+        <code>{'{}'}</code> brackets to add properties to the node
+      </li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="third">
+    <h3>MATCH</h3>
+    <p className="lead">Finding nodes</p>
+    <p>Now find the node representing Emil:</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        MATCH (ee:Person) WHERE ee.name = "Emil" RETURN ee;
+      </pre>
+    </figure>
+    <ul>
+      <li>
+        <code>MATCH</code> clause to specify a pattern of nodes and
+        relationships
+      </li>
+      <li>
+        <code>(ee:Person)</code> a single node pattern with label 'Person' which
+        will assign matches to the variable 'ee'
+      </li>
+      <li>
+        <code>WHERE</code> clause to constrain the results
+      </li>
+      <li>
+        <code>ee.name = "Emil"</code> compares name property to the value "Emil"
+      </li>
+      <li>
+        <code>RETURN</code> clause used to request particular results
+      </li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="forth">
+    <h3>CREATE more</h3>
+    <p className="lead">Nodes and relationships</p>
+    <p>
+      <code>CREATE</code>
+      clauses can create many nodes and relationships at once.
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (ee:Person) WHERE ee.name = "Emil"
+CREATE (js:Person { name: "Johan", from: "Sweden", learn: "surfing" }),
+(ir:Person { name: "Ian", from: "England", title: "author" }),
+(rvb:Person { name: "Rik", from: "Belgium", pet: "Orval" }),
+(ally:Person { name: "Allison", from: "California", hobby: "surfing" }),
+(ee)-[:KNOWS {since: 2001}]->(js),(ee)-[:KNOWS {rating: 5}]->(ir),
+(js)-[:KNOWS]->(ir),(js)-[:KNOWS]->(rvb),
+(ir)-[:KNOWS]->(js),(ir)-[:KNOWS]->(ally),
+(rvb)-[:KNOWS]->(ally)`}
+      </pre>
+    </figure>
+  </SidebarSlide>,
+  <SidebarSlide key="fifth">
+    <h3>Pattern matching</h3>
+    <p className="lead">Describe what to find in the graph</p>
+    <p className="summary">
+      For instance, a pattern can be used to find Emil's friends:
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (ee:Person)-[:KNOWS]-(friends)
+WHERE ee.name = "Emil" RETURN ee, friends`}
+      </pre>
+    </figure>
+    <ul>
+      <li>
+        <code>MATCH</code>
+        clause to describe the pattern from known Nodes to found Nodes
+      </li>
+      <li>
+        <code>(ee)</code>
+        starts the pattern with a Person (qualified by WHERE)
+      </li>
+      <li>
+        <code>-[:KNOWS]-</code>
+        matches "KNOWS" relationships (in either direction)
+      </li>
+      <li>
+        <code>(friends)</code>
+        will be bound to Emil's friends
+      </li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="sixth">
+    <h3>Recommend</h3>
+    <p className="lead">Using patterns</p>
+    <p className="summary">
+      Pattern matching can be used to make recommendations. Johan is learning to
+      surf, so he may want to find a new friend who already does:
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (js:Person)-[:KNOWS]-()-[:KNOWS]-(surfer)
+WHERE js.name = "Johan" AND surfer.hobby = "surfing"
+RETURN DISTINCT surfer`}
+      </pre>
+    </figure>
+    <ul>
+      <li>
+        <code>()</code>
+        empty parenthesis to ignore these nodes
+      </li>
+      <li>
+        <code>DISTINCT</code>
+        because more than one path will match the pattern
+      </li>
+      <li>
+        <code>surfer</code>
+        will contain Allison, a friend of a friend who surfs
+      </li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="seventh">
+    <h3>Analyze</h3>
+    <p className="lead">Using the visual query plan</p>
+    <p className="summary">
+      Understand how your query works by prepending <code>EXPLAIN</code> or{' '}
+      <code>PROFILE</code>:
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`PROFILE MATCH (js:Person)-[:KNOWS]-()-[:KNOWS]-(surfer)
+WHERE js.name = "Johan" AND surfer.hobby = "surfing"
+RETURN DISTINCT surfer`}
+      </pre>
+    </figure>
+  </SidebarSlide>,
+  <SidebarSlide key="eighth">
+    <h3>Live Cypher warnings</h3>
+    <p className="lead">Identify query problems in real time</p>
+    <p>
+      As you type, the query editor notifies you about deprecated features and
+      potentially expensive queries.
+    </p>
+    <img
+      src="./assets/images/screen_cypher_warn.png"
+      className="img-responsive"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="nineth">
+    <h3>Next steps</h3>
+    <p>
+      Start your application using Cypher to create and query graph data. See{' '}
+      <a help-topic="cypher">Help Cypher</a> for more built-in cypher
+      documentation.
+    </p>
+    <h3>Documentation</h3>
+    <ul className="undecorated">
+      <li>
+        <ManualLink chapter="cypher-refcard" page="/">
+          Cypher Refcard
+        </ManualLink>
+      </li>
+      <li>
+        <ManualLink chapter="cypher-manual" page="/">
+          The Cypher chapter
+        </ManualLink>{' '}
+        of the Neo4j Developer Manual
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, slides }
diff --git a/src/browser/documentation/sidebar-guides/guideIndex.tsx b/src/browser/documentation/sidebar-guides/guideIndex.tsx
new file mode 100644
index 00000000000..32cb1eca8ea
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/guideIndex.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import {
+  DrawerBrowserCommand,
+  DrawerExternalLink,
+  DrawerSubHeader
+} from 'browser-components/drawer/drawer-styled'
+import { SidebarSlide } from 'browser/modules/Carousel/Slide'
+import { LinkContainer, MarginTop, MarginTopLi, NoBulletsUl } from './styled'
+
+const title = '--DEFAULT_INDEX_GUIDE--'
+const slides = [
+  <SidebarSlide key="first">
+    You can also access Browser guides by running
+    <DrawerBrowserCommand data-populate=":guide [guide name]">
+      :guide [guide name]
+    </DrawerBrowserCommand>
+    in the code editor.
+    <MarginTop>
+      <DrawerSubHeader as="div" /* prevents guide styling of h5*/>
+        Built-in guides
+      </DrawerSubHeader>
+    </MarginTop>
+    <NoBulletsUl>
+      <li>
+        <DrawerBrowserCommand data-exec=":guide intro">
+          :guide intro
+        </DrawerBrowserCommand>
+        <MarginTop> Navigating Neo4j Browser </MarginTop>
+      </li>
+      <MarginTopLi>
+        <DrawerBrowserCommand data-exec=":guide concepts">
+          :guide concepts
+        </DrawerBrowserCommand>
+        <MarginTop> Property graph model concepts </MarginTop>
+      </MarginTopLi>
+      <MarginTopLi>
+        <DrawerBrowserCommand data-exec=":guide cypher">
+          :guide cypher
+        </DrawerBrowserCommand>
+        <MarginTop>Cypher basics - create, match, delete</MarginTop>
+      </MarginTopLi>
+
+      <MarginTopLi>
+        <DrawerBrowserCommand data-exec=":guide movie-graph">
+          :guide movie-graph
+        </DrawerBrowserCommand>
+        <MarginTop>
+          Queries and recommendations with Cypher - movie use case
+        </MarginTop>
+      </MarginTopLi>
+
+      <MarginTopLi>
+        <DrawerBrowserCommand data-exec=":guide northwind-graph">
+          :guide northwind-graph
+        </DrawerBrowserCommand>
+        <MarginTop>Translate and import relation data into graph</MarginTop>
+      </MarginTopLi>
+    </NoBulletsUl>
+    <LinkContainer>
+      <DrawerExternalLink href="https://neo4j.com/graphgists/">
+        More guides
+      </DrawerExternalLink>
+    </LinkContainer>
+  </SidebarSlide>
+]
+
+export default { title, slides }
diff --git a/src/browser/documentation/sidebar-guides/intro.tsx b/src/browser/documentation/sidebar-guides/intro.tsx
new file mode 100644
index 00000000000..d147be79424
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/intro.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { SidebarSlide } from '../../modules/Carousel/Slide'
+import { isMac } from 'browser/modules/App/keyboardShortcuts'
+
+const title = 'Introduction'
+const slides = [
+  <SidebarSlide key="s1">
+    <p>
+      Neo4j Browser is a command driven client, like a web-based shell
+      environment. It is perfect for running ad-hoc graph queries, with just
+      enough ability to prototype a Neo4j-based application.
+    </p>
+    <ul className="big">
+      <li>
+        Developer focused, for writing and running graph queries with Cypher
+      </li>
+      <li>Exportable tabular results of any query result</li>
+      <li>
+        Graph visualization of query results containing nodes and relationships
+      </li>
+    </ul>
+  </SidebarSlide>,
+  <SidebarSlide key="s2">
+    <h3>Editor</h3>
+    <p className="lead">Command editing and execution</p>
+    <p>
+      Editor pane is used to edit and run for Cypher statements and Browser
+      commands. Browser commands begin with <code>:</code>, for example{' '}
+      <code>:help</code>
+    </p>
+    <table>
+      <tbody>
+        <tr>
+          <td>Execute current command</td>
+          <td className="padding5">
+            <div className="key code">
+              {isMac ? '<Cmd-Return>' : '<Ctrl-Return>'}
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>Previous command in history</td>
+          <td className="padding5">
+            <div className="key code">
+              {isMac ? '<Cmd-Up-Arrow>' : '<Ctrl-Up-Arrow>'}
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>Next command in history</td>
+          <td className="padding5">
+            <div className="key code">
+              {isMac ? '<Cmd-Down-Arrow>' : '<Ctrl-Down-Arrow>'}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p></p>
+    <p>
+      You can view the list of keybinding anytime by running{' '}
+      <code>:help keys</code> or by pressing <b>F1 </b>in the editor to see all
+      editor-specific keybindings.
+    </p>
+    <br />
+    <img
+      src="./assets/images/Keystrokes2.gif"
+      className="img-responsive  padding5"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="s3">
+    <h3>Result frame</h3>
+    <p className="lead">Most recently executed command or Cypher query.</p>
+    <p>
+      A result frame is created for each command execution, added to the top of
+      the stream to create a scrollable collection in reverse chronological
+      order.
+    </p>
+    <ul>
+      <li>If a frame is pinned it will always stay in the same position. </li>
+      <li>
+        You can clear the stream of result frames running <code>:clear</code>{' '}
+        command.
+      </li>
+      <li>
+        There are maximum 30 result frames displayed in the stream. You can
+        change this number in the Settings sidebar.{' '}
+      </li>
+      <li>
+        You can bring up the history of the executed commands and queries by
+        running <code className="nobreak">:history</code> command.
+      </li>
+    </ul>
+    <br />
+    <img src="./assets/images/Stream.png" className="img-responsive padding5" />
+  </SidebarSlide>,
+  <SidebarSlide key="s4">
+    <h3>Reusable frame</h3>
+    <p className="lead">Instead of the stream</p>
+    <p>
+      You can also iterate in the same frame instead of generating a scrollable
+      stream of frames.
+    </p>
+    <p>Adjust your preferences in the Settings sidebar tab.</p>
+    <br />
+    <img
+      src="./assets/images/ReusableFrame2.gif"
+      className="img-responsive padding5"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="s5">
+    <h3>Sidebar: Database information</h3>
+    When Neo4j is installed, it is initiated with two databases - a{' '}
+    <code>system</code> database and a default <code>neo4j</code> database.
+    Launching Neo4j Browser will automatically point us to the{' '}
+    <code className="nobreak">neo4j default</code> database, shown by the neo4j$
+    prompt in the editor.
+    <br />
+    <img
+      src="./assets/images/SidebarDB_Iinfo.png"
+      className="img-responsive padding5"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="s6">
+    <h3>Sidebar: Favorites</h3>
+    <p>
+      Favorite queries or commands can be saved in the local storage and
+      displayed in the sidebar.{' '}
+    </p>
+    <p>
+      Favorites are global and independent of project or database which means
+      that you can access your Favorites from Neo4j Browser with different
+      databases, hosting platforms, and data sets.
+    </p>
+    <br />
+    <img
+      src="./assets/images/Favorites2.gif"
+      className="img-responsive padding5"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="s7">
+    <h3>Sidebar: Project files</h3>
+    <p className="lead">Save cypher files to share with your colleagues</p>
+    Queries and commands can also be saved as <b>Project files</b>. Project
+    folder can be reached through Neo4j Desktop and your hard disk. Note this
+    feature is only available when Neo4j Browser is run in Desktop.
+    <br />
+    <img
+      src="./assets/images/ProjectFiles2.gif"
+      className="img-responsive padding5"
+    />
+  </SidebarSlide>,
+  <SidebarSlide key="s8">
+    <h3>Next steps</h3>
+    <ul className="undecorated">
+      <li>
+        <a help-topic="commands">Help commands</a> - Useful Neo4j Browser
+        commands
+      </li>
+      <li>
+        <a help-topic="keys">Help keys</a> - Keyboard shortcuts
+      </li>
+    </ul>
+    <br />
+    <h3>Jump into code</h3>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":guide cypher">Cypher Guide</a> - Learn Cypher basics
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, slides }
diff --git a/src/browser/documentation/sidebar-guides/movie-graph.tsx b/src/browser/documentation/sidebar-guides/movie-graph.tsx
new file mode 100644
index 00000000000..9e5ec20eaaa
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/movie-graph.tsx
@@ -0,0 +1,805 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ManualLink from 'browser-components/ManualLink'
+import { SidebarSlide } from '../../modules/Carousel/Slide'
+import { BulletsInsideLi } from './styled'
+import { DrawerExternalLink } from 'browser-components/drawer/drawer-styled'
+
+const title = 'Movie Graph'
+const category = 'graphExamples'
+const slides = [
+  <SidebarSlide key="s1">
+    <p>
+      <em>The Movie Graph</em> is a mini graph application containing actors and
+      directors that are related through the movies they've collaborated on.
+    </p>
+    <p>This guide will show you how to:</p>
+    <ol className="big ">
+      <li>
+        <b>Create:</b> insert movie data into the graph
+      </li>
+      <li>
+        <b>Find:</b> retrieve individual movies and actors
+      </li>
+      <li>
+        <b>Query:</b> discover related actors and directors
+      </li>
+      <li>
+        <b>Solve:</b> the Bacon Path
+      </li>
+    </ol>
+    <p></p>
+    <p>
+      <b>WARNING:</b> This guide will modify the data in the currently active
+      database.{' '}
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s2">
+    <h3>Create</h3>
+    <p>
+      Below is a code block containing a single Cypher query statement composed
+      of multiple CREATE clauses. This will create the movie graph. Keep in mind
+      this will add data to the database each time it is run.
+    </p>
+    <ol>
+      <li>Click on the code block</li>
+      <li>Notice it gets copied to the editor to the right </li>
+      <li>Click the editor&apos;s play button to execute</li>
+      <li>Wait for the query to finish</li>
+    </ol>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`CREATE (TheMatrix:Movie {title:'The Matrix', released:1999, tagline:'Welcome to the Real World'})
+CREATE (Keanu:Person {name:'Keanu Reeves', born:1964})
+CREATE (Carrie:Person {name:'Carrie-Anne Moss', born:1967})
+CREATE (Laurence:Person {name:'Laurence Fishburne', born:1961})
+CREATE (Hugo:Person {name:'Hugo Weaving', born:1960})
+CREATE (LillyW:Person {name:'Lilly Wachowski', born:1967})
+CREATE (LanaW:Person {name:'Lana Wachowski', born:1965})
+CREATE (JoelS:Person {name:'Joel Silver', born:1952})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Neo']}]->(TheMatrix),
+(Carrie)-[:ACTED_IN {roles:['Trinity']}]->(TheMatrix),
+(Laurence)-[:ACTED_IN {roles:['Morpheus']}]->(TheMatrix),
+(Hugo)-[:ACTED_IN {roles:['Agent Smith']}]->(TheMatrix),
+(LillyW)-[:DIRECTED]->(TheMatrix),
+(LanaW)-[:DIRECTED]->(TheMatrix),
+(JoelS)-[:PRODUCED]->(TheMatrix)
+
+CREATE (Emil:Person {name:"Emil Eifrem", born:1978})
+CREATE (Emil)-[:ACTED_IN {roles:["Emil"]}]->(TheMatrix)
+
+CREATE (TheMatrixReloaded:Movie {title:'The Matrix Reloaded', released:2003, tagline:'Free your mind'})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Neo']}]->(TheMatrixReloaded),
+(Carrie)-[:ACTED_IN {roles:['Trinity']}]->(TheMatrixReloaded),
+(Laurence)-[:ACTED_IN {roles:['Morpheus']}]->(TheMatrixReloaded),
+(Hugo)-[:ACTED_IN {roles:['Agent Smith']}]->(TheMatrixReloaded),
+(LillyW)-[:DIRECTED]->(TheMatrixReloaded),
+(LanaW)-[:DIRECTED]->(TheMatrixReloaded),
+(JoelS)-[:PRODUCED]->(TheMatrixReloaded)
+
+CREATE (TheMatrixRevolutions:Movie {title:'The Matrix Revolutions', released:2003, tagline:'Everything that has a beginning has an end'})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Neo']}]->(TheMatrixRevolutions),
+(Carrie)-[:ACTED_IN {roles:['Trinity']}]->(TheMatrixRevolutions),
+(Laurence)-[:ACTED_IN {roles:['Morpheus']}]->(TheMatrixRevolutions),
+(Hugo)-[:ACTED_IN {roles:['Agent Smith']}]->(TheMatrixRevolutions),
+(LillyW)-[:DIRECTED]->(TheMatrixRevolutions),
+(LanaW)-[:DIRECTED]->(TheMatrixRevolutions),
+(JoelS)-[:PRODUCED]->(TheMatrixRevolutions)
+
+CREATE (TheDevilsAdvocate:Movie {title:"The Devil's Advocate", released:1997, tagline:'Evil has its winning ways'})
+CREATE (Charlize:Person {name:'Charlize Theron', born:1975})
+CREATE (Al:Person {name:'Al Pacino', born:1940})
+CREATE (Taylor:Person {name:'Taylor Hackford', born:1944})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Kevin Lomax']}]->(TheDevilsAdvocate),
+(Charlize)-[:ACTED_IN {roles:['Mary Ann Lomax']}]->(TheDevilsAdvocate),
+(Al)-[:ACTED_IN {roles:['John Milton']}]->(TheDevilsAdvocate),
+(Taylor)-[:DIRECTED]->(TheDevilsAdvocate)
+
+CREATE (AFewGoodMen:Movie {title:"A Few Good Men", released:1992, tagline:"In the heart of the nation's capital, in a courthouse of the U.S. government, one man will stop at nothing to keep his honor, and one will stop at nothing to find the truth."})
+CREATE (TomC:Person {name:'Tom Cruise', born:1962})
+CREATE (JackN:Person {name:'Jack Nicholson', born:1937})
+CREATE (DemiM:Person {name:'Demi Moore', born:1962})
+CREATE (KevinB:Person {name:'Kevin Bacon', born:1958})
+CREATE (KieferS:Person {name:'Kiefer Sutherland', born:1966})
+CREATE (NoahW:Person {name:'Noah Wyle', born:1971})
+CREATE (CubaG:Person {name:'Cuba Gooding Jr.', born:1968})
+CREATE (KevinP:Person {name:'Kevin Pollak', born:1957})
+CREATE (JTW:Person {name:'J.T. Walsh', born:1943})
+CREATE (JamesM:Person {name:'James Marshall', born:1967})
+CREATE (ChristopherG:Person {name:'Christopher Guest', born:1948})
+CREATE (RobR:Person {name:'Rob Reiner', born:1947})
+CREATE (AaronS:Person {name:'Aaron Sorkin', born:1961})
+CREATE
+(TomC)-[:ACTED_IN {roles:['Lt. Daniel Kaffee']}]->(AFewGoodMen),
+(JackN)-[:ACTED_IN {roles:['Col. Nathan R. Jessup']}]->(AFewGoodMen),
+(DemiM)-[:ACTED_IN {roles:['Lt. Cdr. JoAnne Galloway']}]->(AFewGoodMen),
+(KevinB)-[:ACTED_IN {roles:['Capt. Jack Ross']}]->(AFewGoodMen),
+(KieferS)-[:ACTED_IN {roles:['Lt. Jonathan Kendrick']}]->(AFewGoodMen),
+(NoahW)-[:ACTED_IN {roles:['Cpl. Jeffrey Barnes']}]->(AFewGoodMen),
+(CubaG)-[:ACTED_IN {roles:['Cpl. Carl Hammaker']}]->(AFewGoodMen),
+(KevinP)-[:ACTED_IN {roles:['Lt. Sam Weinberg']}]->(AFewGoodMen),
+(JTW)-[:ACTED_IN {roles:['Lt. Col. Matthew Andrew Markinson']}]->(AFewGoodMen),
+(JamesM)-[:ACTED_IN {roles:['Pfc. Louden Downey']}]->(AFewGoodMen),
+(ChristopherG)-[:ACTED_IN {roles:['Dr. Stone']}]->(AFewGoodMen),
+(AaronS)-[:ACTED_IN {roles:['Man in Bar']}]->(AFewGoodMen),
+(RobR)-[:DIRECTED]->(AFewGoodMen),
+(AaronS)-[:WROTE]->(AFewGoodMen)
+
+CREATE (TopGun:Movie {title:"Top Gun", released:1986, tagline:'I feel the need, the need for speed.'})
+CREATE (KellyM:Person {name:'Kelly McGillis', born:1957})
+CREATE (ValK:Person {name:'Val Kilmer', born:1959})
+CREATE (AnthonyE:Person {name:'Anthony Edwards', born:1962})
+CREATE (TomS:Person {name:'Tom Skerritt', born:1933})
+CREATE (MegR:Person {name:'Meg Ryan', born:1961})
+CREATE (TonyS:Person {name:'Tony Scott', born:1944})
+CREATE (JimC:Person {name:'Jim Cash', born:1941})
+CREATE
+(TomC)-[:ACTED_IN {roles:['Maverick']}]->(TopGun),
+(KellyM)-[:ACTED_IN {roles:['Charlie']}]->(TopGun),
+(ValK)-[:ACTED_IN {roles:['Iceman']}]->(TopGun),
+(AnthonyE)-[:ACTED_IN {roles:['Goose']}]->(TopGun),
+(TomS)-[:ACTED_IN {roles:['Viper']}]->(TopGun),
+(MegR)-[:ACTED_IN {roles:['Carole']}]->(TopGun),
+(TonyS)-[:DIRECTED]->(TopGun),
+(JimC)-[:WROTE]->(TopGun)
+
+CREATE (JerryMaguire:Movie {title:'Jerry Maguire', released:2000, tagline:'The rest of his life begins now.'})
+CREATE (ReneeZ:Person {name:'Renee Zellweger', born:1969})
+CREATE (KellyP:Person {name:'Kelly Preston', born:1962})
+CREATE (JerryO:Person {name:"Jerry O'Connell", born:1974})
+CREATE (JayM:Person {name:'Jay Mohr', born:1970})
+CREATE (BonnieH:Person {name:'Bonnie Hunt', born:1961})
+CREATE (ReginaK:Person {name:'Regina King', born:1971})
+CREATE (JonathanL:Person {name:'Jonathan Lipnicki', born:1996})
+CREATE (CameronC:Person {name:'Cameron Crowe', born:1957})
+CREATE
+(TomC)-[:ACTED_IN {roles:['Jerry Maguire']}]->(JerryMaguire),
+(CubaG)-[:ACTED_IN {roles:['Rod Tidwell']}]->(JerryMaguire),
+(ReneeZ)-[:ACTED_IN {roles:['Dorothy Boyd']}]->(JerryMaguire),
+(KellyP)-[:ACTED_IN {roles:['Avery Bishop']}]->(JerryMaguire),
+(JerryO)-[:ACTED_IN {roles:['Frank Cushman']}]->(JerryMaguire),
+(JayM)-[:ACTED_IN {roles:['Bob Sugar']}]->(JerryMaguire),
+(BonnieH)-[:ACTED_IN {roles:['Laurel Boyd']}]->(JerryMaguire),
+(ReginaK)-[:ACTED_IN {roles:['Marcee Tidwell']}]->(JerryMaguire),
+(JonathanL)-[:ACTED_IN {roles:['Ray Boyd']}]->(JerryMaguire),
+(CameronC)-[:DIRECTED]->(JerryMaguire),
+(CameronC)-[:PRODUCED]->(JerryMaguire),
+(CameronC)-[:WROTE]->(JerryMaguire)
+
+CREATE (StandByMe:Movie {title:"Stand By Me", released:1986, tagline:"For some, it's the last real taste of innocence, and the first real taste of life. But for everyone, it's the time that memories are made of."})
+CREATE (RiverP:Person {name:'River Phoenix', born:1970})
+CREATE (CoreyF:Person {name:'Corey Feldman', born:1971})
+CREATE (WilW:Person {name:'Wil Wheaton', born:1972})
+CREATE (JohnC:Person {name:'John Cusack', born:1966})
+CREATE (MarshallB:Person {name:'Marshall Bell', born:1942})
+CREATE
+(WilW)-[:ACTED_IN {roles:['Gordie Lachance']}]->(StandByMe),
+(RiverP)-[:ACTED_IN {roles:['Chris Chambers']}]->(StandByMe),
+(JerryO)-[:ACTED_IN {roles:['Vern Tessio']}]->(StandByMe),
+(CoreyF)-[:ACTED_IN {roles:['Teddy Duchamp']}]->(StandByMe),
+(JohnC)-[:ACTED_IN {roles:['Denny Lachance']}]->(StandByMe),
+(KieferS)-[:ACTED_IN {roles:['Ace Merrill']}]->(StandByMe),
+(MarshallB)-[:ACTED_IN {roles:['Mr. Lachance']}]->(StandByMe),
+(RobR)-[:DIRECTED]->(StandByMe)
+
+CREATE (AsGoodAsItGets:Movie {title:'As Good as It Gets', released:1997, tagline:'A comedy from the heart that goes for the throat.'})
+CREATE (HelenH:Person {name:'Helen Hunt', born:1963})
+CREATE (GregK:Person {name:'Greg Kinnear', born:1963})
+CREATE (JamesB:Person {name:'James L. Brooks', born:1940})
+CREATE
+(JackN)-[:ACTED_IN {roles:['Melvin Udall']}]->(AsGoodAsItGets),
+(HelenH)-[:ACTED_IN {roles:['Carol Connelly']}]->(AsGoodAsItGets),
+(GregK)-[:ACTED_IN {roles:['Simon Bishop']}]->(AsGoodAsItGets),
+(CubaG)-[:ACTED_IN {roles:['Frank Sachs']}]->(AsGoodAsItGets),
+(JamesB)-[:DIRECTED]->(AsGoodAsItGets)
+
+CREATE (WhatDreamsMayCome:Movie {title:'What Dreams May Come', released:1998, tagline:'After life there is more. The end is just the beginning.'})
+CREATE (AnnabellaS:Person {name:'Annabella Sciorra', born:1960})
+CREATE (MaxS:Person {name:'Max von Sydow', born:1929})
+CREATE (WernerH:Person {name:'Werner Herzog', born:1942})
+CREATE (Robin:Person {name:'Robin Williams', born:1951})
+CREATE (VincentW:Person {name:'Vincent Ward', born:1956})
+CREATE
+(Robin)-[:ACTED_IN {roles:['Chris Nielsen']}]->(WhatDreamsMayCome),
+(CubaG)-[:ACTED_IN {roles:['Albert Lewis']}]->(WhatDreamsMayCome),
+(AnnabellaS)-[:ACTED_IN {roles:['Annie Collins-Nielsen']}]->(WhatDreamsMayCome),
+(MaxS)-[:ACTED_IN {roles:['The Tracker']}]->(WhatDreamsMayCome),
+(WernerH)-[:ACTED_IN {roles:['The Face']}]->(WhatDreamsMayCome),
+(VincentW)-[:DIRECTED]->(WhatDreamsMayCome)
+
+CREATE (SnowFallingonCedars:Movie {title:'Snow Falling on Cedars', released:1999, tagline:'First loves last. Forever.'})
+CREATE (EthanH:Person {name:'Ethan Hawke', born:1970})
+CREATE (RickY:Person {name:'Rick Yune', born:1971})
+CREATE (JamesC:Person {name:'James Cromwell', born:1940})
+CREATE (ScottH:Person {name:'Scott Hicks', born:1953})
+CREATE
+(EthanH)-[:ACTED_IN {roles:['Ishmael Chambers']}]->(SnowFallingonCedars),
+(RickY)-[:ACTED_IN {roles:['Kazuo Miyamoto']}]->(SnowFallingonCedars),
+(MaxS)-[:ACTED_IN {roles:['Nels Gudmundsson']}]->(SnowFallingonCedars),
+(JamesC)-[:ACTED_IN {roles:['Judge Fielding']}]->(SnowFallingonCedars),
+(ScottH)-[:DIRECTED]->(SnowFallingonCedars)
+
+CREATE (YouveGotMail:Movie {title:"You've Got Mail", released:1998, tagline:'At odds in life... in love on-line.'})
+CREATE (ParkerP:Person {name:'Parker Posey', born:1968})
+CREATE (DaveC:Person {name:'Dave Chappelle', born:1973})
+CREATE (SteveZ:Person {name:'Steve Zahn', born:1967})
+CREATE (TomH:Person {name:'Tom Hanks', born:1956})
+CREATE (NoraE:Person {name:'Nora Ephron', born:1941})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Joe Fox']}]->(YouveGotMail),
+(MegR)-[:ACTED_IN {roles:['Kathleen Kelly']}]->(YouveGotMail),
+(GregK)-[:ACTED_IN {roles:['Frank Navasky']}]->(YouveGotMail),
+(ParkerP)-[:ACTED_IN {roles:['Patricia Eden']}]->(YouveGotMail),
+(DaveC)-[:ACTED_IN {roles:['Kevin Jackson']}]->(YouveGotMail),
+(SteveZ)-[:ACTED_IN {roles:['George Pappas']}]->(YouveGotMail),
+(NoraE)-[:DIRECTED]->(YouveGotMail)
+
+CREATE (SleeplessInSeattle:Movie {title:'Sleepless in Seattle', released:1993, tagline:'What if someone you never met, someone you never saw, someone you never knew was the only someone for you?'})
+CREATE (RitaW:Person {name:'Rita Wilson', born:1956})
+CREATE (BillPull:Person {name:'Bill Pullman', born:1953})
+CREATE (VictorG:Person {name:'Victor Garber', born:1949})
+CREATE (RosieO:Person {name:"Rosie O'Donnell", born:1962})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Sam Baldwin']}]->(SleeplessInSeattle),
+(MegR)-[:ACTED_IN {roles:['Annie Reed']}]->(SleeplessInSeattle),
+(RitaW)-[:ACTED_IN {roles:['Suzy']}]->(SleeplessInSeattle),
+(BillPull)-[:ACTED_IN {roles:['Walter']}]->(SleeplessInSeattle),
+(VictorG)-[:ACTED_IN {roles:['Greg']}]->(SleeplessInSeattle),
+(RosieO)-[:ACTED_IN {roles:['Becky']}]->(SleeplessInSeattle),
+(NoraE)-[:DIRECTED]->(SleeplessInSeattle)
+
+CREATE (JoeVersustheVolcano:Movie {title:'Joe Versus the Volcano', released:1990, tagline:'A story of love, lava and burning desire.'})
+CREATE (JohnS:Person {name:'John Patrick Stanley', born:1950})
+CREATE (Nathan:Person {name:'Nathan Lane', born:1956})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Joe Banks']}]->(JoeVersustheVolcano),
+(MegR)-[:ACTED_IN {roles:['DeDe', 'Angelica Graynamore', 'Patricia Graynamore']}]->(JoeVersustheVolcano),
+(Nathan)-[:ACTED_IN {roles:['Baw']}]->(JoeVersustheVolcano),
+(JohnS)-[:DIRECTED]->(JoeVersustheVolcano)
+
+CREATE (WhenHarryMetSally:Movie {title:'When Harry Met Sally', released:1998, tagline:'Can two friends sleep together and still love each other in the morning?'})
+CREATE (BillyC:Person {name:'Billy Crystal', born:1948})
+CREATE (CarrieF:Person {name:'Carrie Fisher', born:1956})
+CREATE (BrunoK:Person {name:'Bruno Kirby', born:1949})
+CREATE
+(BillyC)-[:ACTED_IN {roles:['Harry Burns']}]->(WhenHarryMetSally),
+(MegR)-[:ACTED_IN {roles:['Sally Albright']}]->(WhenHarryMetSally),
+(CarrieF)-[:ACTED_IN {roles:['Marie']}]->(WhenHarryMetSally),
+(BrunoK)-[:ACTED_IN {roles:['Jess']}]->(WhenHarryMetSally),
+(RobR)-[:DIRECTED]->(WhenHarryMetSally),
+(RobR)-[:PRODUCED]->(WhenHarryMetSally),
+(NoraE)-[:PRODUCED]->(WhenHarryMetSally),
+(NoraE)-[:WROTE]->(WhenHarryMetSally)
+
+CREATE (ThatThingYouDo:Movie {title:'That Thing You Do', released:1996, tagline:'In every life there comes a time when that thing you dream becomes that thing you do'})
+CREATE (LivT:Person {name:'Liv Tyler', born:1977})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Mr. White']}]->(ThatThingYouDo),
+(LivT)-[:ACTED_IN {roles:['Faye Dolan']}]->(ThatThingYouDo),
+(Charlize)-[:ACTED_IN {roles:['Tina']}]->(ThatThingYouDo),
+(TomH)-[:DIRECTED]->(ThatThingYouDo)
+
+CREATE (TheReplacements:Movie {title:'The Replacements', released:2000, tagline:'Pain heals, Chicks dig scars... Glory lasts forever'})
+CREATE (Brooke:Person {name:'Brooke Langton', born:1970})
+CREATE (Gene:Person {name:'Gene Hackman', born:1930})
+CREATE (Orlando:Person {name:'Orlando Jones', born:1968})
+CREATE (Howard:Person {name:'Howard Deutch', born:1950})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Shane Falco']}]->(TheReplacements),
+(Brooke)-[:ACTED_IN {roles:['Annabelle Farrell']}]->(TheReplacements),
+(Gene)-[:ACTED_IN {roles:['Jimmy McGinty']}]->(TheReplacements),
+(Orlando)-[:ACTED_IN {roles:['Clifford Franklin']}]->(TheReplacements),
+(Howard)-[:DIRECTED]->(TheReplacements)
+
+CREATE (RescueDawn:Movie {title:'RescueDawn', released:2006, tagline:"Based on the extraordinary true story of one man's fight for freedom"})
+CREATE (ChristianB:Person {name:'Christian Bale', born:1974})
+CREATE (ZachG:Person {name:'Zach Grenier', born:1954})
+CREATE
+(MarshallB)-[:ACTED_IN {roles:['Admiral']}]->(RescueDawn),
+(ChristianB)-[:ACTED_IN {roles:['Dieter Dengler']}]->(RescueDawn),
+(ZachG)-[:ACTED_IN {roles:['Squad Leader']}]->(RescueDawn),
+(SteveZ)-[:ACTED_IN {roles:['Duane']}]->(RescueDawn),
+(WernerH)-[:DIRECTED]->(RescueDawn)
+
+CREATE (TheBirdcage:Movie {title:'The Birdcage', released:1996, tagline:'Come as you are'})
+CREATE (MikeN:Person {name:'Mike Nichols', born:1931})
+CREATE
+(Robin)-[:ACTED_IN {roles:['Armand Goldman']}]->(TheBirdcage),
+(Nathan)-[:ACTED_IN {roles:['Albert Goldman']}]->(TheBirdcage),
+(Gene)-[:ACTED_IN {roles:['Sen. Kevin Keeley']}]->(TheBirdcage),
+(MikeN)-[:DIRECTED]->(TheBirdcage)
+
+CREATE (Unforgiven:Movie {title:'Unforgiven', released:1992, tagline:"It's a hell of a thing, killing a man"})
+CREATE (RichardH:Person {name:'Richard Harris', born:1930})
+CREATE (ClintE:Person {name:'Clint Eastwood', born:1930})
+CREATE
+(RichardH)-[:ACTED_IN {roles:['English Bob']}]->(Unforgiven),
+(ClintE)-[:ACTED_IN {roles:['Bill Munny']}]->(Unforgiven),
+(Gene)-[:ACTED_IN {roles:['Little Bill Daggett']}]->(Unforgiven),
+(ClintE)-[:DIRECTED]->(Unforgiven)
+
+CREATE (JohnnyMnemonic:Movie {title:'Johnny Mnemonic', released:1995, tagline:'The hottest data on earth. In the coolest head in town'})
+CREATE (Takeshi:Person {name:'Takeshi Kitano', born:1947})
+CREATE (Dina:Person {name:'Dina Meyer', born:1968})
+CREATE (IceT:Person {name:'Ice-T', born:1958})
+CREATE (RobertL:Person {name:'Robert Longo', born:1953})
+CREATE
+(Keanu)-[:ACTED_IN {roles:['Johnny Mnemonic']}]->(JohnnyMnemonic),
+(Takeshi)-[:ACTED_IN {roles:['Takahashi']}]->(JohnnyMnemonic),
+(Dina)-[:ACTED_IN {roles:['Jane']}]->(JohnnyMnemonic),
+(IceT)-[:ACTED_IN {roles:['J-Bone']}]->(JohnnyMnemonic),
+(RobertL)-[:DIRECTED]->(JohnnyMnemonic)
+
+CREATE (CloudAtlas:Movie {title:'Cloud Atlas', released:2012, tagline:'Everything is connected'})
+CREATE (HalleB:Person {name:'Halle Berry', born:1966})
+CREATE (JimB:Person {name:'Jim Broadbent', born:1949})
+CREATE (TomT:Person {name:'Tom Tykwer', born:1965})
+CREATE (DavidMitchell:Person {name:'David Mitchell', born:1969})
+CREATE (StefanArndt:Person {name:'Stefan Arndt', born:1961})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Zachry', 'Dr. Henry Goose', 'Isaac Sachs', 'Dermot Hoggins']}]->(CloudAtlas),
+(Hugo)-[:ACTED_IN {roles:['Bill Smoke', 'Haskell Moore', 'Tadeusz Kesselring', 'Nurse Noakes', 'Boardman Mephi', 'Old Georgie']}]->(CloudAtlas),
+(HalleB)-[:ACTED_IN {roles:['Luisa Rey', 'Jocasta Ayrs', 'Ovid', 'Meronym']}]->(CloudAtlas),
+(JimB)-[:ACTED_IN {roles:['Vyvyan Ayrs', 'Captain Molyneux', 'Timothy Cavendish']}]->(CloudAtlas),
+(TomT)-[:DIRECTED]->(CloudAtlas),
+(LillyW)-[:DIRECTED]->(CloudAtlas),
+(LanaW)-[:DIRECTED]->(CloudAtlas),
+(DavidMitchell)-[:WROTE]->(CloudAtlas),
+(StefanArndt)-[:PRODUCED]->(CloudAtlas)
+
+CREATE (TheDaVinciCode:Movie {title:'The Da Vinci Code', released:2006, tagline:'Break The Codes'})
+CREATE (IanM:Person {name:'Ian McKellen', born:1939})
+CREATE (AudreyT:Person {name:'Audrey Tautou', born:1976})
+CREATE (PaulB:Person {name:'Paul Bettany', born:1971})
+CREATE (RonH:Person {name:'Ron Howard', born:1954})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Dr. Robert Langdon']}]->(TheDaVinciCode),
+(IanM)-[:ACTED_IN {roles:['Sir Leight Teabing']}]->(TheDaVinciCode),
+(AudreyT)-[:ACTED_IN {roles:['Sophie Neveu']}]->(TheDaVinciCode),
+(PaulB)-[:ACTED_IN {roles:['Silas']}]->(TheDaVinciCode),
+(RonH)-[:DIRECTED]->(TheDaVinciCode)
+
+CREATE (VforVendetta:Movie {title:'V for Vendetta', released:2006, tagline:'Freedom! Forever!'})
+CREATE (NatalieP:Person {name:'Natalie Portman', born:1981})
+CREATE (StephenR:Person {name:'Stephen Rea', born:1946})
+CREATE (JohnH:Person {name:'John Hurt', born:1940})
+CREATE (BenM:Person {name: 'Ben Miles', born:1967})
+CREATE
+(Hugo)-[:ACTED_IN {roles:['V']}]->(VforVendetta),
+(NatalieP)-[:ACTED_IN {roles:['Evey Hammond']}]->(VforVendetta),
+(StephenR)-[:ACTED_IN {roles:['Eric Finch']}]->(VforVendetta),
+(JohnH)-[:ACTED_IN {roles:['High Chancellor Adam Sutler']}]->(VforVendetta),
+(BenM)-[:ACTED_IN {roles:['Dascomb']}]->(VforVendetta),
+(JamesM)-[:DIRECTED]->(VforVendetta),
+(LillyW)-[:PRODUCED]->(VforVendetta),
+(LanaW)-[:PRODUCED]->(VforVendetta),
+(JoelS)-[:PRODUCED]->(VforVendetta),
+(LillyW)-[:WROTE]->(VforVendetta),
+(LanaW)-[:WROTE]->(VforVendetta)
+
+CREATE (SpeedRacer:Movie {title:'Speed Racer', released:2008, tagline:'Speed has no limits'})
+CREATE (EmileH:Person {name:'Emile Hirsch', born:1985})
+CREATE (JohnG:Person {name:'John Goodman', born:1960})
+CREATE (SusanS:Person {name:'Susan Sarandon', born:1946})
+CREATE (MatthewF:Person {name:'Matthew Fox', born:1966})
+CREATE (ChristinaR:Person {name:'Christina Ricci', born:1980})
+CREATE (Rain:Person {name:'Rain', born:1982})
+CREATE
+(EmileH)-[:ACTED_IN {roles:['Speed Racer']}]->(SpeedRacer),
+(JohnG)-[:ACTED_IN {roles:['Pops']}]->(SpeedRacer),
+(SusanS)-[:ACTED_IN {roles:['Mom']}]->(SpeedRacer),
+(MatthewF)-[:ACTED_IN {roles:['Racer X']}]->(SpeedRacer),
+(ChristinaR)-[:ACTED_IN {roles:['Trixie']}]->(SpeedRacer),
+(Rain)-[:ACTED_IN {roles:['Taejo Togokahn']}]->(SpeedRacer),
+(BenM)-[:ACTED_IN {roles:['Cass Jones']}]->(SpeedRacer),
+(LillyW)-[:DIRECTED]->(SpeedRacer),
+(LanaW)-[:DIRECTED]->(SpeedRacer),
+(LillyW)-[:WROTE]->(SpeedRacer),
+(LanaW)-[:WROTE]->(SpeedRacer),
+(JoelS)-[:PRODUCED]->(SpeedRacer)
+
+CREATE (NinjaAssassin:Movie {title:'Ninja Assassin', released:2009, tagline:'Prepare to enter a secret world of assassins'})
+CREATE (NaomieH:Person {name:'Naomie Harris'})
+CREATE
+(Rain)-[:ACTED_IN {roles:['Raizo']}]->(NinjaAssassin),
+(NaomieH)-[:ACTED_IN {roles:['Mika Coretti']}]->(NinjaAssassin),
+(RickY)-[:ACTED_IN {roles:['Takeshi']}]->(NinjaAssassin),
+(BenM)-[:ACTED_IN {roles:['Ryan Maslow']}]->(NinjaAssassin),
+(JamesM)-[:DIRECTED]->(NinjaAssassin),
+(LillyW)-[:PRODUCED]->(NinjaAssassin),
+(LanaW)-[:PRODUCED]->(NinjaAssassin),
+(JoelS)-[:PRODUCED]->(NinjaAssassin)
+
+CREATE (TheGreenMile:Movie {title:'The Green Mile', released:1999, tagline:"Walk a mile you'll never forget."})
+CREATE (MichaelD:Person {name:'Michael Clarke Duncan', born:1957})
+CREATE (DavidM:Person {name:'David Morse', born:1953})
+CREATE (SamR:Person {name:'Sam Rockwell', born:1968})
+CREATE (GaryS:Person {name:'Gary Sinise', born:1955})
+CREATE (PatriciaC:Person {name:'Patricia Clarkson', born:1959})
+CREATE (FrankD:Person {name:'Frank Darabont', born:1959})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Paul Edgecomb']}]->(TheGreenMile),
+(MichaelD)-[:ACTED_IN {roles:['John Coffey']}]->(TheGreenMile),
+(DavidM)-[:ACTED_IN {roles:['Brutus "Brutal" Howell']}]->(TheGreenMile),
+(BonnieH)-[:ACTED_IN {roles:['Jan Edgecomb']}]->(TheGreenMile),
+(JamesC)-[:ACTED_IN {roles:['Warden Hal Moores']}]->(TheGreenMile),
+(SamR)-[:ACTED_IN {roles:['"Wild Bill" Wharton']}]->(TheGreenMile),
+(GaryS)-[:ACTED_IN {roles:['Burt Hammersmith']}]->(TheGreenMile),
+(PatriciaC)-[:ACTED_IN {roles:['Melinda Moores']}]->(TheGreenMile),
+(FrankD)-[:DIRECTED]->(TheGreenMile)
+
+CREATE (FrostNixon:Movie {title:'Frost/Nixon', released:2008, tagline:'400 million people were waiting for the truth.'})
+CREATE (FrankL:Person {name:'Frank Langella', born:1938})
+CREATE (MichaelS:Person {name:'Michael Sheen', born:1969})
+CREATE (OliverP:Person {name:'Oliver Platt', born:1960})
+CREATE
+(FrankL)-[:ACTED_IN {roles:['Richard Nixon']}]->(FrostNixon),
+(MichaelS)-[:ACTED_IN {roles:['David Frost']}]->(FrostNixon),
+(KevinB)-[:ACTED_IN {roles:['Jack Brennan']}]->(FrostNixon),
+(OliverP)-[:ACTED_IN {roles:['Bob Zelnick']}]->(FrostNixon),
+(SamR)-[:ACTED_IN {roles:['James Reston, Jr.']}]->(FrostNixon),
+(RonH)-[:DIRECTED]->(FrostNixon)
+
+CREATE (Hoffa:Movie {title:'Hoffa', released:1992, tagline:"He didn't want law. He wanted justice."})
+CREATE (DannyD:Person {name:'Danny DeVito', born:1944})
+CREATE (JohnR:Person {name:'John C. Reilly', born:1965})
+CREATE
+(JackN)-[:ACTED_IN {roles:['Hoffa']}]->(Hoffa),
+(DannyD)-[:ACTED_IN {roles:['Robert "Bobby" Ciaro']}]->(Hoffa),
+(JTW)-[:ACTED_IN {roles:['Frank Fitzsimmons']}]->(Hoffa),
+(JohnR)-[:ACTED_IN {roles:['Peter "Pete" Connelly']}]->(Hoffa),
+(DannyD)-[:DIRECTED]->(Hoffa)
+
+CREATE (Apollo13:Movie {title:'Apollo 13', released:1995, tagline:'Houston, we have a problem.'})
+CREATE (EdH:Person {name:'Ed Harris', born:1950})
+CREATE (BillPax:Person {name:'Bill Paxton', born:1955})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Jim Lovell']}]->(Apollo13),
+(KevinB)-[:ACTED_IN {roles:['Jack Swigert']}]->(Apollo13),
+(EdH)-[:ACTED_IN {roles:['Gene Kranz']}]->(Apollo13),
+(BillPax)-[:ACTED_IN {roles:['Fred Haise']}]->(Apollo13),
+(GaryS)-[:ACTED_IN {roles:['Ken Mattingly']}]->(Apollo13),
+(RonH)-[:DIRECTED]->(Apollo13)
+
+CREATE (Twister:Movie {title:'Twister', released:1996, tagline:"Don't Breathe. Don't Look Back."})
+CREATE (PhilipH:Person {name:'Philip Seymour Hoffman', born:1967})
+CREATE (JanB:Person {name:'Jan de Bont', born:1943})
+CREATE
+(BillPax)-[:ACTED_IN {roles:['Bill Harding']}]->(Twister),
+(HelenH)-[:ACTED_IN {roles:['Dr. Jo Harding']}]->(Twister),
+(ZachG)-[:ACTED_IN {roles:['Eddie']}]->(Twister),
+(PhilipH)-[:ACTED_IN {roles:['Dustin "Dusty" Davis']}]->(Twister),
+(JanB)-[:DIRECTED]->(Twister)
+
+CREATE (CastAway:Movie {title:'Cast Away', released:2000, tagline:'At the edge of the world, his journey begins.'})
+CREATE (RobertZ:Person {name:'Robert Zemeckis', born:1951})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Chuck Noland']}]->(CastAway),
+(HelenH)-[:ACTED_IN {roles:['Kelly Frears']}]->(CastAway),
+(RobertZ)-[:DIRECTED]->(CastAway)
+
+CREATE (OneFlewOvertheCuckoosNest:Movie {title:"One Flew Over the Cuckoo's Nest", released:1975, tagline:"If he's crazy, what does that make you?"})
+CREATE (MilosF:Person {name:'Milos Forman', born:1932})
+CREATE
+(JackN)-[:ACTED_IN {roles:['Randle McMurphy']}]->(OneFlewOvertheCuckoosNest),
+(DannyD)-[:ACTED_IN {roles:['Martini']}]->(OneFlewOvertheCuckoosNest),
+(MilosF)-[:DIRECTED]->(OneFlewOvertheCuckoosNest)
+
+CREATE (SomethingsGottaGive:Movie {title:"Something's Gotta Give", released:2003})
+CREATE (DianeK:Person {name:'Diane Keaton', born:1946})
+CREATE (NancyM:Person {name:'Nancy Meyers', born:1949})
+CREATE
+(JackN)-[:ACTED_IN {roles:['Harry Sanborn']}]->(SomethingsGottaGive),
+(DianeK)-[:ACTED_IN {roles:['Erica Barry']}]->(SomethingsGottaGive),
+(Keanu)-[:ACTED_IN {roles:['Julian Mercer']}]->(SomethingsGottaGive),
+(NancyM)-[:DIRECTED]->(SomethingsGottaGive),
+(NancyM)-[:PRODUCED]->(SomethingsGottaGive),
+(NancyM)-[:WROTE]->(SomethingsGottaGive)
+
+CREATE (BicentennialMan:Movie {title:'Bicentennial Man', released:1999, tagline:"One robot's 200 year journey to become an ordinary man."})
+CREATE (ChrisC:Person {name:'Chris Columbus', born:1958})
+CREATE
+(Robin)-[:ACTED_IN {roles:['Andrew Marin']}]->(BicentennialMan),
+(OliverP)-[:ACTED_IN {roles:['Rupert Burns']}]->(BicentennialMan),
+(ChrisC)-[:DIRECTED]->(BicentennialMan)
+
+CREATE (CharlieWilsonsWar:Movie {title:"Charlie Wilson's War", released:2007, tagline:"A stiff drink. A little mascara. A lot of nerve. Who said they couldn't bring down the Soviet empire."})
+CREATE (JuliaR:Person {name:'Julia Roberts', born:1967})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Rep. Charlie Wilson']}]->(CharlieWilsonsWar),
+(JuliaR)-[:ACTED_IN {roles:['Joanne Herring']}]->(CharlieWilsonsWar),
+(PhilipH)-[:ACTED_IN {roles:['Gust Avrakotos']}]->(CharlieWilsonsWar),
+(MikeN)-[:DIRECTED]->(CharlieWilsonsWar)
+
+CREATE (ThePolarExpress:Movie {title:'The Polar Express', released:2004, tagline:'This Holiday Season... Believe'})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Hero Boy', 'Father', 'Conductor', 'Hobo', 'Scrooge', 'Santa Claus']}]->(ThePolarExpress),
+(RobertZ)-[:DIRECTED]->(ThePolarExpress)
+
+CREATE (ALeagueofTheirOwn:Movie {title:'A League of Their Own', released:1992, tagline:'Once in a lifetime you get a chance to do something different.'})
+CREATE (Madonna:Person {name:'Madonna', born:1954})
+CREATE (GeenaD:Person {name:'Geena Davis', born:1956})
+CREATE (LoriP:Person {name:'Lori Petty', born:1963})
+CREATE (PennyM:Person {name:'Penny Marshall', born:1943})
+CREATE
+(TomH)-[:ACTED_IN {roles:['Jimmy Dugan']}]->(ALeagueofTheirOwn),
+(GeenaD)-[:ACTED_IN {roles:['Dottie Hinson']}]->(ALeagueofTheirOwn),
+(LoriP)-[:ACTED_IN {roles:['Kit Keller']}]->(ALeagueofTheirOwn),
+(RosieO)-[:ACTED_IN {roles:['Doris Murphy']}]->(ALeagueofTheirOwn),
+(Madonna)-[:ACTED_IN {roles:['"All the Way" Mae Mordabito']}]->(ALeagueofTheirOwn),
+(BillPax)-[:ACTED_IN {roles:['Bob Hinson']}]->(ALeagueofTheirOwn),
+(PennyM)-[:DIRECTED]->(ALeagueofTheirOwn)
+
+CREATE (PaulBlythe:Person {name:'Paul Blythe'})
+CREATE (AngelaScope:Person {name:'Angela Scope'})
+CREATE (JessicaThompson:Person {name:'Jessica Thompson'})
+CREATE (JamesThompson:Person {name:'James Thompson'})
+
+CREATE
+(JamesThompson)-[:FOLLOWS]->(JessicaThompson),
+(AngelaScope)-[:FOLLOWS]->(JessicaThompson),
+(PaulBlythe)-[:FOLLOWS]->(AngelaScope)
+
+CREATE
+(JessicaThompson)-[:REVIEWED {summary:'An amazing journey', rating:95}]->(CloudAtlas),
+(JessicaThompson)-[:REVIEWED {summary:'Silly, but fun', rating:65}]->(TheReplacements),
+(JamesThompson)-[:REVIEWED {summary:'The coolest football movie ever', rating:100}]->(TheReplacements),
+(AngelaScope)-[:REVIEWED {summary:'Pretty funny at times', rating:62}]->(TheReplacements),
+(JessicaThompson)-[:REVIEWED {summary:'Dark, but compelling', rating:85}]->(Unforgiven),
+(JessicaThompson)-[:REVIEWED {summary:"Slapstick redeemed only by the Robin Williams and Gene Hackman's stellar performances", rating:45}]->(TheBirdcage),
+(JessicaThompson)-[:REVIEWED {summary:'A solid romp', rating:68}]->(TheDaVinciCode),
+(JamesThompson)-[:REVIEWED {summary:'Fun, but a little far fetched', rating:65}]->(TheDaVinciCode),
+(JessicaThompson)-[:REVIEWED {summary:'You had me at Jerry', rating:92}]->(JerryMaguire)
+
+WITH TomH as a
+MATCH (a)-[:ACTED_IN]->(m)<-[:DIRECTED]-(d) RETURN a,m,d LIMIT 10;`}
+      </pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="create">CREATE</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s3">
+    <h3>Find</h3>
+    <p>Example queries for finding individual nodes.</p>
+    <ol>
+      <li>Click on any query example</li>
+      <li>Run the query from the editor</li>
+      <li>Notice the syntax pattern</li>
+      <li>Try looking for other movies or actors</li>
+    </ol>
+    <hr />
+    <p className="lead">Find the actor named "Tom Hanks"...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {'MATCH (tom {name: "Tom Hanks"}) RETURN tom'}
+      </pre>
+    </figure>
+    <p className="lead">Find the movie with title "Cloud Atlas"...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {'MATCH (cloudAtlas {title: "Cloud Atlas"}) RETURN cloudAtlas'}
+      </pre>
+    </figure>
+    <p className="lead">Find 10 people...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        MATCH (people:Person) RETURN people.name LIMIT 10
+      </pre>
+    </figure>
+    <p className="lead">Find movies released in the 1990s...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {
+          'MATCH (nineties:Movie) WHERE nineties.released >= 1990 AND nineties.released < 2000 RETURN nineties.title'
+        }
+      </pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="match">MATCH</a>{' '}
+      <a help-topic="where">WHERE</a> <a help-topic="return">RETURN</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s4">
+    <h3>Query</h3>
+    <p>Finding patterns within the graph.</p>
+    <ol>
+      <li>Actors are people who acted in movies</li>
+      <li>Directors are people who directed a movie</li>
+      <li>What other relationships exist?</li>
+    </ol>
+    <hr />
+    <p className="lead">List all Tom Hanks movies...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {
+          'MATCH (tom:Person {name: "Tom Hanks"})-[:ACTED_IN]->(tomHanksMovies) RETURN tom,tomHanksMovies'
+        }
+      </pre>
+    </figure>
+    <p className="lead">Who directed "Cloud Atlas"?</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {
+          'MATCH (cloudAtlas {title: "Cloud Atlas"})<-[:DIRECTED]-(directors) RETURN directors.name'
+        }
+      </pre>
+    </figure>
+    <p className="lead">Tom Hanks' co-actors...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {
+          'MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors) RETURN coActors.name'
+        }
+      </pre>
+    </figure>
+    <p className="lead">How people are related to "Cloud Atlas"...</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {
+          'MATCH (people:Person)-[relatedTo]-(:Movie {title: "Cloud Atlas"}) RETURN people.name, Type(relatedTo), relatedTo'
+        }
+      </pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="match">MATCH</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s5">
+    <h3>Solve</h3>
+    <p>
+      You've heard of the classic "Six Degrees of Kevin Bacon"? That is simply a
+      shortest path query called the "Bacon Path".
+    </p>
+    <ol>
+      <li>Variable length patterns</li>
+      <li>Built-in shortestPath() algorithm</li>
+    </ol>
+    <hr />
+    <p className="lead">
+      Movies and actors up to 4 "hops" away from Kevin Bacon
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (bacon:Person {name:"Kevin Bacon"})-[*1..4]-(hollywood)
+RETURN DISTINCT hollywood`}
+      </pre>
+    </figure>
+    <p className="lead">
+      Bacon path, the shortest path of any relationships to Meg Ryan
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH p=shortestPath(
+(bacon:Person {name:"Kevin Bacon"})-[*]-(meg:Person {name:"Meg Ryan"})
+)
+RETURN p`}
+      </pre>
+      <aside className="warn">
+        Note you only need to compare property values like this when first
+        creating relationships
+      </aside>
+    </figure>
+  </SidebarSlide>,
+  <SidebarSlide key="s6">
+    <h3>Recommend</h3>
+    <p>
+      Let's recommend new co-actors for Tom Hanks. A basic recommendation
+      approach is to find connections past an immediate neighborhood which are
+      themselves well connected.
+    </p>
+    <p>For Tom Hanks, that means:</p>
+    <ol>
+      <li>
+        Find actors that Tom Hanks hasn't yet worked with, but his co-actors
+        have.
+      </li>
+      <li>Find someone who can introduce Tom to his potential co-actor.</li>
+    </ol>
+    <p className="lead">
+      Extend Tom Hanks co-actors, to find co-co-actors who haven't worked with
+      Tom Hanks...
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors),
+  (coActors)-[:ACTED_IN]->(m2)<-[:ACTED_IN]-(cocoActors)
+WHERE NOT (tom)-[:ACTED_IN]->()<-[:ACTED_IN]-(cocoActors) AND tom <> cocoActors
+RETURN cocoActors.name AS Recommended, count(*) AS Strength ORDER BY Strength DESC`}
+      </pre>
+    </figure>
+    <p className="lead">Find someone to introduce Tom Hanks to Tom Cruise</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (tom:Person {name:"Tom Hanks"})-[:ACTED_IN]->(m)<-[:ACTED_IN]-(coActors),
+  (coActors)-[:ACTED_IN]->(m2)<-[:ACTED_IN]-(cruise:Person {name:"Tom Cruise"})
+RETURN tom, m, coActors, m2, cruise`}
+      </pre>
+    </figure>
+  </SidebarSlide>,
+  <SidebarSlide key="s7">
+    <h3>Clean up</h3>
+    <p>When you're done experimenting, you can remove the movie data set.</p>
+    <p>
+      Note: Nodes can't be deleted if they have relationships, so we need to
+      detach the nodes to delete the nodes.
+    </p>
+    <hr />
+    <p className="lead">
+      Delete all Movie and Person nodes, and their relationships
+    </p>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        MATCH (n) DETACH DELETE n
+      </pre>
+    </figure>
+    <p className="lead">Prove that the Movie Graph is gone</p>
+    <figure>
+      <pre className="pre-scrollable code runnable">MATCH (n) RETURN n</pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="delete">DELETE</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s8">
+    <h3>Next steps</h3>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":guide northwind-graph">Northwind Graph</a>- from RDBMS to
+        graph
+      </li>
+      <li>
+        <a data-exec=":help northwind-graph">Cypher</a>- Learn Cypher syntax
+      </li>
+      <li>
+        <DrawerExternalLink href="https://portal.graphgist.org/">
+          Explore more guides: Graph Gists Portal
+        </DrawerExternalLink>
+      </li>
+    </ul>
+    <br />
+    <h3>Documentation</h3>
+    <ul className="undecorated">
+      <li>
+        <DrawerExternalLink href="https://neo4j.com/developer/">
+          Developer resources
+        </DrawerExternalLink>
+      </li>
+      <li>
+        <ManualLink chapter="cypher-manual" page="/">
+          Neo4j Cypher Manual
+        </ManualLink>
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, category, slides }
diff --git a/src/browser/documentation/sidebar-guides/northwind-graph.tsx b/src/browser/documentation/sidebar-guides/northwind-graph.tsx
new file mode 100644
index 00000000000..743e4e23406
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/northwind-graph.tsx
@@ -0,0 +1,325 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ManualLink from 'browser-components/ManualLink'
+import { SidebarSlide } from '../../modules/Carousel/Slide'
+import { DrawerExternalLink } from 'browser-components/drawer/drawer-styled'
+
+const title = 'Northwind Graph'
+const category = 'graphExamples'
+const slides = [
+  <SidebarSlide key="s1">
+    <p className="lead">From RDBMS to Graph, using a classic dataset</p>
+    <p>
+      The <em>Northwind Graph</em> demonstrates how to migrate from a relational
+      database to Neo4j. The transformation is iterative and deliberate,
+      emphasizing the conceptual shift from relational tables to the nodes and
+      relationships of a graph.
+    </p>
+    <p>This guide will show you how to:</p>
+    <ol className="big">
+      <li>Load: create data from external CSV files</li>
+      <li>Index: index nodes based on label</li>
+      <li>Relate: transform foreign key references into data relationships</li>
+      <li>Promote: transform join records into relationships</li>
+    </ol>
+  </SidebarSlide>,
+  <SidebarSlide key="s2">
+    <h3>Product Catalog</h3>
+    <p>
+      Northwind sells food products in a few categories, provided by suppliers.
+      Let's start by loading the product catalog tables.
+    </p>
+    <p>
+      The load statements to the right require public internet access.
+      <code>LOAD CSV</code> will retrieve a CSV file from a valid URL, applying
+      a Cypher statement to each row using a named map (here we're using the
+      name `row`).
+    </p>
+    <p>
+      <img
+        src="./assets/images/northwind/product-category-supplier.png"
+        className="img-responsive"
+      />
+    </p>
+    <h4>Load records</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/products.csv" AS row
+CREATE (n:Product)
+SET n = row,
+n.unitPrice = toFloat(row.unitPrice),
+n.unitsInStock = toInteger(row.unitsInStock), n.unitsOnOrder = toInteger(row.unitsOnOrder),
+n.reorderLevel = toInteger(row.reorderLevel), n.discontinued = (row.discontinued <> "0")`}
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/categories.csv" AS row
+CREATE (n:Category)
+SET n = row`}
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/suppliers.csv" AS row
+CREATE (n:Supplier)
+SET n = row`}
+      </pre>
+    </figure>
+    <h4>Create indexes</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        CREATE INDEX ON :Product(productID)
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        CREATE INDEX ON :Category(categoryID)
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        CREATE INDEX ON :Supplier(supplierID)
+      </pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="load-csv">LOAD CSV</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s3">
+    <h3>Product Catalog Graph</h3>
+    <p>
+      The products, categories and suppliers are related through foreign key
+      references. Let's promote those to data relationships to realize the
+      graph.
+    </p>
+    <p>
+      <img
+        src="./assets/images/northwind/product-graph.png"
+        className="img-responsive"
+      />
+    </p>
+    <h4>Create data relationships</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (p:Product),(c:Category)
+WHERE p.categoryID = c.categoryID
+CREATE (p)-[:PART_OF]->(c)`}
+      </pre>
+      <aside className="warn">
+        Note you only need to compare property values like this when first
+        creating relationships
+      </aside>
+      <figcaption>
+        Calculate join, materialize relationship. (See{' '}
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="http://neo4j.com/developer/guide-importing-data-and-etl"
+        >
+          {' '}
+          importing guide
+        </a>{' '}
+        for more details)
+      </figcaption>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (p:Product),(s:Supplier)
+WHERE p.supplierID = s.supplierID
+CREATE (s)-[:SUPPLIES]->(p)`}
+      </pre>
+      <aside className="warn">
+        Note you only need to compare property values like this when first
+        creating relationships
+      </aside>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="match">MATCH</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s4">
+    <h3>Querying Product Catalog Graph</h3>
+    <p>Lets try some queries using patterns.</p>
+    <p>
+      <img
+        src="./assets/images/northwind/product-graph.png"
+        className="img-responsive"
+      />
+    </p>
+    <h4>Query using patterns</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (s:Supplier)-->(:Product)-->(c:Category)
+RETURN s.companyName as Company, collect(distinct c.categoryName) as Categories`}
+      </pre>
+      <figcaption>
+        List the product categories provided by each supplier.
+      </figcaption>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (c:Category {categoryName:"Produce"})<--(:Product)<--(s:Supplier)
+RETURN DISTINCT s.companyName as ProduceSuppliers`}
+      </pre>
+      <figcaption>Find the produce suppliers.</figcaption>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="match">MATCH</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s5">
+    <h3>Customer Orders</h3>
+    <p>
+      Northwind customers place orders which may detail multiple products.
+      <img
+        src="./assets/images/northwind/customer-orders.png"
+        className="img-responsive"
+      />
+    </p>
+    <h4>Load and index records</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/customers.csv" AS row
+CREATE (n:Customer)
+SET n = row`}
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/orders.csv" AS row
+CREATE (n:Order)
+SET n = row`}
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        CREATE INDEX ON :Customer(customerID)
+      </pre>
+    </figure>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        CREATE INDEX ON :Order(orderID)
+      </pre>
+    </figure>
+    <h4>Create data relationships</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (c:Customer),(o:Order)
+WHERE c.customerID = o.customerID
+CREATE (c)-[:PURCHASED]->(o)`}
+      </pre>
+      <aside className="warn">
+        Note you only need to compare property values like this when first
+        creating relationships
+      </aside>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="load-csv">LOAD CSV</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s6">
+    <h3>Customer Order Graph</h3>
+    <p>
+      Notice that Order Details are always part of an Order and that they{' '}
+      <i>relate</i> the Order to a Product — they're a join table. Join tables
+      are always a sign of a data relationship, indicating shared information
+      between two other records.
+    </p>
+    <p>
+      Here, we'll directly promote each OrderDetail record into a relationship
+      in the graph.
+      <img
+        src="./assets/images/northwind/order-graph.png"
+        className="img-responsive"
+      />
+    </p>
+    <h4>Load and index records</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`LOAD CSV WITH HEADERS FROM "http://data.neo4j.com/northwind/order-details.csv" AS row
+MATCH (p:Product), (o:Order)
+WHERE p.productID = row.productID AND o.orderID = row.orderID
+CREATE (o)-[details:ORDERS]->(p)
+SET details = row,
+details.quantity = toInteger(row.quantity)`}
+      </pre>
+      <aside className="warn">
+        Note you only need to compare property values like this when first
+        creating relationships
+      </aside>
+    </figure>
+    <h4>Query using patterns</h4>
+    <figure>
+      <pre className="pre-scrollable code runnable">
+        {`MATCH (cust:Customer)-[:PURCHASED]->(:Order)-[o:ORDERS]->(p:Product),
+  (p)-[:PART_OF]->(c:Category {categoryName:"Produce"})
+RETURN DISTINCT cust.contactName as CustomerName, SUM(o.quantity) AS TotalProductsPurchased`}
+      </pre>
+    </figure>
+    <hr />
+    <p>
+      <small>:help</small> <a help-topic="cypher">cypher</a>{' '}
+      <a help-topic="load-csv">LOAD CSV</a>
+    </p>
+  </SidebarSlide>,
+  <SidebarSlide key="s7">
+    <h3>Next steps</h3>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":guide movie-graph">Movie Graph</a> - actors & movies
+      </li>
+      <li>
+        <a data-exec=":guide cypher">Cypher</a> - query language fundamentals
+      </li>
+    </ul>
+    <br />
+    <h3>Reference</h3>
+    <ul className="undecorated">
+      <li>
+        <DrawerExternalLink href="https://neo4j.com/developer/guide-importing-data-and-etl/">
+          Full Northwind import example
+        </DrawerExternalLink>
+      </li>
+      <li>
+        <DrawerExternalLink href="https://neo4j.com/developer/">
+          Developer resources
+        </DrawerExternalLink>
+      </li>
+      <li>
+        <ManualLink chapter="cypher-manual" page="/">
+          Neo4j Cypher Manual
+        </ManualLink>
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, category, slides }
diff --git a/src/browser/documentation/sidebar-guides/styled.tsx b/src/browser/documentation/sidebar-guides/styled.tsx
new file mode 100644
index 00000000000..19015856d08
--- /dev/null
+++ b/src/browser/documentation/sidebar-guides/styled.tsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const NoBulletsUl = styled.div`
+  list-style-type: none;
+`
+export const BulletsInsideLi = styled.li`
+  list-style-position: inside;
+`
+export const MarginTopLi = styled.li`
+  margin-top: 15px;
+`
+
+export const MarginTop = styled.div`
+  margin-top: 5px;
+`
+
+export const LinkContainer = styled.div`
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+`
diff --git a/src/browser/components/drawer/index.ts b/src/browser/documentation/sidebar-guides/unfound.tsx
similarity index 51%
rename from src/browser/components/drawer/index.ts
rename to src/browser/documentation/sidebar-guides/unfound.tsx
index e50ce497f07..9810e16aa08 100644
--- a/src/browser/components/drawer/index.ts
+++ b/src/browser/documentation/sidebar-guides/unfound.tsx
@@ -18,24 +18,29 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {
-  Drawer,
-  DrawerBody,
-  DrawerHeader,
-  DrawerSubHeader,
-  DrawerSection,
-  DrawerSectionBody,
-  DrawerToppedHeader,
-  DrawerFooter
-} from './Drawer'
+import { SidebarSlide } from 'browser/modules/Carousel/Slide'
+import React from 'react'
+const title = 'Not found'
 
-export {
-  Drawer,
-  DrawerBody,
-  DrawerHeader,
-  DrawerSubHeader,
-  DrawerSection,
-  DrawerSectionBody,
-  DrawerToppedHeader,
-  DrawerFooter
-}
+const slides = [
+  <SidebarSlide key="first">
+    <p>Apologies, but there doesn't seem to be any content about that.</p>
+    <h5>Try:</h5>
+    <ul className="undecorated">
+      <li>
+        <a data-exec=":help">:help</a> - for general help about using Neo4j
+        Browser
+      </li>
+      <li>
+        <a data-exec=":guide intro">:guide intro</a> - to see a few available
+        guides
+      </li>
+      <li>
+        <a href="https://neo4j.com/docs/">Neo4j Documentation</a> - for detailed
+        information about Neo4j
+      </li>
+    </ul>
+  </SidebarSlide>
+]
+
+export default { title, slides }
diff --git a/src/browser/icons/back-arrow.svg b/src/browser/icons/back-arrow.svg
new file mode 100644
index 00000000000..5bebe3a6386
--- /dev/null
+++ b/src/browser/icons/back-arrow.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100%" height="100%" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-0.630665,-0.614711,0.590359,-0.605681,8.97079,19.8049)">
+        <path
+            d="M14.352,4.428L2.53,16.25C2.237,16.543 1.763,16.543 1.47,16.25C1.177,15.958 1.177,15.483 1.47,15.19L13.292,3.368L2.749,3.368C2.335,3.368 1.999,3.032 1.999,2.618C1.999,2.203 2.335,1.868 2.749,1.868L15.102,1.868C15.204,1.868 15.301,1.888 15.389,1.925C15.476,1.96 15.557,2.013 15.628,2.082C15.631,2.086 15.634,2.089 15.638,2.092C15.707,2.163 15.76,2.244 15.795,2.331C15.832,2.419 15.852,2.516 15.852,2.618L15.852,14.971C15.852,15.385 15.517,15.721 15.102,15.721C14.688,15.721 14.352,15.385 14.352,14.971L14.352,4.428Z"
+            style="fill:currentColor;fill-rule:nonzero;" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/browser/icons/external-link.svg b/src/browser/icons/external-link.svg
new file mode 100644
index 00000000000..1796a1d0cf8
--- /dev/null
+++ b/src/browser/icons/external-link.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'>
+    <path
+        d='M14.3524 4.42834L2.53033 16.2504C2.23744 16.5433 1.76256 16.5433 1.46967 16.2504C1.17678 15.9575 1.17678 15.4826 1.46967 15.1897L13.2917 3.36768H2.74941C2.3352 3.36768 1.99941 3.03189 1.99941 2.61768C1.99941 2.20346 2.3352 1.86768 2.74941 1.86768H15.1022H15.1024C15.204 1.86768 15.301 1.88792 15.3894 1.92458C15.4759 1.96035 15.557 2.01298 15.6278 2.08247C15.6311 2.08571 15.6343 2.08897 15.6376 2.09226C15.707 2.16302 15.7597 2.24414 15.7954 2.33059C15.8321 2.41902 15.8524 2.51598 15.8524 2.61768V14.9706C15.8524 15.3848 15.5166 15.7206 15.1024 15.7206C14.6881 15.7206 14.3524 15.3848 14.3524 14.9706V4.42834Z'
+        fill='%2368BDF4' />
+</svg>
\ No newline at end of file
diff --git a/src/browser/icons/monitor-play.svg b/src/browser/icons/monitor-play.svg
new file mode 100644
index 00000000000..794fde86e03
--- /dev/null
+++ b/src/browser/icons/monitor-play.svg
@@ -0,0 +1,19 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M15.3613 23.753H9.36133L10.1113 19.253H14.6113L15.3613 23.753Z" stroke=currentColor stroke-width="1.5"
+            stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M7.11133 23.753H17.6113" stroke=currentColor stroke-width="1.5" stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M20.6113 1.253H4.11133C2.45447 1.253 1.11133 2.59615 1.11133 4.253V16.253C1.11133 17.9099 2.45447 19.253 4.11133 19.253H20.6113C22.2682 19.253 23.6113 17.9099 23.6113 16.253V4.253C23.6113 2.59615 22.2682 1.253 20.6113 1.253Z"
+            stroke=currentColor stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M9.61133 13.429V7.078C9.61134 6.94527 9.64657 6.81492 9.71343 6.70026C9.78029 6.58559 9.87638 6.49073 9.99189 6.42535C10.1074 6.35996 10.2382 6.32641 10.3709 6.3281C10.5036 6.3298 10.6335 6.36669 10.7473 6.435L16.0393 9.61C16.1506 9.67659 16.2426 9.77087 16.3066 9.88365C16.3705 9.99643 16.4041 10.1239 16.4041 10.2535C16.4041 10.3831 16.3705 10.5106 16.3066 10.6233C16.2426 10.7361 16.1506 10.8304 16.0393 10.897L10.7473 14.072C10.6335 14.1403 10.5036 14.1772 10.3709 14.1789C10.2382 14.1806 10.1074 14.147 9.99189 14.0817C9.87638 14.0163 9.78029 13.9214 9.71343 13.8067C9.64657 13.6921 9.61134 13.5617 9.61133 13.429Z"
+            stroke=currentColor stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="24" height="24" fill=currentColor transform="translate(0.361328 0.5)" />
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/browser/init.ts b/src/browser/init.ts
index 0295669fc1b..adc90185e4e 100644
--- a/src/browser/init.ts
+++ b/src/browser/init.ts
@@ -26,6 +26,7 @@ import './styles/font-awesome.min.css'
 import './styles/fira-code.css'
 import './styles/open-sans.css'
 import './styles/util-classes.css'
+import './styles/workaround-monaco-scroll-bug.css'
 import '@relate-by-ui/css/semantic/dist/relate-by.min.css'
 
 // non web env (just for tests)
diff --git a/src/browser/modules/Carousel/Carousel.tsx b/src/browser/modules/Carousel/Carousel.tsx
index d3016f8919d..b1b25929c20 100644
--- a/src/browser/modules/Carousel/Carousel.tsx
+++ b/src/browser/modules/Carousel/Carousel.tsx
@@ -46,7 +46,7 @@ export default function Carousel({
   originFrameId,
   initialSlide = 1,
   slides = []
-}: any) {
+}: any): JSX.Element {
   const [visibleSlide, setVisibleSlide] = useState(() => {
     if (initialSlide <= slides.length) {
       return initialSlide - 1
diff --git a/src/browser/modules/Carousel/Slide.tsx b/src/browser/modules/Carousel/Slide.tsx
index 563ec950f5b..91ca4728e38 100644
--- a/src/browser/modules/Carousel/Slide.tsx
+++ b/src/browser/modules/Carousel/Slide.tsx
@@ -18,39 +18,68 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react'
+// The reason we have this file is to define classnames
+// used in our templates and externally defined guides
 import styles from './style.less'
-import { StyledSlide } from './styled'
-
-const Slide = React.forwardRef<any, any>(({ children, content, html }, ref) => {
-  if (children) {
-    return (
-      <StyledSlide ref={ref} className={styles.slide}>
-        {children}
-      </StyledSlide>
-    )
-  }
+import { StyledSidebarSlide, StyledSlide } from './styled'
 
-  if (content) {
-    return (
-      <StyledSlide ref={ref} className={styles.slide}>
-        {content}
-      </StyledSlide>
-    )
-  }
+type SlideBaseProps = {
+  children?: React.ReactNode
+  content?: JSX.Element
+  html?: string
+}
 
-  if (html) {
-    return (
-      <StyledSlide
-        ref={ref}
-        className={styles.slide}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    )
-  }
+type SlideProps = SlideBaseProps & {
+  isSidebarSlide?: boolean
+}
+
+const Slide = React.forwardRef(
+  (
+    { children, content, html, isSidebarSlide }: SlideProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const SlideComponent = isSidebarSlide ? StyledSidebarSlide : StyledSlide
+
+    if (children) {
+      return (
+        <SlideComponent ref={ref} className={styles.slide}>
+          {children}
+        </SlideComponent>
+      )
+    }
+
+    if (content) {
+      return (
+        <SlideComponent ref={ref} className={styles.slide}>
+          {content}
+        </SlideComponent>
+      )
+    }
 
-  return null
-})
+    if (html) {
+      return (
+        <SlideComponent
+          ref={ref}
+          className={styles.slide}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      )
+    }
+
+    return null
+  }
+)
 
 Slide.displayName = 'Slide'
 
 export default Slide
+
+const SidebarSlide = React.forwardRef(
+  (props: SlideBaseProps, ref: React.Ref<HTMLDivElement>) => (
+    <Slide ref={ref} isSidebarSlide {...props} />
+  )
+)
+
+SidebarSlide.displayName = 'SidebarSlide'
+
+export { SidebarSlide }
diff --git a/src/browser/modules/Carousel/style.less b/src/browser/modules/Carousel/style.less
index cd87d40ad4e..480f68f2c41 100644
--- a/src/browser/modules/Carousel/style.less
+++ b/src/browser/modules/Carousel/style.less
@@ -85,7 +85,7 @@
     }
     &.runnable {
       cursor: pointer;
-      border: transparent;
+      border: 2px solid transparent;
       border-radius: 2px;
       background-color: rgba(0, 0, 0, 0.1);
     }
@@ -309,6 +309,11 @@
       font-variant-ligatures: none !important;
     }
   }
+  & a [data-populate],
+  [data-exec] {
+    cursor: pointer;
+  }
+
   & pre {
     word-break: break-all;
     word-wrap: break-word;
@@ -318,6 +323,7 @@
   & code {
     color: #fd766e;
     border-radius: 2px;
+    background-color: transparent;
 
     a {
       color: #fd766e !important;
@@ -424,9 +430,18 @@
       margin: 6px 0 20px 0;
       overflow: hidden;
     }
-   
   }
-  .padding5 {padding: 5px;}
-  .padding30  {padding-top: 30px;} 
-  .table-padding {padding-top: 10px;}
+  .padding5 {
+    padding: 5px;
+  }
+  .padding30 {
+    padding-top: 30px;
+  }
+  .table-padding {
+    padding-top: 10px;
+  }
+}
+
+.undecorated {
+  list-style: none;
 }
diff --git a/src/browser/modules/Carousel/styled.tsx b/src/browser/modules/Carousel/styled.tsx
index 7937f228a40..d891bb6a48f 100644
--- a/src/browser/modules/Carousel/styled.tsx
+++ b/src/browser/modules/Carousel/styled.tsx
@@ -20,6 +20,7 @@
 
 import styled from 'styled-components'
 import { bounceRight } from 'browser-styles/animations'
+import { dark } from 'browser-styles/themes'
 
 export const StyledCarousel: any = styled.div`
   padding-bottom: 20px;
@@ -48,9 +49,9 @@ export const StyledCarouselButtonContainer = styled.div`
   justify-content: center;
   position: absolute;
   bottom: 0;
+  left: 0;
   z-index: 10;
   border-top: ${props => props.theme.inFrameBorder};
-  margin-left: -40px;
   height: 39px;
   width: 100%;
 
@@ -289,6 +290,7 @@ export const StyledSlide = styled.div`
   }
   &.slide .key {
     background-color: ${props => props.theme.preBackground};
+    color: ${props => props.theme.preText};
     border-radius: 3px;
     font-size: 12px;
     display: inline-block;
@@ -301,4 +303,139 @@ export const StyledSlide = styled.div`
   &.slide .teaser {
     background-color: ${props => props.theme.teaserCardBackground} !important;
   }
+
+  &.slide input {
+    color: ${props => props.theme.inputText};
+  }
+`
+
+export const StyledSidebarSlide = styled.div.attrs({
+  className: 'slide' /* added to get styling from less.css */
+})`
+  color: ${dark.primaryText};
+  & p.lead,
+  .title,
+  .subtitle,
+  .content > p,
+  .table-help {
+    color: ${dark.primaryText} !important;
+    line-height: 1.3;
+
+    th {
+      padding-right: 20px;
+      text-align: left;
+    }
+
+    &--header {
+      th {
+        border-bottom: ${dark.topicBorder};
+        font-size: 2rem;
+        padding: 15px 0 0 0;
+      }
+
+      &:first-child {
+        th {
+          padding-top: 0;
+        }
+      }
+    }
+
+    &--subheader {
+      th {
+        border-bottom: ${dark.topicBorder};
+        font-size: 1.5rem;
+        padding: 10px 0 0 0;
+      }
+
+      &:first-child {
+        th {
+          padding-top: 0;
+        }
+      }
+    }
+
+    &--commands {
+      margin-top: 2rem;
+
+      td {
+        padding: 3px 10px 3px 0;
+      }
+    }
+
+    &--keys {
+      th {
+        border-bottom: ${dark.topicBorder};
+      }
+      td {
+        padding: 3px 10px 3px 0;
+      }
+    }
+  }
+  & a {
+    color: ${dark.link};
+    text-decoration: ${props =>
+      props.theme.name === 'dark' ? 'underline' : 'none'};
+  }
+  & kbd {
+    color: ${dark.primaryBackground} !important; /* inverted */
+    background-color: ${dark.primaryText} !important;
+  }
+  & .content > pre {
+    background-color: ${dark.secondaryBackground};
+    color: ${dark.preText};
+  }
+  & pre.runnable {
+    background-color: ${dark.preBackground};
+    color: ${dark.preText};
+  }
+  & pre.content {
+    background-color: ${dark.secondaryBackground};
+    color: ${dark.preText};
+  }
+  & a[help-topic],
+  a[play-topic],
+  a[server-topic],
+  a[exec-topic] {
+    background-color: ${dark.topicBackground} !important;
+    color: #5ca6d9;
+  }
+  & button [help-topic],
+  button [play-topic],
+  button [server-topic],
+  button [exec-topic] {
+    background-color: ${dark.primaryButtonBackground};
+    color: ${dark.primaryButtonText};
+  }
+  &.slide .code {
+    background-color: transparent;
+  }
+  &.slide .key {
+    background-color: ${dark.preBackground};
+    color: ${dark.preText};
+    border-radius: 3px;
+    font-size: 12px;
+    display: inline-block;
+    padding: 0 6px;
+  }
+
+  .has-carousel & {
+    overflow: visible;
+  }
+  &.slide .teaser {
+    background-color: ${dark.teaserCardBackground} !important;
+  }
+  &.slide hr {
+    border-top: ${dark.drawerSeparator};
+  }
+
+  &.slide ul,
+  &.slide ol {
+    list-style-position: outside;
+    padding-left: 1.2em;
+    margin-top: 0.5em;
+  }
+
+  &.slide input {
+    color: ${dark.inputText};
+  }
 `
diff --git a/src/browser/modules/ClickToCode/__snapshots__/index.test.tsx.snap b/src/browser/modules/ClickToCode/__snapshots__/index.test.tsx.snap
index 00f13dac53b..75a97d01330 100644
--- a/src/browser/modules/ClickToCode/__snapshots__/index.test.tsx.snap
+++ b/src/browser/modules/ClickToCode/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`ClickToCode does not render if no children 1`] = `<div />`;
 exports[`ClickToCode renders all children 1`] = `
 <div>
   <code
-    class="sc-bdVaJa biJQaZ"
+    class="sc-fzsDOv gpNFQu"
   >
     <div>
       <span>
@@ -20,7 +20,7 @@ exports[`ClickToCode renders all children 1`] = `
 exports[`ClickToCode renders children as code if no code is provided 1`] = `
 <div>
   <code
-    class="sc-bdVaJa biJQaZ"
+    class="sc-fzsDOv gpNFQu"
   >
     hellohi!
   </code>
@@ -30,7 +30,7 @@ exports[`ClickToCode renders children as code if no code is provided 1`] = `
 exports[`ClickToCode renders code as the code when code is available 1`] = `
 <div>
   <code
-    class="sc-bdVaJa biJQaZ"
+    class="sc-fzsDOv gpNFQu"
   >
     hello
   </code>
diff --git a/src/browser/modules/DBMSInfo/DBMSInfo.tsx b/src/browser/modules/DBMSInfo/DBMSInfo.tsx
index 89b7a86a63a..a63088f3c96 100644
--- a/src/browser/modules/DBMSInfo/DBMSInfo.tsx
+++ b/src/browser/modules/DBMSInfo/DBMSInfo.tsx
@@ -31,12 +31,16 @@ import { getGraphStyleData } from 'shared/modules/grass/grassDuck'
 import { LabelItems, RelationshipItems, PropertyItems } from './MetaItems'
 import { UserDetails } from './UserDetails'
 import DatabaseKernelInfo from './DatabaseKernelInfo'
-import { Drawer, DrawerBody, DrawerHeader } from 'browser-components/drawer'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerHeader
+} from 'browser-components/drawer/drawer-styled'
 import { DatabaseSelector } from './DatabaseSelector'
 import { getUseDb } from 'shared/modules/connections/connectionsDuck'
 import { getDatabases } from 'shared/modules/dbMeta/dbMetaDuck'
 
-export function DBMSInfo(props: any) {
+export function DBMSInfo(props: any): JSX.Element {
   const moreStep = 50
   const [labelsMax, setLabelsMax] = useState(moreStep)
   const [relationshipsMax, setRelationshipsMax] = useState(moreStep)
diff --git a/src/browser/modules/DBMSInfo/DatabaseKernelInfo.tsx b/src/browser/modules/DBMSInfo/DatabaseKernelInfo.tsx
index 91ccd1040d1..4608e8fd6c5 100644
--- a/src/browser/modules/DBMSInfo/DatabaseKernelInfo.tsx
+++ b/src/browser/modules/DBMSInfo/DatabaseKernelInfo.tsx
@@ -39,7 +39,7 @@ import {
   DrawerSection,
   DrawerSectionBody,
   DrawerSubHeader
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import {
   StyledTable,
   StyledKey,
diff --git a/src/browser/modules/DBMSInfo/DatabaseSelector.tsx b/src/browser/modules/DBMSInfo/DatabaseSelector.tsx
index ab62a3028ed..5b80e782004 100644
--- a/src/browser/modules/DBMSInfo/DatabaseSelector.tsx
+++ b/src/browser/modules/DBMSInfo/DatabaseSelector.tsx
@@ -24,7 +24,7 @@ import {
   DrawerSection,
   DrawerSubHeader,
   DrawerSectionBody
-} from 'browser-components/drawer/index'
+} from 'browser-components/drawer/drawer-styled'
 import { uniqBy } from 'lodash-es'
 import { escapeCypherIdentifier } from 'services/utils'
 
diff --git a/src/browser/modules/DBMSInfo/MetaItems.tsx b/src/browser/modules/DBMSInfo/MetaItems.tsx
index 347427a601c..d36622bc8c4 100644
--- a/src/browser/modules/DBMSInfo/MetaItems.tsx
+++ b/src/browser/modules/DBMSInfo/MetaItems.tsx
@@ -24,7 +24,7 @@ import {
   DrawerSubHeader,
   DrawerSection,
   DrawerSectionBody
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import {
   StyledLabel,
   StyledRelationship,
diff --git a/src/browser/modules/DBMSInfo/UserDetails.tsx b/src/browser/modules/DBMSInfo/UserDetails.tsx
index d61051038b6..b44015caef4 100644
--- a/src/browser/modules/DBMSInfo/UserDetails.tsx
+++ b/src/browser/modules/DBMSInfo/UserDetails.tsx
@@ -25,7 +25,7 @@ import {
   DrawerSubHeader,
   DrawerSection,
   DrawerSectionBody
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import { StyledTable, StyledKey, StyledValue, Link } from './styled'
 
 export class UserDetails extends Component<any> {
diff --git a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap
index bd4bdb789cd..6a30703065f 100644
--- a/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap
+++ b/src/browser/modules/DBMSInfo/__snapshots__/MetaItems.test.tsx.snap
@@ -3,15 +3,15 @@
 exports[`LabelItems renders empty 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Node Labels
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <p>
         There are no labels in database
@@ -24,30 +24,30 @@ exports[`LabelItems renders empty 1`] = `
 exports[`LabelItems renders labels 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Node Labels
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <div
-        class="sc-dnqmqq sc-iwsKbI kcQYkx"
+        class="sc-gqjmRU sc-VigVT dvKSlR"
         data-testid="sidebarMetaItem"
       >
         *
       </div>
       <div
-        class="sc-dnqmqq sc-iwsKbI kcQYkx"
+        class="sc-gqjmRU sc-VigVT dvKSlR"
         data-testid="sidebarMetaItem"
       >
         MyLabel
       </div>
       <div
-        class="sc-dnqmqq sc-iwsKbI kcQYkx"
+        class="sc-gqjmRU sc-VigVT dvKSlR"
         data-testid="sidebarMetaItem"
       >
         MyLabel2
@@ -60,15 +60,15 @@ exports[`LabelItems renders labels 1`] = `
 exports[`PropertyItems renders empty 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Property Keys
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <p>
         There are no properties in database
@@ -81,24 +81,24 @@ exports[`PropertyItems renders empty 1`] = `
 exports[`PropertyItems renders properties 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Property Keys
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <div
-        class="sc-dnqmqq sc-gqjmRU afICD"
+        class="sc-gqjmRU sc-fjdhpX diFcOZ"
         data-testid="sidebarMetaItem"
       >
         prop1
       </div>
       <div
-        class="sc-dnqmqq sc-gqjmRU afICD"
+        class="sc-gqjmRU sc-fjdhpX diFcOZ"
         data-testid="sidebarMetaItem"
       >
         prop2
@@ -111,15 +111,15 @@ exports[`PropertyItems renders properties 1`] = `
 exports[`RelationshipItems renders empty 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Relationship Types
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <p>
         No relationships in database
@@ -132,30 +132,30 @@ exports[`RelationshipItems renders empty 1`] = `
 exports[`RelationshipItems renders relationshipTypes 1`] = `
 <div>
   <div
-    class="sc-ifAKCX kHWkUt"
+    class="sc-EHOje ggEejq"
   >
     <h5
-      class="sc-bxivhb jqgGlu"
+      class="sc-ifAKCX oCshM"
     >
       Relationship Types
     </h5>
     <div
-      class="sc-EHOje fyzZhj"
+      class="sc-bZQynM hxqGOu"
     >
       <div
-        class="sc-dnqmqq sc-gZMcBi hmKQnQ"
+        class="sc-gqjmRU sc-jTzLTM gcOkiq"
         data-testid="sidebarMetaItem"
       >
         *
       </div>
       <div
-        class="sc-dnqmqq sc-gZMcBi hmKQnQ"
+        class="sc-gqjmRU sc-jTzLTM gcOkiq"
         data-testid="sidebarMetaItem"
       >
         MY_TYPE
       </div>
       <div
-        class="sc-dnqmqq sc-gZMcBi hmKQnQ"
+        class="sc-gqjmRU sc-jTzLTM gcOkiq"
         data-testid="sidebarMetaItem"
       >
         MY_TYPE2
diff --git a/src/browser/modules/Docs/Docs.tsx b/src/browser/modules/Docs/Docs.tsx
index 331a4f2f391..951a4c826ae 100644
--- a/src/browser/modules/Docs/Docs.tsx
+++ b/src/browser/modules/Docs/Docs.tsx
@@ -26,17 +26,29 @@ import Slide from '../Carousel/Slide'
 import MdxSlide from './MDX/MdxSlide'
 import { splitMdxSlides } from './MDX/splitMdx'
 
+type DocsProps = {
+  slides?: JSX.Element[] | null
+  content?: JSX.Element | null
+  html?: string
+  mdx?: string
+  initialSlide?: number
+  onSlide?: Function
+  lastUpdate?: number
+  originFrameId?: string
+  withDirectives?: true
+}
+
 export default function Docs({
   slides,
   content,
   html,
   mdx,
-  withDirectives,
   initialSlide,
   onSlide,
   originFrameId,
+  withDirectives = true,
   lastUpdate
-}: any) {
+}: DocsProps): JSX.Element | null {
   const [stateSlides, setStateSlides] = useState<JSX.Element[]>([])
 
   useEffect(() => {
@@ -68,15 +80,13 @@ export default function Docs({
       return
     }
 
-    if (withDirectives) {
-      slide = <Directives originFrameId={originFrameId} content={slide} />
-    }
+    slide = <Directives originFrameId={originFrameId} content={slide} />
     setStateSlides([slide])
 
     if (onSlide) {
       onSlide({ hasPrev: false, hasNext: false, slideIndex: 0 })
     }
-  }, [slides, content, html, withDirectives, lastUpdate])
+  }, [slides, content, html, lastUpdate])
 
   if (stateSlides.length > 1) {
     return (
diff --git a/src/browser/modules/Docs/MDX/MdxSlide.tsx b/src/browser/modules/Docs/MDX/MdxSlide.tsx
index 739b0ed27ac..68310e0b269 100644
--- a/src/browser/modules/Docs/MDX/MdxSlide.tsx
+++ b/src/browser/modules/Docs/MDX/MdxSlide.tsx
@@ -55,8 +55,8 @@ const MdxRow = ({ row = '' }) => (
   </StyledRow>
 )
 
-const MdxSlide = ({ mdx = '' }) => (
-  <Slide>
+const MdxSlide = ({ mdx = '', isSidebarSlide = false }) => (
+  <Slide isSidebarSlide={isSidebarSlide}>
     <StyledSlide>
       {splitMdxRows(mdx).map((row, index) => (
         <MdxRow key={index} row={row} />
diff --git a/src/browser/modules/Editor/Monaco.tsx b/src/browser/modules/Editor/Monaco.tsx
index f233f414375..f779ceba6d6 100644
--- a/src/browser/modules/Editor/Monaco.tsx
+++ b/src/browser/modules/Editor/Monaco.tsx
@@ -40,7 +40,7 @@ import { Bus } from 'suber'
 
 import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
 import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
-import { NotificationPosition, QueryResult } from 'neo4j-driver'
+import { QueryResult } from 'neo4j-driver'
 
 const shouldCheckForHints = (code: string) =>
   code.trim().length > 0 &&
diff --git a/src/browser/modules/GuideCarousel/GuideCarousel.tsx b/src/browser/modules/GuideCarousel/GuideCarousel.tsx
new file mode 100644
index 00000000000..18d3a8c82b7
--- /dev/null
+++ b/src/browser/modules/GuideCarousel/GuideCarousel.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useEffect } from 'react'
+import Directives from 'browser-components/Directives'
+import { CarouselButton } from 'browser-components/buttons'
+import {
+  SlidePreviousIcon,
+  SlideNextIcon
+} from 'browser-components/icons/Icons'
+import {
+  GuideButtonContainers,
+  CarouselIndicatorActive,
+  CarouselIndicatorInactive,
+  StyledCarousel,
+  StyledCarouselButtonContainer,
+  StyledCarouselButtonContainerInner,
+  StyledCarouselCount,
+  StyledUl,
+  GuideNavButton
+} from '../Sidebar/styled'
+
+type GuideCarouselProps = {
+  slides: JSX.Element[]
+  currentSlideIndex: number
+  scrollToTop?: () => void
+  gotoSlide: (slideIndex: number) => void
+}
+
+function GuidesCarousel({
+  slides,
+  currentSlideIndex,
+  gotoSlide,
+  scrollToTop = () => undefined
+}: GuideCarouselProps): JSX.Element {
+  const currentSlide = slides[currentSlideIndex]
+  const onFirstSlide = currentSlideIndex === 0
+  const onLastSlide = currentSlideIndex === slides.length - 1
+  function nextSlide() {
+    if (!onLastSlide) {
+      gotoSlide(currentSlideIndex + 1)
+    }
+  }
+
+  function prevSlide() {
+    if (!onFirstSlide) {
+      gotoSlide(currentSlideIndex - 1)
+    }
+  }
+
+  function onKeyUp(e: React.KeyboardEvent) {
+    if (e.key === 'ArrowLeft') {
+      prevSlide()
+    }
+    if (e.key === 'ArrowRight') {
+      nextSlide()
+    }
+  }
+
+  useEffect(() => {
+    // As we progress in the slides, scroll to top
+    scrollToTop()
+  }, [scrollToTop, currentSlideIndex])
+
+  const moreThanOneSlide = slides.length > 1
+
+  return (
+    <StyledCarousel onKeyUp={onKeyUp}>
+      <Directives content={currentSlide} />
+      {moreThanOneSlide && (
+        <>
+          <GuideButtonContainers>
+            <GuideNavButton onClick={prevSlide} disabled={onFirstSlide}>
+              Previous
+            </GuideNavButton>
+            <GuideNavButton onClick={nextSlide} disabled={onLastSlide}>
+              Next
+            </GuideNavButton>
+          </GuideButtonContainers>
+          <StyledCarouselButtonContainer>
+            <StyledCarouselButtonContainerInner>
+              <StyledCarouselCount>
+                {`${currentSlideIndex + 1} / ${slides.length}`}
+              </StyledCarouselCount>
+              <CarouselButton
+                className="previous-slide"
+                disabled={onFirstSlide}
+                onClick={prevSlide}
+              >
+                <SlidePreviousIcon />
+              </CarouselButton>
+              <StyledUl>
+                {slides.map((_, i) =>
+                  i !== currentSlideIndex ? (
+                    <CarouselIndicatorInactive
+                      key={i}
+                      aria-label={`${i + 1}`}
+                      onClick={() => gotoSlide(i)}
+                    >
+                      <span />
+                    </CarouselIndicatorInactive>
+                  ) : (
+                    <CarouselIndicatorActive
+                      key={i}
+                      aria-label={`${i + 1}`}
+                      onClick={() => gotoSlide(i)}
+                    >
+                      <span />
+                    </CarouselIndicatorActive>
+                  )
+                )}
+              </StyledUl>
+              <CarouselButton
+                className="next-slide"
+                disabled={onLastSlide}
+                onClick={nextSlide}
+              >
+                <SlideNextIcon />
+              </CarouselButton>
+            </StyledCarouselButtonContainerInner>
+          </StyledCarouselButtonContainer>
+        </>
+      )}
+    </StyledCarousel>
+  )
+}
+
+export default GuidesCarousel
diff --git a/src/browser/modules/Sidebar/About.tsx b/src/browser/modules/Sidebar/About.tsx
index e331c80297e..3e2dcbd5d1a 100644
--- a/src/browser/modules/Sidebar/About.tsx
+++ b/src/browser/modules/Sidebar/About.tsx
@@ -29,7 +29,7 @@ import {
   DrawerSection,
   DrawerSectionBody,
   DrawerFooter
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import { getVersion, getEdition } from 'shared/modules/dbMeta/dbMetaDuck'
 
 function asChangeLogUrl(serverVersion: string): string | undefined {
diff --git a/src/browser/modules/Sidebar/DocumentItems.tsx b/src/browser/modules/Sidebar/DocumentItems.tsx
index 875da8b2d83..b210b4b6e41 100644
--- a/src/browser/modules/Sidebar/DocumentItems.tsx
+++ b/src/browser/modules/Sidebar/DocumentItems.tsx
@@ -17,16 +17,17 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { Dispatch, useState } from 'react'
 import { connect } from 'react-redux'
 import { Action } from 'redux'
 import {
   DrawerSubHeader,
   DrawerSection,
-  DrawerSectionBody
-} from 'browser-components/drawer'
+  DrawerSectionBody,
+  DrawerExternalLink
+} from 'browser-components/drawer/drawer-styled'
 import {
-  StyledHelpLink,
   StyledHelpItem,
   StyledCommandListItem,
   StyledCommandNamePair,
@@ -43,6 +44,7 @@ import {
   SavedScriptsExpandMenuRightIcon
 } from 'browser-components/icons/Icons'
 import { SavedScriptsFolderCollapseIcon } from 'browser-components/SavedScripts/styled'
+
 const DrawerSubHeaderWithMargin = styled(DrawerSubHeader)`
   margin: 0 24px 0 24px;
 `
@@ -78,9 +80,7 @@ export const DocumentItems = ({
   const listOfItems = items.map(item =>
     'url' in item ? (
       <StyledHelpItem key={item.url}>
-        <StyledHelpLink href={item.url} target="_blank" rel="noreferrer">
-          {item.name}
-        </StyledHelpLink>
+        <DrawerExternalLink href={item.url}>{item.name}</DrawerExternalLink>
       </StyledHelpItem>
     ) : (
       <CommandItem
diff --git a/src/browser/modules/Sidebar/Documents.tsx b/src/browser/modules/Sidebar/Documents.tsx
index 8299a8b5d9b..b2e396a5421 100644
--- a/src/browser/modules/Sidebar/Documents.tsx
+++ b/src/browser/modules/Sidebar/Documents.tsx
@@ -30,7 +30,7 @@ import {
   TRACK_CANNY_FEATURE_REQUEST
 } from 'shared/modules/sidebar/sidebarDuck'
 import DocumentItems from './DocumentItems'
-import { Drawer, DrawerHeader } from 'browser-components/drawer'
+import { Drawer, DrawerHeader } from 'browser-components/drawer/drawer-styled'
 import {
   CannyFeedbackIcon,
   CannyNotificationsIcon
@@ -126,16 +126,6 @@ const useful = [
   { name: 'System info', command: ':sysinfo' }
 ]
 
-const guides = [
-  { name: 'Intro to Neo4j Browser', command: ':play intro' },
-  { name: 'Cypher basics', command: ':play cypher' },
-  { name: 'Queries with Cypher - Movies use case', command: ':play movies' },
-  {
-    name: 'More guides',
-    url: 'https://neo4j.com/graphgists/'
-  }
-]
-
 type DocumentsProps = {
   version: string
   urlVersion: string
@@ -176,9 +166,8 @@ const Documents = (props: DocumentsProps) => {
       ></StyledFeedbackButton>
       <StyledFullSizeDrawerBody>
         <DocumentItems header="Useful commands" items={useful} />
-        <DocumentItems header="Built-in guides" items={guides} />
         <DocumentItems header="Documentation links" items={docs} />
-        <DocumentItems expandable header="Other Resources" items={other} />
+        <DocumentItems header="Other Resources" items={other} />
       </StyledFullSizeDrawerBody>
     </Drawer>
   )
diff --git a/src/browser/modules/Sidebar/GuidesDrawer.tsx b/src/browser/modules/Sidebar/GuidesDrawer.tsx
new file mode 100644
index 00000000000..539c56c3e8d
--- /dev/null
+++ b/src/browser/modules/Sidebar/GuidesDrawer.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useRef } from 'react'
+import { connect } from 'react-redux'
+
+import {
+  getGuide,
+  startGuide,
+  Guide,
+  isDefaultGuide,
+  gotoSlide
+} from 'shared/modules/guides/guidesDuck'
+import { GlobalState } from 'shared/globalState'
+import GuideCarousel from '../GuideCarousel/GuideCarousel'
+import { BackIcon } from '../../components/icons/Icons'
+import {
+  StyledGuidesDrawer,
+  GuideTitle,
+  BackIconContainer,
+  CarouselWrapper,
+  StyledGuidesDrawerHeader,
+  StyledDrawerSeparator
+} from './styled'
+
+type GuidesDrawerProps = {
+  guide: Guide
+  backToAllGuides: () => void
+  gotoSlide: (slideIndex: number) => void
+}
+
+function GuidesDrawer({
+  guide,
+  backToAllGuides,
+  gotoSlide
+}: GuidesDrawerProps): JSX.Element {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <StyledGuidesDrawer id="guide-drawer" ref={scrollRef}>
+      <StyledGuidesDrawerHeader onClick={backToAllGuides}>
+        {!isDefaultGuide(guide) && (
+          <BackIconContainer>
+            <BackIcon width={16} />
+          </BackIconContainer>
+        )}
+        Neo4j Browser Guides{' '}
+      </StyledGuidesDrawerHeader>
+      <StyledDrawerSeparator />
+      {!isDefaultGuide(guide) && (
+        <GuideTitle title={guide.title}>{guide.title}</GuideTitle>
+      )}
+      <CarouselWrapper>
+        <GuideCarousel
+          slides={guide.slides}
+          currentSlideIndex={guide.currentSlide}
+          gotoSlide={gotoSlide}
+          scrollToTop={() =>
+            scrollRef.current?.scrollIntoView({ block: 'start' })
+          }
+        />
+      </CarouselWrapper>
+    </StyledGuidesDrawer>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => ({ guide: getGuide(state) })
+const mapDispatchToProps = (dispatch: any) => ({
+  backToAllGuides: () => dispatch(startGuide()),
+  gotoSlide: (slideIndex: number) => dispatch(gotoSlide(slideIndex))
+})
+const ConnectedGuidesDrawer = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(GuidesDrawer)
+
+export default ConnectedGuidesDrawer
diff --git a/src/browser/modules/Sidebar/ProjectFiles.tsx b/src/browser/modules/Sidebar/ProjectFiles.tsx
index ed3a007a65a..9636ef1ccb6 100644
--- a/src/browser/modules/Sidebar/ProjectFiles.tsx
+++ b/src/browser/modules/Sidebar/ProjectFiles.tsx
@@ -23,7 +23,7 @@ import { connect } from 'react-redux'
 import { useMutation } from '@apollo/client'
 import { getProjectId } from 'shared/modules/app/appDuck'
 
-import { Drawer, DrawerHeader } from 'browser-components/drawer'
+import { Drawer, DrawerHeader } from 'browser-components/drawer/drawer-styled'
 import ProjectFilesScripts, {
   ProjectFilesError
 } from '../../components/ProjectFiles/ProjectsFilesScripts'
diff --git a/src/browser/modules/Sidebar/Settings.tsx b/src/browser/modules/Sidebar/Settings.tsx
index 449283cafef..3236c8ccc36 100644
--- a/src/browser/modules/Sidebar/Settings.tsx
+++ b/src/browser/modules/Sidebar/Settings.tsx
@@ -27,7 +27,7 @@ import {
   DrawerSection,
   DrawerSectionBody,
   DrawerSubHeader
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import { RadioSelector, CheckboxSelector } from 'browser-components/Form'
 import {
   StyledSetting,
diff --git a/src/browser/modules/Sidebar/Sidebar.tsx b/src/browser/modules/Sidebar/Sidebar.tsx
index 38b8dacab66..45971ac93b7 100644
--- a/src/browser/modules/Sidebar/Sidebar.tsx
+++ b/src/browser/modules/Sidebar/Sidebar.tsx
@@ -18,17 +18,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { ReactFragment, ReactElement } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
 import DatabaseDrawer from '../DBMSInfo/DBMSInfo'
 import DocumentsDrawer from './Documents'
 import AboutDrawer from './About'
 import SettingsDrawer from './Settings'
+import GuidesDrawer from './GuidesDrawer'
 import Favorites from './favorites'
 import StaticScripts from './static-scripts'
 import ProjectFilesDrawer from './ProjectFiles'
 import TabNavigation, {
-  NavItem
+  NavItem,
+  STANDARD_DRAWER_WIDTH
 } from 'browser-components/TabNavigation/Navigation'
 import BrowserSync from '../Sync/BrowserSync'
 import { GlobalState } from 'shared/globalState'
@@ -48,10 +50,11 @@ import {
   CloudSyncIcon,
   SettingsIcon,
   AboutIcon,
-  ProjectFilesIcon
+  ProjectFilesIcon,
+  GuidesDrawerIcon
 } from 'browser-components/icons/Icons'
 import { getCurrentDraft } from 'shared/modules/sidebar/sidebarDuck'
-import { DrawerHeader } from 'browser-components/drawer'
+import { DrawerHeader } from 'browser-components/drawer/drawer-styled'
 
 interface SidebarProps {
   openDrawer: string
@@ -78,7 +81,7 @@ const Sidebar = ({
     {
       name: 'DBMS',
       title: 'Database Information',
-      icon: function dbIcon(isOpen: boolean): ReactElement {
+      icon: function dbIcon(isOpen: boolean): JSX.Element {
         return (
           <DatabaseIcon
             isOpen={isOpen}
@@ -92,16 +95,16 @@ const Sidebar = ({
     {
       name: 'Favorites',
       title: 'Favorites',
-      icon: function favIcon(isOpen: boolean): ReactElement {
+      icon: function favIcon(isOpen: boolean): JSX.Element {
         return <FavoritesIcon isOpen={isOpen} title="Favorites" />
       },
-      content: function FavoritesDrawer(): ReactFragment {
+      content: function FavoritesDrawer(): JSX.Element {
         return (
-          <>
+          <div style={{ width: STANDARD_DRAWER_WIDTH }}>
             <DrawerHeader> Favorites </DrawerHeader>
             <Favorites />
             {showStaticScripts && <StaticScripts />}
-          </>
+          </div>
         )
       }
     },
@@ -110,7 +113,7 @@ const Sidebar = ({
           {
             name: 'Project Files',
             title: 'Project Files',
-            icon: function projectFilesIcon(isOpen: boolean): ReactElement {
+            icon: function projectFilesIcon(isOpen: boolean): JSX.Element {
               return <ProjectFilesIcon isOpen={isOpen} title="Project Files" />
             },
             content: function ProjectDrawer(): JSX.Element {
@@ -118,14 +121,22 @@ const Sidebar = ({
             }
           }
         ]
-      : [])
+      : []),
+    {
+      name: 'Guides',
+      title: 'Guides',
+      icon: function guidesDrawerIcon(isOpen: boolean): JSX.Element {
+        return <GuidesDrawerIcon isOpen={isOpen} />
+      },
+      content: GuidesDrawer
+    }
   ]
 
   const bottomNavItemsList: NavItem[] = [
     {
       name: 'Documents',
       title: 'Help &amp; Resources',
-      icon: function docsIcon(isOpen: boolean): ReactElement {
+      icon: function docsIcon(isOpen: boolean): JSX.Element {
         return <DocumentsIcon isOpen={isOpen} title="Help &amp; Resources" />
       },
       content: DocumentsDrawer,
@@ -134,7 +145,7 @@ const Sidebar = ({
     {
       name: 'Sync',
       title: 'Browser Sync',
-      icon: function syncIcon(isOpen: boolean): ReactElement {
+      icon: function syncIcon(isOpen: boolean): JSX.Element {
         return (
           <CloudSyncIcon
             isOpen={isOpen}
@@ -148,7 +159,7 @@ const Sidebar = ({
     {
       name: 'Settings',
       title: 'Settings',
-      icon: function settingIcon(isOpen: boolean): ReactElement {
+      icon: function settingIcon(isOpen: boolean): JSX.Element {
         return <SettingsIcon isOpen={isOpen} title="Browser Settings" />
       },
       content: SettingsDrawer
@@ -156,7 +167,7 @@ const Sidebar = ({
     {
       name: 'About',
       title: 'About Neo4j',
-      icon: function aboutIcon(isOpen: boolean): ReactElement {
+      icon: function aboutIcon(isOpen: boolean): JSX.Element {
         return <AboutIcon isOpen={isOpen} title="About Neo4j" />
       },
       content: AboutDrawer
diff --git a/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap b/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap
index 6c305d2bfab..fe6733eeeb9 100644
--- a/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap
+++ b/src/browser/modules/Sidebar/__snapshots__/Settings.test.tsx.snap
@@ -12,29 +12,29 @@ exports[`Settings renders with strange characters in display name 1`] = `
       Browser Settings
     </h4>
     <div
-      class="sc-bZQynM gNquDR"
+      class="sc-gzVnrw eEMBun"
     >
       <div
-        class="sc-ifAKCX kHWkUt"
+        class="sc-EHOje ggEejq"
       >
         <div
-          class="sc-EHOje fyzZhj"
+          class="sc-bZQynM hxqGOu"
         >
           <h5
-            class="sc-bxivhb jqgGlu"
+            class="sc-ifAKCX oCshM"
           >
             Test åäö settings
           </h5>
           <div
-            class="sc-kAzzGY fnYWtX"
+            class="sc-jhAzac bSyIMB"
           >
             <label
-              class="sc-chPdSV jsUXtn"
+              class="sc-fBuWsC bPajwT"
               title=""
             >
               åäö üüü
               <input
-                class="sc-kGXeez khypDc testSetting"
+                class="sc-dVhcbM jTOfUS testSetting"
                 title=""
                 value="true"
               />
@@ -42,7 +42,7 @@ exports[`Settings renders with strange characters in display name 1`] = `
           </div>
         </div>
         <div
-          class="sc-EHOje fyzZhj"
+          class="sc-bZQynM hxqGOu"
         />
       </div>
     </div>
diff --git a/src/browser/modules/Sidebar/styled.tsx b/src/browser/modules/Sidebar/styled.tsx
index abe90af89aa..696389f5efd 100644
--- a/src/browser/modules/Sidebar/styled.tsx
+++ b/src/browser/modules/Sidebar/styled.tsx
@@ -19,7 +19,12 @@
  */
 import { Button } from 'semantic-ui-react'
 import styled from 'styled-components'
-import { DrawerBody } from 'browser-components/drawer'
+import {
+  DrawerBody,
+  DrawerBrowserCommand
+} from 'browser-components/drawer/drawer-styled'
+import { dark } from 'browser-styles/themes'
+import { LARGE_DRAWER_WIDTH } from 'browser-components/TabNavigation/Navigation'
 
 export const StyledSetting = styled.div`
   padding-bottom: 15px;
@@ -45,24 +50,6 @@ export const StyledSettingTextInput = styled.input`
   width: 192px;
 `
 
-export const StyledHelpLink = styled.a`
-  cursor: pointer;
-  text-decoration: none;
-  color: #68bdf4;
-
-  &:active {
-    text-decoration: none;
-  }
-
-  &:before {
-    display: inline-block;
-    content: ' ';
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'> <path d='M14.3524 4.42834L2.53033 16.2504C2.23744 16.5433 1.76256 16.5433 1.46967 16.2504C1.17678 15.9575 1.17678 15.4826 1.46967 15.1897L13.2917 3.36768H2.74941C2.3352 3.36768 1.99941 3.03189 1.99941 2.61768C1.99941 2.20346 2.3352 1.86768 2.74941 1.86768H15.1022H15.1024C15.204 1.86768 15.301 1.88792 15.3894 1.92458C15.4759 1.96035 15.557 2.01298 15.6278 2.08247C15.6311 2.08571 15.6343 2.08897 15.6376 2.09226C15.707 2.16302 15.7597 2.24414 15.7954 2.33059C15.8321 2.41902 15.8524 2.51598 15.8524 2.61768V14.9706C15.8524 15.3848 15.5166 15.7206 15.1024 15.7206C14.6881 15.7206 14.3524 15.3848 14.3524 14.9706V4.42834Z' fill='%2368BDF4'/></svg>");
-    height: 12px;
-    width: 12px;
-    margin-right: 7px;
-  }
-`
 export const StyledHelpItem = styled.li`
   list-style-type: none;
   margin: 8px 24px 0 24px;
@@ -100,21 +87,6 @@ export const StyledName = styled.div`
   margin-right: 5%;
 `
 
-export const StyledCommand = styled.div`
-  background-color: #2a2c33;
-  border-radius: 2px;
-  padding: 3px;
-
-  color: #e36962;
-  font-family: Fira Code;
-
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  max-width: 45%;
-`
-
 export const StyledFullSizeDrawerBody = styled(DrawerBody)`
   padding: 0;
 `
@@ -149,3 +121,202 @@ export const StyledFeedbackButton = styled(Button)`
   margin: 0 0 25px 25px !important;
   min-height: fit-content !important;
 `
+
+export const StyledCommand = styled(DrawerBrowserCommand)`
+  max-width: 45%;
+`
+
+export const StyledCarousel = styled.div`
+  height: 100%;
+  padding-bottom: 20px;
+  width: 100%;
+  outline: none;
+
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`
+
+export const SlideContainer = styled.div`
+  padding: 0;
+  width: 100%;
+  display: inline-block;
+`
+
+export const StyledCarouselButtonContainer = styled.div`
+  color: ${props => props.theme.secondaryButtonText};
+  background-color: ${dark.secondaryBackground};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  bottom: 0;
+  left: 60px;
+  width: 500px;
+
+  z-index: 10;
+  border-top: ${props => props.theme.drawerSeparator};
+  height: 40px;
+`
+
+export const StyledCarouselButtonContainerInner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  position: relative;
+`
+
+export const StyledCarouselCount = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: bold;
+  justify-content: flex-end;
+  border-radius: 3px;
+  min-width: 44px;
+  position: absolute;
+  right: 100%;
+  padding: 0;
+  margin-right: 10px;
+`
+
+export const CarouselIndicator = styled.li`
+  margin: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  position: relative;
+  z-index: 1;
+
+  > span {
+    background-color: ${props => props.theme.secondaryButtonText};
+    display: block;
+    border-radius: 3px;
+    width: 6px;
+    height: 6px;
+    opacity: 0.4;
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  &::before {
+    border-radius: 2px;
+    content: attr(aria-label);
+    color: ${props => props.theme.primaryBackground};
+    background-color: ${props => props.theme.primaryText};
+    position: absolute;
+    font-size: 12px;
+    font-weight: bold;
+    left: 50%;
+    min-width: 24px;
+    bottom: calc(100% + 5px);
+    pointer-events: none;
+    transform: translateX(-50%);
+    padding: 5px;
+    line-height: 1;
+    text-align: center;
+    z-index: 100;
+    visibility: hidden;
+  }
+
+  &::after {
+    border: solid;
+    border-color: ${props => props.theme.primaryText} transparent;
+    border-width: 6px 6px 0 6px;
+    bottom: 5px;
+    content: '';
+    left: 50%;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%);
+    z-index: 100;
+    visibility: hidden;
+  }
+
+  &:hover::before,
+  &:hover::after {
+    visibility: visible;
+  }
+`
+export const CarouselIndicatorInactive = styled(CarouselIndicator)`
+  &:hover > span {
+    opacity: 1;
+  }
+`
+export const CarouselIndicatorActive = styled(CarouselIndicator)`
+  > span {
+    opacity: 1;
+  }
+`
+
+export const StyledUl = styled.ul`
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  padding-left: 0 !important;
+`
+
+export const StyledGuidesDrawer = styled.div`
+  min-height: 100vh;
+  position: relative;
+  width: ${LARGE_DRAWER_WIDTH}px;
+  /* width is set to avoid squashing during opening animation */
+`
+
+export const StyledGuidesDrawerHeader = styled.h4`
+  color: ${props => props.theme.primaryHeaderText};
+  background-color: ${props => props.theme.drawerBackground};
+  font-size: 18px;
+  padding: 25px 0 0 25px;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
+  font-family: ${props => props.theme.drawerHeaderFontFamily};
+  cursor: pointer;
+`
+
+export const GuideTitle = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 2em;
+  line-height: normal;
+  padding: 0 18px;
+  margin-bottom: 10px;
+`
+
+export const BackIconContainer = styled.span`
+  cursor: pointer;
+  margin-right: 5px;
+`
+export const CarouselWrapper = styled.div`
+  padding: 0 18px;
+`
+
+export const GuideButtonContainers = styled.div`
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 18px;
+  margin-bottom: 40px;
+`
+
+export const GuideNavButton = styled.button`
+  border: none;
+  background-color: inherit;
+  font-size: 1.2em;
+  color: ${props => props.theme.link};
+  outline: none;
+  padding: 5px 0;
+
+  :disabled {
+    opacity: 0;
+  }
+`
+
+export const StyledDrawerSeparator = styled.div`
+  margin: 0 18px 18px 18px;
+  border-bottom: 1px solid #424650;
+`
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.tsx.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.tsx.snap
index e0292585916..7bc9d63da6d 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.tsx.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`ErrorsViews ErrorsStatusbar displays error 1`] = `
     class="sc-bdVaJa kwzqrW"
   >
     <span
-      class="sc-dxgOiQ eBOcVg"
+      class="sc-krvtoX iGMYyN"
       title="Test.Error: Test error description"
     >
       <i
-        class="sc-caSCKo gbERLv fa fa-exclamation-triangle"
+        class="sc-kUaPvJ duoQTJ fa fa-exclamation-triangle"
       />
        
       Test.Error: Test error description
@@ -26,42 +26,42 @@ exports[`ErrorsViews ErrorsView displays nothing if no errors 1`] = `<div />`;
 exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`] = `
 <div>
   <div
-    class="sc-gzVnrw ksKCRj"
+    class="sc-hMFtBS cxFERH"
   >
     <div
-      class="sc-htoDjs MMTIn"
+      class="sc-cLQEGU lpjGCO"
     >
       <div
-        class="sc-dnqmqq bpbKgH"
+        class="sc-gqPbQI irgQAu"
       >
         <div
-          class="sc-VigVT sc-fjdhpX egUJPX"
+          class="sc-iujRgT sc-exAgwC cOqTja"
         >
           ERROR
         </div>
         <h4
-          class="sc-kgoBCf kvyvll"
+          class="sc-lkqHmb kgODja"
         >
           Neo.ClientError.Procedure.ProcedureNotFound
         </h4>
       </div>
       <div
-        class="sc-iwsKbI jQhHGA"
+        class="sc-hORach jBrJiT"
       >
         <pre
-          class="sc-kpOJdX hkuHeU"
+          class="sc-cbkKFq dGaBEI"
         >
           not found
         </pre>
       </div>
       <div
-        class="sc-gqjmRU kjuOwi"
+        class="sc-bAeIUo eJjFhh"
       >
         <a
-          class="sc-gZMcBi jPwkqT"
+          class="sc-bMVAic kWTfCD"
         >
           <i
-            class="sc-eqIVtm dqGdOL fa fa-play-circle-o"
+            class="sc-gPWkxV hffcmY fa fa-play-circle-o"
           />
            List available procedures
         </a>
@@ -74,30 +74,30 @@ exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`]
 exports[`ErrorsViews ErrorsView does displays an error 1`] = `
 <div>
   <div
-    class="sc-gzVnrw ksKCRj"
+    class="sc-hMFtBS cxFERH"
   >
     <div
-      class="sc-htoDjs MMTIn"
+      class="sc-cLQEGU lpjGCO"
     >
       <div
-        class="sc-dnqmqq bpbKgH"
+        class="sc-gqPbQI irgQAu"
       >
         <div
-          class="sc-VigVT sc-fjdhpX egUJPX"
+          class="sc-iujRgT sc-exAgwC cOqTja"
         >
           ERROR
         </div>
         <h4
-          class="sc-kgoBCf kvyvll"
+          class="sc-lkqHmb kgODja"
         >
           Test.Error
         </h4>
       </div>
       <div
-        class="sc-iwsKbI jQhHGA"
+        class="sc-hORach jBrJiT"
       >
         <pre
-          class="sc-kpOJdX hkuHeU"
+          class="sc-cbkKFq dGaBEI"
         >
           Test error description
         </pre>
diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap
index bfb2316fbee..dba6bf4211a 100644
--- a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap
+++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap
@@ -137,7 +137,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
             class="sc-cvbbAY ZoyPP faded zoom-in"
           >
             <i
-              class="sc-kTUwUJ kTUBv sl-zoom-in"
+              class="sc-jXQZqI bMRwes sl-zoom-in"
               style="font-size: 1em;"
             />
           </button>
@@ -145,7 +145,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
             class="sc-cvbbAY ZoyPP zoom-out"
           >
             <i
-              class="sc-dqBHgY fvzyDv sl-zoom-out"
+              class="sc-iGPElx czYOXU sl-zoom-out"
               style="font-size: 1em;"
             />
           </button>
diff --git a/src/browser/modules/Stream/HelpFrame.tsx b/src/browser/modules/Stream/HelpFrame.tsx
index 7c73db4fb51..54b80fafcf4 100644
--- a/src/browser/modules/Stream/HelpFrame.tsx
+++ b/src/browser/modules/Stream/HelpFrame.tsx
@@ -46,7 +46,7 @@ const HelpFrame = ({ stack = [] }: any) => {
       <CarouselButton
         className="previous-slide rounded"
         data-testid="prev-in-stack-button"
-        onClick={() => setCurrentFrameIndex(currentFrameIndex + 1)}
+        onClick={() => setCurrentFrameIndex(index => index + 1)}
       >
         <StackPreviousIcon />
       </CarouselButton>
@@ -57,7 +57,7 @@ const HelpFrame = ({ stack = [] }: any) => {
       <CarouselButton
         className="next-slide rounded"
         data-testid="next-in-stack-button"
-        onClick={() => setCurrentFrameIndex(currentFrameIndex - 1)}
+        onClick={() => setCurrentFrameIndex(index => index - 1)}
       >
         <StackNextIcon />
       </CarouselButton>
diff --git a/src/browser/modules/Stream/PlayFrame.tsx b/src/browser/modules/Stream/PlayFrame.tsx
index b8d6c45818c..2bb42f2f2cf 100644
--- a/src/browser/modules/Stream/PlayFrame.tsx
+++ b/src/browser/modules/Stream/PlayFrame.tsx
@@ -23,7 +23,7 @@ import { withBus } from 'react-suber'
 import { fetchGuideFromAllowlistAction } from 'shared/modules/commands/commandsDuck'
 
 import Docs from '../Docs/Docs'
-import docs from '../../documentation'
+import docs, { isPlayChapter } from '../../documentation'
 import FrameTemplate from '../Frame/FrameTemplate'
 import FrameAside from '../Frame/FrameAside'
 import {
@@ -189,12 +189,12 @@ function generateContent(
     return {
       guide: (
         <Docs
+          html={stackFrame.result}
+          initialSlide={initialSlide}
           lastUpdate={stackFrame.ts}
+          onSlide={onSlide}
           originFrameId={stackFrame.id}
           withDirectives
-          initialSlide={initialSlide}
-          html={stackFrame.result}
-          onSlide={onSlide}
         />
       ),
       hasCarousel: checkHtmlForSlides(stackFrame.result),
@@ -239,10 +239,9 @@ function generateContent(
     stackFrame.cmd.trim() === ':play' ? ':play start' : stackFrame.cmd
   )
 
-  const guide = chapters[guideName] || {}
   // Check if content exists locally
-  if (Object.keys(guide).length) {
-    const { content, title, subtitle, slides = null } = guide
+  if (isPlayChapter(guideName)) {
+    const { content, title, subtitle, slides = null } = chapters[guideName]
     return {
       guide: (
         <Docs
diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
index 5163bbf91f0..f516f57651c 100644
--- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
+++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap
@@ -7,16 +7,16 @@ exports[`SchemaFrame renders empty 1`] = `
   >
     <div>
       <div
-        class="sc-kfGgVZ bYptRJ"
+        class="sc-ibxdXY lnvWNA"
       >
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Indexes
               </th>
@@ -24,10 +24,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                 None
               </td>
@@ -35,13 +35,13 @@ exports[`SchemaFrame renders empty 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Constraints
               </th>
@@ -49,10 +49,10 @@ exports[`SchemaFrame renders empty 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                 None
               </td>
@@ -89,46 +89,46 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
   >
     <div>
       <div
-        class="sc-kfGgVZ bYptRJ"
+        class="sc-ibxdXY lnvWNA"
       >
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Index Name
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Type
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Uniqueness
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 EntityType
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 LabelsOrTypes
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Properties
               </th>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 State
               </th>
@@ -136,42 +136,42 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                 None
               </td>
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               />
             </tr>
           </tbody>
         </table>
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Constraints
               </th>
@@ -179,10 +179,10 @@ exports[`SchemaFrame renders empty for Neo4j >= 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                 None
               </td>
@@ -219,16 +219,16 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
   >
     <div>
       <div
-        class="sc-kfGgVZ bYptRJ"
+        class="sc-ibxdXY lnvWNA"
       >
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameIndexesTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Indexes
               </th>
@@ -236,10 +236,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                  ON :Movie(released) ONLINE 
               </td>
@@ -247,13 +247,13 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </tbody>
         </table>
         <table
-          class="sc-esjQYD gUdxBZ"
+          class="sc-ipZHIp cMRRUj"
           data-testid="schemaFrameConstraintsTable"
         >
           <thead>
             <tr>
               <th
-                class="sc-eXEjpC jDANhq table-header"
+                class="sc-bmyXtO brARat table-header"
               >
                 Constraints
               </th>
@@ -261,10 +261,10 @@ exports[`SchemaFrame renders results for Neo4j < 4.0 1`] = `
           </thead>
           <tbody>
             <tr
-              class="sc-kIPQKe cGtlOc table-row"
+              class="sc-iGrrsa llaomK table-row"
             >
               <td
-                class="sc-ibxdXY lgwXIJ table-properties"
+                class="sc-dEoRIm gxEPuq table-properties"
               >
                  ON ( book:Book ) ASSERT book.isbn IS UNIQUE
               </td>
diff --git a/src/browser/modules/Sync/BrowserSync.tsx b/src/browser/modules/Sync/BrowserSync.tsx
index a12179dad8b..4c2eb4a60eb 100644
--- a/src/browser/modules/Sync/BrowserSync.tsx
+++ b/src/browser/modules/Sync/BrowserSync.tsx
@@ -52,7 +52,7 @@ import {
   DrawerSubHeader,
   DrawerSectionBody,
   DrawerToppedHeader
-} from 'browser-components/drawer'
+} from 'browser-components/drawer/drawer-styled'
 import { FormButton, SyncSignInButton } from 'browser-components/buttons'
 import { BinIcon } from 'browser-components/icons/Icons'
 import {
diff --git a/src/browser/styles/fonts/neo4j-world.svg b/src/browser/styles/fonts/neo4j-world.svg
index 570ece74002..151a19fee90 100644
--- a/src/browser/styles/fonts/neo4j-world.svg
+++ b/src/browser/styles/fonts/neo4j-world.svg
@@ -1,45 +1,82 @@
 <?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="neo4j-world" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="neo4j-outline-16px" d="M580.391 94.263c65.059 17.928 124.592 53.261 173.105 103.681 63.786 66.293 102.034 151.987 110.422 243.201l-63.731 5.861c-7.076-76.949-39.241-149.014-92.81-204.687-40.523-42.115-89.991-71.475-143.989-86.355l17.002-61.7zM730.337 782.51c-99.952 88.27-235.881 116.754-360.249 77.963l19.056-61.097c103.099 32.156 215.72 8.557 298.828-64.837l42.365 47.971zM173.992 718.593c-114.535-157.358-100.61-379.733 34.979-520.649 11.041-11.475 22.669-22.187 34.833-32.105l40.444 49.602c-10.168 8.29-19.901 17.257-29.158 26.878-113.958 118.436-125.717 306.218-29.352 438.612l-51.745 37.663zM694.627 310.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM310.627 438.627c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM310.627 566.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM511.982 243.854c50.758-52.753 50.758-138.775 0-191.528-50.090-52.059-130.772-52.059-180.862 0-50.758 52.753-50.758 138.775 0 191.528 50.090 52.059 130.772 52.059 180.862 0l46.118 44.374c-75.268 78.226-197.831 78.226-273.099 0-74.6-77.532-74.6-202.744 0-280.276 75.268-78.227 197.831-78.227 273.099 0 74.6 77.532 74.6 202.744 0 280.276l-46.119-44.374zM347.639 838.905c31.691-32.936 31.691-86.829 0-119.766-31.023-32.242-80.791-32.242-111.813 0-31.691 32.937-31.691 86.83 0 119.766 31.023 32.243 80.791 32.243 111.813 0l46.119 44.374c-56.2 58.411-147.85 58.411-204.051 0-55.533-57.715-55.533-150.799 0-208.514 56.2-58.41 147.85-58.41 204.050 0 55.533 57.716 55.533 150.799 0 208.515l-46.118-44.374zM805.858 692.021c63.505-66 63.505-173.501 0-239.501-62.836-65.307-164.184-65.307-227.021 0-63.505 66.001-63.505 173.501 0 239.501 62.836 65.307 164.184 65.307 227.021 0l46.119 44.374c-88.014 91.475-231.244 91.475-319.258 0-87.347-90.779-87.347-237.47 0-328.25 88.014-91.474 231.244-91.474 319.258 0 87.347 90.779 87.347 237.47 0 328.25l-46.118-44.374z" />
-<glyph unicode="&#xe909;" d="M776.235 790.633c-9.815 9.311-20.122 18.109-30.878 26.351-100.148 83.985-233.88 110.443-356.482 72.432l3.817-12.311c-0.292-0.095-0.585-0.191-0.877-0.287 32.181-46.655 28.014-111.841-12.501-153.697-45.16-46.654-118.379-46.654-163.539 0-4.948 5.112-9.354 10.571-13.217 16.302-0.149-0.202-0.297-0.404-0.445-0.606l-11.171 8.18c-115.905-158.286-101.8-382.184 35.37-523.889 11.161-11.53 22.911-22.29 35.199-32.249l10.074 12.43c7.338 27.947 21.628 54.352 42.869 76.295 64.904 67.051 170.134 67.051 235.039 0 38.289-39.556 53.99-93.61 47.103-145.056l4.227-15.432c65.601 17.969 125.649 53.394 174.646 104.012 28.059 28.987 51.236 61.671 69.168 96.906 32.667 56.478 51.364 122.048 51.364 191.985 0 0.252 0 0.505-0.001 0.757-9.731-23.264-23.796-45.057-42.198-64.066-78.103-80.687-204.733-80.687-282.837 0s-78.103 211.506 0 292.192c55.522 57.359 135.568 73.943 205.27 49.751z" />
-<glyph unicode="&#xe90a;" d="M727.557 339.461c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
-<glyph unicode="&#xe90b;" d="M673.917 270.194c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
-<glyph unicode="&#xe90c;" d="M343.445 387.42c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
-<glyph unicode="&#xe90d;" d="M298.763 468.346c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
-<glyph unicode="&#xe90e;" d="M497.895 854.75c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.622-44.243 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.243 0z" />
-<glyph unicode="&#xe90f;" d="M569.884 824.87c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
-<glyph unicode="&#xe910;" d="M276.669 653.266c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
-<glyph unicode="&#xe911;" d="M280.89 563.253c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.622-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
-<glyph unicode="&#xe912;" d="M537.996 268.457c58.899-60.848 58.899-159.71 0-220.557-58.617-60.556-153.43-60.556-212.046 0-58.9 60.848-58.9 159.71 0 220.557 58.617 60.555 153.43 60.555 212.046 0l22.992 22.256c-71.192 73.547-186.839 73.547-258.031 0-70.91-73.254-70.91-191.815 0-265.070 71.192-73.547 186.839-73.547 258.031 0 70.909 73.254 70.909 191.815 0 265.069l-22.993-22.256z" />
-<glyph unicode="&#xe913;" d="M367.818 880.941c39.155-40.45 39.155-106.242 0-146.693-38.872-40.158-101.674-40.158-140.546 0-39.155 40.451-39.155 106.243 0 146.693 38.872 40.159 101.674 40.159 140.546 0l22.993 22.256c-51.448 53.15-135.084 53.15-186.532 0-51.165-52.857-51.165-138.348 0-191.205 51.448-53.15 135.084-53.15 186.532 0 51.165 52.858 51.165 138.348 0 191.205l-22.992-22.256z" />
-<glyph unicode="&#xe914;" d="M842.305 729.754c72.098-74.483 72.098-195.453 0-269.936-71.815-74.191-188.029-74.191-259.844 0-72.099 74.483-72.099 195.453 0 269.936 71.815 74.191 188.029 74.191 259.844 0l22.993 22.256c-84.391 87.183-221.438 87.183-305.829 0-84.108-86.89-84.108-227.558 0-314.448 84.391-87.183 221.438-87.183 305.829 0 84.108 86.89 84.108 227.558 0 314.448l-22.992-22.256z" />
-<glyph unicode="&#xe915;" glyph-name="neo4j-outline-32px" d="M600.822 119.097c65.601 17.969 125.649 53.394 174.646 104.012 64.515 66.649 103.217 152.839 111.711 244.654l-31.864 2.948c-7.831-84.651-43.464-164.006-102.84-225.345-44.997-46.486-100.020-78.946-160.108-95.405l8.454-30.863zM752.060 811.233c-100.832 88.514-237.826 117.048-363.184 78.183l9.476-30.565c114.776 35.584 240.175 9.465 332.598-71.667l21.111 24.049zM190.942 746.998c-115.905-158.286-101.8-382.184 35.37-523.889 11.161-11.53 22.911-22.29 35.199-32.249l20.149 24.86c-11.288 9.148-22.088 19.039-32.355 29.645-126.274 130.449-139.284 336.958-32.544 482.727l-25.818 18.905zM727.557 339.461c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM673.917 270.194c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM343.445 387.42c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM298.763 468.346c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM497.895 854.75c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.622-44.243 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.243 0zM569.884 824.87c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM276.669 653.266c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM280.89 563.253c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.622-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM537.996 268.457c58.899-60.848 58.899-159.71 0-220.557-58.617-60.556-153.43-60.556-212.046 0-58.9 60.848-58.9 159.71 0 220.557 58.617 60.555 153.43 60.555 212.046 0l22.992 22.256c-71.192 73.547-186.839 73.547-258.031 0-70.91-73.254-70.91-191.815 0-265.070 71.192-73.547 186.839-73.547 258.031 0 70.909 73.254 70.909 191.815 0 265.069l-22.993-22.256zM367.818 880.941c39.155-40.45 39.155-106.242 0-146.693-38.872-40.158-101.674-40.158-140.546 0-39.155 40.451-39.155 106.243 0 146.693 38.872 40.159 101.674 40.159 140.546 0l22.993 22.256c-51.448 53.15-135.084 53.15-186.532 0-51.165-52.857-51.165-138.348 0-191.205 51.448-53.15 135.084-53.15 186.532 0 51.165 52.858 51.165 138.348 0 191.205l-22.992-22.256zM842.305 729.754c72.098-74.483 72.098-195.453 0-269.936-71.815-74.191-188.029-74.191-259.844 0-72.099 74.483-72.099 195.453 0 269.936 71.815 74.191 188.029 74.191 259.844 0l22.993 22.256c-84.391 87.183-221.438 87.183-305.829 0-84.108-86.89-84.108-227.558 0-314.448 84.391-87.183 221.438-87.183 305.829 0 84.108 86.89 84.108 227.558 0 314.448l-22.992-22.256z" />
-<glyph unicode="&#xe916;" d="M779.547 804.899c-72.593 66.513-169.33 107.101-275.547 107.101-43.491 0-85.393-6.805-124.698-19.408 36.503-49.023 32.543-118.752-11.882-163.282-48.773-48.888-127.849-48.888-176.622 0-5.498 5.511-10.377 11.408-14.635 17.604-50.367-67.864-80.163-151.91-80.163-242.915 0-129.721 60.539-245.302 154.905-320.032 7.874 29.514 23.363 57.412 46.465 80.568 70.097 70.262 183.745 70.262 253.842 0 42.594-42.695 59.306-101.508 50.136-156.851 171.399 41.957 300.299 192.204 310.059 374.1-8.717-14.25-19.23-27.707-31.54-40.045-84.351-84.551-221.112-84.551-305.463 0s-84.352 221.633 0 306.183c55.613 55.745 134.008 74.737 205.145 56.976z" />
-<glyph unicode="&#xe917;" d="M743.521 327.28c13.195-13.226 13.195-34.669 0-47.895s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.895s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe918;" d="M685.59 254.696c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe919;" d="M328.681 377.536c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91a;" d="M280.424 462.336c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91b;" d="M495.486 867.243c13.195-13.226 13.195-34.669 0-47.894s-34.588-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91c;" d="M573.235 835.932c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91d;" d="M256.562 656.111c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91e;" d="M261.121 561.788c13.195-13.226 13.195-34.669 0-47.895s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.895s34.587 13.226 47.782 0z" />
-<glyph unicode="&#xe91f;" d="M545.548 258.887c66.981-67.139 66.981-176.001 0-243.139-66.971-67.129-175.544-67.129-242.515 0-66.982 67.139-66.982 176.001 0 243.139 66.971 67.129 175.544 67.129 242.515 0l11.327 11.3c-73.223 73.395-191.947 73.395-265.169 0-73.212-73.384-73.212-192.356 0-265.74 73.222-73.395 191.947-73.395 265.169 0 73.212 73.384 73.212 192.356 0 265.74l-11.327-11.3z" />
-<glyph unicode="&#xe920;" d="M361.756 900.699c45.658-45.765 45.658-119.973 0-165.738-45.647-45.755-119.648-45.755-165.295 0-45.658 45.765-45.658 119.973 0 165.738 45.647 45.755 119.648 45.755 165.295 0l11.327 11.3c-51.898 52.022-136.050 52.022-187.949 0-51.888-52.010-51.888-136.328 0-188.339 51.898-52.021 136.050-52.021 187.949 0 51.888 52.011 51.888 136.329 0 188.339l-11.327-11.3z" />
-<glyph unicode="&#xe921;" d="M874.202 742.273c81.236-81.427 81.236-213.455 0-294.883-81.226-81.418-212.911-81.418-294.136 0-81.236 81.427-81.236 213.455 0 294.883 81.226 81.418 212.911 81.418 294.136 0l11.327 11.3c-87.477 87.684-229.313 87.684-316.791 0-87.467-87.673-87.467-229.811 0-317.484 87.477-87.684 229.313-87.684 316.791 0 87.467 87.673 87.467 229.811 0 317.484l-11.327-11.3z" />
-<glyph unicode="&#xe922;" glyph-name="neo4j-outline-64px" d="M604.138 104.803c69.228 18.399 132.614 54.681 184.376 106.564 68.225 68.385 109.167 156.855 118.158 251.143l-15.928 1.519c-8.641-90.627-47.98-175.63-113.557-241.361-49.752-49.87-110.644-84.724-177.158-102.401l4.11-15.463zM763.773 815.132c-106.443 90.661-250.96 119.867-383.214 80.083l4.609-15.322c127.091 38.23 265.958 10.166 368.231-76.942l10.375 12.181zM171.533 749.244c-122.622-162.478-107.69-392.452 37.395-537.877 11.798-11.826 24.215-22.858 37.198-33.067l9.89 12.577c-12.479 9.813-24.416 20.419-35.761 31.791-139.434 139.761-153.786 360.803-35.951 516.939l-12.771 9.638zM737.858 321.63c10.079-10.103 10.079-26.491 0-36.595-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.595 10.069 10.092 26.386 10.092 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.349-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.349 16.31 42.846 0 59.195l-11.327-11.3zM679.926 249.046c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.348-16.31-42.846 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.846 0 59.195l-11.327-11.3zM323.017 371.886c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM274.76 456.686c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM489.823 861.592c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.789-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM567.572 830.281c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM250.899 650.461c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM255.458 556.138c10.079-10.103 10.079-26.491 0-36.595-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.349-16.31-42.847 0-59.195 16.32-16.359 42.789-16.359 59.109 0 16.31 16.349 16.31 42.847 0 59.195l-11.327-11.3zM545.548 258.887c66.981-67.139 66.981-176.001 0-243.139-66.971-67.129-175.544-67.129-242.515 0-66.982 67.139-66.982 176.001 0 243.139 66.971 67.129 175.544 67.129 242.515 0l11.327 11.3c-73.223 73.395-191.947 73.395-265.169 0-73.212-73.384-73.212-192.356 0-265.74 73.222-73.395 191.947-73.395 265.169 0 73.212 73.384 73.212 192.356 0 265.74l-11.327-11.3zM361.756 900.699c45.658-45.765 45.658-119.973 0-165.738-45.647-45.755-119.648-45.755-165.295 0-45.658 45.765-45.658 119.973 0 165.738 45.647 45.755 119.648 45.755 165.295 0l11.327 11.3c-51.898 52.022-136.050 52.022-187.949 0-51.888-52.010-51.888-136.328 0-188.339 51.898-52.021 136.050-52.021 187.949 0 51.888 52.011 51.888 136.329 0 188.339l-11.327-11.3zM874.202 742.273c81.236-81.427 81.236-213.455 0-294.883-81.226-81.418-212.911-81.418-294.136 0-81.236 81.427-81.236 213.455 0 294.883 81.226 81.418 212.911 81.418 294.136 0l11.327 11.3c-87.477 87.684-229.313 87.684-316.791 0-87.467-87.673-87.467-229.811 0-317.484 87.477-87.684 229.313-87.684 316.791 0 87.467 87.673 87.467 229.811 0 317.484l-11.327-11.3z" />
-<glyph unicode="&#x1f328;" d="M744.062 765.708c-65.417 59.708-152.461 96.122-248.009 96.122-39.076 0-76.729-6.090-112.062-17.373 29.744-45.189 25.313-107.382-13.293-147.505-43.612-45.326-114.32-45.326-157.932 0-4.727 4.913-8.942 10.157-12.645 15.661-45.287-61.155-72.068-136.841-72.068-218.782 0-118.057 55.592-223.13 142.026-290.469 7.715 22.89 20.376 44.381 37.982 62.678 62.679 65.143 164.301 65.143 226.98 0 34.342-35.691 49.868-83.533 46.578-130.21 157.57 37.521 275.851 176.374 282.169 343.884-8.891-17.777-20.515-34.462-34.871-49.382-75.425-78.391-197.714-78.391-273.139 0s-75.426 205.485 0 283.875c50.995 53 123.412 70.167 188.284 51.5z" />
-<glyph unicode="&#x1f329;" d="M694.627 310.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
-<glyph unicode="&#x1f32a;" d="M310.627 438.627c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
-<glyph unicode="&#x1f32b;" d="M495.306 795.805c11.798-12.262 11.798-32.143 0-44.405s-30.927-12.262-42.725 0c-11.798 12.262-11.798 32.143 0 44.405s30.927 12.262 42.725 0z" />
-<glyph unicode="&#x1f32c;" d="M310.627 566.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
-<glyph unicode="&#x1f32d;" d="M511.982 243.854c50.758-52.753 50.758-138.775 0-191.528-50.090-52.059-130.772-52.059-180.862 0-50.758 52.753-50.758 138.775 0 191.528 50.090 52.059 130.772 52.059 180.862 0l46.118 44.374c-75.268 78.226-197.831 78.226-273.099 0-74.6-77.532-74.6-202.744 0-280.276 75.268-78.227 197.831-78.227 273.099 0 74.6 77.532 74.6 202.744 0 280.276l-46.119-44.374z" />
-<glyph unicode="&#x1f32e;" d="M347.639 838.905c31.691-32.936 31.691-86.829 0-119.766-31.023-32.242-80.791-32.242-111.813 0-31.691 32.937-31.691 86.83 0 119.766 31.023 32.243 80.791 32.243 111.813 0l46.119 44.374c-56.2 58.411-147.85 58.411-204.051 0-55.533-57.715-55.533-150.799 0-208.514 56.2-58.41 147.85-58.41 204.050 0 55.533 57.716 55.533 150.799 0 208.515l-46.118-44.374z" />
-<glyph unicode="&#x1f32f;" d="M805.858 692.021c63.505-66 63.505-173.501 0-239.501-62.836-65.307-164.184-65.307-227.021 0-63.505 66.001-63.505 173.501 0 239.501 62.836 65.307 164.184 65.307 227.021 0l46.119 44.374c-88.014 91.475-231.244 91.475-319.258 0-87.347-90.779-87.347-237.47 0-328.25 88.014-91.474 231.244-91.474 319.258 0 87.347 90.779 87.347 237.47 0 328.25l-46.118-44.374z" />
-</font></defs></svg>
\ No newline at end of file
+    <metadata>Generated by IcoMoon</metadata>
+    <defs>
+        <font id="neo4j-world" horiz-adv-x="1024">
+            <font-face units-per-em="1024" ascent="960" descent="-64" />
+            <missing-glyph horiz-adv-x="1024" />
+            <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+            <glyph unicode="&#xe900;" glyph-name="neo4j-outline-16px"
+                d="M580.391 94.263c65.059 17.928 124.592 53.261 173.105 103.681 63.786 66.293 102.034 151.987 110.422 243.201l-63.731 5.861c-7.076-76.949-39.241-149.014-92.81-204.687-40.523-42.115-89.991-71.475-143.989-86.355l17.002-61.7zM730.337 782.51c-99.952 88.27-235.881 116.754-360.249 77.963l19.056-61.097c103.099 32.156 215.72 8.557 298.828-64.837l42.365 47.971zM173.992 718.593c-114.535-157.358-100.61-379.733 34.979-520.649 11.041-11.475 22.669-22.187 34.833-32.105l40.444 49.602c-10.168 8.29-19.901 17.257-29.158 26.878-113.958 118.436-125.717 306.218-29.352 438.612l-51.745 37.663zM694.627 310.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM310.627 438.627c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM310.627 566.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0zM511.982 243.854c50.758-52.753 50.758-138.775 0-191.528-50.090-52.059-130.772-52.059-180.862 0-50.758 52.753-50.758 138.775 0 191.528 50.090 52.059 130.772 52.059 180.862 0l46.118 44.374c-75.268 78.226-197.831 78.226-273.099 0-74.6-77.532-74.6-202.744 0-280.276 75.268-78.227 197.831-78.227 273.099 0 74.6 77.532 74.6 202.744 0 280.276l-46.119-44.374zM347.639 838.905c31.691-32.936 31.691-86.829 0-119.766-31.023-32.242-80.791-32.242-111.813 0-31.691 32.937-31.691 86.83 0 119.766 31.023 32.243 80.791 32.243 111.813 0l46.119 44.374c-56.2 58.411-147.85 58.411-204.051 0-55.533-57.715-55.533-150.799 0-208.514 56.2-58.41 147.85-58.41 204.050 0 55.533 57.716 55.533 150.799 0 208.515l-46.118-44.374zM805.858 692.021c63.505-66 63.505-173.501 0-239.501-62.836-65.307-164.184-65.307-227.021 0-63.505 66.001-63.505 173.501 0 239.501 62.836 65.307 164.184 65.307 227.021 0l46.119 44.374c-88.014 91.475-231.244 91.475-319.258 0-87.347-90.779-87.347-237.47 0-328.25 88.014-91.474 231.244-91.474 319.258 0 87.347 90.779 87.347 237.47 0 328.25l-46.118-44.374z" />
+            <glyph unicode="&#xe909;"
+                d="M776.235 790.633c-9.815 9.311-20.122 18.109-30.878 26.351-100.148 83.985-233.88 110.443-356.482 72.432l3.817-12.311c-0.292-0.095-0.585-0.191-0.877-0.287 32.181-46.655 28.014-111.841-12.501-153.697-45.16-46.654-118.379-46.654-163.539 0-4.948 5.112-9.354 10.571-13.217 16.302-0.149-0.202-0.297-0.404-0.445-0.606l-11.171 8.18c-115.905-158.286-101.8-382.184 35.37-523.889 11.161-11.53 22.911-22.29 35.199-32.249l10.074 12.43c7.338 27.947 21.628 54.352 42.869 76.295 64.904 67.051 170.134 67.051 235.039 0 38.289-39.556 53.99-93.61 47.103-145.056l4.227-15.432c65.601 17.969 125.649 53.394 174.646 104.012 28.059 28.987 51.236 61.671 69.168 96.906 32.667 56.478 51.364 122.048 51.364 191.985 0 0.252 0 0.505-0.001 0.757-9.731-23.264-23.796-45.057-42.198-64.066-78.103-80.687-204.733-80.687-282.837 0s-78.103 211.506 0 292.192c55.522 57.359 135.568 73.943 205.27 49.751z" />
+            <glyph unicode="&#xe90a;"
+                d="M727.557 339.461c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
+            <glyph unicode="&#xe90b;"
+                d="M673.917 270.194c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
+            <glyph unicode="&#xe90c;"
+                d="M343.445 387.42c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
+            <glyph unicode="&#xe90d;"
+                d="M298.763 468.346c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
+            <glyph unicode="&#xe90e;"
+                d="M497.895 854.75c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.622-44.243 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.243 0z" />
+            <glyph unicode="&#xe90f;"
+                d="M569.884 824.87c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
+            <glyph unicode="&#xe910;"
+                d="M276.669 653.266c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0z" />
+            <glyph unicode="&#xe911;"
+                d="M280.89 563.253c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.622-12.217 33.085 0 45.706s32.025 12.621 44.242 0z" />
+            <glyph unicode="&#xe912;"
+                d="M537.996 268.457c58.899-60.848 58.899-159.71 0-220.557-58.617-60.556-153.43-60.556-212.046 0-58.9 60.848-58.9 159.71 0 220.557 58.617 60.555 153.43 60.555 212.046 0l22.992 22.256c-71.192 73.547-186.839 73.547-258.031 0-70.91-73.254-70.91-191.815 0-265.070 71.192-73.547 186.839-73.547 258.031 0 70.909 73.254 70.909 191.815 0 265.069l-22.993-22.256z" />
+            <glyph unicode="&#xe913;"
+                d="M367.818 880.941c39.155-40.45 39.155-106.242 0-146.693-38.872-40.158-101.674-40.158-140.546 0-39.155 40.451-39.155 106.243 0 146.693 38.872 40.159 101.674 40.159 140.546 0l22.993 22.256c-51.448 53.15-135.084 53.15-186.532 0-51.165-52.857-51.165-138.348 0-191.205 51.448-53.15 135.084-53.15 186.532 0 51.165 52.858 51.165 138.348 0 191.205l-22.992-22.256z" />
+            <glyph unicode="&#xe914;"
+                d="M842.305 729.754c72.098-74.483 72.098-195.453 0-269.936-71.815-74.191-188.029-74.191-259.844 0-72.099 74.483-72.099 195.453 0 269.936 71.815 74.191 188.029 74.191 259.844 0l22.993 22.256c-84.391 87.183-221.438 87.183-305.829 0-84.108-86.89-84.108-227.558 0-314.448 84.391-87.183 221.438-87.183 305.829 0 84.108 86.89 84.108 227.558 0 314.448l-22.992-22.256z" />
+            <glyph unicode="&#xe915;" glyph-name="neo4j-outline-32px"
+                d="M600.822 119.097c65.601 17.969 125.649 53.394 174.646 104.012 64.515 66.649 103.217 152.839 111.711 244.654l-31.864 2.948c-7.831-84.651-43.464-164.006-102.84-225.345-44.997-46.486-100.020-78.946-160.108-95.405l8.454-30.863zM752.060 811.233c-100.832 88.514-237.826 117.048-363.184 78.183l9.476-30.565c114.776 35.584 240.175 9.465 332.598-71.667l21.111 24.049zM190.942 746.998c-115.905-158.286-101.8-382.184 35.37-523.889 11.161-11.53 22.911-22.29 35.199-32.249l20.149 24.86c-11.288 9.148-22.088 19.039-32.355 29.645-126.274 130.449-139.284 336.958-32.544 482.727l-25.818 18.905zM727.557 339.461c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM673.917 270.194c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM343.445 387.42c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM298.763 468.346c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM497.895 854.75c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.622-44.243 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.621 44.243 0zM569.884 824.87c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM276.669 653.266c12.217-12.621 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.621-12.217 33.085 0 45.706s32.025 12.622 44.242 0zM280.89 563.253c12.217-12.622 12.217-33.085 0-45.706s-32.025-12.621-44.242 0c-12.217 12.622-12.217 33.085 0 45.706s32.025 12.621 44.242 0zM537.996 268.457c58.899-60.848 58.899-159.71 0-220.557-58.617-60.556-153.43-60.556-212.046 0-58.9 60.848-58.9 159.71 0 220.557 58.617 60.555 153.43 60.555 212.046 0l22.992 22.256c-71.192 73.547-186.839 73.547-258.031 0-70.91-73.254-70.91-191.815 0-265.070 71.192-73.547 186.839-73.547 258.031 0 70.909 73.254 70.909 191.815 0 265.069l-22.993-22.256zM367.818 880.941c39.155-40.45 39.155-106.242 0-146.693-38.872-40.158-101.674-40.158-140.546 0-39.155 40.451-39.155 106.243 0 146.693 38.872 40.159 101.674 40.159 140.546 0l22.993 22.256c-51.448 53.15-135.084 53.15-186.532 0-51.165-52.857-51.165-138.348 0-191.205 51.448-53.15 135.084-53.15 186.532 0 51.165 52.858 51.165 138.348 0 191.205l-22.992-22.256zM842.305 729.754c72.098-74.483 72.098-195.453 0-269.936-71.815-74.191-188.029-74.191-259.844 0-72.099 74.483-72.099 195.453 0 269.936 71.815 74.191 188.029 74.191 259.844 0l22.993 22.256c-84.391 87.183-221.438 87.183-305.829 0-84.108-86.89-84.108-227.558 0-314.448 84.391-87.183 221.438-87.183 305.829 0 84.108 86.89 84.108 227.558 0 314.448l-22.992-22.256z" />
+            <glyph unicode="&#xe916;"
+                d="M779.547 804.899c-72.593 66.513-169.33 107.101-275.547 107.101-43.491 0-85.393-6.805-124.698-19.408 36.503-49.023 32.543-118.752-11.882-163.282-48.773-48.888-127.849-48.888-176.622 0-5.498 5.511-10.377 11.408-14.635 17.604-50.367-67.864-80.163-151.91-80.163-242.915 0-129.721 60.539-245.302 154.905-320.032 7.874 29.514 23.363 57.412 46.465 80.568 70.097 70.262 183.745 70.262 253.842 0 42.594-42.695 59.306-101.508 50.136-156.851 171.399 41.957 300.299 192.204 310.059 374.1-8.717-14.25-19.23-27.707-31.54-40.045-84.351-84.551-221.112-84.551-305.463 0s-84.352 221.633 0 306.183c55.613 55.745 134.008 74.737 205.145 56.976z" />
+            <glyph unicode="&#xe917;"
+                d="M743.521 327.28c13.195-13.226 13.195-34.669 0-47.895s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.895s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe918;"
+                d="M685.59 254.696c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe919;"
+                d="M328.681 377.536c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91a;"
+                d="M280.424 462.336c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91b;"
+                d="M495.486 867.243c13.195-13.226 13.195-34.669 0-47.894s-34.588-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91c;"
+                d="M573.235 835.932c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91d;"
+                d="M256.562 656.111c13.195-13.226 13.195-34.669 0-47.894s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.894s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91e;"
+                d="M261.121 561.788c13.195-13.226 13.195-34.669 0-47.895s-34.587-13.226-47.782 0c-13.195 13.226-13.195 34.669 0 47.895s34.587 13.226 47.782 0z" />
+            <glyph unicode="&#xe91f;"
+                d="M545.548 258.887c66.981-67.139 66.981-176.001 0-243.139-66.971-67.129-175.544-67.129-242.515 0-66.982 67.139-66.982 176.001 0 243.139 66.971 67.129 175.544 67.129 242.515 0l11.327 11.3c-73.223 73.395-191.947 73.395-265.169 0-73.212-73.384-73.212-192.356 0-265.74 73.222-73.395 191.947-73.395 265.169 0 73.212 73.384 73.212 192.356 0 265.74l-11.327-11.3z" />
+            <glyph unicode="&#xe920;"
+                d="M361.756 900.699c45.658-45.765 45.658-119.973 0-165.738-45.647-45.755-119.648-45.755-165.295 0-45.658 45.765-45.658 119.973 0 165.738 45.647 45.755 119.648 45.755 165.295 0l11.327 11.3c-51.898 52.022-136.050 52.022-187.949 0-51.888-52.010-51.888-136.328 0-188.339 51.898-52.021 136.050-52.021 187.949 0 51.888 52.011 51.888 136.329 0 188.339l-11.327-11.3z" />
+            <glyph unicode="&#xe921;"
+                d="M874.202 742.273c81.236-81.427 81.236-213.455 0-294.883-81.226-81.418-212.911-81.418-294.136 0-81.236 81.427-81.236 213.455 0 294.883 81.226 81.418 212.911 81.418 294.136 0l11.327 11.3c-87.477 87.684-229.313 87.684-316.791 0-87.467-87.673-87.467-229.811 0-317.484 87.477-87.684 229.313-87.684 316.791 0 87.467 87.673 87.467 229.811 0 317.484l-11.327-11.3z" />
+            <glyph unicode="&#xe922;" glyph-name="neo4j-outline-64px"
+                d="M604.138 104.803c69.228 18.399 132.614 54.681 184.376 106.564 68.225 68.385 109.167 156.855 118.158 251.143l-15.928 1.519c-8.641-90.627-47.98-175.63-113.557-241.361-49.752-49.87-110.644-84.724-177.158-102.401l4.11-15.463zM763.773 815.132c-106.443 90.661-250.96 119.867-383.214 80.083l4.609-15.322c127.091 38.23 265.958 10.166 368.231-76.942l10.375 12.181zM171.533 749.244c-122.622-162.478-107.69-392.452 37.395-537.877 11.798-11.826 24.215-22.858 37.198-33.067l9.89 12.577c-12.479 9.813-24.416 20.419-35.761 31.791-139.434 139.761-153.786 360.803-35.951 516.939l-12.771 9.638zM737.858 321.63c10.079-10.103 10.079-26.491 0-36.595-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.595 10.069 10.092 26.386 10.092 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.349-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.349 16.31 42.846 0 59.195l-11.327-11.3zM679.926 249.046c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.348-16.31-42.846 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.846 0 59.195l-11.327-11.3zM323.017 371.886c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM274.76 456.686c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM489.823 861.592c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.789-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM567.572 830.281c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM250.899 650.461c10.079-10.103 10.079-26.491 0-36.594-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.789 16.359-59.109 0-16.31-16.348-16.31-42.847 0-59.195 16.32-16.359 42.788-16.359 59.109 0 16.31 16.348 16.31 42.847 0 59.195l-11.327-11.3zM255.458 556.138c10.079-10.103 10.079-26.491 0-36.595-10.069-10.093-26.386-10.093-36.455 0-10.079 10.103-10.079 26.491 0 36.594 10.069 10.093 26.386 10.093 36.455 0l11.327 11.3c-16.32 16.359-42.788 16.359-59.109 0-16.31-16.349-16.31-42.847 0-59.195 16.32-16.359 42.789-16.359 59.109 0 16.31 16.349 16.31 42.847 0 59.195l-11.327-11.3zM545.548 258.887c66.981-67.139 66.981-176.001 0-243.139-66.971-67.129-175.544-67.129-242.515 0-66.982 67.139-66.982 176.001 0 243.139 66.971 67.129 175.544 67.129 242.515 0l11.327 11.3c-73.223 73.395-191.947 73.395-265.169 0-73.212-73.384-73.212-192.356 0-265.74 73.222-73.395 191.947-73.395 265.169 0 73.212 73.384 73.212 192.356 0 265.74l-11.327-11.3zM361.756 900.699c45.658-45.765 45.658-119.973 0-165.738-45.647-45.755-119.648-45.755-165.295 0-45.658 45.765-45.658 119.973 0 165.738 45.647 45.755 119.648 45.755 165.295 0l11.327 11.3c-51.898 52.022-136.050 52.022-187.949 0-51.888-52.010-51.888-136.328 0-188.339 51.898-52.021 136.050-52.021 187.949 0 51.888 52.011 51.888 136.329 0 188.339l-11.327-11.3zM874.202 742.273c81.236-81.427 81.236-213.455 0-294.883-81.226-81.418-212.911-81.418-294.136 0-81.236 81.427-81.236 213.455 0 294.883 81.226 81.418 212.911 81.418 294.136 0l11.327 11.3c-87.477 87.684-229.313 87.684-316.791 0-87.467-87.673-87.467-229.811 0-317.484 87.477-87.684 229.313-87.684 316.791 0 87.467 87.673 87.467 229.811 0 317.484l-11.327-11.3z" />
+            <glyph unicode="&#x1f328;"
+                d="M744.062 765.708c-65.417 59.708-152.461 96.122-248.009 96.122-39.076 0-76.729-6.090-112.062-17.373 29.744-45.189 25.313-107.382-13.293-147.505-43.612-45.326-114.32-45.326-157.932 0-4.727 4.913-8.942 10.157-12.645 15.661-45.287-61.155-72.068-136.841-72.068-218.782 0-118.057 55.592-223.13 142.026-290.469 7.715 22.89 20.376 44.381 37.982 62.678 62.679 65.143 164.301 65.143 226.98 0 34.342-35.691 49.868-83.533 46.578-130.21 157.57 37.521 275.851 176.374 282.169 343.884-8.891-17.777-20.515-34.462-34.871-49.382-75.425-78.391-197.714-78.391-273.139 0s-75.426 205.485 0 283.875c50.995 53 123.412 70.167 188.284 51.5z" />
+            <glyph unicode="&#x1f329;"
+                d="M694.627 310.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
+            <glyph unicode="&#x1f32a;"
+                d="M310.627 438.627c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
+            <glyph unicode="&#x1f32b;"
+                d="M495.306 795.805c11.798-12.262 11.798-32.143 0-44.405s-30.927-12.262-42.725 0c-11.798 12.262-11.798 32.143 0 44.405s30.927 12.262 42.725 0z" />
+            <glyph unicode="&#x1f32c;"
+                d="M310.627 566.628c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0c-12.497 12.497-12.497 32.758 0 45.255s32.758 12.497 45.255 0z" />
+            <glyph unicode="&#x1f32d;"
+                d="M511.982 243.854c50.758-52.753 50.758-138.775 0-191.528-50.090-52.059-130.772-52.059-180.862 0-50.758 52.753-50.758 138.775 0 191.528 50.090 52.059 130.772 52.059 180.862 0l46.118 44.374c-75.268 78.226-197.831 78.226-273.099 0-74.6-77.532-74.6-202.744 0-280.276 75.268-78.227 197.831-78.227 273.099 0 74.6 77.532 74.6 202.744 0 280.276l-46.119-44.374z" />
+            <glyph unicode="&#x1f32e;"
+                d="M347.639 838.905c31.691-32.936 31.691-86.829 0-119.766-31.023-32.242-80.791-32.242-111.813 0-31.691 32.937-31.691 86.83 0 119.766 31.023 32.243 80.791 32.243 111.813 0l46.119 44.374c-56.2 58.411-147.85 58.411-204.051 0-55.533-57.715-55.533-150.799 0-208.514 56.2-58.41 147.85-58.41 204.050 0 55.533 57.716 55.533 150.799 0 208.515l-46.118-44.374z" />
+            <glyph unicode="&#x1f32f;"
+                d="M805.858 692.021c63.505-66 63.505-173.501 0-239.501-62.836-65.307-164.184-65.307-227.021 0-63.505 66.001-63.505 173.501 0 239.501 62.836 65.307 164.184 65.307 227.021 0l46.119 44.374c-88.014 91.475-231.244 91.475-319.258 0-87.347-90.779-87.347-237.47 0-328.25 88.014-91.474 231.244-91.474 319.258 0 87.347 90.779 87.347 237.47 0 328.25l-46.118-44.374z" />
+        </font>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/browser/styles/themes.ts b/src/browser/styles/themes.ts
index 9c62ae376b9..fd7ab87e874 100644
--- a/src/browser/styles/themes.ts
+++ b/src/browser/styles/themes.ts
@@ -90,6 +90,7 @@ export const base = {
   frameBorder: 'none',
   inFrameBorder: '1px solid #e6e9ef',
   topicBorder: '1px solid #dadada',
+  drawerSeparator: '1px solid #424650',
 
   // Frame
   frameSidebarBackground: '#F8F9FB',
diff --git a/src/browser/styles/workaround-monaco-scroll-bug.css b/src/browser/styles/workaround-monaco-scroll-bug.css
new file mode 100644
index 00000000000..f92b8adf641
--- /dev/null
+++ b/src/browser/styles/workaround-monaco-scroll-bug.css
@@ -0,0 +1,3 @@
+body .monaco-aria-container {
+  margin: -1px;
+}
diff --git a/src/shared/globalState.ts b/src/shared/globalState.ts
index b2e417c0027..b38911b2f25 100644
--- a/src/shared/globalState.ts
+++ b/src/shared/globalState.ts
@@ -57,6 +57,7 @@ import { NAME as folders, Folder } from './modules/favorites/foldersDuck'
 import { NAME as commands } from './modules/commands/commandsDuck'
 import { NAME as udc, udcState } from './modules/udc/udcDuck'
 import { NAME as app } from './modules/app/appDuck'
+import { NAME as guides, GuideState } from './modules/guides/guidesDuck'
 import {
   NAME as experimentalFeatures,
   initialState as experimentalFeaturesInitialState
@@ -83,4 +84,5 @@ export interface GlobalState {
   [udc]: udcState
   [app]: Record<string, unknown>
   [experimentalFeatures]: typeof experimentalFeaturesInitialState
+  [guides]: GuideState
 }
diff --git a/src/shared/modules/commands/helpers/play.ts b/src/shared/modules/commands/helpers/play.ts
index e412f74349b..a5a73a71dce 100644
--- a/src/shared/modules/commands/helpers/play.ts
+++ b/src/shared/modules/commands/helpers/play.ts
@@ -23,7 +23,7 @@ import { cleanHtml } from 'services/remoteUtils'
 import remote from 'services/remote'
 
 export const fetchRemoteGuide = (url: any, allowlist = null) => {
-  return new Promise((resolve, reject) => {
+  return new Promise<void>((resolve, reject) => {
     if (!hostIsAllowed(url, allowlist)) {
       return reject(
         new Error('Hostname is not allowed according to server allowlist')
diff --git a/src/shared/modules/currentUser/currentUserDuck.ts b/src/shared/modules/currentUser/currentUserDuck.ts
index f93d44ddc25..ac1f3793e9c 100644
--- a/src/shared/modules/currentUser/currentUserDuck.ts
+++ b/src/shared/modules/currentUser/currentUserDuck.ts
@@ -56,7 +56,7 @@ export function getCurrentUser(state: any) {
 /**
  * Reducer
  */
-export default function user(state = initialState, action: any) {
+export default function reducer(state = initialState, action: any) {
   switch (action.type) {
     case APP_START:
       return { ...initialState, ...state }
diff --git a/src/shared/modules/editor/editorDuck.ts b/src/shared/modules/editor/editorDuck.ts
index d4151892ebe..22666a709cf 100644
--- a/src/shared/modules/editor/editorDuck.ts
+++ b/src/shared/modules/editor/editorDuck.ts
@@ -65,6 +65,7 @@ export const NOT_SUPPORTED_URL_PARAM_COMMAND =
 // Supported commands
 const validCommandTypes: { [key: string]: (args: string[]) => string } = {
   play: args => `:play ${args.join(' ')}`,
+  guide: args => `:guide ${args.join(' ')}`,
   edit: args => args.join('\n'),
   param: args => `:param ${args.join(' ')}`,
   params: args => `:params ${args.join(' ')}`
@@ -150,7 +151,8 @@ export const populateEditorFromUrlEpic: Epic<any, GlobalState> = some$ => {
 
       // Play command is considered safe and can run automatically
       // When running the explicit command, also set flag to skip any implicit init commands
-      if (commandType === 'play') {
+
+      if (['play', 'guide'].includes(commandType)) {
         return [
           executeCommand(fullCommand, { source: commandSources.url }),
           { type: DISABLE_IMPLICIT_INIT_COMMANDS }
diff --git a/src/shared/modules/guides/guidesDuck.ts b/src/shared/modules/guides/guidesDuck.ts
new file mode 100644
index 00000000000..82b1b7e1423
--- /dev/null
+++ b/src/shared/modules/guides/guidesDuck.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import docs from 'browser/documentation'
+import { GlobalState } from 'shared/globalState'
+
+export const NAME = 'guides'
+export const START_GUIDE = 'sidebar/START_GUIDE'
+export const GOTO_SLIDE = 'sidebar/GOTO_SLIDE'
+
+export const isDefaultGuide = (guide: Guide): boolean =>
+  guide.title === defaultGuide.title
+
+export const getGuide = (state: GlobalState): Guide => state[NAME].guide
+export type Guide = {
+  currentSlide: number
+  title: string
+  slides: JSX.Element[]
+}
+
+const defaultGuide: Guide = {
+  ...docs.guide.chapters.index,
+  currentSlide: 0
+}
+export interface GuideState {
+  guide: Guide
+}
+const initialState: GuideState = {
+  guide: defaultGuide
+}
+
+type GuideAction = StartAction | GotoSlideAction
+
+interface StartAction {
+  type: typeof START_GUIDE
+  guide: Guide
+}
+
+interface GotoSlideAction {
+  type: typeof GOTO_SLIDE
+  slideIndex: number
+}
+
+export default function reducer(
+  state = initialState,
+  action: GuideAction
+): GuideState {
+  switch (action.type) {
+    case START_GUIDE:
+      return { ...state, guide: action.guide }
+    case GOTO_SLIDE:
+      return {
+        ...state,
+        guide: { ...state.guide, currentSlide: action.slideIndex }
+      }
+    default:
+      return state
+  }
+}
+
+export function startGuide(guide: Guide = defaultGuide): StartAction {
+  return { type: START_GUIDE, guide }
+}
+
+export function gotoSlide(slideIndex: number): GotoSlideAction {
+  return { type: GOTO_SLIDE, slideIndex }
+}
diff --git a/src/shared/modules/history/historyDuck.test.ts b/src/shared/modules/history/historyDuck.test.ts
index 7486e556198..bb28a77dafb 100644
--- a/src/shared/modules/history/historyDuck.test.ts
+++ b/src/shared/modules/history/historyDuck.test.ts
@@ -35,10 +35,10 @@ describe('editor reducer', () => {
     // Given
     const helpAction = actions.addHistory(':help', 20)
     const historyAction = actions.addHistory(':history', 20)
-    const initalState = [':help']
+    const initialState = [':help']
 
     // When
-    const nextState = reducer(initalState, helpAction)
+    const nextState = reducer(initialState, helpAction)
 
     // Then
     expect(nextState).toEqual([':help'])
@@ -51,18 +51,18 @@ describe('editor reducer', () => {
   })
 
   test('takes editor.actionTypes.SET_MAX_HISTORY into account', () => {
-    const initalState = [':help', ':help', ':help']
+    const initialState = [':help', ':help', ':help']
 
     const helpAction = actions.addHistory(':history', 3)
-    const nextState = reducer(initalState, helpAction)
+    const nextState = reducer(initialState, helpAction)
     expect(nextState).toEqual([':history', ':help', ':help'])
   })
 
   test('handles editor.actionTypes.CLEAR_HISTORY', () => {
     // Given
-    const initalState = [':emily']
+    const initialState = [':emily']
     const anAction = actions.addHistory(':elliot', 3)
-    const state = reducer(initalState, anAction)
+    const state = reducer(initialState, anAction)
 
     // When
     const nextState = reducer(state, actions.clearHistory())
diff --git a/src/shared/modules/sidebar/sidebarDuck.ts b/src/shared/modules/sidebar/sidebarDuck.ts
index 6a23b62490d..7d982881164 100644
--- a/src/shared/modules/sidebar/sidebarDuck.ts
+++ b/src/shared/modules/sidebar/sidebarDuck.ts
@@ -41,6 +41,8 @@ export function getScriptDraftId(state: GlobalState): string | null {
   return state[NAME].scriptId || null
 }
 
+export const GUIDE_DRAWER_ID = 'guides'
+
 // SIDEBAR
 type DrawerId =
   | 'dbms'
@@ -51,6 +53,7 @@ type DrawerId =
   | 'about'
   | 'project files'
   | 'settings'
+  | typeof GUIDE_DRAWER_ID
   | null
 export interface SidebarState {
   drawer: DrawerId | null
diff --git a/src/shared/rootReducer.ts b/src/shared/rootReducer.ts
index 65c4fe96dfb..27c363d8262 100644
--- a/src/shared/rootReducer.ts
+++ b/src/shared/rootReducer.ts
@@ -62,6 +62,7 @@ import commandsReducer, {
 } from 'shared/modules/commands/commandsDuck'
 import udcReducer, { NAME as udc } from 'shared/modules/udc/udcDuck'
 import appReducer, { NAME as app } from 'shared/modules/app/appDuck'
+import guideReducer, { NAME as guides } from 'shared/modules/guides/guidesDuck'
 import experimentalFeaturesReducer, {
   NAME as experimentalFeatures
 } from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'
@@ -86,5 +87,6 @@ export default {
   [commands]: commandsReducer,
   [udc]: udcReducer,
   [app]: appReducer,
+  [guides]: guideReducer,
   [experimentalFeatures]: experimentalFeaturesReducer
 }
diff --git a/src/shared/services/commandInterpreterHelper.ts b/src/shared/services/commandInterpreterHelper.ts
index af894228239..45e04771b47 100644
--- a/src/shared/services/commandInterpreterHelper.ts
+++ b/src/shared/services/commandInterpreterHelper.ts
@@ -17,6 +17,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+
 import * as Sentry from '@sentry/react'
 import bolt from 'services/bolt/bolt'
 import * as frames from 'shared/modules/stream/streamDuck'
@@ -35,6 +36,8 @@ import {
   useDb,
   getUseDb
 } from 'shared/modules/connections/connectionsDuck'
+import { open } from 'shared/modules/sidebar/sidebarDuck'
+import { startGuide } from 'shared/modules/guides/guidesDuck'
 import { getParams } from 'shared/modules/params/paramsDuck'
 import { getUserCapabilities } from 'shared/modules/features/featuresDuck'
 import {
@@ -99,6 +102,7 @@ import {
 } from './commandUtils'
 import { unescapeCypherIdentifier } from './utils'
 import { getLatestFromFrameStack } from 'browser/modules/Stream/stream.utils'
+import { resolveGuide } from './guideResolverHelper'
 
 const PLAY_FRAME_TYPES = ['play', 'play-remote']
 
@@ -467,6 +471,31 @@ const availableCommands = [
       }
     }
   },
+  {
+    name: 'guide',
+    match: (cmd: any) => /^guide(\s|$)/.test(cmd),
+    exec(action: any, put: any, store: any) {
+      const guideName = action.cmd.substr(':guide'.length).trim()
+      if (!guideName) {
+        put(startGuide())
+        put(open('guides'))
+        return
+      }
+
+      const initialSlide = tryGetRemoteInitialSlideFromUrl(action.cmd)
+      resolveGuide(guideName, store.getState()).then(({ slides, title }) => {
+        put(
+          startGuide({
+            currentSlide: initialSlide,
+            title,
+            slides
+          })
+        )
+
+        put(open('guides'))
+      })
+    }
+  },
   {
     name: 'play-remote',
     match: (cmd: any) => /^play(\s|$)https?/.test(cmd),
diff --git a/src/shared/services/commandUtils.ts b/src/shared/services/commandUtils.ts
index b2051d2ad4f..d994812ca73 100644
--- a/src/shared/services/commandUtils.ts
+++ b/src/shared/services/commandUtils.ts
@@ -103,7 +103,7 @@ const camelToSnake = (name: any, separator: any) => {
     .toLowerCase()
 }
 
-export const transformCommandToHelpTopic = (inputStr: any) =>
+export const transformCommandToHelpTopic = (inputStr?: string): string =>
   [inputStr || '']
     .map(stripPound)
     .map(getHelpTopic)
diff --git a/src/shared/services/exceptions.ts b/src/shared/services/exceptions.ts
index 7d03eaa19b2..9ed68c99445 100644
--- a/src/shared/services/exceptions.ts
+++ b/src/shared/services/exceptions.ts
@@ -140,7 +140,7 @@ export function DatabaseUnavailableError({
   return {
     type,
     code: type,
-    message: `Database "${dbName}" is unavailable, its status is "${dbMeta.status}."`
+    message: `Database "${dbName}" is unavailable, its status is "${dbMeta.status}".`
   }
 }
 
diff --git a/src/shared/services/guideResolverHelper.tsx b/src/shared/services/guideResolverHelper.tsx
new file mode 100644
index 00000000000..c865cf9d533
--- /dev/null
+++ b/src/shared/services/guideResolverHelper.tsx
@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) "Neo4j"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import MdxSlide from 'browser/modules/Docs/MDX/MdxSlide'
+import Slide from 'browser/modules/Carousel/Slide'
+import docs, { isGuideChapter } from 'browser/documentation'
+import guideUnfound from 'browser/documentation/sidebar-guides/unfound'
+import {
+  addProtocolsToUrlList,
+  extractAllowlistFromConfigString,
+  resolveAllowlistWildcard
+} from './utils'
+import { fetchRemoteGuide } from 'shared/modules/commands/helpers/play'
+import {
+  getDefaultRemoteContentHostnameAllowlist,
+  getRemoteContentHostnameAllowlist
+} from 'shared/modules/dbMeta/dbMetaDuck'
+import { splitMdxSlides } from 'browser/modules/Docs/MDX/splitMdx'
+import {
+  StyledCypherErrorMessage,
+  StyledDiv,
+  StyledErrorH4,
+  StyledHelpContent,
+  StyledHelpDescription,
+  StyledHelpFrame,
+  StyledPreformattedArea
+} from 'browser/modules/Stream/styled'
+
+const { chapters } = docs.guide
+
+export async function resolveGuide(
+  guideName: string,
+  state: any
+): Promise<{ slides: JSX.Element[]; title: string }> {
+  const isUrl = guideName.startsWith('http')
+  if (isUrl) {
+    return await resolveRemoteGuideFromURL(guideName, state)
+  }
+
+  if (isGuideChapter(guideName)) {
+    return chapters[guideName]
+  }
+
+  try {
+    return await resolveRemoteGuideFromName(guideName, state)
+  } catch (e) {}
+
+  return guideUnfound
+}
+
+function mdxTextToSlides(mdx: string): JSX.Element[] {
+  return splitMdxSlides(mdx).map((slide, index) => (
+    // index is fine since we'll never move or delete slides
+    <MdxSlide key={index} mdx={slide} isSidebarSlide />
+  ))
+}
+
+function htmlTextToSlides(html: string): JSX.Element[] {
+  const tmpDiv = document.createElement('div')
+  tmpDiv.innerHTML = html
+  const htmlSlides = tmpDiv.getElementsByTagName('slide')
+  if (htmlSlides && htmlSlides.length) {
+    return Array.from(htmlSlides).map((slide, index) => (
+      <Slide key={index} html={slide.innerHTML} isSidebarSlide />
+    ))
+  }
+  return [<Slide key="first" html={html} isSidebarSlide />]
+}
+
+async function resolveRemoteGuideFromURL(
+  guideName: string,
+  state: any
+): Promise<{ slides: JSX.Element[]; title: string }> {
+  const url = guideName
+  const urlObject = new URL(url)
+  urlObject.href = url
+  const filenameExtension =
+    (urlObject.pathname.includes('.') && urlObject.pathname.split('.').pop()) ||
+    'html'
+  const allowlist = getRemoteContentHostnameAllowlist(state)
+
+  try {
+    const remoteGuide = await fetchRemoteGuide(url, allowlist)
+    const titleRegexMatch = remoteGuide.match(/<title>(.*?)<\/title>/)
+    const title = (titleRegexMatch && titleRegexMatch[1])?.trim() || guideName
+    if (['md', 'mdx'].includes(filenameExtension)) {
+      return {
+        slides: mdxTextToSlides(remoteGuide),
+        title
+      }
+    } else {
+      return {
+        slides: htmlTextToSlides(remoteGuide),
+        title
+      }
+    }
+  } catch (e) {
+    if (e.response && e.response.status === 404) {
+      return guideUnfound
+    }
+    return {
+      title: 'Error',
+      slides: [
+        <Slide key="first" isSidebarSlide>
+          <StyledHelpFrame>
+            <StyledHelpContent>
+              <StyledHelpDescription>
+                <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
+                <StyledErrorH4>Remote guide error</StyledErrorH4>
+              </StyledHelpDescription>
+              <StyledDiv>
+                <StyledPreformattedArea>
+                  {e.name}: {e.message}
+                </StyledPreformattedArea>
+              </StyledDiv>
+            </StyledHelpContent>
+          </StyledHelpFrame>
+        </Slide>
+      ]
+    }
+  }
+}
+
+async function resolveRemoteGuideFromName(
+  guideName: string,
+  state: any
+): Promise<{ slides: JSX.Element[]; title: string }> {
+  const allowlistStr = getRemoteContentHostnameAllowlist(state)
+  const allowlist = extractAllowlistFromConfigString(allowlistStr)
+  const defaultAllowlist = extractAllowlistFromConfigString(
+    getDefaultRemoteContentHostnameAllowlist(state)
+  )
+  const resolvedWildcardAllowlist = resolveAllowlistWildcard(
+    allowlist,
+    defaultAllowlist
+  )
+  const urlAllowlist = addProtocolsToUrlList(resolvedWildcardAllowlist)
+  const possibleGuidesUrls: string[] = urlAllowlist.map(
+    (url: string) => `${url}/${guideName}`
+  )
+
+  return possibleGuidesUrls
+    .reduce(
+      (promiseChain: Promise<any>, currentUrl: string) =>
+        promiseChain
+          .catch(() => fetchRemoteGuide(currentUrl, allowlistStr))
+          .then(r => Promise.resolve(r)),
+      Promise.reject(new Error())
+    )
+    .then(text => ({
+      slides: htmlTextToSlides(text),
+      title: guideName
+    }))
+}
diff --git a/src/shared/services/remoteUtils.ts b/src/shared/services/remoteUtils.ts
index 73e7880678f..e1fee32eccc 100644
--- a/src/shared/services/remoteUtils.ts
+++ b/src/shared/services/remoteUtils.ts
@@ -33,7 +33,7 @@ const removeOnHandlersFromHtml = (string: any) =>
     ''
   )
 
-export function cleanHtml(string: any) {
+export function cleanHtml(string: string): string {
   if (typeof string !== 'string') return string
   const stringWithoutHandlers = removeOnHandlersFromHtml(string)
   const stringWithoutScript = removeScriptTags(stringWithoutHandlers)