diff --git a/src/index.html b/src/index.html
index f0e8b68..8a8ee4d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,7 @@
 		<title>Web Maker</title>
 		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 		<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
+		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
 		<link rel="stylesheet" href="lib/hint.min.css">
 		<link rel="stylesheet" href="lib/inlet.css">
 		<link rel="stylesheet" href="style.css">
@@ -344,6 +345,12 @@ c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
 		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closetag.js"></script>
 		<script src="lib/codemirror/addon/comment/comment.js"></script>
+		<script src="lib/codemirror/addon/fold/foldcode.js"></script>
+		<script src="lib/codemirror/addon/fold/foldgutter.js"></script>
+		<script src="lib/codemirror/addon/fold/xml-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/indent-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/comment-fold.js"></script>
+		<script src="lib/codemirror/addon/fold/brace-fold.js"></script>
 		<script src="lib/codemirror/addon/mode/loadmode.js"></script>
 
 		<script src="lib/codemirror/mode/xml/xml.js"></script>
diff --git a/src/script.js b/src/script.js
index 692f416..76eec13 100644
--- a/src/script.js
+++ b/src/script.js
@@ -665,6 +665,7 @@ settingsBtn, onboardModal, notificationsBtn */
 			keyMap: 'sublime',
 			theme: 'monokai',
 			lint: !!options.lint,
+			foldGutter: true,
 			gutters: options.gutters || [],
 			// cursorScrollMargin: '20', has issue with scrolling
 			profile: options.profile || ''
@@ -680,17 +681,18 @@ settingsBtn, onboardModal, notificationsBtn */
 
 	scope.cm.html = initEditor(htmlCode, {
 		mode: 'htmlmixed',
-		profile: 'xhtml'
+		profile: 'xhtml',
+		gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	emmetCodeMirror(scope.cm.html);
 	scope.cm.css = initEditor(cssCode, {
 		mode: 'css',
-		gutters: [ 'error-gutter' ]
+		gutters: [ 'error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	Inlet(scope.cm.css);
 	scope.cm.js = initEditor(jsCode, {
 		mode: 'javascript',
-		gutters: [ 'error-gutter' ]
+		gutters: [ 'error-gutter', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ]
 	});
 	Inlet(scope.cm.js);
 
diff --git a/src/style.css b/src/style.css
index 43501c1..dec489c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -197,6 +197,15 @@ select, input[type="text"], textarea {
 .cm-s-monokai .CodeMirror-gutters {
 	background: var(--color-bg);
 }
+.cm-s-monokai .CodeMirror-guttermarker-subtle {
+	opacity: 0.4;
+}
+.CodeMirror-guttermarker-subtle {
+	/*visibility: hidden !important;*/
+}
+.CodeMirror-gutter-wrapper:hover .CodeMirror-guttermarker-subtle {
+	/*visibility: visible;*/
+}
 
 #demo-frame {
 	border: 0;