diff --git a/apps/web/package.json b/apps/web/package.json
index 2ac6c6e38..d4ae80494 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,7 @@
     "@notesnook/crypto": "^1.0.0",
     "@notesnook/desktop": "file:desktop",
     "@rebass/forms": "^4.0.6",
-    "@streetwriters/tinymce-plugins": "^1.5.11",
+    "@streetwriters/tinymce-plugins": "^1.5.12",
     "@tinymce/tinymce-react": "^3.13.0",
     "async-mutex": "^0.3.2",
     "axios": "^0.21.4",
diff --git a/apps/web/src/components/editor/editor.css b/apps/web/src/components/editor/editor.css
index e35c1d4b8..9d1e0c9a3 100644
--- a/apps/web/src/components/editor/editor.css
+++ b/apps/web/src/components/editor/editor.css
@@ -384,3 +384,67 @@ table thead {
 .ephox-snooker-resizer-cols.ephox-snooker-resizer-bar:hover {
   opacity: 0.2 !important;
 }
+
+/*
+  COLLAPSIBLE HEADERS
+*/
+
+.editorScroll h2::before,
+.editorScroll h3::before,
+.editorScroll h4::before,
+.editorScroll h5::before,
+.editorScroll h6::before {
+  transition: opacity 200ms ease-in;
+  opacity: 0;
+
+  cursor: row-resize;
+  margin-right: 7px;
+  margin-left: -30px;
+
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='presentation' style='stroke-width: 0px; stroke: rgb(59, 59, 59); width: 14px; height: 14px;'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' style='fill: rgb(59, 59, 59);'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat 50% 50%;
+  mask-size: cover;
+  background-color: var(--disabled);
+  border: none;
+}
+
+.editorScroll:hover h2::before,
+.editorScroll:hover h3::before,
+.editorScroll:hover h4::before,
+.editorScroll:hover h5::before,
+.editorScroll:hover h6::before {
+  opacity: 1;
+}
+
+.mce-content-body h2::before {
+  margin-bottom: -5px;
+}
+.mce-content-body h3::before {
+  margin-bottom: -6px;
+}
+.mce-content-body h4::before {
+  margin-bottom: -7px;
+}
+.mce-content-body h5::before {
+  margin-bottom: -6px;
+  width: 20px;
+  height: 20px;
+}
+.mce-content-body h6::before {
+  margin-bottom: -5px;
+  width: 18px;
+  height: 18px;
+}
+
+.mce-content-body .c::before {
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' role='presentation' style='stroke-width: 0px; stroke: rgb(59, 59, 59); width: 14px; height: 14px;'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58' style='fill: rgb(59, 59, 59);'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat 50% 50%;
+}
+
+.h {
+  display: none;
+}
diff --git a/apps/web/src/components/editor/tinymce.js b/apps/web/src/components/editor/tinymce.js
index 28fb064e6..da857e643 100644
--- a/apps/web/src/components/editor/tinymce.js
+++ b/apps/web/src/components/editor/tinymce.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import "./editor.css";
 import "@streetwriters/tinymce-plugins/codeblock/styles.css";
-import "@streetwriters/tinymce-plugins/collapsibleheaders/styles.css";
 import "tinymce/tinymce";
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import "file-loader?name=static/js/icons/default/icons.js&esModule=false!tinymce/icons/default/icons.min.js";