diff --git a/web/_css/style.css b/web/_css/style.css
index b27eb547..39fb050f 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -1317,4 +1317,32 @@ #donateWindow a.button svg {
 
 #donateWindow a.button path {
 	color: white;
+}
+
+#periods {
+	display: flex;
+	flex-direction: column;
+}
+
+.period-group {
+	background-color: #888;
+	border: 1px black solid;
+	padding: .5em
+}
+
+.period-group[data-active="true"] {
+	border-color: lime;
+	box-shadow: 0px 0px lime;
+}
+
+.period-group input {
+	width: 100%;
+}
+
+#periods .period-visible {
+	margin-bottom: 0;
+}
+
+#drawControls p {
+	margin-bottom: 0.5em;
 }
\ No newline at end of file
diff --git a/web/_js/draw.js b/web/_js/draw.js
index bd9b4d1b..2e67ff64 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -13,6 +13,33 @@
 	========================================================================
 */
 
+var finishButton = document.getElementById("finishButton");
+var resetButton = document.getElementById("resetButton");
+var undoButton = document.getElementById("undoButton");
+var redoButton = document.getElementById("redoButton");
+var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
+var entryId = 0
+
+var objectInfoBox = document.getElementById("objectInfo");
+var hintText = document.getElementById("hint");
+
+var periodGroups = document.getElementById('periodGroups')
+var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
+	
+var exportButton = document.getElementById("exportButton");
+var cancelButton = document.getElementById("cancelButton");
+
+var exportOverlay = document.getElementById("exportOverlay");
+var exportCloseButton = document.getElementById("exportCloseButton");
+var exportBackButton = document.getElementById("exportBackButton")
+
+var path = [];
+
+var pathWithPeriods = []
+var periodGroupElements = []
+
+var drawing = true;
+
 function initDraw(){
 	
 	wrapper.classList.remove('listHidden')
@@ -21,26 +48,9 @@ function initDraw(){
 	window.renderBackground = renderBackground
 	window.updateHovering = updateHovering
 
-	var finishButton = document.getElementById("finishButton");
-	var resetButton = document.getElementById("resetButton");
-	var undoButton = document.getElementById("undoButton");
-	var redoButton = document.getElementById("redoButton");
-	var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
-	var entryId = 0
-	
-	var objectInfoBox = document.getElementById("objectInfo");
-	var hintText = document.getElementById("hint");
-
-	var startPeriodField = document.getElementById('startPeriodField')
-	var endPeriodField = document.getElementById('endPeriodField')
-	var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
-	
-	var exportButton = document.getElementById("exportButton");
-	var cancelButton = document.getElementById("cancelButton");
-
-	var exportOverlay = document.getElementById("exportOverlay");
-	var exportCloseButton = document.getElementById("exportCloseButton");
-	var exportBackButton = document.getElementById("exportBackButton")
+	// var startPeriodField = document.getElementById('startPeriodField')
+	// var endPeriodField = document.getElementById('endPeriodField')
+	// var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
 
 	var rShiftPressed = false;
 	var lShiftPressed = false;
@@ -53,9 +63,6 @@ function initDraw(){
 
 	container.style.cursor = "crosshair";
 	
-	var path = [];
-	var drawing = true;
-
 	var undoHistory = [];
 
 	render(path);
@@ -294,21 +301,20 @@ function initDraw(){
 		objectDraw.style.display = "none";
 		hintText.style.display = "none";
 		document.getElementById("nameField").focus();
-		if (period >= startPeriodField.value * 1 && period <= endPeriodField.value * 1) {
-			periodVisbilityInfo.textContent = ""
-		} else {
-			periodVisbilityInfo.textContent = "Not visible during this period!"
-		}
+		// if (isOnPeriod()) {
+		// 	periodVisbilityInfo.textContent = ""
+		// } else {
+		// 	periodVisbilityInfo.textContent = "Not visible during this period!"
+		// }
 	}
 
 	function reset(){
-		path = [];
+		updatePath([])
 		undoHistory = [];
 		finishButton.disabled = true;
 		undoButton.disabled = true; // Maybe make it undo the cancel action in the future
 		redoButton.disabled = true;
 		drawing = true;
-		render(path);
 		objectInfoBox.style.display = "none";
 		objectDraw.style.display = "block";
 		hintText.style.display = "block";
@@ -433,10 +439,15 @@ function initDraw(){
             })
         }
 
-		if(path.length >= 3){
-			finishButton.disabled = false;
+		if (Array.isArray(path)) {
+			pathWithPeriods.push([defaultPeriod, path])
+		} else if (typeof path === "object") {
+			pathWithPeriods = Object.entries(path)
 		}
-		render(path)
+
+		console.log(pathWithPeriods)
+
+		initPeriodGroups()
 
 		zoom = 4;
 
@@ -454,13 +465,146 @@ function initDraw(){
 	}
 
 	document.addEventListener('timeupdate', (event) => {
-		if (period >= startPeriodField.value && period <= endPeriodField.value) {
-			periodVisbilityInfo.textContent = ""
-		} else {
-			periodVisbilityInfo.textContent = "Not visible during this period!"
-		}
+		updatePeriodGroups()
 	})
 
 }
 
+function isOnPeriod(start = parseInt(startPeriodField.value), end = parseInt(endPeriodField.value), current = period) {
+	console.log(start, end, current, current >= start && current <= end)
+	return current >= start && current <= end
+}
 
+function initPeriodGroups() {
+
+	periodGroupElements = []
+
+	console.log(pathWithPeriods)
+
+	pathWithPeriods.forEach(([period, path], index) => {
+		let periodGroupEl = periodGroupTemplate.cloneNode(true)
+		periodGroupEl.id = "periodGroup" + index
+
+		let startPeriodEl = periodGroupEl.querySelector('.period-start')
+		let endPeriodEl = periodGroupEl.querySelector('.period-end')
+		let periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
+
+		let [start, end] = parsePeriod(period)
+
+		startPeriodEl.id = "periodStart" + index
+		startPeriodEl.previousSibling.for = startPeriodEl.id
+		endPeriodEl.id = "periodEnd" + index
+		endPeriodEl.previousSibling.for = endPeriodEl.id
+		periodVisibilityEl.id = "periodVisibility" + index
+
+		startPeriodEl.value = start
+		startPeriodEl.max = maxPeriod
+		endPeriodEl.value = end
+		endPeriodEl.max = maxPeriod
+
+		startPeriodEl.addEventListener('input', () => {
+			updatePeriodGroups()
+		})
+		endPeriodEl.addEventListener('input', () => {
+			updatePeriodGroups()
+		})
+
+		periodGroups.appendChild(periodGroupEl)
+		periodGroupElements.push({
+			periodGroupEl,
+			startPeriodEl,
+			endPeriodEl,
+			periodVisibilityEl
+		})
+	})
+	console.log(periodGroupTemplate)
+	updatePeriodGroups()
+
+}
+
+function updatePeriodGroups() {
+	var pathToActive = []
+	var lastActivePathIndex
+	var currentActivePathIndex 
+
+	periodGroupElements.forEach((elements, index) => {
+		let {
+			periodGroupEl,
+			startPeriodEl,
+			endPeriodEl,
+			periodVisibilityEl
+		} = elements
+
+		if (periodGroupEl.dataset.active === "true") lastActivePathIndex = index
+
+		if (isOnPeriod(
+			parseInt(startPeriodEl.value), 
+			parseInt(endPeriodEl.value),
+			period
+		)) {
+			pathToActive = pathWithPeriods[index][1]
+			currentActivePathIndex = index
+			periodGroupEl.dataset.active = true
+		} else {
+			periodGroupEl.dataset.active = false
+		}
+
+		pathWithPeriods[index][0] = formatPeriod(
+			parseInt(startPeriodEl.value), 
+			parseInt(endPeriodEl.value),
+			period
+		)
+	})
+
+	console.log('lastActivePathIndex: ' + lastActivePathIndex)
+	console.log('currentActivePathIndex: ' + currentActivePathIndex)
+
+	if (lastActivePathIndex !== undefined) {
+		if (lastActivePathIndex === currentActivePathIndex) {
+			// just update the path
+			pathWithPeriods[currentActivePathIndex] = [
+				formatPeriod(
+					parseInt(periodGroupElements[currentActivePathIndex].startPeriodEl.value),
+					parseInt(periodGroupElements[currentActivePathIndex].endPeriodEl.value)
+				),
+				path
+			]
+			console.log(pathWithPeriods[currentActivePathIndex])
+		} else if (currentActivePathIndex === undefined) {
+			updatePath([])
+			console.log(path + 'empty!')
+		} else {
+			// switch the path
+
+		}
+	} else {
+		updatePath(pathToActive)
+	}
+
+	drawing = currentActivePathIndex !== undefined
+	
+}
+
+function parsePeriod(periodString) {
+	// TODO: Support for multiple/alternative types of canvas
+	if (period.search('-') + 1) {
+		var [start, end] = period.split('-').map(i => parseInt(i))
+		return [start, end]
+	} else {
+		let period = parseInt(periodString)
+		return [period, period]
+	}
+}
+
+function formatPeriod(start, end) {
+	if (start === end) return start
+	else return start + "-" + end
+}
+
+function updatePath(path) {
+	path = []
+	render(path)
+	if(path.length >= 3){
+		finishButton.disabled = false;
+	}
+}
\ No newline at end of file
diff --git a/web/_js/time.js b/web/_js/time.js
index 949d30bd..d774f8e3 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -97,14 +97,15 @@ let slider = document.getElementById("timeControlsSlider");
 let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
 
-let defaultPeriod = timeConfig.length
+let defaultPeriod = timeConfig.length - 1
+let maxPeriod = timeConfig.length - 1
 var period = defaultPeriod
 window.period = period
 
 // SETUP
 slider.max = timeConfig.length - 1;
-document.querySelector('#startPeriodField').max = defaultPeriod
-document.querySelector('#endPeriodField').max = defaultPeriod
+// document.querySelector('#period-group .period-start').max = defaultPeriod
+// document.querySelector('#period-group .period-end').max = defaultPeriod
 slider.value = slider.max;
 updateTime(slider.value)
 
@@ -112,15 +113,15 @@ slider.addEventListener("input", (event) => {
     updateTime(parseInt(event.target.value))
 })
 
-document.querySelector('#startPeriodField').oninput = (event) => {
-    slider.value = parseInt(event.target.value)
-    updateTime(parseInt(event.target.value))
-};
+// document.querySelector('#period-group .period-start').oninput = (event) => {
+//     slider.value = parseInt(event.target.value)
+//     updateTime(parseInt(event.target.value))
+// };
 
-document.querySelector('#endPeriodField').oninput = (event) => {
-    slider.value = parseInt(event.target.value)
-    updateTime(parseInt(event.target.value))
-};
+// document.querySelector('#period-group .period-end').oninput = (event) => {
+//     slider.value = parseInt(event.target.value)
+//     updateTime(parseInt(event.target.value))
+// };
 
 const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => {
     const timeUpdateEvent = new CustomEvent('timeupdate', {
diff --git a/web/index.html b/web/index.html
index f1e91244..16bf8725 100644
--- a/web/index.html
+++ b/web/index.html
@@ -173,7 +173,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 				</div>
 				<div id="timeControls">
 					<div id="timeControlsTooltip"><p>Time control slider</p></div>
-					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
+					<input type="range" min="0" max="1" value="1" class="slider" id="timeControlsSlider">
 				</div>
 				<div id="author">
 					<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
@@ -193,6 +193,11 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 						<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel button">
 							<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
 						</label>
+						<div id="periods">
+							<p>Periods</p>
+							<div id="periodGroups">
+							</div>	
+						</div>
 					</div>
 					<div id="objectInfo">
 						<label for="nameField">Name</label>
@@ -203,11 +208,6 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 						<input id="websiteField" type="text" value="" placeholder="https://example.com">
 						<label for="subredditField">Subreddit</label>
 						<input id="subredditField" type="text" value="" placeholder="/r/example">
-						<label for="websiteField">Start Period</label>
-						<input id="startPeriodField" type="range" min="0">
-						<label for="websiteField">End Period</label>
-						<input id="endPeriodField" type="range" min="0">
-						<p id="periodVisbilityInfo" style="text-align: center">Not visible during this period!</p>
 						<div id="infoButtons">
 							<button id="cancelButton">Back</button>
 							<button id="exportButton">OK</button>
@@ -277,6 +277,17 @@ <h2>Donation Links</h2>
 				</div>
 			</div>
 		</div>
+
+		<template id="period-group">
+			<div class="period-group">
+				<label for="period-start">Start Period</label>
+				<input class="period-start" type="range" min="0">
+				<label for="period-end">End Period</label>
+				<input class="period-end" type="range" min="0">
+				<p class="period-visible"></p>	
+			</div>
+		</template>
+
 		<script type="text/javascript" src="./_js/time.js"></script>
 		<script type="text/javascript" src="./_js/infoblock.js"></script>
 		<script type="text/javascript" src="./_js/pointInPolygon.js"></script>