diff --git a/css/style.css b/css/style.css
index 0fa94e7..4157a3a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,6 +20,20 @@ body {
     padding: 0px;
 }
 
+/* Main */
+.container {
+    display: flex;
+    margin: 10px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.container .con-title {
+    font-size: 15px;
+    border-bottom: 2px solid black;
+}
+
 /*footer*/
 footer {
     position: fixed;
@@ -39,11 +53,13 @@ footer {
     justify-content: space-between;
     align-items: center;
 }
+
 .nav-nav .nav-brand {
     display: flex;
     justify-content: center;
     align-items: center;
 }
+
 .nav-nav .nav-brand img {
     width: var(--nav-img-width);
 }
@@ -57,11 +73,6 @@ footer {
     justify-content: space-between;
 }
 
-.smooth {
-    padding: 5px;
-    border-radius: 10px;
-}
-
 .nav-link {
     margin-right: 10px;
     background-color: var(--links-backcolor);
@@ -72,4 +83,10 @@ footer {
     justify-content: center;
     align-items: center;
     box-shadow: 3px 2px white;
+}
+
+/* General */
+.smooth {
+    padding: 5px;
+    border-radius: 10px;
 }
\ No newline at end of file
diff --git a/html/template.html b/html/template.html
index 1dd5c17..d988745 100644
--- a/html/template.html
+++ b/html/template.html
@@ -3,11 +3,11 @@
     <img src="assets/logo/logoblancnotext.png" />
   </div>
   <ul class="nav-links">
-    <li class="nav-link smooth">Contracts</li>
-    <li class="nav-link smooth">System</li>
-    <li class="nav-link smooth">Ships</li>
-    <li class="nav-link smooth">Sign in</li>
-    <li class="nav-link smooth">Sigh up</li>
+    <li class="nav-link smooth" id="contracts-link">Contracts</li>
+    <li class="nav-link smooth" id="systems-link">System</li>
+    <li class="nav-link smooth" id="ships-link">Ships</li>
+    <li class="nav-link smooth" id="signin-link">Sign in</li>
+    <li class="nav-link smooth" id="signup-link">Sigh up</li>
   </ul>
 </nav>
 <main id="block-content"></main>
diff --git a/html/templates/contracts.html b/html/templates/contracts.html
new file mode 100644
index 0000000..e69de29
diff --git a/html/templates/home.html b/html/templates/home.html
index e69de29..6692b32 100644
--- a/html/templates/home.html
+++ b/html/templates/home.html
@@ -0,0 +1,4 @@
+<div class="container smooth"> 
+    <p class="con-title">Bienvenue sur SkamCraft</p>
+    <p class="con-content">Application client pour l'API Space Tarders.</p>
+</div>
\ No newline at end of file
diff --git a/html/templates/login.html b/html/templates/login.html
new file mode 100644
index 0000000..6ffa211
--- /dev/null
+++ b/html/templates/login.html
@@ -0,0 +1,8 @@
+<div class="container smooth"> 
+    <p class="con-title">Login</p>
+    <input type="text" placeholder="agent token">
+    <div class="grp-btn">
+        <button>Validate</button>
+        <button>Cancel</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/html/templates/register.html b/html/templates/register.html
new file mode 100644
index 0000000..e69de29
diff --git a/html/templates/ships.html b/html/templates/ships.html
new file mode 100644
index 0000000..e69de29
diff --git a/html/templates/systems.html b/html/templates/systems.html
new file mode 100644
index 0000000..e69de29
diff --git a/js/index.js b/js/index.js
index a155af6..e5bd147 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,13 +1,19 @@
 import {UIRenderer} from "./ui/templeting_engine.js";
 
 let UI = new UIRenderer("html");
+UI.render("templates/home.html")
 
+function init_menu_link(tag, template) {
+    UI.add_event(tag, "click", () => {
+        UI.render(`templates/${template}`);
+    })    
+}
 
-UI.render("templates/home.html");
-
-UI.add_event("#btn1", "click", () => {
-    UI.render("templates/test2.html");
-});
-UI.add_event("#btn2", "click", () => {
-    UI.render("templates/test.html");
-})
\ No newline at end of file
+$(document).ready(() => {
+    init_menu_link("#contracts-link", "contracts.html");
+    init_menu_link("#ships-link", "ships.html");
+    init_menu_link("#systems-link", "systems.html");
+    init_menu_link("#signup-link", "register.html");
+    init_menu_link("#signin-link", "login.html");
+    init_menu_link(".nav-brand", "home.html");
+});
\ No newline at end of file
diff --git a/js/ui/templeting_engine.js b/js/ui/templeting_engine.js
index 05af941..886a52a 100644
--- a/js/ui/templeting_engine.js
+++ b/js/ui/templeting_engine.js
@@ -2,11 +2,11 @@ export class UIRenderer {
   constructor(path) {
     this.templatePath = path;
   }
-  render(template) {
+  render(template, tag = "#block-content") {
     this.get_template((reponse) => {
       $('body').html(reponse);
       this.get_template((reponse) => {
-        $('#block-content').html(reponse);
+        $(tag).html(reponse);
       }, template)
     });
   }