diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css
index 3f8ef2a..a74ef56 100644
--- a/pdb-ui/src/main/resources/resources/css/design.css
+++ b/pdb-ui/src/main/resources/resources/css/design.css
@@ -127,6 +127,9 @@ textarea {
 .number-input-1k {
 	width: 3em;
 }
+.number-input-10k {
+	width: 4em;
+}
 
 .input_date {
 	max-width: 10em;	
diff --git a/pdb-ui/src/main/resources/resources/js/ui.js b/pdb-ui/src/main/resources/resources/js/ui.js
index 74fca00..da598e7 100644
--- a/pdb-ui/src/main/resources/resources/js/ui.js
+++ b/pdb-ui/src/main/resources/resources/js/ui.js
@@ -700,22 +700,24 @@ Vue.component('search-bar', {
 			</div>
 			
 			<div class="group">
-				<label for="y-max-value">Y-Range</label>
+				<label for="y-range-min">Y-Range:</label>
+				<label for="y-range-min" v-show="searchBar.yRange.unit != 'AUTOMATIC'">From:</label>
 				<input 
 					v-show="searchBar.yRange.unit != 'AUTOMATIC'"
 					type="number" 
 					id="y-range-min"
-					class="number-input-1k" 
+					class="number-input-10k" 
 					min="0" 
-					max="999"
+					max="9999"
 					v-model="searchBar.yRange.min"/>
+				<label for="y-range-max" v-show="searchBar.yRange.unit != 'AUTOMATIC'">To:</label>
 				<input 
 					v-show="searchBar.yRange.unit != 'AUTOMATIC'"
 					type="number" 
 					id="y-range-max"
-					class="number-input-1k" 
+					class="number-input-10k" 
 					min="0" 
-					max="999"
+					max="9999"
 					v-model="searchBar.yRange.max"/>
 				<select id="y-max-unit" v-model="searchBar.yRange.unit">
 					<option value="AUTOMATIC" title="adjust automatically">automatic</option>