diff --git a/mutalyzer/templates/base.html b/mutalyzer/templates/base.html
new file mode 100644
index 0000000000000000000000000000000000000000..f79fff29392a8c9a362dd995e5e8e1db2076d827
--- /dev/null
+++ b/mutalyzer/templates/base.html
@@ -0,0 +1,367 @@
+<html>
+  <head>
+    <link rel="shortcut icon"
+      href="static/images/favicon.ico"
+      type="image/x-icon">
+    <link rel="stylesheet"
+      type="text/css"
+      href="static/css/style.css">
+    <script
+      type="text/javascript"
+      language="javascript"
+      src="static/js/interface.js">
+    </script>
+    <script
+      type="text/javascript"
+      language="javascript"
+      src="static/js/generator.js">
+    </script>
+    <meta http-equiv="Content-Type"
+      content="text/html; charset=iso-8859-1">
+    <title>Mutalyzer {{ version|e }} &mdash; {{ page_title|e }}</title>
+  </head>
+  <body
+    style="background-image: url('static/images/background.gif');
+           background-repeat: repeat-y;"
+    leftmargin="0"
+    topmargin="0"
+    marginwidth="0"
+    marginheight="0">
+    <!-- Header -->
+    <a id = "top" name = "top"></a>
+
+    <table width="98%"
+      border="0"
+      cellspacing="0"
+      cellpadding="0">
+      <tr>
+        <!-- Corner logo -->
+        <td rowspan="2"
+          valign="bottom"
+          width="180">
+          <a href="index"
+            target="_top"><img
+              src="static/images/mutalyzer_logo_bw.png" width="180" height="112"
+              alt="Rauzy fractal" border="0" hspace="0" vspace="0"></a></td>
+        <td valign="top"
+          bgcolor="#FFFFFF"
+          width="20"><img
+            src="static/images/1x1b.gif" height="1" width="20" border="0">
+        </td>
+        <td align="left"
+          valign="bottom"
+          bgcolor="White"
+          width="98%">
+          <!-- Banner -->
+          <center>
+            <a href="index"><img
+                src="static/images/mutalyzer_logo.png"
+                width="90%"
+                height="90"
+                alt="Rauzy color fractal"
+                border="0"></a>
+          </center>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+        </td>
+        <td>
+        <table width = "100%" style = "padding:0; border:0; margin:0">
+          <tr>
+            <td align="left">
+              <a href="javascript:history.back(-1);"
+                 class="hornav">previous page</a>&nbsp;&nbsp;&nbsp;
+            </td>
+            <td align="right">
+              <a href="index"
+                 class="hornav">home</a>&nbsp;&nbsp;&nbsp;
+              <a href="about"
+                 class="hornav">about</a>&nbsp;&nbsp;&nbsp;
+              <a href="mailto:{{ contactEmail|e }}"
+                 class="hornav">contact</a>&nbsp;&nbsp;&nbsp;
+              <a href="#bottom" class="hornav">go to bottom</a>&nbsp;&nbsp;&nbsp;
+            </td>
+          </tr>
+        </table>
+        </td>
+      </tr>
+
+      <tr>
+        <td colspan="3"
+          bgcolor="#000000"><img
+            src="static/images/1x1b.gif"
+            height="1"
+            border="0"></td>
+      </tr>
+    </table>
+
+    <table width="98%"
+      border="0"
+      cellspacing="0"
+      cellpadding="0">
+    <tr>
+      <td width="180" valign="top">
+
+      <table id="menu" width="180" border="0" cellspacing="0" cellpadding="0">
+      <tr>
+        <td valign="top" width="20">
+          <img src="static/images/1x1b.gif" height="19" border="0">
+        </td>
+      </tr>
+
+{# Fields are: url, id, caption, subnav #}
+{% set navigation_menu = [
+    ('index', 'homepage', 'Home', False),
+    ('check', 'name-checker', 'Name Checker', False),
+    ('syntaxCheck', 'syntax-checker', 'Syntax Checker', False),
+    ('positionConverter', 'position-converter', 'Position Converter', False),
+    ('snp', 'snp-converter', 'SNP Converter', False),
+    ('nameGenerator', 'name-generator', 'Name Generator', False),
+    ('descriptionExtract', 'description-extractor', 'Description Extractor', False),
+    ('upload', 'reference-loader', 'Reference File Loader', False),
+    ('batch', 'batch-jobs', 'Batch Jobs', False),
+    ('batchNameChecker', 'batch-name-checker', 'Name Checker', True),
+    ('batchSyntaxChecker', 'batch-syntax-checker', 'Syntax Checker', True),
+    ('batchPositionConverter', 'batch-position-converter', 'Position Converter', True),
+    ('batchSnpConverter', 'batch-snp-converter', 'SNP Converter', True),
+    ('webservices', 'webservices', 'Web Services', False)
+] -%}
+{% set active_page = active_page|default('home') -%}
+
+{% for url, id, caption, subnav in navigation_menu %}
+  <tr class="menu{% if id == active_page %} active{% endif %}">
+    {% if subnav %}
+      <td></td>
+      <td valign="baseline" width="10" class="bullet sub"></td>
+      <td colspan="2">
+        <a href="{{ url|e }}">{{ caption|e }}</a>
+      </td>
+    {% else %}
+      <td valign="top" width="20" class="bullet"></td>
+      <td colspan="3">
+        <a href="{{ url|e }}">{{ caption|e }}</a>
+      </td>
+    {% endif %}
+  </tr>
+{% endfor %}
+
+      <tr><td>&nbsp;</td></tr>
+
+      <tr class="menu">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/MutalyzerDocumentation">Documentation</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/MutalyzerFaq">FAQ</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/MutalyzerExercise">Exercise</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/MutalyzerDisclaimer">Disclaimer</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer">Feedback</a>
+        </td>
+      </tr>
+
+      <tr><td>&nbsp;</td></tr>
+
+      <tr class="menu inactive">
+        <td valign="top" width="20" class="bullet"></td>
+        <td colspan="3">
+          External Links
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td></td>
+        <td valign="baseline" width="10" class="bullet sub"></td>
+        <td colspan="2">
+          <a href="http://www.genenames.org/guidelines.html"
+           >Human Gene Nomenclature</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td></td>
+        <td valign="baseline" width="10" class="bullet sub"></td>
+        <td colspan="2">
+          <a href="http://www.hgvs.org/mutnomen/"
+           >HGVS Variation Nomenclature</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td></td>
+        <td valign="baseline" width="10" class="bullet sub"></td>
+        <td colspan="2">
+          <a href="http://dx.doi.org/10.1002/humu.21427"
+           >HGVS Nomenclature Extension Proposal</a>
+        </td>
+      </tr>
+
+      <tr class="menu">
+        <td></td>
+        <td valign="baseline" width="10" class="bullet sub"></td>
+        <td colspan="2">
+          <a href="http://www.lovd.nl/">LOVD</a>
+        </td>
+      </tr>
+
+      <tr>
+        <td width="20"><img
+          src="static/images/1x1b.gif"
+          height="10"
+          width="20"
+          border="0">
+        </td>
+        <td width="12"><img
+          src="static/images/1x1b.gif"
+          height="10"
+          width="10"
+          border="0">
+        </td>
+        <td valign="top" width="12"><img
+          src="static/images/1x1b.gif"
+          height="10"
+          width="10"
+          border="0">
+        </td>
+        <td valign="top" width="136"><img
+          src="static/images/1x1b.gif"
+          height="10"
+          width="136"
+          border="0">
+        </td>
+      </tr>
+      </table>
+
+    </td>
+    <td width="20"><img
+      src="static/images/1x1b.gif"
+      height="1"
+      width="20"
+      border="0">
+    </td>
+    <td width="98%" valign="top"><br>
+
+    <!-- Content -->
+
+    <table cellpadding="0" cellspacing="0" width="100%" border="0">
+    <tbody><tr>
+    <td width="0"></td>
+    <td width="0">
+
+
+    <center>
+      <h2>Mutalyzer {{ version|e }}<br>
+        <small><small><small><small>
+        {% if release %}
+          released on {{ releaseDate|e }}
+        {% else %}
+          development version
+        {% endif %}
+        </small></small></small></small>
+      </h2>
+      HGVS nomenclature version
+      <span>{{ nomenclatureVersion|e }}</span>
+    </center>
+    <p>
+
+    <h3><center>{{ page_title|e }}</center></h3>
+
+    {% block content %}{% endblock %}
+
+      <!-- Navigation bar -->
+      <table border="0"
+        cellspacing="0"
+        cellpadding="0"
+          width="100%"
+        align="center">
+      <tr>
+        <td colspan="2"><img
+          src="static/images/1x1b.gif"
+          width="1"
+          height="20"
+          border="0">
+        </td>
+      </tr>
+      <tr>
+        <td bgcolor="#000000" colspan="3"><img
+          src="static/images/1x1b.gif"
+          width="100%"
+          height="1"
+          border="0"></td>
+      </tr>
+      <tr>
+        <td align="left">
+          &nbsp;<a href="javascript:history.back(-1);"
+             class="hornav">previous page</a>
+        </td>
+        <td align="middle">
+          <img src = "static/images/LUMC_24x24.png" align = "middle">
+          &nbsp; &copy; {{ copyrightYears[0]|e }}-{{ copyrightYears[1]|e }}
+          <a href = "http://www.lumc.nl">LUMC</a>
+          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+          &nbsp; &nbsp;
+        </td>
+        <td align="right">
+          <a href="#top" class="hornav">go to top</a>&nbsp;&nbsp;&nbsp;&nbsp;
+        </td>
+      </tr>
+      <tr>
+  <!--
+        <td colspan="2"
+          align="center">Last edited by:  with /usr/bin/vim
+        </td>
+  -->
+      </tr>
+      <tr>
+        <td colspan="2"><img
+          src="static/images/1x1b.gif"
+          width="1"
+          height="10"
+          border="0">
+        </td>
+      </tr>
+      </table>
+    </td>
+  </tr>
+  </table>
+  <a id = "bottom" name = "bottom"></a>
+{% if piwik %}
+<!-- Piwik -->
+<script type="text/javascript">
+var pkBaseURL = "{{ piwikBase|e }}/";
+document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
+</script><script type="text/javascript">
+try {
+var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", {{ piwikSite|e }});
+piwikTracker.trackPageView();
+piwikTracker.enableLinkTracking();
+} catch( err ) {}
+</script><noscript><p><img src="{{ piwikBase|e }}/piwik.php?idsite={{ piwikSite|e }}" style="border:0" alt="" /></p></noscript>
+<!-- End Piwik Tracking Code -->
+{% endif %}
+  </body>
+</html>
diff --git a/mutalyzer/templates/parse.html b/mutalyzer/templates/parse.html
deleted file mode 100644
index 107ad052c439110f3c66beab03869dc789d72279..0000000000000000000000000000000000000000
--- a/mutalyzer/templates/parse.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet"
-      type="text/css"
-      href="static/css/style.css">
-    <title></title>
-  </head>
-  <body>
-    <div metal:define-macro="content">
-      <center>
-        <h3>Variant syntax checker</h3>
-      </center>
-      <div style="border: 1px solid grey; background-color: aliceblue; padding: 20px;">
-        <div>
-        Please insert the mutation name using the
-        <span class = "helper" title =
-          "Human Genome Variation Society standard variant nomenclature">
-          <a href = "http://www.hgvs.org/mutnomen">HGVS</a> format</span>:<br>
-          &lt;accession number&gt;.&lt;version
-          number&gt;(&lt;gene symbol&gt;):&lt;sequence
-          type&gt;.&lt;variant description&gt;
-        </div><br>
-        Example: AB026906.1:c.274G&gt;T<br>
-        <br>
-        <form action = "" method = "post">
-          <input
-            type = "text"
-            name = "variant"
-            tal:attributes = "value variant"
-            style = "width:100%"><br>
-          <input
-            type="submit"
-            value="Submit">
-          <input type="button" value="Clear field"
-            onclick="clearField(this.form, 'variant');">
-          <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/SyntaxChecker">Help</a>
-        </form>
-        <br>
-      </div>
-      <br>
-      <div tal:condition = "variant">
-        <h3>Variant syntax checker results:</h3>
-        <div tal:condition = "parseError">
-          <div class="messages">
-            <p tal:repeat = "m messages" tal:content = "m/description"
-               tal:attributes = "class m/class; title string:${m/level} (origin: ${m/origin})"></p>
-            <p tal:content = "summary"></p>
-            <br>
-          </div>
-          <h4>Details of the parse error:</h4>
-          <pre tal:content =
-            "structure string:${parseError/0}<br>${parseError/1}">
-          </pre>
-          The &quot;^&quot; indicates the position where the error occurred.
-        </div>
-        <div tal:condition = "not:parseError">
-          The syntax of this variant is OK!
-        </div>
-        <br>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/mutalyzer/templates/syntax_checker.html b/mutalyzer/templates/syntax_checker.html
new file mode 100644
index 0000000000000000000000000000000000000000..1052c4640afa2e2169a2bb0a8974d020059d2734
--- /dev/null
+++ b/mutalyzer/templates/syntax_checker.html
@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% set active_page = "syntax-checker" %}
+{% set page_title = "Variant syntax checker" %}
+
+{% block content %}
+
+<div style="border: 1px solid grey; background-color: aliceblue; padding: 20px;">
+  <div>
+  Please insert the mutation name using the
+  <span class = "helper" title =
+    "Human Genome Variation Society standard variant nomenclature">
+    <a href = "http://www.hgvs.org/mutnomen">HGVS</a> format</span>:<br>
+    &lt;accession number&gt;.&lt;version
+    number&gt;(&lt;gene symbol&gt;):&lt;sequence
+    type&gt;.&lt;variant description&gt;
+  </div><br>
+  Example: AB026906.1:c.274G&gt;T<br>
+  <br>
+  <form action = "" method = "post">
+    <input
+      type = "text"
+      name = "variant"
+      value = "{{ variant|e }}"
+      style = "width:100%"><br>
+    <input
+      type="submit"
+      value="Submit">
+    <input type="button" value="Clear field"
+      onclick="clearField(this.form, 'variant');">
+    <a href="https://humgenprojects.lumc.nl/trac/mutalyzer/wiki/SyntaxChecker">Help</a>
+  </form>
+  <br>
+</div>
+<br>
+{% if variant %}
+  <h3>Variant syntax checker results:</h3>
+  {% if parseError %}
+    <div class="messages">
+      {% for m in messages %}
+        <p class="{{ m.class|e }}" title="{{ m.level|e }} (origin: {{ m.origin|e }})">{{ m.description|e }}</p>
+      {% endfor %}
+      <p>{{ summary|e }}</p>
+      <br>
+    </div>
+    <h4>Details of the parse error:</h4>
+    <pre>{{- parseError[0]|e }}<br>{{- parseError[1]|e }}</pre>
+    <p>The &quot;^&quot; indicates the position where the error occurred.</p>
+  {% else %}
+    <p>The syntax of this variant is OK!</p>
+  {% endif %}
+  <br>
+{% endif %}
+
+{% endblock content %}
diff --git a/mutalyzer/website.py b/mutalyzer/website.py
index 138175231e88ccce507db12f60f7ac75d42c9388..01613a589c24fb4062f0f0ffad1ee9640678b3d6 100644
--- a/mutalyzer/website.py
+++ b/mutalyzer/website.py
@@ -24,6 +24,7 @@ import bz2
 import web
 import urllib
 from collections import defaultdict
