diff --git a/public/index.html b/public/index.html
index d8ba395..9a9c4a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -71,11 +71,11 @@
 		</div>
 
 		<div class="btn-group">
-	    	<button id="saveAsJSONBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
+	    	<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
                 <i class="fas fa-image"></i>
                 <i style="position: absolute; top: 6px; left: 9px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
             </button> 
-            <button style="position: relative;" id="saveAsJsonBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
+            <button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" class="whiteboardBtn">
                 <i class="far fa-file-alt"></i>
                 <i style="position: absolute; top: 5px; left: 7px; color: #000000; background: grey; font-size: 0.8em; " class="fas fa-save"></i>
             </button> 
diff --git a/public/js/main.js b/public/js/main.js
index 83bee54..b8d256e 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -47,11 +47,25 @@ $(document).ready(function() {
     });
 
     $("#saveAsImageBtn").click(function() {
-    	alert("yoyo");
+    	var imgData = whiteboard.getImageDataBase64();
+	    var a = document.createElement('a');
+		a.href = imgData;
+		a.download = 'whiteboard.png';
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
     });
 
     $("#saveAsJSONBtn").click(function() {
-    	alert("yoyo");
+    	var imgData = whiteboard.getImageDataJson();
+    	var a = window.document.createElement('a');
+		a.href = window.URL.createObjectURL(new Blob([imgData], {type: 'text/json'}));
+		a.download = 'whiteboard.json';
+		// Append anchor to body.
+		document.body.appendChild(a);
+		a.click();
+		// Remove anchor from body
+		document.body.removeChild(a);
     });    
 
     var dragCounter = 0;
@@ -166,6 +180,16 @@ $(document).ready(function() {
     });
 });
 
+//Prevent site from changing tab on drag&drop
+window.addEventListener("dragover",function(e){
+  e = e || event;
+  e.preventDefault();
+},false);
+window.addEventListener("drop",function(e){
+  e = e || event;
+  e.preventDefault();
+},false);
+
 function isImageFileName(filename) {
     var ending = filename.split(".")[filename.split(".").length-1];
     if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") {
@@ -191,16 +215,6 @@ function isValidImageUrl(url, callback) { //Check if given url it is a vaild img
     img.src = url;
 }
 
-//Prevent site from changing tab on drag&drop
-window.addEventListener("dragover",function(e){
-  e = e || event;
-  e.preventDefault();
-},false);
-window.addEventListener("drop",function(e){
-  e = e || event;
-  e.preventDefault();
-},false);
-
 window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard
 	if (e.clipboardData) {
 		var items = e.clipboardData.items;
@@ -230,7 +244,7 @@ window.addEventListener("paste", function(e) { //Even do copy & paste from clipb
 				                },
 				            success: function(msg){
 				            	var filename = username+"_whiteboard_"+date+".png";
-				            	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
+				            	whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename); //Add image to canvas
 				                console.log("Image uploaded!");
 				            },
 				            error : function(err) {