diff --git a/documentation/codeSnippets/controller/basicjoycon.js b/documentation/codeSnippets/controller/basicjoycon.js
index b3ded45..be67178 100644
--- a/documentation/codeSnippets/controller/basicjoycon.js
+++ b/documentation/codeSnippets/controller/basicjoycon.js
@@ -4,8 +4,9 @@ function update(parent) {
   if (!!gamepads[0] && gamepads[0].totalJoysticks > 0) {
     //This gets the 1st joystick position on the first controller.
     let joycon = gamepads[0].getJoystickPosition(0);
+
     // The values can go from -1 to 1 for both the x and the y
-    parent.x += joycon.x * 10;
-    parent.y += joycon.y * 10;
+    parent.incrementX(joycon.x);
+    parent.incrementY(joycon.y);
   }
 }
diff --git a/index.html b/index.html
index 7e9e7af..a4898b8 100644
--- a/index.html
+++ b/index.html
@@ -120,6 +120,7 @@ <h1 class="orangeText" id="welcomeTitle">
                 href="./documentation/index.html"
                 class="orangeText"
                 id="welcomeDocsButton"
+                target="_blank"
                 >Looking for the docs? Click Here</a
               >
             </div>
diff --git a/index.js b/index.js
index 2660ac3..a141480 100644
--- a/index.js
+++ b/index.js
@@ -24,7 +24,10 @@ import {
 } from "./scripts/toolbox.js";
 import {} from "./scripts/flatted.min.js";
 import { compileCurrentProject } from "./scripts/Compiler/compilerManager.js";
-import { loadProject } from "./scripts/SaveProject/saveManager.js";
+import {
+  initSaveManager,
+  loadProject,
+} from "./scripts/SaveProject/saveManager.js";
 
 game.start();
 
@@ -35,6 +38,7 @@ initRightClickMenuManager();
 initCanvasSizer();
 initAssetManager();
 setupSaveButtonHandlers();
