diff --git a/web/_css/style.css b/web/_css/style.css
index 61452c9b..f7356ab0 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -1332,7 +1332,8 @@ .period-group {
 	background-color: #888;
 	border: 1px black solid;
 	padding: 0.5em;
-	margin-bottom: 0.5em
+	margin-bottom: 0.5em;
+	font-size: 0.9em;
 }
 
 .period-group[data-active="true"] {
diff --git a/web/_js/draw.js b/web/_js/draw.js
index 7eb767f3..97a662d8 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -40,6 +40,7 @@ var path = [];
 var pathWithPeriods = []
 var periodGroupElements = []
 
+var disableDrawingOverride = false
 var drawing = true;
 
 function initDraw(){
@@ -291,8 +292,9 @@ function initDraw(){
 	}
 
 	function finish(){
-		drawing = false;
 		updatePath()
+		drawing = false;
+		disableDrawingOverride = true;
 		objectInfoBox.style.display = "block";
 		objectDraw.style.display = "none";
 		hintText.style.display = "none";
@@ -308,6 +310,7 @@ function initDraw(){
 		updatePath([])
 		undoHistory = [];
 		drawing = true;
+		disableDrawingOverride = false;
 		objectInfoBox.style.display = "none";
 		objectDraw.style.display = "block";
 		hintText.style.display = "block";
@@ -320,6 +323,7 @@ function initDraw(){
 
 	function back(){
 		drawing = true;
+		disableDrawingOverride = false;
 		updatePath()
 		objectInfoBox.style.display = "none";
 		objectDraw.style.display = "block";
@@ -460,6 +464,7 @@ function initDraw(){
 	initPeriodGroups()
 
 	document.addEventListener('timeupdate', (event) => {
+		renderBackground()
 		updatePeriodGroups()
 	})
 
@@ -505,11 +510,15 @@ function initPeriodGroups() {
 		endPeriodEl.value = end
 		endPeriodEl.max = maxPeriod
 
-		startPeriodEl.addEventListener('input', () => {
-			updatePeriodGroups()
+		startPeriodEl.addEventListener('input', event => {
+			timelineSlider.value = parseInt(event.target.value)
+			updateTime(parseInt(event.target.value))
+			console.log(parseInt(event.target.value))
 		})
-		endPeriodEl.addEventListener('input', () => {
-			updatePeriodGroups()
+		endPeriodEl.addEventListener('input', event => {
+			timelineSlider.value = parseInt(event.target.value)
+			updateTime(parseInt(event.target.value))
+			console.log(parseInt(event.target.value))
 		})
 		periodDeleteEl.addEventListener('click', () => {
 			if (pathWithPeriods.length === 1) return
@@ -594,7 +603,7 @@ function updatePeriodGroups() {
 		updatePath(pathToActive)
 	}
 
-	drawing = currentActivePathIndex !== undefined
+	drawing = disableDrawingOverride ? false : currentActivePathIndex !== undefined
 	
 }
 
diff --git a/web/_js/time.js b/web/_js/time.js
index d774f8e3..d519a04e 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -93,7 +93,7 @@ const timeConfig = [
     }
 ];
 
-let slider = document.getElementById("timeControlsSlider");
+let timelineSlider = document.getElementById("timeControlsSlider");
 let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
 
@@ -103,13 +103,13 @@ var period = defaultPeriod
 window.period = period
 
 // SETUP
-slider.max = timeConfig.length - 1;
+timelineSlider.max = timeConfig.length - 1;
 // document.querySelector('#period-group .period-start').max = defaultPeriod
 // document.querySelector('#period-group .period-end').max = defaultPeriod
-slider.value = slider.max;
-updateTime(slider.value)
+timelineSlider.value = timelineSlider.max;
+updateTime(timelineSlider.value)
 
-slider.addEventListener("input", (event) => {
+timelineSlider.addEventListener("input", (event) => {
     updateTime(parseInt(event.target.value))
 })
 
@@ -123,7 +123,7 @@ slider.addEventListener("input", (event) => {
 //     updateTime(parseInt(event.target.value))
 // };
 
-const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => {
+const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
     const timeUpdateEvent = new CustomEvent('timeupdate', {
         detail: {
             period: period,
@@ -168,10 +168,10 @@ async function updateTime(currentPeriod) {
     dispatchTimeUpdateEvent(currentPeriod, atlas)
     if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
     else tooltip.querySelector('p').textContent = configObject.timestamp
-    tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+    tooltip.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.max-1)) - tooltip.offsetWidth/2) + "px"
 }
 
-tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px")
+tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.max-1)) - tooltip.offsetWidth/2) + "px")
 
-window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px")
+window.addEventListener('resize', () => tooltip.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.max-1)) - tooltip.offsetWidth/2) + "px")