diff --git a/html/templates/systems/system.html b/html/templates/systems/system.html
deleted file mode 100644
index eb4ed2f..0000000
--- a/html/templates/systems/system.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="max-container smooth"> 
-    <p class="con-title" id="sys-name"></p>
-    <canvas id="canvas"></canvas>
-</div>
\ No newline at end of file
diff --git a/html/templates/systems/systems.html b/html/templates/systems/systems.html
index f040c78..b568d86 100644
--- a/html/templates/systems/systems.html
+++ b/html/templates/systems/systems.html
@@ -1,5 +1,4 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="max-container smooth"> 
-    <p class="con-title">Systems</p>
-    <canvas id="canvas"></canvas>
-</div>
\ No newline at end of file
+<div class="max-container smooth" id="canvas-container">
+  <canvas id="canvas"></canvas>
+</div>
diff --git a/js/controllers/menu_mod.js b/js/controllers/menu_mod.js
index 47b0e50..f4566f0 100644
--- a/js/controllers/menu_mod.js
+++ b/js/controllers/menu_mod.js
@@ -2,7 +2,7 @@ import { My } from "../skama_code/api/agent.js";
 import home from "./home.js";
 import login from "./login.js";
 import reg from "./reg.js";
-import { systems } from "./systems.js";
+import systems from "./systems.js";
 
 function init_menu(temp_engine) {
   temp_engine.add_event("#reg-link", "click", () => {
diff --git a/js/controllers/system.js b/js/controllers/system.js
deleted file mode 100644
index 915227f..0000000
--- a/js/controllers/system.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import { SystemBuilder } from "../skama_code/api/system.js";
-import { Position } from "../skama_code/commun/position.js";
-import menu_mod from "./menu_mod.js"
-
-let canvas; 
-let last_target;
-
-let offset = {
-    x: 2,
-    y: 2
-};
-let max = 100;
-let w = (window.innerWidth/10)*9;
-let h = (window.innerHeight/4)*3;
-
-function animate() {
-    canvas.renderAll();
-    setTimeout(animate, 1000);
-}
-
-function draw_planet(planet) {
-    let shadow = new fabric.Shadow({
-        color: "white",
-        blur: 5,
-        offsetX: 0,
-        offsetY: 0,
-    });
-
-    fabric.Image.fromURL('/assets/planets/planetproto.png', function(img_planet) {
-        //FABRICJS
-        img_planet.set({
-            selectable: false,
-            shadow: shadow,
-            left: planet.position.x/offset.x + w/2,
-            top: planet.position.y/offset.y+ h/2,
-            name: planet.name,
-            type: planet.type
-        });
-        canvas.add(img_planet);
-      });
-}
-
-function offsetOrbit(planet) {
-    if (planet.orbits) {
-        console.log("Orbits");
-        let x = Math.floor(Math.random() * max - Math.random() * max);
-        let y =  Math.floor(Math.random() * max - Math.random() * max);
-        planet.position.move(new Position(x, y));
-    }
-}
-
-export default function system(system, temp_engine) {
-    temp_engine.after_render((temp_engine) => {
-        $("#sys-name").text(system);
-        menu_mod(temp_engine);
-        canvas = new fabric.Canvas("canvas",{
-            width: w,
-            height: h,
-            backgroundColor:"rgb(7, 18, 41)",
-            renderOnAddRemove: false,
-            hoverCursor :'pointer'
-        });
-        SystemBuilder.get(system, (system) => {
-            system.list_all((planets) => {
-                planets.forEach(planet => {
-                    offsetOrbit(planet);
-                    draw_planet(planet);
-                });
-                animate();
-            }, (err) => {
-                console.log(err);
-            });
-        });
-        canvas.on('mouse:up', (e) => {
-            if(e.target.shadow.color == "red"){
-                e.target.shadow.color = "white"
-            }
-            else{
-                e.target.shadow.color = "red"
-            }
-            if (last_target) last_target.shadow.color = "white";
-            last_target = e.target;
-            canvas.renderAll();
-        });
-        $(window).on("resize", () => {
-            canvas.setWidth((window.innerWidth/10)*9);
-            canvas.setHeight((window.innerHeight/4)*3);
-            canvas.renderAll();
-        });
-        canvas.on("mouse:wheel", (opt) => {
-            let scale = 1.1;
-            if (opt.e.deltaY < 0) {
-                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() * scale);
-            } else if (opt.e.deltaY > 0) {
-                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / scale);
-            }
-        });
-    });
-    temp_engine.render("templates/systems/system.html");
-}
\ No newline at end of file
diff --git a/js/controllers/systems.js b/js/controllers/systems.js
index 363e924..8ac4123 100644
--- a/js/controllers/systems.js
+++ b/js/controllers/systems.js
@@ -1,80 +1,25 @@
-import { SystemBuilder } from "../skama_code/api/system.js";
-import menu_mod from "./menu_mod.js"
-import system from "./system.js"
+import { CanvasRenderer } from "../skama_code/rendering/canvas_render.js";
+import menu_mod from "./menu_mod.js";
 
-let canvas; 
-let last_target;
+export default (temp_engine) => {
+  temp_engine.after_render((temp_engine) => {
+    menu_mod(temp_engine);
+    const size = getSize();
+    const canvas = new CanvasRenderer("canvas", size.width, size.height);
 
-let offset = {
-    x: 2,
-    y: 2
-};
-let max = 100;
-let w = (window.innerWidth/10)*9;
-let h = (window.innerHeight/4)*3;
-
-function animate() {
-    canvas.renderAll();
-    setTimeout(animate, 1000);
-}
-
-function draw_system(system) {
-    let shadow = new fabric.Shadow({
-        color: "white",
-        blur: 5,
-        offsetX: 0,
-        offsetY: 0,
+    window.addEventListener("resize", () => {
+      console.log("tttt");
+      const size = getSize();
+      canvas.resize(size.width, size.height);
     });
+  });
 
-    fabric.Image.fromURL('/assets/systems/bluesystem.png', function(img_planet) {
+  temp_engine.render("templates/systems/systems.html");
+};
 
-        img_planet.set({
-            selectable: false,
-            scaleX: 0.20,
-            scaleY: 0.20,
-            shadow: shadow,
-            left: system.position.x/offset.x + w/2,
-            top: system.position.y/offset.y+ h/2,
-            name: system.name,
-            type: system.type
-        });
-        canvas.add(img_planet);
-      });
+function getSize() {
+  return {
+    width: $("#canvas-container").width(),
+    height: window.innerHeight,
+  };
 }
-
-export function systems(temp_engine) {
-    temp_engine.after_render((temp_engine) => {
-        menu_mod(temp_engine);
-        canvas = new fabric.Canvas("canvas",{
-            width: w,
-            height: h,
-            backgroundColor:"rgb(7, 18, 41)",
-            renderOnAddRemove: false,
-            hoverCursor :'pointer'
-        });
-        SystemBuilder.list_all((systems) => {
-                systems.forEach(system => {
-                    draw_system(system);
-                });
-                animate();
-            });
-        canvas.on('mouse:up', (e) => {
-            if (e.target) system(e.target.name, temp_engine);
-        });
-        $(window).on("resize", () => {
-            canvas.setWidth((window.innerWidth/10)*9);
-            canvas.setHeight((window.innerHeight/4)*3);
-            canvas.renderAll();
-        });
-        canvas.on("mouse:wheel", (opt) => {
-            console.log(opt.e.clientX);
-            let scale = 1.1;
-            if (opt.e.deltaY < 0) {
-                canvas.zoomToPoint(new fabric.Point(opt.e.clientX / canvas.getZoom(), opt.e.clienY / canvas.getZoom()), canvas.getZoom() * scale);
-            } else if (opt.e.deltaY > 0) {
-                canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), canvas.getZoom() / scale);
-            }
-        });
-    });
-    temp_engine.render("templates/systems/systems.html");
-}
\ No newline at end of file