+initSaveManager();
 
 document.getElementById("AddObject").addEventListener("click", () => {
   addEmptyObject(selectedObject);
diff --git a/scripts/AssetPanel/fileManager.js b/scripts/AssetPanel/fileManager.js
index 03dfbcf..6c6472b 100644
--- a/scripts/AssetPanel/fileManager.js
+++ b/scripts/AssetPanel/fileManager.js
@@ -24,6 +24,7 @@ addDirectory("/scripts");
 
 document.getElementById("createNewFile").addEventListener("click", () => {
   let name = prompt("Please name your script. Dont use any special characters");
+  if (!name) return;
   //Dont allow fancy characters in the name
   if (name.match(/[^a-zA-Z0-9_-]/g)) {
     addInfoPopup("Error", "Dont use any special characters", popupTypes.ERROR);
@@ -95,6 +96,14 @@ export function addDirectory(fullDir) {
   if (fullDir != "") directories.get(parentDir).addChildDirectory(fullDir);
   directories.set(fullDir, dir);
 }
+
+function postHTTPSrequest(url, data) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", url, true);
+  xhr.setRequestHeader("Content-type", "application/json");
+  xhr.send(JSON.stringify(data));
+}
+
 /**
  * @description - Reload the currend directory to show any new files/folders
  */
diff --git a/scripts/Compiler/Dependencies/baseDep.js b/scripts/Compiler/Dependencies/baseDep.js
index 2efda42..46cc0fb 100644
--- a/scripts/Compiler/Dependencies/baseDep.js
+++ b/scripts/Compiler/Dependencies/baseDep.js
@@ -1,3 +1,5 @@
+let updaters = [];
+
 class File {
   /**
    *
@@ -68,6 +70,9 @@ function loop() {
   lastRender = Date.now();
   frame++;
 
+  updaters.forEach((updater) => {
+    updater();
+  });
   //LOOP HERE
 }
 
diff --git a/scripts/Compiler/Dependencies/depList.txt b/scripts/Compiler/Dependencies/depList.txt
index 4df354b..bd7e00c 100644
--- a/scripts/Compiler/Dependencies/depList.txt
+++ b/scripts/Compiler/Dependencies/depList.txt
@@ -13,3 +13,5 @@ scripts/Objects/Components/textComponent.js
 scripts/Objects/Components/imageComponent.js
 //needed
 scripts/Objects/ObjectManager.js
+//extra
+scripts/Compiler/Dependencies/gamepad.js
diff --git a/scripts/Compiler/Dependencies/gamepad.js b/scripts/Compiler/Dependencies/gamepad.js
new file mode 100644
index 0000000..be5729a
--- /dev/null
+++ b/scripts/Compiler/Dependencies/gamepad.js
@@ -0,0 +1,142 @@
+//
+
+/**
+ * @addToUpdate - updateGameController();
+ */
+
+updaters.push(() => {
+  updateGameController();
+});
+
+class GamePad {
+  gamepad;
+  id;
+  controllerButtonMap = new Map();
+  controllerJoysticks = new Map();
+  totalButtons;
+  totalJoysticks;
+  mapping;
+  setGamePad(gp) {
+    this.gamepad = gp;
+    this.totalButtons = gp.buttons.length;
+    this.totalJoysticks = gp.axes.length / 2;
+    this.mapping = gp.mapping;
+    //console.log(this.totalJoysticks);
+  }
+
+  getButton(id) {
+    try {
+      return !this.controllerButtonMap.get(id)
+        ? 0
+        : this.controllerButtonMap.get(id);
+    } catch (error) {
+      console.error(error);
+      return 0;
+    }
+  }
+
+  getID() {
+    return this.id;
+  }
+
+  vibrate(intesity, duration) {
+    //Intensity 0 - 1
+    //Duration in ms
+    try {
+      this.gamepad.vibrationActuator.playEffect(
+        this.gamepad.vibrationActuator.type,
+        {
+          startDelay: 0,
+          duration: duration,
+          weakMagnitude: intesity,
+          strongMagnitude: intesity,
+        }
+      );
+      return true;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  }
+
+  getJoystickPosition(id) {
+    try {
+      return {
+        x: !this.controllerJoysticks.get(id * 2)
+          ? 0
+          : this.controllerJoysticks.get(id * 2),
+        y: !this.controllerJoysticks.get(id * 2 + 1)
+          ? 0
+          : this.controllerJoysticks.get(id * 2 + 1),
+      };
+    } catch (error) {
+      return {
+        x: 0,
+        y: 0,
+      };
+    }
+  }
+}
+
+function supportsGamepads() {
+  return !!navigator.getGamepads;
+}
+
+let driftGuard = 0.2;
+function setDriftGuardBounds(d) {
+  driftGuard = d;
+}
+
+let _gamepads = navigator.getGamepads();
+let controllerButtonMap = new Map();
+let controllerJoysticks = new Map();
+
+let gamepads = [];
+let totalGamepads;
+
+function updateGameController() {
+  _gamepads = navigator.getGamepads();
+
+  /*for(let i = 0; i < _gamepads.length; i++){
+      gamepads = [];
+      gamepads.push(new GamePad());
+    }*/
+  totalGamepads = 0;
+  for (let i = 0; i < _gamepads.length; i++) {
+    if (_gamepads[i] != null) totalGamepads++;
+  }
+
+  if (totalGamepads != gamepads.length) {
+    if (totalGamepads < gamepads.length) gamepads.pop();
+    else gamepads.push(new GamePad());
+  }
+
+  // For each controller, show all the button and axis information
+  for (let i = 0; i < totalGamepads; i++) {
+    let gp = _gamepads[i];
+    gamepads[i].setGamePad(gp);
+    gamepads[i].id = gp.id;
+    if (!gp || !gp.connected) {
+      continue;
+    }
+    for (let j = 0; j < gp.buttons.length; j++) {
+      gamepads[i].controllerButtonMap.set(j, gp.buttons[j].value);
+    }
+
+    let axesBoxCount = ((gp.axes.length + 1) / 2) | 0; // Round up (e.g. 3 axes is 2 boxes)
+    for (let j = 0; j < axesBoxCount; j++) {
+      let xAxis = gp.axes[j * 2];
+      gamepads[i].controllerJoysticks.set(
+        j * 2,
+        Math.abs(xAxis) > driftGuard ? xAxis : 0
+      );
+      if (!(j == axesBoxCount - 1 && gp.axes.length % 2 == 1)) {
+        let yAxis = gp.axes[j * 2 + 1];
+        gamepads[i].controllerJoysticks.set(
+          j * 2 + 1,
+          Math.abs(yAxis) > driftGuard ? yAxis : 0
+        );
+      }
+    }
+  }
+}
diff --git a/scripts/Compiler/compilerManager.js b/scripts/Compiler/compilerManager.js
index 7d6ddbe..f6a7bbe 100644
--- a/scripts/Compiler/compilerManager.js
+++ b/scripts/Compiler/compilerManager.js
@@ -192,24 +192,40 @@ export async function compileCurrentProject() {
 
   //add all the dependencies to the compiled code
   let dependenciesCode = ``;
+  let addToUpdateQueue = ``;
   for (let dep of dependencies) {
+    let depCode = await readTextFile(`./${dep}`);
+
+    //read the top of the file to see if it has a comment
+    let top = depCode.split("\n")[0];
+    let comment = top.includes("/**");
+    if (comment) {
+      //TODO add a more permanent solution for this
+      //get the second line
+      let updateDep = depCode.split("\n")[1].split("- ")[1];
+      addToUpdateQueue += updateDep;
+    }
+
     dependenciesCode += `\n${replaceRenderCode(
-      removeImports(
-        removeFunctionsWithIgnoreComment(await readTextFile(`./${dep}`))
-      ).replace(/export /g, "")
+      removeImports(removeFunctionsWithIgnoreComment(depCode)).replace(
+        /export /g,
+        ""
+      )
     )}`;
   }
 
   baseCodeLib = baseCodeLib.replace("//DEPENDENCIES HERE", dependenciesCode);
-  console.log(dependencies);
 
   baseCodeLib = baseCodeLib.replace("//INITIALIZATION HERE", compiledCode);
-  //baseCode = baseCode.replace("//LOOP HERE", "loop();");
+
+  //baseCodeLib = baseCodeLib.replace("//LOOP HERE", addToUpdateQueue);
 
   let templateHTMLFile = await readTextFile(
     "./scripts/Compiler/Dependencies/baseDep.html"
   );
+
   templateHTMLFile = templateHTMLFile.replace("//CODE HERE", baseCodeLib);
+  //baseCode = baseCode.replace("//LOOP HERE", "loop();");
 
   //add credit comment
   templateHTMLFile += `\n<!-- Created with the Aether Engine -->`;
diff --git a/scripts/SaveProject/loadProjectUI.js b/scripts/SaveProject/loadProjectUI.js
index 650f526..877d36b 100644
--- a/scripts/SaveProject/loadProjectUI.js
+++ b/scripts/SaveProject/loadProjectUI.js
@@ -93,7 +93,8 @@ export function createUI() {
 
     loadSave.addEventListener("click", (e) => {
       loadProject(
-        Flatted.parse(localStorage.getItem(e.target.getAttribute("loadName")))
+        Flatted.parse(localStorage.getItem(e.target.getAttribute("loadName"))),
+        { name: saveName }
       );
       document.body.removeChild(ui);
     });
diff --git a/scripts/SaveProject/saveManager.js b/scripts/SaveProject/saveManager.js
index ca6773d..d7df8d2 100644
--- a/scripts/SaveProject/saveManager.js
+++ b/scripts/SaveProject/saveManager.js
@@ -19,7 +19,22 @@ import { download } from "../toolbox.js";
 import { createUI } from "./loadProjectUI.js";
 
 let saveName = "";
-export function saveProject(overideName, downloadFile = false) {
+initSaveManager();
+export function initSaveManager() {
+  //when cntrl + s is pressed
+  document.addEventListener("keydown", (e) => {
+    e.preventDefault();
+    if (e.ctrlKey && e.key == "s") {
+      if (saveName == "") {
+        saveProject();
+      } else {
+        saveProject(saveName);
+      }
+    }
+  });
+}
+
+export function saveProject(overideName, options = { downloadFile: false }) {
   //return;
   //If its already been saved, use that name
   if (overideName == undefined && saveName == "")
@@ -38,7 +53,7 @@ export function saveProject(overideName, downloadFile = false) {
   });
   console.log(str);
 
-  if (downloadFile) {
+  if (options.downloadFile) {
     download(str, `${name}.aether`, "AEFile");
   }
   //Get access to storage
@@ -70,7 +85,9 @@ export function saveProject(overideName, downloadFile = false) {
       });
 }
 
-export async function loadProject(data = undefined) {
+export async function loadProject(data = undefined, options) {
+  if (options == undefined) options = {};
+  if (options.name != undefined) saveName = options.name;
   if (data == undefined) {
     createUI();
     return;
@@ -81,7 +98,7 @@ export async function loadProject(data = undefined) {
   let directorys = data.directorys.sort(function (a, b) {
     return (a.match(/\//g) || []).length - (b.match(/\//g) || []).length;
   });
-  console.log(directorys);
+
   for await (const directory of directorys) {
     addDirectory(directory);
   }
diff --git a/scripts/SaveProject/saveProjectButtonManager.js b/scripts/SaveProject/saveProjectButtonManager.js
index c5d66f9..49901fb 100644
--- a/scripts/SaveProject/saveProjectButtonManager.js
+++ b/scripts/SaveProject/saveProjectButtonManager.js
@@ -47,7 +47,7 @@ export function setupSaveButtonHandlers() {
 
   downloadButtons.forEach((e) => {
     e.addEventListener("click", (evnt) => {
-      saveProject("project", true);
+      saveProject("project", { downloadFile: true });
     });
   });
 
diff --git a/scripts/Tabs/tabCode/gameVisualEditor.js b/scripts/Tabs/tabCode/gameVisualEditor.js
index 26660e6..99a81ef 100644
--- a/scripts/Tabs/tabCode/gameVisualEditor.js
+++ b/scripts/Tabs/tabCode/gameVisualEditor.js
@@ -54,7 +54,6 @@ let cornerTopLeftDragHandle = new DragRect("red", (x, y, parent) => {
   //parent.x = 0;
   //parent.y = 0;
 });
-
 export let gameVisualEditor = {
   init: () => {},
   loop: (tick) => {
diff --git a/scripts/Tabs/tabCode/jsCodeEditor.js b/scripts/Tabs/tabCode/jsCodeEditor.js
index e5e798a..c7d45cd 100644
--- a/scripts/Tabs/tabCode/jsCodeEditor.js
+++ b/scripts/Tabs/tabCode/jsCodeEditor.js
@@ -5,6 +5,7 @@ import { openTabMetadata } from "../tabManager.js";
 
 let change = false;
 let saveFile = false;
+
 export let jsCodeEditor = {
   init: () => {
     document
@@ -13,12 +14,6 @@ export let jsCodeEditor = {
         //console.log(cMirror.getValue());
         change = true;
       });
-    document.addEventListener("keydown", (e) => {
-      if (e.ctrlKey && e.key == "s") {
-        e.preventDefault();
-        saveFile = true;
-      }
-    });
 
     document.getElementById("addComponent").addEventListener("click", () => {
       if (selectedObject == undefined)
@@ -32,10 +27,6 @@ export let jsCodeEditor = {
   },
   loop: (tick, extraData, tab) => {
     if (change) {
-      tab.showDot();
-      change = false;
-    }
-    if (saveFile) {
       //Put the data into the tab element
       tab.setPartOfData("data", getCode());
 
@@ -43,6 +34,8 @@ export let jsCodeEditor = {
       setFileData(extraData.dir, getCode());
       tab.hideDot();
       saveFile = false;
+      //tab.showDot();
+      change = false;
     }
   },
   onChange: (tabId, tabName, extraData) => {
diff --git a/scripts/toolbox.js b/scripts/toolbox.js
index c6aea30..c3311a3 100644
--- a/scripts/toolbox.js
+++ b/scripts/toolbox.js
@@ -109,6 +109,12 @@ export let game = {
       reCalculateSize(width, height);
     });
 
+    //warn the user before the window is closed
+    window.addEventListener("beforeunload", function (e) {
+      //e.preventDefault();
+      //e.returnValue = "";
+    });
+
     //this.interval = setInterval(updateGameArea, Math.round(1000 / 60));
 
     width = window.innerWidth;
@@ -193,10 +199,6 @@ export function scrollImageBackground(img, individualImageSize) {
   }
 }
 
-export function disolveImage(img) {
-  console.log(img);
-}
-
 let resets = 0;
 /**
  * @description Scrolls the background (reqires the seeded random library)
@@ -1292,6 +1294,11 @@ export class DragRect {
   offsetX = 0;
   offsetY = 0;
 
+  initialX = 0;
+  initialY = 0;
+  initialMouseX = 0;
+  initialMouseY = 0;
+
   color;
   callback;
   locked;
@@ -1304,7 +1311,6 @@ export class DragRect {
   run(x, y, w, h) {
     fill(this.color);
     rect(x, y, w, h);
-
     if (mouseDown) {
       if (
         inArea(
@@ -1316,20 +1322,50 @@ export class DragRect {
           h
         )
       ) {
-        if (!this.locked) {
-          this.offsetX = mouseX - x;
-          this.offsetY = mouseY - y;
-        }
         this.locked = true;
       }
     } else {
       this.locked = false;
+
+      this.offsetX = mouseX - x;
+      this.offsetY = mouseY - y;
+      this.initialX = x;
+      this.initialY = y;
+      this.initialMouseX = mouseX;
+      this.initialMouseY = mouseY;
     }
 
     if (this.locked) {
-      console.log(game.canvas.offsetLeft);
+      //console.log(this.offsetX - mouseX, this.offsetY - mouseY);
       this.x = mouseX - this.offsetX;
       this.y = mouseY - this.offsetY;
+
+      //check if cntrl is pressed
+      if (keys[67]) {
+        //draw the lines along the x and y axis
+        fill("white");
+
+        //lines
+        rect(this.initialX + w / 2 - w * 2, this.initialY + h / 2, w * 4, 2);
+        rect(this.initialX + w / 2, this.initialY + h / 2 - w * 2, 2, h * 4);
+
+        let dragDist = [
+          this.initialMouseX - mouseX,
+          this.initialMouseY - mouseY,
+        ];
+
+        fill("yellow");
+
+        //only drag in the axis that is most distant from the mouse (Snap to axis)
+        if (Math.abs(dragDist[0]) > Math.abs(dragDist[1])) {
+          this.y = this.initialY;
+          rect(this.initialX + w / 2 - w * 2, this.initialY + h / 2, w * 4, 2);
+        } else {
+          this.x = this.initialX;
+          rect(this.initialX + w / 2, this.initialY + h / 2 - w * 2, 2, h * 4);
+        }
+      }
+
       this.callback(this.x, this.y, this);
     }
   }