diff --git a/src/index.html b/src/index.html
index da8b227..ba720ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -45,7 +45,7 @@
 								<ul class="js-modes-menu  dropdown__menu">
 									<li><a data-type="html" data-mode="html">HTML</a></li>
 									<li><a data-type="html" data-mode="markdown">Markdown</a></li>
-									<li><a data-type="html" data-mode="jade">Jade</a></li>
+									<li><a data-type="html" data-mode="jade">Pug</a></li>
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
diff --git a/src/lib/codemirror/mode/jade/jade.js b/src/lib/codemirror/mode/pug/pug.js
similarity index 97%
rename from src/lib/codemirror/mode/jade/jade.js
rename to src/lib/codemirror/mode/pug/pug.js
index 1db069a..4018233 100644
--- a/src/lib/codemirror/mode/jade/jade.js
+++ b/src/lib/codemirror/mode/pug/pug.js
@@ -11,7 +11,7 @@
 })(function(CodeMirror) {
 "use strict";
 
-CodeMirror.defineMode('jade', function (config) {
+CodeMirror.defineMode("pug", function (config) {
   // token types
   var KEYWORD = 'keyword';
   var DOCTYPE = 'meta';
@@ -36,7 +36,7 @@ CodeMirror.defineMode('jade', function (config) {
     this.isInterpolating = false;
     this.interpolationNesting = 0;
 
-    this.jsState = jsMode.startState();
+    this.jsState = CodeMirror.startState(jsMode);
 
     this.restOfLine = '';
 
@@ -386,7 +386,7 @@ CodeMirror.defineMode('jade', function (config) {
       if (state.inAttributeName && stream.match(/^[^=,\)!]+/)) {
         if (stream.peek() === '=' || stream.peek() === '!') {
           state.inAttributeName = false;
-          state.jsState = jsMode.startState();
+          state.jsState = CodeMirror.startState(jsMode);
           if (state.lastTag === 'script' && stream.current().trim().toLowerCase() === 'type') {
             state.attributeIsType = true;
           } else {
@@ -492,7 +492,7 @@ CodeMirror.defineMode('jade', function (config) {
     if (stream.indentation() > state.indentOf || (state.innerModeForLine && !stream.sol()) || force) {
       if (state.innerMode) {
         if (!state.innerState) {
-          state.innerState = state.innerMode.startState ? state.innerMode.startState(stream.indentation()) : {};
+          state.innerState = state.innerMode.startState ? CodeMirror.startState(state.innerMode, stream.indentation()) : {};
         }
         return stream.hideFirstChars(state.indentOf + 2, function () {
           return state.innerMode.token(stream, state.innerState) || true;
@@ -585,6 +585,7 @@ CodeMirror.defineMode('jade', function (config) {
   };
 }, 'javascript', 'css', 'htmlmixed');
 
-CodeMirror.defineMIME('text/x-jade', 'jade');
+CodeMirror.defineMIME('text/x-pug', 'pug');
+CodeMirror.defineMIME('text/x-jade', 'pug');
 
 });
diff --git a/src/script.js b/src/script.js
index 8d5ba21..94d3fcb 100644
--- a/src/script.js
+++ b/src/script.js
@@ -37,7 +37,7 @@ TextareaAutoComplete */
 	var modes = {};
 	modes[HtmlModes.HTML] = { label: 'HTML', cmMode: 'htmlmixed', codepenVal: 'none' };
 	modes[HtmlModes.MARKDOWN] = { label: 'Markdown', cmMode: 'markdown', codepenVal: 'markdown' };
-	modes[HtmlModes.JADE] = { label: 'Jade', cmMode: 'jade', codepenVal: 'jade' };
+	modes[HtmlModes.JADE] = { label: 'Pug', cmMode: 'pug', codepenVal: 'pug' };
 	modes[JsModes.JS] = { label: 'JS', cmMode: 'javascript', codepenVal: 'none' };
 	modes[JsModes.COFFEESCRIPT] = { label: 'CoffeeScript', cmMode: 'coffeescript', codepenVal: 'coffeescript' };
 	modes[JsModes.ES6] = { label: 'ES6 (Babel)', cmMode: 'jsx', codepenVal: 'babel' };