diff --git a/templates/html/Wize_with_index_sod.html b/templates/html/Wize_with_index_sod.html
new file mode 100644
index 0000000..87d8503
--- /dev/null
+++ b/templates/html/Wize_with_index_sod.html
@@ -0,0 +1,288 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>[% title %]</title>
+    <meta name='Generator' content='[% generator.name %]'>
+    <link rel="stylesheet"
+        href="[% resource('common/zim-variables.css') %]" >
+    <link rel="stylesheet"
+        href="[% resource('common/zim-style.css') %]" >
+    <link rel="stylesheet"
+        href="[% resource('common/zim-table-style.css') %]" >
+    <link rel="stylesheet"
+        href="[% resource('common/zim-special.css') %]" >
+    <link rel="stylesheet"
+        href="[% resource('common/zim-hljs.css') %]" >
+      
+    <style type='text/css'>
+    
+        /* Comme on a le menu sur le côté   */
+        /* On augmente la taille de la page */
+        :root {
+            --main-page-width: 80em;
+        }
+    
+        *           { font-family: sans-serif }
+
+        a:hover     { text-decoration: underline; }
+        
+        /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
+        img {            
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        
+        /* Specifique au with index */
+        span.insen { color: grey }
+
+        .pages {
+            /*max-width: 1000px;*/
+            /*padding-left: 320px;*/
+            margin-left: 300px;
+            width: inherit;
+            transition: margin-left .3s;
+            background: white;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-bottom: 20px;
+            padding-top: 10px;
+        }
+        
+        .menu{
+            float:left;
+            width: 300px;
+            color:var(--main-header-color);
+            overflow-x: hidden;
+            /*position: absolute;*/
+            transition:.3s;
+            background: var(--main-menu-background-color);
+            border-style: solid;
+            border-width: 1px;
+            margin-left:-20px;
+        }
+        
+        .menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited {
+            color: var(--main-header-color);
+        }
+        
+        .menuOpen {
+            /*display: block;*/
+        }
+            
+        .menuClosed {
+            border-style: unset;
+        }
+        
+        .header{
+            max-width: var(--main-page-width);
+            position: fixed;
+            width: 100%;
+            top:0;
+            background:white;
+            z-index: 1;
+        }
+        
+        hr{
+            clear:both;
+            border-style: solid;
+            border-width: 1px;
+            border-color: var(--main-header-color);
+        }
+        
+        body {
+            max-width: var(--main-page-width);
+            display:block;
+            margin-left:auto;
+            margin-right:auto;
+            background: var(--main-body-background-color);
+        }
+
+        .intercalaire {
+            background:white;
+            margin-top: 48px;
+            padding: 10px;
+        }
+        
+        .bold-footer {
+            color: var(--main-header-color);
+        }
+        
+        .zemaster {
+            background: white;
+        }
+        
+    </style>
+
+<!-- Themes clair :
+    atom-one-light.css, vs.css googlecode.css github.css
+    qtcreator_light.css
+    Themes sombres :
+    agate.css vs2015.css atom-one-dark.css hybrid.css
+    ir-black.css sunburst.css tomorrow-night-bright.css
+    qtcreator_dark.css
+    Demo live : https://highlightjs.org/static/demo/ -->
+    <link rel="stylesheet"
+        href="[% resource('common/hljs/styles/sunburst.css') %]" >
+      
+    <!-- hljs -->
+    <script src="[% resource('common/hljs/highlight.pack.js') %]"></script>
+    
+    <script>
+    function openNav() {
+        if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") {
+            document.getElementById("mySidenav").style.width = "300px";            
+            document.getElementById("main").style.marginLeft = "300px"; 
+            document.getElementById("mySidenav").setAttribute("class","menu menuOpen");
+            /* Scroll to top when opening menu */
+            document.body.scrollTop = 0
+            document.documentElement.scrollTop = 0;
+        } else {
+            document.getElementById("mySidenav").style.width = "0";
+            document.getElementById("main").style.marginLeft = "0";
+            document.getElementById("mySidenav").setAttribute("class","menu menuClosed");            
+        }
+    }
+    </script>
+</head>
+<body>
+
+<!-- Header -->
+<div class='header'>
+<table class='navigation' style="float:left">
+<tr class='navigation'>
+<td class='navigation'>
+<span style="font-size:30px;cursor:pointer;color: var(--main-header-color);" onclick="openNav()">&#9776;</span>
+</td>
+<td class='navigation'>
+[% IF navigation.prev %]
+    <a href='[% uri(navigation.prev) %]'>
+    <img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
+    </a>
+[% ELSE %]
+    <img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
+[% END %]
+</td>
+<td class='navigation'>
+[% IF links.get("index") %]
+    <a href='[% uri(links.get("index")) %]'>
+    <img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
+    </a>
+[% ELSE %]
+    <img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
+[% END %]
+</td>
+<td class='navigation'>
+[% IF navigation.next %]
+    <a href='[% uri(navigation.next) %]'>
+    <img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
+    </a>
+[% ELSE %]
+    <img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
+[% END %]
+</td>
+</tr>
+</table>
+
+<span>
+[% FOR page IN pages %]
+<a name='[% anchor(page) %]'></a>
+<h1 style="display:inline-block;margin-left:20px;margin-top:5px;">
+[% page.title %]</h1>
+[% END %]
+</span>
+
+<table class='navigation' style="float:right;margin-right:10px;">
+<tr class='navigation'>
+<td class='navigation'>
+[% FOR page IN pages %]
+[% FOR link IN page.backlinks %]
+[% IF loop.first %]<a href="#backlinks">
+<img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'>
+</a>[% END %]
+[% END %]
+[% END %]
+</td>
+<td class='navigation'>
+[% FOR page IN pages %]
+[% FOR file IN page.attachments %]
+[% IF loop.first %]<a href="#attach">
+<img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'>
+</a>[% END %]
+[% END %]
+[% END %]
+</td>
+</tr>
+</table>
+</div>
+
+<div class="intercalaire">
+<hr />
+</div>
+
+<div class="zemaster">
+
+<div id="mySidenav" class="menu menuOpen">
+[% index() %]
+</div>
+
+[% options.empty_lines = "default" %]
+
+<!-- Wiki content -->
+
+<div id="main" class='pages'>
+<!--[% FOR page IN pages %]-->
+<!--
+    <div class='heading'>
+    <h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1>
+    </div>
+-->
+    <div class='content'>
+    [% page.body %]
+    </div>
+
+    <br />
+    
+    <div style="padding-bottom:10px;">
+    <hr />
+    </div>
+
+    <div class='page-footer'>
+    <!--[% FOR link IN page.backlinks %]-->
+        [% IF loop.first %]
+        <a name="backlinks"></a>
+        <b class="bold-footer">[% gettext("Backlinks:") %]</b>
+        [% END %]
+
+        <a href='[% uri(link) %]'>[% link.name %]</a>
+
+        [% IF loop.last %]<br /><br />[% END %]
+    <!--[% END %]-->
+
+    <!--[% FOR file IN page.attachments %]-->
+        [% IF loop.first %]
+            <a name="attach"></a>
+            <b class="bold-footer">[% gettext("Attachments:") %]</b>
+            <table>
+        [% END %]
+
+            <tr><td><a href='[% uri(file) %]'>[% file.basename %]</a></td><td>&nbsp;</td><td>[% file.size %]</td></tr>
+
+        [% IF loop.last %]
+            </table>
+        [% END %]
+    <!--[% END %]-->
+    </div>
+
+    [% IF not loop.last %]<hr />[% END %]
+
+<!--[% END %]-->
+</div>
+</div>
+
+<script src="[% resource('common/go-hljs.js') %]"></script>
+
+</body>
+
+</html>
diff --git a/templates/html/Wize_with_index_sod/common b/templates/html/Wize_with_index_sod/common
new file mode 120000
index 0000000..60d3b0a
--- /dev/null
+++ b/templates/html/Wize_with_index_sod/common
@@ -0,0 +1 @@
+../common
\ No newline at end of file