+from web.contrib.template import render_jinja
 
 from lxml import etree
 import pkg_resources
@@ -176,7 +177,7 @@ class render_tal:
 
 
 # TAL template render
-render = render_tal(pkg_resources.resource_filename('mutalyzer', 'templates'),
+render_ = render_tal(pkg_resources.resource_filename('mutalyzer', 'templates'),
     globals = {
     'version'             : mutalyzer.__version__,
     'nomenclatureVersion' : mutalyzer.NOMENCLATURE_VERSION,
@@ -191,6 +192,22 @@ render = render_tal(pkg_resources.resource_filename('mutalyzer', 'templates'),
     'piwikSite'           : config.get('piwikSite')
 })
 
+# Jinja2 template render
+render = render_jinja(pkg_resources.resource_filename('mutalyzer', 'templates'),
+                      encoding='utf-8',
+                      globals = {
+    'version'             : mutalyzer.__version__,
+    'nomenclatureVersion' : mutalyzer.NOMENCLATURE_VERSION,
+    'releaseDate'         : mutalyzer.__date__,
+    'release'             : mutalyzer.RELEASE,
+    'copyrightYears'      : mutalyzer.COPYRIGHT_YEARS,
+    'contactEmail'        : config.get('email'),
+    'serviceSoapLocation' : SERVICE_SOAP_LOCATION,
+    'serviceJsonLocation' : SERVICE_JSON_LOCATION,
+    'piwik'               : config.get('piwik'),
+    'piwikBase'           : config.get('piwikBase'),
+    'piwikSite'           : config.get('piwikSite')})
+
 # web.py application
 app = web.application(urls, globals(), autoreload = False)
 
@@ -424,7 +441,7 @@ class SyntaxCheck:
             "parseError"    : None,
             "debug"         : ""
         }
-        return render.parse(args)
+        return render.syntax_checker(args)
     #GET
 
     def POST(self):
@@ -468,7 +485,7 @@ class SyntaxCheck:
         output.addMessage(__file__, -1, 'INFO',
             'Finished request syntaxCheck(%s)' % i.variant)
 
-        return render.parse(args)
+        return render.syntax_checker(args)
     #POST
 #SyntaxCheck
 
@@ -531,7 +548,7 @@ class Snp:
             'lastpost' : rs_id
         }
 
