diff --git a/src/sos_notebook/converter.py b/src/sos_notebook/converter.py
index ad0e8af..33176ba 100755
--- a/src/sos_notebook/converter.py
+++ b/src/sos_notebook/converter.py
@@ -325,18 +325,9 @@ def convert(self, notebook_file, sos_file, args=None, unknown_args=None):
 # notebook to HTML
 #
 
-def get_template_args(name):
-    if not name:
-        return []
-    for path in [
-        '',
-        os.path.join('{os.path.split(os.path.abspath(sos.__file__))[0]}', 'templates'),
-        os.path.join('{os.path.split(os.path.abspath(__file__))[0]}', 'templates')]:
-        for template in [name, name + '.tpl']:
-            template_file = os.path.join(path, template)
-            if os.path.isfile(template_file):
-                return ['--template-file', template_file]
-    return []
+def get_template_args():
+    return ['--TemplateExporter.extra_template_basedirs', os.path.join('{os.path.split(os.path.abspath(__file__))[0]}', 'templates')]
+
 
 def export_notebook(exporter_class,
                     to_format,
@@ -484,7 +475,7 @@ def convert(self,
         if unknown_args is None:
             unknown_args = []
         if sargs.template:
-            unknown_args = get_template_args(sargs.template) + unknown_args
+            unknown_args = get_template_args() + unknown_args
 
         if sargs.execute is not None:
             notebook_file = execute_sos_notebook(
@@ -553,7 +544,7 @@ def convert(self,
         if unknown_args is None:
             unknown_args = []
         if sargs.template:
-            unknown_args = get_template_args(sargs.template) + unknown_args
+            unknown_args = get_template_args() + unknown_args
         # jupyter convert will add extension to output file...
         if output_file is not None and output_file.endswith('.pdf'):
             output_file = output_file[:-4]
diff --git a/src/sos_notebook/templates/sos-cm-toc/conf.json b/src/sos_notebook/templates/sos-cm-toc/conf.json
new file mode 100644
index 0000000..0a7a5a3
--- /dev/null
+++ b/src/sos_notebook/templates/sos-cm-toc/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-cm",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-cm-toc/index.html.j2 b/src/sos_notebook/templates/sos-cm-toc/index.html.j2
new file mode 100644
index 0000000..ee326fa
--- /dev/null
+++ b/src/sos_notebook/templates/sos-cm-toc/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-cm-toc.html.j2' %}
diff --git a/src/sos_notebook/templates/parts/toc.tpl b/src/sos_notebook/templates/sos-cm-toc/parts/toc.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/toc.tpl
rename to src/sos_notebook/templates/sos-cm-toc/parts/toc.tpl
diff --git a/src/sos_notebook/templates/sos-cm-toc.tpl b/src/sos_notebook/templates/sos-cm-toc/sos-cm-toc.html.j2
similarity index 97%
rename from src/sos_notebook/templates/sos-cm-toc.tpl
rename to src/sos_notebook/templates/sos-cm-toc/sos-cm-toc.html.j2
index a300de9..722ef56 100644
--- a/src/sos_notebook/templates/sos-cm-toc.tpl
+++ b/src/sos_notebook/templates/sos-cm-toc/sos-cm-toc.html.j2
@@ -1,5 +1,5 @@
 
-{% extends 'sos-cm.tpl' %}
+{% extends 'sos-cm.html.j2' %}
 
 {% import 'parts/toc.tpl' as toc %}
 
diff --git a/src/sos_notebook/templates/sos-cm/conf.json b/src/sos_notebook/templates/sos-cm/conf.json
new file mode 100644
index 0000000..c067b2c
--- /dev/null
+++ b/src/sos_notebook/templates/sos-cm/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-full",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-cm/index.html.j2 b/src/sos_notebook/templates/sos-cm/index.html.j2
new file mode 100644
index 0000000..093f38a
--- /dev/null
+++ b/src/sos_notebook/templates/sos-cm/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-cm.html.j2' %}
diff --git a/src/sos_notebook/templates/parts/cm.tpl b/src/sos_notebook/templates/sos-cm/parts/cm.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/cm.tpl
rename to src/sos_notebook/templates/sos-cm/parts/cm.tpl
diff --git a/src/sos_notebook/templates/sos-cm/parts/sos-mode.js b/src/sos_notebook/templates/sos-cm/parts/sos-mode.js
new file mode 100644
index 0000000..ee1822f
--- /dev/null
+++ b/src/sos_notebook/templates/sos-cm/parts/sos-mode.js
@@ -0,0 +1,614 @@
+/**
+ * Copyright (c) Bo Peng and UT MD Anderson Cancer Center
+ * Distributed under the terms of the Modified BSD License.
+ **/
+
+(function (mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("codemirror/lib/codemirror"),
+      require("codemirror/mode/python/python"),
+      require("codemirror/mode/r/r"),
+      require("codemirror/mode/octave/octave"),
+      require("codemirror/mode/ruby/ruby"),
+      require("codemirror/mode/sas/sas"),
+      require("codemirror/mode/javascript/javascript"),
+      require("codemirror/mode/shell/shell"),
+      require("codemirror/mode/julia/julia"),
+      require("codemirror/mode/markdown/markdown"),
+      require("codemirror/mode/htmlembedded/htmlembedded"),
+      require("codemirror/mode/xml/xml"),
+      require("codemirror/mode/yaml/yaml"),
+      require("codemirror/mode/javascript/javascript"),
+      require("codemirror/mode/stex/stex"),
+      require("codemirror/addon/selection/active-line"),
+      require("codemirror/addon/fold/foldcode"),
+      require("codemirror/addon/fold/foldgutter"),
+      require("codemirror/addon/fold/indent-fold"),
+      require("codemirror/addon/display/autorefresh"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["codemirror/lib/codemirror", "codemirror/mode/python/python",
+      "codemirror/mode/markdown/markdown", "codemirror/mode/r/r"
+    ], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function (CodeMirror) {
+  "use strict";
+
+  var sosKeywords = ["input", "output", "depends", "parameter"];
+  var sosActionWords = ["script", "download", "run", "bash", "sh", "csh",
+    "tcsh", "zsh", "python", "python2", "python3", "R", "node", "julia",
+    "matlab", "octave", "ruby", "perl", "report", "pandoc", "docker_build",
+    "Rmarkdown"
+  ];
+  var sosMagicWords = ['cd', 'capture', 'clear', 'debug', 'dict', 'expand', 'get',
+    'matplotlib', 'paste', 'preview', 'pull', 'push', 'put', 'render',
+    'rerun', 'run', 'save', 'sandbox', 'set', 'sessioninfo', 'sosrun',
+    'sossave', 'shutdown', 'taskinfo', 'tasks', 'toc', 'use', 'with'
+  ]
+  var sosFunctionWords = ["sos_run", "logger", "get_output"];
+
+  var hintWords = sosKeywords.concat(sosActionWords).concat(sosFunctionWords)
+    .concat(sosMagicWords);
+
+  var sosDirectives = sosKeywords.map(x => x + ":");
+  var sosActions = sosActionWords.map(x => new RegExp("^\\s*" + x + ":"));
+  var sosMagics = sosMagicWords.map(x => '%' + x);
+
+  // hint word for SoS mode
+  CodeMirror.registerHelper("hintWords", "sos", hintWords);
+
+  var modeMap = {
+    'sos': null,
+    'python': {
+      name: 'python',
+      version: 3
+    },
+    'python2': {
+      name: 'python',
+      version: 2
+    },
+    'python3': {
+      name: 'python',
+      version: 3
+    },
+    'r': 'r',
+    'report': 'markdown',
+    'pandoc': 'markdown',
+    'download': 'markdown',
+    'markdown': 'markdown',
+    'ruby': 'ruby',
+    'sas': 'sas',
+    'bash': 'shell',
+    'sh': 'shell',
+    'julia': 'julia',
+    'run': 'shell',
+    'javascript': 'javascript',
+    'typescript': {
+      name: "javascript",
+      typescript: true
+    },
+    'octave': 'octave',
+    'matlab': 'octave',
+    html: "htmlembedded",
+    xml: "xml",
+    yaml: "yaml",
+    json: {
+      name: "javascript",
+      jsonMode: true
+    },
+    stex: "stex"
+  };
+
+  var extMap = {
+    sos: 'python3',
+    py: "python3",
+    r: "r",
+    md: "markdown",
+    rb: "ruby",
+    sas: "sas",
+    sh: "shell",
+    jl: "julia",
+    js: "javascript",
+    ts: "typecript",
+    m: "matlab",
+    html: "html",
+    xml: "xml",
+    yaml: "yaml",
+    yml: "yaml",
+    json: "json",
+    tex: "stex"
+  };
+
+  function findMode(mode) {
+    if (mode in modeMap) {
+      return modeMap[mode];
+    }
+    return null;
+  }
+
+  function findModeFromFilename(filename) {
+    if (!filename) {
+      return 'markdown';
+    }
+    let ext = filename.split('.').pop().toLowerCase();
+    if (ext in extMap) {
+      return extMap[ext];
+    }
+    return 'markdown';
+  }
+
+  function markExpr(python_mode) {
+    return {
+      startState: function () {
+        return {
+          in_python: false,
+          sigil: null,
+          matched: true,
+          python_state: CodeMirror.startState(python_mode),
+        };
+      },
+
+      copyState: function (state) {
+        return {
+          in_python: state.in_python,
+          sigil: state.sigil,
+          matched: state.matched,
+          python_state: CodeMirror.copyState(python_mode, state.python_state)
+        };
+      },
+
+      token: function (stream, state) {
+        if (state.in_python) {
+          if (stream.match(state.sigil.right)) {
+            state.in_python = false;
+            state.python_state = CodeMirror.startState(python_mode);
+            return "sos-sigil";
+          }
+          let it = null;
+          try {
+            it = python_mode.token(stream, state.python_state);
+          } catch (error) {
+            return "sos-interpolated error" + (state.matched ? "" : " sos-unmatched");
+          }
+          if (it == 'variable' || it == 'builtin') {
+            let ct = stream.current();
+            // warn users in the use of input and output in {}
+            if (ct === 'input' || ct === 'output')
+              it += ' error';
+          }
+          return (it ? ("sos-interpolated " + it) : "sos-interpolated") + (state.matched ? "" : " sos-unmatched");
+        } else {
+          // remove the double brace case, the syntax highlighter
+          // does not have to worry (highlight) }}, although it would
+          // probably mark an error for single }
+          if (state.sigil.left === '{' && stream.match(/\{\{/))
+            return null;
+          if (stream.match(state.sigil.left)) {
+            state.in_python = true;
+            // let us see if there is any right sigil till the end of the editor.
+            try {
+              let rest = stream.string.slice(stream.pos);
+              if (!rest.includes(state.sigil.right)) {
+                state.matched = false;
+                for (let idx = 1; idx < 5; ++idx) {
+                  if (stream.lookAhead(idx).includes(state.sigil.right)) {
+                    state.matched = true;
+                    break;
+                  }
+                }
+              }
+            } catch (error) {
+              // only codemirror 5.27.0 supports this function
+            }
+            return "sos-sigil" + (state.matched ? "" : " sos-unmatched");
+          }
+          while (stream.next() && !stream.match(state.sigil.left, false)) { }
+          return null;
+        }
+      }
+    }
+  }
+
+  CodeMirror.defineMode("sos", function (conf, parserConf) {
+    let sosPythonConf = {};
+    for (let prop in parserConf) {
+      if (parserConf.hasOwnProperty(prop)) {
+        sosPythonConf[prop] = parserConf[prop];
+      }
+    }
+    sosPythonConf.name = 'python';
+    sosPythonConf.version = 3;
+    sosPythonConf.extra_keywords = sosActionWords.concat(sosFunctionWords);
+    // this is the SoS flavored python mode with more identifiers
+    var base_mode = null;
+    if ('base_mode' in parserConf && parserConf.base_mode && parserConf.base_mode !== 'sos' && parserConf.base_mode !== 'SoS') {
+      let mode = findMode(parserConf.base_mode.toLowerCase());
+      if (mode) {
+        base_mode = CodeMirror.getMode(conf, mode);
+      } else {
+        console.log(`No base mode is found for ${parserConf.base_mode}. Python mode used.`);
+      }
+    } else if ('base_mode' in conf && conf.base_mode && conf.base_mode !== 'sos' && conf.base_mode !== 'SoS') {
+      let mode = findMode(conf.base_mode.toLowerCase());
+      if (mode) {
+        base_mode = CodeMirror.getMode(conf, mode);
+      } else {
+        console.log(`No base mode is found for ${conf.base_mode}. Python mode used.`);
+      }
+    }
+    // if there is a user specified base mode, this is the single cell mode
+    if (base_mode) {
+      var python_mode = CodeMirror.getMode({}, {
+        name: 'python',
+        version: 3
+      });
+      var overlay_mode = markExpr(python_mode);
+      return {
+        startState: function () {
+          return {
+            sos_mode: true,
+            base_state: CodeMirror.startState(base_mode),
+            overlay_state: CodeMirror.startState(overlay_mode),
+            // for overlay
+            basePos: 0,
+            baseCur: null,
+            overlayPos: 0,
+            overlayCur: null,
+            streamSeen: null
+          };
+        },
+
+        copyState: function (state) {
+          return {
+            sos_mode: state.sos_mode,
+            base_state: CodeMirror.copyState(base_mode, state.base_state),
+            overlay_state: CodeMirror.copyState(overlay_mode, state.overlay_state),
+            // for overlay
+            basePos: state.basePos,
+            baseCur: null,
+            overlayPos: state.overlayPos,
+            overlayCur: null
+          };
+        },
+
+        token: function (stream, state) {
+          if (state.sos_mode) {
+            if (stream.sol()) {
+              let sl = stream.peek();
+              if (sl == '!') {
+                stream.skipToEnd();
+                return "meta";
+              } else if (sl == '#') {
+                stream.skipToEnd();
+                return 'comment'
+              }
+              for (var i = 0; i < sosMagics.length; i++) {
+                if (stream.match(sosMagics[i])) {
+                  if (sosMagics[i] === "%expand") {
+                    if (stream.eol() || stream.match(/\s*$/, false)) {
+                      state.overlay_state.sigil = {
+                        'left': '{',
+                        'right': '}'
+                      }
+                    } else {
+                      let found = stream.match(/\s+(\S+)\s+(\S+)$/, false);
+                      if (found) {
+                        state.overlay_state.sigil = {
+                          'left': found[1],
+                          'right': found[2]
+                        }
+                      } else {
+                        state.overlay_state.sigil = null;
+                      }
+                    }
+                  }
+                  // the rest of the lines will be processed as Python code
+                  return "meta";
+                }
+              }
+              state.sos_mode = false;
+            } else {
+              stream.skipToEnd();
+              return null;
+            }
+          }
+
+          if (state.overlay_state.sigil) {
+            if (stream != state.streamSeen ||
+              Math.min(state.basePos, state.overlayPos) < stream.start) {
+              state.streamSeen = stream;
+              state.basePos = state.overlayPos = stream.start;
+            }
+
+            if (stream.start == state.basePos) {
+              state.baseCur = base_mode.token(stream, state.base_state);
+              state.basePos = stream.pos;
+            }
+            if (stream.start == state.overlayPos) {
+              stream.pos = stream.start;
+              state.overlayCur = overlay_mode.token(stream, state.overlay_state);
+              state.overlayPos = stream.pos;
+            }
+            stream.pos = Math.min(state.basePos, state.overlayPos);
+
+            // state.overlay.combineTokens always takes precedence over combine,
+            // unless set to null
+            return state.overlayCur ? state.overlayCur : state.baseCur;
+          } else {
+            return base_mode.token(stream, state.base_state);
+          }
+        },
+
+        indent: function (state, textAfter) {
+          // inner indent
+          if (!state.sos_mode) {
+            if (!base_mode.indent) return CodeMirror.Pass;
+            return base_mode.indent(state.base_state, textAfter);
+          } else {
+            // sos mode has no indent
+            return 0;
+          }
+        },
+
+        innerMode: function (state) {
+          return state.sos_mode ? {
+            state: state.base_state,
+            mode: base_mode
+          } : null;
+        },
+
+        lineComment: "#",
+        fold: "indent"
+      };
+    } else {
+      // this is SoS mode
+      base_mode = CodeMirror.getMode(conf, sosPythonConf);
+      overlay_mode = markExpr(base_mode);
+      return {
+        startState: function () {
+          return {
+            sos_state: null,
+            base_state: CodeMirror.startState(base_mode),
+            overlay_state: CodeMirror.startState(overlay_mode),
+            inner_mode: null,
+            inner_state: null,
+            // for overlay
+            basePos: 0,
+            baseCur: null,
+            overlayPos: 0,
+            overlayCur: null,
+            streamSeen: null
+          };
+        },
+
+        copyState: function (state) {
+          return {
+            sos_state: state.sos_state,
+            base_state: CodeMirror.copyState(base_mode, state.base_state),
+            overlay_state: CodeMirror.copyState(overlay_mode, state.overlay_state),
+            inner_mode: state.inner_mode,
+            inner_state: state.inner_mode && CodeMirror.copyState(state.inner_mode, state.inner_state),
+            // for overlay
+            basePos: state.basePos,
+            baseCur: null,
+            overlayPos: state.overlayPos,
+            overlayCur: null
+          };
+        },
+
+        token: function (stream, state) {
+          if (stream.sol()) {
+            let sl = stream.peek();
+            if (sl == '[') {
+              if (stream.match(/^\[.*\]$/, false)) {
+                // if there is :
+                if (stream.match(/^\[[\s\w_,-]+:/)) {
+                  state.sos_state = 'header_option';
+                  return "header line-section-header";
+                } else if (stream.match(/^\[[\s\w,-]+\]$/)) {
+                  // reset state
+                  state.sos_state = null;
+                  state.inner_mode = null;
+                  return "header line-section-header";
+                }
+              }
+            } else if (sl == '!') {
+              stream.eatWhile(/\S/);
+              return "meta";
+            } else if (sl == '#') {
+              stream.skipToEnd();
+              return "comment";
+            } else if (sl == '%') {
+              stream.eatWhile(/\S/);
+              return "meta";
+            } else if (state.sos_state && state.sos_state.startsWith('entering')) {
+              // the second parameter is starting column
+              let mode = findMode(state.sos_state.slice(9).toLowerCase());
+              state.inner_mode = CodeMirror.getMode(conf, mode);
+              state.inner_state = CodeMirror.startState(state.inner_mode, stream.indentation());
+              state.sos_state = null;
+            }
+            for (var i = 0; i < sosDirectives.length; i++) {
+              if (stream.match(sosDirectives[i])) {
+                // the rest of the lines will be processed as Python code
+                state.sos_state = 'directive_option'
+                return "keyword strong";
+              }
+            }
+            for (var i = 0; i < sosActions.length; i++) {
+              if (stream.match(sosActions[i])) {
+                // switch to submode?
+                if (stream.eol()) {
+                  // really
+                  let mode = findMode(stream.current().slice(0, -1).toLowerCase());
+                  if (mode) {
+                    state.sos_state = "entering " + stream.current().slice(0, -1);
+                  } else {
+                    state.sos_state = 'unknown_language';
+                  }
+                } else {
+                  state.sos_state = 'start ' + stream.current().slice(0, -1);
+                }
+                state.overlay_state.sigil = null;
+                return "builtin strong";
+              }
+            }
+            // if unknown action
+            if (stream.match(/\w+:/)) {
+              state.overlay_state.sigil = null;
+              state.sos_state = 'start ' + stream.current().slice(0, -1);
+              return "builtin strong";
+            }
+          } else if (state.sos_state == 'header_option') {
+            // stuff after :
+            if (stream.peek() == ']') {
+              // move next
+              stream.next();
+              // ] is the last char
+              if (stream.eol()) {
+                state.sos_state = null;
+                state.inner_mode = null;
+                return "header line-section-header";
+              } else {
+                stream.backUp(1);
+                let it = base_mode.token(stream, state.base_state);
+                return it ? it + ' sos-option' : null;
+              }
+            } else {
+              let it = base_mode.token(stream, state.base_state);
+              return it ? it + ' sos-option' : null;
+            }
+          } else if (state.sos_state == 'directive_option') {
+            // stuff after input:, R: etc
+            if (stream.peek() == ',') {
+              // move next
+              stream.next();
+              // , is the last char, continue option line
+              if (stream.eol()) {
+                stream.backUp(1);
+                let it = base_mode.token(stream, state.base_state);
+                return it ? it + ' sos-option' : null;
+              }
+              stream.backUp(1);
+            } else if (stream.eol()) {
+              // end of line stops option mode
+              state.sos_state = null;
+              state.inner_mode = null;
+            }
+            let it = base_mode.token(stream, state.base_state);
+            return it ? it + ' sos-option' : null;
+          } else if (state.sos_state && state.sos_state.startsWith("start ")) {
+            // try to understand option expand=
+            if (stream.match(/expand\s*=\s*True/, false)) {
+              // highlight {}
+              state.overlay_state.sigil = {
+                'left': '{',
+                'right': '}'
+              }
+            } else {
+              let found = stream.match(/expand\s*=\s*"(\S+) (\S+)"/, false);
+              if (!found)
+                found = stream.match(/expand\s*=\s*'(\S+) (\S+)'/, false);
+              if (found) {
+                state.overlay_state.sigil = {
+                  'left': found[1],
+                  'right': found[2]
+                }
+              }
+            }
+            let mode_string = state.sos_state.slice(6).toLowerCase();
+            // for report, we need to find "output" option
+            if (mode_string === "report" &&
+              stream.match(/^.*output\s*=\s*/, false)) {
+              let found = stream.match(/^.*output\s*=\s*[rRbufF]*"""([^"]+)"""/, false);
+              if (!found)
+                found = stream.match(/^.*output\s*=\s*[rRbufF]*'''([^.]+)'''/, false);
+              if (!found)
+                found = stream.match(/^.*output\s*=\s*[rRbufF]*"([^"]+)"/, false);
+              if (!found)
+                found = stream.match(/^.*output\s*=\s*[rRbufF]*'([^']+)'/, false);
+
+              // found[1] is the filename
+              state.sos_state = 'start ' + findModeFromFilename(found ? found[1] : found);
+            }
+
+            let token = base_mode.token(stream, state.base_state);
+            // if it is end of line, ending the starting switch mode
+            if (stream.eol() && stream.peek() !== ',') {
+              // really
+              let mode = findMode(state.sos_state.slice(6).toLowerCase());
+              if (mode) {
+                state.sos_state = "entering " + state.sos_state.slice(6);
+              } else {
+                state.sos_state = 'unknown_language';
+              }
+            }
+            return token + ' sos-option';
+          }
+          // can be start of line but not special
+          if (state.sos_state == 'unknown_language') {
+            // we still handle {} in no man unknown_language
+            if (state.overlay_state.sigil) {
+              return overlay_mode.token(stream, state.overlay_state);
+            } else {
+              stream.skipToEnd();
+              return null;
+            }
+          } else if (state.inner_mode) {
+            let it = 'sos_script ';
+            if (!state.overlay_state.sigil) {
+              let st = state.inner_mode.token(stream, state.inner_state);
+              return st ? it + st : null;
+            } else {
+              // overlay mode, more complicated
+              if (stream != state.streamSeen ||
+                Math.min(state.basePos, state.overlayPos) < stream.start) {
+                state.streamSeen = stream;
+                state.basePos = state.overlayPos = stream.start;
+              }
+
+              if (stream.start == state.basePos) {
+                state.baseCur = state.inner_mode.token(stream, state.inner_state);
+                state.basePos = stream.pos;
+              }
+              if (stream.start == state.overlayPos) {
+                stream.pos = stream.start;
+                state.overlayCur = overlay_mode.token(stream, state.overlay_state);
+                state.overlayPos = stream.pos;
+              }
+              stream.pos = Math.min(state.basePos, state.overlayPos);
+              // state.overlay.combineTokens always takes precedence over combine,
+              // unless set to null
+              return (state.overlayCur ? state.overlayCur : state.baseCur) + " sos-script";
+            }
+          } else {
+            return base_mode.token(stream, state.base_state);
+          }
+        },
+
+        indent: function (state, textAfter) {
+          // inner indent
+          if (state.inner_mode) {
+            if (!state.inner_mode.indent) return CodeMirror.Pass;
+            return state.inner_mode.indent(state.inner_mode, textAfter) + 2;
+          } else {
+            return base_mode.indent(state.base_state, textAfter);
+          }
+        },
+
+        innerMode: function (state) {
+          return state.inner_mode ? null : {
+            state: state.base_state,
+            mode: base_mode
+          };
+        },
+
+        lineComment: "#",
+        fold: "indent",
+        electricInput: /^\s*[\}\]\)]$/,
+      };
+    };
+  }, "python");
+
+  CodeMirror.defineMIME("text/x-sos", "sos");
+});
diff --git a/src/sos_notebook/templates/sos-cm.tpl b/src/sos_notebook/templates/sos-cm/sos-cm.html.j2
similarity index 95%
rename from src/sos_notebook/templates/sos-cm.tpl
rename to src/sos_notebook/templates/sos-cm/sos-cm.html.j2
index 2a87c1b..f9e8f5a 100644
--- a/src/sos_notebook/templates/sos-cm.tpl
+++ b/src/sos_notebook/templates/sos-cm/sos-cm.html.j2
@@ -1,5 +1,6 @@
 
-{% extends 'sos-full.tpl' %}
+{% extends 'sos-full.html.j2' %}
+
 {% import 'parts/cm.tpl' as cm %}
 
 {%- block html_head -%}
diff --git a/src/sos_notebook/templates/sos-full-toc/conf.json b/src/sos_notebook/templates/sos-full-toc/conf.json
new file mode 100644
index 0000000..c067b2c
--- /dev/null
+++ b/src/sos_notebook/templates/sos-full-toc/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-full",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-full-toc/index.html.j2 b/src/sos_notebook/templates/sos-full-toc/index.html.j2
new file mode 100644
index 0000000..96206a0
--- /dev/null
+++ b/src/sos_notebook/templates/sos-full-toc/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-full.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-full-toc/parts/toc.tpl b/src/sos_notebook/templates/sos-full-toc/parts/toc.tpl
new file mode 100644
index 0000000..b5ecb85
--- /dev/null
+++ b/src/sos_notebook/templates/sos-full-toc/parts/toc.tpl
@@ -0,0 +1,208 @@
+{% macro css() %}
+
+<style>
+
+/* The Table of Contents container element */
+.toc-container {
+    flex-flow: column;
+    display: flex;
+
+    width: 20%;
+    max-height: calc(100% - 120px);
+    margin-left: 2%;
+    margin-top: 60px;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.toc-header {
+  flex: 0 1 auto;
+}
+
+.toc-before {
+  flex: 0 1 auto;
+}
+
+.toc-after {
+  flex: 0 1 auto;
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+#toc {
+      overflow-y: auto;
+      flex: 1 1 auto;
+}
+
+#toc ul, #toc li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    line-height: 1.5em;
+}
+
+#toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+
+#toc > .toc-list  a {
+  margin: 0;
+  padding-left: 10px;
+}
+
+#toc > .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 25px;
+}
+
+
+#toc > .toc-list .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 40px;
+}
+
+a.toc-link {
+  height: 100%;
+}
+
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+
+.is-collapsed {
+  max-height: 0;
+}
+
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a, .nav-list .nav-header {
+    margin: 0px;
+}
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a {
+    padding: 5px;
+}
+
+.notebook-container {
+  box-shadow: none;
+}
+
+li.toc-item .is-active-link {
+  background-color: #6197d5;
+  color: white;
+}
+
+.nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    background-color: #eeeeee;
+    color: #337ab7;
+}
+
+#notebook-container {
+  box-shadow: none;
+}
+
+/* https://github.com/tscanlin/tocbot/issues/121 */
+h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, h7:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+</style>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+{% endmacro %}
+
+{% macro html() %}
+{% endmacro %}
+
+{% macro js(headers='h1, h2, h3, h4', remove_only_top_header='true') %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.8.1/tocbot.min.js"></script>
+
+<script>
+
+  function fixIDsForToc(headings = null) {
+    let headingMap = {}
+
+    if (!headings) {
+      let content = document.querySelector('.notebook-container')
+      headings = content.querySelectorAll('{{ headers }}')
+    }
+    Array.prototype.forEach.call(headings, function(heading) {
+      var id = heading.id ? heading.id : heading.textContent.toLowerCase();
+      id = id.split(' ').join('-').replace(/["'\!\@\#\$\%\^\&\*\(\)\:]/ig, '');
+      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+      if (headingMap[id]) {
+        heading.id = id + '-' + headingMap[id]
+      } else {
+        heading.id = id
+      }
+    })
+  }
+
+
+  function indexedHeaders(headings) {
+      if (!headings) {
+          return '';
+      }
+      let counts = [0, 0, 0, 0, 0, 0, 0]
+      for (let i = 0; i < headings.length; ++i) {
+        ++counts[parseInt(headings[i].tagName[1])-1]
+      }
+      // now, we remove the first 1 if it is the first tag, and if
+      // it has only one, and if it is the only header
+      let first = counts.findIndex(x => x > 0);
+      if (counts[first] == 1 && counts.reduce((a, b) => a + b, 0) != counts[first]
+         && parseInt(headings[0].tagName[1]) === first + 1 && {{ remove_only_top_header }}) {
+          counts[first] = 0;
+      }
+      //
+      return counts.map((x, idx) => x > 0 ? 'H' + (idx+1) : '').filter(x => x).join(',');
+  }
+
+
+  function updateTOC ( ) {
+    var content = document.querySelector('.notebook-container')
+    var headings = content.querySelectorAll('{{ headers }}')
+
+    fixIDsForToc(headings);
+
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '#toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '.notebook-container',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: indexedHeaders(headings),
+      //
+      listClass: 'toc-list',
+      extraListClasses: 'nav nav-list',
+      //
+      listItemClass: 'toc-item',
+      //
+      activeListItemClass: 'active',
+      //
+      orderedList: false,
+      //
+      hasInnerContainers: true,
+      //
+      scrollSmooth: true
+    });
+  }
+
+  updateTOC()
+
+</script>
+{% endmacro %}
diff --git a/src/sos_notebook/templates/sos-report-toc.tpl b/src/sos_notebook/templates/sos-full-toc/sos-full-toc.html.j2
similarity index 97%
rename from src/sos_notebook/templates/sos-report-toc.tpl
rename to src/sos_notebook/templates/sos-full-toc/sos-full-toc.html.j2
index e98fb73..a12c629 100644
--- a/src/sos_notebook/templates/sos-report-toc.tpl
+++ b/src/sos_notebook/templates/sos-full-toc/sos-full-toc.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-report.tpl' %}
+{% extends 'sos-full.html.j2' %}
 
 {% import 'parts/toc.tpl' as toc %}
 
diff --git a/src/sos_notebook/templates/sos-full/conf.json b/src/sos_notebook/templates/sos-full/conf.json
new file mode 100644
index 0000000..e8f3ed9
--- /dev/null
+++ b/src/sos_notebook/templates/sos-full/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "classic",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-full/index.html.j2 b/src/sos_notebook/templates/sos-full/index.html.j2
new file mode 100644
index 0000000..96206a0
--- /dev/null
+++ b/src/sos_notebook/templates/sos-full/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-full.html.j2' %}
diff --git a/src/sos_notebook/templates/parts/preview.tpl b/src/sos_notebook/templates/sos-full/parts/preview.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/preview.tpl
rename to src/sos_notebook/templates/sos-full/parts/preview.tpl
diff --git a/src/sos_notebook/templates/parts/sos_style.tpl b/src/sos_notebook/templates/sos-full/parts/sos_style.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/sos_style.tpl
rename to src/sos_notebook/templates/sos-full/parts/sos_style.tpl
diff --git a/src/sos_notebook/templates/sos-full.tpl b/src/sos_notebook/templates/sos-full/sos-full.html.j2
similarity index 96%
rename from src/sos_notebook/templates/sos-full.tpl
rename to src/sos_notebook/templates/sos-full/sos-full.html.j2
index efc17b3..e1a20b0 100644
--- a/src/sos_notebook/templates/sos-full.tpl
+++ b/src/sos_notebook/templates/sos-full/sos-full.html.j2
@@ -1,4 +1,4 @@
-{% extends 'full.tpl' %}
+{% extends 'classic/index.html.j2' %}
 
 {% import 'parts/sos_style.tpl' as sos_style %}
 {% import 'parts/preview.tpl' as preview %}
diff --git a/src/sos_notebook/templates/sos-markdown/conf.json b/src/sos_notebook/templates/sos-markdown/conf.json
new file mode 100644
index 0000000..f0e4df9
--- /dev/null
+++ b/src/sos_notebook/templates/sos-markdown/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "markdown",
+  "mimetypes": {
+    "text/markdown": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-markdown/index.md.j2 b/src/sos_notebook/templates/sos-markdown/index.md.j2
new file mode 100644
index 0000000..c3ae9ec
--- /dev/null
+++ b/src/sos_notebook/templates/sos-markdown/index.md.j2
@@ -0,0 +1 @@
+{% extends 'sos-markdown.md.j2' %}
diff --git a/src/sos_notebook/templates/sos-markdown.tpl b/src/sos_notebook/templates/sos-markdown/sos-markdown.md.j2
similarity index 90%
rename from src/sos_notebook/templates/sos-markdown.tpl
rename to src/sos_notebook/templates/sos-markdown/sos-markdown.md.j2
index d354dc7..95cdbd7 100644
--- a/src/sos_notebook/templates/sos-markdown.tpl
+++ b/src/sos_notebook/templates/sos-markdown/sos-markdown.md.j2
@@ -1,5 +1,5 @@
 
-{% extends 'markdown.tpl' %}
+{% extends 'markdown/index.md.j2' %}
 
 
 {% block input %}
diff --git a/src/sos_notebook/templates/sos-report-only-toc/conf.json b/src/sos_notebook/templates/sos-report-only-toc/conf.json
new file mode 100644
index 0000000..acdb7c9
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-only-toc/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-report-only",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-only-toc/index.html.j2 b/src/sos_notebook/templates/sos-report-only-toc/index.html.j2
new file mode 100644
index 0000000..7654a40
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-only-toc/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-only-toc.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-report-only-toc/parts/toc.tpl b/src/sos_notebook/templates/sos-report-only-toc/parts/toc.tpl
new file mode 100644
index 0000000..b5ecb85
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-only-toc/parts/toc.tpl
@@ -0,0 +1,208 @@
+{% macro css() %}
+
+<style>
+
+/* The Table of Contents container element */
+.toc-container {
+    flex-flow: column;
+    display: flex;
+
+    width: 20%;
+    max-height: calc(100% - 120px);
+    margin-left: 2%;
+    margin-top: 60px;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.toc-header {
+  flex: 0 1 auto;
+}
+
+.toc-before {
+  flex: 0 1 auto;
+}
+
+.toc-after {
+  flex: 0 1 auto;
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+#toc {
+      overflow-y: auto;
+      flex: 1 1 auto;
+}
+
+#toc ul, #toc li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    line-height: 1.5em;
+}
+
+#toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+
+#toc > .toc-list  a {
+  margin: 0;
+  padding-left: 10px;
+}
+
+#toc > .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 25px;
+}
+
+
+#toc > .toc-list .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 40px;
+}
+
+a.toc-link {
+  height: 100%;
+}
+
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+
+.is-collapsed {
+  max-height: 0;
+}
+
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a, .nav-list .nav-header {
+    margin: 0px;
+}
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a {
+    padding: 5px;
+}
+
+.notebook-container {
+  box-shadow: none;
+}
+
+li.toc-item .is-active-link {
+  background-color: #6197d5;
+  color: white;
+}
+
+.nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    background-color: #eeeeee;
+    color: #337ab7;
+}
+
+#notebook-container {
+  box-shadow: none;
+}
+
+/* https://github.com/tscanlin/tocbot/issues/121 */
+h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, h7:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+</style>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+{% endmacro %}
+
+{% macro html() %}
+{% endmacro %}
+
+{% macro js(headers='h1, h2, h3, h4', remove_only_top_header='true') %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.8.1/tocbot.min.js"></script>
+
+<script>
+
+  function fixIDsForToc(headings = null) {
+    let headingMap = {}
+
+    if (!headings) {
+      let content = document.querySelector('.notebook-container')
+      headings = content.querySelectorAll('{{ headers }}')
+    }
+    Array.prototype.forEach.call(headings, function(heading) {
+      var id = heading.id ? heading.id : heading.textContent.toLowerCase();
+      id = id.split(' ').join('-').replace(/["'\!\@\#\$\%\^\&\*\(\)\:]/ig, '');
+      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+      if (headingMap[id]) {
+        heading.id = id + '-' + headingMap[id]
+      } else {
+        heading.id = id
+      }
+    })
+  }
+
+
+  function indexedHeaders(headings) {
+      if (!headings) {
+          return '';
+      }
+      let counts = [0, 0, 0, 0, 0, 0, 0]
+      for (let i = 0; i < headings.length; ++i) {
+        ++counts[parseInt(headings[i].tagName[1])-1]
+      }
+      // now, we remove the first 1 if it is the first tag, and if
+      // it has only one, and if it is the only header
+      let first = counts.findIndex(x => x > 0);
+      if (counts[first] == 1 && counts.reduce((a, b) => a + b, 0) != counts[first]
+         && parseInt(headings[0].tagName[1]) === first + 1 && {{ remove_only_top_header }}) {
+          counts[first] = 0;
+      }
+      //
+      return counts.map((x, idx) => x > 0 ? 'H' + (idx+1) : '').filter(x => x).join(',');
+  }
+
+
+  function updateTOC ( ) {
+    var content = document.querySelector('.notebook-container')
+    var headings = content.querySelectorAll('{{ headers }}')
+
+    fixIDsForToc(headings);
+
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '#toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '.notebook-container',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: indexedHeaders(headings),
+      //
+      listClass: 'toc-list',
+      extraListClasses: 'nav nav-list',
+      //
+      listItemClass: 'toc-item',
+      //
+      activeListItemClass: 'active',
+      //
+      orderedList: false,
+      //
+      hasInnerContainers: true,
+      //
+      scrollSmooth: true
+    });
+  }
+
+  updateTOC()
+
+</script>
+{% endmacro %}
diff --git a/src/sos_notebook/templates/sos-report-toc-v2.tpl b/src/sos_notebook/templates/sos-report-only-toc/sos-report-only-toc.html.j2
similarity index 96%
rename from src/sos_notebook/templates/sos-report-toc-v2.tpl
rename to src/sos_notebook/templates/sos-report-only-toc/sos-report-only-toc.html.j2
index f550a55..5c31916 100644
--- a/src/sos_notebook/templates/sos-report-toc-v2.tpl
+++ b/src/sos_notebook/templates/sos-report-only-toc/sos-report-only-toc.html.j2
@@ -1,4 +1,5 @@
-{% extends 'sos-report-v2.tpl' %}
+{% extends 'sos-report-only.html.j2' %}
+
 
 {% import 'parts/toc.tpl' as toc %}
 
diff --git a/src/sos_notebook/templates/sos-report-only/conf.json b/src/sos_notebook/templates/sos-report-only/conf.json
new file mode 100644
index 0000000..0a7a5a3
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-only/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-cm",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-only/index.html.j2 b/src/sos_notebook/templates/sos-report-only/index.html.j2
new file mode 100644
index 0000000..e4405ce
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-only/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-only.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-report-only.tpl b/src/sos_notebook/templates/sos-report-only/sos-report-only.html.j2
similarity index 98%
rename from src/sos_notebook/templates/sos-report-only.tpl
rename to src/sos_notebook/templates/sos-report-only/sos-report-only.html.j2
index 9206766..22f1fce 100644
--- a/src/sos_notebook/templates/sos-report-only.tpl
+++ b/src/sos_notebook/templates/sos-report-only/sos-report-only.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-cm.tpl' %}
+{% extends 'sos-cm.html.j2' %}
 
 {%- block codecell -%}
   {%- if 'scratch' in cell.metadata.tags -%}
diff --git a/src/sos_notebook/templates/sos-report-toc-v2/conf.json b/src/sos_notebook/templates/sos-report-toc-v2/conf.json
new file mode 100644
index 0000000..a319b33
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc-v2/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-report-v2",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-toc-v2/index.html.j2 b/src/sos_notebook/templates/sos-report-toc-v2/index.html.j2
new file mode 100644
index 0000000..6ae1cc7
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc-v2/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-toc-v2.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-report-toc-v2/parts/toc.tpl b/src/sos_notebook/templates/sos-report-toc-v2/parts/toc.tpl
new file mode 100644
index 0000000..b5ecb85
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc-v2/parts/toc.tpl
@@ -0,0 +1,208 @@
+{% macro css() %}
+
+<style>
+
+/* The Table of Contents container element */
+.toc-container {
+    flex-flow: column;
+    display: flex;
+
+    width: 20%;
+    max-height: calc(100% - 120px);
+    margin-left: 2%;
+    margin-top: 60px;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.toc-header {
+  flex: 0 1 auto;
+}
+
+.toc-before {
+  flex: 0 1 auto;
+}
+
+.toc-after {
+  flex: 0 1 auto;
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+#toc {
+      overflow-y: auto;
+      flex: 1 1 auto;
+}
+
+#toc ul, #toc li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    line-height: 1.5em;
+}
+
+#toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+
+#toc > .toc-list  a {
+  margin: 0;
+  padding-left: 10px;
+}
+
+#toc > .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 25px;
+}
+
+
+#toc > .toc-list .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 40px;
+}
+
+a.toc-link {
+  height: 100%;
+}
+
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+
+.is-collapsed {
+  max-height: 0;
+}
+
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a, .nav-list .nav-header {
+    margin: 0px;
+}
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a {
+    padding: 5px;
+}
+
+.notebook-container {
+  box-shadow: none;
+}
+
+li.toc-item .is-active-link {
+  background-color: #6197d5;
+  color: white;
+}
+
+.nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    background-color: #eeeeee;
+    color: #337ab7;
+}
+
+#notebook-container {
+  box-shadow: none;
+}
+
+/* https://github.com/tscanlin/tocbot/issues/121 */
+h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, h7:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+</style>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+{% endmacro %}
+
+{% macro html() %}
+{% endmacro %}
+
+{% macro js(headers='h1, h2, h3, h4', remove_only_top_header='true') %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.8.1/tocbot.min.js"></script>
+
+<script>
+
+  function fixIDsForToc(headings = null) {
+    let headingMap = {}
+
+    if (!headings) {
+      let content = document.querySelector('.notebook-container')
+      headings = content.querySelectorAll('{{ headers }}')
+    }
+    Array.prototype.forEach.call(headings, function(heading) {
+      var id = heading.id ? heading.id : heading.textContent.toLowerCase();
+      id = id.split(' ').join('-').replace(/["'\!\@\#\$\%\^\&\*\(\)\:]/ig, '');
+      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+      if (headingMap[id]) {
+        heading.id = id + '-' + headingMap[id]
+      } else {
+        heading.id = id
+      }
+    })
+  }
+
+
+  function indexedHeaders(headings) {
+      if (!headings) {
+          return '';
+      }
+      let counts = [0, 0, 0, 0, 0, 0, 0]
+      for (let i = 0; i < headings.length; ++i) {
+        ++counts[parseInt(headings[i].tagName[1])-1]
+      }
+      // now, we remove the first 1 if it is the first tag, and if
+      // it has only one, and if it is the only header
+      let first = counts.findIndex(x => x > 0);
+      if (counts[first] == 1 && counts.reduce((a, b) => a + b, 0) != counts[first]
+         && parseInt(headings[0].tagName[1]) === first + 1 && {{ remove_only_top_header }}) {
+          counts[first] = 0;
+      }
+      //
+      return counts.map((x, idx) => x > 0 ? 'H' + (idx+1) : '').filter(x => x).join(',');
+  }
+
+
+  function updateTOC ( ) {
+    var content = document.querySelector('.notebook-container')
+    var headings = content.querySelectorAll('{{ headers }}')
+
+    fixIDsForToc(headings);
+
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '#toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '.notebook-container',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: indexedHeaders(headings),
+      //
+      listClass: 'toc-list',
+      extraListClasses: 'nav nav-list',
+      //
+      listItemClass: 'toc-item',
+      //
+      activeListItemClass: 'active',
+      //
+      orderedList: false,
+      //
+      hasInnerContainers: true,
+      //
+      scrollSmooth: true
+    });
+  }
+
+  updateTOC()
+
+</script>
+{% endmacro %}
diff --git a/src/sos_notebook/templates/sos-report-only-toc.tpl b/src/sos_notebook/templates/sos-report-toc-v2/sos-report-toc-v2.html.j2
similarity index 96%
rename from src/sos_notebook/templates/sos-report-only-toc.tpl
rename to src/sos_notebook/templates/sos-report-toc-v2/sos-report-toc-v2.html.j2
index c0dc26b..c002bd4 100644
--- a/src/sos_notebook/templates/sos-report-only-toc.tpl
+++ b/src/sos_notebook/templates/sos-report-toc-v2/sos-report-toc-v2.html.j2
@@ -1,5 +1,4 @@
-{% extends 'sos-report-only.tpl' %}
-
+{% extends 'sos-report-v2.html.j2' %}
 
 {% import 'parts/toc.tpl' as toc %}
 
diff --git a/src/sos_notebook/templates/sos-report-toc/conf.json b/src/sos_notebook/templates/sos-report-toc/conf.json
new file mode 100644
index 0000000..8fd3472
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-report",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-toc/index.html.j2 b/src/sos_notebook/templates/sos-report-toc/index.html.j2
new file mode 100644
index 0000000..394ef79
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-toc.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-report-toc/parts/toc.tpl b/src/sos_notebook/templates/sos-report-toc/parts/toc.tpl
new file mode 100644
index 0000000..b5ecb85
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-toc/parts/toc.tpl
@@ -0,0 +1,208 @@
+{% macro css() %}
+
+<style>
+
+/* The Table of Contents container element */
+.toc-container {
+    flex-flow: column;
+    display: flex;
+
+    width: 20%;
+    max-height: calc(100% - 120px);
+    margin-left: 2%;
+    margin-top: 60px;
+    position: fixed;
+    border: 1px solid #ccc;
+    webkit-border-radius: 6px;
+    moz-border-radius: 6px;
+    border-radius: 6px;
+}
+
+.toc-header {
+  flex: 0 1 auto;
+}
+
+.toc-before {
+  flex: 0 1 auto;
+}
+
+.toc-after {
+  flex: 0 1 auto;
+}
+
+/* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
+#toc {
+      overflow-y: auto;
+      flex: 1 1 auto;
+}
+
+#toc ul, #toc li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    line-height: 1.5em;
+}
+
+#toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+
+#toc > .toc-list  a {
+  margin: 0;
+  padding-left: 10px;
+}
+
+#toc > .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 25px;
+}
+
+
+#toc > .toc-list .toc-list .toc-list a {
+  margin: 0;
+  padding-left: 40px;
+}
+
+a.toc-link {
+  height: 100%;
+}
+
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+
+.is-collapsed {
+  max-height: 0;
+}
+
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a, .nav-list .nav-header {
+    margin: 0px;
+}
+
+/* Twitter Bootstrap Override Style */
+.nav-list > li > a {
+    padding: 5px;
+}
+
+.notebook-container {
+  box-shadow: none;
+}
+
+li.toc-item .is-active-link {
+  background-color: #6197d5;
+  color: white;
+}
+
+.nav > li > a:hover, .nav > li > a:focus {
+    text-decoration: none;
+    background-color: #eeeeee;
+    color: #337ab7;
+}
+
+#notebook-container {
+  box-shadow: none;
+}
+
+/* https://github.com/tscanlin/tocbot/issues/121 */
+h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, h7:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+</style>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+{% endmacro %}
+
+{% macro html() %}
+{% endmacro %}
+
+{% macro js(headers='h1, h2, h3, h4', remove_only_top_header='true') %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.8.1/tocbot.min.js"></script>
+
+<script>
+
+  function fixIDsForToc(headings = null) {
+    let headingMap = {}
+
+    if (!headings) {
+      let content = document.querySelector('.notebook-container')
+      headings = content.querySelectorAll('{{ headers }}')
+    }
+    Array.prototype.forEach.call(headings, function(heading) {
+      var id = heading.id ? heading.id : heading.textContent.toLowerCase();
+      id = id.split(' ').join('-').replace(/["'\!\@\#\$\%\^\&\*\(\)\:]/ig, '');
+      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+      if (headingMap[id]) {
+        heading.id = id + '-' + headingMap[id]
+      } else {
+        heading.id = id
+      }
+    })
+  }
+
+
+  function indexedHeaders(headings) {
+      if (!headings) {
+          return '';
+      }
+      let counts = [0, 0, 0, 0, 0, 0, 0]
+      for (let i = 0; i < headings.length; ++i) {
+        ++counts[parseInt(headings[i].tagName[1])-1]
+      }
+      // now, we remove the first 1 if it is the first tag, and if
+      // it has only one, and if it is the only header
+      let first = counts.findIndex(x => x > 0);
+      if (counts[first] == 1 && counts.reduce((a, b) => a + b, 0) != counts[first]
+         && parseInt(headings[0].tagName[1]) === first + 1 && {{ remove_only_top_header }}) {
+          counts[first] = 0;
+      }
+      //
+      return counts.map((x, idx) => x > 0 ? 'H' + (idx+1) : '').filter(x => x).join(',');
+  }
+
+
+  function updateTOC ( ) {
+    var content = document.querySelector('.notebook-container')
+    var headings = content.querySelectorAll('{{ headers }}')
+
+    fixIDsForToc(headings);
+
+    tocbot.init({
+      // Where to render the table of contents.
+      tocSelector: '#toc',
+      // Where to grab the headings to build the table of contents.
+      contentSelector: '.notebook-container',
+      // Which headings to grab inside of the contentSelector element.
+      headingSelector: indexedHeaders(headings),
+      //
+      listClass: 'toc-list',
+      extraListClasses: 'nav nav-list',
+      //
+      listItemClass: 'toc-item',
+      //
+      activeListItemClass: 'active',
+      //
+      orderedList: false,
+      //
+      hasInnerContainers: true,
+      //
+      scrollSmooth: true
+    });
+  }
+
+  updateTOC()
+
+</script>
+{% endmacro %}
diff --git a/src/sos_notebook/templates/sos-full-toc.tpl b/src/sos_notebook/templates/sos-report-toc/sos-report-toc.html.j2
similarity index 97%
rename from src/sos_notebook/templates/sos-full-toc.tpl
rename to src/sos_notebook/templates/sos-report-toc/sos-report-toc.html.j2
index a715556..1ac84a7 100644
--- a/src/sos_notebook/templates/sos-full-toc.tpl
+++ b/src/sos_notebook/templates/sos-report-toc/sos-report-toc.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-full.tpl' %}
+{% extends 'sos-report.html.j2' %}
 
 {% import 'parts/toc.tpl' as toc %}
 
diff --git a/src/sos_notebook/templates/sos-report-v1/conf.json b/src/sos_notebook/templates/sos-report-v1/conf.json
new file mode 100644
index 0000000..c067b2c
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-v1/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-full",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-v1/index.html.j2 b/src/sos_notebook/templates/sos-report-v1/index.html.j2
new file mode 100644
index 0000000..d890c83
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-v1/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-v1.html.j2' %}
diff --git a/src/sos_notebook/templates/parts/control_panel_v1.tpl b/src/sos_notebook/templates/sos-report-v1/parts/control_panel_v1.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/control_panel_v1.tpl
rename to src/sos_notebook/templates/sos-report-v1/parts/control_panel_v1.tpl
diff --git a/src/sos_notebook/templates/sos-report-v1.tpl b/src/sos_notebook/templates/sos-report-v1/sos-report-v1.html.j2
similarity index 97%
rename from src/sos_notebook/templates/sos-report-v1.tpl
rename to src/sos_notebook/templates/sos-report-v1/sos-report-v1.html.j2
index b5bc29e..5ec351d 100644
--- a/src/sos_notebook/templates/sos-report-v1.tpl
+++ b/src/sos_notebook/templates/sos-report-v1/sos-report-v1.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-full.tpl' %}
+{% extends 'sos-full.html.j2' %}
 
 {% import 'parts/control_panel_v1.tpl' as control_panel %}
 
diff --git a/src/sos_notebook/templates/sos-report-v2/conf.json b/src/sos_notebook/templates/sos-report-v2/conf.json
new file mode 100644
index 0000000..0a7a5a3
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-v2/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-cm",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report-v2/index.html.j2 b/src/sos_notebook/templates/sos-report-v2/index.html.j2
new file mode 100644
index 0000000..6647094
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report-v2/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report-v2.html.j2' %}
diff --git a/src/sos_notebook/templates/parts/control_panel.tpl b/src/sos_notebook/templates/sos-report-v2/parts/control_panel.tpl
similarity index 100%
rename from src/sos_notebook/templates/parts/control_panel.tpl
rename to src/sos_notebook/templates/sos-report-v2/parts/control_panel.tpl
diff --git a/src/sos_notebook/templates/sos-report-v2.tpl b/src/sos_notebook/templates/sos-report-v2/sos-report-v2.html.j2
similarity index 98%
rename from src/sos_notebook/templates/sos-report-v2.tpl
rename to src/sos_notebook/templates/sos-report-v2/sos-report-v2.html.j2
index d093bae..4e839c3 100644
--- a/src/sos_notebook/templates/sos-report-v2.tpl
+++ b/src/sos_notebook/templates/sos-report-v2/sos-report-v2.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-cm.tpl' %}
+{% extends 'sos-cm' %}
 
 {% import 'parts/control_panel.tpl' as control_panel %}
 
diff --git a/src/sos_notebook/templates/sos-report/conf.json b/src/sos_notebook/templates/sos-report/conf.json
new file mode 100644
index 0000000..c067b2c
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report/conf.json
@@ -0,0 +1,6 @@
+{
+  "base_template": "sos-full",
+  "mimetypes": {
+    "text/html": true
+  }
+}
diff --git a/src/sos_notebook/templates/sos-report/index.html.j2 b/src/sos_notebook/templates/sos-report/index.html.j2
new file mode 100644
index 0000000..1a3ebdf
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report/index.html.j2
@@ -0,0 +1 @@
+{% extends 'sos-report.html.j2' %}
diff --git a/src/sos_notebook/templates/sos-report/parts/control_panel.tpl b/src/sos_notebook/templates/sos-report/parts/control_panel.tpl
new file mode 100644
index 0000000..21652ec
--- /dev/null
+++ b/src/sos_notebook/templates/sos-report/parts/control_panel.tpl
@@ -0,0 +1,164 @@
+{% macro css() %}
+<style type="text/css">
+
+.output_stderr {
+    display: none;
+}
+
+.hidden_content {
+    display: none;
+}
+
+.input_prompt {
+    display: none;
+}
+
+.output_area .prompt {
+    display: none;
+}
+
+.output_prompt {
+    display: none;
+}
+
+#display_toggle_dropdown  {
+    float: right;
+    position: relative;
+    z-index: 1000;
+    margin-bottom: -25px;
+}
+
+.dropbtn {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  border: 1pt solid transparent;
+  color: white;
+  padding: .375rem .75rem;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: .25rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  white-space: nowrap;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: .25rem 1.5rem;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #343a40;
+}
+
+</style>
+
+{% endmacro %}
+
+{% macro html() %}
+
+<div id='display_toggle_dropdown'>
+  <div class="dropdown">
+    <button id="showHideButton" class="dropbtn">Report Only &nbsp; <span class="caret"></span></button>
+    <div id="showHideMenu" class="dropdown-content">
+      <a href="#">Report Only</a>
+      <a href="#">Show Code</a>
+      <a href="#">Show All</a>
+    </div>
+  </div>
+</div>
+
+{% endmacro %}
+
+{% macro js() %}
+
+<script>
+
+let elem = document.getElementById('display_toggle_dropdown');
+elem.parentNode.removeChild(elem);
+let container = document.getElementById('notebook-container');
+container.insertBefore(elem, container.firstChild);
+
+Array.from(document.querySelectorAll('#showHideMenu a')).forEach(
+  function(element, index, array) {
+      element.addEventListener("click", showHideToggle);
+  });
+
+function setDisplayOfElemenets(names, value = 'none') {
+  names.forEach( function(name) {
+    Array.from(document.querySelectorAll(name)).forEach(
+      function(element, index, array) {
+          element.style.display = value;
+      });
+    });
+}
+
+function showHideToggle() {
+  var btn = document.getElementById("showHideButton");
+  var dropdown = document.getElementById("showHideDropDown");
+  // change the CONTENT of the button based on the content of selected option
+  btn.innerHTML = this.innerText + ' &nbsp;  <span class="caret"></span>';
+
+  if (this.innerText === "Report Only") {
+    setDisplayOfElemenets(['div.input', '.hidden_content', '.output_prompt',
+      '.input_prompt', '.output_area prompt', '.output_stderr', '.sos_hint'], 'none');
+    Array.from(document.querySelectorAll('div.cell')).forEach(
+      function(element, index, array) {
+          element.style.padding = '0pt';
+          element.style.borderWidth = '0pt';
+      }
+    );
+  } else if (this.innerText === "Show Code") {
+    setDisplayOfElemenets(['div.input'], 'flex');
+    setDisplayOfElemenets(['.hidden_content'], 'contents');
+    setDisplayOfElemenets(['.output_prompt', '.input_prompt',
+      '.output_area .prompt', '.output_stderr', '.sos_hint'], 'none');
+    Array.from(document.querySelectorAll('div.cell')).forEach(
+      function(element, index, array) {
+          element.style.padding = '5pt';
+          element.style.borderWidth = '1pt';
+      }
+    );
+  } else if (this.innerText == "Show All") {
+    setDisplayOfElemenets(['div.input'], 'flex');
+    setDisplayOfElemenets(['.hidden_content'], 'contents');
+    setDisplayOfElemenets(['.output_prompt', '.input_prompt',
+     '.output_area .prompt', '.output_stderr', '.sos_hint'], 'block');
+    Array.from(document.querySelectorAll('div.cell')).forEach(
+      function(element, index, array) {
+         element.style.padding = '5pt';
+         element.style.borderWidth = '1pt';
+     }
+   );
+  }
+}
+
+</script>
+
+{% endmacro %}
diff --git a/src/sos_notebook/templates/sos-report.tpl b/src/sos_notebook/templates/sos-report/sos-report.html.j2
similarity index 97%
rename from src/sos_notebook/templates/sos-report.tpl
rename to src/sos_notebook/templates/sos-report/sos-report.html.j2
index 83e4357..6e5455d 100644
--- a/src/sos_notebook/templates/sos-report.tpl
+++ b/src/sos_notebook/templates/sos-report/sos-report.html.j2
@@ -1,4 +1,4 @@
-{% extends 'sos-full.tpl' %}
+{% extends 'sos-full.html.j2' %}
 
 {% import 'parts/control_panel.tpl' as control_panel %}