diff --git a/js/API/API.js b/js/API/API.js
new file mode 100644
index 0000000..e69de29
diff --git a/js/Render/renderer.js b/js/Render/renderer.js
new file mode 100644
index 0000000..b5d4fdf
--- /dev/null
+++ b/js/Render/renderer.js
@@ -0,0 +1,41 @@
+class renderer {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext("2d");
+        this.waypoints = [];
+        this.ships = [];
+    }
+    
+    drawSystem() {
+        const canvas = document.getElementById("canvas");
+        let w = canvas.width;
+        let h = canvas.height; 
+        const ctx = canvas.getContext("2d");
+
+        this.waypoints.forEach(waypoint => {
+            switch (waypoint.type) {
+                case "PLANET": 
+                    drawWaypoint(waypoint, ctx, w/2, h/2, 'green');
+                    break;
+                case "ASTEROID": 
+                    drawWaypoint(waypoint, ctx, w/2, h/2, 'blue');
+                    break;
+                case "GAS_GIANT": 
+                    drawWaypoint(waypoint, ctx, w/2, h/2, 'red');
+                    break;    
+            }
+        
+        });
+    }
+
+    drawShips() {
+
+    }
+
+    drawWaypoint(wayPoint, ctx, w, h, color) {
+        ctx.beginPath();
+        ctx.fillStyle = color;
+        ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 1, 0, 2 * Math.PI);
+        ctx.fill();
+    }
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index a230184..0a09669 100644
--- a/js/main.js
+++ b/js/main.js
@@ -82,32 +82,4 @@ function getSystem(system) {
     });
 }
 
-function drawSystem(wayPoints) {
-    const canvas = document.getElementById("canvas");
-    let w = canvas.width;
-    let h = canvas.height; 
-    const ctx = canvas.getContext("2d");
-    wayPoints.forEach(wayPoint => {
-        switch (wayPoint.type) {
-            case "PLANET": 
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'green');
-                break;
-            case "ASTEROID": 
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'blue');
-                break;
-            case "GAS_GIANT": 
-                drawWaypoint(wayPoint, ctx, w/2, h/2, 'red');
-                break;    
-        }
-       
-    });
-}
-
-function drawWaypoint(wayPoint, ctx, w, h, color) {
-    ctx.beginPath();
-    ctx.fillStyle = color;
-    ctx.arc(wayPoint.x/offset.x + w, wayPoint.y/offset.y + h, 1, 0, 2 * Math.PI);
-    ctx.fill()
-}
-
 getAgent();