diff --git a/static/index.html b/static/index.html
index 7a5abba..084d8b5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -14,7 +14,6 @@
 
 		<!-- framework utilisés -->
 		<script src="dep/ejs/js/ejs.min.js"></script>
-		<script src="site.js"></script>
 		<link href="dep/bootstrap/css/bootstrap.css" rel="stylesheet">
 		<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
 
@@ -61,54 +60,44 @@
 				</div>
 			</div>
 		</div>
-		<aside class="col-lg-4">
-			<div class="card card-blue" id="welcome">
-				<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
-				<div class="list-group list-group-flush">
-					<a href="#projets" class="list-group-item list-group-item-action">
-						<i class="fa fa-folder"></i> Projets
-					</a>
-					<a href="#hergement" class="list-group-item list-group-item-action">
-						<i class="fa fa-globe"></i> Sites et services
-					</a>
-					<a href="#divers" class="list-group-item list-group-item-action">
-						<i class="fa fa-list"></i> Divers
-					</a>
 
-				</div>
-			</div>
-			<a href="https://vault.kobold.city" class="btn btn-dark btn-block mb-3">Vault</a>
-		</aside>
-		<main class="col-lg-8">
-			<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
-			<div class="row site-cards">
-				<script>
-					renderSite({title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "purple", url: "https://git.kobold.cafe/birb/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"});
-					renderSite({title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "brown", url: "https://rulebook.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
-					renderSite({title: "Univers", description: "Des univers sous licence libre.", color: "brown", url: "https://univers.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
-				</script>
-			</div>
+		<div id="app"></div>
 
-			<h2 id="hergement"><i class="fa fa-globe"></i> Sites et services</h2>
-			<div class="row site-cards">
-				<script>
-					renderSite({title: "Kazhnuz Space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
-					renderSite({title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
-					renderSite({title: "Kobold Cafe", description: "Un espace personnel, permettant un petit bout de décentralisation.", color: "orange", url: "https://kobold.cafe", urlpoweredby: "https://yunohost.org", poweredby: "yunohost"});
-					renderSite({title: "Serveur git", description: "Un serveur git, permettant d'héberger les différents projets de kobold et des membres.", color: "green", url: "https://git.kobold.cafe", urlpoweredby: "https://gitea.io/en-us/", poweredby: "gitea"});
-				</script>
-			</div>
+		<script type="text/x-template" id="app-template">
+			<div class="row col-md-12">
+				<aside class="col-lg-4">
+					<div class="card card-blue" id="welcome">
+						<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
+						<div class="list-group list-group-flush">
+							<a v-bind:href="`#${section.id}`" class="list-group-item list-group-item-action" v-for="section in contenus">
+								<i v-bind:class="`fa fa-${section.fa}`"></i> {{section.name}}
+							</a>
+						</div>
+					</div>
+					<a href="https://vault.kobold.city" class="btn btn-dark btn-block mb-3">Vault</a>
+				</aside>
+				<main class="col-lg-8">
+					<div v-for="section in contenus">
+						<h2 v-bind:id="section.id"><i v-bind:class="`fa fa-${section.fa}`"></i> {{section.name}}</h2>
+						<div class="row site-cards">
 
-			<h2 id="divers"><i class="fa fa-list"></i> Divers</h2>
-			<div class="row site-cards">
-				<script>
-					renderSite({title: "Awesome GNOME", description: "Une liste d'app et extension GNOME.", color: "dark", url: "https://github.com/kazhnuz/awesome-gnome", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
-					renderSite({title: "Awesome Sonic", description: "Une liste de fancreation Sonic.", color: "blue", url: "https://github.com/kazhnuz/awesome-sonic", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
-					renderSite({title: "Resource Educ", description: "Une liste de resource éducative.", color: "yellow", url: "https://github.com/Kazhnuz/ressources-pedagogiques", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
-				</script>
-			</div>
+							<div class='col-md-12' v-for="site in section.sites">
+								<div v-bind:class='`card card-${site.color} mb-4 box-shadow card-border card-link`'>
+									<h4 class='align-center'>{{ site.title }}</h4>
+									<p class='card-text'>{{ site.description }}</p>
+									<p class='align-right'><a type='button' v-bind:href='site.url' v-bind:class='`btn btn-${site.color}`'>
+										<span class='acceder'>Accéder </span>
+										<i class='fa fa-external-link'></i></a>
+									</p>
+									<p class='powered-text align-center'>powered by <a v-bind:href='site.urlpoweredby'>{{ site.poweredby }}</a></p>
+								</div>
+							</div>
 
-		</main>
+						</div>
+					</div>
+				</main>
+			</div>
+		</script>
 	</div>
 </section>
 
@@ -146,7 +135,7 @@
 	</div>
 
 	<div class="col-md-4">
-		<p>Ce site est propulsé par <a href="ejs.co">EJS</a>, <a href="https://getbootstrap.com">Bootstrap4</a> et <a href="https://fork-awesome.org">Fork-Awesome</a> et est écrit sous forme de site static.</p>
+		<p>Ce site est propulsé par <a href="vuejs.com">VueJS</a>, <a href="https://getbootstrap.com">Bootstrap4</a> et <a href="https://fork-awesome.org">Fork-Awesome</a> et est écrit sous forme de site static.</p>
 
 		<p>Le theme utilisé est le theme <a href="https://git.kobold.cafe/kazhnuz/bluesky-bootstrap-theme">bluesky</a>, sous licence CC BY-SA.</p>
 
@@ -162,9 +151,7 @@
 </div>
 </footer>
 
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+		<script src="site.js"></script>
  </body>
 </html>
diff --git a/static/site.js b/static/site.js
index 0c0a95d..c2ccb09 100644
--- a/static/site.js
+++ b/static/site.js
@@ -1,6 +1,42 @@
-let template = "<div class='col-md-12'><div class='card card-<%= color %> mb-4 box-shadow card-border card-link'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><p class='align-right'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'><span class='acceder'>Accéder </span><i class='fa fa-external-link'></i></a></p><p class='powered-text align-center'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div>"
+// Kobold City
+// "App" script
+// A basic vueJS script to remplace the previous templating
+let contenus = [{
+  name:"Projets",
+  fa:"folder",
+  id:"projets",
+  sites: [
+    {title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "purple", url: "https://git.kobold.cafe/birb/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"},
+    {title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "brown", url: "https://rulebook.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"},
+    {title: "Univers", description: "Des univers sous licence libre.", color: "brown", url: "https://univers.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"},
+  ]
+},{
+  name:"Sites et services",
+  fa:"globe",
+  id:"hebergement",
+  sites: [
+    {title: "Kazhnuz Space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"},
+    {title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"},
+    {title: "Kobold Cafe", description: "Un espace personnel, permettant un petit bout de décentralisation.", color: "orange", url: "https://kobold.cafe", urlpoweredby: "https://yunohost.org", poweredby: "yunohost"},
+    {title: "Serveur git", description: "Un serveur git, permettant d'héberger les différents projets de kobold et des membres.", color: "green", url: "https://git.kobold.cafe", urlpoweredby: "https://gitea.io/en-us/", poweredby: "gitea"},
+  ]
+},{
+  name:"Divers",
+  fa:"list",
+  id:"divers",
+  sites: [
+    {title: "Awesome GNOME", description: "Une liste d'app et extension GNOME.", color: "dark", url: "https://github.com/kazhnuz/awesome-gnome", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
+    {title: "Awesome Sonic", description: "Une liste de fancreation Sonic.", color: "blue", url: "https://github.com/kazhnuz/awesome-sonic", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
+    {title: "Resource Educ", description: "Une liste de resource éducative.", color: "yellow", url: "https://github.com/Kazhnuz/ressources-pedagogiques", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
+  ]
+}];
 
-function renderSite(data) {
-  html = ejs.render(template, data);
-  document.write(html)
-}
+new Vue({
+  el:`#app`,
+  template:"#app-template",
+  data:()=>(
+    {
+      contenus
+    }
+  ),
+});