diff --git a/web/_css/style.css b/web/_css/style.css
index dd774274..57ee5773 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -315,12 +315,9 @@ @media (min-width: 1300px) {
 		margin-left: auto;
 	}
 }
-
-#timeControls input {
-    height: 100%;
-	-webkit-appearance: none;
-	appearance: none;
-    width: 100%;
+#timeControls {
+	display: flex;
+	align-items: center;
 }
 
 #timeControlsTooltip {
@@ -343,25 +340,30 @@ #timeControls:hover #timeControlsTooltip, #timeControlsSlider:focus + #timeContr
 	visibility: visible;
 }
 
-.slider::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 1rem;
-	height: 2rem;
-	background: var(--bs-light);
+#timeControlsSlider::-webkit-slider-thumb {
+	width: 0.75rem;
+	height: 1.5rem;
+	margin-top: -0.25rem;
 	border-radius: .25rem;
-	cursor: pointer;
-	box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
+	outline: 1px solid var(--bs-body-bg);
 }
 
-.slider::-moz-range-thumb {
-	appearance: none;
-	width: 1rem;
-	height: 2rem;
-	background: var(--bs-light);
+#timeControlsSlider::-webkit-slider-runnable-track {
+	height: 1rem;
+	border-radius: .25rem;
+}
+
+#timeControlsSlider::-moz-range-thumb {
+	width: 0.75rem;
+	height: 1.5rem;
+	margin-top: -0.25rem;
+	border-radius: .25rem;
+	outline: 1px solid var(--bs-body-bg);
+}
+
+#timeControlsSlider::-moz-range-track {
+	height: 1rem;
 	border-radius: .25rem;
-	cursor: pointer;
-	box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
 }
 
 #entriesList .card {
diff --git a/web/_js/time.js b/web/_js/time.js
index ba180661..2da63003 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -212,8 +212,8 @@ function updateTooltip(newPeriod, newVariation) {
 
 	// Clamps position of tooltip to prevent from going off screen
 	const timelineSliderRect = timelineSlider.getBoundingClientRect();
-	let min = -timelineSliderRect.left+8;
-	let max = (window.innerWidth-tooltip.offsetWidth)-timelineSliderRect.left-8;
+	let min = -timelineSliderRect.left+12;
+	let max = (window.innerWidth-tooltip.offsetWidth)-timelineSliderRect.left+4;
 	tooltip.style.left = Math.min(Math.max((timelineSlider.offsetWidth)*(timelineSlider.value)/(timelineSlider.max)-tooltip.offsetWidth/2, min), max) + "px";
 }
 
diff --git a/web/index.html b/web/index.html
index 756332cf..1626533d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -254,9 +254,9 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
 						<select class="form-select shadow" name="variants" id="variants" title="Background image variants"></select>
 					</div>
 				</div>
-				<div id="timeControls">
+				<div id="timeControls" class="bg-body px-2 py-1 border rounded shadow">
 					<label for="timeControlsSlider" class="visually-hidden">Time control slider</label>
-					<input type="range" class="slider bg-secondary px-1 rounded shadow" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
+					<input type="range" class="form-range" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
 					<div class="tooltip fade border rounded text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
 				</div>
 				<div id="author" class="bg-body d-flex align-items-center justify-content-center py-1 px-2 rounded shadow" style="--bs-bg-opacity: .9;">