diff --git a/html/auth/login.html b/html/auth/login.html
new file mode 100644
index 0000000..e69de29
diff --git a/html/template.html b/html/template.html
new file mode 100644
index 0000000..df1afea
--- /dev/null
+++ b/html/template.html
@@ -0,0 +1,16 @@
+<audio id="audio" controls loop style="display:none" crossorigin="anonymous">
+    <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg">
+</audio>
+<script>
+    document.getElementById('audio').play();
+</script>
+<div class="languettes">
+    <input type="image" alt="languette1" id="home-link" src="/assets/menu/home.png"/>
+    <input type="image" alt="languette2" src="/assets/menu/contracts.png"/>
+    <input type="image" alt="languette3" src="/assets/menu/ships.png"/>
+    <input type="image" alt="languette4" src="/assets/menu/info.png"/>
+    <input type="image" alt="languette5" src="/assets/menu/leaderboard.png"/>
+</div>
+<div id="block-content">
+
+</div>
diff --git a/js/controllers/home.js b/js/controllers/home.js
new file mode 100644
index 0000000..e69de29
diff --git a/js/controllers/login.js b/js/controllers/login.js
new file mode 100644
index 0000000..60e434e
--- /dev/null
+++ b/js/controllers/login.js
@@ -0,0 +1,38 @@
+import { Auth } from "../skama_code/auth/auth.js";
+import { My } from "../skama_code/api/agent.js";
+import home from "./home.js";
+import menu_mod from "./menu_mod.js";
+
+export default function login(temp_engine) {
+  const auth = new Auth();
+
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+
+    temp_engine.add_event("#btn-login", "click", () => {
+      const is_checked = $("#in-remember").is(":checked");
+      const token = $("#in-token").val();
+      auth.store = is_checked;
+      auth.login(token);
+    });
+
+    temp_engine.add_event("#btn-cancel", "click", () => {
+      $("#in-token").val("");
+      $("#in-remember").prop("checked", false);
+    });
+  });
+
+  auth.done((agent) => {
+    My.agent = agent;
+    home(temp_engine);
+  });
+
+  auth.fail((errors) => {
+    $(".errors").html("");
+    errors.forEach((error) => {
+      $(".errors").append(`<p>${error}</p>`);
+    });
+  });
+
+  temp_engine.render(`templates/auth/login.html`);
+}
diff --git a/js/controllers/menu_mod.js b/js/controllers/menu_mod.js
new file mode 100644
index 0000000..2b03e1e
--- /dev/null
+++ b/js/controllers/menu_mod.js
@@ -0,0 +1,27 @@
+import { My } from "../skama_code/api/agent.js";
+import login from "./login.js";
+
+function init_menu(temp_engine) {
+  temp_engine.add_event("#login-link", "click", () => {
+    login(temp_engine);
+  });
+}
+
+function loged_links() {
+  $("#links").html(`
+        <input type="image" alt="home" id="systems-link" src="/assets/menu/home.png"/>
+        <input type="image" alt="contracts" id="contracts-link" src="/assets/menu/contracts.png"/>
+        <input type="image" alt="ships" id="ships-link" src="/assets/menu/ships.png"/>
+        <input type="image" alt="info" src="/assets/menu/info.png"/>
+        <input type="image" alt="leaderboard" src="/assets/menu/leaderboard.png"/>
+    `);
+}
+
+export default function menu_mod(temp_engine) {
+  init_menu(temp_engine);
+  if (My.agent) {
+    loged_links();
+  } else {
+    unloged_links();
+  }
+}
diff --git a/js/index.js b/js/index.js
index e69de29..85f6808 100644
--- a/js/index.js
+++ b/js/index.js
@@ -0,0 +1,7 @@
+// Copyright © 2023 Entreprise SkamKraft
+"use strict";
+import { TemplateEngine } from "./skama_code/ui/templeting_engine.js";
+import login from "./controllers/login.js";
+
+let temp_engine = new TemplateEngine("html");
+login(temp_engine);