diff --git a/web/_css/style.css b/web/_css/style.css
index 5e4b73fb..0add6b57 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -648,16 +648,73 @@ #exportOverlay {
 	display: none;
 }
 
-#zoomControls {
+#bottomBar {
 	position: absolute;
-	bottom: 10px;
-	left: 370px;
-	width: 90px;
-	display: flex;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+    display: flex;
+	gap: 10px;
 }
 
-.listHidden #zoomControls {
-	left: 10px;
+div:not(.listHidden) > #bottomBar {
+	left: 370px !important;
+}
+
+@media (max-width: 1120px) {
+	div:not(.listHidden) > #bottomBar  {
+		flex-wrap: wrap;
+	}
+
+	.listHidden #author {
+		flex: 1;
+	}
+}
+
+@media (max-width: 750px) {
+	#bottomBar {
+		flex-wrap: wrap;
+	}
+
+	#timeControls {
+		min-width: calc(100vw - 390px) !important;
+	}
+
+	#author {
+		flex: 1;
+		min-width: 100% !important;
+	}
+}
+
+#timeControls {
+	flex: 1;
+	background-color: #555;
+	border: 1px #000 solid;
+	padding: 3px;
+	font-size: 12px;
+	text-align: center;
+	min-width: 300px;
+}
+
+#timeControls input {
+    height: 100%;
+    width: 100%;
+}
+
+#author {
+	background-color: #555;
+	border: 1px #000 solid;
+	padding: 3px;
+	font-size: 12px;
+	z-index: 1100;
+	min-width: 320px;
+	text-align: center;
+}
+
+#zoomControls {
+	width: 90px;
+	display: flex;
+	align-self: flex-end;
 }
 
 #zoomControls button {
@@ -715,8 +772,8 @@ @media (max-width: 500px) {
 		width: 100%;
 	}
 
-	div:not(.listHidden) > #zoomControls {
-		display: none;
+	div:not(.listHidden) > #bottomBar {
+		display: none !important;
 	}
 
 	div:not(.listHidden) > button#hideListButton {
@@ -736,18 +793,6 @@ @media (max-width: 500px) {
 	}
 }
 
-@media (max-width: 750px) {
-	div:not(.listHidden) > #author {
-		display: none;
-	}
-}
-
-@media (max-width: 400px) {
-	#author {
-		display: none;
-	}
-}
-
 @media (max-width: 350px) {
 	#entriesListContainer > nav > a#drawLink {
 		display: none;
@@ -947,18 +992,6 @@ #entriesList .object {
 	text-align: left;
 }
 
-#author {
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	background-color: #555;
-	border: 1px #000 solid;
-	padding: 3px;
-	font-size: 12px;
-	z-index: 1100;
-	text-align: center;
-}
-
 #aboutContainer {
 	position: absolute;
 	top: 50px;
diff --git a/web/index.html b/web/index.html
index 187676b8..603d1f58 100644
--- a/web/index.html
+++ b/web/index.html
@@ -137,7 +137,19 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			
 			<button id="hideListButton"></button>
 			
-			<div id="zoomControls"><button title="Zoom In" id="zoomInButton"></button><button title="Reset View" id="zoomResetButton"></button><button title="Zoom Out" id="zoomOutButton"></button></div>
+			<div id="bottomBar">
+				<div id="zoomControls">
+					<button title="Zoom In" id="zoomInButton"></button>
+					<button title="Reset View" id="zoomResetButton"></button>
+					<button title="Zoom Out" id="zoomOutButton"></button>
+				</div>
+				<div id="timeControls">
+					<input type="range" min="1" max="10" value="10" class="slider" id="timeControlsSlider">
+				</div>
+				<div id="author">
+					Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
+				</div>
+			</div>
 			
 			<div id="drawControlsContainer">
 				<a id="drawBackButton" href="./">&lt; Back to the Atlas</a>