-        return render.snp(args)
+        return render_.snp(args)
     #snp
 #Snp
 
@@ -637,7 +654,7 @@ class PositionConverter:
                 'Finished request positionConverter(%s, %s)' % (build,
                 variant))
 
-        return render.converter(attr)
+        return render_.converter(attr)
     #position_converter
 #PositionConverter
 
@@ -801,7 +818,7 @@ class Check:
             the site layout and include the HTML form.
         """
         if not name:
-            return render.check(dict(name=None), standalone=standalone)
+            return render_.check(dict(name=None), standalone=standalone)
 
         output = Output(__file__)
         output.addMessage(__file__, -1, 'INFO', 'Received variant %s from %s'
@@ -904,7 +921,7 @@ class Check:
 
         output.addMessage(__file__, -1, 'INFO', 'Finished variant %s' % name)
 
-        return render.check(args, standalone=standalone, prevent_caching=True)
+        return render_.check(args, standalone=standalone, prevent_caching=True)
     #check
 #Check
 
@@ -953,7 +970,7 @@ class DescriptionExtractor:
         }
 
         if not (referenceSeq and variantSeq):
-            return render.descriptionExtract(args)
+            return render_.descriptionExtract(args)
 
         output.addMessage(__file__, -1, 'INFO',
             "Received Description Extract request from %s" % IP)
@@ -990,7 +1007,7 @@ class DescriptionExtractor:
         output.addMessage(__file__, -1, 'INFO',
             "Finished Description Extract request")
 
-        return render.descriptionExtract(args)
+        return render_.descriptionExtract(args)
     #descriptionExtract
 #DescriptionExtract
 
@@ -1101,7 +1118,7 @@ class BatchProgress:
             web.header('Content-Type', 'text/plain')
             return ret
 
-        return render.progress(attr)
+        return render_.progress(attr)
     #GET
 #BatchProgress
 
@@ -1245,7 +1262,7 @@ class BatchChecker:
 
             attr["errors"].extend(map(util.message_info, O.getMessages()))
 
-        return render.batch(attr, page=page)
+        return render_.batch(attr, page=page)
     #batch
 #BatchChecker
 
@@ -1341,7 +1358,7 @@ class Uploader:
             'maxSize'              : float(maxUploadSize) / 1048576,
             'errors'               : errors
         }
-        return render.gbupload(args)
+        return render_.gbupload(args)
     #GET
 
     def POST(self):
@@ -1508,7 +1525,7 @@ class Uploader:
                i.fiveutr, i.threeutr, i.chracc, i.start, i.stop, i.orientation,
                i.chrnameassembly, i.chrname, i.chrnamestart, i.chrnamestop, i.chrnameorientation))
 
-        return render.gbupload(args)
+        return render_.gbupload(args)
     #POST
 #Uploader
 
@@ -1567,7 +1584,7 @@ class Static:
         """
         Render a TAL template as HTML.
 
-        @kwarg page: Page name to render. A TAL template with this name must
+        @kwarg page: Page name to render_. A TAL template with this name must
                      exist. Special case is a page of None, having the same
                      effect as 'index'.
         @type page: string
@@ -1579,6 +1596,6 @@ class Static:
         if not page:
             page = 'index'
 
-        return getattr(render, page)()
+        return getattr(render_, page)()
     #GET
 #Static
diff --git a/requirements.txt b/requirements.txt
index da91f3e38069c36c2518ee045c32ef07dd44269f..4ab103492465b30593219b25d1e9575eb0e030f0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -18,5 +18,6 @@ xlrd==0.9.2
 WebOb==1.1.1
 WebTest==1.4.2
 cssselect==0.9.1
+Jinja2==2.7.1
 -e git+https://github.com/mammadori/magic-python.git#egg=Magic_file_extensions
 http://www.owlfish.com/software/simpleTAL/downloads/SimpleTAL-4.3.tar.gz