diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 4921b531d..7a15a744b 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -444,6 +444,44 @@ pre.fence
         color $ui-text-color
         background-color $ui-tag-backgroundColor
 
+.markdownIt-TOC-wrapper
+  list-style none
+  position fixed
+  right 0
+  top 0
+  margin-left 15px
+  z-index 1000
+  transition transform .2s ease-in-out
+  transform translateX(100%)
+
+  .markdownIt-TOC
+    display block
+    max-height 90vh
+    overflow-y auto
+    padding 25px
+    padding-left 38px
+
+  &,
+  &:before
+    background-color $ui-dark-backgroundColor
+    color: $ui-dark-text-color
+
+  &:hover
+    transform translateX(-15px)
+
+  &:before
+    content 'TOC'
+    position absolute
+    width 60px
+    height 30px
+    top 60px
+    left -29px
+    display flex
+    align-items center
+    justify-content center
+    transform-origin top left
+    transform rotate(-90deg)
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -511,6 +549,14 @@ body[data-theme="dark"]
         color $ui-dark-text-color
         background-color $ui-dark-tag-backgroundColor
 
+  .markdownIt-TOC-wrapper
+    &,
+    &:before
+      background-color darken(themeDarkBackground, 5%)
+      color themeDarkText
+
+
+themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
 themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
@@ -519,7 +565,7 @@ themeSolarizedDarkTableBorder = themeDarkBorder
 body[data-theme="solarized-dark"]
   color $ui-solarized-dark-text-color
   border-color themeDarkBorder
-  background-color $ui-solarized-dark-noteDetail-backgroundColor
+  background-color themeSolarizedDarkBackground
   table
     thead
       tr
@@ -554,6 +600,13 @@ body[data-theme="solarized-dark"]
         color $ui-solarized-dark-button--active-color
         background-color $ui-solarized-dark-button-backgroundColor
 
+  .markdownIt-TOC-wrapper
+    &,
+    &:before
+      background-color darken(themeSolarizedDarkBackground, 15%)
+      color themeDarkText
+
+themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
 themeMonokaiTableHead = themeMonokaiTableEven
@@ -562,7 +615,7 @@ themeMonokaiTableBorder = themeDarkBorder
 body[data-theme="monokai"]
   color $ui-monokai-text-color
   border-color themeDarkBorder
-  background-color $ui-monokai-noteDetail-backgroundColor
+  background-color themeMonokaiBackground
   table
     thead
       tr
@@ -600,6 +653,13 @@ body[data-theme="monokai"]
         color $ui-monokai-button--active-color
         background-color $ui-monokai-button-backgroundColor
 
+  .markdownIt-TOC-wrapper
+    &,
+    &:before
+      background-color darken(themeMonokaiBackground, 15%)
+      color themeDarkText
+
+themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
 themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
 themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
 themeDraculaTableHead = themeDraculaTableEven
@@ -608,7 +668,7 @@ themeDraculaTableBorder = themeDarkBorder
 body[data-theme="dracula"]
   color $ui-dracula-text-color
   border-color themeDarkBorder
-  background-color $ui-dracula-noteDetail-backgroundColor
+  background-color themeDraculaBackground
   table
     thead
       tr
@@ -645,3 +705,9 @@ body[data-theme="dracula"]
       .prev, .next
         color $ui-dracula-button--active-color
         background-color $ui-dracula-button-backgroundColor
