diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 0d365c97..2108acd6 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -7,6 +7,11 @@ import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/javascript-lint';
 import 'codemirror/addon/lint/css-lint';
 import 'codemirror/addon/lint/html-lint';
+import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/comment-fold';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/indent-fold';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/keymap/sublime';
 import 'codemirror/addon/search/searchcursor';
@@ -60,7 +65,9 @@ class Editor extends React.Component {
       inputStyle: 'contenteditable',
       lineWrapping: false,
       fixedGutter: false,
-      gutters: ['CodeMirror-lint-markers'],
+      foldGutter: true,
+      foldOptions: { widget: '\u2026' },
+      gutters: ['CodeMirror-foldgutter'],
       keyMap: 'sublime',
       highlightSelectionMatches: true, // highlight current search match
       lint: {
@@ -83,6 +90,7 @@ class Editor extends React.Component {
       }
     });
 
+
     this._cm.setOption('extraKeys', {
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
diff --git a/client/styles/vendors/_codemirror.scss b/client/styles/vendors/_codemirror.scss
index 1cf66a9f..8938568c 100644
--- a/client/styles/vendors/_codemirror.scss
+++ b/client/styles/vendors/_codemirror.scss
@@ -336,3 +336,33 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
+
+/* CODE FOLDING (FOLDGUTTER.JS) */
+
+.CodeMirror-foldmarker {
+  text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d;
+  color: #FFF;
+  /* background-color: rgba(237, 34, 93, 0.42); */
+  /* border-radius: 3px; */
+  font-weight: bold;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+  opacity: 0.75;
+}
+.CodeMirror-foldgutter {
+  width: 2.7em;
+}
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+  padding-bottom: 0.4em;
+  text-align: right;
+  line-height: 1.0;
+}
+.CodeMirror-foldgutter-open:after {
+  content: "\25BE";
+}
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B8";
+}