diff --git a/setup.py b/setup.py
index 3064183..4627ec7 100644
--- a/setup.py
+++ b/setup.py
@@ -49,6 +49,7 @@ def user_dir():
 
 class DevelopCmd(develop):
     prefix_targets = [
+        ("nbconvert/templates", 'material'),
         ("voila/templates", 'material')
     ]
     def run(self):
@@ -77,7 +78,7 @@ def run(self):
 # WARNING: all files generates during setup.py will not end up in the source distribution
 data_files = []
 # Add all the templates
-for (dirpath, dirnames, filenames) in os.walk('share/jupyter/voila/templates/'):
+for (dirpath, dirnames, filenames) in os.walk('share/jupyter/'):
     if filenames:
         data_files.append((dirpath, [os.path.join(dirpath, filename) for filename in filenames]))
 
@@ -96,7 +97,7 @@ def run(self):
         'ipython',
         'jupyter',
         'widgets',
-        'voila'
+        'voila==0.2.0a1'
     ],
     cmdclass={
         'develop': DevelopCmd,
diff --git a/share/jupyter/nbconvert/templates/material/conf.json b/share/jupyter/nbconvert/templates/material/conf.json
new file mode 100644
index 0000000..ff4bfee
--- /dev/null
+++ b/share/jupyter/nbconvert/templates/material/conf.json
@@ -0,0 +1 @@
+{"base_template": "lab"}
\ No newline at end of file
diff --git a/share/jupyter/nbconvert/templates/material/index.html.j2 b/share/jupyter/nbconvert/templates/material/index.html.j2
new file mode 100644
index 0000000..38bb8fc
--- /dev/null
+++ b/share/jupyter/nbconvert/templates/material/index.html.j2
@@ -0,0 +1,100 @@
+{%- extends 'lab/index.html.j2' -%}
+
+{# this overrides the default behavior of directly starting the kernel and executing the notebook #}
+{% block notebook_execute %}
+{% endblock notebook_execute %}
+
+{%- block html_head_css -%}
+{{ super() }}
+{% if resources.theme == 'dark' %}
+{% set bar_color = '#555454' %}
+{% else %}
+{% set bar_color = '#5cbcaf' %}
+{% endif %}
+{{ resources.include_css("static/materialize.min.css") }}
+
+<style type="text/css">
+  body {
+    background-color: var(--jp-layout-color0);
+    overflow-y: scroll;
+  }
+
+  /* Overwrite default value, workaround for not breaking materialize */
+  .jp-Notebook {
+    padding: 0px;
+  }
+
+  .nav-wrapper {
+    background-color: {{ bar_color }};
+  }
+
+  .brand-logo {
+    height: 90%;
+    width: 100%;
+  }
+
+  .voila-spinner-color1 {
+    fill: {{ bar_color }};
+  }
+</style>
+
+<style>
+a.anchor-link {
+  display: none;
+}
+.highlight  {
+  margin: 0.4em;
+}
+/* we keep the DOM for nbconvert the same as for voila, but hide the status icon */
+#kernel-status-icon {
+  display: none;
+}
+</style>
+
+{%- endblock html_head_css -%}
+
+{%- block body -%}
+{%- block body_header -%}
+  {{ super() }}
+  <header>
+    <div class="navbar-fixed">
+      <nav class="top-nav">
+        <div class="nav-wrapper">
+          <a href="#!" class="brand-logo-container">
+            <object class="brand-logo" type="image/svg+xml" data="{{ resources.include_url("static/voila_logo.svg") }}"></object>
+          </a>
+          <ul class="right">
+            <li><a href="#"><i class="material-icons" id="kernel-status-icon">radio_button_unchecked</i></a></li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <div class="container">
+      <div class="row">
+        <div class="col s12">
+{%- endblock body_header -%}
+
+{%- block body_loop -%}
+          {% if resources.theme == 'dark' %}
+          <div class="jp-Notebook theme-dark">
+          {% else %}
+          <div class="jp-Notebook theme-light">
+          {% endif %}
+            {{ super() }}
+          </div>
+{%- endblock body_loop -%}
+
+{%- block body_footer -%}
+        </div>
+      </div>
+    </div>
+  </main>
+  {{ super() }}
+  {{ resources.include_js("static/materialize.min.js") }}
+</body>
+{%- endblock body_footer -%}
+
+{%- endblock body -%}
diff --git a/share/jupyter/voila/templates/material/static/icons_font.ttf b/share/jupyter/nbconvert/templates/material/static/icons_font.ttf
similarity index 100%
rename from share/jupyter/voila/templates/material/static/icons_font.ttf
rename to share/jupyter/nbconvert/templates/material/static/icons_font.ttf
diff --git a/share/jupyter/voila/templates/material/static/materialize.min.css b/share/jupyter/nbconvert/templates/material/static/materialize.min.css
similarity index 100%
rename from share/jupyter/voila/templates/material/static/materialize.min.css
rename to share/jupyter/nbconvert/templates/material/static/materialize.min.css
diff --git a/share/jupyter/voila/templates/material/static/materialize.min.js b/share/jupyter/nbconvert/templates/material/static/materialize.min.js
similarity index 100%
rename from share/jupyter/voila/templates/material/static/materialize.min.js
rename to share/jupyter/nbconvert/templates/material/static/materialize.min.js
diff --git a/share/jupyter/voila/templates/material/static/voila_logo.svg b/share/jupyter/nbconvert/templates/material/static/voila_logo.svg
similarity index 100%
rename from share/jupyter/voila/templates/material/static/voila_logo.svg
rename to share/jupyter/nbconvert/templates/material/static/voila_logo.svg
diff --git a/share/jupyter/voila/templates/material/static/voila_logo_bleu.svg b/share/jupyter/nbconvert/templates/material/static/voila_logo_bleu.svg
similarity index 100%
rename from share/jupyter/voila/templates/material/static/voila_logo_bleu.svg
rename to share/jupyter/nbconvert/templates/material/static/voila_logo_bleu.svg
diff --git a/share/jupyter/voila/templates/material/templates/404.html b/share/jupyter/voila/templates/material/404.html
similarity index 100%
rename from share/jupyter/voila/templates/material/templates/404.html
rename to share/jupyter/voila/templates/material/404.html
diff --git a/share/jupyter/voila/templates/material/templates/base.html b/share/jupyter/voila/templates/material/base.html
similarity index 100%
rename from share/jupyter/voila/templates/material/templates/base.html
rename to share/jupyter/voila/templates/material/base.html
diff --git a/share/jupyter/voila/templates/material/templates/browser-open.html b/share/jupyter/voila/templates/material/browser-open.html
similarity index 100%
rename from share/jupyter/voila/templates/material/templates/browser-open.html
rename to share/jupyter/voila/templates/material/browser-open.html
diff --git a/share/jupyter/voila/templates/material/templates/error.html b/share/jupyter/voila/templates/material/error.html
similarity index 100%
rename from share/jupyter/voila/templates/material/templates/error.html
rename to share/jupyter/voila/templates/material/error.html
diff --git a/share/jupyter/voila/templates/material/index.html.j2 b/share/jupyter/voila/templates/material/index.html.j2
new file mode 100644
index 0000000..5e2e98f
--- /dev/null
+++ b/share/jupyter/voila/templates/material/index.html.j2
@@ -0,0 +1,69 @@
+{%- extends 'nbconvert/templates/material/index.html.j2' -%}
+
+{%- block html_head_css -%}
+{{ super() }}
+<style>
+  /* unhide the icon */
+  #kernel-status-icon {
+    display: unset;
+  }
+
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url("{{ resources.include_url("static/icons_font.ttf") }}") format('truetype');
+  }
+
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+
+  /* Workaround for the Select/Dropdown widgets to be visible: */
+  select {
+    display: block;
+  }
+
+  /* Workaround for the RadioButtons widgets to be visible: */
+  [type="radio"]:not(:checked), [type="radio"]:checked {
+    position: static;
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
+
+{%- endblock html_head_css -%}
+
+
+{% block footer_js %}
+  {{ super() }}
+  <script type="text/javascript">
+    requirejs(['static/voila'], function(voila) {
+      (async function() {
+        var kernel = await voila.connectKernel();
+
+        kernel.statusChanged.connect(() => {
+          // console.log(kernel.status);
+          var el = document.getElementById("kernel-status-icon");
+
+          if (kernel.status == 'busy') {
+            el.innerHTML = 'radio_button_checked';
+          } else {
+            el.innerHTML = 'radio_button_unchecked';
+          }
+        });
+      })();
+    });
+  </script>
+{% endblock footer_js %}
+
diff --git a/share/jupyter/voila/templates/material/nbconvert_templates/voila.tpl b/share/jupyter/voila/templates/material/nbconvert_templates/voila.tpl
deleted file mode 100644
index d1a16fa..0000000
--- a/share/jupyter/voila/templates/material/nbconvert_templates/voila.tpl
+++ /dev/null
@@ -1,228 +0,0 @@
-{%- extends 'base.tpl' -%}
-{% from 'mathjax.tpl' import mathjax %}
-
-{# this overrides the default behavior of directly starting the kernel and executing the notebook #}
-{% block notebook_execute %}
-{% endblock notebook_execute %}
-
-{%- block html_head_css -%}
-<link href="{{resources.base_url}}voila/static/index.css" rel="stylesheet" type='text/css'>
-{% if resources.theme == 'dark' %}
-{% set bar_color = '#555454' %}
-<link href="{{resources.base_url}}voila/static/theme-dark.css" rel="stylesheet" type='text/css'>
-{% else %}
-{% set bar_color = '#5cbcaf' %}
-<link href="{{resources.base_url}}voila/static/theme-light.css" rel="stylesheet" type='text/css'>
-{% endif %}
-<link href="{{resources.base_url}}voila/static/materialize.min.css" rel="stylesheet" type='text/css'>
-
-<style type="text/css">
-  body {
-    background-color: var(--jp-layout-color0);
-    overflow-y: scroll;
-  }
-
-  .nav-wrapper {
-    background-color: {{ bar_color }};
-  }
-
-  .brand-logo {
-    height: 90%;
-    width: 100%;
-  }
-
-  #loading {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 75vh;
-      color: var(--jp-content-font-color1);
-      font-family: sans-serif;
-  }
-
-  .spinner {
-    animation: rotation 2s infinite linear;
-    transform-origin: 50% 50%;
-  }
-
-  .spinner-container {
-    width: 10%;
-  }
-
-  @keyframes rotation {
-    from {transform: rotate(0deg);}
-    to   {transform: rotate(359deg);}
-  }
-
-  .voila-spinner-color1{
-    fill: {{ bar_color }};
-  }
-
-  .voila-spinner-color2{
-    fill: #f8e14b;
-  }
-
-  @font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url({{resources.base_url}}voila/static/icons_font.ttf) format('truetype');
-  }
-
-  .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-  }
-
-  /* Workaround for the Select/Dropdown widgets to be visible: */
-  select {
-    display: block;
-  }
-
-  /* Workaround for the RadioButtons widgets to be visible: */
-  [type="radio"]:not(:checked), [type="radio"]:checked {
-    position: static;
-    opacity: 1;
-    pointer-events: auto;
-  }
-</style>
-
-{% for css in resources.inlining.css %}
-<style type="text/css">
-{{ css }}
-</style>
-{% endfor %}
-
-<style>
-a.anchor-link {
-  display: none;
-}
-.highlight  {
-  margin: 0.4em;
-}
-</style>
-
-{{ mathjax() }}
-{%- endblock html_head_css -%}
-
-{%- block body -%}
-{%- block body_header -%}
-<body data-base-url="{{resources.base_url}}voila/">
-  <div id="loading">
-    <div class="spinner-container">
-      <svg class="spinner" data-name="c1" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>voila</dc:title></cc:Work></rdf:RDF></metadata><title>spin</title><path class="voila-spinner-color1" d="m250 405c-85.47 0-155-69.53-155-155s69.53-155 155-155 155 69.53 155 155-69.53 155-155 155zm0-275.5a120.5 120.5 0 1 0 120.5 120.5 120.6 120.6 0 0 0-120.5-120.5z"/><path class="voila-spinner-color2" d="m250 405c-85.47 0-155-69.53-155-155a17.26 17.26 0 1 1 34.51 0 120.6 120.6 0 0 0 120.5 120.5 17.26 17.26 0 1 1 0 34.51z"/></svg>
-    </div>
-    <h5 id="loading_text">Running {{nb_title}}...</h5>
-  </div>
-<script>
-var voila_process = function(cell_index, cell_count) {
-  var el = document.getElementById("loading_text")
-  el.innerHTML = `Executing ${cell_index} of ${cell_count}`
-}
-</script>
-
-<div id="rendered_cells" style="display: none">
-{%- endblock body_header -%}
-
-  <header>
-    <div class="navbar-fixed">
-      <nav class="top-nav">
-        <div class="nav-wrapper">
-          <a href="#!" class="brand-logo-container">
-            <object class="brand-logo" type="image/svg+xml" data="{{ resources.base_url }}voila/static/voila_logo.svg"></object>
-          </a>
-          <ul class="right">
-            <li><a href="#"><i class="material-icons" id="kernel-status-icon">radio_button_unchecked</i></a></li>
-          </ul>
-        </div>
-      </nav>
-    </div>
-  </header>
-
-  <main>
-    <div class="container">
-      <div class="row">
-        <div class="col s12">
-          {% if resources.theme == 'dark' %}
-          <div class="jp-Notebook theme-dark">
-          {% else %}
-          <div class="jp-Notebook theme-light">
-          {% endif %}
-            {%- block body_loop -%}
-              {# from this point on, the kernel is started #}
-              {%- with kernel_id = kernel_start() -%}
-                <script id="jupyter-config-data" type="application/json">
-                {
-                    "baseUrl": "{{resources.base_url}}",
-                    "kernelId": "{{kernel_id}}"
-                }
-                </script>
-                {% set cell_count = nb.cells|length %}
-                {%- for cell in cell_generator(nb, kernel_id) -%}
-                  {% set cellloop = loop %}
-                  {%- block any_cell scoped -%}
-                  <script>
-                    voila_process({{ cellloop.index }}, {{ cell_count }})
-                  </script>
-                    {{ super() }}
-                  {%- endblock any_cell -%}
-                {%- endfor -%}
-              {% endwith %}
-            {%- endblock body_loop -%}
-            <div id="rendered_cells" style="display: none">
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-
-{%- block body_footer -%}
-  <script type="text/javascript">
-    (function() {
-      // remove the loading element
-      var el = document.getElementById("loading")
-      el.parentNode.removeChild(el)
-      // show the cell output
-      el = document.getElementById("rendered_cells")
-      el.style.display = 'unset'
-    })();
-  </script>
-
-  <script src="{{resources.base_url}}voila/static/materialize.min.js"></script>
-</body>
-{%- endblock body_footer -%}
-
-{% block footer_js %}
-  {{ super() }}
-
-  <script type="text/javascript">
-    requirejs(['static/voila'], function(voila) {
-      (async function() {
-        var kernel = await voila.connectKernel();
-
-        kernel.statusChanged.connect(() => {
-          // console.log(kernel.status);
-          var el = document.getElementById("kernel-status-icon");
-
-          if (kernel.status == 'busy') {
-            el.innerHTML = 'radio_button_checked';
-          } else {
-            el.innerHTML = 'radio_button_unchecked';
-          }
-        });
-      })();
-    });
-  </script>
-{% endblock footer_js %}
-
-{%- endblock body -%}
diff --git a/share/jupyter/voila/templates/material/templates/tree.html b/share/jupyter/voila/templates/material/tree.html
similarity index 100%
rename from share/jupyter/voila/templates/material/templates/tree.html
rename to share/jupyter/voila/templates/material/tree.html