diff --git a/_headers b/_headers
new file mode 100644
index 00000000..c776a479
--- /dev/null
+++ b/_headers
@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 00000000..0ee17cd7
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,4 @@
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
diff --git a/web/_js/main.js b/web/_js/main.js
index f899c849..c25d0990 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -137,6 +137,35 @@ async function init(){
 		if(initOverlap){
 			initOverlap();
 		}
+	} else if(mode.startsWith("diff")){
+		wrapper.className = wrapper.className.replace(/ drawMode/g, "");
+		try {
+			let liveResp = await fetch("https://place-atlas.stefanocoding.me/atlas.json");
+			let liveJson = await liveResp.json();
+			let liveAtlasReduced = liveJson.reduce(function(a, c) {
+				a[c.id] = c;
+				return a;
+			},{});
+			if(mode.endsWith("only")){
+				atlas = atlas.filter(function(entry) {
+					return JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id]);
+				});
+			}
+			atlas = atlas.map(function(entry) {
+				if(liveAtlasReduced[entry.id] === undefined){
+					entry.diff = "add";
+				}else if(JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id])){
+					entry.diff = "edit";
+				}
+				return entry;
+			});
+			//TEMP FOR TIME TRAVEL
+			atlasBackup = atlas;
+		} catch (error) {
+			console.log("Diff mode failed to load, reverting to normal view - " + error);
+		} finally {
+			initView();
+		}
 	}
 	
 	function changeOverlapMode(){
@@ -164,7 +193,7 @@ async function init(){
 
 	const toggleMode = document.getElementById("toggleMode");
 	toggleMode.onclick = changeOverlapMode;
-	toggleMode.innerHTML = modeMap[mode];
+	toggleMode.innerHTML = modeMap[mode] || "Overlap";
 
 	document.getElementById("loading").style.display = "none";
 
diff --git a/web/_js/time.js b/web/_js/time.js
index 81a40295..cfcdf0aa 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -1,78 +1,78 @@
 const timeConfig = [
     {
         timestamp: 1648822500,
-        url: "/_img/place/1648822500.png",
+        url: "./_img/place/1648822500.png",
         image: null
     },
     {
         timestamp: 1648847036,
-        url: "/_img/place/1648847036.png",
+        url: "./_img/place/1648847036.png",
         image: null
     },
     {
         timestamp: 1648870452,
-        url: "/_img/place/1648870452.png",
+        url: "./_img/place/1648870452.png",
         image: null
     },
     {
         timestamp: 1648893666,
-        url: "/_img/place/1648893666.png",
+        url: "./_img/place/1648893666.png",
         image: null
     },
     {
         timestamp: 1648917500,
-        url: "/_img/place/1648917500.png",
+        url: "./_img/place/1648917500.png",
         image: null
     },
     {
         timestamp: 1648942113,
-        url: "/_img/place/1648942113.png",
+        url: "./_img/place/1648942113.png",
         image: null
     },
     {
         timestamp: 1648956234,
-        url: "/_img/place/1648956234.png",
+        url: "./_img/place/1648956234.png",
         image: null
     },
     {
         timestamp: 1648968061,
-        url: "/_img/place/1648968061.png",
+        url: "./_img/place/1648968061.png",
         image: null
     },
     {
         timestamp: 1648979987,
-        url: "/_img/place/1648979987.png",
+        url: "./_img/place/1648979987.png",
         image: null
     },
 
     {
         timestamp: 1648992274,
-        url: "/_img/place/1648992274.png",
+        url: "./_img/place/1648992274.png",
         image: null
     },
     {
         timestamp: 1649012915,
-        url: "/_img/place/1649012915.png",
+        url: "./_img/place/1649012915.png",
         image: null
     },
     {
         timestamp: 1649037182,
-        url: "/_img/place/1649037182.png",
+        url: "./_img/place/1649037182.png",
         image: null
     },
     {
         timestamp: 1649060793,
-        url: "/_img/place/1649060793.png",
+        url: "./_img/place/1649060793.png",
         image: null
     },
     {
         timestamp: 1649084741,
-        url: "/_img/place/1649084741.png",
+        url: "./_img/place/1649084741.png",
         image: null
     },
     {
         timestamp: 1649113199,
-        url: "/_img/place/final.png",
+        url: "./_img/place/final.png",
         image: null,
         showAtlas: true,
     },
diff --git a/web/_js/view.js b/web/_js/view.js
index 8857e668..827f6917 100644
--- a/web/_js/view.js
+++ b/web/_js/view.js
@@ -114,8 +114,23 @@ function renderBackground(atlas){
 
 		backgroundContext.closePath();
 
-		backgroundContext.strokeStyle = "rgba(255, 255, 255, 0.8)";
+		var bgStrokeStyle;
+		switch (atlas[i].diff) {
+			case "add":
+				bgStrokeStyle = "rgba(0, 255, 0, 1)";
+				backgroundContext.lineWidth = 2;
+				break;
+			case "edit":
+				bgStrokeStyle = "rgba(255, 255, 0, 1)";
+				backgroundContext.lineWidth = 2;
+				break;
+			default:
+				bgStrokeStyle = "rgba(255, 255, 255, 0.8)";
+				break;
+		}
+		backgroundContext.strokeStyle = bgStrokeStyle;
 		backgroundContext.stroke();
+		backgroundContext.lineWidth = 1;
 	}
 }
 
@@ -691,7 +706,19 @@ function initView(){
 
 			context.globalCompositeOperation = "source-over";
 
-			context.strokeStyle = "rgba(0, 0, 0, 1)";
+			var hoverStrokeStyle;
+			switch (hovered[i].diff) {
+				case "add":
+					hoverStrokeStyle = "rgba(0, 155, 0, 1)";
+					break;
+				case "edit":
+					hoverStrokeStyle = "rgba(155, 155, 0, 1)";
+					break;
+				default:
+					hoverStrokeStyle = "rgba(0, 0, 0, 1)";
+					break;
+			}
+			context.strokeStyle = hoverStrokeStyle;
 			//context.lineWidth = zoom;
 			context.stroke();
 		}