+
+  .markdownIt-TOC-wrapper
+    &,
+    &:before
+      background-color darken(themeDraculaBackground, 15%)
+      color themeDarkText
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 57f981db2..d9b98a36b 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -128,12 +128,19 @@ class Markdown {
     this.md.use(require('markdown-it-abbr'))
     this.md.use(require('markdown-it-sub'))
     this.md.use(require('markdown-it-sup'))
-    this.md.use(markdownItTocAndAnchor, {
-      toc: true,
-      tocPattern: /\[TOC\]/i,
-      anchorLink: false,
-      appendIdToHeading: false
+
+    this.md.use(md => {
+      markdownItTocAndAnchor(md, {
+        toc: true,
+        tocPattern: /\[TOC\]/i,
+        anchorLink: false,
+        appendIdToHeading: false
+      })
+
+      md.renderer.rules.toc_open = () => '<div class="markdownIt-TOC-wrapper">'
+      md.renderer.rules.toc_close = () => '</div>'
     })
+
     this.md.use(require('./markdown-it-deflist'))
     this.md.use(require('./markdown-it-frontmatter'))
 
diff --git a/tests/lib/snapshots/markdown-test.js.md b/tests/lib/snapshots/markdown-test.js.md
index 1ebc0275e..37976ef10 100644
--- a/tests/lib/snapshots/markdown-test.js.md
+++ b/tests/lib/snapshots/markdown-test.js.md
@@ -87,7 +87,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `<p data-line="1"><ul class="markdownIt-TOC">␊
+    `<p data-line="1"><div class="markdownIt-TOC-wrapper"><ul class="markdownIt-TOC">␊
     <li><a href="#H1">H1</a>␊
     <ul>␊
     <li><a href="#H2">H2</a>␊
@@ -98,7 +98,7 @@ Generated by [AVA](https://ava.li).
     </ul>␊
     </li>␊
     </ul>␊
-    </p>␊
+    </div></p>␊
     <h1 id="H1" data-line="2">H1</h1>␊
     <h2 id="H2" data-line="3">H2</h2>␊
     <h3 id="H3" data-line="4">H3</h3>␊
@@ -226,39 +226,4 @@ Generated by [AVA](https://ava.li).
 > Snapshot 2
 
     `<p data-line="0">This is a &quot;QUOTE&quot;.</p>␊
-    
-
-## Markdown.render() should render PlantUML Ditaa correctly
-
-> Snapshot 1
-
-    `<img src="http://www.plantuml.com/plantuml/png/SoWkIImgISaiIKpaqjQ50cq51GLj93Q2mrMZ00NQO3cmHX3RJW4cKmDI4v9QKQ805a8nfyObCp6zA34NgCObFxiqDpMl1AIcHj4tCJqpLH5i18evG52TKbk3B8og1kmC0cvMKB1Im0NYkA2ckMRcANWabgQbvYau5YMbPfP0p4UOWmcqkHnIyrB0GG00" alt="uml diagram" />␊
     `
-
-## Markdown.render() should render PlantUML Gantt correctly
-
-> Snapshot 1
-
-    `<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgIK_CAodXYWueoY_9BwaiI5L8IItEJC-BLSX9B2ufLZ0qLKX9h2pcYWv9BIvHA82fWaiRu906crsia5YYW6cqUh52QbuAbmEG0DiE0000" alt="uml diagram" />␊
-    `
-
-## Markdown.render() should render PlantUML MindMaps correctly
-
-> Snapshot 1
-
-    `<img src="http://www.plantuml.com/plantuml/svg/JOzD3e8m44Rtd6BMtNW192IM5I29HEDsAbKdeLD2MvNRIsjCMCsRlFd9LpgFipV4Wy4f4o2r8kHC23Yhm3wi9A0X3XzeYNrgwx1H6wvb1KTjqtRJoYhMtexBSAqJUescwoEUq4tn3xp9Fm7XfUS5HiiFO3Gw7SjT4QUCkkKxLy2-WAvl3rkrtEclBdOCXcnMwZN7ByiN" alt="uml diagram" />␊
-    `
-
-## Markdown.render() should render PlantUML Umls correctly
-
-> Snapshot 1
-
-    `<img src="http://www.plantuml.com/plantuml/svg/LOzD2eCm44RtESMtj0jx01V5E_G4Gvngo2_912gbTsz4LBfylCV7p5Y4ibJlbEENG2AocHV1P39hCJ6eOar8bCaZaROqyrDMnzWqXTcn8YqnGzSYqNC-q76sweoW5zOsLi57uMpHz-WESslY0jmVw1AjdaE30IPeLoVUceLTslrL3-2tS9ZA_qZRtm_vgh7PzkOF" alt="uml diagram" />␊
-    `
-
-## Markdown.render() should render PlantUML WBS correctly
-
-> Snapshot 1
-
-    `<img src="http://www.plantuml.com/plantuml/svg/ZP2_JiD03CRtFeNdRF04fR140gdGeREv-z8plVYYimFYxSabKbaxsR9-ylTdRyxLVpvjrz5XDb6OqR6MqEPRYSXPz4BdmsdNTVJAiuP4da1JBLy8lbmxUYxZbE6Wa_CLgUI8IXymS0rf9NeL5yxKDt24EhiKfMDcRNzVO79HcX8RLdvLfZBGa_KtFx2RKcpK7TZ3dTpZfWgskMAZ9jIXr94rW4PubM1RbBZOb-6NtcS9LpgBjlj_1w9QldbPjZHxQ5pg_GC0" alt="uml diagram" />␊
-    `
\ No newline at end of file
diff --git a/tests/lib/snapshots/markdown-test.js.snap b/tests/lib/snapshots/markdown-test.js.snap
index 3e68ab1ba..ade264897 100644
Binary files a/tests/lib/snapshots/markdown-test.js.snap and b/tests/lib/snapshots/markdown-test.js.snap differ