diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 0efceed..341b758 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -39,6 +39,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'ArrowDown') {
 					e.preventDefault();
 					const index = this.$data.streams.findIndex(e => e.id === this.$props.streamId);
@@ -49,6 +54,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'Home') {
 					const newStream = this.$data.streams[0];
 					if (!newStream) return;
@@ -57,6 +67,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'End') {
 					const newStream = this.$data.streams[this.$data.streams.length - 1];
 					if (!newStream) return;
@@ -65,6 +80,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				}
 			},
 		}
@@ -127,10 +147,10 @@ export default {
 	},
 	components: {Stream, InfiniteLoading,},
 	mounted() {
-		document.addEventListener('keyup', this.$data.navigationKeysCallback);
+		document.addEventListener('keydown', this.$data.navigationKeysCallback);
 	},
 	beforeDestroy() {
-		document.removeEventListener('keyup', this.$data.navigationKeysCallback);
+		document.removeEventListener('keydown', this.$data.navigationKeysCallback);
 	},
 }
 </script>
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
index d7fd014..060a888 100644
--- a/src/components/Stream.vue
+++ b/src/components/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-	<li class="nav-item">
+	<li :id="`stream-${id}`" class="nav-item">
 		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
 			#{{id}} {{proto}}<br/>
 			{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}